Composer: show focus, and lighten the footer chip focus ring

Merged
TE
22d ago
+160-10

A focused composer looked exactly like an idle one. The card's rim stepped 8% toward the text on focus, which no theme showed, so at 760, 400 and 300 px, in light and dark, there was no cue that the prompt had focus. Tabbing to a footer chip (the model chip, +) had the opposite problem: the shared 1.5 px ring sat 2 px off a chip with no bezel, so it drew an empty grey rectangle around bare text, the heaviest mark in the row.

With this change:

  • Composer focus is visible but still quiet. The rim keeps its one device pixel and its neutral tone (no accent, no wider ring) and steps 30% toward the text. The location strip on the card's top edge takes the same tone, so the focused card and strip stay one outline. Queued prompts stacked on the card take the same tone for the same reason. The New Tab box uses the same token, so the two composers still match. appearance.borders none, shell mode and Increase Contrast work as before.
  • A footer chip under keyboard focus takes its own hover wash (the row's quiet 6% ink wash, not the pane's heavier 14% fill), and the shared ring sits on the wash's edge (offset 0), so it outlines a visible control the way Send's ring circles its disc. The model, effort and access chips also step their ink up to the text color, as on hover (unrestricted access keeps its warning color). Pointer clicks still draw no ring. Increase Contrast keeps the shared ring at its 2 px offset.

This reverses part of the 10-14 "quiet focus" call (Lawrence: "don't like this focus thing"). The rim is still a hairline with no accent, but the step is now big enough to see. newtab-quiet-focus.test.ts used to cap the lift at under 0.08. It now requires a lift between 0.12 and 0.3, so the step can't drift back to invisible or grow loud. It also checks that the queue's edge follows the card's focus and that a focused chip's ink matches hover. Please confirm this before merging.

Stills: before/after, Catppuccin Latte and Mocha, 760 / 400 / 300 px

Composer at rest (prompt blurred) vs focused:

box light
box dark

Keyboard focus on the model chip, and on Send for comparison (Send is unchanged):

chip crop
chip light
chip dark

Borrowed from AI Elements

  • Focus belongs to the whole composer group, not the textarea: AI Elements rings the InputGroup (border-ring) and strips the textarea's own ring. Here the card's rim carries focus and the location strip and queue follow it.
  • Color restraint: a control's ink is muted at rest and steps to the text color on hover; focus reuses that same step instead of adding an accent.
  • Bar buttons' focus ring sits on the button's own fill (focus-visible:ring-3 on an outline/ghost button), which is why the chip ring now hugs its hover wash at offset 0.

Tests

The PR has two commits: the tests first, then the fix. On the base, 14 of the 24 browser tests fail.

  • newtab-quiet-focus.test.ts checks, for the composer and the New Tab box in dark and light at 1x and 2x, that the focused rim lifts visibly but only by one step. It also checks that the location strip's edge follows the card's focus and matches the card's rim, and that a keyboard-focused footer chip shows the row's hover wash (resolved in the chip's ink) with the ring at offset 0. A click draws no ring, and Increase Contrast keeps the 2 px offset.
  • composer-rim-hairline.test.ts expects the focused rim's alpha for the 30% step.
  • The composer-rim.html harness gained a footer chip and a composer with a location strip.
  • I ran both browser files locally with CMUX_BROWSER_TESTS=1 and all 26 pass. bun run check in webviews/ passes (layers, type scale, system blue, text focus rings, vp check).

No new strings, so no localization changes. The change is web-only (CSS), with no Swift changes.

🤖 Generated with Claude Code