Add home button to customizations editor sidebar (#308919)

An Overview button with a home icon sits in the header row alongside
the harness picker. When the harness picker is visible, the button
shows only the icon; when hidden (single harness), it expands to a
full-width button with label.

Author: joshspicer

src/vs/workbench/contrib/chat/browser/aiCustomization/aiCustomizationManagementEditor.ts

@@ -318,7 +318,9 @@ export class AICustomizationManagementEditor extends EditorPane {
 	private harnessDropdownButton: HTMLElement | undefined;
 	private harnessDropdownIcon: HTMLElement | undefined;
 	private harnessDropdownLabel: HTMLElement | undefined;
-	private sidebarContent: HTMLElement | undefined;
+	private sidebarHeaderContainer: HTMLElement | undefined;
+	private homeButton: HTMLElement | undefined;
+	private homeButtonLabel: HTMLElement | undefined;
 
 	private readonly inEditorContextKey: IContextKey<boolean>;
 	private readonly sectionContextKey: IContextKey<string>;
@@ -527,10 +529,10 @@ export class AICustomizationManagementEditor extends EditorPane {
 	}
 
 	private createSidebar(): void {
-		const sidebarContent = this.sidebarContent = DOM.append(this.sidebarContainer, $('.sidebar-content'));
+		const sidebarContent = DOM.append(this.sidebarContainer, $('.sidebar-content'));
 
-		// Harness dropdown (shown when multiple harnesses available)
-		this.createHarnessDropdown(sidebarContent);
+		// Header row with home button and optional harness dropdown
+		this.createSidebarHeader(sidebarContent);
 
 		// Main sections list container (takes remaining space)
 		const sectionsListContainer = DOM.append(sidebarContent, $('.sidebar-sections-list'));
@@ -619,12 +621,32 @@ export class AICustomizationManagementEditor extends EditorPane {
 		}
 	}
 
-	private createHarnessDropdown(sidebarContent: HTMLElement): void {
+	private createSidebarHeader(sidebarContent: HTMLElement): void {
+		const headerRow = this.sidebarHeaderContainer = DOM.append(sidebarContent, $('.sidebar-header-row'));
+
+		// Home/overview button
+		const homeButton = this.homeButton = DOM.append(headerRow, $('button.sidebar-home-button'));
+		homeButton.setAttribute('aria-label', localize('homeButton', "Overview"));
+		const homeIcon = DOM.append(homeButton, $('span.sidebar-home-icon'));
+		homeIcon.classList.add(...ThemeIcon.asClassNameArray(Codicon.home));
+		homeIcon.setAttribute('aria-hidden', 'true');
+		const homeLabel = this.homeButtonLabel = DOM.append(homeButton, $('span.sidebar-home-label'));
+		homeLabel.textContent = localize('overview', "Overview");
+		this.editorDisposables.add(DOM.addDisposableListener(homeButton, 'click', () => {
+			this.showWelcomePage();
+		}));
+
+		// Harness dropdown (shown when multiple harnesses available)
+		this.createHarnessDropdown(headerRow);
+		this.updateHomeButtonStyle();
+	}
+
+	private createHarnessDropdown(parent: HTMLElement): void {
 		if (!this.isHarnessSelectorEnabled) {
 			return;
 		}
 
-		const container = this.harnessDropdownContainer = DOM.append(sidebarContent, $('.sidebar-harness-dropdown'));
+		const container = this.harnessDropdownContainer = DOM.append(parent, $('.sidebar-harness-dropdown'));
 
 		this.harnessDropdownButton = DOM.append(container, $('button.harness-dropdown-button'));
 		this.harnessDropdownButton.setAttribute('aria-label', localize('selectHarness', "Select customization target"));
@@ -659,19 +681,32 @@ export class AICustomizationManagementEditor extends EditorPane {
 			this.harnessDropdownButton = undefined;
 			this.harnessDropdownIcon = undefined;
 			this.harnessDropdownLabel = undefined;
-		} else if (this.isHarnessSelectorEnabled && !this.harnessDropdownContainer && this.sidebarContent) {
-			this.createHarnessDropdown(this.sidebarContent);
+			this.updateHomeButtonStyle();
+		} else if (this.isHarnessSelectorEnabled && !this.harnessDropdownContainer && this.sidebarHeaderContainer) {
+			this.createHarnessDropdown(this.sidebarHeaderContainer);
+			this.updateHomeButtonStyle();
 		}
 		// Visibility is handled by updateHarnessDropdown based on harness count
 	}
 
+	private updateHomeButtonStyle(): void {
+		if (!this.homeButtonLabel || !this.homeButton) {
+			return;
+		}
+		// Show full label when harness dropdown is hidden, icon-only when visible
+		const harnessVisible = this.harnessDropdownContainer && this.harnessDropdownContainer.style.display !== 'none';
+		this.homeButtonLabel.style.display = harnessVisible ? 'none' : '';
+		this.homeButton.style.flex = harnessVisible ? '' : '1';
+	}
+
 	private updateHarnessDropdown(): void {
 		if (!this.harnessDropdownContainer || !this.harnessDropdownIcon || !this.harnessDropdownLabel) {
 			return;
 		}
 		const harnesses = this.harnessService.availableHarnesses.get();
 		// Hide dropdown when only one harness is available
 		this.harnessDropdownContainer.style.display = harnesses.length <= 1 ? 'none' : '';
+		this.updateHomeButtonStyle();
 
 		const activeId = this.harnessService.activeHarness.get();
 		const descriptor = harnesses.find(h => h.id === activeId);

src/vs/workbench/contrib/chat/browser/aiCustomization/media/aiCustomizationManagement.css

@@ -26,6 +26,52 @@
 	flex-direction: column;
 }
 
+.ai-customization-management-editor .sidebar-header-row {
+	flex-shrink: 0;
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	padding: 6px 4px 4px;
+}
+
+.ai-customization-management-editor .sidebar-home-button {
+	flex-shrink: 0;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 5px 8px;
+	border: 1px solid var(--vscode-dropdown-border, transparent);
+	border-radius: 4px;
+	background: var(--vscode-dropdown-background);
+	color: var(--vscode-dropdown-foreground);
+	cursor: pointer;
+	font-size: 12px;
+	font-weight: 600;
+	line-height: 18px;
+	font-family: inherit;
+}
+
+.ai-customization-management-editor .sidebar-home-button:hover {
+	border-color: var(--vscode-focusBorder);
+}
+
+.ai-customization-management-editor .sidebar-home-button:focus-visible {
+	outline: 1px solid var(--vscode-focusBorder);
+	outline-offset: -1px;
+}
+
+.ai-customization-management-editor .sidebar-home-icon {
+	flex-shrink: 0;
+	font-size: 14px;
+	opacity: 0.85;
+}
+
+.ai-customization-management-editor .sidebar-home-label {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
 .ai-customization-management-editor .sidebar-sections-list {
 	flex: 1;
 	overflow: hidden;
@@ -173,8 +219,8 @@
 
 /* Harness dropdown in sidebar */
 .ai-customization-management-editor .sidebar-harness-dropdown {
-	flex-shrink: 0;
-	padding: 6px 4px 4px;
+	flex: 1;
+	min-width: 0;
 }
 
 .ai-customization-management-editor .harness-dropdown-button {