fix(agent-pane): make the Summary popover glass, not solid
Leo: "I don't like the non-glassness"
Standing rule: glass, never opaque. Legibility comes from blur, tint and contrast inside the glass, never from an opaque fill.
Cause
In a narrow pane, the agent chat's Summary popover (Outputs / Subagents / Sources / Background tasks; summary/SummaryCard.tsx, <aside class="acpmux-summary-card" data-placement="popover">) was painted solid by summary/summary.css: background: var(--surface-popup) on both .acpmux-summary-card and .acpmux-summary-card[data-placement=popover]. --surface-popup is the host's opaque --cmux-popup-surface. The card never carried the shared glass class. test/popup-surface.test.ts had it listed as one of the "other floating surfaces" that keep the opaque popup surface.
Fix
- The popover now carries the shared
ui-glass ui-glass-floats(ui/glass/glass.css): the glass tint plus the shared backdrop blur, with the Chromium underlay that floating glass gets. The inline column (wide pane) keeps its page-colored column. summary.cssno longer paints--surface-popupor its own box-shadow on the popover. It sets the same tokens.ui-popupsets:--glass-elevation: var(--ui-popup-drop),--glass-edge(the popup hairline) and--glass-opaque: var(--surface-popup). So the popover keeps the one popup elevation and one hairline. Under Reduce Transparency it falls back to the opaque popup surface, as glass.css requires.- It does not use
.ui-popup, because the popover slides in from the pane edge (presence) and.ui-popupbrings the menu sizing from ui.css and the instant-open rules. - Test:
popup-surface.test.tsnow lists the Summary popover among the glass surfaces (translucent and blurred under the lens and Plain glass; opaque and unblurred under Reduce Transparency; same popup elevation).
Screenshots
Generated by the gallery advisory run (Linux Chromium, agent-pane.narrow/summary, 280 px pane, the Summary popover open). These are fixture captures.
| Before (solid) | After (glass) | |
|---|---|---|
| Dark | ![]() | ![]() |
| Light | ![]() | ![]() |
I viewed the after images. In both themes the popover is now translucent glass: the chat behind it shows through, tinted and blurred, under the same hairline rim and drop shadow as the model menu. The popover's own title, empty-state text and Attach row stay legible.
Gallery: agent-pane.narrow/summary, agent-pane.summary-card
Review
- Code: Codex gpt-6-astra (high, fast) said SHIP at 6c09e46ee755dd7508587502b8d427a990b05a34 (next-review receipt on this PR). At the base-merged head it found no correctness defect.
- Visual: a Codex gpt-6-astra review of the before and after images above returned VISUAL SHIP: "The popover clearly changed from a solid fill to translucent glass in both themes. Its own text remains legible... I see no clipping, doubled edges, misalignment, or doubled shadow."
- Focused Linux checks:
vp fmt --check,check-glass-never-opaque.ts, and popup-surface / popup-one-hairline / glass-never-opaque / agent-pane-subagents-tab / gallery-agent-pane-entries on chromium and webkit (92 pass, 0 fail).
Risk
Low. This is CSS plus one className on one popover. The inline column keeps its existing fill and shadow, now set on its own rule instead of inherited from the base rule.
Agent session: agent session
š¤ Generated with Claude Code



