Agent header: the open panel's toggle requires its filled square; Esc closes native Session Info after a click in it

Merged
TE
3d ago
+250-31

Summary

Leo (2026-11-02, softened): "the entire point was to have it look good work good HAVE THE TOGGLED HIGHLIGHT". His reference image (the header with its list button highlighted, then the other tools) settled the design: a toggled-on header button gets a filled rounded square (the hover pill's size, a subtle tint) plus the lit ink. Every other button has no fill at rest. #28962 removed only the resting fill.

#32687 already put the pressed and hover square into header.css. This PR:

  1. Fixes the static lint that #32687 left red, and turns it into the guard for the settled design. webviews/test/chat-header-plain-icons.test.ts still forbade every fill and expected the focus rule's old background:none. It now refuses a fill on any header-tool rule that isn't in a lit state (:hover, [aria-pressed=true], [data-popup-open]). It also requires a pressed fill in the chat header, the tab row and the floating chat. I checked that it goes red if the pressed fill is removed or a resting fill is added.
  2. Gallery (agent-pane.header-tools). The plain-icons play now requires the pressed toggle's square and refuses a fill at rest. New session-info-open and session-info-open-accentless variants assert that the open Session Info toggle has a non-transparent background and the lit ink, and that every other tool at rest is transparent. They run in the default theme and in an accentless dark theme, where the ink alone read as off.
  3. Follow-ups from #32673:
    • The bun test now asserts the page posted to the App on mount.
    • It also builds the old host's close script from the Swift template in AgentPaneSessionInfo.actionScript and runs it against the page bridge, so it would fail on the pre-#32673 form. I checked: red with the old template, green now.
    • Esc closes the native panel after a click inside it. Before, the keyboard stayed in the page (the composer, say), whose Esc handler only closes from its toggle. Now a press on a line, a button, the edge or empty glass makes the panel first responder, with no ring. That matches how a click in the web panel focused it. When the panel closes with the keyboard inside, the chat takes the keyboard back. AgentPaneNativeSessionInfoTests.aClickInThePanelTakesTheKeyboardSoEscClosesIt covers it.

Specs: design/chat-header.md ("Header buttons draw no plate, pressed included (cmux#28962)") is updated in a leo-workspace notes PR: pressed = filled rounded square + lit ink, rest = no fill. design/session-info.md: "Its header toggle and Esc (from inside it) close it."

References (cmux-design-references ids): cmux/live/top-right-toolbar-actions, cmux/live/sidebar-session-info-button-strip, cmux/live/toolbar-top-right-stray-line.

Out of scope: the native pane toolbar (PaneToolbarView, Debug chrome.tabs.nativeRowTools, off by default) keeps its ink-only toggled state.

Test plan

  • cd webviews && bun test test/chat-header-plain-icons.test.ts test/native-session-info-toggle.test.tsx: 8 pass (head). The plain-icons lint fails on base at 0f0ebe5 (2 of 3).
  • scripts/web-lint.sh: passes (the type-aware lint is left to CI on this host).
  • Swift: cmux-ci compile-check --package CmuxNext. Results in a comment.

Observed / Not run

  • Observed: the bun tests above, red and green as described; the prepush gate reports no new violations.
  • Not run here: the gallery plays (browser lane, the gallery advisory run covers them) and the Swift tests (this host's cmux-ci test goes to the Linux pool, which can't build the AppKit package). No capture.

Changelog

Fixed: the open Session Info toggle shows its highlight in every theme, and Esc closes native Session Info after a click inside it.

Agent session: agent session

🤖 Generated with Claude Code

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

Summary by cubic

Restores the toggled highlight on the open Session Info toggle in the agent header, and makes Esc close the native Session Info panel after a click inside it.

Header toggle highlight

  • A pressed or otherwise open header tool now draws a filled rounded square with the lit ink; tools at rest draw no fill behind their glyphs.
  • The hover pill rule excludes an on tool, so hovering an open toggle keeps its square instead of lightening it.
  • The header lint and gallery plays now require the pressed fill and reject any fill at rest, in the chat header, tab row, and floating chat; the lint splits selector lists at top-level commas and ignores lit states inside :not(...).
  • New gallery variants assert the same in an accentless dark theme, where the ink-only toggle read as off.

Esc closes native Session Info

  • Clicking a line, button, edge, or empty glass in the panel now gives it the keyboard (no focus ring), so Esc closes it; previously the keyboard stayed in the page and Esc only worked from the toggle.
  • When the panel closes with the keyboard inside, focus returns to the chat.
  • The bun test now asserts the page posts its panel state to the App on mount and runs the old host's close script, which would fail on its pre-fix form.