@codingame/monaco-vscode-api 37.6.1 → 38.0.0

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

@@ -2,11 +2,12 @@
 import { registerCss } from '../../../../../../../../css.js';
 import { __decorate, __param } from '../../../../../../../../external/tslib/tslib.es6.js';
 import * as aiCustomizationManagement from './media/aiCustomizationManagement.css';
-import { $ as $$1, append, createTextNode, addDisposableListener, getWindow, DisposableResizeObserver, EventType, getActiveElement, clearNode, scheduleAtNextAnimationFrame, addDisposableGenericMouseDownListener } from '../../../../../base/browser/dom.js';
+import { $ as $$1, append, clearNode, createTextNode, addDisposableListener, getWindow, DisposableResizeObserver } from '../../../../../base/browser/dom.js';
 import { status } from '../../../../../base/browser/ui/aria/aria.js';
 import { ActionBar } from '../../../../../base/browser/ui/actionbar/actionbar.js';
 import { DisposableStore, Disposable, MutableDisposable } from '../../../../../base/common/lifecycle.js';
 import { Emitter } from '../../../../../base/common/event.js';
+import { Schemas } from '../../../../../base/common/network.js';
 import '../../../../../base/common/observableInternal/index.js';
 import { isEqual } from '../../../../../base/common/resources.js';
 import { ThemeIcon } from '../../../../../base/common/themables.js';
@@ -14,16 +15,18 @@ import { URI } from '../../../../../base/common/uri.js';
 import { Codicon } from '../../../../../base/common/codicons.js';
 import { localize } from '../../../../../nls.js';
 import { IInstantiationService } from '../../../../../platform/instantiation/common/instantiation.js';
-import { WorkbenchList } from '../../../../../platform/list/browser/listService.js';
-import { NotSelectableGroupId } from '../../../../../base/browser/ui/list/list.js';
+import { WorkbenchObjectTree } from '../../../../../platform/list/browser/listService.js';
+import { RenderIndentGuides } from '../../../../../base/browser/ui/tree/abstractTree.js';
+import { ObjectTreeElementCollapseState } from '../../../../../base/browser/ui/tree/tree.js';
 import { PromptsStorage } from '../../common/promptSyntax/service/promptsService.js';
 import { IPromptsService } from '../../common/promptSyntax/service/promptsService.service.js';
 import { PromptsType } from '../../common/promptSyntax/promptTypes.js';
