diff --git a/src/vs/sessions/AI_CUSTOMIZATIONS.md b/src/vs/sessions/AI_CUSTOMIZATIONS.md index 81aa5de5c9c1da..3c8e3a5b97da44 100644 --- a/src/vs/sessions/AI_CUSTOMIZATIONS.md +++ b/src/vs/sessions/AI_CUSTOMIZATIONS.md @@ -246,6 +246,8 @@ Provider-supplied customization rows that include an explicit storage origin are The Agents sidebar `AICustomizationShortcutsWidget` supports three entrypoint modes via `sessions.customizations.sidebarMode`: `welcome` (default) keeps the per-category sidebar rows but opens the AI Customization management editor welcome page, `section` restores per-category deep linking, and `single` replaces the per-category rows with one Customizations entry that opens the welcome page. All modes keep the active customization harness in sync with the active session before opening the editor. +When the harness selector dropdown is disabled in the management editor, the sidebar overview button displays the active harness name and harness icon (matching the picker icon) with a distinct background treatment. + ### Item Badges `IAICustomizationListItem.badge` is an optional string that renders as a small inline tag next to the item name. For context instructions, this badge shows the raw `applyTo` pattern (e.g. a glob like `**/*.ts`), while the tooltip (`badgeTooltip`) explains the behavior. For skills with UI integrations, the badge reads "UI Integration" with a tooltip describing which UI surface invokes the skill. The badge text is also included in search filtering. diff --git a/src/vs/workbench/contrib/chat/browser/aiCustomization/aiCustomizationManagementEditor.ts b/src/vs/workbench/contrib/chat/browser/aiCustomization/aiCustomizationManagementEditor.ts index ee5aee8cbc987e..6fd1c21baf09c5 100644 --- a/src/vs/workbench/contrib/chat/browser/aiCustomization/aiCustomizationManagementEditor.ts +++ b/src/vs/workbench/contrib/chat/browser/aiCustomization/aiCustomizationManagementEditor.ts @@ -334,6 +334,7 @@ export class AICustomizationManagementEditor extends EditorPane { private harnessDropdownLabel: HTMLElement | undefined; private sidebarHeaderContainer: HTMLElement | undefined; private homeButton: HTMLElement | undefined; + private homeButtonIcon: HTMLElement | undefined; private homeButtonLabel: HTMLElement | undefined; private readonly inEditorContextKey: IContextKey; @@ -600,6 +601,7 @@ export class AICustomizationManagementEditor extends EditorPane { this.harnessService.availableHarnesses.read(reader); const activeId = this.harnessService.activeHarness.read(reader); this.harnessContextKey.set(activeId); + this.updateHomeButtonHarnessPresentation(); this.rebuildVisibleSections(); this.ensureHarnessDropdown(); this.updateHarnessDropdown(); @@ -628,9 +630,10 @@ export class AICustomizationManagementEditor extends EditorPane { // Home/overview button const homeButton = this.homeButton = DOM.append(headerRow, $('button.sidebar-home-button')); + homeButton.classList.add('sidebar-harness-home-button'); homeButton.setAttribute('aria-label', localize('homeButton', "Overview")); this.editorDisposables.add(this.hoverService.setupManagedHover(getDefaultHoverDelegate('element'), homeButton, localize('homeButtonTooltip', "Back to overview"))); - const homeIcon = DOM.append(homeButton, $('span.sidebar-home-icon')); + const homeIcon = this.homeButtonIcon = 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')); @@ -638,6 +641,7 @@ export class AICustomizationManagementEditor extends EditorPane { this.editorDisposables.add(DOM.addDisposableListener(homeButton, 'click', () => { this.showWelcomePage(); })); + this.updateHomeButtonHarnessPresentation(); // Harness dropdown (shown when multiple harnesses available) //this.createHarnessDropdown(headerRow); @@ -702,6 +706,28 @@ export class AICustomizationManagementEditor extends EditorPane { this.homeButton.style.flex = harnessVisible ? '' : '1'; } + private updateHomeButtonHarnessPresentation(): void { + if (!this.homeButton || !this.homeButtonIcon || !this.homeButtonLabel || this.isHarnessSelectorEnabled) { + return; + } + + const descriptor = this.harnessService.getActiveDescriptor(); + if (!descriptor) { + this.homeButtonIcon.className = 'sidebar-home-icon'; + this.homeButtonIcon.classList.add(...ThemeIcon.asClassNameArray(Codicon.home)); + this.homeButtonLabel.textContent = localize('overview', "Overview"); + this.homeButton.setAttribute('aria-label', localize('homeButton', "Overview")); + this.homeButton.title = localize('homeButtonTooltip', "Back to overview"); + return; + } + + this.homeButtonIcon.className = 'sidebar-home-icon'; + this.homeButtonIcon.classList.add(...ThemeIcon.asClassNameArray(descriptor.icon)); + this.homeButtonLabel.textContent = descriptor.label; + this.homeButton.setAttribute('aria-label', localize('homeButtonWithHarness', "{0}, Back to overview", descriptor.label)); + this.homeButton.title = localize('homeButtonTooltipWithHarness', "Current harness: {0}. Click to go to overview", descriptor.label); + } + private updateHarnessDropdown(): void { if (!this.harnessDropdownContainer || !this.harnessDropdownIcon || !this.harnessDropdownLabel) { return;