sessions: refine Open in VS Code titlebar styling (#313056)

* sessions: refine Open in VS Code titlebar styling

Align the sessions titlebar button more closely with the core Open in Agents affordance.

Add the grayscale-to-color icon treatment with reduced-motion handling, switch the hover chrome to the secondary button background, and tune the separator and spacing around the adjacent Run split button.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* sessions: address PR review feedback on titlebar styling

- Fix incorrect menu ID references in LAYOUT.md (OpenSubMenu/TitleBarRight -> TitleBarSessionMenu/TitleBarRightLayout) and update file references to openInVSCode.contribution.ts and openInVSCodeWidget.ts
- Use --vscode-button-secondaryHoverBackground (hover token) instead of --vscode-button-secondaryBackground (resting token) for correct hover contrast
- Strengthen CSS selector specificity for Run split button margin so it beats the conflicting margin-left: 0 rule in changesTitleBarWidget.css

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* sessions: fix run action titlebar spacing regression

Target the Run split button's action-item wrapper so the 5px margin applies on the same element used by the titlebar action bar layout and the adjacent Changes override.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

---------

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: hawkticehurst

src/vs/sessions/LAYOUT.md

@@ -124,9 +124,10 @@ The Run Script action:
 - Registered in `contrib/chat/browser/runScriptAction.ts`
 
 The Open... action:
-- Displayed as a split button via `Menus.OpenSubMenu` on `Menus.TitleBarRight`
+- Contributed on `Menus.TitleBarSessionMenu` and laid out on `Menus.TitleBarRightLayout`
 - Contains "Open Terminal" (opens terminal at session worktree) and "Open in VS Code" (opens worktree in new VS Code window)
-- Registered in `contrib/chat/browser/chat.contribution.ts`
+- The "Open in VS Code" titlebar widget mirrors the core "Open in Agents" affordance: the product icon is greyscale at rest, returns to full color on hover/focus while respecting reduced-motion preferences, uses secondary-button hover chrome, and draws a separator before the adjacent Run split button
+- "Open in VS Code" is contributed in `contrib/chat/browser/openInVSCode.contribution.ts`, and its custom titlebar widget is registered in `contrib/chat/browser/openInVSCodeWidget.ts` (imported from `contrib/chat/browser/chat.contribution.ts`)
 
 ### 3.5 Panel Title Actions
 
@@ -664,6 +665,7 @@ interface IPartVisibilityState {
 
 | Date | Change |
 |------|--------|
+| 2026-04-28 | Updated the sessions "Open in VS Code" titlebar widget to match the core "Open in Agents" affordance more closely: the product icon is greyscale by default, animates back to full color on hover/focus when motion is enabled, uses secondary-button hover chrome instead of quality-tinted backgrounds, and draws a separator before the Run split button. |
 | 2026-04-27 | Made the sessions shell gradient background the default treatment by removing the `sessions.experimental.shellGradientBackground` opt-in, always applying the root shell gradient layer, and renaming the workbench CSS hook to `shell-gradient-background`. |
 | 2026-04-23 | Updated mobile layout policy platform detection to use shared `platform.isMobile`, and reduced phone-layout CSS `!important` usage where selector specificity already provides stable overrides. |
 | 2026-04-22 | Increased the sessions titlebar account widget's GitHub profile image from `16px × 16px` to `18px × 18px` while keeping the existing `22px × 22px` control footprint and avatar border treatment. |

src/vs/sessions/browser/parts/media/titlebarpart.css

@@ -63,6 +63,14 @@
 	align-items: center;
 }
 
+.monaco-workbench .part.titlebar > .titlebar-container.sessions-titlebar-container .monaco-toolbar .actions-container {
+	gap: 1px;
+}
+
+.agent-sessions-workbench.monaco-workbench .part.titlebar > .sessions-titlebar-container > .titlebar-right > .titlebar-session-actions-container .monaco-toolbar .actions-container > .action-item.open-in-vscode-titlebar-widget + .action-item {
+	margin-left: 5px;
+}
+
 /* Add spacing between the session action group and the right layout actions. */
 .monaco-workbench .part.titlebar > .sessions-titlebar-container > .titlebar-right > .titlebar-session-actions-container:not(.has-no-actions) + .titlebar-right-layout-container:not(.has-no-actions) {
 	margin-left: 4px;

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

@@ -9,7 +9,7 @@
 	align-items: center;
 	height: 22px;
 	padding: 0 4px;
-	margin: 0;
+	margin: 0 4px 0 2px;
 	border-radius: 5px;
 	cursor: pointer;
 	color: var(--vscode-titleBar-activeForeground);
@@ -19,6 +19,17 @@
 	touch-action: manipulation;
 }
 
+.monaco-workbench .open-in-vscode-titlebar-widget::after {
+	content: '';
+	position: absolute;
+	right: -6px;
+	top: 4px;
+	bottom: 4px;
+	width: 1px;
+	background-color: var(--vscode-widget-border, rgba(128, 128, 128, 0.5));
+	pointer-events: none;
+}
+
 .monaco-workbench .open-in-vscode-titlebar-widget > .open-in-vscode-titlebar-widget-icon {
 	width: 16px;
 	height: 16px;
@@ -31,6 +42,7 @@
 	background-repeat: no-repeat;
 	background-position: center center;
 	background-size: contain;
+	filter: grayscale(1);
 }
 
 /* In production builds vscode-distro overlays vs/workbench/browser/media/code-icon.svg
@@ -42,6 +54,21 @@
 	background-image: url('../../../../../workbench/browser/media/code-icon.svg');
 }
 
+.monaco-enable-motion .monaco-workbench .open-in-vscode-titlebar-widget > .open-in-vscode-titlebar-widget-icon,
+.monaco-workbench.monaco-enable-motion .open-in-vscode-titlebar-widget > .open-in-vscode-titlebar-widget-icon {
+	transition: filter 150ms ease;
+}
+
+.monaco-reduce-motion .monaco-workbench .open-in-vscode-titlebar-widget > .open-in-vscode-titlebar-widget-icon,
+.monaco-workbench.monaco-reduce-motion .open-in-vscode-titlebar-widget > .open-in-vscode-titlebar-widget-icon {
+	transition-duration: 0ms !important;
+}
+
+.monaco-workbench .open-in-vscode-titlebar-widget:hover > .open-in-vscode-titlebar-widget-icon,
+.monaco-workbench .open-in-vscode-titlebar-widget:focus-visible > .open-in-vscode-titlebar-widget-icon {
+	filter: none;
+}
+
 .monaco-workbench .open-in-vscode-titlebar-widget > .open-in-vscode-titlebar-widget-label {
 	display: inline-block;
 	max-width: 0;
@@ -65,26 +92,10 @@
 
 .monaco-workbench .open-in-vscode-titlebar-widget:hover,
 .monaco-workbench .open-in-vscode-titlebar-widget:focus-visible {
-	background-color: var(--vscode-toolbar-hoverBackground);
+	background-color: var(--vscode-button-secondaryHoverBackground, var(--vscode-toolbar-hoverBackground));
 	outline: none;
 }
 
-/* Quality-tinted hover/focus background — blue (stable), green (insider), orange (exploration). */
-.monaco-workbench .open-in-vscode-titlebar-widget[data-product-quality="stable"]:hover,
-.monaco-workbench .open-in-vscode-titlebar-widget[data-product-quality="stable"]:focus-visible {
-	background-color: rgba(0, 122, 204, 0.18);
-}
-
-.monaco-workbench .open-in-vscode-titlebar-widget[data-product-quality="insider"]:hover,
-.monaco-workbench .open-in-vscode-titlebar-widget[data-product-quality="insider"]:focus-visible {
-	background-color: rgba(36, 187, 26, 0.20);
-}
-
-.monaco-workbench .open-in-vscode-titlebar-widget[data-product-quality="exploration"]:hover,
-.monaco-workbench .open-in-vscode-titlebar-widget[data-product-quality="exploration"]:focus-visible {
-	background-color: rgba(255, 140, 0, 0.22);
-}
-
 .monaco-workbench .open-in-vscode-titlebar-widget:hover > .open-in-vscode-titlebar-widget-label,
 .monaco-workbench .open-in-vscode-titlebar-widget:focus-visible > .open-in-vscode-titlebar-widget-label {
 	max-width: 200px;

src/vs/sessions/contrib/chat/browser/openInVSCodeWidget.ts

@@ -40,8 +40,8 @@ class OpenInVSCodeTitleBarWidget extends BaseActionViewItem {
 		container.classList.add('open-in-vscode-titlebar-widget');
 		container.setAttribute('role', 'button');
 
-		// Set quality attribute for quality-tinted hover styling and distro icon selection.
-		// Only set when quality is known so that the CSS fallback icon is used in dev builds.
+		// Set quality attribute for distro icon selection. Only set when quality is
+		// known so that the CSS fallback icon is used in dev builds.
 		const quality = this.productService.quality;
 		if (quality) {
 			container.setAttribute('data-product-quality', quality);