Repository navigation
Agent chat: no opaque rectangle behind the header buttons in the tab row - #32944
Conversation
… as the page ships The browser test loaded src/styles.css, which the agent pane bundle never loads, and set the row's html color itself, so it passed while the shipped page painted WebTheme's html background (a chat's own color) behind the tools. It now loads only the pane's own sheets under WebTheme's html rule and reads the page's own pixels; the toggled Session Info plate stays. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Agent-Session: https://cmux.com/deeplink/agent?id=aid-7a7568197607c3cdfb81
The agent page's document root paints WebTheme's page background
(html{background:var(--cmux-surface-background) !important}): a chat's own
color under appearance.surfaces.agentPane, or the opaque surface. The rule
meant to clear it in the tab row (#25638) went into webviews/src/styles.css,
which the pane's bundle never loads, so the color filled the row behind the
tools, and #32039 then painted the same color behind the tabs. The row now
has no backing: html is clear while the chat shares the row, the shell paints
the page background below the row only, and the strip behind the tabs is
clear again (only the user's own tab bar color fills it). Takes back #32039.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Agent-Session: https://cmux.com/deeplink/agent?id=aid-7a7568197607c3cdfb81
GitHub Actions
Inactive
|
cmux status (one comment, edited in place; each line is updated by the job that owns it) Review App of this head (app.zip, kept 1 day)
Gallery before/after for
States
Pick other states with a Not verified: macOS jobs did not run: compile and app tests were skipped on CI passes on Written by red: cmux-next checks (god files, concurrency, crash safety, l10n); base red: the same failure on the base 09242cc; does not block Shipped in:
|
teamleaderleo
added
the
leo-named-fix
teamleaderleo
left a comment
teamleaderleo
left a comment
There was a problem hiding this comment.
Review (claude-opus-5-5 medium subagent): SHIP at 514860f
Review (subagent claude-opus-5-5 medium): SHIP at 514860f
Visual verdict: no images; code verdict only [follow-up].
Checked:
- The root cause:
dev.tsxloadsheader.cssand neversrc/styles.css, and WebTheme's injectedhtml{...!important}rule painted the row. - Specificity:
html:has()scores (0,2,1), above (0,0,1). - The page background below the row is kept, the loading shell included. No double-painted translucent layer:
pageColoris alpha 0 whenever an override exists. - The
tabRowSurfaceremoval is complete, and the tests are sound (red on base for the web test).
Follow-ups:
- [follow-up] Make the Swift test assert that the chat actually shares the row at both widths.
- [follow-up] Drop or annotate #25638's now-duplicate
html:hasrule inwebviews/src/styles.css. - [follow-up] Check whether WebTheme's root background transition fades when
data-tab-rowtoggles.
|
Found 6 test failures on Blacksmith runners: Failures
|
![Fix with [code]smith](https://pr-comments-assets.blacksmith.sh/codesmith/fix-with-codesmith-light-3x.png)
…keep its design, keep the fade test Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Agent-Session: https://cmux.com/deeplink/agent?id=aid-81baa1463f6190d4c5dc
Leo (2026-11-03), on the chat's header buttons: "also the session info button background is what i was talking about... it is in this version... this is the thing that has plagued us for literal weeks... it's so obvious to just remove the thing / you literally see a background on the buttons itself and it's just terrible looking", then: "the toggle you keep" and "I AM TALKING ABOUT THE ... ABSOLUTELY UNINTENTIONALL LOOKING ... OPAQUE RECTANGLE".
What drew the rectangle
The agent page's document root paints WebTheme's page background:
html{background:var(--cmux-surface-background) !important}(WebTheme.swift bootstrap). That is the chat's own color whenappearance.surfaces.agentPaneis set, or the opaque surface in an opaque window. While the chat shares the pane's tab row, thathtmlfill ran under the header tools as a band from the tabs' end to the pane's rounded corner.html:has(.acpmux-shell[data-tab-row]){background:transparent !important}, but put the rule inwebviews/src/styles.css, which the agent pane bundle never loads (build-agent-pane-web.shtakes the sheetsacpmux/dev.tsximports). Its test loaded that file and set the row's html color itself, so it passed.html.PaneContentView.paintStrip,tabRowSurface), so the band covered the whole row instead of going away.Takes back #32039: the strip behind the tabs paints the chat's color, which makes the row a band of that color over the window art, and this PR removes that band.
Change
header.css:htmlis clear while the chat shares the tab row. The shell paints the page background (--cmux-surface-background, under--agent-page-bg) below the row only. The header row has no backing; the hover pill and the toggled plate ([aria-pressed=true]) on each button stay.PaneContentView.paintStrip: the strip behind the tabs is clear again, and only the person's own tab bar color (appearance.surfaces.tabBar) fills it. ThetabRowSurfaceplumbing from Agent chat: the tab row behind the tabs takes the chat's own background (no band) #32039 is removed.themeDidChange,panesPaintBackground).Spec: leo-workspace
design/session-info.md: "The header buttons that open Session Info sit on no background ... only the hover pill, and the filled rounded square while the panel is open."Tests
webviews/test/chat-header-tab-row-surface.test.ts(browser lane) loads the page as it ships: only the pane's own sheets plus WebTheme's html rule, with an opaque and a translucent chat color. It reads the page's own pixels: alpha 0 across the row beside and between the tools, the toggled Session Info plate present, and the page color below the row. Fails at 2bb56d7 (test only), passes at the head.TabRowToolsStayClickableTests.theTabRowHasNoBackingWhileTheChatSharesIt: with a chat color set and the chat in the row, the strip has no fill; with a tab bar color, the strip paints that color.Observed / Not run
scripts/web-lint.sh(fast part) andprepush-gate.pypassed. Compile and the browser test red/green run on the fleet; results go in a comment.cmux-ci capturetimed out on the fleet and the broker).Changelog
Fixed: an agent chat that shares the pane's tab row no longer draws an opaque rectangle behind its header buttons; the row sits on the window's glass.
Agent session: agent session
🤖 Generated with Claude Code
Open in [code]smith · Need help on this PR? Tag
@codesmith-botwith what you need.Summary by cubic
Removes the opaque rectangle behind the header buttons when an agent chat shares the pane's tab row. The row now sits on the window's glass, keeping only each button's hover pill and toggled plate.
src/styles.css, which the agent pane never loads, and a prior change painted the same color behind the tabs.Changelog
Fixed: an agent chat that shares the pane's tab row no longer draws an opaque rectangle behind its header buttons.
Written for commit 514860f. Summary will update on new commits.