cmux NEXT Needs you: the header list is glass with native metrics

Merged
TE
14d ago
+277-150

Leo-ask: ask-e37374af1f

Leo, on the top-right Needs you popover (the chat header's badge and its list): "styling is shit on the top right bit".

This restyles that list only. Every behaviour stays: one-click answers, Go to source, Ask about this, compact mode, the empty state and the row a link opened the list on. It doesn't touch the bottom pill (JumpPill.tsx), useNeedsYou.ts, App.tsx, or the --acpmux-needs-you-mark token definition. That token is owned by #23877, and this PR only uses it.

What changed

  • Glass, one layer: the list is the shared popup glass (Popover's .ui-popup.ui-glass) and paints no fill of its own. The title used to paint a second frosted band over the rows. It's now a plain heading, and the rows scroll inside the list under it.
  • Header: the pin glyph is gone. "Needs you" is a muted 12px section heading, and the count is plain text instead of a grey badge.
  • Rows: native list metrics. 13px text, a 16px mark with no grey disc, rows padded 6/8px with 6px radius. The name is medium weight instead of bold. The kind ("Waiting", "Approval") is plain muted text instead of a chip. The ask shows two lines at most (it was three), and one line in compact mode.
  • Tools: Go to source (→) and Ask about this (?) are plain 20px icons with no border, sitting in the age's slot at the end of the row. They appear on row hover and on keyboard focus inside the row (:focus-within), and they stay in the Tab order (hidden with opacity only). The lone "Ask about this" text link under each row is gone. When the list opens, focus goes to the list itself, so no focus ring lands on the first row's arrow (that ring was the bordered square).
  • Answers and side question: the answer rows keep the permission-card look. The side question loses its own tinted box, and both use slightly tighter metrics.

Tests

  • New webviews/test/agent-pane-needs-you-popover.test.tsx checks:
    • the title has no pin glyph and the count has no chip chrome
    • the ask is clamped to 2 lines (1 in compact)
    • the kind has no chip chrome
    • both tools are named and have no border or fill
    • the tools are hidden at rest and shown on hover and :focus-within, never display:none or visibility:hidden
    • the list paints no fill or backdrop of its own
  • The existing agent-pane-needs-you.test.tsx passes unchanged. .acpmux-needs-you-ask-about and .acpmux-needs-you-go keep their classes.
  • scripts/web-lint.sh and prepush-gate.py both pass. The bun tests run on the fleet, since this Mac blocks local test runs. Fleet app compile-check at 397ea9e: passed (59 s).

Observed / Not run

  • Observed: web-lint (oxfmt, oxlint, type check) and prepush-gate pass locally.
  • Not run locally: bun tests (fleet run below), gallery renders (gallery-compare below).

Before / after

Gallery compare (agent-pane.needs-you, merge-base vs head): https://cmux-lawrences-mac-mini.tail137216.ts.net:18796/compare/sp-needsyou-popover/?entry=agent-pane.needs-you (tailnet)

No capture: webview-only

Changelog

Changed: The Needs you list in the chat header is lighter glass with tighter rows. Its tools show on hover or keyboard focus.

Agent session: cosmic-gray

🤖 Generated with Claude Code