-import { promptIcon, hookIcon, instructionsIcon, skillIcon, agentIcon, workspaceIcon, userIcon, pluginIcon, extensionIcon, builtinIcon } from './aiCustomizationIcons.js';
+import { promptIcon, hookIcon, instructionsIcon, skillIcon, agentIcon, userIcon, workspaceIcon, 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 './aiCustomizationManagement.js';
 import { IAgentPluginService } from '../../common/plugins/agentPluginService.service.js';
 import { InputBox } from '../../../../../base/browser/ui/inputbox/inputBox.js';
 import { defaultInputBoxStyles, defaultButtonStyles, getButtonStyles } from '../../../../../platform/theme/browser/defaultStyles.js';
+import { IThemeService } from '../../../../../platform/theme/common/themeService.service.js';
 import { Delayer } from '../../../../../base/common/async.js';
 import { IContextViewService, IContextMenuService } from '../../../../../platform/contextview/browser/contextView.service.js';
 import { HighlightedLabel } from '../../../../../base/browser/ui/highlightedlabel/highlightedLabel.js';
@@ -44,15 +47,19 @@ import { getDefaultHoverDelegate } from '../../../../../base/browser/ui/hover/ho
 import { IFileService } from '../../../../../platform/files/common/files.service.js';
 import { hasReadableCustomizationContent } from '../../../../../platform/agentHost/common/agentHostCustomizationUri.js';
 import { generateCustomizationDebugReport } from './aiCustomizationDebugPanel.js';
-import { getCustomizationSecondaryText } from './aiCustomizationListWidgetUtils.js';
+import { MiddleEllipsisPathLabel, getCustomizationSecondaryText } from './aiCustomizationListWidgetUtils.js';
 export { truncateToFirstLine } from './aiCustomizationListWidgetUtils.js';
+import { renderCustomizationMarketplaceIcon } from './aiCustomizationPresentation.js';
 import { ITelemetryService } from '../../../../../platform/telemetry/common/telemetry.service.js';
 import { ICustomizationHarnessService } from '../../common/customizationHarnessService.service.js';
 import { ICommandService } from '../../../../../platform/commands/common/commands.service.js';
+import { IConfigurationService } from '../../../../../platform/configuration/common/configuration.service.js';
+import { ICustomizationMarketplaceService } from '../../../../../platform/customizationMarketplace/common/customizationMarketplaceService.service.js';
 import { IAICustomizationItemsModel } from './aiCustomizationItemsModel.service.js';
-import { setupCollapsibleSection, renderVirtualizedSectionLoadingPlaceholder, layoutVirtualizedSections, getVirtualizedSectionMinimumHeight, layoutVirtualizedSectionList, createCustomizationCardPrimaryAction } from './customizationCardList.js';
-import { DomScrollableElement } from '../../../../../base/browser/ui/scrollbar/scrollableElement.js';
-import { ScrollbarVisibility } from '../../../../../base/common/scrollable.js';
+import { asTreeRenderer, customizationTreeStyles, getCustomizationTreeContentHeight } from './customizationTree.js';
+import { affectsCustomizationDiscoveryAvailability, isCustomizationDiscoveryAvailable } from './customizationMarketplaceConfiguration.js';
+import { getAICustomizationWorkspaceGroups, getAICustomizationWorkspaceGroupForResource, isAICustomizationWorkspaceGroupKey } from './aiCustomizationWorkspaceGroups.js';
+import { IWorkspaceContextService } from '../../../../../platform/workspace/common/workspace.service.js';
 import { autorun } from '../../../../../base/common/observableInternal/reactions/autorun.js';
 
 registerCss(aiCustomizationManagement, 1);
@@ -72,8 +79,9 @@ class AICustomizationListDelegate {
     }
 }
 class GroupHeaderRenderer {
-    constructor(hoverService) {
+    constructor(hoverService, renderActions) {
         this.hoverService = hoverService;
+        this.renderActions = renderActions;
         this.templateId = "groupHeader";
     }
     renderTemplate(container) {
@@ -87,6 +95,7 @@ class GroupHeaderRenderer {
         const count = append(container, $(".group-count"));
         const infoIcon = append(container, $(".group-info"));
         infoIcon.classList.add(...ThemeIcon.asClassNameArray(Codicon.info));
+        const actions = append(container, $(".group-actions"));
         return {
             container,
             chevron,
@@ -94,6 +103,7 @@ class GroupHeaderRenderer {
             label,
             count,
             infoIcon,
+            actions,
             disposables,
             elementDisposables
         };
@@ -108,7 +118,10 @@ class GroupHeaderRenderer {
         templateData.icon.classList.add(...ThemeIcon.asClassNameArray(element.icon));
         templateData.label.textContent = element.label;
         templateData.count.textContent = `${element.count}`;
-        templateData.elementDisposables.add(this.hoverService.setupDelayedHover(templateData.infoIcon, () => ({
+        clearNode(templateData.actions);
+        this.renderActions?.(element, templateData.actions, templateData.elementDisposables);
+        templateData.infoIcon.style.display = "none";
+        templateData.elementDisposables.add(this.hoverService.setupDelayedHover(templateData.label, () => ({
             content: element.description,
             appearance: {
                 compact: true,
@@ -150,7 +163,8 @@ let AICustomizationItemRenderer = class AICustomizationItemRenderer {
         menuService,
         contextKeyService,
         instantiationService,
-        agentPluginService
+        agentPluginService,
+        themeService
     ) {
         this.showItemActions = showItemActions;
         this.hoverService = hoverService;
@@ -159,19 +173,20 @@ let AICustomizationItemRenderer = class AICustomizationItemRenderer {
         this.contextKeyService = contextKeyService;
         this.instantiationService = instantiationService;
         this.agentPluginService = agentPluginService;
+        this.themeService = themeService;
         this.templateId = "aiCustomizationItem";
         this.templates = ( new Set());
-        this.focusedIndex = -1;
     }
-    setFocusedIndex(index) {
-        this.focusedIndex = index;
+    setFocusedItemId(itemId) {
+        this.focusedItemId = itemId;
         for (const template of this.templates) {
-            template.actionBar.setFocusable(index !== -1 && template.currentIndex === index);
+            template.actionBar.setFocusable(itemId !== undefined && template.currentItemId === itemId);
         }
     }
     renderTemplate(container) {
         const disposables = ( new DisposableStore());
         const elementDisposables = ( new DisposableStore());
+        const iconDisposables = disposables.add(( new DisposableStore()));
         container.classList.add("ai-customization-list-item");
         const leftSection = append(container, $(".item-left"));
         const typeIcon = append(leftSection, $(".item-type-icon"));
@@ -180,7 +195,9 @@ let AICustomizationItemRenderer = class AICustomizationItemRenderer {
         const nameLabel = disposables.add(( new HighlightedLabel(append(nameRow, $(".item-name")))));
         const badge = append(nameRow, $(".inline-badge.item-badge"));
         const statusIcon = append(nameRow, $(".item-status-icon"));
-        const description = disposables.add(( new HighlightedLabel(append(textContainer, $(".item-description")))));
+        const descriptionContainer = append(textContainer, $(".item-description"));
+        const description = disposables.add(( new HighlightedLabel(descriptionContainer)));
+        const path = disposables.add(( new MiddleEllipsisPathLabel(append(descriptionContainer, $(".item-path")))));
         const actionsContainer = append(container, $(".item-right"));
         const actionBar = disposables.add(( new ActionBar(actionsContainer, {
             actionViewItemProvider: createActionViewItem.bind(undefined, this.instantiationService)
@@ -194,29 +211,41 @@ let AICustomizationItemRenderer = class AICustomizationItemRenderer {
             nameLabel,
             badge,
             statusIcon,
+            descriptionContainer,
             description,
+            path,
             disposables,
             elementDisposables,
-            currentIndex: -1
+            iconDisposables,
+            currentItemId: undefined
         };
         this.templates.add(template);
         return template;
     }
     renderElement(entry, index, templateData) {
         templateData.elementDisposables.clear();
-        templateData.currentIndex = index;
-        templateData.actionBar.setFocusable(this.focusedIndex !== -1 && index === this.focusedIndex);
+        templateData.currentItemId = entry.item.id;
+        templateData.actionBar.setFocusable(this.focusedItemId !== undefined && entry.item.id === this.focusedItemId);
         const element = entry.item;
         templateData.typeIcon.className = "item-type-icon";
-        templateData.typeIcon.classList.add(
-            ...ThemeIcon.asClassNameArray(element.typeIcon ?? promptTypeToIcon(element.promptType))
-        );
+        const renderIcon = () => {
+            templateData.iconDisposables.clear();
+            renderCustomizationMarketplaceIcon(
+                templateData.typeIcon,
+                element.typeIcon ?? promptTypeToIcon(element.promptType),
+                element.marketplace?.resource.icon,
+                this.themeService.getColorTheme().type,
+                templateData.iconDisposables
+            );
+        };
+        renderIcon();
+        templateData.elementDisposables.add(this.themeService.onDidColorThemeChange(renderIcon));
         templateData.elementDisposables.add(this.hoverService.setupDelayedHover(templateData.container, () => {
             let content;
             if (element.isBuiltin) {
-                content = `${element.name}\n${( localize(8477, "Built-in"))}`;
+                content = `${element.name}\n${( localize(10269, "Built-in"))}`;
             } else if (element.extensionId) {
-                content = `${element.name}\n${( localize(8478, "Extension: {0}", element.extensionId))}`;
+                content = `${element.name}\n${( localize(10270, "Extension: {0}", element.extensionId))}`;
             } else {
                 const isWorkspaceItem = element.source === AICustomizationSources.local;
                 const uriLabel = this.labelService.getUriLabel(element.uri, {
@@ -229,7 +258,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(8479, "Plugin: {0}", plugin.label))}`;
+                content += `\n${( localize(10271, "Plugin: {0}", plugin.label))}`;
             }
             return {
                 content,
@@ -254,7 +283,7 @@ let AICustomizationItemRenderer = class AICustomizationItemRenderer {
             templateData.badge.textContent = "";
             templateData.badge.style.display = "none";
         }
-        const hideLoadedStatus = element.status === "loaded" && (element.promptType === PromptsType.agent || element.promptType === PromptsType.skill || element.promptType === PromptsType.instructions);
+        const hideLoadedStatus = element.status === "loaded" && (element.promptType === PromptsType.agent || element.promptType === PromptsType.skill || element.promptType === PromptsType.instructions || element.promptType === PromptsType.hook);
         if (element.status && !hideLoadedStatus) {
             templateData.statusIcon.style.display = "";
             templateData.statusIcon.className = "item-status-icon";
@@ -284,33 +313,20 @@ let AICustomizationItemRenderer = class AICustomizationItemRenderer {
             templateData.statusIcon.className = "item-status-icon";
         }
         const secondaryText = getCustomizationSecondaryText(element.description, element.filename, element.promptType);
-        let secondaryTextMatches;
-        if (secondaryText && element.description && element.descriptionMatches) {
-            if (secondaryText === element.description) {
-                secondaryTextMatches = element.descriptionMatches;
+        if (secondaryText) {
+            const isPath = element.promptType !== PromptsType.hook || !element.description;
+            templateData.description.element.style.display = isPath ? "none" : "";
+            templateData.path.element.style.display = isPath ? "" : "none";
+            if (isPath) {
+                templateData.path.set(secondaryText, element.secondaryTextMatches);
             } else {
-                const maxLength = secondaryText.length;
-                const clampedMatches = element.descriptionMatches.map(match => {
-                    if (match.start >= maxLength || match.end <= 0) {
-                        return undefined;
-                    }
-                    const clampedStart = Math.max(0, match.start);
-                    const clampedEnd = Math.min(match.end, maxLength);
-                    return clampedEnd > clampedStart ? {
-                        start: clampedStart,
-                        end: clampedEnd
-                    } : undefined;
-                }).filter(match => !!match);
-                secondaryTextMatches = clampedMatches.length ? clampedMatches : undefined;
+                templateData.description.set(secondaryText, element.secondaryTextMatches);
             }
-        }
-        if (secondaryText) {
-            templateData.description.set(secondaryText, secondaryTextMatches);
-            templateData.description.element.style.display = "";
-            templateData.description.element.classList.toggle("is-filename", !element.description);
+            templateData.descriptionContainer.style.display = "";
         } else {
             templateData.description.set("", undefined);
-            templateData.description.element.style.display = "none";
+            templateData.path.set("");
+            templateData.descriptionContainer.style.display = "none";
         }
         const context = {
             uri: ( element.uri.toString()),
@@ -337,8 +353,8 @@ let AICustomizationItemRenderer = class AICustomizationItemRenderer {
         );
         const updateActions = () => {
             templateData.actionBar.clear();
-            if (element.promptType === PromptsType.agent || element.promptType === PromptsType.skill || element.promptType === PromptsType.instructions) {
-                const moreAction = templateData.elementDisposables.add(( new Action("aiCustomization.moreActions", ( localize(8480, "More actions for {0}", displayName)), ThemeIcon.asClassName(Codicon.ellipsis), true, () => this.showItemActions(element, templateData.actionsContainer))));
+            if (element.promptType === PromptsType.agent || element.promptType === PromptsType.skill || element.promptType === PromptsType.instructions || element.promptType === PromptsType.hook) {
+                const moreAction = templateData.elementDisposables.add(( new Action("aiCustomization.moreActions", ( localize(10272, "More actions for {0}", displayName)), ThemeIcon.asClassName(Codicon.ellipsis), true, () => this.showItemActions(element, templateData.actionsContainer))));
                 templateData.actionBar.push(moreAction, {
                     icon: true,
                     label: false
@@ -362,7 +378,7 @@ let AICustomizationItemRenderer = class AICustomizationItemRenderer {
         templateData.actionBar.context = context;
     }
     disposeElement(_entry, _index, templateData) {
-        templateData.currentIndex = -1;
+        templateData.currentItemId = undefined;
     }
     disposeTemplate(templateData) {
         this.templates.delete(templateData);
@@ -370,7 +386,7 @@ let AICustomizationItemRenderer = class AICustomizationItemRenderer {
         templateData.disposables.dispose();
     }
 };
-AICustomizationItemRenderer = ( __decorate([( __param(1, IHoverService)), ( __param(2, ILabelService)), ( __param(3, IMenuService)), ( __param(4, IContextKeyService)), ( __param(5, IInstantiationService)), ( __param(6, IAgentPluginService))], AICustomizationItemRenderer));
+AICustomizationItemRenderer = ( __decorate([( __param(1, IHoverService)), ( __param(2, ILabelService)), ( __param(3, IMenuService)), ( __param(4, IContextKeyService)), ( __param(5, IInstantiationService)), ( __param(6, IAgentPluginService)), ( __param(7, IThemeService))], AICustomizationItemRenderer));
 function toItemsModelSection(section) {
     switch (section) {
     case AICustomizationManagementSection.Agents:
@@ -383,11 +399,11 @@ function toItemsModelSection(section) {
         return undefined;
     }
 }
-function usesCustomizationCardLayout(section) {
+function usesCustomizationTreePresentation(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] : [];
+    return usesCustomizationTreePresentation(section) && true ? [PromptsStorage.local, PromptsStorage.user] : [];
 }
 function getTargetedCreateActionLabel(label, compactLabel) {
     return compactLabel ?? label.replace(/^\$\([^)]+\)\s*/, "");
@@ -397,89 +413,89 @@ function getCountAnnouncement(section, count, isFiltering) {
     case AICustomizationManagementSection.Agents:
         if (isFiltering) {
             if (count === 0) {
-                return localize(8481, "No agents found");
+                return localize(10273, "No agents found");
             }
             if (count === 1) {
-                return localize(8482, "1 agent found");
+                return localize(10274, "1 agent found");
             }
-            return localize(8483, "{0} agents found", count);
+            return localize(10275, "{0} agents found", count);
         }
         if (count === 0) {
-            return localize(8484, "No agents");
+            return localize(10276, "No agents");
         }
         if (count === 1) {
-            return localize(8485, "1 agent");
+            return localize(10277, "1 agent");
         }
-        return localize(8486, "{0} agents", count);
+        return localize(10278, "{0} agents", count);
     case AICustomizationManagementSection.Skills:
         if (isFiltering) {
             if (count === 0) {
-                return localize(8487, "No skills found");
+                return localize(10279, "No skills found");
             }
             if (count === 1) {
-                return localize(8488, "1 skill found");
+                return localize(10280, "1 skill found");
             }
-            return localize(8489, "{0} skills found", count);
+            return localize(10281, "{0} skills found", count);
         }
         if (count === 0) {
-            return localize(8490, "No skills");
+            return localize(10282, "No skills");
         }
         if (count === 1) {
-            return localize(8491, "1 skill");
+            return localize(10283, "1 skill");
         }
-        return localize(8492, "{0} skills", count);
+        return localize(10284, "{0} skills", count);
     case AICustomizationManagementSection.Instructions:
         if (isFiltering) {
             if (count === 0) {
-                return localize(8493, "No instructions found");
+                return localize(10285, "No instructions found");
             }
             if (count === 1) {
-                return localize(8494, "1 instruction file found");
+                return localize(10286, "1 instruction file found");
             }
-            return localize(8495, "{0} instruction files found", count);
+            return localize(10287, "{0} instruction files found", count);
         }
         if (count === 0) {
-            return localize(8496, "No instructions");
+            return localize(10288, "No instructions");
         }
         if (count === 1) {
-            return localize(8497, "1 instruction file");
+            return localize(10289, "1 instruction file");
         }
-        return localize(8498, "{0} instruction files", count);
+        return localize(10290, "{0} instruction files", count);
     case AICustomizationManagementSection.Hooks:
         if (isFiltering) {
             if (count === 0) {
-                return localize(8499, "No hooks found");
+                return localize(10291, "No hooks found");
             }
             if (count === 1) {
-                return localize(8500, "1 hook found");
+                return localize(10292, "1 hook found");
             }
-            return localize(8501, "{0} hooks found", count);
+            return localize(10293, "{0} hooks found", count);
         }
         if (count === 0) {
-            return localize(8502, "No hooks");
+            return localize(10294, "No hooks");
         }
         if (count === 1) {
-            return localize(8503, "1 hook");
+            return localize(10295, "1 hook");
         }
-        return localize(8504, "{0} hooks", count);
+        return localize(10296, "{0} hooks", count);
     case AICustomizationManagementSection.Prompts:
     default:
         if (isFiltering) {
             if (count === 0) {
-                return localize(8505, "No prompts found");
+                return localize(10297, "No prompts found");
             }
             if (count === 1) {
-                return localize(8506, "1 prompt found");
+                return localize(10298, "1 prompt found");
             }
-            return localize(8507, "{0} prompts found", count);
+            return localize(10299, "{0} prompts found", count);
         }
         if (count === 0) {
-            return localize(8508, "No prompts");
+            return localize(10300, "No prompts");
         }
         if (count === 1) {
-            return localize(8509, "1 prompt");
+            return localize(10301, "1 prompt");
         }
-        return localize(8510, "{0} prompts", count);
+        return localize(10302, "{0} prompts", count);
     }
 }
 function getCollapsedCustomizationGroupKey(section, groupKey) {
@@ -488,13 +504,13 @@ function getCollapsedCustomizationGroupKey(section, groupKey) {
 function getCustomizationItemStatusLabel(item) {
     switch (item.status) {
     case "loading":
-        return localize(8511, "Loading");
+        return localize(10303, "Loading");
     case "loaded":
-        return localize(8512, "Loaded");
+        return localize(10304, "Loaded");
     case "degraded":
-        return localize(8513, "Needs attention");
+        return localize(10305, "Needs attention");
     case "error":
-        return localize(8514, "Error");
+        return localize(10306, "Error");
     default:
         return undefined;
     }
@@ -504,8 +520,17 @@ function getCustomizationItemAriaLabel(item) {
     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(8515, "{0}. {1}", displayName, accessibleSecondaryText)) : displayName;
-    return item.disabled ? ( localize(8516, "{0}, disabled", nameAndDescription)) : nameAndDescription;
+    const nameAndDescription = accessibleSecondaryText ? ( localize(10307, "{0}. {1}", displayName, accessibleSecondaryText)) : displayName;
+    return item.disabled ? ( localize(10308, "{0}, disabled", nameAndDescription)) : nameAndDescription;
+}
+function getMultiRootWorkspaceRelativeFilename(item, workspaceContextService, labelService) {
+    if (getAICustomizationWorkspaceGroups(workspaceContextService).length === 0 || !getAICustomizationWorkspaceGroupForResource(item.uri, workspaceContextService)) {
+        return item.filename;
+    }
+    return labelService.getUriLabel(item.uri, {
+        relative: true,
+        noPrefix: true
+    });
 }
 let AICustomizationListWidget = class AICustomizationListWidget extends Disposable {
     constructor(
@@ -524,8 +549,11 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
         telemetryService,
         harnessService,
         commandService,
+        configurationService,
+        marketplaceService,
         itemsModel,
-        agentPluginService
+        agentPluginService,
+        workspaceContextService
     ) {
         super();
         this.instantiationService = instantiationService;
@@ -543,13 +571,11 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
         this.telemetryService = telemetryService;
         this.harnessService = harnessService;
         this.commandService = commandService;
+        this.configurationService = configurationService;
+        this.marketplaceService = marketplaceService;
         this.itemsModel = itemsModel;
         this.agentPluginService = agentPluginService;
-        this.cardSectionLists = [];
-        this.cardRowsByUri = ( new Map());
-        this.cardRowsById = ( new Map());
-        this.cardMenuButtonsById = ( new Map());
-        this.cardMenuOpen = false;
+        this.workspaceContextService = workspaceContextService;
         this.currentSection = AICustomizationManagementSection.Agents;
         this.allItems = [];
         this.displayEntries = [];
@@ -557,14 +583,10 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
         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()));
@@ -576,7 +598,9 @@ 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.plugin-list-widget");
+        this._onDidRequestBrowse = this._register(( new Emitter()));
+        this.onDidRequestBrowse = this._onDidRequestBrowse.event;
+        this.element = $(".ai-customization-list-widget");
         this.create();
         this._register(autorun(reader => {
             this.workspaceService.activeProjectRoot.read(reader);
@@ -587,6 +611,21 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
             this.harnessService.availableHarnesses.read(reader);
             this.updateAddButton();
         }));
+        this._register(this.configurationService.onDidChangeConfiguration(event => {
+            if (affectsCustomizationDiscoveryAvailability(event, this.marketplaceService) && this.currentSection === AICustomizationManagementSection.Skills) {
+                this.filterItems();
+            }
+        }));
+        if (this.marketplaceService.onDidChangeSources) {
+            this._register(this.marketplaceService.onDidChangeSources(() => {
+                if (this.currentSection === AICustomizationManagementSection.Skills) {
+                    this.filterItems();
+                }
+            }));
+        }
+        this._register(
+            this.workspaceContextService.onDidChangeWorkspaceFolders(() => this.filterItems())
+        );
     }
     create() {
         this.sectionTitleHeader = append(this.element, $(".section-title-header"));
@@ -620,7 +659,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(8517, "Type to search...")),
+            placeholder: ( localize(10309, "Type to search...")),
             inputBoxStyles: defaultInputBoxStyles
         })));
         this._register(this.searchInput.onDidChange(() => {
@@ -652,28 +691,6 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
         })));
         this.addButton.element.classList.add("list-add-button");
         this._register(this.addButton.onDidClick(() => this.executePrimaryCreateAction()));
-        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"));
@@ -682,37 +699,37 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
         this.emptyStateContainer.style.display = "none";
         const itemRenderer = this.instantiationService.createInstance(
             AICustomizationItemRenderer,
-            (item, anchor) => this.showCardItemActions(item, anchor)
+            (item, anchor) => this.showItemContextMenu(item, anchor)
         );
         this.list = this._register(this.instantiationService.createInstance(
-            WorkbenchList,
+            WorkbenchObjectTree,
             "AICustomizationManagementList",
             this.listContainer,
             ( new AICustomizationListDelegate()),
-            [( new GroupHeaderRenderer(this.hoverService)), itemRenderer],
+            [asTreeRenderer(( new GroupHeaderRenderer(
+                this.hoverService,
+                (entry, container, disposables) => this.renderTreeGroupActions(entry, container, disposables)
+            ))), asTreeRenderer(itemRenderer)],
             {
+                indent: 8,
+                renderIndentGuides: RenderIndentGuides.None,
+                hideTwistiesOfChildlessElements: false,
+                overrideStyles: customizationTreeStyles,
                 identityProvider: {
-                    getId: entry => entry.type === "group-header" ? entry.id : entry.item.id,
-                    getGroupId: entry => entry.type === "group-header" ? NotSelectableGroupId : 0
+                    getId: entry => entry.type === "group-header" ? entry.id : entry.item.id
                 },
                 accessibilityProvider: {
                     getAriaLabel: entry => {
                         if (entry.type === "group-header") {
-                            return localize(
-                                8518,
-                                "{0}, {1} items, {2}",
-                                entry.label,
-                                entry.count,
-                                entry.collapsed ? ( localize(8519, "collapsed")) : ( localize(8520, "expanded"))
-                            );
+                            return localize(10310, "{0}, {1} items", entry.label, entry.count);
                         }
                         const label = getCustomizationItemAriaLabel(entry.item);
                         if (!hasReadableCustomizationContent(entry.item.uri)) {
-                            return localize(8521, "{0}, source content unavailable", label);
+                            return localize(10311, "{0}, source content unavailable", label);
                         }
                         return label;
                     },
-                    getWidgetAriaLabel: () => ( localize(8522, "Agent Customizations"))
+                    getWidgetAriaLabel: () => ( localize(10312, "Agent Customizations"))
                 },
                 keyboardNavigationLabelProvider: {
                     getKeyboardNavigationLabel: entry => entry.type === "group-header" ? entry.label : entry.item.name
@@ -724,7 +741,7 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
         this._register(this.list.onDidOpen(e => {
             if (e.element) {
                 if (e.element.type === "group-header") {
-                    this.toggleGroup(e.element);
+                    return;
                 } else {
                     if (hasReadableCustomizationContent(e.element.item.uri)) {
                         this._onDidSelectItem.fire(e.element.item);
@@ -733,21 +750,18 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
             }
         }));
         this._register(this.list.onDidChangeFocus(e => {
-            itemRenderer.setFocusedIndex(e.indexes.length ? e.indexes[0] : -1);
+            const entry = e.elements[0];
+            itemRenderer.setFocusedItemId(entry?.type === "file-item" ? entry.item.id : undefined);
         }));
         this._register(this.list.onDidFocus(() => {
             if (this.list.getFocus().length === 0 && this.displayEntries.length > 0) {
-                const firstItemIndex = this.displayEntries.findIndex(e => e.type !== "group-header");
-                if (firstItemIndex >= 0) {
-                    this.list.setFocus([firstItemIndex]);
+                const firstItem = this.displayEntries.find(entry => entry.type !== "group-header");
+                if (firstItem) {
+                    this.list.setFocus([firstItem]);
                 }
             }
         }));
-        this._register(this.list.onContextMenu(e => {
-            if (!this.usesCardLayout()) {
-                this.onContextMenu(e);
-            }
-        }));
+        this._register(this.list.onContextMenu(e => this.onContextMenu(e)));
         this._register(this.fileService.onDidFilesChange(e => {
             if (e.gotDeleted()) {
                 this.refresh();
@@ -760,7 +774,9 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
         if (!e.element || e.element.type !== "file-item") {
             return;
         }
-        const item = e.element.item;
+        this.showItemContextMenu(e.element.item, e.anchor);
+    }
+    showItemContextMenu(item, anchor) {
         const context = {
             uri: ( item.uri.toString()),
             name: item.name,
@@ -788,9 +804,10 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
         const {
             secondary
         } = getContextMenuActions(actions, "inline");
-        const copyActions = item.isBuiltin || !hasReadableCustomizationContent(item.uri) ? [] : [( new Separator()), ( new Action("copyFullPath", ( localize(8523, "Copy Full Path")), undefined, true, async () => {
-            await this.clipboardService.writeText(item.uri.fsPath);
-        })), ( new Action("copyRelativePath", ( localize(8524, "Copy Relative Path")), undefined, true, async () => {
+        const copyActions = item.isBuiltin || !hasReadableCustomizationContent(item.uri) ? [] : [( new Separator()), ( new Action("copyFullPath", ( localize(10313, "Copy Full Path")), undefined, true, async () => {
+            const path = item.uri.scheme === Schemas.file ? item.uri.fsPath : ( item.uri.toString(true));
+            await this.clipboardService.writeText(path);
+        })), ( new Action("copyRelativePath", ( localize(10314, "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);
@@ -802,109 +819,21 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
                 await this.clipboardService.writeText(relativePath);
             }
         }))];
-        this.contextMenuService.showContextMenu({
-            getAnchor: () => e.anchor,
-            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(8524, "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();
-            }
+            getActions: () => [...secondary, ...copyActions]
         });
     }
-    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 = [];
+            this.element.classList.remove("show-item-type-icons");
             const matchCount = this.filterItems();
             this._onDidChangeItemCount.fire(0);
             this.updateAddButton();
@@ -916,15 +845,19 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
         this.currentSectionSubscription.value = autorun(reader => {
             const items = observable.read(reader);
             this.allItems = items;
-            this.filterItems();
+            this.element.classList.toggle("show-item-type-icons", ( items.some(item => !!item.marketplace?.resource.icon)));
+            const matchCount = this.filterItems();
             this._onDidChangeItemCount.fire(items.length);
+            if (!this.sectionLoading) {
+                this.announceItemCount(matchCount);
+            }
         });
         this.updateAddButton();
         await this.itemsModel.whenSectionLoaded(modelSection);
         if (loadId === this._sectionLoadId) {
             this.sectionLoading = false;
             this.filterItems();
-            this.announceItemCount(this.applySearchFilter(this.allItems).length);
+            this.announceItemCount(this.applySearchFilter(this.getItemsForDisplay(this.allItems)).length);
         }
     }
     updateSectionHeader() {
@@ -934,47 +867,47 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
         let learnMoreLabel;
         switch (this.currentSection) {
         case AICustomizationManagementSection.Agents:
-            title = ( localize(8525, "Agents"));
+            title = ( localize(10315, "Agents"));
             description = ( localize(
-                8526,
+                10316,
                 "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(8527, "Learn more about custom agents"));
+            learnMoreLabel = ( localize(10317, "Learn more about custom agents"));
             break;
         case AICustomizationManagementSection.Skills:
-            title = ( localize(8528, "Skills"));
+            title = ( localize(10318, "Skills"));
             description = ( localize(
-                8529,
+                10319,
                 "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(8530, "Learn more about agent skills"));
+            learnMoreLabel = ( localize(10320, "Learn more about agent skills"));
             break;
         case AICustomizationManagementSection.Instructions:
-            title = ( localize(8531, "Instructions"));
+            title = ( localize(10321, "Instructions"));
             description = ( localize(
-                8532,
+                10322,
                 "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(8533, "Learn more about custom instructions"));
+            learnMoreLabel = ( localize(10323, "Learn more about custom instructions"));
             break;
         case AICustomizationManagementSection.Hooks:
-            title = ( localize(8534, "Hooks"));
-            description = ( localize(8535, "Prompts executed at specific points during an agentic lifecycle."));
+            title = ( localize(10324, "Hooks"));
+            description = ( localize(10325, "Prompts executed at specific points during an agentic lifecycle."));
             docsUrl = "https://code.visualstudio.com/docs/agent-customization/hooks?referrer=in-product";
-            learnMoreLabel = ( localize(8536, "Learn more about hooks"));
+            learnMoreLabel = ( localize(10326, "Learn more about hooks"));
             break;
         case AICustomizationManagementSection.Prompts:
         default:
-            title = ( localize(8537, "Prompts"));
+            title = ( localize(10327, "Prompts"));
             description = ( localize(
-                8538,
+                10328,
                 "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(8539, "Learn more about prompt files"));
+            learnMoreLabel = ( localize(10329, "Learn more about prompt files"));
             break;
         }
         this.sectionTitle.textContent = title;
@@ -983,12 +916,9 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
         this.sectionLink.href = docsUrl;
     }
     updateAddButton() {
-        if (this.usesCardLayout()) {
+        if (this.usesCustomizationTreePresentation()) {
             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();
@@ -1020,7 +950,7 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
         const hasWorkspace = this.hasActiveWorkspace();
         if (override?.commandId) {
             return [{
-                label: override.label ?? ( localize(8540, "New {0}", typeLabel)),
+                label: override.label ?? ( localize(10330, "New {0}", typeLabel)),
                 enabled: true,
                 run: () => {
                     this.commandService.executeCommand(override.commandId);
@@ -1052,13 +982,14 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
         const addedTargets = ( new Set());
         if (override?.rootFile && hasWorkspace) {
             actions.push({
-                label: override.label ?? ( localize(8540, "New {0}", typeLabel)),
+                label: override.label ?? ( localize(10330, "New {0}", typeLabel)),
                 enabled: true,
                 target: "workspace",
-                run: () => {
+                run: workspaceFolder => {
                     this._onDidRequestCreateManual.fire({
                         type: promptType,
-                        target: "workspace-root"
+                        target: "workspace-root",
+                        workspaceFolder
                     });
                 }
             });
@@ -1067,32 +998,36 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
         if (promptType === PromptsType.hook) {
             if (!this.workspaceService.isSessionsWindow && !descriptor.hideGenerateButton) {
                 actions.push({
-                    label: ( localize(8541, "Generate with AI")),
-                    tooltip: ( localize(8542, "Generate {0} with AI", typeLabel)),
+                    label: ( localize(10331, "Generate with AI")),
+                    tooltip: ( localize(10332, "Generate {0} with AI", typeLabel)),
                     enabled: true,
                     kind: "generate",
-                    run: () => {
-                        this._onDidRequestCreate.fire(promptType);
+                    run: workspaceFolder => {
+                        this._onDidRequestCreate.fire({
+                            type: promptType,
+                            workspaceFolder
+                        });
                     }
                 });
             }
             if (hasWorkspace) {
                 actions.push({
-                    label: ( localize(8543, "New Hook")),
-                    compactLabel: ( localize(8543, "New Hook")),
+                    label: ( localize(10333, "New Hook")),
+                    compactLabel: ( localize(10333, "New Hook")),
                     enabled: true,
                     target: "workspace",
-                    run: () => {
+                    run: workspaceFolder => {
                         this._onDidRequestCreateManual.fire({
                             type: promptType,
-                            target: "local"
+                            target: "local",
+                            workspaceFolder
                         });
                     }
                 });
             }
             actions.push({
-                label: ( localize(8543, "New Hook")),
-                compactLabel: ( localize(8543, "New Hook")),
+                label: ( localize(10333, "New Hook")),
+                compactLabel: ( localize(10333, "New Hook")),
                 enabled: true,
                 target: "user",
                 run: () => {
@@ -1107,32 +1042,36 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
         if (!override?.rootFile) {
             if (!this.workspaceService.isSessionsWindow && !descriptor.hideGenerateButton) {
                 actions.push({
-                    label: ( localize(8541, "Generate with AI")),
-                    tooltip: ( localize(8542, "Generate {0} with AI", typeLabel)),
+                    label: ( localize(10331, "Generate with AI")),
+                    tooltip: ( localize(10332, "Generate {0} with AI", typeLabel)),
                     enabled: true,
                     kind: "generate",
-                    run: () => {
-                        this._onDidRequestCreate.fire(promptType);
+                    run: workspaceFolder => {
+                        this._onDidRequestCreate.fire({
+                            type: promptType,
+                            workspaceFolder
+                        });
                     }
                 });
             } else if (hasWorkspace) {
                 actions.push({
-                    label: ( localize(8544, "New {0} (Workspace)", createTypeLabel)),
-                    compactLabel: ( localize(8540, "New {0}", createTypeLabel)),
+                    label: ( localize(10334, "New {0} (Workspace)", createTypeLabel)),
+                    compactLabel: ( localize(10330, "New {0}", createTypeLabel)),
                     enabled: true,
                     target: "workspace",
-                    run: () => {
+                    run: workspaceFolder => {
                         this._onDidRequestCreateManual.fire({
                             type: promptType,
-                            target: "local"
+                            target: "local",
+                            workspaceFolder
                         });
                     }
                 });
                 addedTargets.add("workspace");
             } else {
                 actions.push({
-                    label: ( localize(8545, "New {0} (User)", createTypeLabel)),
-                    compactLabel: ( localize(8540, "New {0}", createTypeLabel)),
+                    label: ( localize(10335, "New {0} (User)", createTypeLabel)),
+                    compactLabel: ( localize(10330, "New {0}", createTypeLabel)),
                     enabled: true,
                     target: "user",
                     run: () => {
@@ -1147,22 +1086,23 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
         }
         if (hasWorkspace && !( addedTargets.has("workspace"))) {
             actions.push({
-                label: ( localize(8544, "New {0} (Workspace)", createTypeLabel)),
-                compactLabel: ( localize(8540, "New {0}", createTypeLabel)),
+                label: ( localize(10334, "New {0} (Workspace)", createTypeLabel)),
+                compactLabel: ( localize(10330, "New {0}", createTypeLabel)),
                 enabled: true,
                 target: "workspace",
-                run: () => {
+                run: workspaceFolder => {
                     this._onDidRequestCreateManual.fire({
                         type: promptType,
-                        target: "local"
+                        target: "local",
+                        workspaceFolder
                     });
                 }
             });
         }
         if (!( addedTargets.has("user"))) {
             actions.push({
-                label: ( localize(8545, "New {0} (User)", createTypeLabel)),
-                compactLabel: ( localize(8540, "New {0}", createTypeLabel)),
+                label: ( localize(10335, "New {0} (User)", createTypeLabel)),
+                compactLabel: ( localize(10330, "New {0}", createTypeLabel)),
                 enabled: true,
                 target: "user",
                 run: () => {
@@ -1176,14 +1116,15 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
         if (hasWorkspace && override?.rootFileShortcuts && !( addedTargets.has("workspace-root"))) {
             for (const fileName of override.rootFileShortcuts) {
                 actions.push({
-                    label: ( localize(8546, "New {0}", fileName)),
+                    label: ( localize(10336, "New {0}", fileName)),
                     enabled: true,
                     target: "workspace",
-                    run: () => {
+                    run: workspaceFolder => {
                         this._onDidRequestCreateManual.fire({
                             type: promptType,
                             target: "workspace-root",
-                            rootFileName: fileName
+                            rootFileName: fileName,
+                            workspaceFolder
                         });
                     }
                 });
@@ -1208,16 +1149,16 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
     getTypeLabel() {
         switch (this.currentSection) {
         case AICustomizationManagementSection.Agents:
-            return localize(8547, "Agent");
+            return localize(10337, "Agent");
         case AICustomizationManagementSection.Skills:
-            return localize(8548, "Skill");
+            return localize(10338, "Skill");
         case AICustomizationManagementSection.Instructions:
-            return localize(8549, "Instruction");
+            return localize(10339, "Instruction");
         case AICustomizationManagementSection.Hooks:
-            return localize(8550, "Hook");
+            return localize(10340, "Hook");
         case AICustomizationManagementSection.Prompts:
         default:
-            return localize(8551, "Prompt");
+            return localize(10341, "Prompt");
         }
     }
     announceItemCount(count) {
@@ -1246,27 +1187,44 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
             return items.map(item => ({
                 ...item,
                 nameMatches: undefined,
-                descriptionMatches: undefined
+                secondaryTextMatches: undefined
             }));
         }
         const query = this.searchQuery.toLowerCase();
         const matched = [];
         for (const item of items) {
             const displayName = item.displayName ?? formatDisplayName(item.name);
+            const secondaryText = getCustomizationSecondaryText(item.description, item.filename, item.promptType);
             const nameMatches = matchesContiguousSubString(query, displayName);
-            const descriptionMatches = item.description ? matchesContiguousSubString(query, item.description) : null;
-            const filenameMatches = matchesContiguousSubString(query, item.filename);
+            const secondaryTextMatches = matchesContiguousSubString(query, secondaryText);
+            const descriptionMatches = item.description && item.description !== secondaryText ? matchesContiguousSubString(query, item.description) : null;
             const badgeMatches = item.badge ? matchesContiguousSubString(query, item.badge) : null;
-            if (nameMatches || descriptionMatches || filenameMatches || badgeMatches) {
+            if (nameMatches || secondaryTextMatches || descriptionMatches || badgeMatches) {
                 matched.push({
                     ...item,
                     nameMatches: nameMatches || undefined,
-                    descriptionMatches: descriptionMatches || undefined
+                    secondaryTextMatches: secondaryTextMatches || undefined
                 });
             }
         }
         return matched;
     }
+    getItemsForDisplay(items) {
+        const isMultiRoot = getAICustomizationWorkspaceGroups(this.workspaceContextService).length > 0;
+        if (!isMultiRoot) {
+            return [...items];
+        }
+        return items.map(item => {
+            if (!isAICustomizationWorkspaceGroupKey(this.getItemGroupKey(item, isMultiRoot))) {
+                return item;
+            }
+            const filename = getMultiRootWorkspaceRelativeFilename(item, this.workspaceContextService, this.labelService);
+            return filename === item.filename ? item : {
+                ...item,
+                filename
+            };
+        });
+    }
     buildGroupedEntries(groups) {
         for (const group of groups) {
             group.items.sort((a, b) => a.name.localeCompare(b.name));
@@ -1277,7 +1235,7 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
             if (group.items.length === 0) {
                 continue;
             }
-            const collapsed = !this.usesCardLayout() && ( this.collapsedGroups.has(this.getCollapsedGroupKey(group.groupKey)));
+            const collapsed = ( this.collapsedGroups.has(this.getCollapsedGroupKey(group.groupKey)));
             this.displayEntries.push({
                 type: "group-header",
                 id: `group-${group.groupKey}`,
@@ -1301,69 +1259,101 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
         }
     }
     commitDisplayEntries() {
-        this.list.splice(0, this.list.length, this.displayEntries);
+        this.list.setChildren(null, this.displayEntries.map(element => ({
+            element
+        })));
+        this.updateEmptyState();
+    }
+    renderCustomizationTree(groups) {
+        this.listContainer.style.display = "";
+        this.displayEntries = groups.flatMap(group => [group.element, ...group.children]);
+        const children = groups.map(group => ({
+            element: group.element,
+            collapsible: true,
+            collapsed: ObjectTreeElementCollapseState.PreserveOrExpanded,
+            children: group.children.map(element => ({
+                element
+            }))
+        }));
+        this.list.setChildren(null);
+        this.list.setChildren(null, children);
+        this.updateAddButton();
         this.updateEmptyState();
     }
+    getDisplayedItemCount() {
+        return this.displayEntries.filter(entry => entry.type === "file-item").length;
+    }
     groupMatchedItems(matchedItems) {
+        const workspaceGroups = getAICustomizationWorkspaceGroups(this.workspaceContextService);
         const groups = [{
-            groupKey: PromptsStorage.local,
-            label: ( localize(8552, "Workspace")),
+            groupKey: PromptsStorage.user,
+            label: ( localize(10342, "User")),
+            icon: userIcon,
+            description: ( localize(
+                10343,
+                "Customizations stored locally on your machine in a central location. Private to you and available across all projects."
+            )),
+            items: []
+        }, ...(workspaceGroups.length > 0 ? workspaceGroups.map(group => ({
+            groupKey: group.key,
+            label: group.label,
             icon: workspaceIcon,
             description: ( localize(
-                8553,
+                10344,
                 "Customizations stored as files in your project folder and shared with your team via version control."
             )),
-            items: []
-        }, {
-            groupKey: PromptsStorage.user,
-            label: ( localize(8554, "User")),
-            icon: userIcon,
+            items: [],
+            workspaceFolder: group.uri
+        })) : [{
+            groupKey: PromptsStorage.local,
+            label: ( localize(10345, "Workspace")),
+            icon: workspaceIcon,
             description: ( localize(
-                8555,
-                "Customizations stored locally on your machine in a central location. Private to you and available across all projects."
+                10344,
+                "Customizations stored as files in your project folder and shared with your team via version control."
             )),
             items: []
-        }, {
+        }]), {
             groupKey: PromptsStorage.plugin,
-            label: ( localize(8556, "Plugins")),
+            label: ( localize(10346, "Plugins")),
             icon: pluginIcon,
-            description: ( localize(8557, "Read-only customizations provided by installed plugins.")),
+            description: ( localize(10347, "Read-only customizations provided by installed plugins.")),
             items: []
         }, {
             groupKey: PromptsStorage.extension,
-            label: ( localize(8558, "Extensions")),
+            label: ( localize(10348, "Extensions")),
             icon: extensionIcon,
-            description: ( localize(8559, "Read-only customizations provided by installed extensions.")),
+            description: ( localize(10349, "Read-only customizations provided by installed extensions.")),
             items: []
         }, {
             groupKey: PromptsStorage.builtIn,
-            label: ( localize(8560, "Built-in")),
+            label: ( localize(10350, "Built-in")),
             icon: builtinIcon,
-            description: ( localize(8561, "Built-in customizations shipped with the application.")),
+            description: ( localize(10351, "Built-in customizations shipped with the application.")),
             items: []
         }];
         for (const item of matchedItems) {
-            const key = this.currentSection === AICustomizationManagementSection.Instructions ? item.source : item.groupKey ?? item.source ?? AICustomizationSources.local;
+            const key = this.getItemGroupKey(item, workspaceGroups.length > 0);
             let group = groups.find(g => g.groupKey === key);
             if (!group) {
                 let label;
                 let description = "";
                 switch (key) {
                 case "remote-host":
-                    label = ( localize(8562, "Remote"));
+                    label = ( localize(10352, "Remote"));
                     if (this.currentSection === AICustomizationManagementSection.Skills) {
                         description = ( localize(
-                            8563,
+                            10353,
                             "Skills available from {0}, the active remote agent environment.",
                             this.harnessService.getActiveDescriptor().label
                         ));
                     }
                     break;
                 case "remote-client":
-                    label = ( localize(8564, "Local"));
+                    label = ( localize(10354, "Local"));
                     if (this.currentSection === AICustomizationManagementSection.Skills) {
                         description = ( localize(
-                            8565,
+                            10355,
                             "Skills stored on your local machine and synced to {0}, the active remote agent environment.",
                             this.harnessService.getActiveDescriptor().label
                         ));
@@ -1389,234 +1379,79 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
             group.items.push(item);
         }
         this.buildGroupedEntries(groups);
-        if (this.usesCardLayout()) {
-            this.renderCardGroups(groups);
+        if (this.usesCustomizationTreePresentation()) {
+            const isFiltering = !!this.searchQuery.trim();
+            const alwaysVisibleGroupKeys = ( new Set(
+                isFiltering ? [] : workspaceGroups.length > 0 ? [...workspaceGroups.map(group => group.key), PromptsStorage.user] : getAlwaysVisibleCustomizationGroupKeys(this.currentSection)
+            ));
+            const visibleGroups = groups.filter(group => group.items.length > 0 || ( alwaysVisibleGroupKeys.has(group.groupKey)));
+            const treeGroups = visibleGroups.map((group, index) => {
+                const element = {
+                    type: "group-header",
+                    id: `group-${group.groupKey}`,
+                    groupKey: group.groupKey,
+                    label: group.label,
+                    icon: group.icon,
+                    count: group.items.length,
+                    isFirst: index === 0,
+                    description: group.description,
+                    collapsed: false
+                };
+                return {
+                    id: group.groupKey,
+                    label: group.label,
+                    description: group.description,
+                    count: group.items.length,
+                    element,
+                    children: group.items.map(item => ({
+                        type: "file-item",
+                        item
+                    }))
+                };
+            });
+            this.renderCustomizationTree(treeGroups);
         } 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(8566, "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();
-                }
-            });
+    getItemGroupKey(item, isMultiRoot) {
+        const key = this.currentSection === AICustomizationManagementSection.Instructions ? item.source : item.groupKey ?? item.source ?? AICustomizationSources.local;
+        if (key !== PromptsStorage.local || !isMultiRoot) {
+            return key;
         }
+        return getAICustomizationWorkspaceGroupForResource(item.uri, this.workspaceContextService)?.key ?? key;
     }
-    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);
-        }
+    usesCustomizationTreePresentation() {
+        return usesCustomizationTreePresentation(this.currentSection);
     }
-    layoutCardSectionLists() {
-        const content = this.cardSectionLayoutContainer;
-        if (!content) {
+    renderTreeGroupActions(entry, container, disposables) {
+        if (entry.groupKey !== PromptsStorage.local && entry.groupKey !== PromptsStorage.user && !isAICustomizationWorkspaceGroupKey(entry.groupKey)) {
             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;
+        const actions = append(container, $(".plugin-card-section-actions"));
+        const workspaceFolder = getAICustomizationWorkspaceGroups(this.workspaceContextService).find(group => group.key === entry.groupKey)?.uri;
+        this.renderTargetedCreateActions(actions, entry.groupKey, disposables, workspaceFolder);
+        if (entry.groupKey === PromptsStorage.user && this.currentSection === AICustomizationManagementSection.Skills && isCustomizationDiscoveryAvailable(this.configurationService, this.marketplaceService)) {
+            const label = ( localize(10356, "Browse Skills"));
+            const button = disposables.add(( new Button(actions, {
+                ...getButtonStyles({
+                    buttonSecondaryBackground: undefined,
+                    buttonSecondaryForeground: undefined,
+                    buttonSecondaryHoverBackground: undefined,
+                    buttonSecondaryBorder: undefined
+                }),
+                secondary: true,
+                title: label,
+                ariaLabel: label
+            })));
+            button.element.classList.add("plugin-card-ghost-button");
+            button.label = label;
+            disposables.add(button.onDidClick(() => this._onDidRequestBrowse.fire()));
         }
-        return this.hasActiveWorkspace() ? PromptsStorage.local : PromptsStorage.user;
     }
-    renderTargetedCardCreateActions(header, groupKey) {
-        const target = groupKey === PromptsStorage.local ? "workspace" : "user";
+    renderTargetedCreateActions(container, groupKey, disposables, workspaceFolder) {
+        const workspaceGroup = groupKey === PromptsStorage.local || isAICustomizationWorkspaceGroupKey(groupKey);
+        const target = workspaceGroup ? "workspace" : "user";
         const hasWorkspace = this.hasActiveWorkspace();
         const actions = this.buildCreateActions().filter(
             action => action.target === target || action.target === undefined && (target === "workspace" ? hasWorkspace : !hasWorkspace)
@@ -1625,67 +1460,85 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
         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,
+        const button = disposables.add(( new Button(container, {
+            ...getButtonStyles({
+                buttonSecondaryBackground: undefined,
+                buttonSecondaryForeground: undefined,
+                buttonSecondaryHoverBackground: undefined,
+                buttonSecondaryBorder: undefined
+            }),
             secondary: true,
+            supportIcons: true,
             title: primary.tooltip ?? label,
             ariaLabel: primary.tooltip ?? label
         })));
-        button.element.classList.add("customization-create-action");
-        button.label = label;
+        button.element.classList.add(
+            "customization-create-action",
+            "plugin-card-ghost-button",
+            "plugin-card-icon-button"
+        );
+        button.icon = Codicon.add;
         button.enabled = primary.enabled;
-        this.firstCardFocusElement ??= button.element;
-        this.cardDisposables.add(button.onDidClick(() => primary.run()));
+        disposables.add(button.onDidClick(() => primary.run(workspaceFolder)));
         const generateAction = actions.find(action => action.kind === "generate");
         if (generateAction && generateAction !== primary) {
-            const generateButton = this.cardDisposables.add(( new Button(container, {
-                ...defaultButtonStyles,
+            const generateButton = disposables.add(( new Button(container, {
+                ...getButtonStyles({
+                    buttonSecondaryBackground: undefined,
+                    buttonSecondaryForeground: undefined,
+                    buttonSecondaryHoverBackground: undefined,
+                    buttonSecondaryBorder: undefined
+                }),
                 secondary: true,
                 title: generateAction.tooltip ?? generateAction.label,
                 ariaLabel: generateAction.tooltip ?? generateAction.label
             })));
-            generateButton.element.classList.add("customization-generate-action");
+            generateButton.element.classList.add("customization-generate-action", "plugin-card-ghost-button");
             generateButton.label = generateAction.label;
             generateButton.enabled = generateAction.enabled;
-            this.cardDisposables.add(generateButton.onDidClick(() => generateAction.run()));
+            disposables.add(generateButton.onDidClick(() => generateAction.run(workspaceFolder)));
         }
         const secondaryActions = actions.filter(action => action !== primary && action !== generateAction);
         if (secondaryActions.length > 0) {
             const moreLabel = ( localize(
-                8567,
+                10357,
                 "More creation actions for {0}",
-                groupKey === PromptsStorage.local ? ( localize(8568, "Workspace")) : ( localize(8569, "User"))
+                workspaceGroup ? ( localize(10358, "Workspace")) : ( localize(10359, "User"))
             ));
-            const more = this.cardDisposables.add(( new Button(container, {
+            const more = disposables.add(( new Button(container, {
                 ...getButtonStyles({
                     buttonSecondaryBackground: undefined,
+                    buttonSecondaryForeground: undefined,
+                    buttonSecondaryHoverBackground: 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))
+            more.element.classList.add(
+                "plugin-card-icon-button",
+                "plugin-card-ghost-button",
+                "customization-create-more-action"
             );
+            more.icon = Codicon.ellipsis;
+            disposables.add(more.onDidClick(
+                () => this.showCreateActionsMenu(secondaryActions, more.element, workspaceFolder)
+            ));
         }
     }
     formatTargetedCreateActionLabel(action) {
         return getTargetedCreateActionLabel(action.label, action.compactLabel);
     }
-    showCreateActionsMenu(createActions, anchor) {
+    showCreateActionsMenu(createActions, anchor, workspaceFolder) {
         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()
+            () => action.run(workspaceFolder)
         ))));
         this.contextMenuService.showContextMenu({
             getAnchor: () => anchor,
@@ -1693,168 +1546,10 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
             onHide: () => disposables.dispose()
         });
     }
-    getEmptyGroupMessage(groupKey) {
-        const workspace = groupKey === PromptsStorage.local;
-        switch (this.currentSection) {
-        case AICustomizationManagementSection.Agents:
-            return workspace ? ( localize(8570, "No workspace agents yet.")) : ( localize(8571, "No user agents yet."));
-        case AICustomizationManagementSection.Skills:
-            return workspace ? ( localize(8572, "No workspace skills yet.")) : ( localize(8573, "No user skills yet."));
-        case AICustomizationManagementSection.Instructions:
-            return workspace ? ( localize(8574, "No workspace instructions yet.")) : ( localize(8575, "No user instructions yet."));
-        case AICustomizationManagementSection.Hooks:
-            return workspace ? ( localize(8576, "No workspace hooks yet.")) : ( localize(8577, "No user hooks yet."));
-        case AICustomizationManagementSection.Prompts:
-            return workspace ? ( localize(8578, "No workspace prompts yet.")) : ( localize(8579, "No user prompts yet."));
-        default:
-            return localize(8580, "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(
-            8581,
-            "{0}. {1}. Disabled",
-            displayName,
-            accessibleSecondaryText || groupLabel
-        )) : ( localize(8582, "{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(8583, "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(8480, "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);
+        const matchedItems = this.applySearchFilter(this.getItemsForDisplay(this.allItems));
         this.groupMatchedItems(matchedItems);
-        return matchedItems.length;
-    }
-    toggleGroup(entry) {
-        const collapsedGroupKey = this.getCollapsedGroupKey(entry.groupKey);
-        if (( this.collapsedGroups.has(collapsedGroupKey))) {
-            this.collapsedGroups.delete(collapsedGroupKey);
-        } else {
-            this.collapsedGroups.add(collapsedGroupKey);
-        }
-        this.filterItems();
+        return this.usesCustomizationTreePresentation() ? this.getDisplayedItemCount() : matchedItems.length;
     }
     getCollapsedGroupKey(groupKey) {
         return getCollapsedCustomizationGroupKey(this.currentSection, groupKey);
@@ -1862,12 +1557,11 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
     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(8584, "No items match '{0}'", this.searchQuery));
-                this.emptyStateSubtext.textContent = ( localize(8585, "Try a different search term"));
+                this.emptyStateText.textContent = ( localize(10360, "No items match '{0}'", this.searchQuery));
+                this.emptyStateSubtext.textContent = ( localize(10361, "Try a different search term"));
             } else {
                 const emptyInfo = this.getEmptyStateInfo();
                 this.emptyStateText.textContent = emptyInfo.title;
@@ -1875,37 +1569,36 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
             }
         } else {
             this.emptyStateContainer.style.display = "none";
-            this.listContainer.style.display = this.usesCardLayout() ? "none" : "";
-            this.cardScrollableNode.style.display = this.usesCardLayout() ? "" : "none";
+            this.listContainer.style.display = "";
         }
     }
     getEmptyStateInfo() {
         switch (this.currentSection) {
         case AICustomizationManagementSection.Agents:
             return {
-                title: ( localize(8586, "No agents yet")),
-                description: ( localize(8587, "Create your first custom agent to get started"))
+                title: ( localize(10362, "No agents yet")),
+                description: ( localize(10363, "Create your first custom agent to get started"))
             };
         case AICustomizationManagementSection.Skills:
             return {
-                title: ( localize(8588, "No skills yet")),
-                description: ( localize(8589, "Create your first skill to extend agent capabilities"))
+                title: ( localize(10364, "No skills yet")),
+                description: ( localize(10365, "Create your first skill to extend agent capabilities"))
             };
         case AICustomizationManagementSection.Instructions:
             return {
-                title: ( localize(8590, "No instructions yet")),
-                description: ( localize(8591, "Add instructions to teach Copilot about your codebase"))
+                title: ( localize(10366, "No instructions yet")),
+                description: ( localize(10367, "Add instructions to teach Copilot about your codebase"))
             };
         case AICustomizationManagementSection.Hooks:
             return {
-                title: ( localize(8592, "No hooks yet")),
-                description: ( localize(8593, "Create hooks to execute commands at agent lifecycle events"))
+                title: ( localize(10368, "No hooks yet")),
+                description: ( localize(10369, "Create hooks to execute commands at agent lifecycle events"))
             };
         case AICustomizationManagementSection.Prompts:
         default:
             return {
-                title: ( localize(8594, "No prompts yet")),
-                description: ( localize(8595, "Create reusable prompts for common tasks"))
+                title: ( localize(10370, "No prompts yet")),
+                description: ( localize(10371, "Create reusable prompts for common tasks"))
             };
         }
     }
@@ -1919,66 +1612,27 @@ 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]);
+        const firstItem = this.displayEntries.find(entry => entry.type === "file-item");
+        if (firstItem) {
+            this.list.setFocus([firstItem]);
         }
     }
     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);
+            this.list.reveal(this.displayEntries[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 => {
+        const entry = this.displayEntries.find(entry => {
             return entry.type === "file-item" && ( uris.some(uri => isEqual(entry.item.uri, uri)));
         });
-        if (entryIndex < 0) {
+        if (!entry) {
             return false;
         }
-        this.list.reveal(entryIndex);
-        this.list.setFocus([entryIndex]);
-        this.list.setSelection([entryIndex]);
+        this.list.reveal(entry);
+        this.list.setFocus([entry]);
+        this.list.setSelection([entry]);
         this.list.domFocus();
         return true;
     }
@@ -2006,17 +1660,9 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
         }
         const headerHeight = this.sectionTitleHeader.offsetHeight;
         this.lastHeaderHeight = headerHeight;
-        const availableHeight = this.element.clientHeight || height;
-        const listHeight = Math.max(0, availableHeight - searchBarHeight - headerHeight);
-        this.cardScrollableNode.style.height = `${listHeight}px`;
+        const listHeight = getCustomizationTreeContentHeight(this.element, this.listContainer, height);
         this.listContainer.style.height = `${listHeight}px`;
-        if (this.usesCardLayout()) {
-            this.layoutCardSectionLists();
-            this.cardScrollable.scanDomNode();
-            this.scheduleCardSectionLayout();
-        } else {
-            this.list.layout(listHeight, width);
-        }
+        this.list.layout(listHeight, width);
     }
     get itemCount() {
         return this.allItems.length;
@@ -2031,6 +1677,6 @@ let AICustomizationListWidget = class AICustomizationListWidget extends Disposab
         }, this.itemsModel.getActiveItemSource(), this.harnessService, this.agentPluginService);
     }
 };
-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));
+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, IConfigurationService)), ( __param(16, ICustomizationMarketplaceService)), ( __param(17, IAICustomizationItemsModel)), ( __param(18, IAgentPluginService)), ( __param(19, IWorkspaceContextService))], AICustomizationListWidget));
 
-export { AICustomizationListWidget, formatDisplayName, getAlwaysVisibleCustomizationGroupKeys, getCollapsedCustomizationGroupKey, getCountAnnouncement, getCustomizationItemAriaLabel, getCustomizationItemStatusLabel, getTargetedCreateActionLabel, usesCustomizationCardLayout };
+export { AICustomizationListWidget, formatDisplayName, getAlwaysVisibleCustomizationGroupKeys, getCollapsedCustomizationGroupKey, getCountAnnouncement, getCustomizationItemAriaLabel, getCustomizationItemStatusLabel, getMultiRootWorkspaceRelativeFilename, getTargetedCreateActionLabel, usesCustomizationTreePresentation };