cmux NEXT: composer, messages, menus, cards and the Inspector are liquid glass

Merged
TE
15d ago
+708-342

Follows #22815 (merged as 76c82f54dd0): rebuilt on feat-cmux-next as one commit with the surface changes alone. Plain glass is the default there and the Lens a Debug toggle, so the plain-only rules here key on "not lens or spectrum" (no data-glass is plain) and the lens rules on "lens or spectrum".

The cmux NEXT surfaces put on the liquid glass from #22815 (.ui-glass and the --glass-* tokens). Leo: "I don't like the non-glassness". Glass is never opaque.

What changes

  • Composer, queued prompts and fold bar are one glass stack. The lens bends no rim at the seams between them (--glass-join).
  • User message bubbles are glass with a light text tint.
  • Menus, popovers, context menus, pickers and the combobox (ui/popupSurface.css, the model, effort and access pickers, the mention menu) are glass. ui/README.md "Layers and transparency" now says popups are glass.
  • Hover cards, the link card, the session hover card, the Updated card and the jump pill are glass.
  • Inspector (it replaced the Summary popover, #22643): the overlay panel is glass and its section cards use a translucent tint. In push placement it is a column beside the chat and keeps the page background.
  • Plain glass is glass too. Plain glass (the default) used to put menus, popovers and cards on the solid popup surface. It now keeps the shared frost (60% tint over a backdrop blur). Only Reduce Transparency is solid.
  • A menu opened inside the composer is glass. On an opaque window the slash, mention and access menus inherited the composer card's solid tint with no blur. .ui-popup.ui-glass now sets the shared glass tint and frost itself, so a popup never takes the tint of the surface it opens from. popup-surface.test.ts holds a menu inside .acpmux-composer translucent and frosted (red before the fix: 4 fails across Chromium and WebKit).
  • A popup's own solid fill no longer hides its glass. Ten menus and popovers (the changes file and scope menus, Needs You, the new tab's chats filter) paint background: var(--surface-popup) on their own class, which beat .ui-glass and made them opaque under the blur. .ui-popup.ui-glass now paints the glass tint over one class. The gallery accent/glass invariant (test/accent-glass-invariants.test.ts) found them: 10 findings before, 0 after.
  • The Reduce Transparency fills and the --glass-join keywords carry the never-opaque check's glass-opaque-allow: comment with a reason (#23366). The check passes.

Overlap: #23066 restyles the same popups toward the native menu. Whichever lands second keeps the other's rim, outline and radius and adds .ui-glass (see the comment on #23066).

Media

No capture: webview-only change, no native UI. Before/after stills come from the gallery advisory run on this PR. The lens itself is shown in #22815.

Testing

Observed / Not run

Observed on cmux16 at 3bb30283050:

  • bun scripts/check-glass-never-opaque.ts: "none opaque". bun run check: clean.
  • CMUX_BROWSER_TESTS=1 bun test on the changed tests plus glass-state, glass-never-opaque and accent-glass-invariants: 146 pass, 0 fail. The invariant scanned 1645 of 1669 gallery stages (24 did not mount in the local run), 0 findings; the Inspector, Summary card, Updated card (changelog update surfaces) and Chief inspector entries: 32 stages, 0 findings.

Earlier, on the stacked branch:

  • 47 test files that touch popups, glass, cards, the composer queue or the Inspector, in Chromium and WebKit (CMUX_BROWSER_TESTS=1): 456 pass, 4 fail. All 4 fail the same way on base: composer-location-strip (340 px folder name), two in agent-pane-bottom-stack, and agent-pane-dock-gutters (its setup times out at 120 s on base 5159222^2 too).
  • prepush-gate.py: no new violations.

Not run: no Swift build (none is needed, webviews only). Gallery stills and the full webview sweep still to come from CI.

Changelog

Changed: Menus, popovers, hover cards, the composer, your messages and the Inspector are liquid glass, and Plain Glass stays see-through instead of turning solid.

Leo-ask: ask-0e7ea215d7
Leo-ask: ask-05d1166b73

Agent session: cmux16

🤖 Generated with Claude Code