Summary

Tool calls in the Control UI chat render as heavily decorated nested cards (activity card, per-tool bubble, gradient summary pill with drop shadow). Dense agent sessions become hard to scan; a single 8-tool activity group fills an entire screen.

Problem to solve

Each collapsed tool row currently stacks three visual containers:

1. the Activity: N tools group card (border + card background),
2. a leaked chat-bubble box per tool message (background, border, and padding: 10px 14px), and
3. the summary button itself, with an accent gradient, inset highlight, and a 0 8px 22px drop shadow.

The bubble box in layer 2 is a CSS ordering bug: ui/src/styles/components.css starts with @import "./chat.css", so its legacy .chat-bubble rules load after chat/grouped.css and override the .chat-bubble--tool-shell resets (padding: 0; border: 0; background: transparent). Long tool summaries also wrap across multiple lines, making rows uneven.

Proposed solution

Flatten tool-call rendering into simple rows: chevron + tool icon + label + mono detail, one line with ellipsis, no border/gradient/shadow. Keep the Activity: N tools header as a flat clickable row with a thin left rule grouping its rows. Expanded tool detail keeps soft tinted input/output blocks without extra card chrome. Error states stay explicit (red icon/label + Error badge). Remove the duplicated legacy chat-bubble/tool-card CSS in components.css that fights the canonical chat/* styles.

Alternatives considered

Keeping the card look but removing only shadows — still leaves triple-nested boxes and the underlying CSS ordering bug; rows stay tall and noisy.

Impact

Every Control UI chat session with tool calls (most agent sessions) becomes significantly denser and easier to scan; an 8-tool activity group shrinks from roughly a full viewport to a few compact rows.

Evidence/examples

Before/after screenshots attached in the linked PR.

Additional information

Applies to both light and dark themes.