sessions: add home button to Customizations header to open welcome page

[joshspicer]

Summary

Adds a home icon button to the "Customizations" collapsible header in the Agents sidebar. The button provides a direct entrypoint to the AI Customizations management editor's welcome/overview page.

UX Design

The home button sits at the right edge of the header row (to the right of the "Customizations" label/chevron toggle). This follows VS Code's standard pattern for panel action buttons that reveal on hover — keeping the UI clean by default but discoverable on interaction.

• Collapsed and expanded: button is always present in the header (works in both states)
• Reveal on hover: fades in at 70% opacity when the header row is hovered or focused
• Fully opaque on direct hover: hover background + full opacity on the button itself
• Does not interfere with the existing collapse/expand toggle (clicking the label still toggles)

Changes

aiCustomizationShortcutsWidget.ts

• Added IEditorService and IHoverService as constructor dependencies
• Added a home icon button (.ai-customization-home-btn) appended to the header element
• Wired click, touch tap (Gesture/TouchEventType for iOS), and keyboard (Enter/Space) handlers
• IHoverService tooltip: "Open Customizations Overview"
• _openWelcomePage() method: opens AICustomizationManagementEditorInput and calls showWelcomePage() to reset to the overview

customizationsToolbar.css

• .ai-customization-home-btn styles: hidden by default, reveal on header hover/focus, touch-action: manipulation for iOS tap delay elimination, focus ring for keyboard a11y

aiCustomizationShortcutsWidget.fixture.ts

• Added IEditorService mock so component fixtures continue to render correctly

[github-actions]

Screenshot Changes

Base: 6b2fbaf8 Current: e47b714f

Changed (6)

sessions/aiCustomizationShortcutsWidget/Expanded/Dark

Before	After

sessions/aiCustomizationShortcutsWidget/WithMcpServers/Dark

Before	After

sessions/aiCustomizationShortcutsWidget/WithCounts/Dark

Before	After

sessions/aiCustomizationShortcutsWidget/Expanded/Light

Before	After

sessions/aiCustomizationShortcutsWidget/WithMcpServers/Light

Before	After

sessions/aiCustomizationShortcutsWidget/WithCounts/Light

Before	After

[Copilot]

Pull request overview

Adds a “home” action in the Agents sidebar “Customizations” header to provide a direct entrypoint to the AI Customizations management editor’s welcome/overview page.

Changes:

• Added a home icon trigger in AICustomizationShortcutsWidget that opens the management editor and resets it to the welcome page.
• Added CSS to reveal the home button on header hover/focus and provide basic hover/focus affordances.
• Updated the component fixture to register an IEditorService mock.

Show a summary per file

File	Description
src/vs/sessions/contrib/sessions/browser/aiCustomizationShortcutsWidget.ts	Adds the header home button, tooltip, and editor-opening logic.
src/vs/sessions/contrib/sessions/browser/media/customizationsToolbar.css	Styles the new home button (visibility, hover/focus behavior, touch-action).
src/vs/sessions/contrib/sessions/test/browser/aiCustomizationShortcutsWidget.fixture.ts	Extends fixture service registration to include an IEditorService mock.

Copilot's findings

Comments suppressed due to low confidence (1)

src/vs/sessions/contrib/sessions/browser/aiCustomizationShortcutsWidget.ts:166

• The KEY_DOWN handler only calls preventDefault() for Enter/Space. To match the established pattern for custom button-like elements in vs/sessions, use DOM.EventHelper.stop(e, true) so the keystroke doesn’t bubble to parent handlers (and use void this._openWelcomePage() if the promise is intentionally not awaited).

		this._register(DOM.addDisposableListener(homeButton, DOM.EventType.KEY_DOWN, (e: KeyboardEvent) => {
			if (e.key === 'Enter' || e.key === ' ') {
				e.preventDefault();
				this._openWelcomePage();
			}
		}));

• Files reviewed: 3/3 changed files
• Comments generated: 1