sessions: drop the composer card, give each control its own surface by TylerLeonhardt · Pull Request #334655 · microsoft/vscode

TylerLeonhardt · 2026-09-04T22:58:01Z

Over a chat background the new-session composer sat on a single frosted card, while a started session gives every control its own surface. This makes the composer match the started session.

How it looks

The new NewSessionChatBackground fixture, over the codicon wallpaper. The composer sits straight on the background with no card, the workspace pills and the input and each bottom-row chip carry their own opaque surface and a thin frame, and the wallpaper reads through the gaps between them.

Light	Dark

There is no CI-hosted "before" to pair these with, because the fixture is new here and no earlier one rendered the composer over a background. The card it replaces is the rule deleted from chatView.css in the diff: a color-mix fill under backdrop-filter: blur(...) saturate(1.08), plus a border, a large radius and a shadow, wrapped around the composer as a whole. The other fixtures in the CI screenshot report change only by a few pixels, since off a background the new chip fill matches what was already behind it.

What changed

Deleted .new-chat-widget-content's card styling — the padding, blur, border, radius and shadow.
Gave the bottom-row action labels and the workspace pills an opaque --session-view-background fill, and put a 2px gap between the agent host config controls now that they no longer share one surface.
Kept the hover tint opaque. --vscode-toolbar-hoverBackground is translucent, so it goes on background-image as a flat gradient and composites over the opaque fill instead of replacing it. The bottom-row hover rule also needs the .monaco-workbench.agent-sessions-workbench prefix to outrank the shared action-bar hover in workbench style.css.
Framed the bottom-row chips when a chat background is set, the same move the in-session secondary toolbar makes in chatView.css. The frame leads with --vscode-contrastBorder and falls back to --vscode-commandCenter-inactiveBorder, so high contrast gets a solid stroke while every other theme matches the workspace pill directly above. Using the button-secondary palette the in-session rule uses would have replaced the --session-view-background fill.

Verification

./scripts/test.sh --grep "Sessions - Chat" — 80 passing. chatView.test.ts now covers the opaque fill and the conditional border on both the background and no-background paths.
New NewSessionChatBackground component-explorer fixture, screenshotted and approved in light and dark.
Checked live in an Agents window. With a background: 1px solid rgba(139, 148, 158, 0.25) / 4px radius / rgb(255, 255, 255) fill on every chip in light, and rgba(157, 157, 157, 0.25) / rgb(24, 24, 24) in dark. Without one: 0px none, unchanged.

🤖 Generated with Claude Code

Copilot

Copilot review overview

🟡 Changes recommended

The screenshot fixture obscures its wallpaper, and the new control borders lack a reliable high-contrast treatment.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Review tier: Balanced
Findings: 1

New issues introduced by this change (1)

Severity	Finding
	`src/vs/sessions/contrib/chat/browser/media/chatWidget.css` — This newly added control frame is not reliable in high-contrast themes.…

What changed in this PR

Aligns the new-session composer with started-session control surfaces.

Changes:

Removes the shared frosted composer card.
Adds opaque, individually framed controls with preserved hover tint.
Adds CSS assertions and a background screenshot fixture.

File	Description
`agentHostSessionConfigPicker.css`	Spaces independent configuration controls.
`newChatWidget.fixture.ts`	Adds the chat-background visual fixture.
`chatView.test.ts`	Tests composer surface styling.
`chatWidget.css`	Styles individual controls and hover states.
`chatView.css`	Removes the shared composer card.

Suppressed comments (1)

src/vs/sessions/contrib/chat/test/browser/newChatWidget.fixture.ts:345

This background fixture still assigns an opaque inline background-color to the .session-view below. Inline style wins over chatBackground.css's .has-chat-background .session-view { background-color: transparent; }, so the codicon layer is covered and the new screenshot does not exercise the wallpaper/composer contrast described here. Leave the inline fill unset for this variant so the production transparency rule can apply.

});

💡 Configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

