Refactor AI customization components and add new tests for coverage

Author: hawkticehurst

src/vs/workbench/contrib/chat/browser/agentPluginActions.ts

@@ -38,7 +38,7 @@ export class InstallPluginAction extends Action {
 			() => pluginInstallService.installPlugin({
 				name: item.name,
 				description: item.description,
-				version: '',
+				version: item.version ?? '',
 				source: item.source,
 				sourceDescriptor: item.sourceDescriptor,
 				marketplace: item.marketplace,

src/vs/workbench/contrib/chat/browser/agentPluginEditor/agentPluginEditor.ts

@@ -224,7 +224,7 @@ export class AgentPluginEditor extends EditorPane {
 				const expectedUri = this.pluginInstallService.getPluginInstallUri({
 					name: item.name,
 					description: item.description,
-					version: '',
+					version: item.version ?? '',
 					source: item.source,
 					sourceDescriptor: item.sourceDescriptor,
 					marketplace: item.marketplace,
@@ -246,6 +246,7 @@ export class AgentPluginEditor extends EditorPane {
 							kind: AgentPluginItemKind.Marketplace,
 							name: item.name,
 							description: mp.description,
+							version: mp.version,
 							source: mp.source,
 							sourceDescriptor: mp.sourceDescriptor,
 							marketplace: mp.marketplace,

src/vs/workbench/contrib/chat/browser/agentPluginEditor/agentPluginItems.ts

@@ -26,6 +26,7 @@ export interface IMarketplacePluginItem {
 	readonly kind: AgentPluginItemKind.Marketplace;
 	readonly name: string;
 	readonly description: string;
+	readonly version?: string;
 	readonly source: string;
 	readonly sourceDescriptor: IPluginSourceDescriptor;
 	readonly marketplace: string;

src/vs/workbench/contrib/chat/browser/agentPluginsView.ts

@@ -69,6 +69,7 @@ function marketplacePluginToItem(plugin: IMarketplacePlugin): IMarketplacePlugin
 		kind: AgentPluginItemKind.Marketplace,
 		name: plugin.name,
 		description: plugin.description,
+		version: plugin.version,
 		source: plugin.source,
 		sourceDescriptor: plugin.sourceDescriptor,
 		marketplace: plugin.marketplace,
@@ -466,7 +467,7 @@ export class AgentPluginsListView extends AbstractExtensionsListView<IAgentPlugi
 				const expectedUri = this.pluginInstallService.getPluginInstallUri({
 					name: m.name,
 					description: m.description,
-					version: '',
+					version: m.version ?? '',
 					source: m.source,
 					sourceDescriptor: m.sourceDescriptor,
 					marketplace: m.marketplace,

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

@@ -48,6 +48,7 @@ import { ICustomizationHarnessService } from '../../common/customizationHarnessS
 import { ICommandService } from '../../../../../platform/commands/common/commands.js';
 import { IAICustomizationListItem } from './aiCustomizationItemSource.js';
 import { IAICustomizationItemsModel, ItemsModelSection } from './aiCustomizationItemsModel.js';
+import { createCustomizationCardPrimaryAction, CustomizationCardListController } from './customizationCardList.js';
 
 export { truncateToFirstLine } from './aiCustomizationListWidgetUtils.js';
 
@@ -513,6 +514,10 @@ export function getAlwaysVisibleCustomizationGroupKeys(section: AICustomizationM
 		: [];
 }
 
+export function getTargetedCreateActionLabel(label: string, compactLabel?: string): string {
+	return compactLabel ?? label.replace(/^\$\([^)]+\)\s*/, '');
+}
+
 /**
  * Returns the ARIA status announcement string for a given section, item
  * count, and whether a search filter is active. Exported for testing.
@@ -573,6 +578,7 @@ export function getCountAnnouncement(section: AICustomizationManagementSection,
  */
 interface ICreateAction {
 	readonly label: string;
+	readonly compactLabel?: string;
 	readonly enabled: boolean;
 	readonly tooltip?: string;
 	readonly kind?: 'generate';
@@ -1219,13 +1225,15 @@ export class AICustomizationListWidget extends Disposable {
 			if (hasWorkspace) {
 				actions.push({
 					label: localize('newHook', "New Hook"),
+					compactLabel: localize('newHook', "New Hook"),
 					enabled: true,
 					target: 'workspace',
 					run: () => { this._onDidRequestCreateManual.fire({ type: promptType, target: 'local' }); },
 				});
 			}
 			actions.push({
 				label: localize('newHook', "New Hook"),
+				compactLabel: localize('newHook', "New Hook"),
 				enabled: true,
 				target: 'user',
 				run: () => { this._onDidRequestCreateManual.fire({ type: promptType, target: 'user' }); },
@@ -1250,6 +1258,7 @@ export class AICustomizationListWidget extends Disposable {
 				// Sessions or non-local harness with workspace: workspace is primary
 				actions.push({
 					label: localize('newWorkspaceCustomization', "New {0} (Workspace)", createTypeLabel),
+					compactLabel: localize('newCustomization', "New {0}", createTypeLabel),
 					enabled: true,
 					target: 'workspace',
 					run: () => { this._onDidRequestCreateManual.fire({ type: promptType, target: 'local' }); },
@@ -1259,6 +1268,7 @@ export class AICustomizationListWidget extends Disposable {
 				// No workspace: user is primary
 				actions.push({
 					label: localize('newUserCustomization', "New {0} (User)", createTypeLabel),
+					compactLabel: localize('newCustomization', "New {0}", createTypeLabel),
 					enabled: true,
 					target: 'user',
 					run: () => { this._onDidRequestCreateManual.fire({ type: promptType, target: 'user' }); },
@@ -1271,6 +1281,7 @@ export class AICustomizationListWidget extends Disposable {
 		if (hasWorkspace && !addedTargets.has('workspace')) {
 			actions.push({
 				label: localize('newWorkspaceCustomization', "New {0} (Workspace)", createTypeLabel),
+				compactLabel: localize('newCustomization', "New {0}", createTypeLabel),
 				enabled: true,
 				target: 'workspace',
 				run: () => { this._onDidRequestCreateManual.fire({ type: promptType, target: 'local' }); },
@@ -1280,6 +1291,7 @@ export class AICustomizationListWidget extends Disposable {
 		if (!addedTargets.has('user')) {
 			actions.push({
 				label: localize('newUserCustomization', "New {0} (User)", createTypeLabel),
+				compactLabel: localize('newCustomization', "New {0}", createTypeLabel),
 				enabled: true,
 				target: 'user',
 				run: () => { this._onDidRequestCreateManual.fire({ type: promptType, target: 'user' }); },
@@ -1598,13 +1610,14 @@ export class AICustomizationListWidget extends Disposable {
 			}
 
 			const inventory = DOM.append(section, $('.plugin-card-grid.plugin-inventory-list.customization-inventory-list'));
+			const cardList = this.cardDisposables.add(new CustomizationCardListController(inventory, group.label));
 			if (group.items.length === 0) {
 				const empty = DOM.append(inventory, $('.plugin-inventory-empty'));
 				empty.textContent = this.getEmptyGroupMessage(group.groupKey);
 				continue;
 			}
 			for (const item of group.items) {
-				this.appendCustomizationCardRow(inventory, item, group.label);
+				this.appendCustomizationCardRow(inventory, item, group.label, cardList);
 			}
 		}
 		if (shouldRestoreFocus) {
@@ -1686,9 +1699,7 @@ export class AICustomizationListWidget extends Disposable {
 	}
 
 	private formatTargetedCreateActionLabel(action: ICreateAction): string {
-		return action.label
-			.replace(/^\$\([^)]+\)\s*/, '')
-			.replace(/\s+\((?:Workspace|User)\)$/, '');
+		return getTargetedCreateActionLabel(action.label, action.compactLabel);
 	}
 
 	private showCreateActionsMenu(createActions: readonly ICreateAction[], anchor: HTMLElement): void {
@@ -1764,7 +1775,7 @@ export class AICustomizationListWidget extends Disposable {
 		this.cardDisposables.add(button.onDidClick(() => this.executePrimaryCreateAction()));
 	}
 
-	private appendCustomizationCardRow(parent: HTMLElement, item: IAICustomizationListItem, groupLabel: string): void {
+	private appendCustomizationCardRow(parent: HTMLElement, item: IAICustomizationListItem, groupLabel: string, cardList: CustomizationCardListController): void {
 		const row = DOM.append(parent, $('.plugin-list-item.plugin-home-row.customization-home-row'));
 		row.classList.toggle('disabled', item.disabled);
 		const displayName = item.displayName ?? formatDisplayName(item.name);
@@ -1774,10 +1785,7 @@ export class AICustomizationListWidget extends Disposable {
 		const accessibleLabel = item.disabled
 			? localize('customizationCardAriaLabelDisabled', "{0}. {1}. Disabled", displayName, accessibleSecondaryText || groupLabel)
 			: localize('customizationCardAriaLabel', "{0}. {1}", displayName, accessibleSecondaryText || groupLabel);
-		const primary = DOM.append(row, $('.customization-row-primary'));
-		primary.tabIndex = 0;
-		primary.setAttribute('role', 'button');
-		primary.setAttribute('aria-label', accessibleLabel);
+		const primary = createCustomizationCardPrimaryAction(row, accessibleLabel, 'customization-row-primary');
 		this.firstCardFocusElement ??= primary;
 		if (!this.cardRowsByUri.has(item.uri.toString())) {
 			this.cardRowsByUri.set(item.uri.toString(), primary);
@@ -1787,12 +1795,6 @@ export class AICustomizationListWidget extends Disposable {
 			this.lastCardFocusItemId = item.id;
 		}));
 		this.cardDisposables.add(DOM.addDisposableListener(primary, 'click', () => this._onDidSelectItem.fire(item)));
-		this.cardDisposables.add(DOM.addDisposableListener(primary, 'keydown', e => {
-			if (e.key === 'Enter' || e.key === ' ') {
-				e.preventDefault();
-				this._onDidSelectItem.fire(item);
-			}
-		}));
 		this.cardDisposables.add(this.hoverService.setupDelayedHover(row, () => ({
 			content: `${displayName}\n${this.labelService.getUriLabel(item.uri, { relative: item.source === AICustomizationSources.local })}`,
 			appearance: { compact: true, skipFadeInAnimation: true },
@@ -1826,6 +1828,13 @@ export class AICustomizationListWidget extends Disposable {
 			this.lastCardFocusItemId = item.id;
 		}));
 		this.cardDisposables.add(more.onDidClick(() => this.showCardItemActions(item, more.element)));
+		cardList.addItem({
+			row,
+			primaryAction: primary,
+			label: displayName,
+			actions: [more.element],
+			contextMenuAction: more.element,
+		});
 	}
 
 	private getItemStatusLabel(item: IAICustomizationListItem): string | undefined {

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

@@ -1615,6 +1615,9 @@ export class AICustomizationManagementEditor extends EditorPane {
 		container.style.display = '';
 		const content = DOM.append(container, $('.customization-migration-banner-content'));
 		DOM.append(content, $('p.customization-migration-banner-message')).textContent = banner.message;
+		if (banner.consequence) {
+			DOM.append(content, $('p.customization-migration-banner-consequence')).textContent = banner.consequence;
+		}
 		if (this.migrationLinkElement) {
 			content.appendChild(this.migrationLinkElement);
 		}

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

@@ -55,7 +55,7 @@ export class AICustomizationManagementEditorInput extends EditorInput implements
 
 	override getName(): string {
 		if (this._targetLabel) {
-			return localize('aiCustomizationManagementEditorNameWithTarget', "Agent Customizations – {0}", this._targetLabel);
+			return localize('aiCustomizationManagementEditorNameWithTarget', "Agent Customizations - {0}", this._targetLabel);
 		}
 		return localize('aiCustomizationManagementEditorName', "Agent Customizations");
 	}