@codingame/monaco-vscode-chat-service-override 36.2.7 → 37.0.0

package/vscode/src/vs/workbench/contrib/chat/browser/aiCustomization/aiCustomizationListWidget.js

@@ -2,7 +2,7 @@
 import { registerCss } from '@codingame/monaco-vscode-api/css';
 import { __decorate, __param } from '@codingame/monaco-vscode-api/external/tslib/tslib.es6';
 import * as aiCustomizationManagement from './media/aiCustomizationManagement.css';
-import { $ as $$1, append, createTextNode, addDisposableListener, getWindow, DisposableResizeObserver } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/dom';
+import { $ as $$1, append, createTextNode, addDisposableListener, getWindow, DisposableResizeObserver, EventType, getActiveElement, clearNode, scheduleAtNextAnimationFrame, addDisposableGenericMouseDownListener } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/dom';
 import { status } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/aria/aria';
 import { ActionBar } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/actionbar/actionbar';
 import { DisposableStore, Disposable, MutableDisposable } from '@codingame/monaco-vscode-api/vscode/vs/base/common/lifecycle';
@@ -15,14 +15,15 @@ import { Codicon } from '@codingame/monaco-vscode-api/vscode/vs/base/common/codi
 import { localize } from '@codingame/monaco-vscode-api/vscode/vs/nls';
 import { IInstantiationService } from '@codingame/monaco-vscode-api/vscode/vs/platform/instantiation/common/instantiation';
 import { WorkbenchList } from '@codingame/monaco-vscode-api/vscode/vs/platform/list/browser/listService';
+import { NotSelectableGroupId } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/list/list';
 import { PromptsStorage } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/promptSyntax/service/promptsService';
 import { IPromptsService } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/promptSyntax/service/promptsService.service';
 import { PromptsType } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/promptSyntax/promptTypes';
-import { promptIcon, hookIcon, instructionsIcon, skillIcon, agentIcon, workspaceIcon, userIcon, pluginIcon, builtinIcon, extensionIcon } from './aiCustomizationIcons.js';
-import { AI_CUSTOMIZATION_ITEM_TYPE_KEY, AI_CUSTOMIZATION_ITEM_URI_KEY, AI_CUSTOMIZATION_ITEM_DISABLED_KEY, AI_CUSTOMIZATION_ITEM_STORAGE_KEY, AI_CUSTOMIZATION_ITEM_PLUGIN_URI_KEY, AICustomizationManagementItemMenuId, sectionToPromptType, AICustomizationManagementCreateMenuId } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/browser/aiCustomization/aiCustomizationManagement';
+import { promptIcon, hookIcon, instructionsIcon, skillIcon, agentIcon, workspaceIcon, userIcon, pluginIcon, extensionIcon, builtinIcon } from './aiCustomizationIcons.js';
+import { AI_CUSTOMIZATION_ITEM_TYPE_KEY, AI_CUSTOMIZATION_ITEM_URI_KEY, AI_CUSTOMIZATION_ITEM_DISABLED_KEY, AI_CUSTOMIZATION_ITEM_STORAGE_KEY, AI_CUSTOMIZATION_ITEM_PLUGIN_URI_KEY, getAICustomizationManagementItemMenuId, sectionToPromptType, AICustomizationManagementCreateMenuId } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/browser/aiCustomization/aiCustomizationManagement';
 import { IAgentPluginService } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/plugins/agentPluginService.service';
 import { InputBox } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/inputbox/inputBox';
-import { defaultInputBoxStyles, defaultButtonStyles } from '@codingame/monaco-vscode-api/vscode/vs/platform/theme/browser/defaultStyles';
+import { defaultInputBoxStyles, defaultButtonStyles, getButtonStyles } from '@codingame/monaco-vscode-api/vscode/vs/platform/theme/browser/defaultStyles';
 import { Delayer } from '@codingame/monaco-vscode-api/vscode/vs/base/common/async';
 import { IContextViewService, IContextMenuService } from '@codingame/monaco-vscode-api/vscode/vs/platform/contextview/browser/contextView.service';
 import { HighlightedLabel } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/highlightedlabel/highlightedLabel';
@@ -34,13 +35,14 @@ import { IMenuService } from '@codingame/monaco-vscode-api/vscode/vs/platform/ac
 import { IContextKeyService } from '@codingame/monaco-vscode-api/vscode/vs/platform/contextkey/common/contextkey.service';
 import { createActionViewItem, getContextMenuActions } from '@codingame/monaco-vscode-api/vscode/vs/platform/actions/browser/menuEntryActionViewItem';
 import { ILabelService } from '@codingame/monaco-vscode-api/vscode/vs/platform/label/common/label.service';
-import { AICustomizationSources, AICustomizationManagementSection, BUILTIN_STORAGE } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/aiCustomizationWorkspaceService';
+import { AICustomizationSources, AICustomizationManagementSection } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/aiCustomizationWorkspaceService';
 import { IAICustomizationWorkspaceService } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/aiCustomizationWorkspaceService.service';
-import { Separator, Action } from '@codingame/monaco-vscode-api/vscode/vs/base/common/actions';
+import { Action, Separator } from '@codingame/monaco-vscode-api/vscode/vs/base/common/actions';
 import { IClipboardService } from '@codingame/monaco-vscode-api/vscode/vs/platform/clipboard/common/clipboardService.service';
 import { IHoverService } from '@codingame/monaco-vscode-api/vscode/vs/platform/hover/browser/hover.service';
 import { getDefaultHoverDelegate } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/hover/hoverDelegateFactory';
 import { IFileService } from '@codingame/monaco-vscode-api/vscode/vs/platform/files/common/files.service';
+import { hasReadableCustomizationContent } from '@codingame/monaco-vscode-api/vscode/vs/platform/agentHost/common/agentHostCustomizationUri';
 import { generateCustomizationDebugReport } from './aiCustomizationDebugPanel.js';
 import { getCustomizationSecondaryText } from './aiCustomizationListWidgetUtils.js';
 export { truncateToFirstLine } from './aiCustomizationListWidgetUtils.js';
@@ -48,6 +50,9 @@ import { ITelemetryService } from '@codingame/monaco-vscode-api/vscode/vs/platfo
 import { ICustomizationHarnessService } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/customizationHarnessService.service';
 import { ICommandService } from '@codingame/monaco-vscode-api/vscode/vs/platform/commands/common/commands.service';
 import { IAICustomizationItemsModel } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/browser/aiCustomization/aiCustomizationItemsModel.service';
+import { setupCollapsibleSection, renderVirtualizedSectionLoadingPlaceholder, layoutVirtualizedSections, getVirtualizedSectionMinimumHeight, layoutVirtualizedSectionList, createCustomizationCardPrimaryAction } from './customizationCardList.js';
+import { DomScrollableElement } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/scrollbar/scrollableElement';
+import { ScrollbarVisibility } from '@codingame/monaco-vscode-api/vscode/vs/base/common/scrollable';
 import { autorun } from '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/reactions/autorun';
 
 registerCss(aiCustomizationManagement);
