Agent composer: topStripStyle=tray, a filled tray tucked under the card (Debug toggle)

Merged
TE
22d ago
+158-4

Adds tray as a fourth value of the Debug toggle agentPane.debug.topStripStyle (default | bump | plain | tray). The default stays default, so nothing changes unless someone picks tray in Debug settings.

With tray, the new chat's location strip, the New Tab's strip and a started chat's queued prompts become one filled tray. It sits 8 px in from the card's sides and tucks 12 px under the card's top edge. The card is raised over it, with its whole rim. The look comes from cg-design-judge's top-strip board (tray won 3-1, 185/240), plus the judge's three fixes:

  • The folder icon and the queue numbers sit on the prompt's text column: 16 px into the chat card, 18 px into the New Tab card. Measured as the icon box plus its 1.5 px ghost bearing (ui/ghost.css).
  • The new chat strip and the queue share one inset and one tuck, defined once (--acpmux-tray-inset, --acpmux-tray-tuck).
  • In light themes the fill is one small step from the card's near-white surface (light-dark(text 5% over --acpmux-composer-surface, --acpmux-composer-tray)), not the heavy tray tone. Dark themes keep the composer's tray tone.

The CSS is scoped under html[data-top-strip="tray"] in composerLocation.css. The Swift side adds the enum case and its Debug title.

Tests

  • 5c44e05b98f (tests only): composer-top-strip-variants.test.ts runs tray on the new chat strip, the queue and the New Tab strip, at 760 and 400 px, in Catppuccin Latte, Apple System Colors Light and Catppuccin Mocha. Each case checks four things: the tray is tucked under the card with the card on top; the first ink is within 0.5 px of the prompt's text; the fill differs from the card's in light themes; the insets are symmetric. A separate test checks that the new chat strip and the queue share one inset. Locally: 20 fail before the fix. AgentPaneTopStripStyleTests lists the four values in order and doesn't compile without the case.
  • ba80ddcbfb0 (implementation): 47/47 browser tests and 4/4 Swift tests pass, as does bun run check. The default and bump cases in the same file are unchanged and still pass.
  • The test file declares a 300 s per-file limit (// cmux-web-test-timeout: 300). Its 47 browser cases, each a fresh page at about 2 s on the CI runner, ran past the default 120 s.
  • Tagged build cg-composer: debug.tunables set agentPane.debug.topStripStyle tray is accepted and persists across a relaunch. A new agent tab's page matches html[data-top-strip="tray"] .acpmux-composer-strip. Screen capture isn't permitted on that host, so the stills below are gallery renders.

Stills

Hero, light and dark (760 px, new chat):

New chat

Theme760 px400 px
Catppuccin Latte
Apple light
Catppuccin Mocha

Queued (started chat)

Theme760 px400 px
Catppuccin Latte
Apple light
Catppuccin Mocha

Top-left corner, zoomed (Latte, Apple light, Mocha; new chat then queued):

🤖 Generated with Claude Code