github-actions · 2026-09-04T23:18:40Z

Screenshot Changes

Base: d4471383 Current: 50c3fa1c

Changed (34)

sessions/chat/newWidget/newChatWidget/NewSessionDefault/Dark

Before	After

sessions/chat/newWidget/newChatWidget/NewSessionDefault/Light

Before	After

sessions/chat/newWidget/newChatWidget/NewSessionAutoModel/Dark

Before	After

sessions/chat/newWidget/newChatWidget/NewSessionAutoModel/Light

Before	After

sessions/chat/newWidget/newChatWidget/NewSessionCompactAutoModel/Dark

Before	After

sessions/chat/newWidget/newChatWidget/NewSessionCompactAutoModel/Light

Before	After

sessions/chat/newWidget/newChatWidget/NewSessionWorkspacePicker/Dark

Before	After

sessions/chat/newWidget/newChatWidget/NewSessionWorkspacePicker/Light

Before	After

sessions/chat/newWidget/newChatWidget/NewSessionGitHubContextPicker/Dark

Before	After

sessions/chat/newWidget/newChatWidget/NewSessionGitHubContextPicker/Light

Before	After

sessions/chat/newWidget/newChatWidget/NewSessionAttachedContext/Dark

Before	After

sessions/chat/newWidget/newChatWidget/NewSessionAttachedContext/Light

Before	After

sessions/chat/newWidget/newChatWidget/NewSessionPhoneAttachedContext/Dark

Before	After

sessions/chat/newWidget/newChatWidget/NewSessionPhoneAttachedContext/Light

Before	After

sessions/chat/newWidget/newChatWidget/NewSessionRemoteWorkspace/Dark

Before	After

sessions/chat/newWidget/newChatWidget/NewSessionRemoteWorkspace/Light

Before	After

sessions/chat/newWidget/newChatWidget/NewSessionNarrow/Dark

Before	After

sessions/chat/newWidget/newChatWidget/NewSessionNarrow/Light

Before	After

sessions/chat/newWidget/newChatWidget/NewSessionComments/Dark

Before	After

sessions/chat/newWidget/newChatWidget/NewSessionComments/Light

Before	After

sessions/chat/newWidget/newChatWidget/NewSessionTip/Dark

Before	After

sessions/chat/newWidget/newChatWidget/NewSessionTip/Light

Before	After

sessions/chat/newWidget/newChatWidget/PromptOptionsLoading/Dark

Before	After

sessions/chat/newWidget/newChatWidget/PromptOptionsLoading/Light

Before	After

sessions/chat/newWidget/newChatWidget/PromptOptionsStandard/Dark

Before	After

sessions/chat/newWidget/newChatWidget/PromptOptionsStandard/Light

Before	After

sessions/chat/newWidget/newChatWidget/PromptOptionsGitHubMixed/Dark

Before	After

sessions/chat/newWidget/newChatWidget/PromptOptionsGitHubMixed/Light

Before	After

sessions/chat/newWidget/newChatWidget/PromptOptionsSelected/Dark

Before	After

sessions/chat/newWidget/newChatWidget/PromptOptionsSelected/Light

Before	After

sessions/chat/newWidget/newChatWidget/PromptOptionsEditedDisabled/Dark

Before	After

sessions/chat/newWidget/newChatWidget/PromptOptionsEditedDisabled/Light

Before	After

sessions/chat/newWidget/newChatWidget/PromptOptionsNarrow/Dark

Before	After

sessions/chat/newWidget/newChatWidget/PromptOptionsNarrow/Light

Before	After

2 insignificant change(s) omitted (≤20 px, Δ≤2). See CI logs for details.

Added (2)

sessions/chat/newWidget/newChatWidget/NewSessionChatBackground/Dark

sessions/chat/newWidget/newChatWidget/NewSessionChatBackground/Light

TylerLeonhardt · 2026-09-04T23:18:55Z

Also picked up the suppressed comment about the fixture's .session-view fill — the premise was right, the conclusion was not, and it was worth fixing either way.