@@ -96,9 +101,9 @@ class GroupHeaderRenderer {
     renderElement(element, _index, templateData) {
         templateData.elementDisposables.clear();
         templateData.chevron.className = "group-chevron";
-        templateData.chevron.classList.add(
-            ...ThemeIcon.asClassNameArray(element.collapsed ? Codicon.chevronRight : Codicon.chevronDown)
-        );
+        templateData.chevron.classList.add(...ThemeIcon.asClassNameArray(
+            element.collapsed ? Codicon.chevronRightCompact : Codicon.chevronDownCompact
+        ));
         templateData.icon.className = "group-icon";
         templateData.icon.classList.add(...ThemeIcon.asClassNameArray(element.icon));
         templateData.label.textContent = element.label;
@@ -139,6 +144,7 @@ function formatDisplayName(name) {
 }
 let AICustomizationItemRenderer = class AICustomizationItemRenderer {
     constructor(
+        showItemActions,
         hoverService,
         labelService,
         menuService,
@@ -146,6 +152,7 @@ let AICustomizationItemRenderer = class AICustomizationItemRenderer {
         instantiationService,
         agentPluginService
     ) {
+        this.showItemActions = showItemActions;
         this.hoverService = hoverService;
         this.labelService = labelService;
         this.menuService = menuService;
@@ -207,9 +214,9 @@ let AICustomizationItemRenderer = class AICustomizationItemRenderer {
         templateData.elementDisposables.add(this.hoverService.setupDelayedHover(templateData.container, () => {
             let content;
             if (element.isBuiltin) {
-                content = `${element.name}\n${( localize(5730, "Built-in"))}`;
+                content = `${element.name}\n${( localize(6240, "Built-in"))}`;
             } else if (element.extensionId) {
-                content = `${element.name}\n${( localize(5731, "Extension: {0}", element.extensionId))}`;
+                content = `${element.name}\n${( localize(6241, "Extension: {0}", element.extensionId))}`;
             } else {
                 const isWorkspaceItem = element.source === AICustomizationSources.local;
                 const uriLabel = this.labelService.getUriLabel(element.uri, {
@@ -222,7 +229,7 @@ let AICustomizationItemRenderer = class AICustomizationItemRenderer {
             }
             const plugin = element.pluginUri && this.agentPluginService.plugins.get().find(p => isEqual(p.uri, element.pluginUri));
             if (plugin) {
-                content += `\n${( localize(5732, "Plugin: {0}", plugin.label))}`;
+                content += `\n${( localize(6242, "Plugin: {0}", plugin.label))}`;
             }
             return {
                 content,
@@ -235,7 +242,7 @@ let AICustomizationItemRenderer = class AICustomizationItemRenderer {
         templateData.container.classList.toggle("disabled", element.disabled);
         const displayName = element.displayName ?? formatDisplayName(element.name);
         templateData.nameLabel.set(displayName, element.nameMatches);
-        if (element.badge) {
+        if (element.badge && element.promptType !== PromptsType.instructions) {
             templateData.badge.textContent = element.badge;
             templateData.badge.style.display = "";
             if (element.badgeTooltip) {
@@ -247,7 +254,8 @@ let AICustomizationItemRenderer = class AICustomizationItemRenderer {
             templateData.badge.textContent = "";
             templateData.badge.style.display = "none";
         }
-        if (element.status) {
+        const hideLoadedStatus = element.status === "loaded" && (element.promptType === PromptsType.agent || element.promptType === PromptsType.skill || element.promptType === PromptsType.instructions);
+        if (element.status && !hideLoadedStatus) {
             templateData.statusIcon.style.display = "";
             templateData.statusIcon.className = "item-status-icon";
             switch (element.status) {
@@ -324,20 +332,30 @@ let AICustomizationItemRenderer = class AICustomizationItemRenderer {
             overlayPairs.push([AI_CUSTOMIZATION_ITEM_PLUGIN_URI_KEY, ( element.pluginUri.toString())]);
         }
         const overlay = this.contextKeyService.createOverlay(overlayPairs);
-        const menu = templateData.elementDisposables.add(this.menuService.createMenu(AICustomizationManagementItemMenuId, overlay));
+        const menu = templateData.elementDisposables.add(
+            this.menuService.createMenu(getAICustomizationManagementItemMenuId(element.uri), overlay)
+        );
         const updateActions = () => {
-            const actions = menu.getActions({
-                arg: context,
-                shouldForwardArgs: true
-            });
-            const {
-                primary
-            } = getContextMenuActions(actions, "inline");
             templateData.actionBar.clear();
-            templateData.actionBar.push(primary, {
-                icon: true,
-                label: false
-            });
+            if (element.promptType === PromptsType.agent || element.promptType === PromptsType.skill || element.promptType === PromptsType.instructions) {
+                const moreAction = templateData.elementDisposables.add(( new Action("aiCustomization.moreActions", ( localize(6243, "More actions for {0}", displayName)), ThemeIcon.asClassName(Codicon.ellipsis), true, () => this.showItemActions(element, templateData.actionsContainer))));
+                templateData.actionBar.push(moreAction, {
+                    icon: true,
+                    label: false
+                });
+            } else {
+                const actions = menu.getActions({
+                    arg: context,
+                    shouldForwardArgs: true
+                });
+                const {
+                    primary
+                } = getContextMenuActions(actions, "inline");
+                templateData.actionBar.push(primary, {
+                    icon: true,
+                    label: false
+                });
+            }
         };
         updateActions();
         templateData.elementDisposables.add(menu.onDidChange(updateActions));
@@ -352,7 +370,7 @@ let AICustomizationItemRenderer = class AICustomizationItemRenderer {
         templateData.disposables.dispose();
     }
 };
-AICustomizationItemRenderer = ( __decorate([( __param(0, IHoverService)), ( __param(1, ILabelService)), ( __param(2, IMenuService)), ( __param(3, IContextKeyService)), ( __param(4, IInstantiationService)), ( __param(5, IAgentPluginService))], AICustomizationItemRenderer));
+AICustomizationItemRenderer = ( __decorate([( __param(1, IHoverService)), ( __param(2, ILabelService)), ( __param(3, IMenuService)), ( __param(4, IContextKeyService)), ( __param(5, IInstantiationService)), ( __param(6, IAgentPluginService))], AICustomizationItemRenderer));
 function toItemsModelSection(section) {
     switch (section) {
     case AICustomizationManagementSection.Agents:
@@ -365,96 +383,130 @@ function toItemsModelSection(section) {
         return undefined;
     }
 }
+function usesCustomizationCardLayout(section) {
+    return section === AICustomizationManagementSection.Agents || section === AICustomizationManagementSection.Skills || section === AICustomizationManagementSection.Instructions || section === AICustomizationManagementSection.Hooks || section === AICustomizationManagementSection.Prompts;
+}
+function getAlwaysVisibleCustomizationGroupKeys(section, isFiltering) {
+    return usesCustomizationCardLayout(section) && !isFiltering ? [PromptsStorage.local, PromptsStorage.user] : [];
+}
+function getTargetedCreateActionLabel(label, compactLabel) {
+    return compactLabel ?? label.replace(/^\$\([^)]+\)\s*/, "");
+}
 function getCountAnnouncement(section, count, isFiltering) {
     switch (section) {
     case AICustomizationManagementSection.Agents:
         if (isFiltering) {
             if (count === 0) {
-                return localize(5733, "No agents found");
+                return localize(6244, "No agents found");
             }
             if (count === 1) {
-                return localize(5734, "1 agent found");
+                return localize(6245, "1 agent found");
             }
-            return localize(5735, "{0} agents found", count);
+            return localize(6246, "{0} agents found", count);
         }
         if (count === 0) {
-            return localize(5736, "No agents");
+            return localize(6247, "No agents");
         }
         if (count === 1) {
-            return localize(5737, "1 agent");
+            return localize(6248, "1 agent");
         }
-        return localize(5738, "{0} agents", count);
+        return localize(6249, "{0} agents", count);
     case AICustomizationManagementSection.Skills:
         if (isFiltering) {
             if (count === 0) {
-                return localize(5739, "No skills found");
+                return localize(6250, "No skills found");
             }
             if (count === 1) {
-                return localize(5740, "1 skill found");
+                return localize(6251, "1 skill found");
             }
-            return localize(5741, "{0} skills found", count);
+            return localize(6252, "{0} skills found", count);
         }
         if (count === 0) {
-            return localize(5742, "No skills");
+            return localize(6253, "No skills");
         }
         if (count === 1) {
-            return localize(5743, "1 skill");
+            return localize(6254, "1 skill");
         }
-        return localize(5744, "{0} skills", count);
+        return localize(6255, "{0} skills", count);
     case AICustomizationManagementSection.Instructions:
         if (isFiltering) {
             if (count === 0) {
-                return localize(5745, "No instructions found");
+                return localize(6256, "No instructions found");
             }
             if (count === 1) {
-                return localize(5746, "1 instruction file found");
+                return localize(6257, "1 instruction file found");
             }
-            return localize(5747, "{0} instruction files found", count);
+            return localize(6258, "{0} instruction files found", count);
         }
         if (count === 0) {
-            return localize(5748, "No instructions");
+            return localize(6259, "No instructions");
         }
         if (count === 1) {
-            return localize(5749, "1 instruction file");
+            return localize(6260, "1 instruction file");
         }
-        return localize(5750, "{0} instruction files", count);
+        return localize(6261, "{0} instruction files", count);
     case AICustomizationManagementSection.Hooks:
         if (isFiltering) {
             if (count === 0) {
-                return localize(5751, "No hooks found");
+                return localize(6262, "No hooks found");
             }
             if (count === 1) {
-                return localize(5752, "1 hook found");
+                return localize(6263, "1 hook found");
             }
-            return localize(5753, "{0} hooks found", count);
+            return localize(6264, "{0} hooks found", count);
         }
         if (count === 0) {
-            return localize(5754, "No hooks");
+            return localize(6265, "No hooks");
         }
         if (count === 1) {
-            return localize(5755, "1 hook");
+            return localize(6266, "1 hook");
         }
-        return localize(5756, "{0} hooks", count);
+        return localize(6267, "{0} hooks", count);
     case AICustomizationManagementSection.Prompts:
     default:
         if (isFiltering) {
             if (count === 0) {
-                return localize(5757, "No prompts found");
+                return localize(6268, "No prompts found");
             }
             if (count === 1) {
-                return localize(5758, "1 prompt found");
+                return localize(6269, "1 prompt found");
             }
-            return localize(5759, "{0} prompts found", count);
+            return localize(6270, "{0} prompts found", count);
         }
         if (count === 0) {
-            return localize(5760, "No prompts");
+            return localize(6271, "No prompts");
         }
         if (count === 1) {
-            return localize(5761, "1 prompt");
+            return localize(6272, "1 prompt");
         }
-        return localize(5762, "{0} prompts", count);
+        return localize(6273, "{0} prompts", count);
+    }
+}
+function getCollapsedCustomizationGroupKey(section, groupKey) {
+    return `${section}:${groupKey}`;
+}
+function getCustomizationItemStatusLabel(item) {
+    switch (item.status) {
+    case "loading":
+        return localize(6274, "Loading");
+    case "loaded":
+        return localize(6275, "Loaded");
+    case "degraded":
+        return localize(6276, "Needs attention");
+    case "error":
+        return localize(6277, "Error");
+    default:
+        return undefined;
     }
 }
+function getCustomizationItemAriaLabel(item) {
+    const displayName = item.displayName ?? formatDisplayName(item.name);
+    const secondaryText = getCustomizationSecondaryText(item.description, item.filename, item.promptType);
+    const statusLabel = getCustomizationItemStatusLabel(item);
+    const accessibleSecondaryText = [secondaryText, statusLabel, item.statusMessage].filter(Boolean).join(". ");
+    const nameAndDescription = accessibleSecondaryText ? ( localize(6278, "{0}. {1}", displayName, accessibleSecondaryText)) : displayName;
+    return item.disabled ? ( localize(6279, "{0}, disabled", nameAndDescription)) : nameAndDescription;
+}
 let AICustomizationListWidget = class AICustomizationListWidget extends Disposable {
     constructor(
         instantiationService,
@@ -493,16 +545,26 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
         this.commandService = commandService;
         this.itemsModel = itemsModel;
         this.agentPluginService = agentPluginService;
+        this.cardSectionLists = [];
+        this.cardRowsByUri = ( new Map());
+        this.cardRowsById = ( new Map());
+        this.cardMenuButtonsById = ( new Map());
+        this.cardMenuOpen = false;
         this.currentSection = AICustomizationManagementSection.Agents;
         this.allItems = [];
         this.displayEntries = [];
         this.searchQuery = "";
+        this.sectionLoading = false;
         this.collapsedGroups = ( new Set());
         this._layoutDeferred = false;
+        this.revealLastItemScheduler = this._register(( new MutableDisposable()));
         this.lastLayoutWidth = 0;
         this.lastLayoutHeight = 0;
         this.lastHeaderHeight = 0;
         this.dropdownActionDisposables = this._register(( new DisposableStore()));
+        this.cardDisposables = this._register(( new DisposableStore()));
+        this.pendingCardSectionLayout = this._register(( new MutableDisposable()));
+        this.cardSectionScrollPositions = ( new Map());
         this._sectionLoadId = 0;
         this.delayedFilter = ( new Delayer(200));
         this.currentSectionSubscription = this._register(( new MutableDisposable()));
@@ -514,7 +576,7 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
         this.onDidRequestCreate = this._onDidRequestCreate.event;
         this._onDidRequestCreateManual = this._register(( new Emitter()));
         this.onDidRequestCreateManual = this._onDidRequestCreateManual.event;
-        this.element = $(".ai-customization-list-widget");
+        this.element = $(".ai-customization-list-widget.plugin-list-widget");
         this.create();
         this._register(autorun(reader => {
             this.workspaceService.activeProjectRoot.read(reader);
@@ -558,7 +620,7 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
         this.searchAndButtonContainer = append(this.element, $(".list-search-and-button-container"));
         this.searchContainer = append(this.searchAndButtonContainer, $(".list-search-container"));
         this.searchInput = this._register(( new InputBox(this.searchContainer, this.contextViewService, {
-            placeholder: ( localize(5763, "Type to search...")),
+            placeholder: ( localize(6280, "Type to search...")),
             inputBoxStyles: defaultInputBoxStyles
         })));
         this._register(this.searchInput.onDidChange(() => {
@@ -576,14 +638,12 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
         }));
         this.addButtonContainer = append(this.searchAndButtonContainer, $(".list-add-button-container"));
         this.addButtonSimple = this._register(( new Button(this.addButtonContainer, {
-            ...defaultButtonStyles,
-            supportIcons: true
+            ...defaultButtonStyles
         })));
         this.addButtonSimple.element.classList.add("list-add-button");
         this._register(this.addButtonSimple.onDidClick(() => this.executePrimaryCreateAction()));
         this.addButton = this._register(( new ButtonWithDropdown(this.addButtonContainer, {
             ...defaultButtonStyles,
-            supportIcons: true,
             contextMenuProvider: this.contextMenuService,
             addPrimaryActionToDropdown: false,
             actions: {
@@ -592,14 +652,38 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
         })));
         this.addButton.element.classList.add("list-add-button");
         this._register(this.addButton.onDidClick(() => this.executePrimaryCreateAction()));
-        this.updateAddButton();
+        this.cardContainer = append(this.element, $(".plugin-card-container.customization-card-container"));
+        this.cardScrollable = this._register(( new DomScrollableElement(this.cardContainer, {
+            horizontal: ScrollbarVisibility.Hidden,
+            vertical: ScrollbarVisibility.Auto,
+            useShadows: false
+        })));
+        this._register(
+            addDisposableListener(this.cardContainer, EventType.SCROLL, () => {
+                this.cardScrollable.setScrollPosition({
+                    scrollTop: this.cardContainer.scrollTop
+                });
+            })
+        );
+        this.cardScrollableNode = this.cardScrollable.getDomNode();
+        this.cardScrollableNode.classList.add("plugin-card-scrollable");
+        this.cardScrollableNode.style.display = "none";
+        this.element.appendChild(this.cardScrollableNode);
+        const cardResizeObserver = this._register(new DisposableResizeObserver(
+            "AICustomizationListWidget.cardScrollable",
+            () => this.scheduleCardSectionLayout()
+        ));
+        this._register(cardResizeObserver.observe(this.cardScrollableNode));
         this.listContainer = append(this.element, $(".list-container"));
         this.emptyStateContainer = append(this.element, $(".list-empty-state"));
         const emptyStateHeader = append(this.emptyStateContainer, $(".empty-state-header"));
         this.emptyStateText = append(emptyStateHeader, $(".empty-state-text"));
         this.emptyStateSubtext = append(this.emptyStateContainer, $(".empty-state-subtext"));
         this.emptyStateContainer.style.display = "none";
-        const itemRenderer = this.instantiationService.createInstance(AICustomizationItemRenderer);
+        const itemRenderer = this.instantiationService.createInstance(
+            AICustomizationItemRenderer,
+            (item, anchor) => this.showCardItemActions(item, anchor)
+        );
         this.list = this._register(this.instantiationService.createInstance(
             WorkbenchList,
             "AICustomizationManagementList",
@@ -608,25 +692,27 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
             [( new GroupHeaderRenderer(this.hoverService)), itemRenderer],
             {
                 identityProvider: {
-                    getId: entry => entry.type === "group-header" ? entry.id : entry.item.id
+                    getId: entry => entry.type === "group-header" ? entry.id : entry.item.id,
+                    getGroupId: entry => entry.type === "group-header" ? NotSelectableGroupId : 0
                 },
                 accessibilityProvider: {
                     getAriaLabel: entry => {
                         if (entry.type === "group-header") {
                             return localize(
-                                5764,
+                                6281,
                                 "{0}, {1} items, {2}",
                                 entry.label,
                                 entry.count,
-                                entry.collapsed ? ( localize(5765, "collapsed")) : ( localize(5766, "expanded"))
+                                entry.collapsed ? ( localize(6282, "collapsed")) : ( localize(6283, "expanded"))
                             );
                         }
-                        const displayName = entry.item.displayName ?? formatDisplayName(entry.item.name);
-                        const secondaryText = getCustomizationSecondaryText(entry.item.description, entry.item.filename, entry.item.promptType);
-                        const nameAndDesc = secondaryText ? ( localize(5767, "{0}. {1}", displayName, secondaryText)) : displayName;
-                        return entry.item.disabled ? ( localize(5768, "{0}, disabled", nameAndDesc)) : nameAndDesc;
+                        const label = getCustomizationItemAriaLabel(entry.item);
+                        if (!hasReadableCustomizationContent(entry.item.uri)) {
+                            return localize(6284, "{0}, source content unavailable", label);
+                        }
+                        return label;
                     },
-                    getWidgetAriaLabel: () => ( localize(5769, "Agent Customizations"))
+                    getWidgetAriaLabel: () => ( localize(6285, "Agent Customizations"))
                 },
                 keyboardNavigationLabelProvider: {
                     getKeyboardNavigationLabel: entry => entry.type === "group-header" ? entry.label : entry.item.name
@@ -640,7 +726,9 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
                 if (e.element.type === "group-header") {
                     this.toggleGroup(e.element);
                 } else {
-                    this._onDidSelectItem.fire(e.element.item);
+                    if (hasReadableCustomizationContent(e.element.item.uri)) {
+                        this._onDidSelectItem.fire(e.element.item);
+                    }
                 }
             }
         }));
@@ -655,13 +743,18 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
                 }
             }
         }));
-        this._register(this.list.onContextMenu(e => this.onContextMenu(e)));
+        this._register(this.list.onContextMenu(e => {
+            if (!this.usesCardLayout()) {
+                this.onContextMenu(e);
+            }
+        }));
         this._register(this.fileService.onDidFilesChange(e => {
             if (e.gotDeleted()) {
                 this.refresh();
             }
         }));
         this.updateSectionHeader();
+        this.updateAddButton();
     }
     onContextMenu(e) {
         if (!e.element || e.element.type !== "file-item") {
@@ -688,16 +781,16 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
             overlayPairs.push([AI_CUSTOMIZATION_ITEM_PLUGIN_URI_KEY, ( item.pluginUri.toString())]);
         }
         const overlay = this.contextKeyService.createOverlay(overlayPairs);
-        const actions = this.menuService.getMenuActions(AICustomizationManagementItemMenuId, overlay, {
+        const actions = this.menuService.getMenuActions(getAICustomizationManagementItemMenuId(item.uri), overlay, {
             arg: context,
             shouldForwardArgs: true
         });
         const {
             secondary
         } = getContextMenuActions(actions, "inline");
-        const copyActions = item.isBuiltin ? [] : [( new Separator()), ( new Action("copyFullPath", ( localize(5770, "Copy Full Path")), undefined, true, async () => {
+        const copyActions = item.isBuiltin || !hasReadableCustomizationContent(item.uri) ? [] : [( new Separator()), ( new Action("copyFullPath", ( localize(6286, "Copy Full Path")), undefined, true, async () => {
             await this.clipboardService.writeText(item.uri.fsPath);
-        })), ( new Action("copyRelativePath", ( localize(5771, "Copy Relative Path")), undefined, true, async () => {
+        })), ( new Action("copyRelativePath", ( localize(6287, "Copy Relative Path")), undefined, true, async () => {
             const basePath = this.workspaceService.getActiveProjectRoot();
             if (basePath && item.uri.fsPath.startsWith(basePath.fsPath)) {
                 const relative = item.uri.fsPath.substring(basePath.fsPath.length + 1);
@@ -714,12 +807,102 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
             getActions: () => [...secondary, ...copyActions]
         });
     }
+    showCardItemActions(item, anchor) {
+        this.cardMenuOpen = true;
+        this.lastCardFocusItemId = item.id;
+        const disposables = ( new DisposableStore());
+        const context = {
+            uri: ( item.uri.toString()),
+            name: item.name,
+            promptType: item.promptType,
+            source: item.source,
+            pluginUri: item.pluginUri?.toString(),
+            itemId: item.id
+        };
+        const menu = disposables.add(this.createCardItemMenu(item));
+        const groups = menu.getActions({
+            arg: context,
+            shouldForwardArgs: true
+        });
+        const actions = [];
+        const addedActionIds = ( new Set());
+        for (const [, groupActions] of groups) {
+            const uniqueGroupActions = groupActions.filter(action => {
+                if (( addedActionIds.has(action.id))) {
+                    return false;
+                }
+                addedActionIds.add(action.id);
+                return true;
+            });
+            if (uniqueGroupActions.length === 0) {
+                continue;
+            }
+            if (actions.length > 0) {
+                actions.push(( new Separator()));
+            }
+            actions.push(...uniqueGroupActions);
+        }
+        if (!item.isBuiltin && hasReadableCustomizationContent(item.uri)) {
+            if (actions.length > 0) {
+                actions.push(( new Separator()));
+            }
+            actions.push(disposables.add(( new Action("copyRelativePath", ( localize(6287, "Copy Relative Path")), undefined, true, async () => {
+                const basePath = this.workspaceService.getActiveProjectRoot();
+                const relativePath = basePath && item.uri.fsPath.startsWith(basePath.fsPath) ? item.uri.fsPath.substring(basePath.fsPath.length + 1) : this.labelService.getUriLabel(item.uri, {
+                    relative: true
+                });
+                await this.clipboardService.writeText(relativePath);
+            }))));
+        }
+        if (actions.length === 0) {
+            this.cardMenuOpen = false;
+            disposables.dispose();
+            return;
+        }
+        this.contextMenuService.showContextMenu({
+            getAnchor: () => anchor,
+            getActions: () => actions,
+            onHide: () => {
+                this.cardMenuOpen = false;
+                if (!this.focusCardSectionItem(item.id)) {
+                    (this.cardMenuButtonsById.get(item.id) ?? this.cardRowsById.get(item.id) ?? this.firstCardFocusElement)?.focus();
+                }
+                disposables.dispose();
+            }
+        });
+    }
+    createCardItemMenu(item) {
+        const overlayPairs = [
+            [AI_CUSTOMIZATION_ITEM_TYPE_KEY, item.promptType],
+            [AI_CUSTOMIZATION_ITEM_URI_KEY, ( item.uri.toString())],
+            [AI_CUSTOMIZATION_ITEM_DISABLED_KEY, item.disabled],
+            [AI_CUSTOMIZATION_ITEM_STORAGE_KEY, item.source]
+        ];
+        if (item.pluginUri) {
+            overlayPairs.push([AI_CUSTOMIZATION_ITEM_PLUGIN_URI_KEY, ( item.pluginUri.toString())]);
+        }
+        const overlay = this.contextKeyService.createOverlay(overlayPairs);
+        return this.menuService.createMenu(getAICustomizationManagementItemMenuId(item.uri), overlay);
+    }
+    hasCardItemActions(item) {
+        if (hasReadableCustomizationContent(item.uri)) {
+            return true;
+        }
+        const menu = this.createCardItemMenu(item);
+        try {
+            return ( menu.getActions().some(([, actions]) => actions.length > 0));
+        } finally {
+            menu.dispose();
+        }
+    }
     async setSection(section) {
         const loadId = ++this._sectionLoadId;
         this.currentSection = section;
+        this.element.classList.toggle("plugin-list-widget", this.usesCardLayout());
         this.updateSectionHeader();
         const modelSection = toItemsModelSection(section);
         if (!modelSection) {
+            this.sectionLoading = false;
             this.currentSectionSubscription.clear();
             this.allItems = [];
             const matchCount = this.filterItems();
@@ -729,6 +912,7 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
             return;
         }
         const observable = this.itemsModel.getItems(modelSection);
+        this.sectionLoading = true;
         this.currentSectionSubscription.value = autorun(reader => {
             const items = observable.read(reader);
             this.allItems = items;
@@ -738,6 +922,8 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
         this.updateAddButton();
         await this.itemsModel.whenSectionLoaded(modelSection);
         if (loadId === this._sectionLoadId) {
+            this.sectionLoading = false;
+            this.filterItems();
             this.announceItemCount(this.applySearchFilter(this.allItems).length);
         }
     }
@@ -748,47 +934,47 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
         let learnMoreLabel;
         switch (this.currentSection) {
         case AICustomizationManagementSection.Agents:
-            title = ( localize(5772, "Agents"));
+            title = ( localize(6288, "Agents"));
             description = ( localize(
-                5773,
+                6289,
                 "Configure the AI to adopt different personas tailored to specific development tasks. Each agent has its own instructions, tools, and behavior."
             ));
             docsUrl = "https://code.visualstudio.com/docs/agent-customization/custom-agents?referrer=in-product";
-            learnMoreLabel = ( localize(5774, "Learn more about custom agents"));
+            learnMoreLabel = ( localize(6290, "Learn more about custom agents"));
             break;
         case AICustomizationManagementSection.Skills:
-            title = ( localize(5775, "Skills"));
+            title = ( localize(6291, "Skills"));
             description = ( localize(
-                5776,
+                6292,
                 "Folders of instructions, scripts, and resources that Copilot loads when relevant to perform specialized tasks."
             ));
             docsUrl = "https://code.visualstudio.com/docs/agent-customization/agent-skills?referrer=in-product";
-            learnMoreLabel = ( localize(5777, "Learn more about agent skills"));
+            learnMoreLabel = ( localize(6293, "Learn more about agent skills"));
             break;
         case AICustomizationManagementSection.Instructions:
-            title = ( localize(5778, "Instructions"));
+            title = ( localize(6294, "Instructions"));
             description = ( localize(
-                5779,
+                6295,
                 "Define common guidelines and rules that automatically influence how AI generates code and handles development tasks."
             ));
             docsUrl = "https://code.visualstudio.com/docs/agent-customization/custom-instructions?referrer=in-product";
-            learnMoreLabel = ( localize(5780, "Learn more about custom instructions"));
+            learnMoreLabel = ( localize(6296, "Learn more about custom instructions"));
             break;
         case AICustomizationManagementSection.Hooks:
-            title = ( localize(5781, "Hooks"));
-            description = ( localize(5782, "Prompts executed at specific points during an agentic lifecycle."));
+            title = ( localize(6297, "Hooks"));
+            description = ( localize(6298, "Prompts executed at specific points during an agentic lifecycle."));
             docsUrl = "https://code.visualstudio.com/docs/agent-customization/hooks?referrer=in-product";
-            learnMoreLabel = ( localize(5783, "Learn more about hooks"));
+            learnMoreLabel = ( localize(6299, "Learn more about hooks"));
             break;
         case AICustomizationManagementSection.Prompts:
         default:
-            title = ( localize(5784, "Prompts"));
+            title = ( localize(6300, "Prompts"));
             description = ( localize(
-                5785,
+                6301,
                 "Reusable prompts for common development tasks like generating code, performing reviews, or scaffolding components."
             ));
             docsUrl = "https://code.visualstudio.com/docs/agent-customization/prompt-files?referrer=in-product";
-            learnMoreLabel = ( localize(5786, "Learn more about prompt files"));
+            learnMoreLabel = ( localize(6302, "Learn more about prompt files"));
             break;
         }
         this.sectionTitle.textContent = title;
@@ -797,6 +983,14 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
         this.sectionLink.href = docsUrl;
     }
     updateAddButton() {
+        if (this.usesCardLayout()) {
+            this.addButton.element.style.display = "none";
+            this.addButtonSimple.element.style.display = "none";
+            if (this.allItems.length > 0 || !this.searchQuery.trim()) {
+                this.filterItems();
+            }
+            return;
+        }
         const actions = this.buildCreateActions();
         const [primary, ...dropdown] = actions;
         const hasDropdown = dropdown.length > 0;
@@ -826,7 +1020,7 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
         const hasWorkspace = this.hasActiveWorkspace();
         if (override?.commandId) {
             return [{
-                label: `$(${Codicon.add.id}) ${override.label}`,
+                label: override.label ?? ( localize(6303, "New {0}", typeLabel)),
                 enabled: true,
                 run: () => {
                     this.commandService.executeCommand(override.commandId);
@@ -840,9 +1034,8 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
         for (const [, group] of menuActions) {
             for (const menuItem of group) {
                 if (menuItem instanceof MenuItemAction) {
-                    const icon = ThemeIcon.isThemeIcon(menuItem.item.icon) ? menuItem.item.icon.id : Codicon.add.id;
                     extensionCreateActions.push({
-                        label: `$(${icon}) ${typeof menuItem.item.title === "string" ? menuItem.item.title : menuItem.item.title.value}`,
+                        label: typeof menuItem.item.title === "string" ? menuItem.item.title : menuItem.item.title.value,
                         enabled: menuItem.enabled,
                         run: () => {
                             menuItem.run();
@@ -859,8 +1052,9 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
         const addedTargets = ( new Set());
         if (override?.rootFile && hasWorkspace) {
             actions.push({
-                label: `$(${Codicon.add.id}) ${override.label}`,
+                label: override.label ?? ( localize(6303, "New {0}", typeLabel)),
                 enabled: true,
+                target: "workspace",
                 run: () => {
                     this._onDidRequestCreateManual.fire({
                         type: promptType,
@@ -873,64 +1067,74 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
         if (promptType === PromptsType.hook) {
             if (!this.workspaceService.isSessionsWindow && !descriptor.hideGenerateButton) {
                 actions.push({
-                    label: `$(${Codicon.sparkle.id}) Generate ${typeLabel}`,
+                    label: ( localize(6304, "Generate with AI")),
+                    tooltip: ( localize(6305, "Generate {0} with AI", typeLabel)),
                     enabled: true,
+                    kind: "generate",
                     run: () => {
                         this._onDidRequestCreate.fire(promptType);
                     }
                 });
-                if (hasWorkspace) {
-                    actions.push({
-                        label: `$(${Codicon.add.id}) ${( localize(5787, "Configure Hooks"))}`,
-                        enabled: true,
-                        run: () => {
-                            this._onDidRequestCreateManual.fire({
-                                type: promptType,
-                                target: "workspace"
-                            });
-                        }
-                    });
-                }
-            } else if (!override?.commandId) {
+            }
+            if (hasWorkspace) {
                 actions.push({
-                    label: `$(${Codicon.add.id}) ${( localize(5787, "Configure Hooks"))}`,
-                    enabled: hasWorkspace,
-                    tooltip: hasWorkspace ? undefined : ( localize(5788, "Open a workspace folder to configure hooks.")),
+                    label: ( localize(6306, "New Hook")),
+                    compactLabel: ( localize(6306, "New Hook")),
+                    enabled: true,
+                    target: "workspace",
                     run: () => {
                         this._onDidRequestCreateManual.fire({
                             type: promptType,
-                            target: "workspace"
+                            target: "local"
                         });
                     }
                 });
             }
+            actions.push({
+                label: ( localize(6306, "New Hook")),
+                compactLabel: ( localize(6306, "New Hook")),
+                enabled: true,
+                target: "user",
+                run: () => {
+                    this._onDidRequestCreateManual.fire({
+                        type: promptType,
+                        target: "user"
+                    });
+                }
+            });
             return actions;
         }
         if (!override?.rootFile) {
             if (!this.workspaceService.isSessionsWindow && !descriptor.hideGenerateButton) {
                 actions.push({
-                    label: `$(${Codicon.sparkle.id}) Generate ${typeLabel}`,
+                    label: ( localize(6304, "Generate with AI")),
+                    tooltip: ( localize(6305, "Generate {0} with AI", typeLabel)),
                     enabled: true,
+                    kind: "generate",
                     run: () => {
                         this._onDidRequestCreate.fire(promptType);
                     }
                 });
             } else if (hasWorkspace) {
                 actions.push({
-                    label: `$(${Codicon.add.id}) New ${createTypeLabel} (Workspace)`,
+                    label: ( localize(6307, "New {0} (Workspace)", createTypeLabel)),
+                    compactLabel: ( localize(6303, "New {0}", createTypeLabel)),
                     enabled: true,
+                    target: "workspace",
                     run: () => {
                         this._onDidRequestCreateManual.fire({
                             type: promptType,
-                            target: "workspace"
+                            target: "local"
                         });
                     }
                 });
                 addedTargets.add("workspace");
             } else {
                 actions.push({
-                    label: `$(${Codicon.add.id}) New ${createTypeLabel} (User)`,
+                    label: ( localize(6308, "New {0} (User)", createTypeLabel)),
+                    compactLabel: ( localize(6303, "New {0}", createTypeLabel)),
                     enabled: true,
+                    target: "user",
                     run: () => {
                         this._onDidRequestCreateManual.fire({
                             type: promptType,
@@ -943,20 +1147,24 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
         }
         if (hasWorkspace && !( addedTargets.has("workspace"))) {
             actions.push({
-                label: `$(${Codicon.folder.id}) New ${createTypeLabel} (Workspace)`,
+                label: ( localize(6307, "New {0} (Workspace)", createTypeLabel)),
+                compactLabel: ( localize(6303, "New {0}", createTypeLabel)),
                 enabled: true,
+                target: "workspace",
                 run: () => {
                     this._onDidRequestCreateManual.fire({
                         type: promptType,
-                        target: "workspace"
+                        target: "local"
                     });
                 }
             });
         }
         if (!( addedTargets.has("user"))) {
             actions.push({
-                label: `$(${Codicon.account.id}) New ${createTypeLabel} (User)`,
+                label: ( localize(6308, "New {0} (User)", createTypeLabel)),
+                compactLabel: ( localize(6303, "New {0}", createTypeLabel)),
                 enabled: true,
+                target: "user",
                 run: () => {
                     this._onDidRequestCreateManual.fire({
                         type: promptType,
@@ -968,8 +1176,9 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
         if (hasWorkspace && override?.rootFileShortcuts && !( addedTargets.has("workspace-root"))) {
             for (const fileName of override.rootFileShortcuts) {
                 actions.push({
-                    label: `$(${Codicon.file.id}) New ${fileName}`,
+                    label: ( localize(6309, "New {0}", fileName)),
                     enabled: true,
+                    target: "workspace",
                     run: () => {
                         this._onDidRequestCreateManual.fire({
                             type: promptType,
@@ -999,16 +1208,16 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
     getTypeLabel() {
         switch (this.currentSection) {
         case AICustomizationManagementSection.Agents:
-            return localize(5789, "Agent");
+            return localize(6310, "Agent");
         case AICustomizationManagementSection.Skills:
-            return localize(5790, "Skill");
+            return localize(6311, "Skill");
         case AICustomizationManagementSection.Instructions:
-            return localize(5778, "Instructions");
+            return localize(6312, "Instruction");
         case AICustomizationManagementSection.Hooks:
-            return localize(5791, "Hook");
+            return localize(6313, "Hook");
         case AICustomizationManagementSection.Prompts:
         default:
-            return localize(5792, "Prompt");
+            return localize(6314, "Prompt");
         }
     }
     announceItemCount(count) {
@@ -1068,7 +1277,7 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
             if (group.items.length === 0) {
                 continue;
             }
-            const collapsed = ( this.collapsedGroups.has(group.groupKey));
+            const collapsed = !this.usesCardLayout() && ( this.collapsedGroups.has(this.getCollapsedGroupKey(group.groupKey)));
             this.displayEntries.push({
                 type: "group-header",
                 id: `group-${group.groupKey}`,
@@ -1096,108 +1305,69 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
         this.updateEmptyState();
     }
     groupMatchedItems(matchedItems) {
-        const groups = this.currentSection === AICustomizationManagementSection.Instructions ? [{
-            groupKey: "agent-instructions",
-            label: ( localize(5793, "Agent Instructions")),
-            icon: instructionsIcon,
-            description: ( localize(
-                5794,
-                "Instruction files automatically loaded for all agent interactions (e.g. AGENTS.md, CLAUDE.md, copilot-instructions.md)."
-            )),
-            items: []
-        }, {
-            groupKey: "context-instructions",
-            label: ( localize(5795, "Included Based on Context")),
-            icon: instructionsIcon,
-            description: ( localize(
-                5796,
-                "Instructions automatically loaded when matching files are part of the context."
-            )),
-            items: []
-        }, {
-            groupKey: "on-demand-instructions",
-            label: ( localize(5797, "Loaded on Demand")),
-            icon: instructionsIcon,
-            description: ( localize(5798, "Instructions loaded only when explicitly referenced.")),
-            items: []
-        }, {
+        const groups = [{
             groupKey: PromptsStorage.local,
-            label: ( localize(5799, "Workspace")),
+            label: ( localize(6315, "Workspace")),
             icon: workspaceIcon,
             description: ( localize(
-                5800,
+                6316,
                 "Customizations stored as files in your project folder and shared with your team via version control."
             )),
             items: []
         }, {
             groupKey: PromptsStorage.user,
-            label: ( localize(5801, "User")),
+            label: ( localize(6317, "User")),
             icon: userIcon,
             description: ( localize(
-                5802,
+                6318,
                 "Customizations stored locally on your machine in a central location. Private to you and available across all projects."
             )),
             items: []
         }, {
             groupKey: PromptsStorage.plugin,
-            label: ( localize(5803, "Plugins")),
+            label: ( localize(6319, "Plugins")),
             icon: pluginIcon,
-            description: ( localize(5804, "Read-only customizations provided by installed plugins.")),
-            items: []
-        }, {
-            groupKey: BUILTIN_STORAGE,
-            label: ( localize(5805, "Built-in")),
-            icon: builtinIcon,
-            description: ( localize(5806, "Built-in customizations shipped with the application.")),
-            items: []
-        }] : [{
-            groupKey: PromptsStorage.local,
-            label: ( localize(5799, "Workspace")),
-            icon: workspaceIcon,
-            description: ( localize(
-                5800,
-                "Customizations stored as files in your project folder and shared with your team via version control."
-            )),
-            items: []
-        }, {
-            groupKey: PromptsStorage.user,
-            label: ( localize(5801, "User")),
-            icon: userIcon,
-            description: ( localize(
-                5802,
-                "Customizations stored locally on your machine in a central location. Private to you and available across all projects."
-            )),
-            items: []
-        }, {
-            groupKey: PromptsStorage.plugin,
-            label: ( localize(5803, "Plugins")),
-            icon: pluginIcon,
-            description: ( localize(5804, "Read-only customizations provided by installed plugins.")),
+            description: ( localize(6320, "Read-only customizations provided by installed plugins.")),
             items: []
         }, {
             groupKey: PromptsStorage.extension,
-            label: ( localize(5807, "Extensions")),
+            label: ( localize(6321, "Extensions")),
             icon: extensionIcon,
-            description: ( localize(5808, "Read-only customizations provided by installed extensions.")),
+            description: ( localize(6322, "Read-only customizations provided by installed extensions.")),
             items: []
         }, {
-            groupKey: BUILTIN_STORAGE,
-            label: ( localize(5805, "Built-in")),
+            groupKey: PromptsStorage.builtIn,
+            label: ( localize(6323, "Built-in")),
             icon: builtinIcon,
-            description: ( localize(5806, "Built-in customizations shipped with the application.")),
+            description: ( localize(6324, "Built-in customizations shipped with the application.")),
             items: []
         }];
         for (const item of matchedItems) {
-            const key = item.groupKey ?? item.source ?? AICustomizationSources.local;
+            const key = this.currentSection === AICustomizationManagementSection.Instructions ? item.source : item.groupKey ?? item.source ?? AICustomizationSources.local;
             let group = groups.find(g => g.groupKey === key);
             if (!group) {
                 let label;
+                let description = "";
                 switch (key) {
                 case "remote-host":
-                    label = ( localize(5809, "Remote"));
+                    label = ( localize(6325, "Remote"));
+                    if (this.currentSection === AICustomizationManagementSection.Skills) {
+                        description = ( localize(
+                            6326,
+                            "Skills available from {0}, the active remote agent environment.",
+                            this.harnessService.getActiveDescriptor().label
+                        ));
+                    }
                     break;
                 case "remote-client":
-                    label = ( localize(5810, "Local"));
+                    label = ( localize(6327, "Local"));
+                    if (this.currentSection === AICustomizationManagementSection.Skills) {
+                        description = ( localize(
+                            6328,
+                            "Skills stored on your local machine and synced to {0}, the active remote agent environment.",
+                            this.harnessService.getActiveDescriptor().label
+                        ));
+                    }
                     break;
                 default:
                     label = formatDisplayName(key);
@@ -1206,10 +1376,10 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
                     groupKey: key,
                     label,
                     icon: Codicon.folder,
-                    description: "",
+                    description,
                     items: []
                 };
-                const builtinIdx = groups.findIndex(g => g.groupKey === BUILTIN_STORAGE);
+                const builtinIdx = groups.findIndex(g => g.groupKey === PromptsStorage.builtIn);
                 if (builtinIdx >= 0) {
                     groups.splice(builtinIdx, 0, group);
                 } else {
@@ -1219,7 +1389,458 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
             group.items.push(item);
         }
         this.buildGroupedEntries(groups);
-        this.commitDisplayEntries();
+        if (this.usesCardLayout()) {
+            this.renderCardGroups(groups);
+        } else {
+            this.commitDisplayEntries();
+        }
+    }
+    usesCardLayout() {
+        return usesCustomizationCardLayout(this.currentSection);
+    }
+    renderCardGroups(groups) {
+        const activeElement = getActiveElement();
+        const shouldRestoreFocus = this.cardMenuOpen || !!activeElement && this.cardContainer.contains(activeElement);
+        const focusItemId = this.lastCardFocusItemId;
+        const isFiltering = !!this.searchQuery.trim();
+        const usesTargetedCreateActions = this.usesTargetedCreateActions();
+        const createGroupKey = isFiltering || usesTargetedCreateActions ? undefined : this.getCreateActionGroupKey();
+        const alwaysVisibleGroupKeys = ( new Set(getAlwaysVisibleCustomizationGroupKeys(this.currentSection, isFiltering)));
+        const visibleGroups = groups.filter(group => group.items.length > 0 || ( alwaysVisibleGroupKeys.has(group.groupKey)) || group.groupKey === createGroupKey || this.sectionLoading && !isFiltering);
+        if (visibleGroups.length === 0) {
+            this.captureCardSectionScrollPositions();
+            this.cardDisposables.clear();
+            this.cardSectionLists = [];
+            this.cardRowsByUri.clear();
+            this.cardRowsById.clear();
+            this.cardMenuButtonsById.clear();
+            this.firstCardFocusElement = undefined;
+            this.cardSectionLayoutContainer = undefined;
+            clearNode(this.cardContainer);
+            this.cardScrollableNode.style.display = "none";
+            this.updateEmptyState();
+            return;
+        }
+        if (createGroupKey) {
+            const createGroupIndex = visibleGroups.findIndex(group => group.groupKey === createGroupKey);
+            if (createGroupIndex > 0) {
+                visibleGroups.unshift(...visibleGroups.splice(createGroupIndex, 1));
+            }
+        }
+        this.captureCardSectionScrollPositions();
+        this.cardDisposables.clear();
+        this.cardSectionLists = [];
+        this.cardRowsByUri.clear();
+        this.cardRowsById.clear();
+        this.cardMenuButtonsById.clear();
+        this.firstCardFocusElement = undefined;
+        this.cardSectionLayoutContainer = undefined;
+        clearNode(this.cardContainer);
+        this.listContainer.style.display = "none";
+        this.emptyStateContainer.style.display = "none";
+        this.cardScrollableNode.style.display = "";
+        const content = append(this.cardContainer, $(
+            ".plugin-card-scroll.plugin-card-scroll-content.customization-card-scroll.distributed-section-layout"
+        ));
+        this.cardSectionLayoutContainer = content;
+        const contentResizeObserver = this.cardDisposables.add(new DisposableResizeObserver(
+            "AICustomizationListWidget.cardScrollContent",
+            () => this.scheduleCardSectionLayout()
+        ));
+        this.cardDisposables.add(contentResizeObserver.observe(content));
+        for (const group of visibleGroups) {
+            const collapsedGroupKey = this.getCollapsedGroupKey(group.groupKey);
+            const section = append(content, $(".plugin-card-section.customization-card-section"));
+            const header = append(section, $(".plugin-card-section-header"));
+            const text = append(header, $(".plugin-card-section-text"));
+            const headingRow = append(text, $(".plugin-card-section-heading-row"));
+            const heading = append(headingRow, $("h3.plugin-card-section-title"));
+            heading.textContent = group.label;
+            const count = append(headingRow, $(".plugin-card-section-count"));
+            count.textContent = String(group.items.length);
+            if (group.description) {
+                const description = append(text, $(".plugin-card-section-description"));
+                description.textContent = group.description;
+            }
+            if (!isFiltering && usesTargetedCreateActions && (group.groupKey === PromptsStorage.local || group.groupKey === PromptsStorage.user)) {
+                this.renderTargetedCardCreateActions(header, group.groupKey);
+            } else if (group.groupKey === createGroupKey) {
+                this.renderCardCreateActions(header);
+            }
+            const inventory = append(section, $(
+                ".plugin-card-grid.plugin-inventory-list.customization-inventory-list.virtualized-section-list"
+            ));
+            setupCollapsibleSection(headingRow, inventory, group.label, this.cardDisposables, ( this.collapsedGroups.has(collapsedGroupKey)), collapsed => {
+                if (collapsed) {
+                    this.collapsedGroups.add(collapsedGroupKey);
+                } else {
+                    this.collapsedGroups.delete(collapsedGroupKey);
+                }
+                this.layoutCardSectionLists();
+                this.cardScrollable.scanDomNode();
+                this.scheduleCardSectionLayout();
+            });
+            if (group.items.length === 0) {
+                if (this.sectionLoading) {
+                    renderVirtualizedSectionLoadingPlaceholder(inventory, ( localize(6329, "Loading customizations...")), ITEM_HEIGHT);
+                } else {
+                    const empty = append(inventory, $(".plugin-inventory-empty"));
+                    empty.textContent = this.getEmptyGroupMessage(group.groupKey);
+                }
+                continue;
+            }
+            this.createCustomizationSectionList(inventory, group.groupKey, group.label, group.items);
+        }
+        this.layoutCardSectionLists();
+        this.cardScrollable.scanDomNode();
+        this.scheduleCardSectionLayout();
+        if (shouldRestoreFocus) {
+            getWindow(this.element).requestAnimationFrame(() => {
+                if (!focusItemId || !this.focusCardSectionItem(focusItemId)) {
+                    this.firstCardFocusElement?.focus();
+                }
+            });
+        }
+    }
+    createCustomizationSectionList(container, groupKey, label, items) {
+        const key = `${this.currentSection}:${groupKey}`;
+        container.style.height = `${ITEM_HEIGHT}px`;
+        const itemRenderer = this.instantiationService.createInstance(
+            AICustomizationItemRenderer,
+            (item, anchor) => this.showCardItemActions(item, anchor)
+        );
+        const list = this.cardDisposables.add(this.instantiationService.createInstance(
+            WorkbenchList,
+            `AICustomizationManagementList.${label}`,
+            container,
+            ( new AICustomizationListDelegate()),
+            [itemRenderer],
+            {
+                identityProvider: {
+                    getId: entry => entry.item.id
+                },
+                accessibilityProvider: {
+                    getAriaLabel: entry => getCustomizationItemAriaLabel(entry.item),
+                    getWidgetAriaLabel: () => label,
+                    getSetSize: (_entry, _index, listLength) => listLength,
+                    getPosInSet: (_entry, index) => index + 1
+                },
+                keyboardNavigationLabelProvider: {
+                    getKeyboardNavigationLabel: entry => entry.item.name
+                },
+                multipleSelectionSupport: false,
+                openOnSingleClick: true
+            }
+        ));
+        list.splice(0, 0, ( items.map(item => ({
+            type: "file-item",
+            item
+        }))));
+        list.scrollTop = this.cardSectionScrollPositions.get(key) ?? 0;
+        this.cardDisposables.add(list.onDidOpen(event => {
+            if (event.element) {
+                this._onDidSelectItem.fire(event.element.item);
+            }
+        }));
+        this.cardDisposables.add(list.onDidChangeFocus(event => {
+            itemRenderer.setFocusedIndex(event.indexes.length ? event.indexes[0] : -1);
+            if (event.elements.length > 0) {
+                this.lastCardFocusItemId = event.elements[0].item.id;
+            }
+        }));
+        this.cardDisposables.add(list.onDidFocus(() => {
+            if (list.getFocus().length === 0 && items.length > 0) {
+                list.setFocus([0]);
+            }
+        }));
+        this.cardDisposables.add(list.onContextMenu(event => this.onContextMenu(event)));
+        this.cardSectionLists.push({
+            list,
+            items,
+            container,
+            key
+        });
+    }
+    captureCardSectionScrollPositions() {
+        for (const section of this.cardSectionLists) {
+            this.cardSectionScrollPositions.set(section.key, section.list.scrollTop);
+        }
+    }
+    layoutCardSectionLists() {
+        const content = this.cardSectionLayoutContainer;
+        if (!content) {
+            return;
+        }
+        const heights = layoutVirtualizedSections(content, ( this.cardSectionLists.map(section => ({
+            container: section.container,
+            contentHeight: section.items.length * ITEM_HEIGHT,
+            minimumHeight: getVirtualizedSectionMinimumHeight(section.items, () => ITEM_HEIGHT)
+        }))));
+        for (let index = 0; index < this.cardSectionLists.length; index++) {
+            const section = this.cardSectionLists[index];
+            const height = heights[index];
+            layoutVirtualizedSectionList(
+                section.list,
+                section.container,
+                height,
+                section.container.clientWidth || undefined
+            );
+        }
+    }
+    scheduleCardSectionLayout() {
+        const targetWindow = getWindow(this.element);
+        this.pendingCardSectionLayout.value = scheduleAtNextAnimationFrame(targetWindow, () => {
+            this.layoutCardSectionLists();
+            this.cardScrollable.scanDomNode();
+        });
+    }
+    focusCardSectionItem(itemId) {
+        for (const section of this.cardSectionLists) {
+            const index = section.items.findIndex(item => item.id === itemId);
+            if (index >= 0) {
+                section.list.reveal(index);
+                section.list.setFocus([index]);
+                section.list.domFocus();
+                return true;
+            }
+        }
+        return false;
+    }
+    usesTargetedCreateActions() {
+        return this.currentSection === AICustomizationManagementSection.Agents || this.currentSection === AICustomizationManagementSection.Skills || this.currentSection === AICustomizationManagementSection.Instructions || this.currentSection === AICustomizationManagementSection.Hooks || this.currentSection === AICustomizationManagementSection.Prompts;
+    }
+    getCreateActionGroupKey() {
+        if (this.buildCreateActions().length === 0) {
+            return undefined;
+        }
+        return this.hasActiveWorkspace() ? PromptsStorage.local : PromptsStorage.user;
+    }
+    renderTargetedCardCreateActions(header, groupKey) {
+        const target = groupKey === PromptsStorage.local ? "workspace" : "user";
+        const hasWorkspace = this.hasActiveWorkspace();
+        const actions = this.buildCreateActions().filter(
+            action => action.target === target || action.target === undefined && (target === "workspace" ? hasWorkspace : !hasWorkspace)
+        );
+        const primary = actions.find(action => action.target === target) ?? actions[0];
+        if (!primary) {
+            return;
+        }
+        const container = append(header, $(".plugin-card-section-actions"));
+        const label = this.formatTargetedCreateActionLabel(primary);
+        const button = this.cardDisposables.add(( new Button(container, {
+            ...defaultButtonStyles,
+            secondary: true,
+            title: primary.tooltip ?? label,
+            ariaLabel: primary.tooltip ?? label
+        })));
+        button.element.classList.add("customization-create-action");
+        button.label = label;
+        button.enabled = primary.enabled;
+        this.firstCardFocusElement ??= button.element;
+        this.cardDisposables.add(button.onDidClick(() => primary.run()));
+        const generateAction = actions.find(action => action.kind === "generate");
+        if (generateAction && generateAction !== primary) {
+            const generateButton = this.cardDisposables.add(( new Button(container, {
+                ...defaultButtonStyles,
+                secondary: true,
+                title: generateAction.tooltip ?? generateAction.label,
+                ariaLabel: generateAction.tooltip ?? generateAction.label
+            })));
+            generateButton.element.classList.add("customization-generate-action");
+            generateButton.label = generateAction.label;
+            generateButton.enabled = generateAction.enabled;
+            this.cardDisposables.add(generateButton.onDidClick(() => generateAction.run()));
+        }
+        const secondaryActions = actions.filter(action => action !== primary && action !== generateAction);
+        if (secondaryActions.length > 0) {
+            const moreLabel = ( localize(
+                6330,
+                "More creation actions for {0}",
+                groupKey === PromptsStorage.local ? ( localize(6331, "Workspace")) : ( localize(6332, "User"))
+            ));
+            const more = this.cardDisposables.add(( new Button(container, {
+                ...getButtonStyles({
+                    buttonSecondaryBackground: undefined,
+                    buttonSecondaryBorder: undefined
+                }),
+                secondary: true,
+                supportIcons: true,
+                title: moreLabel,
+                ariaLabel: moreLabel
+            })));
+            more.element.classList.add("plugin-card-icon-button", "customization-create-more-action");
+            more.label = `$(${Codicon.ellipsis.id})`;
+            this.cardDisposables.add(
+                more.onDidClick(() => this.showCreateActionsMenu(secondaryActions, more.element))
+            );
+        }
+    }
+    formatTargetedCreateActionLabel(action) {
+        return getTargetedCreateActionLabel(action.label, action.compactLabel);
+    }
+    showCreateActionsMenu(createActions, anchor) {
+        const disposables = ( new DisposableStore());
+        const actions = ( createActions.map((action, index) => disposables.add(( new Action(
+            `customization.create.${index}`,
+            action.label.replace(/^\$\([^)]+\)\s*/, ""),
+            undefined,
+            action.enabled,
+            () => action.run()
+        )))));
+        this.contextMenuService.showContextMenu({
+            getAnchor: () => anchor,
+            getActions: () => actions,
+            onHide: () => disposables.dispose()
+        });
+    }
+    getEmptyGroupMessage(groupKey) {
+        const workspace = groupKey === PromptsStorage.local;
+        switch (this.currentSection) {
+        case AICustomizationManagementSection.Agents:
+            return workspace ? ( localize(6333, "No workspace agents yet.")) : ( localize(6334, "No user agents yet."));
+        case AICustomizationManagementSection.Skills:
+            return workspace ? ( localize(6335, "No workspace skills yet.")) : ( localize(6336, "No user skills yet."));
+        case AICustomizationManagementSection.Instructions:
+            return workspace ? ( localize(6337, "No workspace instructions yet.")) : ( localize(6338, "No user instructions yet."));
+        case AICustomizationManagementSection.Hooks:
+            return workspace ? ( localize(6339, "No workspace hooks yet.")) : ( localize(6340, "No user hooks yet."));
+        case AICustomizationManagementSection.Prompts:
+            return workspace ? ( localize(6341, "No workspace prompts yet.")) : ( localize(6342, "No user prompts yet."));
+        default:
+            return localize(6343, "No customizations are available.");
+        }
+    }
+    renderCardCreateActions(header) {
+        const actions = this.buildCreateActions();
+        const [primary, ...dropdown] = actions;
+        if (!primary) {
+            return;
+        }
+        const container = append(header, $(".plugin-card-section-actions"));
+        const accessibleLabel = primary.tooltip ?? primary.label.replace(/\$\([^)]+\)\s*/g, "");
+        if (dropdown.length > 0) {
+            const button = this.cardDisposables.add(( new ButtonWithDropdown(container, {
+                ...defaultButtonStyles,
+                secondary: true,
+                contextMenuProvider: this.contextMenuService,
+                addPrimaryActionToDropdown: false,
+                actions: {
+                    getActions: () => this.getDropdownActions()
+                },
+                title: accessibleLabel,
+                ariaLabel: accessibleLabel
+            })));
+            button.element.classList.add("customization-create-action");
+            button.label = primary.label;
+            button.enabled = primary.enabled;
+            this.firstCardFocusElement ??= button.element;
+            this.cardDisposables.add(button.onDidClick(() => this.executePrimaryCreateAction()));
+            return;
+        }
+        const button = this.cardDisposables.add(( new Button(container, {
+            ...defaultButtonStyles,
+            secondary: true,
+            title: accessibleLabel,
+            ariaLabel: accessibleLabel
+        })));
+        button.element.classList.add("customization-create-action");
+        button.label = primary.label;
+        button.enabled = primary.enabled;
+        this.firstCardFocusElement ??= button.element;
+        this.cardDisposables.add(button.onDidClick(() => this.executePrimaryCreateAction()));
+    }
+    appendCustomizationCardRow(parent, item, groupLabel, cardList) {
+        const row = append(parent, $(".plugin-list-item.plugin-home-row.customization-home-row"));
+        row.classList.toggle("disabled", item.disabled);
+        const displayName = item.displayName ?? formatDisplayName(item.name);
+        const secondaryText = getCustomizationSecondaryText(item.description, item.filename, item.promptType);
+        const statusLabel = getCustomizationItemStatusLabel(item);
+        const accessibleSecondaryText = [secondaryText, statusLabel].filter(Boolean).join(". ");
+        const accessibleLabel = item.disabled ? ( localize(
+            6344,
+            "{0}. {1}. Disabled",
+            displayName,
+            accessibleSecondaryText || groupLabel
+        )) : ( localize(6345, "{0}. {1}", displayName, accessibleSecondaryText || groupLabel));
+        const primary = createCustomizationCardPrimaryAction(row, accessibleLabel, "customization-row-primary");
+        const hasReadableContent = hasReadableCustomizationContent(item.uri);
+        if (!hasReadableContent) {
+            primary.setAttribute("aria-disabled", "true");
+        }
+        this.firstCardFocusElement ??= primary;
+        if (!( this.cardRowsByUri.has(( item.uri.toString())))) {
+            this.cardRowsByUri.set(( item.uri.toString()), primary);
+        }
+        this.cardRowsById.set(item.id, primary);
+        this.cardDisposables.add(addDisposableListener(primary, "focus", () => {
+            this.lastCardFocusItemId = item.id;
+        }));
+        if (hasReadableContent) {
+            this.cardDisposables.add(
+                addDisposableListener(primary, "click", () => this._onDidSelectItem.fire(item))
+            );
+        }
+        const hasItemActions = this.hasCardItemActions(item);
+        if (hasItemActions) {
+            this.cardDisposables.add(addDisposableListener(row, "contextmenu", event => {
+                event.preventDefault();
+                this.showCardItemActions(item, row);
+            }));
+        }
+        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
+            }
+        })));
+        const details = append(primary, $(".plugin-list-item-details"));
+        const nameRow = append(details, $(".plugin-list-item-name-row"));
+        const name = append(nameRow, $(".plugin-list-item-name"));
+        name.textContent = displayName;
+        if (item.badge && item.promptType !== PromptsType.instructions) {
+            const badge = append(nameRow, $(".inline-badge.item-badge"));
+            badge.textContent = item.badge;
+            badge.title = item.badgeTooltip ?? item.badge;
+        }
+        const description = append(details, $(".plugin-list-item-description"));
+        description.textContent = secondaryText ?? ( localize(6346, "No description provided."));
+        const actionElements = [];
+        if (hasItemActions) {
+            const actionContainer = append(row, $(".plugin-list-item-action"));
+            this.cardDisposables.add(
+                addDisposableGenericMouseDownListener(actionContainer, e => e.stopPropagation())
+            );
+            this.cardDisposables.add(
+                addDisposableListener(actionContainer, "click", e => e.stopPropagation())
+            );
+            const more = this.cardDisposables.add(( new Button(actionContainer, {
+                ...getButtonStyles({
+                    buttonSecondaryBackground: undefined,
+                    buttonSecondaryBorder: undefined
+                }),
+                secondary: true,
+                supportIcons: true,
+                ariaLabel: ( localize(6243, "More actions for {0}", displayName))
+            })));
+            more.element.classList.add("plugin-card-icon-button");
+            more.label = `$(${Codicon.ellipsis.id})`;
+            this.cardMenuButtonsById.set(item.id, more.element);
+            this.cardDisposables.add(addDisposableListener(more.element, "focus", () => {
+                this.lastCardFocusItemId = item.id;
+            }));
+            this.cardDisposables.add(more.onDidClick(() => this.showCardItemActions(item, more.element)));
+            actionElements.push(more.element);
+        }
+        cardList.addItem({
+            row,
+            primaryAction: primary,
+            label: displayName,
+            actions: actionElements,
+            contextMenuAction: actionElements[0]
+        });
     }
     filterItems() {
         const matchedItems = this.applySearchFilter(this.allItems);
@@ -1227,21 +1848,26 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
         return matchedItems.length;
     }
     toggleGroup(entry) {
-        if (( this.collapsedGroups.has(entry.groupKey))) {
-            this.collapsedGroups.delete(entry.groupKey);
+        const collapsedGroupKey = this.getCollapsedGroupKey(entry.groupKey);
+        if (( this.collapsedGroups.has(collapsedGroupKey))) {
+            this.collapsedGroups.delete(collapsedGroupKey);
         } else {
-            this.collapsedGroups.add(entry.groupKey);
+            this.collapsedGroups.add(collapsedGroupKey);
         }
         this.filterItems();
     }
+    getCollapsedGroupKey(groupKey) {
+        return getCollapsedCustomizationGroupKey(this.currentSection, groupKey);
+    }
     updateEmptyState() {
         const hasItems = this.displayEntries.length > 0;
         if (!hasItems) {
+            this.cardScrollableNode.style.display = "none";
             this.emptyStateContainer.style.display = "flex";
             this.listContainer.style.display = "none";
             if (this.searchQuery.trim()) {
-                this.emptyStateText.textContent = ( localize(5811, "No items match '{0}'", this.searchQuery));
-                this.emptyStateSubtext.textContent = ( localize(5812, "Try a different search term"));
+                this.emptyStateText.textContent = ( localize(6347, "No items match '{0}'", this.searchQuery));
+                this.emptyStateSubtext.textContent = ( localize(6348, "Try a different search term"));
             } else {
                 const emptyInfo = this.getEmptyStateInfo();
                 this.emptyStateText.textContent = emptyInfo.title;
@@ -1249,36 +1875,37 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
             }
         } else {
             this.emptyStateContainer.style.display = "none";
-            this.listContainer.style.display = "";
+            this.listContainer.style.display = this.usesCardLayout() ? "none" : "";
+            this.cardScrollableNode.style.display = this.usesCardLayout() ? "" : "none";
         }
     }
     getEmptyStateInfo() {
         switch (this.currentSection) {
         case AICustomizationManagementSection.Agents:
             return {
-                title: ( localize(5813, "No agents yet")),
-                description: ( localize(5814, "Create your first custom agent to get started"))
+                title: ( localize(6349, "No agents yet")),
+                description: ( localize(6350, "Create your first custom agent to get started"))
             };
         case AICustomizationManagementSection.Skills:
             return {
-                title: ( localize(5815, "No skills yet")),
-                description: ( localize(5816, "Create your first skill to extend agent capabilities"))
+                title: ( localize(6351, "No skills yet")),
+                description: ( localize(6352, "Create your first skill to extend agent capabilities"))
             };
         case AICustomizationManagementSection.Instructions:
             return {
-                title: ( localize(5817, "No instructions yet")),
-                description: ( localize(5818, "Add instructions to teach Copilot about your codebase"))
+                title: ( localize(6353, "No instructions yet")),
+                description: ( localize(6354, "Add instructions to teach Copilot about your codebase"))
             };
         case AICustomizationManagementSection.Hooks:
             return {
-                title: ( localize(5819, "No hooks yet")),
-                description: ( localize(5820, "Create hooks to execute commands at agent lifecycle events"))
+                title: ( localize(6355, "No hooks yet")),
+                description: ( localize(6356, "Create hooks to execute commands at agent lifecycle events"))
             };
         case AICustomizationManagementSection.Prompts:
         default:
             return {
-                title: ( localize(5821, "No prompts yet")),
-                description: ( localize(5822, "Create reusable prompts for common tasks"))
+                title: ( localize(6357, "No prompts yet")),
+                description: ( localize(6358, "Create reusable prompts for common tasks"))
             };
         }
     }
@@ -1292,20 +1919,78 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
         this.searchInput.focus();
     }
     focusList() {
+        if (this.usesCardLayout()) {
+            if (!this.firstCardFocusElement) {
+                const firstSection = this.cardSectionLists[0];
+                if (firstSection?.items.length) {
+                    firstSection.list.setFocus([0]);
+                    firstSection.list.domFocus();
+                }
+            } else {
+                this.firstCardFocusElement.focus();
+            }
+            return;
+        }
         this.list.domFocus();
         if (this.displayEntries.length > 0) {
             this.list.setFocus([0]);
         }
     }
     revealLastItem() {
+        if (this.usesCardLayout()) {
+            const reveal = () => {
+                const section = this.cardSectionLists.at(-1);
+                if (section?.items.length) {
+                    section.list.reveal(section.items.length - 1);
+                }
+                this.cardScrollable.scanDomNode();
+                this.cardScrollable.setScrollPosition({
+                    scrollTop: this.cardContainer.scrollHeight
+                });
+            };
+            reveal();
+            this.revealLastItemScheduler.value = scheduleAtNextAnimationFrame(getWindow(this.element), reveal);
+            return;
+        }
         if (this.displayEntries.length > 0) {
             this.list.reveal(this.displayEntries.length - 1);
         }
     }
+    revealAndSelectFirstItemByUri(uris) {
+        if (this.usesCardLayout()) {
+            for (const section of this.cardSectionLists) {
+                const index = section.items.findIndex(item => ( uris.some(uri => isEqual(item.uri, uri))));
+                if (index >= 0) {
+                    section.list.reveal(index);
+                    section.list.setFocus([index]);
+                    section.list.setSelection([index]);
+                    section.list.domFocus();
+                    return true;
+                }
+            }
+            return false;
+        }
+        const entryIndex = this.displayEntries.findIndex(entry => {
+            return entry.type === "file-item" && ( uris.some(uri => isEqual(entry.item.uri, uri)));
+        });
+        if (entryIndex < 0) {
+            return false;
+        }
+        this.list.reveal(entryIndex);
+        this.list.setFocus([entryIndex]);
+        this.list.setSelection([entryIndex]);
+        this.list.domFocus();
+        return true;
+    }
     layout(height, width) {
         this.lastLayoutHeight = height;
         this.lastLayoutWidth = width;
-        this.element.style.height = `${height}px`;
+        if (this.element.parentElement?.style.display === "none") {
+            return;
+        }
+        this.element.classList.toggle("narrow-layout", width < 500);
+        this.element.classList.toggle("wide-layout", width >= 600);
+        this.element.style.height = "";
         this.searchInput.layout();
         const searchBarHeight = this.searchAndButtonContainer.offsetHeight;
         if (searchBarHeight === 0 && !this._layoutDeferred) {
@@ -1321,9 +2006,17 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
         }
         const headerHeight = this.sectionTitleHeader.offsetHeight;
         this.lastHeaderHeight = headerHeight;
-        const listHeight = Math.max(0, height - searchBarHeight - headerHeight);
+        const availableHeight = this.element.clientHeight || height;
+        const listHeight = Math.max(0, availableHeight - searchBarHeight - headerHeight);
+        this.cardScrollableNode.style.height = `${listHeight}px`;
         this.listContainer.style.height = `${listHeight}px`;
-        this.list.layout(listHeight, width);
+        if (this.usesCardLayout()) {
+            this.layoutCardSectionLists();
+            this.cardScrollable.scanDomNode();
+            this.scheduleCardSectionLayout();
+        } else {
+            this.list.layout(listHeight, width);
+        }
     }
     get itemCount() {
         return this.allItems.length;
@@ -1340,4 +2033,4 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
 };
 AICustomizationListWidget = ( __decorate([( __param(0, IInstantiationService)), ( __param(1, IPromptsService)), ( __param(2, IContextViewService)), ( __param(3, IOpenerService)), ( __param(4, IContextMenuService)), ( __param(5, IMenuService)), ( __param(6, IContextKeyService)), ( __param(7, ILabelService)), ( __param(8, IAICustomizationWorkspaceService)), ( __param(9, IClipboardService)), ( __param(10, IHoverService)), ( __param(11, IFileService)), ( __param(12, ITelemetryService)), ( __param(13, ICustomizationHarnessService)), ( __param(14, ICommandService)), ( __param(15, IAICustomizationItemsModel)), ( __param(16, IAgentPluginService))], AICustomizationListWidget));
 
-export { AICustomizationListWidget, formatDisplayName, getCountAnnouncement };
+export { AICustomizationListWidget, formatDisplayName, getAlwaysVisibleCustomizationGroupKeys, getCollapsedCustomizationGroupKey, getCountAnnouncement, getCustomizationItemAriaLabel, getCustomizationItemStatusLabel, getTargetedCreateActionLabel, usesCustomizationCardLayout };