@codingame/monaco-vscode-chat-service-override 26.2.2 → 28.0.0

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

@@ -0,0 +1,702 @@
+
+import { registerCss } from '@codingame/monaco-vscode-api/css';
+import { __decorate, __param } from '@codingame/monaco-vscode-api/external/tslib/tslib.es6';
+import * as aiCustomizationManagement from './media/aiCustomizationManagement.css';
+import { $ as $$1, append, addDisposableListener, getWindow } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/dom';
+import { DisposableStore, Disposable, isDisposable } from '@codingame/monaco-vscode-api/vscode/vs/base/common/lifecycle';
+import { Emitter } from '@codingame/monaco-vscode-api/vscode/vs/base/common/event';
+import { localize } from '@codingame/monaco-vscode-api/vscode/vs/nls';
+import { IInstantiationService } from '@codingame/monaco-vscode-api/vscode/vs/platform/instantiation/common/instantiation';
+import { WorkbenchList } from '@codingame/monaco-vscode-api/vscode/vs/platform/list/browser/listService';
+import { ThemeIcon } from '@codingame/monaco-vscode-api/vscode/vs/base/common/themables';
+import { Codicon } from '@codingame/monaco-vscode-api/vscode/vs/base/common/codicons';
+import { Button } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/button/button';
+import { defaultButtonStyles, defaultInputBoxStyles } from '@codingame/monaco-vscode-api/vscode/vs/platform/theme/browser/defaultStyles';
+import '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/index';
+import { IOpenerService } from '@codingame/monaco-vscode-api/vscode/vs/platform/opener/common/opener.service';
+import { URI } from '@codingame/monaco-vscode-api/vscode/vs/base/common/uri';
+import { InputBox } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/inputbox/inputBox';
+import { IContextViewService, IContextMenuService } from '@codingame/monaco-vscode-api/vscode/vs/platform/contextview/browser/contextView.service';
+import { CancellationTokenSource } from '@codingame/monaco-vscode-api/vscode/vs/base/common/cancellation';
+import { Delayer } from '@codingame/monaco-vscode-api/vscode/vs/base/common/async';
+import { Action, Separator } from '@codingame/monaco-vscode-api/vscode/vs/base/common/actions';
+import { dirname, basename } from '@codingame/monaco-vscode-api/vscode/vs/base/common/resources';
+import { IHoverService } from '@codingame/monaco-vscode-api/vscode/vs/platform/hover/browser/hover.service';
+import { ICommandService } from '@codingame/monaco-vscode-api/vscode/vs/platform/commands/common/commands.service';
+import { IAgentPluginService } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/plugins/agentPluginService.service';
+import { IPluginMarketplaceService } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/plugins/pluginMarketplaceService.service';
+import { IPluginInstallService } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/plugins/pluginInstallService.service';
+import { AgentPluginItemKind } from '../agentPluginEditor/agentPluginItems.js';
+import { pluginIcon } from './aiCustomizationIcons.js';
+import { ILabelService } from '@codingame/monaco-vscode-api/vscode/vs/platform/label/common/label.service';
+import { autorun } from '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/reactions/autorun';
+
+registerCss(aiCustomizationManagement);
+const $ = $$1;
+const PLUGIN_ITEM_HEIGHT = 36;
+const PLUGIN_GROUP_HEADER_HEIGHT = 36;
+const PLUGIN_GROUP_HEADER_HEIGHT_WITH_SEPARATOR = 40;
+class PluginItemDelegate {
+    getHeight(element) {
+        if (element.type === "group-header") {
+            return element.isFirst ? PLUGIN_GROUP_HEADER_HEIGHT : PLUGIN_GROUP_HEADER_HEIGHT_WITH_SEPARATOR;
+        }
+        return PLUGIN_ITEM_HEIGHT;
+    }
+    getTemplateId(element) {
+        if (element.type === "group-header") {
+            return "pluginGroupHeader";
+        }
+        if (element.type === "marketplace-item") {
+            return "pluginMarketplaceItem";
+        }
+        return "pluginInstalledItem";
+    }
+}
+class PluginGroupHeaderRenderer {
+    constructor(hoverService) {
+        this.hoverService = hoverService;
+        this.templateId = "pluginGroupHeader";
+    }
+    renderTemplate(container) {
+        const disposables = ( new DisposableStore());
+        const elementDisposables = ( new DisposableStore());
+        container.classList.add("ai-customization-group-header");
+        const chevron = append(container, $(".group-chevron"));
+        const icon = append(container, $(".group-icon"));
+        const labelGroup = append(container, $(".group-label-group"));
+        const label = append(labelGroup, $(".group-label"));
+        const infoIcon = append(labelGroup, $(".group-info"));
+        infoIcon.classList.add(...ThemeIcon.asClassNameArray(Codicon.info));
+        const count = append(container, $(".group-count"));
+        return {
+            container,
+            chevron,
+            icon,
+            label,
+            count,
+            infoIcon,
+            disposables,
+            elementDisposables
+        };
+    }
+    renderElement(element, _index, templateData) {
+        templateData.elementDisposables.clear();
+        templateData.chevron.className = "group-chevron";
+        templateData.chevron.classList.add(
+            ...ThemeIcon.asClassNameArray(element.collapsed ? Codicon.chevronRight : Codicon.chevronDown)
+        );
+        templateData.icon.className = "group-icon";
+        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, () => ({
+            content: element.description,
+            appearance: {
+                compact: true,
+                skipFadeInAnimation: true
+            }
+        })));
+        templateData.container.classList.toggle("collapsed", element.collapsed);
+        templateData.container.classList.toggle("has-previous-group", !element.isFirst);
+    }
+    disposeTemplate(templateData) {
+        templateData.elementDisposables.dispose();
+        templateData.disposables.dispose();
+    }
+}
+class PluginInstalledItemRenderer {
+    constructor() {
+        this.templateId = "pluginInstalledItem";
+    }
+    renderTemplate(container) {
+        container.classList.add("mcp-server-item");
+        const details = append(container, $(".mcp-server-details"));
+        const name = append(details, $(".mcp-server-name"));
+        const description = append(details, $(".mcp-server-description"));
+        const status = append(container, $(".mcp-server-status"));
+        return {
+            container,
+            name,
+            description,
+            status,
+            disposables: ( new DisposableStore())
+        };
+    }
+    renderElement(element, _index, templateData) {
+        templateData.disposables.clear();
+        templateData.name.textContent = element.item.name;
+        if (element.item.description) {
+            templateData.description.textContent = element.item.description;
+            templateData.description.style.display = "";
+        } else {
+            templateData.description.style.display = "none";
+        }
+        templateData.disposables.add(autorun(reader => {
+            const enabled = element.item.plugin.enabled.read(reader);
+            templateData.status.className = "mcp-server-status";
+            if (enabled) {
+                templateData.status.textContent = ( localize(5354, "Enabled"));
+                templateData.status.classList.add("running");
+            } else {
+                templateData.status.textContent = ( localize(5355, "Disabled"));
+                templateData.status.classList.add("stopped");
+            }
+        }));
+    }
+    disposeTemplate(templateData) {
+        templateData.disposables.dispose();
+    }
+}
+class PluginMarketplaceItemRenderer {
+    constructor(pluginInstallService) {
+        this.pluginInstallService = pluginInstallService;
+        this.templateId = "pluginMarketplaceItem";
+    }
+    renderTemplate(container) {
+        container.classList.add("mcp-server-item", "mcp-gallery-item");
+        const details = append(container, $(".mcp-server-details"));
+        const nameRow = append(details, $(".mcp-gallery-name-row"));
+        const name = append(nameRow, $(".mcp-server-name"));
+        const publisher = append(nameRow, $(".mcp-gallery-publisher"));
+        const description = append(details, $(".mcp-server-description"));
+        const actionContainer = append(container, $(".mcp-gallery-action"));
+        const installButton = ( new Button(actionContainer, {
+            ...defaultButtonStyles,
+            supportIcons: true
+        }));
+        installButton.element.classList.add("mcp-gallery-install-button");
+        const templateDisposables = ( new DisposableStore());
+        templateDisposables.add(installButton);
+        return {
+            container,
+            name,
+            publisher,
+            description,
+            installButton,
+            elementDisposables: ( new DisposableStore()),
+            templateDisposables
+        };
+    }
+    renderElement(element, _index, templateData) {
+        templateData.elementDisposables.clear();
+        templateData.name.textContent = element.item.name;
+        templateData.publisher.textContent = element.item.marketplace ? ( localize(5356, "by {0}", element.item.marketplace)) : "";
+        templateData.description.textContent = element.item.description || "";
+        templateData.installButton.label = ( localize(5357, "Install"));
+        templateData.installButton.enabled = true;
+        templateData.elementDisposables.add(templateData.installButton.onDidClick(async () => {
+            templateData.installButton.label = ( localize(5358, "Installing..."));
+            templateData.installButton.enabled = false;
+            try {
+                await this.pluginInstallService.installPlugin({
+                    name: element.item.name,
+                    description: element.item.description,
+                    version: "",
+                    sourceDescriptor: element.item.sourceDescriptor,
+                    source: element.item.source,
+                    marketplace: element.item.marketplace,
+                    marketplaceReference: element.item.marketplaceReference,
+                    marketplaceType: element.item.marketplaceType,
+                    readmeUri: element.item.readmeUri
+                });
+                templateData.installButton.label = ( localize(5359, "Installed"));
+            } catch (_e) {
+                templateData.installButton.label = ( localize(5357, "Install"));
+                templateData.installButton.enabled = true;
+            }
+        }));
+    }
+    disposeTemplate(templateData) {
+        templateData.elementDisposables.dispose();
+        templateData.templateDisposables.dispose();
+    }
+}
+function getInstalledPluginContextMenuActions(plugin, instantiationService) {
+    const groups = [];
+    if (plugin.enabled.get()) {
+        groups.push([instantiationService.createInstance(DisablePluginAction, plugin)]);
+    } else {
+        groups.push([instantiationService.createInstance(EnablePluginAction, plugin)]);
+    }
+    groups.push([instantiationService.createInstance(OpenPluginFolderAction, plugin)]);
+    if (plugin.fromMarketplace) {
+        groups.push([( new UninstallPluginAction(plugin))]);
+    }
+    return groups;
+}
+let EnablePluginAction = class EnablePluginAction extends Action {
+    constructor(plugin, agentPluginService) {
+        super("pluginListWidget.enable", ( localize(5360, "Enable")));
+        this.plugin = plugin;
+        this.agentPluginService = agentPluginService;
+    }
+    async run() {
+        this.agentPluginService.setPluginEnabled(this.plugin.uri, true);
+    }
+};
+EnablePluginAction = ( __decorate([( __param(1, IAgentPluginService))], EnablePluginAction));
+let DisablePluginAction = class DisablePluginAction extends Action {
+    constructor(plugin, agentPluginService) {
+        super("pluginListWidget.disable", ( localize(5361, "Disable")));
+        this.plugin = plugin;
+        this.agentPluginService = agentPluginService;
+    }
+    async run() {
+        this.agentPluginService.setPluginEnabled(this.plugin.uri, false);
+    }
+};
+DisablePluginAction = ( __decorate([( __param(1, IAgentPluginService))], DisablePluginAction));
+let OpenPluginFolderAction = class OpenPluginFolderAction extends Action {
+    constructor(plugin, commandService, openerService) {
+        super("pluginListWidget.openFolder", ( localize(5362, "Open Plugin Folder")));
+        this.plugin = plugin;
+        this.commandService = commandService;
+        this.openerService = openerService;
+    }
+    async run() {
+        try {
+            await this.commandService.executeCommand("revealFileInOS", this.plugin.uri);
+        } catch {
+            await this.openerService.open(dirname(this.plugin.uri));
+        }
+    }
+};
+OpenPluginFolderAction = ( __decorate([( __param(1, ICommandService)), ( __param(2, IOpenerService))], OpenPluginFolderAction));
+class UninstallPluginAction extends Action {
+    constructor(plugin) {
+        super("pluginListWidget.uninstall", ( localize(5363, "Uninstall")));
+        this.plugin = plugin;
+    }
+    async run() {
+        this.plugin.remove();
+    }
+}
+function installedPluginToItem(plugin, labelService) {
+    const name = plugin.label ?? basename(plugin.uri);
+    const description = plugin.fromMarketplace?.description ?? labelService.getUriLabel(dirname(plugin.uri), {
+        relative: true
+    });
+    const marketplace = plugin.fromMarketplace?.marketplace;
+    return {
+        kind: AgentPluginItemKind.Installed,
+        name,
+        description,
+        marketplace,
+        plugin
+    };
+}
+function marketplacePluginToItem(plugin) {
+    return {
+        kind: AgentPluginItemKind.Marketplace,
+        name: plugin.name,
+        description: plugin.description,
+        source: plugin.source,
+        sourceDescriptor: plugin.sourceDescriptor,
+        marketplace: plugin.marketplace,
+        marketplaceReference: plugin.marketplaceReference,
+        marketplaceType: plugin.marketplaceType,
+        readmeUri: plugin.readmeUri
+    };
+}
+let PluginListWidget = class PluginListWidget extends Disposable {
+    constructor(
+        instantiationService,
+        agentPluginService,
+        pluginMarketplaceService,
+        pluginInstallService,
+        openerService,
+        contextViewService,
+        contextMenuService,
+        hoverService,
+        labelService
+    ) {
+        super();
+        this.instantiationService = instantiationService;
+        this.agentPluginService = agentPluginService;
+        this.pluginMarketplaceService = pluginMarketplaceService;
+        this.pluginInstallService = pluginInstallService;
+        this.openerService = openerService;
+        this.contextViewService = contextViewService;
+        this.contextMenuService = contextMenuService;
+        this.hoverService = hoverService;
+        this.labelService = labelService;
+        this._onDidSelectPlugin = this._register(( new Emitter()));
+        this.onDidSelectPlugin = this._onDidSelectPlugin.event;
+        this.installedItems = [];
+        this.displayEntries = [];
+        this.marketplaceItems = [];
+        this.searchQuery = "";
+        this.browseMode = false;
+        this.collapsedGroups = ( new Set());
+        this.delayedFilter = ( new Delayer(200));
+        this.delayedMarketplaceSearch = ( new Delayer(400));
+        this.element = $(".mcp-list-widget");
+        this.create();
+        this._register({
+            dispose: () => {
+                this.marketplaceCts?.dispose();
+            }
+        });
+    }
+    create() {
+        this.searchAndButtonContainer = append(this.element, $(".list-search-and-button-container"));
+        const searchContainer = append(this.searchAndButtonContainer, $(".list-search-container"));
+        this.searchInput = this._register(( new InputBox(searchContainer, this.contextViewService, {
+            placeholder: ( localize(5364, "Type to search...")),
+            inputBoxStyles: defaultInputBoxStyles
+        })));
+        this._register(this.searchInput.onDidChange(() => {
+            this.searchQuery = this.searchInput.value;
+            if (this.browseMode) {
+                this.delayedMarketplaceSearch.trigger(() => this.queryMarketplace());
+            } else {
+                this.delayedFilter.trigger(() => this.filterPlugins());
+            }
+        }));
+        const buttonContainer = append(this.searchAndButtonContainer, $(".list-button-group"));
+        const browseButtonContainer = append(buttonContainer, $(".list-add-button-container"));
+        this.browseButton = this._register(( new Button(browseButtonContainer, {
+            ...defaultButtonStyles,
+            secondary: true,
+            supportIcons: true
+        })));
+        this.browseButton.label = `$(${Codicon.library.id}) ${( localize(5365, "Browse Marketplace"))}`;
+        this.browseButton.element.classList.add("list-add-button");
+        this._register(this.browseButton.onDidClick(() => {
+            this.toggleBrowseMode(!this.browseMode);
+        }));
+        this.backLink = append(this.element, $(".mcp-back-link"));
+        this.backLink.setAttribute("role", "button");
+        this.backLink.tabIndex = 0;
+        this.backLink.setAttribute("aria-label", ( localize(5366, "Back to installed plugins")));
+        const backIcon = append(this.backLink, $("span"));
+        backIcon.classList.add(...ThemeIcon.asClassNameArray(Codicon.arrowLeft));
+        const backText = append(this.backLink, $("span"));
+        backText.textContent = ( localize(5367, "Back to installed plugins"));
+        this._register(addDisposableListener(this.backLink, "click", () => {
+            this.toggleBrowseMode(false);
+        }));
+        this._register(addDisposableListener(this.backLink, "keydown", e => {
+            if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                this.toggleBrowseMode(false);
+            }
+        }));
+        this.backLink.style.display = "none";
+        this.emptyContainer = append(this.element, $(".mcp-empty-state"));
+        const emptyIcon = append(this.emptyContainer, $(".empty-icon"));
+        emptyIcon.classList.add(...ThemeIcon.asClassNameArray(pluginIcon));
+        this.emptyText = append(this.emptyContainer, $(".empty-text"));
+        this.emptySubtext = append(this.emptyContainer, $(".empty-subtext"));
+        this.listContainer = append(this.element, $(".mcp-list-container"));
+        this.sectionHeader = append(this.element, $(".section-footer"));
+        this.sectionDescription = append(this.sectionHeader, $("p.section-footer-description"));
+        this.sectionDescription.textContent = ( localize(
+            5368,
+            "Extend your AI agent with plugins that add commands, skills, agents, hooks, and MCP servers from reusable packages."
+        ));
+        this.sectionLink = append(this.sectionHeader, $("a.section-footer-link"));
+        this.sectionLink.textContent = ( localize(5369, "Learn more about agent plugins"));
+        this.sectionLink.href = "https://code.visualstudio.com/docs/copilot/chat/agent-plugins";
+        this._register(addDisposableListener(this.sectionLink, "click", e => {
+            e.preventDefault();
+            const href = this.sectionLink.href;
+            if (href) {
+                this.openerService.open(( URI.parse(href)));
+            }
+        }));
+        const delegate = ( new PluginItemDelegate());
+        const groupHeaderRenderer = ( new PluginGroupHeaderRenderer(this.hoverService));
+        const installedRenderer = ( new PluginInstalledItemRenderer());
+        const marketplaceRenderer = ( new PluginMarketplaceItemRenderer(this.pluginInstallService));
+        this.list = this._register(this.instantiationService.createInstance(
+            WorkbenchList,
+            "PluginManagementList",
+            this.listContainer,
+            delegate,
+            [groupHeaderRenderer, installedRenderer, marketplaceRenderer],
+            {
+                multipleSelectionSupport: false,
+                setRowLineHeight: false,
+                horizontalScrolling: false,
+                accessibilityProvider: {
+                    getAriaLabel(element) {
+                        if (element.type === "group-header") {
+                            return localize(
+                                5370,
+                                "{0}, {1} items, {2}",
+                                element.label,
+                                element.count,
+                                element.collapsed ? ( localize(5371, "collapsed")) : ( localize(5372, "expanded"))
+                            );
+                        }
+                        if (element.type === "marketplace-item") {
+                            return element.item.name;
+                        }
+                        return element.item.name;
+                    },
+                    getWidgetAriaLabel() {
+                        return localize(5373, "Plugins");
+                    }
+                },
+                openOnSingleClick: true,
+                identityProvider: {
+                    getId(element) {
+                        if (element.type === "group-header") {
+                            return element.id;
+                        }
+                        if (element.type === "marketplace-item") {
+                            return `marketplace-${element.item.marketplaceReference.canonicalId}/${element.item.source}`;
+                        }
+                        return ( element.item.plugin.uri.toString());
+                    }
+                }
+            }
+        ));
+        this._register(this.list.onDidOpen(e => {
+            if (e.element) {
+                if (e.element.type === "group-header") {
+                    this.toggleGroup(e.element);
+                } else if (e.element.type === "plugin-item") {
+                    this._onDidSelectPlugin.fire(e.element.item);
+                } else if (e.element.type === "marketplace-item") {
+                    this._onDidSelectPlugin.fire(e.element.item);
+                }
+            }
+        }));
+        this._register(this.list.onContextMenu(e => this.onContextMenu(e)));
+        this._register(autorun(reader => {
+            this.agentPluginService.allPlugins.read(reader);
+            if (!this.browseMode) {
+                this.refresh();
+            }
+        }));
+        this._register(this.pluginMarketplaceService.onDidChangeMarketplaces(() => {
+            if (!this.browseMode) {
+                this.refresh();
+            }
+        }));
+        void this.refresh();
+    }
+    async refresh() {
+        if (this.browseMode) {
+            await this.queryMarketplace();
+        } else {
+            this.filterPlugins();
+        }
+    }
+    toggleBrowseMode(browse) {
+        this.browseMode = browse;
+        this.searchInput.value = "";
+        this.searchQuery = "";
+        this.backLink.style.display = browse ? "" : "none";
+        this.browseButton.element.parentElement.style.display = browse ? "none" : "";
+        this.searchInput.setPlaceHolder(browse ? ( localize(5374, "Search plugin marketplace...")) : ( localize(5364, "Type to search...")));
+        if (browse) {
+            void this.queryMarketplace();
+        } else {
+            this.marketplaceCts?.dispose(true);
+            this.marketplaceItems = [];
+            this.filterPlugins();
+        }
+    }
+    async queryMarketplace() {
+        this.marketplaceCts?.dispose(true);
+        const cts = this.marketplaceCts = ( new CancellationTokenSource());
+        this.emptyContainer.style.display = "flex";
+        this.listContainer.style.display = "none";
+        this.emptyText.textContent = ( localize(5375, "Loading marketplace..."));
+        this.emptySubtext.textContent = "";
+        try {
+            const plugins = await this.pluginMarketplaceService.fetchMarketplacePlugins(cts.token);
+            if (cts.token.isCancellationRequested) {
+                return;
+            }
+            const query = this.searchQuery.toLowerCase().trim();
+            const filtered = query ? plugins.filter(
+                p => p.name.toLowerCase().includes(query) || p.description.toLowerCase().includes(query)
+            ) : plugins;
+            const installedUris = ( new Set(( this.agentPluginService.allPlugins.get().map(p => ( p.uri.toString())))));
+            this.marketplaceItems = ( filtered.filter(p => {
+                const expectedUri = this.pluginInstallService.getPluginInstallUri(p);
+                return !( installedUris.has(( expectedUri.toString())));
+            }).map(marketplacePluginToItem));
+            this.updateMarketplaceList();
+        } catch {
+            if (!cts.token.isCancellationRequested) {
+                this.marketplaceItems = [];
+                this.emptyContainer.style.display = "flex";
+                this.listContainer.style.display = "none";
+                this.emptyText.textContent = ( localize(5376, "Unable to load marketplace"));
+                this.emptySubtext.textContent = ( localize(5377, "Check your connection and try again"));
+            }
+        }
+    }
+    updateMarketplaceList() {
+        if (this.marketplaceItems.length === 0) {
+            this.emptyContainer.style.display = "flex";
+            this.listContainer.style.display = "none";
+            if (this.searchQuery.trim()) {
+                this.emptyText.textContent = ( localize(5378, "No plugins match '{0}'", this.searchQuery));
+                this.emptySubtext.textContent = ( localize(5379, "Try a different search term"));
+            } else {
+                this.emptyText.textContent = ( localize(5380, "No plugins available"));
+                this.emptySubtext.textContent = "";
+            }
+        } else {
+            this.emptyContainer.style.display = "none";
+            this.listContainer.style.display = "";
+        }
+        const entries = ( this.marketplaceItems.map(item => ({
+            type: "marketplace-item",
+            item
+        })));
+        this.list.splice(0, this.list.length, entries);
+    }
+    filterPlugins() {
+        const query = this.searchQuery.toLowerCase().trim();
+        const allPlugins = this.agentPluginService.allPlugins.get();
+        this.installedItems = ( allPlugins.map(p => installedPluginToItem(p, this.labelService))).filter(
+            item => !query || item.name.toLowerCase().includes(query) || item.description.toLowerCase().includes(query)
+        );
+        if (this.installedItems.length === 0) {
+            this.emptyContainer.style.display = "flex";
+            this.listContainer.style.display = "none";
+            if (this.searchQuery.trim()) {
+                this.emptyText.textContent = ( localize(5381, "No plugins match '{0}'", this.searchQuery));
+                this.emptySubtext.textContent = ( localize(5379, "Try a different search term"));
+            } else {
+                this.emptyText.textContent = ( localize(5382, "No plugins installed"));
+                this.emptySubtext.textContent = ( localize(5383, "Browse the marketplace to discover and install plugins"));
+            }
+        } else {
+            this.emptyContainer.style.display = "none";
+            this.listContainer.style.display = "";
+        }
+        const enabledPlugins = this.installedItems.filter(item => item.plugin.enabled.get());
+        const disabledPlugins = this.installedItems.filter(item => !item.plugin.enabled.get());
+        const entries = [];
+        let isFirst = true;
+        if (enabledPlugins.length > 0) {
+            const collapsed = ( this.collapsedGroups.has("enabled"));
+            entries.push({
+                type: "group-header",
+                id: "plugin-group-enabled",
+                group: "enabled",
+                label: ( localize(5384, "Enabled")),
+                icon: pluginIcon,
+                count: enabledPlugins.length,
+                isFirst,
+                description: ( localize(
+                    5385,
+                    "Plugins that are currently active and providing commands, skills, agents, and other capabilities."
+                )),
+                collapsed
+            });
+            if (!collapsed) {
+                for (const item of enabledPlugins) {
+                    entries.push({
+                        type: "plugin-item",
+                        item
+                    });
+                }
+            }
+            isFirst = false;
+        }
+        if (disabledPlugins.length > 0) {
+            const collapsed = ( this.collapsedGroups.has("disabled"));
+            entries.push({
+                type: "group-header",
+                id: "plugin-group-disabled",
+                group: "disabled",
+                label: ( localize(5386, "Disabled")),
+                icon: pluginIcon,
+                count: disabledPlugins.length,
+                isFirst,
+                description: ( localize(
+                    5387,
+                    "Plugins that are installed but currently disabled. Enable them to use their capabilities."
+                )),
+                collapsed
+            });
+            if (!collapsed) {
+                for (const item of disabledPlugins) {
+                    entries.push({
+                        type: "plugin-item",
+                        item
+                    });
+                }
+            }
+        }
+        this.displayEntries = entries;
+        this.list.splice(0, this.list.length, this.displayEntries);
+    }
+    toggleGroup(entry) {
+        if (( this.collapsedGroups.has(entry.group))) {
+            this.collapsedGroups.delete(entry.group);
+        } else {
+            this.collapsedGroups.add(entry.group);
+        }
+        this.filterPlugins();
+    }
+    layout(height, width) {
+        const sectionFooterHeight = this.sectionHeader.offsetHeight || 0;
+        const searchBarHeight = this.searchAndButtonContainer.offsetHeight || 52;
+        const backLinkHeight = this.browseMode ? (this.backLink.offsetHeight || 28) : 0;
+        const listHeight = height - sectionFooterHeight - searchBarHeight - backLinkHeight;
+        this.listContainer.style.height = `${Math.max(0, listHeight)}px`;
+        this.list.layout(Math.max(0, listHeight), width);
+        if (sectionFooterHeight === 0) {
+            getWindow(this.listContainer).requestAnimationFrame(() => {
+                if (this._store.isDisposed) {
+                    return;
+                }
+                const actualFooterHeight = this.sectionHeader.offsetHeight;
+                if (actualFooterHeight > 0) {
+                    const correctedHeight = height - actualFooterHeight - searchBarHeight - backLinkHeight;
+                    this.listContainer.style.height = `${Math.max(0, correctedHeight)}px`;
+                    this.list.layout(Math.max(0, correctedHeight), width);
+                }
+            });
+        }
+    }
+    focusSearch() {
+        this.searchInput.focus();
+    }
+    focus() {
+        this.list.domFocus();
+        if (this.list.length > 0) {
+            this.list.setFocus([0]);
+        }
+    }
+    onContextMenu(e) {
+        if (!e.element || e.element.type !== "plugin-item") {
+            return;
+        }
+        const entry = e.element;
+        const disposables = ( new DisposableStore());
+        const groups = getInstalledPluginContextMenuActions(entry.item.plugin, this.instantiationService);
+        const actions = [];
+        for (const menuActions of groups) {
+            for (const menuAction of menuActions) {
+                actions.push(menuAction);
+                if (isDisposable(menuAction)) {
+                    disposables.add(menuAction);
+                }
+            }
+            actions.push(( new Separator()));
+        }
+        if (actions.length > 0 && actions[actions.length - 1] instanceof Separator) {
+            actions.pop();
+        }
+        this.contextMenuService.showContextMenu({
+            getAnchor: () => e.anchor,
+            getActions: () => actions,
+            onHide: () => disposables.dispose()
+        });
+    }
+};
+PluginListWidget = ( __decorate([( __param(0, IInstantiationService)), ( __param(1, IAgentPluginService)), ( __param(2, IPluginMarketplaceService)), ( __param(3, IPluginInstallService)), ( __param(4, IOpenerService)), ( __param(5, IContextViewService)), ( __param(6, IContextMenuService)), ( __param(7, IHoverService)), ( __param(8, ILabelService))], PluginListWidget));
+
+export { PluginListWidget };