Right: the inline backgroundColor did override chatBackground.css's .has-chat-background .session-view { background-color: transparent }. Confirmed against the rendered fixture — it computed to a fully opaque rgb(255, 255, 255) where production would be transparent.

Wrong: that never hid the wallpaper. .sessions-chat-background is position: absolute; z-index: 0, so it paints above a static, non-positioned block background no matter what colour that background is; the composer then paints above it in turn. The codicons were visible in both screenshots, and the wallpaper/composer contrast was being exercised.

Fixed anyway in b837ad5, since the fixture was reproducing production's appearance through a different layer stack than production's. The opaque base now sits on .part.sessionspart and .session-view is left unpainted, which is how the real window is put together. Both screenshot hashes are unchanged (200023c6aeec light, 812f24063993 dark) — pixel-identical, which is the tell that the layering was the only thing wrong.

TylerLeonhardt · 2026-09-04T23:31:22Z

Applied the regenerated manifest in 9c97f6e.

Most of the entries are this PR repainting the composer, and the NewSessionChatBackground pair is the fixture it adds. One entry is not from here, though — sessions/chat/input/chatInput/ResponsiveModelResizeCycleMinimal/Dark. That fixture renders the in-session chat input and does not use any of the four classes this PR touches, and the one rule removed from chatView.css was scoped :not(.new-chat-in-session), so it could not reach it.

