PR #34378 - manaflow-ai/cmux

Leo's ask: "i think we ought to audit the whole tool call/notice/send and recieve message styling esp like see what we can iterate on in the gallery too"

This PR covers the person's prompt rows, the error/system cards and the attachments in the cmux NEXT agent chat transcript. Each fix below makes one of them match the bubble or card it should look like. Tool rows are handled by another PR.

Fixes

Cloud repository recovery line (.cv-repo-recovery, from #30357). It read --agent-error and --agent-success, which no stylesheet defines, so its #d66 and #5aaf83 fallbacks always drew. It also mixed its own 72% and 55% text inks, used a 5px button radius and had a 2px 0 8px 28px outer margin, and 28 is not one of our columns. Now it uses --agent-status-failure and --agent-status-success, --cv-text-muted and --cv-text-dim, and --ds-radius-control. It sits on the tool text column (padding-inline-start: var(--cv-tool-text-inset)) with no outer margin.
Editing a prompt in place (.cv-user__edit, from #19470). The editor had a 16 radius, 12 at the sides, a solid fill with a ring and a fixed min(100%, 560px) width. It now has the bubble's glass (ui-glass plus the bubble's glass variables), its 12 radius, its block padding, 16 at the sides and the bubble's widest width (70%), so opening the editor no longer changes the prompt's shape.
Empty-footer hover buttons and .cv-iconbtn--compact (from #22754). Their border-radius: 5px is now var(--ds-radius-control).
Version arrows (‹ n/m ›) (from #19565). The arrows were 12 while every other glyph in that footer row is ROW_ICON (16), and .cv-user__versions added a 2px gap of its own. The arrows are now 16 and the local gap is gone.
Recap card (.cv-recap, from #33162). It had a 1px solid var(--agent-border) border, 8/8/8/12 padding and an outer margin-block: 4px. It now uses the cards' hairline --cv-card-ring, --grid-cards-padding and no outer margin. model.ts already estimates this row as 24 plus its lines, which now matches the drawn 12 + 12 exactly.
Turn error card (from #24312). The card arm loses its margin-block: 2px 6px outer margin. In the rail arm, the actions were 21px in; they are now 14px + var(--grid-gap), under the cause's first word. model.ts never counted that margin in its estimate (a footer row is estimated as its button line), so no estimate changes.
One media radius. Sent thumbnails used a literal 12px while reply images and videos used 8. The new --cv-media-radius token now sets the sent thumbnail, its placeholder and failed slot, .cv-img, and chips.css .cv-media. The new gallery entry agent-pane.media-radius puts three options side by side: all 12, all 8, and sent 12 / reply 8 as before. I shipped all 8. The reference (claude/live/composer-image-attachments-grid) shows Claude's thumbnails rounded at about 5% of the tile, and a reply's video already drew at 8. The sent thumbnail keeps its 45% outline (Leo, 2026-10-13/14 in #20411: dark screenshots looked missing behind a hairline). The reply image's outer margin is unchanged.

Gallery

agent-pane.user-bubble#editing (new): plays Edit and shows the editor in place. The existing #running-edit-branches and #finished-original-branch show the arrows.
agent-pane.repo-recovery#outcomes (new): the waiting, attached and failed lines in their inks.
agent-pane.media-radius (new): compare, all-8, all-12, sent-12-reply-8.
Also touched: agent-pane.recap-note#card, agent-pane.turn-error-card, agent-pane.sent-images.

Tests

webviews/test/transcript-prompt-card-tokens.test.ts checks four things:

every var() that these card rules read is defined in some stylesheet (red on base: --agent-error, --agent-success);
their radii are never literals;
the cards add no outer margin;
sent thumbnails and reply images both use --cv-media-radius.

Spec sections followed

design/transcript-spacing.md "Prompt bubble" (12 radius, 16 at the sides, 70% max width)
design/grid.md: radii 4/6/8/12/16; rule 5, "a child never adds outer margin"; the cards' padding and radius
design/chat-transcript.md
design/foundations.md (status inks)

Reference ids: claude/live/composer-image-attachments-grid, cmux/live/transcript-image-attachment-card.

Follow-ups, left out on purpose: the Chief prompt clamp (Chief area), duration badges, attachment chip radii, ReplyActions dead code, and status text that was proportioned by hand.

Agent session: agent session

🤖 Generated with Claude Code

^{Open in [code]smith · Need help on this PR? Tag @codesmith-bot with what you need.}

Summary by cubic

Audits the agent chat transcript's prompt edit box, recap and error cards, and Cloud repo recovery line so they draw from design system tokens instead of literals and undefined variables that always drew fallback colors.

Bug fixes

The repo recovery line read --agent-error and --agent-success, which no stylesheet defines, so its fallback colors always drew; it now uses the shared status inks and sits on the tool text column with no outer margin.
The prompt edit box now uses the bubble's glass via its own --glass-* rules, so the bubble's selectors and shape stay unchanged; it gets a 12px radius and 70% width, so opening it no longer changes the prompt's shape.
Sent thumbnails, reply images, and videos share one --cv-media-radius token, shipped at 8px.
Recap and turn error cards now use the cards' ring, padding, and radius with no outer margin; rail actions align under the cause's words.
Version arrows match the row's 16px glyph, and hover and compact icon buttons use the control radius.
Adds gallery arms for the edit box, repo recovery outcomes, and media radius, plus a test that these rules read defined tokens and never literal radii.