PR #28962 - manaflow-ai/cmux

Leo, 2026-10-31: "AND THE FUCKING BACKGROUND ON THIS FUCKING BUILD ON THESE BUTTONS STILL ISN'T FUCKING REMOVESD"

Leo, 2026-10-25 (#25215): "why do the icons have their own background border situation instead of just being, you know, good"

What drew the background

The chat pane header's icon buttons (Session Info's list, Terminal, Browser, the chat menu ⋮) are web buttons in header.css, in their own row and in the pane's tab row alike. The native row tools from #27135 are still off by default (chrome.tabs.nativeRowTools), so they are not what this build drew. #27546 (7f9242d0eec, "an open panel's header toggle reads as on") gave every pressed tool the selection fill (background: var(--cmux-selection)) on its 24px square, in the chat header, the tab row and the floating chat. A pressed tool is one whose panel or split is open: Session Info open, or a Terminal or Browser split beside the chat. That fill is the plate. It also took back part of #26092 ("keep the selected header toggle unboxed"). Its comment said the native pane toolbar draws the same fill, but PaneToolbarView draws lit and toggled buttons with Palette.litGlyph ink only.

Takes back #27546: its pressed-toggle selection fill is the plate Leo is asking to remove.

Change

A pressed header tool reads as on by the lit-glyph ink alone (--agent-lit-glyph, which is Palette.litGlyph), hovered or not, with no background. This is how the native pane toolbar draws its lit and toggled buttons, and how the composer draws its Plan and Fast toggles. The lit ink is not the same as hover's text ink, so an open panel's toggle still reads as on (Leo, 2026-10-29: "i literally meant the ui depicting it as toggled or not").
Covers the chat header in its own row, the chat header in the tab row, and the floating chat's header and folded bar. Hover still changes only the hovered button's ink. Focus rings are unchanged.
HeaderIcon's selected glyph uses the same ink.

Tests (each fails at the parent commit's CSS and passes at the head)

webviews/test/chat-header-plain-icons.test.ts: the CSS lint no longer exempts a pressed fill and now covers the floating rules. A pressed tool has the lit ink and no background.
webviews/test/chat-header-tab-row-surface.test.ts (Playwright Chromium): rest, hover, pressed, pressed and hovered, menu open, focus and disabled, for every pane-header kind: the floating header, the floating bar, the chat header, and the chat header in the tab row (new). The computed background is transparent in every state.
ChatHeaderTools.gallery.tsx plainIcons play: no tool has a fill, and a pressed tool has the lit ink.
webviews/test/pane-header-native-plain-buttons.test.ts (new source lint for the native path): TitlebarBandButton and OverflowButton stay borderless, with no showing bezel, no state-drawing button type, no layer fill, no vibrancy or glass, no shadow and no selection fill. PaneToolbarView draws its lit and toggled buttons with Palette.litGlyph ink.

Command (Linux, Playwright Chromium): cd webviews && bun test test/chat-header-plain-icons.test.ts test/chat-header-tab-row-surface.test.ts test/pane-header-native-plain-buttons.test.ts (plus test/chat-header-strip.test.tsx at the head)

Red at c74c14c6a2b (tests only, base CSS): run 41173356324: 27 pass, 10 fail. The failures are the static lint, the pressed and pressed-hover states of all four header kinds, and the lit-ink check.
Green at 552af55b284: run 41174424897: 39 pass, 0 fail.

Screenshots

Leo, 2026-10-31: "WE DONT NEED FUCKIGN SCREENSHOTS JUST LET ME TRY THE SHIT OUT". To try it: open a chat, then open Session Info (the list icon) or a Terminal or Browser split. The button now turns the accent color with nothing behind it, hovered or not.

Observed / Not run

Observed: the two cmux-ci runs above, local Bun runs, vp fmt --check, oxlint, tsc, and the cmux-next prepush gate.
Not run: the agent-pane.header-tools gallery play (plainIcons). It runs in the gallery advisory job. scripts/gallery-compare.sh from this host was refused because the host holds no fleet key and cannot reach the gallery host. The native lint reads source only; no Swift changed.

Overlap: #28116 (open, held) clears the opaque document root behind the tab-row tools in Chromium chats. That is a different fix: a box behind the whole group, not a plate on each button. Both PRs touch chat-header-tab-row-surface.test.ts.

Design spec: the chat header tools surface (header.css). The rule is unchanged: no plate, pill, border or shadow at rest or pressed, and hover lights only the hovered button.

risk: normal (CSS only, webview).

Changelog

Fixed: Chat header buttons no longer draw a background while their panel is open; an open panel's button shows in the accent color.
Agent session: agent session

🤖 Generated with Claude Code