sessions: update Open in VS Code titlebar button with hover animation and full-color icon by hawkticehurst · Pull Request #312250 · microsoft/vscode

hawkticehurst · 2026-04-23T22:40:58Z

Summary

Updates the "Open in VS Code" button in the Agents/Sessions titlebar with a rich expandable widget, mirroring the companion "Open in Agents" button in VS Code core (PR #312111).

Screen.Recording.2026-04-23.at.6.42.47.PM.mov

Changes

New widget with hover animation

Custom BaseActionViewItem widget (OpenInVSCodeTitleBarWidget) registered via IActionViewItemService
Icon-only at rest; slides in an "Open in VS Code" text label on hover/focus via CSS max-width transition
Full-color VS Code logo SVG that desaturates to grayscale at rest via filter: grayscale(1)
Quality-tinted hover backgrounds: blue (stable), green (insider), orange (exploration)
Touch-compatible with touch-action: manipulation

VS Code icon — dev fallback + distro integration

media/vscode-icon.svg — the VS Code shield logo bundled in the repo, used as a dev-time fallback when productService.quality is undefined
In production builds, vscode-distro overlays vs/workbench/browser/media/code-icon.svg with the quality-specific branded icon (stable/insider/exploration). The CSS [data-product-quality] attribute selectors switch to that path for all known qualities
data-product-quality is only set on the widget element when productService.quality is defined, ensuring the fallback SVG is shown in dev builds

Button reordering

Moved Open in VS Code button before the Run Tasks button (order 7, before Run Script at 8)

Click fix

Uses ICommandService.executeCommand() directly in onClick override to bypass the precondition-gated ActionRunner.run() check that silently blocked clicks when the MenuItemAction was marked disabled

Dev fallback for electron-browser action

Added protocol handler fallback (IOpenerService) for dev builds where no sibling app is configured (darwinSiblingBundleIdentifier / win32SiblingExeBasename absent)
Built/packaged builds continue to use INativeHostService.launchSiblingApp as before

Files changed

File	Description
`openInVSCodeWidget.ts`	New — Custom widget + workbench contribution
`media/openInVSCode.css`	New — Slide-in animation, filter transitions, quality-tinted hover, distro icon CSS rules
`media/vscode-icon.svg`	New — VS Code shield logo (dev-time fallback; distro `code-icon.svg` takes precedence in prod)
`electron-browser/openInVSCode.contribution.ts`	Added sibling app check + protocol handler fallback
`browser/openInVSCode.contribution.ts`	Menu order 9 → 7
`chat.contribution.ts`	Import new widget module
`changesTitleBarWidget.ts`	Updated order comment

Copilot

Pull request overview

Updates the Agents/Sessions titlebar “Open in VS Code” entry to use a richer, expandable widget (icon-only at rest, label on hover/focus) and aligns menu ordering, while adding a dev-mode fallback for launching VS Code via protocol handler when a sibling app isn’t configured.

Changes:

Adds a custom BaseActionViewItem-based titlebar widget with hover/focus expand animation and a full-color VS Code logo asset + styling.
Reorders the “Open in VS Code” titlebar action earlier in the navigation group (order 9 → 7) and updates related ordering comments.
Enhances the electron-browser implementation to prefer launchSiblingApp when configured, with a protocol-handler fallback for dev scenarios.

Reviewed changes

Copilot reviewed 6 out of 7 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
src/vs/sessions/contrib/chat/electron-browser/openInVSCode.contribution.ts	Adds sibling-app detection and protocol-handler fallback logic for opening VS Code from the Sessions window.
src/vs/sessions/contrib/chat/browser/openInVSCodeWidget.ts	Introduces the custom expandable titlebar widget and registers it via `IActionViewItemService`.
src/vs/sessions/contrib/chat/browser/openInVSCode.contribution.ts	Adjusts the titlebar menu order for the action.
src/vs/sessions/contrib/chat/browser/media/openInVSCode.css	Adds styling for hover/focus expansion, grayscale→color transition, and quality-tinted hover backgrounds.
src/vs/sessions/contrib/chat/browser/media/vscode-icon.svg	Adds a dev-time fallback full-color VS Code logo asset.
src/vs/sessions/contrib/chat/browser/chat.contribution.ts	Imports the new widget module to register it at runtime.
src/vs/sessions/contrib/changes/browser/changesTitleBarWidget.ts	Updates the ordering comment to reflect the new menu order.

… and full-color icon - Add custom BaseActionViewItem widget that renders the Open in VS Code button with a slide-in label animation on hover/focus and a full-color VS Code logo that desaturates at rest via CSS filter - Reorder the button before the Run Tasks button (order 7 vs 8) - Use ICommandService.executeCommand directly in onClick to bypass precondition-gated ActionRunner.run() which silently blocked clicks - Add protocol handler fallback in electron-browser action for dev builds where no sibling app is configured (launchSiblingApp fails) - Quality-tinted hover backgrounds (blue/green/orange) based on product quality, matching the companion Open in Agents button in VS Code core Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

- Only set data-product-quality attribute when productService.quality is defined (not in dev builds where quality is undefined) - CSS default background-image uses the bundled ./vscode-icon.svg shield (shown in dev builds where no quality attribute is present) - Added per-quality CSS rules pointing to ../../../../../workbench/browser/media/code-icon.svg — the file that vscode-distro overwrites at packaging time with the quality-specific branded VS Code icon (stable/insider/exploration) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

- widget: replace ICommandService.executeCommand with this.action.run() and remove the now-unused ICommandService dependency - electron contribution: also check productService.embedded fields in hasSibling to align with launchSiblingApp's own resolution logic in siblingApp.ts which switches on process.isEmbeddedApp - CSS: scope filter and label transitions inside .monaco-enable-motion blocks and add .monaco-reduce-motion overrides, following the pattern established by other sessions titlebar widgets Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

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

sandy081 · 2026-04-24T13:10:14Z

@copilot resolve the merge conflicts in this pull request

Co-authored-by: sandy081 <10746682+sandy081@users.noreply.github.com>

Copilot · 2026-04-24T13:24:08Z

@copilot resolve the merge conflicts in this pull request

Resolved the merge conflict in openInVSCode.contribution.ts (commit a4fed9c). The resolution keeps our IOpenerService + IProductService imports and dev fallback logic, while incorporating main's --open-chat-session fix (replacing --open-url which caused blank windows) and the DebugAgentHostInDevToolsAction registration.

sandy081 · 2026-04-24T13:30:21Z

 			? resolveRemoteAuthority(activeSession.providerId, sessionsProvidersService, remoteAgentHostService)
 			: undefined;

+		const hasSibling = !!(


@hawkticehurst I do not think this is the right way to know if there is a sibling App or not. Trying to know why you want to know if there is a sibling app or not?

While developing I kept running into issues where the open in vs code button was not working (a dock icon would be shown but a new window would not be rendered).

I eventually discovered an error log saying [launchSiblingApp] Could not resolve sibling app on this platform, so after chatting with Copilot for a bit it seems like in dev builds, product.json doesn't have darwinSiblingBundleIdentifier or win32SiblingExeBasename set, so launchSiblingApp silently returns undefined and nothing happens.

I added hasSibling as a guard to fall back to the protocol handler (vscode://...) in that case. So in theory checking for sibling app should be a dev-only convenience / fallback.

But more than happy to adjust this. Just would need some guidance on what alternative approach to take.

Copilot AI review requested due to automatic review settings April 23, 2026 22:40

Copilot started reviewing on behalf of hawkticehurst April 23, 2026 22:41 View session

roblourens approved these changes Apr 23, 2026

View reviewed changes

roblourens requested changes Apr 23, 2026

View reviewed changes

Comment thread src/vs/sessions/contrib/chat/browser/media/vscode-icon.svg

Copilot AI reviewed Apr 23, 2026

View reviewed changes

hawkticehurst force-pushed the agents/update-titlebar-open-vscode-button branch from 1aa55e1 to 29178d2 Compare April 23, 2026 22:52

hawkticehurst and others added 2 commits April 23, 2026 19:03

hawkticehurst requested a review from roblourens April 23, 2026 23:13

hawkticehurst mentioned this pull request Apr 23, 2026

agents: replace "Open in VS Code" button with split-button "Open In" control #312079

Closed

vs-code-engineering Bot assigned hawkticehurst Apr 23, 2026

Remove grayscale filter: always show icon in full color

2e9a405

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

Copilot started work on behalf of sandy081 April 24, 2026 13:10 View session

Merge branch 'main' into agents/update-titlebar-open-vscode-button

a4fed9c

Co-authored-by: sandy081 <10746682+sandy081@users.noreply.github.com>

sandy081 approved these changes Apr 24, 2026

View reviewed changes

Copilot finished work on behalf of sandy081 April 24, 2026 13:25

Copilot AI requested a review from sandy081 April 24, 2026 13:25

sandy081 requested changes Apr 24, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

sessions: update Open in VS Code titlebar button with hover animation and full-color icon#312250

sessions: update Open in VS Code titlebar button with hover animation and full-color icon#312250
hawkticehurst wants to merge 5 commits intomainfrom
agents/update-titlebar-open-vscode-button

hawkticehurst commented Apr 23, 2026 •

edited

Loading

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

sandy081 commented Apr 24, 2026

Uh oh!

Copilot AI commented Apr 24, 2026

Uh oh!

sandy081 Apr 24, 2026

Uh oh!

hawkticehurst Apr 24, 2026 •

edited

Loading

Uh oh!

hawkticehurst Apr 24, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Conversation

hawkticehurst commented Apr 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

New widget with hover animation

VS Code icon — dev fallback + distro integration

Button reordering

Click fix

Dev fallback for electron-browser action

Files changed

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

sandy081 commented Apr 24, 2026

Uh oh!

Copilot AI commented Apr 24, 2026

Uh oh!

sandy081 Apr 24, 2026

Choose a reason for hiding this comment

Uh oh!

hawkticehurst Apr 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

hawkticehurst Apr 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

hawkticehurst commented Apr 23, 2026 •

edited

Loading

hawkticehurst Apr 24, 2026 •

edited

Loading

hawkticehurst Apr 24, 2026 •

edited

Loading