cmux NEXT composer: no pill at rest, hover pills one button, press shrinks a hair

Merged
TE
18d ago
+295-117

The composer's buttons now behave like the Claude app's dropdown chips (the "Bypass permissions" chip is the reference):

  • At rest: model, effort, mode, +, the mic, Plan, Steer and the fast toggle show their icon or label with no pill. The model, effort and mode pills used to draw a 6% fill at rest. That fill came from #21391 (04d7f6a459b2, "round composer pills and highlights"). Plan, when on, is accent text with no fill or ring.
  • Hover: a soft pill on the one button under the pointer (fine pointers only). The same pill shows while that button's menu is open and on keyboard focus (with the focus outline), for every button, + and the fast toggle included. + and the other menu buttons used to draw a brighter 16% fill and a ring when open.
  • Press: the button keeps its hover pill. The brighter, tinted press tones are gone: --acpmux-composer-press / --acpmux-row-press (from the cg-composer click polish), the mic's deeper red, Plan's deeper accent and the fast toggle's press. Instead the chip draws at 0.975 scale with a 4% opacity dip the moment it goes down. It holds while the button is down, including on chips that open their menu on press, and springs back over 140 ms with a slight overshoot on release, the fast toggle too. Nothing lingers. With Reduce Motion there is no shrink.
  • The composer box still never highlights on hover, and #21976's first-frame tone for an opening picker is kept.

The press is a transform, so it moves no layout. composer-chip-press.test.ts now measures the layout box (the drawn centre plus the offset size), and counts a move only at a whole pixel. This PR also folds in #21986's stricter no-move check, which now runs for every press, and its EffortPicker comment fix.

Testing

All runs on Huge Blue (Chromium and WebKit), CMUX_BROWSER_TESTS=1 bun test <file> in webviews/ after node scripts/pages/gen-strings.mjs.

  • test/composer-quiet-chips.test.ts test/no-system-blue.test.ts at the failing-test commit 6d7c554eb1c (the new tests over f01d4f82ca6's CSS): 30 pass, 10 fail. The open + chip drew a 24% ring. Plan on drew a pill at rest. The fast toggle got no pill on keyboard focus, and its transition dropped transform and opacity. A separate -t "a press" run showed the model chip losing its shrink while held in Chromium (scale back to 1 after 300 ms).
  • At the fix head dd28946e3ed: composer-quiet-chips 34 pass, composer-chip-press 52 pass, newtab-quiet-focus 22 pass, no-system-blue 6 pass, composer-row-layout 27 pass, composer-row-rhythm and quiet-access-chip pass.
  • composer-footer-plain fails 12 of 18, the same 12 at f01d4f82ca6. It expects the plain footer off by default, but #22050 turned it on (base finding).

Observed / Not run

  • Observed: the red and green runs above.
  • Not run: captures. The gallery CI job screenshots the composer entries, including the new agent-pane.composer quiet-chips variant.

Changelog

Changed: Composer buttons show no pill at rest; hovering, focusing or opening one gives it a soft pill, and a press shrinks it slightly and springs back, with no flash

🤖 Generated with Claude Code


View with [code]smith Autofix with [code]smith
Need help on this PR? Tag @codesmith-bot with what you need.


Summary by cubic

Makes the composer's buttons match the Claude app's dropdown chips: no pill at rest, a soft pill on the one button under a fine pointer, and a press that draws the chip at 0.975 with a 4% opacity dip before springing back over 140 ms.

  • Removes the 6% resting fill the model, effort, and mode pills drew, plus the brighter, tinted press tones for the mic, Plan, Steer, and the fast toggle, so a press no longer flashes.
  • The press is a transform, so it moves no layout; the stricter no-move check from #21986 now runs for every press and measures the layout box.
  • Folds in the EffortPicker comment fix.
  • Updates composer-quiet-chips, composer-footer-plain, and composer-chip-press tests to assert the new rest, hover, and press states.