de41bad400e (#334604) was the last commit to regenerate the manifest, and exactly one commit has landed on main since: 9db4cf85bcf (#334021), which changed chatView.css without refreshing it. This PR is just the first regeneration to pick that up, so the entry rides along here.

Worth noting the report was generated from da1044f3a2f, before the two review fixes in b837ad51756. Both of those are pixel-neutral by construction — the fixture relayering produced byte-identical screenshots locally, and the contrastBorder change only diverges under high contrast, which these fixtures do not render — so I expect the next run to be quiet. It will say so either way.

TylerLeonhardt · 2026-09-05T00:11:17Z

Correction on that stray entry — my read of it was wrong, and CI called it.

I said ResponsiveModelResizeCycleMinimal/Dark had been inherited from #334021 and was riding along here. It has not. 8afa4c4eeb… is what main has held across roughly twenty manifest regenerations, and it is what the run on 9c97f6ea9cb produced. The value I committed, 7d2eab7f21…, came from the run on da1044f3a2f — the two runs disagree, so the report I pasted from had captured a one-off.

Fixed in 7b6e566 by restoring the main value. The manifest diff against main is now eighteen entries, all newChatWidget, which is the surface this PR repaints.

The first half of the old comment still holds: that fixture does not use any class this PR touches, and the removed chatView.css rule was scoped :not(.new-chat-in-session). So the entry never belonged in this diff — I just got the reason wrong.

Why it moves at all: it is the only blocksCi: true fixture that sets virtualTime: { enabled: false }, and it drives nineteen sequential resize widths on wall-clock time. Every blocksCi fixture in newChatWidget.fixture.ts keeps the virtual clock. Locally it is stable across re-mounts in one session, so this is a run-to-run flake rather than a settling bug you can catch by re-rendering. Not something to chase in this PR, but it will bite whoever regenerates the manifest next.

Over a chat background the new-session composer sat on a single frosted card, while a started session gives every control its own surface. This makes the composer match the started session. - Delete `.new-chat-widget-content`'s card styling: the padding, blur, border, radius and shadow. - Give the bottom-row action labels and the workspace pills an opaque `--session-view-background` fill, and put a 2px gap between the agent host config controls now that they no longer share one surface. - Keep the hover tint opaque. `--vscode-toolbar-hoverBackground` is translucent, so it goes on `background-image` as a flat gradient and composites over the opaque fill instead of replacing it. - Frame the bottom-row chips when a chat background is set, the same move the in-session secondary toolbar makes in `chatView.css`. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

The chip frame over a chat background used commandCenter.inactiveBorder, which — unlike its sibling border tokens — registers no hcDark/hcLight value, so it stayed a 25%-alpha wash in high contrast. Put contrastBorder first, the way the rest of the codebase does: high-contrast themes define it, others fall through. The chat-background fixture painted its opaque base on .session-view, which production makes transparent so the wallpaper can show. Move that base onto the part instead. Both screenshots are byte-identical, since the wallpaper is positioned and always painted above a static background either way — but the fixture now stacks its layers the way the real window does. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Regenerated by CI. Most entries are this PR repainting the composer, and the NewSessionChatBackground pair is the fixture it adds. One entry is not from here: chatInput/ResponsiveModelResizeCycleMinimal/Dark. #334021 landed after the manifest was last regenerated and changed chatView.css without refreshing it, so this PR is the first regeneration to pick that up. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

ResponsiveModelResizeCycleMinimal/Dark is not a fixture this branch touches, but the regenerated manifest I pasted carried a one-off hash for it. Put back the value main has held across ~20 regenerations, which is also what the latest run produced. That fixture is the only blocksCi one that sets virtualTime.enabled to false, and it drives 19 sequential resize widths on wall-clock time, so its final frame can land mid-settle on a loaded runner. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Copilot AI balanced review requested due to automatic review settings September 4, 2026 22:58

Copilot started reviewing on behalf of TylerLeonhardt September 4, 2026 23:00 View session

TylerLeonhardt force-pushed the tyler/composer-control-surfaces branch from 5ff45d6 to da1044f Compare September 4, 2026 23:04

Copilot AI reviewed Sep 4, 2026

View reviewed changes

Comment thread src/vs/sessions/contrib/chat/browser/media/chatWidget.css

TylerLeonhardt marked this pull request as ready for review September 4, 2026 23:27

TylerLeonhardt enabled auto-merge (squash) September 4, 2026 23:34

TylerLeonhardt mentioned this pull request Sep 5, 2026

sessions: redesign unified workspace picker #334591

Merged

vs-code-engineering Bot assigned TylerLeonhardt Sep 5, 2026

TylerLeonhardt and others added 4 commits September 4, 2026 18:06

TylerLeonhardt force-pushed the tyler/composer-control-surfaces branch from 7b6e566 to 78b28d2 Compare September 5, 2026 01:06

roblourens approved these changes Sep 5, 2026

View reviewed changes

Vritant Bhardwaj (vritant24) approved these changes Sep 5, 2026

View reviewed changes

TylerLeonhardt merged commit dcde63e into main Sep 5, 2026
40 checks passed

TylerLeonhardt deleted the tyler/composer-control-surfaces branch September 5, 2026 03:06

vs-code-engineering Bot added this to the 1.137.0 milestone Sep 5, 2026

Navigation Menu

Uh oh!

sessions: drop the composer card, give each control its own surface - #334655

sessions: drop the composer card, give each control its own surface#334655
TylerLeonhardt merged 4 commits into
mainfrom
tyler/composer-control-surfaces

TylerLeonhardt commented Sep 4, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

github-actions Bot commented Sep 4, 2026 •

edited

Loading

Uh oh!

TylerLeonhardt commented Sep 4, 2026

Uh oh!

TylerLeonhardt commented Sep 4, 2026

Uh oh!

TylerLeonhardt commented Sep 5, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

TylerLeonhardt commented Sep 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

How it looks

What changed

Verification

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Copilot review overview

🟡 Changes recommended

Uh oh!

Uh oh!

github-actions Bot commented Sep 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Screenshot Changes

Changed (34)

Added (2)

Uh oh!

TylerLeonhardt commented Sep 4, 2026

Uh oh!

TylerLeonhardt commented Sep 4, 2026

Uh oh!

TylerLeonhardt commented Sep 5, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

TylerLeonhardt commented Sep 4, 2026 •

edited

Loading

github-actions Bot commented Sep 4, 2026 •

edited

Loading