Skip to content

fix: render tool summary header and content as one container#494

Draft
laileni-aws wants to merge 2 commits into
Amazon-Q-Developer:mainfrom
laileni-aws:fix/mcp-tool-summary-single-container
Draft

fix: render tool summary header and content as one container#494
laileni-aws wants to merge 2 commits into
Amazon-Q-Developer:mainfrom
laileni-aws:fix/mcp-tool-summary-single-container

Conversation

@laileni-aws

Copy link
Copy Markdown
Contributor

Problem

When a tool summary (for example an MCP tool call) is expanded in chat, the header (" ✓ Completed") and the expanded content ("Parameters" and results) render as separate rounded boxes. Per the UX spec they should read as a single container — the bottom of the header and the top of the content should not be rounded, with a divider between the header and the content.

Fix

In src/styles/components/chat/_chat-item-card.scss, when the summary is expanded (.show-summary):

  • Square the header's bottom corners (border-bottom-*-radius: 0).
  • Give the expanded content matching left/right/bottom borders and rounded bottom corners, and overflow: hidden so the inner parameter/result cards are clipped to the container shape.
  • The header's existing bottom border acts as the divider between the header and the content.

The result is a single bordered container: header on top, a divider, then the parameters/results, with only the outer corners rounded.

Scope / testing

  • Change is scoped entirely to the .mynah-chat-item-card-summary styles (the tool-summary component); no other components are affected.
  • npm run build compiles the styles successfully; full unit suite and eslint/prettier pass.
  • There are no end-to-end screenshot snapshots covering the tool-summary component, so no baselines are affected.
  • This is a CSS-only presentation change. I was not able to render it in a live IDE from this environment, so a quick visual sign-off against the design is recommended before marking ready.

Additional change

  • ui-tests/__test__/flows/quick-action-commands-header.ts: coerced a Playwright evaluate result to a boolean with Boolean(...) to satisfy @typescript-eslint/strict-boolean-expressions and keep the repo lint gate green.

When a tool summary (e.g. an MCP tool call) is expanded, the header
and the collapsed content were shown as separate rounded boxes. Square
the header's bottom corners and give the expanded content matching side
and bottom borders (with the header's bottom border acting as the
divider), and clip the inner cards to the container shape, so the
summary reads as a single container with a divider between the header
and the parameters/results.
Keeps the repo lint gate green (strict-boolean-expressions).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant