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

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>

Author: TylerLeonhardt

src/vs/sessions/contrib/chat/browser/media/chatView.css

@@ -38,17 +38,6 @@
 	overflow: hidden;
 }
 
-.monaco-workbench.agent-sessions-workbench .part.sessionspart.has-chat-background .chat-view .sessions-chat-widget:not(.new-chat-in-session) .new-chat-widget-content {
-	box-sizing: border-box;
-	padding: var(--vscode-spacing-size120);
-	background: color-mix(in srgb, var(--session-view-background) 86%, transparent);
-	-webkit-backdrop-filter: blur(var(--vscode-spacing-size160)) saturate(1.08);
-	backdrop-filter: blur(var(--vscode-spacing-size160)) saturate(1.08);
-	border: var(--vscode-strokeThickness) solid color-mix(in srgb, var(--vscode-editorWidget-border, var(--vscode-widget-border)) 70%, transparent);
-	border-radius: var(--vscode-cornerRadius-large);
-	box-shadow: 0 var(--vscode-spacing-size80) var(--vscode-spacing-size240) color-mix(in srgb, var(--vscode-widget-shadow) 18%, transparent);
-}
-
 .monaco-workbench.agent-sessions-workbench .part.sessionspart.has-chat-background .chat-view .interactive-session .chat-secondary-toolbar .action-label,
 .monaco-workbench.agent-sessions-workbench .part.sessionspart.has-chat-background .chat-view .interactive-session .chat-context-usage-widget {
 	background-color: var(--vscode-chat-list-background, var(--vscode-button-secondaryBackground));

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

@@ -204,12 +204,30 @@
 
 /* Match VS Code chat-secondary-toolbar sizing for action items in the bottom row
  * (e.g. session control pickers and repo config pickers) so they align with the
- * model picker font in the input toolbar. */
+ * model picker font in the input toolbar. Each item carries its own opaque
+ * surface so a chat background cannot show through it. */
 .new-chat-widget-container .new-chat-bottom-container .action-label {
 	height: 16px;
 	padding: var(--vscode-spacing-size40) var(--vscode-spacing-size80);
 	font-size: var(--vscode-fontSize-label2, 11px);
 	color: var(--vscode-icon-foreground);
+	background-color: var(--session-view-background);
+}
+
+/* Over a chat background these chips sit straight on the wallpaper with nothing
+ * to separate their opaque surface from it, so give them a frame — the same move
+ * the in-session secondary toolbar makes in chatView.css. */
+.monaco-workbench.agent-sessions-workbench .part.sessionspart.has-chat-background .new-chat-widget-container .new-chat-bottom-container .action-label {
+	border: var(--vscode-strokeThickness) solid var(--vscode-commandCenter-inactiveBorder, var(--vscode-widget-border));
+	border-radius: var(--vscode-cornerRadius-small);
+}
+
+/* Outranks the shared action-bar hover in workbench style.css, which would
+ * otherwise swap the opaque surface for a translucent one. The tint goes on the
+ * background-image layer so it composites over that surface. */
+.monaco-workbench.agent-sessions-workbench .new-chat-widget-container .new-chat-bottom-container .action-label:not(.disabled):hover {
+	background-color: var(--session-view-background);
+	background-image: linear-gradient(var(--vscode-toolbar-hoverBackground), var(--vscode-toolbar-hoverBackground));
 }
 
 .new-chat-widget-container .new-chat-bottom-container .action-label > .codicon {
@@ -279,6 +297,7 @@
 	gap: var(--vscode-spacing-size80);
 	min-height: var(--vscode-spacing-size240);
 	padding: var(--vscode-spacing-size20) var(--vscode-spacing-size120);
+	background-color: var(--session-view-background);
 	border: var(--vscode-strokeThickness) solid var(--vscode-commandCenter-inactiveBorder, var(--vscode-widget-border));
 	border-radius: var(--vscode-cornerRadius-circle);
 	box-sizing: border-box;
@@ -287,9 +306,13 @@
 	line-height: var(--vscode-spacing-size160);
 }
 
+/* Re-assert the opaque surface, which the generic picker-slot hover below would
+ * otherwise replace, and keep the tint on the background-image layer so it
+ * composites over that surface. */
 .sessions-chat-picker-slot.sessions-workspace-category-picker-slot .action-label:hover,
 .sessions-chat-picker-slot.sessions-workspace-category-picker-slot .action-label[aria-expanded='true'] {
-	background-color: var(--vscode-toolbar-hoverBackground);
+	background-color: var(--session-view-background);
+	background-image: linear-gradient(var(--vscode-toolbar-hoverBackground), var(--vscode-toolbar-hoverBackground));
 	border-color: var(--vscode-commandCenter-activeBorder, var(--vscode-focusBorder));
 	color: var(--vscode-foreground);
 }

src/vs/sessions/contrib/chat/test/browser/chatView.test.ts

@@ -605,70 +605,82 @@ suite('Sessions - Chat View', () => {
 		workbench.style.setProperty('--vscode-button-secondaryBackground', 'rgba(0, 0, 0, 0.08)');
 		workbench.style.setProperty('--vscode-button-secondaryBorder', '#808080');
 		workbench.style.setProperty('--vscode-button-secondaryForeground', '#202020');
-		workbench.style.setProperty('--vscode-cornerRadius-large', '8px');
+		workbench.style.setProperty('--vscode-commandCenter-inactiveBorder', '#606060');
 		workbench.style.setProperty('--vscode-cornerRadius-small', '4px');
-		workbench.style.setProperty('--vscode-spacing-size120', '12px');
 		workbench.style.setProperty('--vscode-strokeThickness', '1px');
 		const part = dom.append(workbench, dom.$('.part.sessionspart.has-chat-background'));
 		const chatView = dom.append(part, dom.$('.chat-view'));
 		const newChatWidget = dom.append(chatView, dom.$('.sessions-chat-widget'));
 		const newChatContent = dom.append(newChatWidget, dom.$('.new-chat-widget-content'));
-		const inSessionWidget = dom.append(chatView, dom.$('.sessions-chat-widget.new-chat-in-session'));
-		const inSessionContent = dom.append(inSessionWidget, dom.$('.new-chat-widget-content'));
+		const newChatContainer = dom.append(newChatWidget, dom.$('.new-chat-widget-container'));
+		const bottomContainer = dom.append(newChatContainer, dom.$('.new-chat-bottom-container'));
+		const bottomAction = dom.append(bottomContainer, dom.$('.action-label'));
+		const workspacePickerSlot = dom.append(newChatContainer, dom.$('.sessions-chat-picker-slot.sessions-workspace-category-picker-slot'));
+		const workspacePill = dom.append(workspacePickerSlot, dom.$('.action-label'));
 		const session = dom.append(chatView, dom.$('.interactive-session'));
 		const secondaryToolbar = dom.append(session, dom.$('.chat-secondary-toolbar'));
 		const secondaryAction = dom.append(secondaryToolbar, dom.$('.action-label'));
 		const contextUsage = dom.append(secondaryToolbar, dom.$('.chat-context-usage-widget'));
 		const plainPart = dom.append(workbench, dom.$('.part.sessionspart'));
 		const plainChatView = dom.append(plainPart, dom.$('.chat-view'));
-		const plainNewChatWidget = dom.append(plainChatView, dom.$('.sessions-chat-widget'));
-		const plainNewChatContent = dom.append(plainNewChatWidget, dom.$('.new-chat-widget-content'));
 		const plainSession = dom.append(plainChatView, dom.$('.interactive-session'));
 		const plainSecondaryToolbar = dom.append(plainSession, dom.$('.chat-secondary-toolbar'));
 		const plainSecondaryAction = dom.append(plainSecondaryToolbar, dom.$('.action-label'));
 		const plainContextUsage = dom.append(plainSecondaryToolbar, dom.$('.chat-context-usage-widget'));
+		const plainNewChatWidget = dom.append(plainChatView, dom.$('.sessions-chat-widget'));
+		const plainNewChatContainer = dom.append(plainNewChatWidget, dom.$('.new-chat-widget-container'));
+		const plainBottomContainer = dom.append(plainNewChatContainer, dom.$('.new-chat-bottom-container'));
+		const plainBottomAction = dom.append(plainBottomContainer, dom.$('.action-label'));
 		dom.getWindow(workbench).document.body.appendChild(workbench);
 		disposables.add(toDisposable(() => workbench.remove()));
 
 		const newChatStyle = dom.getWindow(newChatContent).getComputedStyle(newChatContent);
+		const bottomActionStyle = dom.getWindow(bottomAction).getComputedStyle(bottomAction);
+		const workspacePillStyle = dom.getWindow(workspacePill).getComputedStyle(workspacePill);
 		const secondaryActionStyle = dom.getWindow(secondaryAction).getComputedStyle(secondaryAction);
 		const contextUsageStyle = dom.getWindow(contextUsage).getComputedStyle(contextUsage);
 		assert.deepStrictEqual({
 			newChatBackgroundColor: newChatStyle.backgroundColor,
-			newChatBorderRadius: newChatStyle.borderRadius,
 			newChatPadding: newChatStyle.padding,
-			inSessionBackgroundColor: dom.getWindow(inSessionContent).getComputedStyle(inSessionContent).backgroundColor,
+			bottomActionBackgroundColor: bottomActionStyle.backgroundColor,
+			bottomActionBorderColor: bottomActionStyle.borderColor,
+			bottomActionBorderStyle: bottomActionStyle.borderStyle,
+			bottomActionBorderRadius: bottomActionStyle.borderRadius,
+			workspacePillBackgroundColor: workspacePillStyle.backgroundColor,
 			secondaryActionBackgroundColor: secondaryActionStyle.backgroundColor,
 			secondaryActionBackgroundImage: secondaryActionStyle.backgroundImage,
 			secondaryActionBorderColor: secondaryActionStyle.borderColor,
 			secondaryActionBorderStyle: secondaryActionStyle.borderStyle,
 			contextUsageBackgroundColor: contextUsageStyle.backgroundColor,
 			contextUsageBackgroundImage: contextUsageStyle.backgroundImage,
 			contextUsageBorderRadius: contextUsageStyle.borderRadius,
-			plainNewChatBackgroundColor: dom.getWindow(plainNewChatContent).getComputedStyle(plainNewChatContent).backgroundColor,
-			plainNewChatPadding: dom.getWindow(plainNewChatContent).getComputedStyle(plainNewChatContent).padding,
 			plainSecondaryActionBackgroundColor: dom.getWindow(plainSecondaryAction).getComputedStyle(plainSecondaryAction).backgroundColor,
 			plainSecondaryActionBorderStyle: dom.getWindow(plainSecondaryAction).getComputedStyle(plainSecondaryAction).borderStyle,
 			plainContextUsageBackgroundColor: dom.getWindow(plainContextUsage).getComputedStyle(plainContextUsage).backgroundColor,
 			plainContextUsageBorderStyle: dom.getWindow(plainContextUsage).getComputedStyle(plainContextUsage).borderStyle,
+			plainBottomActionBackgroundColor: dom.getWindow(plainBottomAction).getComputedStyle(plainBottomAction).backgroundColor,
+			plainBottomActionBorderStyle: dom.getWindow(plainBottomAction).getComputedStyle(plainBottomAction).borderStyle,
 		}, {
-			newChatBackgroundColor: 'color(srgb 1 1 1 / 0.86)',
-			newChatBorderRadius: '8px',
-			newChatPadding: '12px',
-			inSessionBackgroundColor: 'rgba(0, 0, 0, 0)',
+			newChatBackgroundColor: 'rgba(0, 0, 0, 0)',
+			newChatPadding: '0px',
+			bottomActionBackgroundColor: 'rgb(255, 255, 255)',
+			bottomActionBorderColor: 'rgb(96, 96, 96)',
+			bottomActionBorderStyle: 'solid',
+			bottomActionBorderRadius: '4px',
+			workspacePillBackgroundColor: 'rgb(255, 255, 255)',
 			secondaryActionBackgroundColor: 'rgb(255, 255, 255)',
 			secondaryActionBackgroundImage: 'linear-gradient(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08))',
 			secondaryActionBorderColor: 'rgb(128, 128, 128)',
 			secondaryActionBorderStyle: 'solid',
 			contextUsageBackgroundColor: 'rgb(255, 255, 255)',
 			contextUsageBackgroundImage: 'linear-gradient(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08))',
 			contextUsageBorderRadius: '4px',
-			plainNewChatBackgroundColor: 'rgba(0, 0, 0, 0)',
-			plainNewChatPadding: '0px',
 			plainSecondaryActionBackgroundColor: 'rgba(0, 0, 0, 0)',
 			plainSecondaryActionBorderStyle: 'none',
 			plainContextUsageBackgroundColor: 'rgba(0, 0, 0, 0)',
 			plainContextUsageBorderStyle: 'none',
+			plainBottomActionBackgroundColor: 'rgb(255, 255, 255)',
+			plainBottomActionBorderStyle: 'none',
 		});
 	});
 

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

@@ -8,6 +8,7 @@ import { assert } from '../../../../../base/common/assert.js';
 import { Codicon } from '../../../../../base/common/codicons.js';
 import { Event } from '../../../../../base/common/event.js';
 import { MarkdownString } from '../../../../../base/common/htmlContent.js';
+import { DisposableStore } from '../../../../../base/common/lifecycle.js';
 import { constObservable, observableValue } from '../../../../../base/common/observable.js';
 import { extUri } from '../../../../../base/common/resources.js';
 import { mock } from '../../../../../base/test/common/mock.js';
@@ -44,6 +45,7 @@ import { activeSessionViewBackground } from '../../../../common/theme.js';
 import { Menus } from '../../../../browser/menus.js';
 import { AgentHostFilterConnectionStatus, IAgentHostFilterService } from '../../../../services/agentHostFilter/common/agentHostFilter.js';
 import { ISessionsChatBackgroundService } from '../../../../services/chatBackground/browser/chatBackgroundService.js';
+import { SessionsChatBackgroundRenderer } from '../../../../services/chatBackground/browser/chatBackgroundRenderer.js';
 import { ISessionsProvidersService } from '../../../../services/sessions/browser/sessionsProvidersService.js';
 import { ISessionsRecentWorkspacesService } from '../../../../services/sessions/browser/sessionsRecentWorkspacesService.js';
 import { ISessionsService } from '../../../../services/sessions/browser/sessionsService.js';
@@ -85,6 +87,7 @@ interface INewChatWidgetFixtureOptions {
 	readonly primaryToolbarWidth?: number;
 	readonly phoneLayout?: boolean;
 	readonly migrationCount?: number;
+	readonly withChatBackground?: boolean;
 }
 
 class AutoModelFixtureMenuService extends FixtureMenuService {
@@ -121,6 +124,21 @@ class AutoModelFixtureMenuService extends FixtureMenuService {
 	}
 }
 
+/**
+ * Wraps the composer in the `.part.sessionspart` host the Agents window uses and
+ * paints the real codicon wallpaper into it, so the fixture shows the composer
+ * the way it reads once a chat background is set.
+ */
+function createChatBackgroundPart(container: HTMLElement, disposableStore: DisposableStore): HTMLElement {
+	const part = dom.append(container, dom.$('.part.sessionspart'));
+	part.style.position = 'relative';
+	part.style.width = '100%';
+	part.style.height = '100%';
+	const renderer = disposableStore.add(new SessionsChatBackgroundRenderer(part));
+	renderer.setBackground({ kind: 'codicons' });
+	return part;
+}
+
 /**
  * Renders the whole new-session composer (`NewChatView` → `NewChatWidget`) inside
  * a `.session-view` so the draft-comments banner sits above the input the way it
@@ -151,6 +169,7 @@ async function renderNewChatWidget(context: ComponentFixtureContext, options: IN
 		primaryToolbarWidth,
 		phoneLayout = false,
 		migrationCount = 0,
+		withChatBackground = false,
 	} = options;
 	const feedbackItems: readonly IAgentFeedback[] = Array.from({ length: commentCount }, (_, index) => ({
 		id: `feedback-${index}`,
@@ -330,7 +349,7 @@ async function renderNewChatWidget(context: ComponentFixtureContext, options: IN
 	container.classList.add('monaco-workbench', 'agent-sessions-workbench');
 	container.classList.toggle('phone-layout', phoneLayout);
 
-	const sessionView = dom.append(container, dom.$('.session-view.is-active'));
+	const sessionView = dom.append(withChatBackground ? createChatBackgroundPart(container, disposableStore) : container, dom.$('.session-view.is-active'));
 	sessionView.style.width = '100%';
 	sessionView.style.height = '100%';
 	sessionView.style.backgroundColor = asCssVariable(activeSessionViewBackground);
@@ -411,6 +430,11 @@ export default defineThemedFixtureGroup({ path: 'sessions/chat/newWidget/' }, {
 		expectedVisualDescriptions: ['The new-session composer shows Copilot, microsoft/vscode, and Issue/PR pills aligned to the left above the chat input. Customize is aligned separately to the right edge of the input, with a yellow migration indicator and no chevron.'],
 		render: context => renderNewChatWidget(context, { withWorkspace: true, migrationCount: 3 }),
 	}),
+	NewSessionChatBackground: defineComponentFixture({
+		labels: { kind: 'screenshot', blocksCi: true },
+		expectedVisualDescriptions: ['The new-session composer sits directly on the codicon wallpaper with no card behind it. The workspace pills, the input area and the bottom-row controls each carry their own opaque surface and a thin border, and the wallpaper shows through the gaps between them.'],
+		render: context => renderNewChatWidget(context, { withWorkspace: true, withAutoModel: true, withChatBackground: true }),
+	}),
 	NewSessionAutoModel: defineComponentFixture({
 		labels: { kind: 'screenshot', blocksCi: true },
 		expectedVisualDescriptions: ['The new-session input toolbar shows an Auto model picker whose background fits closely around the Copilot icon and Auto label without excessive empty horizontal space. The bottom row shows optically tuned compact rocket, warning, and connection status icons centered in matching controls, followed by the full Status text action without clipping.'],

src/vs/sessions/contrib/providers/agentHost/browser/media/agentHostSessionConfigPicker.css

@@ -6,6 +6,8 @@
 .sessions-chat-agent-host-config {
 	display: flex;
 	align-items: center;
+	/* Each config control carries its own surface, so they need a gap. */
+	gap: var(--vscode-spacing-size20);
 	min-width: 0;
 }