@codingame/monaco-vscode-api 37.1.0 → 37.3.0

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

@@ -0,0 +1,2205 @@
+
+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, clearNode, addDisposableGenericMouseDownListener, EventHelper, DisposableResizeObserver, getWindow, createTextNode, addDisposableListener, EventType, scheduleAtNextAnimationFrame } from '../../../../../base/browser/dom.js';
+import { DisposableStore, Disposable, MutableDisposable, isDisposable } from '../../../../../base/common/lifecycle.js';
+import { Emitter } from '../../../../../base/common/event.js';
+import { localize } from '../../../../../nls.js';
+import { IInstantiationService } from '../../../../../platform/instantiation/common/instantiation.js';
+import { WorkbenchList } from '../../../../../platform/list/browser/listService.js';
+import { ThemeIcon } from '../../../../../base/common/themables.js';
+import { Codicon } from '../../../../../base/common/codicons.js';
+import { Button, ButtonWithDropdown } from '../../../../../base/browser/ui/button/button.js';
+import { defaultCheckboxStyles, defaultButtonStyles, getButtonStyles, defaultInputBoxStyles } from '../../../../../platform/theme/browser/defaultStyles.js';
+import '../../../../../base/common/observableInternal/index.js';
+import { IOpenerService } from '../../../../../platform/opener/common/opener.service.js';
+import { URI } from '../../../../../base/common/uri.js';
+import { InputBox, MessageType } from '../../../../../base/browser/ui/inputbox/inputBox.js';
+import { IContextViewService, IContextMenuService } from '../../../../../platform/contextview/browser/contextView.service.js';
+import { ICommandService } from '../../../../../platform/commands/common/commands.service.js';
+import { CancellationTokenSource } from '../../../../../base/common/cancellation.js';
+import { Delayer } from '../../../../../base/common/async.js';
+import { Action, Separator } from '../../../../../base/common/actions.js';
+import { isEqual, basename, dirname } from '../../../../../base/common/resources.js';
+import { IHoverService } from '../../../../../platform/hover/browser/hover.service.js';
+import { isWeb } from '../../../../../base/common/platform.js';
+import { IAgentPluginService } from '../../common/plugins/agentPluginService.service.js';
+import { isContributionEnabled, ContributionEnablementState } from '../../common/enablement.js';
+import { isPluginPolicyBlocked, getInstalledPluginContextMenuActions } from '../agentPluginActions.js';
+import { IPluginMarketplaceService } from '../../common/plugins/pluginMarketplaceService.service.js';
+import { IPluginInstallService } from '../../common/plugins/pluginInstallService.service.js';
+import { AgentPluginItemKind } from '../agentPluginEditor/agentPluginItems.js';
+import { formatDisplayName } from './aiCustomizationListWidget.js';
+import { ILabelService } from '../../../../../platform/label/common/label.service.js';
+import { CUSTOMIZATION_GROUP_HEADER_HEIGHT, CUSTOMIZATION_GROUP_HEADER_HEIGHT_WITH_SEPARATOR, CustomizationGroupHeaderRenderer } from './customizationGroupHeaderRenderer.js';
+import { getCustomizationDisabledLabel, isPluginCustomizationItem } from '../../common/customizationHarnessService.js';
+import { ICustomizationHarnessService } from '../../common/customizationHarnessService.service.js';
+import { IConfigurationService } from '../../../../../platform/configuration/common/configuration.service.js';
+import { ChatConfiguration } from '../../common/constants.js';
+import { IAICustomizationItemsModel } from './aiCustomizationItemsModel.service.js';
+import { UpdateAgentPluginsCommandId } from '../chat.js';
+import { Switch } from '../../../../../base/browser/ui/toggle/switch.js';
+import { Checkbox } from '../../../../../base/browser/ui/toggle/toggle.js';
+import { INotificationService } from '../../../../../platform/notification/common/notification.service.js';
+import { getErrorMessage } from '../../../../../base/common/errors.js';
+import { getPluginInclusionLabel } from './aiCustomizationPresentation.js';
+import { status } from '../../../../../base/browser/ui/aria/aria.js';
+import { setVirtualizedRowActionsTabbable, createCustomizationCardPrimaryAction, setupCollapsibleSection, CustomizationCardListController, layoutVirtualizedSections, getVirtualizedSectionMinimumHeight, layoutVirtualizedSectionList, renderVirtualizedSectionLoadingPlaceholder } from './customizationCardList.js';
+import { DomScrollableElement } from '../../../../../base/browser/ui/scrollbar/scrollableElement.js';
+import { ScrollbarVisibility } from '../../../../../base/common/scrollable.js';
+import { truncateToFirstLine } from './aiCustomizationListWidgetUtils.js';
+import { autorun } from '../../../../../base/common/observableInternal/reactions/autorun.js';
+import { derived } from '../../../../../base/common/observableInternal/observables/derived.js';
+
+registerCss(aiCustomizationManagement, 1);
+const $ = $$1;
+const PLUGIN_ITEM_HEIGHT = 66;
+const PLUGIN_MARKETPLACE_ITEM_HEIGHT = 68;
+class PluginMarketplaceSnapshotModel {
+    constructor() {
+        this._state = "uninitialized";
+        this._items = [];
+    }
+    get state() {
+        return this._state;
+    }
+    get items() {
+        return this._items;
+    }
+    beginLoading() {
+        if (this._state !== "uninitialized") {
+            return false;
+        }
+        this._state = "loading";
+        return true;
+    }
+    complete(items) {
+        this._items = items;
+        this._state = "loaded";
+    }
+    fail() {
+        this._items = [];
+        this._state = "failed";
+    }
+    reset() {
+        this._items = [];
+        this._state = "uninitialized";
+    }
+}
+function shouldLoadPluginMarketplaceSnapshot(visible, state, marketplaceAvailable) {
+    return visible && state === "uninitialized" && marketplaceAvailable;
+}
+function isCurrentPluginMarketplaceRequest(
+    requestQuery,
+    currentQuery,
+    requestBrowseMode,
+    currentBrowseMode,
+    isActiveRequest,
+    isCancellationRequested
+) {
+    return isActiveRequest && !isCancellationRequested && requestQuery === currentQuery && requestBrowseMode === currentBrowseMode;
+}
+class PluginItemDelegate {
+    getHeight(element) {
+        if (element.type === "group-header") {
+            return element.isFirst ? CUSTOMIZATION_GROUP_HEADER_HEIGHT : CUSTOMIZATION_GROUP_HEADER_HEIGHT_WITH_SEPARATOR;
+        }
+        if (element.type === "search-header") {
+            return 32;
+        }
+        if (element.type === "marketplace-item") {
+            return PLUGIN_MARKETPLACE_ITEM_HEIGHT;
+        }
+        return PLUGIN_ITEM_HEIGHT;
+    }
+    getTemplateId(element) {
+        if (element.type === "group-header") {
+            return "pluginGroupHeader";
+        }
+        if (element.type === "search-header") {
+            return "pluginSearchHeader";
+        }
+        if (element.type === "marketplace-item") {
+            return PLUGIN_MARKETPLACE_ITEM_TEMPLATE_ID;
+        }
+        if (element.type === "remote-item") {
+            return "pluginRemoteItem";
+        }
+        return "pluginInstalledItem";
+    }
+}
+class PluginSearchHeaderRenderer {
+    constructor() {
+        this.templateId = "pluginSearchHeader";
+    }
+    renderTemplate(container) {
+        container.classList.add("plugin-search-header");
+        const label = append(container, $(".plugin-search-header-label"));
+        return {
+            container,
+            label
+        };
+    }
+    renderElement(element, _index, templateData) {
+        templateData.label.textContent = element.label;
+        templateData.container.classList.toggle("available-to-install", element.id === "plugin-search-available");
+    }
+    disposeTemplate() {}
+}
+class PluginInstalledItemRenderer {
+    constructor(_harnessService, _renderActions, _showSyncCheckbox = true) {
+        this._harnessService = _harnessService;
+        this._renderActions = _renderActions;
+        this._showSyncCheckbox = _showSyncCheckbox;
+        this.templateId = "pluginInstalledItem";
+        this._templates = ( new Set());
+        this._focusedIndex = -1;
+    }
+    renderTemplate(container) {
+        container.classList.add("plugin-list-item", "plugin-installed-item");
+        const syncCheckboxContainer = append(container, $(".item-sync-checkbox"));
+        const details = append(container, $(".plugin-list-item-details"));
+        const nameRow = append(details, $(".plugin-list-item-name-row"));
+        const name = append(nameRow, $(".plugin-list-item-name"));
+        const source = append(nameRow, $(".inline-badge.plugin-source-badge"));
+        const description = append(details, $(".plugin-list-item-description"));
+        const metadata = append(details, $(".plugin-list-item-metadata"));
+        const actions = append(container, $(".plugin-list-item-action"));
+        const template = {
+            container,
+            syncCheckboxContainer,
+            name,
+            source,
+            description,
+            metadata,
+            actions,
+            disposables: ( new DisposableStore()),
+            currentIndex: -1
+        };
+        this._templates.add(template);
+        return template;
+    }
+    renderElement(element, index, templateData) {
+        templateData.disposables.clear();
+        templateData.currentIndex = index;
+        templateData.name.textContent = formatDisplayName(element.item.name);
+        templateData.source.textContent = element.item.marketplace ? "" : ( localize(9049, "Local"));
+        templateData.source.title = element.item.marketplace ? "" : ( localize(9050, "Installed from a local source"));
+        templateData.source.style.display = element.item.marketplace ? "none" : "";
+        if (element.item.description) {
+            templateData.description.textContent = truncateToFirstLine(element.item.description);
+            templateData.description.style.display = "";
+        } else {
+            templateData.description.style.display = "none";
+        }
+        templateData.metadata.textContent = getInstalledPluginMetadata(element.item);
+        templateData.metadata.style.display = templateData.metadata.textContent ? "" : "none";
+        templateData.disposables.add(autorun(reader => {
+            const enabled = isContributionEnabled(element.item.plugin.enablement.read(reader));
+            templateData.container.classList.toggle("disabled", !enabled);
+        }));
+        const syncProvider = this._showSyncCheckbox ? this._harnessService.getActiveDescriptor().syncProvider : undefined;
+        if (syncProvider) {
+            templateData.syncCheckboxContainer.style.display = "";
+            const pluginUri = element.item.plugin.uri;
+            const disabled = syncProvider.isDisabled(pluginUri);
+            const title = disabled ? ( localize(9051, "Enable {0} for sync", element.item.name)) : ( localize(9052, "Disable {0} from sync", element.item.name));
+            const checkbox = templateData.disposables.add(( new Checkbox(title, !disabled, defaultCheckboxStyles)));
+            templateData.syncCheckboxContainer.replaceChildren(checkbox.domNode);
+            templateData.disposables.add(checkbox.onChange(() => {
+                syncProvider.setDisabled(pluginUri, !checkbox.checked);
+            }));
+        } else {
+            templateData.syncCheckboxContainer.style.display = "none";
+            templateData.syncCheckboxContainer.replaceChildren();
+        }
+        clearNode(templateData.actions);
+        this._renderActions(
+            element.item,
+            templateData.container,
+            templateData.actions,
+            templateData.disposables
+        );
+        setVirtualizedRowActionsTabbable(templateData.actions, index === this._focusedIndex);
+    }
+    setFocusedIndex(index) {
+        this._focusedIndex = index;
+        for (const template of this._templates) {
+            setVirtualizedRowActionsTabbable(template.actions, template.currentIndex === index);
+        }
+    }
+    disposeTemplate(templateData) {
+        this._templates.delete(templateData);
+        templateData.disposables.dispose();
+    }
+}
+class PluginRemoteItemRenderer {
+    constructor(_renderActions) {
+        this._renderActions = _renderActions;
+        this.templateId = "pluginRemoteItem";
+        this._templates = ( new Set());
+        this._focusedIndex = -1;
+    }
+    renderTemplate(container) {
+        container.classList.add("plugin-list-item", "plugin-remote-item");
+        const details = append(container, $(".plugin-list-item-details"));
+        const nameRow = append(details, $(".plugin-list-item-name-row"));
+        const name = append(nameRow, $("span"));
+        const badge = append(nameRow, $(".inline-badge.item-badge"));
+        const description = append(details, $(".plugin-list-item-description"));
+        const metadata = append(details, $(".plugin-list-item-metadata"));
+        const status = append(container, $(".plugin-list-item-status"));
+        const actions = append(container, $(".plugin-list-item-action"));
+        const template = {
+            container,
+            name,
+            badge,
+            description,
+            metadata,
+            status,
+            actions,
+            disposables: ( new DisposableStore()),
+            currentIndex: -1
+        };
+        this._templates.add(template);
+        return template;
+    }
+    renderElement(element, index, templateData) {
+        templateData.disposables.clear();
+        templateData.currentIndex = index;
+        templateData.name.textContent = formatDisplayName(element.item.name);
+        if (element.item.badge) {
+            templateData.badge.textContent = element.item.badge;
+            templateData.badge.style.display = "";
+            templateData.badge.title = element.item.badgeTooltip ?? "";
+        } else {
+            templateData.badge.textContent = "";
+            templateData.badge.style.display = "none";
+            templateData.badge.title = "";
+        }
+        if (element.item.description) {
+            templateData.description.textContent = truncateToFirstLine(element.item.description);
+            templateData.description.style.display = "";
+        } else {
+            templateData.description.textContent = "";
+            templateData.description.style.display = "none";
+        }
+        templateData.container.classList.toggle("disabled", element.item.enabled === false);
+        templateData.metadata.textContent = ( localize(9053, "Remote agent host"));
+        templateData.status.className = "plugin-list-item-status";
+        if (element.item.enabled === false) {
+            templateData.status.textContent = getRemotePluginDisabledLabel(element.item);
+            templateData.status.classList.add("disabled");
+        } else {
+            switch (element.item.status) {
+            case "loading":
+                templateData.status.textContent = getRemotePluginStatusLabel(element.item);
+                templateData.status.classList.add("running");
+                break;
+            case "loaded":
+                templateData.status.textContent = getRemotePluginStatusLabel(element.item);
+                templateData.status.classList.add("running");
+                break;
+            case "degraded":
+                templateData.status.textContent = getRemotePluginStatusLabel(element.item);
+                templateData.status.classList.add("disabled");
+                break;
+            case "error":
+                templateData.status.textContent = getRemotePluginStatusLabel(element.item);
+                templateData.status.classList.add("disabled");
+                break;
+            default:
+                templateData.status.textContent = "";
+                break;
+            }
+        }
+        clearNode(templateData.actions);
+        this._renderActions(element.item, templateData.actions, templateData.disposables);
+        setVirtualizedRowActionsTabbable(templateData.actions, index === this._focusedIndex);
+    }
+    setFocusedIndex(index) {
+        this._focusedIndex = index;
+        for (const template of this._templates) {
+            setVirtualizedRowActionsTabbable(template.actions, template.currentIndex === index);
+        }
+    }
+    disposeTemplate(templateData) {
+        this._templates.delete(templateData);
+        templateData.disposables.dispose();
+    }
+}
+function getRemotePluginDisabledLabel(item) {
+    return getCustomizationDisabledLabel(item.disabledReason);
+}
+const PLUGIN_MARKETPLACE_ITEM_TEMPLATE_ID = "pluginMarketplaceItem";
+class PluginMarketplaceItemRenderer {
+    constructor(
+        pluginInstallService,
+        agentPluginService,
+        pluginMarketplaceService,
+        notificationService,
+        showRecommendedBadge = true
+    ) {
+        this.pluginInstallService = pluginInstallService;
+        this.agentPluginService = agentPluginService;
+        this.pluginMarketplaceService = pluginMarketplaceService;
+        this.notificationService = notificationService;
+        this.showRecommendedBadge = showRecommendedBadge;
+        this.templateId = PLUGIN_MARKETPLACE_ITEM_TEMPLATE_ID;
+        this._templates = ( new Set());
+        this._focusedIndex = -1;
+    }
+    renderTemplate(container) {
+        container.classList.add("plugin-list-item", "plugin-marketplace-item");
+        const details = append(container, $(".plugin-list-item-details"));
+        const nameRow = append(details, $(".plugin-list-item-name-row"));
+        const name = append(nameRow, $(".plugin-list-item-name"));
+        const recommendedBadge = append(nameRow, $(".inline-badge.plugin-recommended-badge"));
+        recommendedBadge.textContent = ( localize(9054, "Recommended"));
+        const description = append(details, $(".plugin-list-item-description"));
+        const publisher = append(details, $(".plugin-list-item-source"));
+        const metadata = append(details, $(".plugin-list-item-metadata"));
+        const actionContainer = append(container, $(".plugin-list-item-action"));
+        const installButton = ( new Button(actionContainer, defaultButtonStyles));
+        installButton.element.classList.add("plugin-list-item-install-button");
+        const templateDisposables = ( new DisposableStore());
+        templateDisposables.add(installButton);
+        templateDisposables.add(
+            addDisposableGenericMouseDownListener(installButton.element, event => EventHelper.stop(event, true))
+        );
+        const template = {
+            container,
+            name,
+            recommendedBadge,
+            publisher,
+            description,
+            metadata,
+            installButton,
+            elementDisposables: ( new DisposableStore()),
+            templateDisposables,
+            currentIndex: -1
+        };
+        this._templates.add(template);
+        return template;
+    }
+    renderElement(element, index, templateData) {
+        templateData.elementDisposables.clear();
+        templateData.currentIndex = index;
+        templateData.name.textContent = element.item.name;
+        templateData.recommendedBadge.style.display = this.showRecommendedBadge && this.isRecommended(element.item) ? "" : "none";
+        templateData.publisher.textContent = "";
+        templateData.publisher.style.display = "none";
+        templateData.description.textContent = element.item.description || "";
+        templateData.metadata.textContent = "";
+        templateData.metadata.style.display = "none";
+        const installUri = this.pluginInstallService.getPluginInstallUri({
+            name: element.item.name,
+            description: element.item.description,
+            version: element.item.version ?? "",
+            sourceDescriptor: element.item.sourceDescriptor,
+            source: element.item.source,
+            marketplace: element.item.marketplace,
+            marketplaceReference: element.item.marketplaceReference,
+            marketplaceType: element.item.marketplaceType
+        });
+        const isAlreadyInstalled = ( this.agentPluginService.plugins.get().some(p => isEqual(p.uri, installUri)));
+        if (isAlreadyInstalled) {
+            templateData.installButton.label = ( localize(9055, "Installed"));
+            templateData.installButton.enabled = false;
+            this.updateInstallButtonTabbability(templateData);
+            return;
+        }
+        templateData.installButton.label = ( localize(9056, "Install"));
+        templateData.installButton.enabled = true;
+        this.updateInstallButtonTabbability(templateData);
+        templateData.elementDisposables.add(templateData.installButton.onDidClick(async event => {
+            EventHelper.stop(event, true);
+            templateData.installButton.label = ( localize(9057, "Installing..."));
+            templateData.installButton.enabled = false;
+            try {
+                await this.pluginInstallService.installPlugin({
+                    name: element.item.name,
+                    description: element.item.description,
+                    version: element.item.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(9055, "Installed"));
+                this.updateInstallButtonTabbability(templateData);
+            } catch (error) {
+                templateData.installButton.label = ( localize(9056, "Install"));
+                templateData.installButton.enabled = true;
+                this.updateInstallButtonTabbability(templateData);
+                this.notificationService.error(( localize(9058, "Unable to install plugin: {0}", getErrorMessage(error))));
+            }
+        }));
+    }
+    setFocusedIndex(index) {
+        this._focusedIndex = index;
+        for (const template of this._templates) {
+            this.updateInstallButtonTabbability(template);
+        }
+    }
+    updateInstallButtonTabbability(templateData) {
+        templateData.installButton.element.tabIndex = templateData.installButton.enabled && templateData.currentIndex === this._focusedIndex ? 0 : -1;
+    }
+    isRecommended(item) {
+        return ( this.pluginMarketplaceService.recommendedPlugins.get().has(getMarketplaceRecommendationKey(item)));
+    }
+    disposeTemplate(templateData) {
+        this._templates.delete(templateData);
+        templateData.elementDisposables.dispose();
+        templateData.templateDisposables.dispose();
+    }
+}
+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,
+        version: plugin.version,
+        source: plugin.source,
+        sourceDescriptor: plugin.sourceDescriptor,
+        marketplace: plugin.marketplace,
+        marketplaceReference: plugin.marketplaceReference,
+        marketplaceType: plugin.marketplaceType,
+        readmeUri: plugin.readmeUri
+    };
+}
+function getMarketplaceRecommendationKey(plugin) {
+    return `${plugin.name}@${plugin.marketplace}`;
+}
+function compareInstalledPluginItems(a, b) {
+    return formatDisplayName(a.name).localeCompare(formatDisplayName(b.name));
+}
+function getInstalledPluginMetadata(item) {
+    const metadata = [];
+    const contributionSummary = getInstalledPluginContributionSummary(item);
+    if (contributionSummary) {
+        metadata.push(contributionSummary);
+    }
+    return metadata.join(" • ");
+}
+function getInstalledPluginContributionEntries(item) {
+    const plugin = item.plugin;
+    const entries = [];
+    appendContributionEntry(
+        entries,
+        formatContributionLabel(plugin.agents.get().length, ( localize(9059, "1 agent")), ( localize(9060, "{0} agents", plugin.agents.get().length))),
+        plugin.agents.get()
+    );
+    appendContributionEntry(
+        entries,
+        formatContributionLabel(plugin.skills.get().length, ( localize(9061, "1 skill")), ( localize(9062, "{0} skills", plugin.skills.get().length))),
+        plugin.skills.get()
+    );
+    appendContributionEntry(
+        entries,
+        formatContributionLabel(plugin.commands.get().length, ( localize(9063, "1 command")), ( localize(9064, "{0} commands", plugin.commands.get().length))),
+        plugin.commands.get()
+    );
+    appendContributionEntry(
+        entries,
+        formatContributionLabel(plugin.instructions.get().length, ( localize(9065, "1 instruction")), ( localize(9066, "{0} instructions", plugin.instructions.get().length))),
+        plugin.instructions.get()
+    );
+    appendContributionEntry(
+        entries,
+        formatContributionLabel(plugin.mcpServerDefinitions.get().length, ( localize(9067, "1 MCP server")), ( localize(9068, "{0} MCP servers", plugin.mcpServerDefinitions.get().length))),
+        plugin.mcpServerDefinitions.get().map(server => ({
+            name: server.name
+        }))
+    );
+    appendContributionEntry(entries, formatContributionLabel(plugin.hooks.get().length, ( localize(9069, "1 hook")), ( localize(9070, "{0} hooks", plugin.hooks.get().length))), plugin.hooks.get().map(hook => ({
+        name: hook.originalId,
+        description: ( localize(9071, "{0} commands", hook.hooks.length))
+    })));
+    return entries;
+}
+function appendContributionEntry(entries, label, items) {
+    if (label && items.length > 0) {
+        entries.push({
+            label,
+            items
+        });
+    }
+}
+function formatContributionLabel(count, singular, plural) {
+    if (count === 0) {
+        return undefined;
+    }
+    return count === 1 ? singular : plural;
+}
+function getRemotePluginStatusLabel(item) {
+    if (item.enabled === false) {
+        return getRemotePluginDisabledLabel(item);
+    }
+    switch (item.status) {
+    case "loading":
+        return localize(9072, "Loading");
+    case "loaded":
+        return localize(9073, "Loaded");
+    case "degraded":
+        return localize(9074, "Warning");
+    case "error":
+        return localize(9075, "Error");
+    default:
+        return "";
+    }
+}
+function getInstalledPluginContributionSummary(item) {
+    return getInstalledPluginContributionEntries(item).map(entry => entry.label).slice(0, 2).join(" • ");
+}
+function getToggledPluginEnablementState(state) {
+    switch (state) {
+    case ContributionEnablementState.EnabledWorkspace:
+        return ContributionEnablementState.DisabledWorkspace;
+    case ContributionEnablementState.DisabledWorkspace:
+        return ContributionEnablementState.EnabledWorkspace;
+    case ContributionEnablementState.EnabledProfile:
+        return ContributionEnablementState.DisabledProfile;
+    case ContributionEnablementState.DisabledProfile:
+        return ContributionEnablementState.EnabledProfile;
+    }
+}
+let PluginListWidget = class PluginListWidget extends Disposable {
+    constructor(
+        marketplaceBrowsingAvailable = !isWeb,
+        instantiationService,
+        agentPluginService,
+        pluginMarketplaceService,
+        pluginInstallService,
+        openerService,
+        contextViewService,
+        contextMenuService,
+        hoverService,
+        labelService,
+        commandService,
+        harnessService,
+        itemsModel,
+        configurationService,
+        notificationService
+    ) {
+        super();
+        this.marketplaceBrowsingAvailable = marketplaceBrowsingAvailable;
+        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.commandService = commandService;
+        this.harnessService = harnessService;
+        this.itemsModel = itemsModel;
+        this.configurationService = configurationService;
+        this.notificationService = notificationService;
+        this._onDidSelectPlugin = this._register(( new Emitter()));
+        this.onDidSelectPlugin = this._onDidSelectPlugin.event;
+        this._onDidChangeItemCount = this._register(( new Emitter()));
+        this.onDidChangeItemCount = this._onDidChangeItemCount.event;
+        this.disabledLinkListener = this._register(( new MutableDisposable()));
+        this.addDropdownActions = this._register(( new DisposableStore()));
+        this.cardDisposables = this._register(( new DisposableStore()));
+        this.pendingSectionLayout = this._register(( new MutableDisposable()));
+        this.cardListControllers = ( new WeakMap());
+        this.sectionLists = [];
+        this.collapsedSections = ( new Set());
+        this.installedItems = [];
+        this.remoteItems = [];
+        this.marketplaceItems = [];
+        this.marketplaceSnapshot = ( new PluginMarketplaceSnapshotModel());
+        this.searchQuery = "";
+        this.browseMode = false;
+        this.visible = false;
+        this.narrowLayout = false;
+        this.wideLayout = false;
+        this.lastHeight = 0;
+        this.lastWidth = 0;
+        this.lastHeaderHeight = 0;
+        this._layoutDeferred = false;
+        this.revealLastItemScheduler = this._register(( new MutableDisposable()));
+        this.collapsedGroups = ( new Set());
+        this.sectionScrollPositions = ( new Map());
+        this.delayedFilter = ( new Delayer(200));
+        this.delayedMarketplaceSearch = ( new Delayer(400));
+        this.filterGeneration = 0;
+        this.element = $(".mcp-list-widget.plugin-list-widget");
+        this.create();
+        const resizeObserver = this._register(new DisposableResizeObserver(
+            "PluginListWidget",
+            () => this.updateResponsiveLayout(this.element.offsetWidth),
+            getWindow(this.element)
+        ));
+        this._register(resizeObserver.observe(this.element));
+        this.updateAccessState();
+        this._register(this.configurationService.onDidChangeConfiguration(e => {
+            if (e.affectsConfiguration(ChatConfiguration.PluginsEnabled)) {
+                this.updateAccessState();
+            }
+        }));
+        this._register({
+            dispose: () => {
+                this.delayedFilter.cancel();
+                this.delayedMarketplaceSearch.cancel();
+                this.marketplaceCts?.dispose(true);
+                this.marketplaceCts = undefined;
+                this.marketplaceSnapshotCts?.dispose(true);
+                this.marketplaceSnapshotCts = undefined;
+            }
+        });
+    }
+    create() {
+        this.sectionTitleHeader = append(this.element, $(".section-title-header"));
+        const titleRow = append(this.sectionTitleHeader, $(".section-title-row"));
+        const sectionTitle = append(titleRow, $("h2.section-title"));
+        sectionTitle.textContent = ( localize(9076, "Plugins"));
+        const sectionTitleDescription = append(this.sectionTitleHeader, $("p.section-title-description"));
+        const sectionTitleDescriptionText = append(sectionTitleDescription, $("span.section-title-description-text"));
+        sectionTitleDescriptionText.textContent = ( localize(
+            9077,
+            "Extend your AI agent with plugins that add commands, skills, agents, hooks, and MCP servers from reusable packages."
+        ));
+        sectionTitleDescription.appendChild(createTextNode(" "));
+        this.sectionLink = append(sectionTitleDescription, $("a.section-title-link"));
+        this.sectionLink.textContent = ( localize(9078, "Learn more about agent plugins"));
+        this.sectionLink.href = "https://code.visualstudio.com/docs/agent-customization/agent-plugins?referrer=in-product";
+        this._register(addDisposableListener(this.sectionLink, "click", e => {
+            e.preventDefault();
+            const href = this.sectionLink.href;
+            if (href) {
+                this.openerService.open(( URI.parse(href)));
+            }
+        }));
+        const targetWindow = getWindow(this.element);
+        const headerObserver = this._register(
+            new DisposableResizeObserver("PluginListWidget.sectionTitleHeader", () => {
+                if (this.lastWidth <= 0 || this.lastHeight <= 0) {
+                    return;
+                }
+                const headerHeight = this.sectionTitleHeader.offsetHeight;
+                if (headerHeight === this.lastHeaderHeight) {
+                    return;
+                }
+                this.layout(this.lastHeight, this.lastWidth);
+            }, targetWindow)
+        );
+        this._register(headerObserver.observe(this.sectionTitleHeader));
+        this.marketplaceBackContainer = append(this.element, $(".plugin-marketplace-back-container"));
+        this.marketplaceBackContainer.style.display = "none";
+        const backToInstalledLabel = ( localize(9079, "Back to Installed"));
+        this.backButtonContainer = append(this.marketplaceBackContainer, $(".list-add-button-container"));
+        this.backButton = this._register(( new Button(this.backButtonContainer, {
+            ...getButtonStyles({
+                buttonSecondaryBackground: undefined,
+                buttonSecondaryForeground: undefined,
+                buttonSecondaryHoverBackground: undefined,
+                buttonSecondaryBorder: undefined
+            }),
+            secondary: true,
+            supportIcons: true,
+            title: backToInstalledLabel,
+            ariaLabel: backToInstalledLabel
+        })));
+        this.backButton.element.classList.add("list-add-button", "plugin-card-ghost-button");
+        this.backButton.label = `$(${Codicon.arrowLeft.id}) ${backToInstalledLabel}`;
+        this._register(this.backButton.onDidClick(() => this.toggleBrowseMode(false)));
+        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(9080, "Type to search...")),
+            inputBoxStyles: defaultInputBoxStyles
+        })));
+        this._register(this.searchInput.onDidChange(() => {
+            this.searchQuery = this.searchInput.value;
+            this.marketplaceCts?.dispose(true);
+            this.marketplaceCts = undefined;
+            if (this.browseMode) {
+                this.delayedMarketplaceSearch.trigger(() => this.queryMarketplace());
+            } else if (this.searchQuery.trim()) {
+                this.delayedMarketplaceSearch.trigger(() => this.queryPluginSearch());
+            } else {
+                this.delayedMarketplaceSearch.cancel();
+                this.marketplaceItems = [];
+                this.searchInput.hideMessage();
+                this.delayedFilter.trigger(() => this.filterPlugins());
+            }
+        }));
+        this.buttonContainer = append(this.searchAndButtonContainer, $(".list-button-group"));
+        const browseButtonContainer = append(this.buttonContainer, $(".list-add-button-container"));
+        const browseMarketplaceLabel = ( localize(9081, "Browse Marketplace"));
+        this.browseButton = this._register(( new Button(browseButtonContainer, {
+            ...defaultButtonStyles,
+            secondary: true,
+            supportIcons: true,
+            title: browseMarketplaceLabel,
+            ariaLabel: browseMarketplaceLabel
+        })));
+        this.browseButton.element.classList.add("list-add-button");
+        browseButtonContainer.style.display = "none";
+        this.addButtonContainer = append(this.buttonContainer, $(".list-add-button-container"));
+        const addPluginLabel = ( localize(9082, "Add Plugin"));
+        this.addButtonSimple = this._register(( new Button(this.addButtonContainer, {
+            ...defaultButtonStyles,
+            secondary: true,
+            title: addPluginLabel,
+            ariaLabel: addPluginLabel
+        })));
+        this.addButtonSimple.element.classList.add("list-add-button");
+        this._register(this.addButtonSimple.onDidClick(() => this.runPrimaryAddAction()));
+        this.addButton = this._register(( new ButtonWithDropdown(this.addButtonContainer, {
+            ...defaultButtonStyles,
+            secondary: true,
+            contextMenuProvider: this.contextMenuService,
+            addPrimaryActionToDropdown: false,
+            actions: {
+                getActions: () => this.getAddDropdownActions()
+            },
+            title: addPluginLabel,
+            ariaLabel: addPluginLabel
+        })));
+        this.addButton.element.classList.add("list-add-button");
+        this._register(this.addButton.onDidClick(() => this.runPrimaryAddAction()));
+        const updatePluginsLabel = ( localize(9083, "Update Plugins"));
+        this.updatePluginsButton = this._register(( new Button(this.buttonContainer, {
+            ...defaultButtonStyles,
+            secondary: true,
+            supportIcons: true,
+            title: updatePluginsLabel,
+            ariaLabel: updatePluginsLabel
+        })));
+        this.updatePluginsButton.element.classList.add("list-icon-button");
+        this.updatePluginsButton.label = `$(${Codicon.refresh.id})`;
+        this._register(this.updatePluginsButton.onDidClick(() => this.runUpdatePluginsAction()));
+        this.emptyContainer = append(this.element, $(".mcp-empty-state"));
+        const emptyHeader = append(this.emptyContainer, $(".empty-state-header"));
+        this.emptyText = append(emptyHeader, $(".empty-text"));
+        this.emptySubtext = append(this.emptyContainer, $(".empty-subtext"));
+        this.disabledContainer = append(this.element, $(".mcp-disabled-state"));
+        const disabledHeader = append(this.disabledContainer, $(".empty-state-header"));
+        this.disabledIcon = append(disabledHeader, $(".empty-icon"));
+        const disabledText = append(disabledHeader, $(".empty-text"));
+        disabledText.textContent = ( localize(9084, "Plugins are disabled"));
+        this.disabledMessage = append(this.disabledContainer, $(".empty-subtext"));
+        this.cardContainer = $(".plugin-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("PluginListWidget.cardScrollable", () => this.cardScrollable.scanDomNode())
+        );
+        this._register(cardResizeObserver.observe(this.cardScrollableNode));
+        this.listContainer = append(this.element, $(".mcp-list-container"));
+        const delegate = ( new PluginItemDelegate());
+        const groupHeaderRenderer = ( new CustomizationGroupHeaderRenderer("pluginGroupHeader", this.hoverService));
+        const searchHeaderRenderer = ( new PluginSearchHeaderRenderer());
+        const installedRenderer = ( new PluginInstalledItemRenderer(
+            this.harnessService,
+            (item, container, actions, disposables) => this.renderInstalledListActions(item, container, actions, disposables)
+        ));
+        const remoteRenderer = ( new PluginRemoteItemRenderer(
+            (item, actions, disposables) => this.renderRemoteListActions(item, actions, disposables)
+        ));
+        const marketplaceRenderer = ( new PluginMarketplaceItemRenderer(
+            this.pluginInstallService,
+            this.agentPluginService,
+            this.pluginMarketplaceService,
+            this.notificationService
+        ));
+        this.list = this._register(
+            this.instantiationService.createInstance(WorkbenchList, "PluginManagementList", this.listContainer, delegate, [
+                groupHeaderRenderer,
+                searchHeaderRenderer,
+                installedRenderer,
+                remoteRenderer,
+                marketplaceRenderer
+            ], {
+                multipleSelectionSupport: false,
+                setRowLineHeight: false,
+                horizontalScrolling: false,
+                accessibilityProvider: {
+                    getAriaLabel: element => {
+                        if (element.type === "group-header") {
+                            return localize(
+                                9085,
+                                "{0}, {1} items, {2}",
+                                element.label,
+                                element.count,
+                                element.collapsed ? ( localize(9086, "collapsed")) : ( localize(9087, "expanded"))
+                            );
+                        }
+                        if (element.type === "search-header") {
+                            return element.label;
+                        }
+                        const name = formatDisplayName(element.item.name);
+                        const description = element.item.description ? truncateToFirstLine(element.item.description) : undefined;
+                        const nameAndDesc = description ? ( localize(9088, "{0}. {1}", name, description)) : name;
+                        if (element.type === "plugin-item") {
+                            const enabled = isContributionEnabled(element.item.plugin.enablement.get());
+                            const metadata = getInstalledPluginMetadata(element.item);
+                            const withMetadata = metadata ? ( localize(9089, "{0}. {1}", nameAndDesc, metadata)) : nameAndDesc;
+                            return enabled ? ( localize(9090, "{0}. Enabled", withMetadata)) : ( localize(9091, "{0}. Disabled", withMetadata));
+                        }
+                        if (element.type === "remote-item") {
+                            const status = getRemotePluginStatusLabel(element.item);
+                            return status ? ( localize(9092, "{0}. Remote agent host. Status: {1}", nameAndDesc, status)) : ( localize(9093, "{0}. Remote agent host", nameAndDesc));
+                        }
+                        if (element.type === "marketplace-item") {
+                            const recommended = ( this.pluginMarketplaceService.recommendedPlugins.get().has(getMarketplaceRecommendationKey(element.item)));
+                            const label = ( localize(9094, "{0}. From {1}", nameAndDesc, element.item.marketplace));
+                            return recommended ? ( localize(9095, "{0}. Recommended for this workspace", label)) : label;
+                        }
+                        return nameAndDesc;
+                    },
+                    getWidgetAriaLabel: () => {
+                        return localize(9096, "Plugins");
+                    }
+                },
+                openOnSingleClick: true,
+                identityProvider: {
+                    getId(element) {
+                        if (element.type === "group-header") {
+                            return element.id;
+                        }
+                        if (element.type === "search-header") {
+                            return element.id;
+                        }
+                        if (element.type === "marketplace-item") {
+                            return `marketplace-${element.item.marketplaceReference.canonicalId}/${element.item.source}`;
+                        }
+                        if (element.type === "remote-item") {
+                            return element.item.itemKey ?? `remote-${element.item.groupKey ?? "default"}-${( element.item.uri.toString())}`;
+                        }
+                        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 === "search-header")
+                    ; else if (e.element.type === "plugin-item") {
+                    this._onDidSelectPlugin.fire(e.element.item);
+                } else if (e.element.type === "remote-item")
+                    ; else if (e.element.type === "marketplace-item") {
+                    this._onDidSelectPlugin.fire(e.element.item);
+                }
+            }
+        }));
+        this._register(this.list.onDidChangeFocus(event => {
+            const index = event.indexes[0] ?? -1;
+            installedRenderer.setFocusedIndex(index);
+            remoteRenderer.setFocusedIndex(index);
+            marketplaceRenderer.setFocusedIndex(index);
+        }));
+        this._register(this.list.onContextMenu(e => this.onContextMenu(e)));
+        this._register(autorun(reader => {
+            this.agentPluginService.plugins.read(reader);
+            void this.refresh();
+        }));
+        this._register(this.pluginMarketplaceService.onDidChangeMarketplaces(() => {
+            this.marketplaceItems = [];
+            this.marketplaceSnapshotCts?.dispose(true);
+            this.marketplaceSnapshot.reset();
+            void this.refresh();
+        }));
+        this._register(autorun(reader => {
+            this.pluginMarketplaceService.recommendedPlugins.read(reader);
+            if (this.browseMode) {
+                this.updateMarketplaceList();
+            } else if (!this.searchQuery.trim()) {
+                this.renderPluginHome();
+            }
+        }));
+        this._register(autorun(reader => {
+            this.harnessService.activeHarness.read(reader);
+            this.updateToolbarActions();
+            if (!this.browseMode) {
+                void this.refresh();
+            }
+        }));
+        const itemProviderChangeDisposable = this._register(( new MutableDisposable()));
+        this._register(autorun(reader => {
+            this.harnessService.activeHarness.read(reader);
+            const itemProvider = this.harnessService.getActiveDescriptor().itemProvider;
+            if (itemProvider) {
+                itemProviderChangeDisposable.value = itemProvider.onDidChange(() => {
+                    if (!this.browseMode) {
+                        void this.refresh();
+                    }
+                });
+            } else {
+                itemProviderChangeDisposable.clear();
+            }
+        }));
+        this.updateToolbarActions();
+        void this.refresh();
+    }
+    async refresh() {
+        if (this.browseMode) {
+            await this.queryMarketplace();
+        } else if (this.searchQuery.trim()) {
+            await this.queryPluginSearch();
+        } else {
+            this.filterPlugins();
+        }
+    }
+    updateAccessState() {
+        const inspect = this.configurationService.inspect(ChatConfiguration.PluginsEnabled);
+        const value = inspect.value ?? inspect.defaultValue;
+        const disabled = value === false;
+        const policyLocked = inspect.policyValue === false;
+        this.element.classList.toggle("access-disabled", disabled);
+        if (disabled) {
+            this.disabledIcon.className = "empty-icon";
+            this.disabledIcon.classList.add(
+                ...ThemeIcon.asClassNameArray(policyLocked ? Codicon.shield : Codicon.plug)
+            );
+            clearNode(this.disabledMessage);
+            this.disabledLinkListener.clear();
+            if (policyLocked) {
+                this.disabledMessage.textContent = ( localize(
+                    9097,
+                    "Plugin integration in chat is disabled by your organization. Contact your organization administrator for more information."
+                ));
+            } else {
+                this.disabledMessage.appendChild(createTextNode(( localize(9098, "Plugins are disabled in settings. "))));
+                const link = append(this.disabledMessage, $("a.mcp-disabled-settings-link"));
+                link.textContent = ( localize(9099, "Configure in settings."));
+                link.href = "#";
+                link.setAttribute("role", "button");
+                this.disabledLinkListener.value = addDisposableListener(link, "click", e => {
+                    e.preventDefault();
+                    this.commandService.executeCommand("workbench.action.openSettings", `@id:${ChatConfiguration.PluginsEnabled}`);
+                });
+            }
+        }
+    }
+    get pluginActions() {
+        return this.harnessService.getActiveDescriptor().pluginActions ?? [];
+    }
+    formatActionLabel(action, iconOnly = false) {
+        if (!action.icon) {
+            return action.label;
+        }
+        return iconOnly ? `$(${action.icon.id})` : `$(${action.icon.id}) ${action.label}`;
+    }
+    updateToolbarActions() {
+        const browseMarketplaceAvailable = this.isBrowseMarketplaceAvailable();
+        if (!browseMarketplaceAvailable && this.browseMode) {
+            this.toggleBrowseMode(false);
+        }
+        this.marketplaceBackContainer.style.display = this.browseMode ? "" : "none";
+        this.browseButton.element.parentElement.style.display = "none";
+        this.browseButton.label = `$(${Codicon.library.id}) ${( localize(9081, "Browse Marketplace"))}`;
+        this.browseButton.enabled = browseMarketplaceAvailable;
+        const browseTitle = browseMarketplaceAvailable ? ( localize(9081, "Browse Marketplace")) : ( localize(9100, "Browse Marketplace is not available in VS Code for the Web."));
+        this.browseButton.setTitle(browseTitle);
+        this.browseButton.element.setAttribute("aria-label", browseTitle);
+        this.addButton.element.style.display = "none";
+        this.addButtonSimple.element.style.display = "none";
+        this.updatePluginsButton.element.style.display = "none";
+        this.updateInstalledCreateButtonLabel();
+    }
+    updateInstalledCreateButtonLabel() {
+        if (this.installedCreateButton) {
+            this.installedCreateButton.label = this.narrowLayout ? ( localize(9101, "Create")) : ( localize(9102, "Create Plugin"));
+        }
+    }
+    updateResponsiveLayout(width) {
+        const narrow = width < 500;
+        const wide = width >= 600;
+        if (this.narrowLayout === narrow) {
+            if (this.wideLayout !== wide) {
+                this.wideLayout = wide;
+                this.element.classList.toggle("wide-layout", wide);
+            }
+            return;
+        }
+        this.narrowLayout = narrow;
+        this.wideLayout = wide;
+        this.element.classList.toggle("narrow-layout", narrow);
+        this.element.classList.toggle("wide-layout", wide);
+        this.updateToolbarActions();
+    }
+    isBrowseMarketplaceAvailable() {
+        return this.marketplaceBrowsingAvailable;
+    }
+    buildAddActions() {
+        return [...this.pluginActions, {
+            id: "plugin.installFromSource",
+            label: ( localize(9103, "Install from Source")),
+            tooltip: ( localize(9104, "Install Plugin from Source")),
+            run: async () => {
+                const installed = await this.commandService.executeCommand("workbench.action.chat.installPluginFromSource", {
+                    skipReveal: true
+                });
+                if (installed && this.browseMode) {
+                    this.exitBrowseMode();
+                }
+            }
+        }];
+    }
+    getAddDropdownActions() {
+        this.addDropdownActions.clear();
+        return this.buildAddActions().slice(1).map((action, index) => this.addDropdownActions.add(( new Action(
+            `plugin_add_${index}`,
+            this.formatActionLabel(action),
+            undefined,
+            action.enabled !== false,
+            () => this.runPluginAction(action)
+        ))));
+    }
+    async runPrimaryAddAction() {
+        const [primary] = this.buildAddActions();
+        if (primary) {
+            await this.runPluginAction(primary);
+        }
+    }
+    async runCreatePluginAction() {
+        await this.commandService.executeCommand("workbench.action.chat.createPlugin");
+    }
+    async runInstallFromSourceAction() {
+        await this.commandService.executeCommand("workbench.action.chat.installPluginFromSource");
+    }
+    async runUpdatePluginsAction(button = this.updatePluginsButton) {
+        button.enabled = false;
+        try {
+            await this.commandService.executeCommand(UpdateAgentPluginsCommandId);
+        } finally {
+            button.enabled = true;
+        }
+    }
+    async runPluginAction(action) {
+        if (action.enabled !== false) {
+            await action.run();
+        }
+    }
+    showCardSurface() {
+        this.emptyContainer.style.display = "none";
+        this.listContainer.style.display = "none";
+        this.cardScrollableNode.style.display = "";
+    }
+    showEmptySurface() {
+        this.cardScrollableNode.style.display = "none";
+        this.listContainer.style.display = "none";
+        this.emptyContainer.style.display = "flex";
+    }
+    createCardScrollContent(...classNames) {
+        const content = append(this.cardContainer, $(".plugin-card-scroll.plugin-card-scroll-content"));
+        content.classList.add(...classNames);
+        this.sectionLayoutContainer = classNames.includes("distributed-section-layout") ? content : undefined;
+        const resizeObserver = this.cardDisposables.add(new DisposableResizeObserver(
+            "PluginListWidget.cardScrollContent",
+            () => this.schedulePluginSectionLayout()
+        ));
+        this.cardDisposables.add(resizeObserver.observe(content));
+        return content;
+    }
+    addSurfaceActivation(surface, label, callback, ...classNames) {
+        const primaryAction = createCustomizationCardPrimaryAction(surface, label, ...classNames);
+        this.rememberCardFocusElement(primaryAction);
+        this.cardDisposables.add(addDisposableListener(primaryAction, "click", callback));
+        return primaryAction;
+    }
+    renderCardSection(parent, title, description, className, count, renderActions) {
+        const section = append(parent, $(".plugin-card-section"));
+        if (className) {
+            section.classList.add(className);
+        }
+        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 = title;
+        if (count !== undefined) {
+            const countEl = append(headingRow, $(".plugin-card-section-count"));
+            countEl.textContent = String(count);
+        }
+        if (description) {
+            const descriptionEl = append(text, $(".plugin-card-section-description"));
+            descriptionEl.textContent = description;
+        }
+        renderActions?.(header);
+        const list = append(section, $(".plugin-card-grid"));
+        const sectionKey = className ?? title;
+        list.dataset.virtualizedSectionKey = sectionKey;
+        const collapsedSections = this.collapsedSections ??= ( new Set());
+        setupCollapsibleSection(headingRow, list, title, this.cardDisposables, ( collapsedSections.has(sectionKey)), collapsed => {
+            if (collapsed) {
+                collapsedSections.add(sectionKey);
+            } else {
+                collapsedSections.delete(sectionKey);
+            }
+            this.schedulePluginSectionLayout();
+        });
+        this.cardListControllers.set(list, this.cardDisposables.add(( new CustomizationCardListController(list, title))));
+        return list;
+    }
+    createPluginSectionList(container, label, entries, showRecommendedBadge = true) {
+        const key = container.dataset.virtualizedSectionKey ?? label;
+        const delegate = ( new PluginItemDelegate());
+        container.style.height = `${entries.length > 0 ? delegate.getHeight(entries[0]) : PLUGIN_ITEM_HEIGHT}px`;
+        container.classList.add("virtualized-section-list");
+        this.cardListControllers.get(container)?.dispose();
+        this.cardListControllers.delete(container);
+        container.removeAttribute("role");
+        container.removeAttribute("aria-label");
+        const installedRenderer = ( new PluginInstalledItemRenderer(
+            this.harnessService,
+            (item, row, actions, disposables) => this.renderInstalledListActions(item, row, actions, disposables),
+            false
+        ));
+        const remoteRenderer = ( new PluginRemoteItemRenderer(
+            (item, actions, disposables) => this.renderRemoteListActions(item, actions, disposables)
+        ));
+        const marketplaceRenderer = ( new PluginMarketplaceItemRenderer(
+            this.pluginInstallService,
+            this.agentPluginService,
+            this.pluginMarketplaceService,
+            this.notificationService,
+            showRecommendedBadge
+        ));
+        const list = this.cardDisposables.add(this.instantiationService.createInstance(
+            WorkbenchList,
+            `PluginManagementList.${label}`,
+            container,
+            delegate,
+            [installedRenderer, remoteRenderer, marketplaceRenderer],
+            {
+                multipleSelectionSupport: false,
+                setRowLineHeight: false,
+                horizontalScrolling: false,
+                accessibilityProvider: {
+                    getAriaLabel: element => this.getPluginEntryAriaLabel(element),
+                    getWidgetAriaLabel: () => label,
+                    getSetSize: (_element, _index, listLength) => listLength,
+                    getPosInSet: (_element, index) => index + 1
+                },
+                openOnSingleClick: true,
+                identityProvider: {
+                    getId: element => this.getPluginEntryId(element)
+                }
+            }
+        ));
+        list.splice(0, 0, entries);
+        list.scrollTop = this.sectionScrollPositions.get(key) ?? 0;
+        this.cardDisposables.add(list.onDidOpen(event => {
+            const entry = event.element;
+            if (entry?.type === "plugin-item" || entry?.type === "marketplace-item") {
+                this._onDidSelectPlugin.fire(entry.item);
+            }
+        }));
+        this.cardDisposables.add(list.onContextMenu(event => this.onContextMenu(event)));
+        this.cardDisposables.add(list.onDidChangeFocus(event => {
+            const index = event.indexes[0] ?? -1;
+            installedRenderer.setFocusedIndex(index);
+            remoteRenderer.setFocusedIndex(index);
+            marketplaceRenderer.setFocusedIndex(index);
+        }));
+        this.cardDisposables.add(list.onDidFocus(() => {
+            if (list.getFocus().length === 0 && entries.length > 0) {
+                list.setFocus([0]);
+            }
+        }));
+        this.sectionLists.push({
+            list,
+            entries,
+            container,
+            key
+        });
+    }
+    captureSectionScrollPositions() {
+        for (const section of this.sectionLists) {
+            this.sectionScrollPositions.set(section.key, section.list.scrollTop);
+        }
+    }
+    getPluginEntryAriaLabel(element) {
+        if (element.type === "group-header" || element.type === "search-header") {
+            return element.label;
+        }
+        const name = formatDisplayName(element.item.name);
+        const description = element.item.description ? truncateToFirstLine(element.item.description) : undefined;
+        const nameAndDescription = description ? ( localize(9088, "{0}. {1}", name, description)) : name;
+        if (element.type === "plugin-item") {
+            const metadata = getInstalledPluginMetadata(element.item);
+            const withMetadata = metadata ? ( localize(9089, "{0}. {1}", nameAndDescription, metadata)) : nameAndDescription;
+            return derived(
+                this,
+                reader => isContributionEnabled(element.item.plugin.enablement.read(reader)) ? ( localize(9090, "{0}. Enabled", withMetadata)) : ( localize(9091, "{0}. Disabled", withMetadata))
+            );
+        }
+        if (element.type === "remote-item") {
+            const statusLabel = getRemotePluginStatusLabel(element.item);
+            return statusLabel ? ( localize(
+                9092,
+                "{0}. Remote agent host. Status: {1}",
+                nameAndDescription,
+                statusLabel
+            )) : ( localize(9093, "{0}. Remote agent host", nameAndDescription));
+        }
+        const marketplaceLabel = ( localize(9094, "{0}. From {1}", nameAndDescription, element.item.marketplace));
+        return ( this.pluginMarketplaceService.recommendedPlugins.get().has(getMarketplaceRecommendationKey(element.item))) ? ( localize(9095, "{0}. Recommended for this workspace", marketplaceLabel)) : marketplaceLabel;
+    }
+    getPluginEntryId(element) {
+        if (element.type === "group-header" || element.type === "search-header") {
+            return element.id;
+        }
+        if (element.type === "marketplace-item") {
+            return `marketplace-${element.item.marketplaceReference.canonicalId}/${element.item.source}`;
+        }
+        if (element.type === "remote-item") {
+            return element.item.itemKey ?? `remote-${element.item.groupKey ?? "default"}-${( element.item.uri.toString())}`;
+        }
+        return ( element.item.plugin.uri.toString());
+    }
+    renderInstalledListActions(item, row, actions, disposables) {
+        let renderedState = item.plugin.enablement.get();
+        const toggle = disposables.add(( new Switch({
+            ariaLabel: item.name,
+            checked: isContributionEnabled(renderedState)
+        })));
+        append(actions, toggle.domNode);
+        disposables.add(
+            addDisposableGenericMouseDownListener(toggle.domNode, event => EventHelper.stop(event, true))
+        );
+        const update = (state, blocked) => {
+            renderedState = state;
+            const checked = isContributionEnabled(state);
+            const workspaceScope = state === ContributionEnablementState.EnabledWorkspace || state === ContributionEnablementState.DisabledWorkspace;
+            const toggleLabel = checked ? (workspaceScope ? ( localize(9105, "Exclude {0} from Workspace", item.name)) : ( localize(9106, "Exclude {0} from Profile", item.name))) : (workspaceScope ? ( localize(9107, "Include {0} in Workspace", item.name)) : ( localize(9108, "Include {0} for Profile", item.name)));
+            toggle.disabled = blocked;
+            toggle.checked = checked;
+            toggle.setAriaLabel(blocked ? ( localize(9109, "{0} is managed by your organization", item.name)) : toggleLabel, blocked ? ( localize(9110, "This plugin is managed by your organization.")) : toggleLabel);
+            row.classList.toggle("disabled", !checked || blocked);
+        };
+        disposables.add(autorun(reader => update(
+            item.plugin.enablement.read(reader),
+            item.plugin.policyBlocked?.read(reader) === true
+        )));
+        disposables.add(toggle.onChange(() => {
+            const nextState = getToggledPluginEnablementState(renderedState);
+            update(nextState, isPluginPolicyBlocked(item.plugin));
+            this.agentPluginService.enablementModel.setEnabled(( item.plugin.uri.toString()), nextState);
+            status(( localize(9111, "{0}. {1}.", item.name, getPluginInclusionLabel(item.plugin))));
+        }));
+        const more = disposables.add(( new Button(actions, {
+            ...getButtonStyles({
+                buttonSecondaryBackground: undefined,
+                buttonSecondaryBorder: undefined
+            }),
+            secondary: true,
+            supportIcons: true,
+            ariaLabel: ( localize(9112, "More actions for {0}", item.name))
+        })));
+        more.element.classList.add("plugin-card-icon-button");
+        more.label = `$(${Codicon.ellipsis.id})`;
+        disposables.add(
+            addDisposableGenericMouseDownListener(more.element, event => EventHelper.stop(event, true))
+        );
+        disposables.add(more.onDidClick(event => {
+            EventHelper.stop(event, true);
+            this.showInstalledPluginActions(item, more.element);
+        }));
+    }
+    renderRemoteListActions(item, actions, disposables) {
+        if (!item.actions?.length) {
+            actions.style.display = "none";
+            return;
+        }
+        actions.style.display = "";
+        const more = disposables.add(( new Button(actions, {
+            ...getButtonStyles({
+                buttonSecondaryBackground: undefined,
+                buttonSecondaryBorder: undefined
+            }),
+            secondary: true,
+            supportIcons: true,
+            ariaLabel: ( localize(9112, "More actions for {0}", item.name))
+        })));
+        more.element.classList.add("plugin-card-icon-button");
+        more.label = `$(${Codicon.ellipsis.id})`;
+        disposables.add(
+            addDisposableGenericMouseDownListener(more.element, event => EventHelper.stop(event, true))
+        );
+        disposables.add(more.onDidClick(event => {
+            EventHelper.stop(event, true);
+            this.showRemotePluginActions(item, more.element);
+        }));
+    }
+    layoutPluginSectionLists() {
+        const delegate = ( new PluginItemDelegate());
+        const content = this.sectionLayoutContainer;
+        if (!content) {
+            return;
+        }
+        const heights = layoutVirtualizedSections(content, this.sectionLists.map(section => ({
+            container: section.container,
+            contentHeight: section.entries.reduce((height, entry) => height + delegate.getHeight(entry), 0),
+            minimumHeight: getVirtualizedSectionMinimumHeight(section.entries, entry => delegate.getHeight(entry))
+        })));
+        for (let index = 0; index < this.sectionLists.length; index++) {
+            const section = this.sectionLists[index];
+            const height = heights[index];
+            layoutVirtualizedSectionList(
+                section.list,
+                section.container,
+                height,
+                section.container.clientWidth || undefined
+            );
+        }
+    }
+    schedulePluginSectionLayout() {
+        this.pendingSectionLayout.value = scheduleAtNextAnimationFrame(getWindow(this.element), () => {
+            this.layoutPluginSectionLists();
+            this.cardScrollable.scanDomNode();
+        });
+    }
+    renderPluginHome() {
+        if (this.browseMode || this.searchQuery.trim()) {
+            return;
+        }
+        this.captureSectionScrollPositions();
+        this.cardDisposables.clear();
+        this.sectionLists = [];
+        this.installedCreateButton = undefined;
+        this.firstCardFocusElement = undefined;
+        clearNode(this.cardContainer);
+        this.showCardSurface();
+        const content = this.createCardScrollContent("distributed-section-layout");
+        const installedPlugins = this.installedItems;
+        const hasMarketplaceInstalledPlugins = this.pluginMarketplaceService.installedPlugins.get().length > 0;
+        if (shouldLoadPluginMarketplaceSnapshot(
+            this.visible,
+            this.marketplaceSnapshot.state,
+            this.isBrowseMarketplaceAvailable()
+        )) {
+            void this.queryMarketplaceSnapshot();
+        }
+        const installedList = this.renderCardSection(content, ( localize(9113, "Installed")), undefined, "installed-plugins-section", installedPlugins.length, header => this.renderInstalledSectionActions(header, hasMarketplaceInstalledPlugins));
+        installedList.classList.add("plugin-inventory-list");
+        if (installedPlugins.length === 0) {
+            const empty = append(installedList, $(".plugin-inventory-empty"));
+            empty.textContent = ( localize(9114, "No plugins are installed."));
+        } else {
+            this.createPluginSectionList(installedList, ( localize(9113, "Installed")), installedPlugins.map(item => ({
+                type: "plugin-item",
+                item
+            })));
+        }
+        const installedNames = ( new Set(this.installedItems.map(item => item.name.toLowerCase())));
+        const remoteItems = this.remoteItems.filter(
+            item => item.groupKey !== "remote-client" && (!item.name || !( installedNames.has(item.name.toLowerCase())))
+        );
+        if (remoteItems.length > 0) {
+            const remoteList = this.renderCardSection(content, ( localize(9115, "Remote session plugins")), ( localize(9116, "Plugins configured directly on the active remote agent host.")), "remote-plugins-section", remoteItems.length);
+            remoteList.classList.add("plugin-inventory-list");
+            this.createPluginSectionList(remoteList, ( localize(9115, "Remote session plugins")), remoteItems.map(item => ({
+                type: "remote-item",
+                item
+            })));
+        }
+        this.renderAvailablePlugins(
+            content,
+            this.getUninstalledMarketplaceItems(this.marketplaceSnapshot.items),
+            true
+        );
+        this.schedulePluginSectionLayout();
+    }
+    renderInstalledSectionActions(header, hasInstalledPlugins) {
+        const actions = append(header, $(".plugin-card-section-actions"));
+        const createLabel = ( localize(9102, "Create Plugin"));
+        const create = this.installedCreateButton = this.cardDisposables.add(( new Button(actions, {
+            ...defaultButtonStyles,
+            secondary: true,
+            ariaLabel: createLabel
+        })));
+        create.element.classList.add("plugin-installed-action");
+        this.updateInstalledCreateButtonLabel();
+        this.rememberCardFocusElement(create.element);
+        this.cardDisposables.add(create.onDidClick(() => this.runCreatePluginAction()));
+        if (hasInstalledPlugins) {
+            const updateLabel = ( localize(9117, "Check for and apply updates"));
+            const update = this.cardDisposables.add(( new Button(actions, {
+                ...defaultButtonStyles,
+                secondary: true,
+                supportIcons: true,
+                title: updateLabel,
+                ariaLabel: updateLabel
+            })));
+            update.element.classList.add("plugin-card-icon-button", "plugin-update-button");
+            update.label = `$(${Codicon.refresh.id})`;
+            this.cardDisposables.add(update.onDidClick(() => this.runUpdatePluginsAction(update)));
+        }
+    }
+    renderAvailablePlugins(
+        parent,
+        items,
+        showActions,
+        title = ( localize(9118, "Available")),
+        description = ( localize(9119, "Browse and install plugins from your marketplaces."))
+    ) {
+        const availableList = this.renderCardSection(
+            parent,
+            title,
+            description,
+            "available-plugins-section",
+            items.length,
+            showActions ? header => this.renderAvailableSectionActions(header) : undefined
+        );
+        availableList.classList.add("plugin-inventory-list");
+        if (items.length === 0) {
+            if (this.marketplaceSnapshot.state === "loading") {
+                renderVirtualizedSectionLoadingPlaceholder(availableList, ( localize(9120, "Loading marketplace...")), PLUGIN_MARKETPLACE_ITEM_HEIGHT);
+            } else {
+                const empty = append(availableList, $(".plugin-inventory-empty"));
+                empty.textContent = ( localize(9121, "No marketplace plugins are available."));
+            }
+            this.cardListControllers.get(availableList)?.finalize();
+            return;
+        }
+        this.createPluginSectionList(availableList, title, items.map(item => ({
+            type: "marketplace-item",
+            item
+        })));
+    }
+    renderAvailableSectionActions(header) {
+        const actions = append(header, $(".plugin-card-section-actions"));
+        const installLabel = ( localize(9103, "Install from Source"));
+        const installTooltip = ( localize(9104, "Install Plugin from Source"));
+        if (this.pluginActions.length > 0) {
+            const install = this.cardDisposables.add(( new ButtonWithDropdown(actions, {
+                ...defaultButtonStyles,
+                secondary: true,
+                contextMenuProvider: this.contextMenuService,
+                addPrimaryActionToDropdown: false,
+                actions: {
+                    getActions: () => {
+                        this.addDropdownActions.clear();
+                        return this.pluginActions.map((action, index) => this.addDropdownActions.add(( new Action(
+                            `plugin_provider_add_${index}`,
+                            this.formatActionLabel(action),
+                            undefined,
+                            action.enabled !== false,
+                            () => this.runPluginAction(action)
+                        ))));
+                    }
+                },
+                title: installTooltip,
+                ariaLabel: installTooltip
+            })));
+            install.element.classList.add("plugin-available-action");
+            install.label = installLabel;
+            this.cardDisposables.add(install.onDidClick(() => this.runInstallFromSourceAction()));
+        } else {
+            const install = this.cardDisposables.add(( new Button(actions, {
+                ...defaultButtonStyles,
+                secondary: true,
+                title: installTooltip,
+                ariaLabel: installTooltip
+            })));
+            install.element.classList.add("plugin-available-action");
+            install.label = installLabel;
+            this.cardDisposables.add(install.onDidClick(() => this.runInstallFromSourceAction()));
+        }
+    }
+    appendInstalledPluginRow(parent, item) {
+        const row = append(parent, $(".plugin-list-item.plugin-home-row.plugin-installed-item"));
+        const primaryAction = this.addSurfaceActivation(row, ( localize(9122, "{0}. {1}", item.name, getPluginInclusionLabel(item.plugin))), () => this._onDidSelectPlugin.fire(item));
+        const details = append(primaryAction, $(".plugin-list-item-details"));
+        const nameRow = append(details, $(".plugin-list-item-name-row"));
+        const name = append(nameRow, $(".plugin-list-item-name"));
+        name.textContent = formatDisplayName(item.name);
+        name.title = item.name;
+        if (!item.marketplace) {
+            const source = append(nameRow, $(".inline-badge.plugin-source-badge"));
+            source.textContent = ( localize(9049, "Local"));
+            source.title = ( localize(9050, "Installed from a local source"));
+        }
+        const description = append(details, $(".plugin-list-item-description"));
+        description.textContent = truncateToFirstLine(item.description || ( localize(9123, "No description provided.")));
+        const metadata = append(details, $(".plugin-list-item-metadata"));
+        metadata.textContent = getInstalledPluginMetadata(item);
+        metadata.style.display = metadata.textContent ? "" : "none";
+        const actions = append(row, $(".plugin-list-item-action"));
+        const toggle = this.appendInstalledPluginToggle(actions, row, primaryAction, item);
+        const more = this.cardDisposables.add(( new Button(actions, {
+            ...getButtonStyles({
+                buttonSecondaryBackground: undefined,
+                buttonSecondaryBorder: undefined
+            }),
+            secondary: true,
+            supportIcons: true,
+            ariaLabel: ( localize(9112, "More actions for {0}", item.name))
+        })));
+        more.element.classList.add("plugin-card-icon-button");
+        more.label = `$(${Codicon.ellipsis.id})`;
+        this.cardDisposables.add(more.onDidClick(() => this.showInstalledPluginActions(item, more.element)));
+        this.cardListControllers.get(parent)?.addItem({
+            row,
+            primaryAction,
+            label: item.name,
+            actions: [toggle, more.element],
+            contextMenuAction: more.element
+        });
+    }
+    appendInstalledPluginToggle(parent, row, primaryAction, item) {
+        let renderedState = item.plugin.enablement.get();
+        const toggle = this.cardDisposables.add(( new Switch({
+            ariaLabel: item.name
+        })));
+        const switchElement = toggle.domNode;
+        append(parent, switchElement);
+        const update = (state, blocked) => {
+            renderedState = state;
+            const checked = isContributionEnabled(state);
+            const workspaceScope = state === ContributionEnablementState.EnabledWorkspace || state === ContributionEnablementState.DisabledWorkspace;
+            const toggleLabel = checked ? (workspaceScope ? ( localize(9105, "Exclude {0} from Workspace", item.name)) : ( localize(9106, "Exclude {0} from Profile", item.name))) : (workspaceScope ? ( localize(9107, "Include {0} in Workspace", item.name)) : ( localize(9108, "Include {0} for Profile", item.name)));
+            const accessibleLabel = blocked ? ( localize(9109, "{0} is managed by your organization", item.name)) : toggleLabel;
+            toggle.disabled = blocked;
+            toggle.checked = checked;
+            toggle.setAriaLabel(accessibleLabel, blocked ? ( localize(9110, "This plugin is managed by your organization.")) : toggleLabel);
+            row.classList.toggle("disabled", !checked || blocked);
+            primaryAction.setAttribute("aria-label", ( localize(9122, "{0}. {1}", item.name, getPluginInclusionLabel(item.plugin))));
+        };
+        this.cardDisposables.add(autorun(reader => {
+            const state = item.plugin.enablement.read(reader);
+            const blocked = item.plugin.policyBlocked?.read(reader) === true;
+            update(state, blocked);
+        }));
+        this.cardDisposables.add(toggle.onChange(() => {
+            const nextState = getToggledPluginEnablementState(renderedState);
+            update(nextState, isPluginPolicyBlocked(item.plugin));
+            this.agentPluginService.enablementModel.setEnabled(( item.plugin.uri.toString()), nextState);
+            status(( localize(9111, "{0}. {1}.", item.name, getPluginInclusionLabel(item.plugin))));
+        }));
+        return switchElement;
+    }
+    appendRemotePluginRow(parent, item) {
+        const row = append(parent, $(".plugin-list-item.plugin-home-row.plugin-remote-item"));
+        row.setAttribute("role", "listitem");
+        row.setAttribute("aria-label", ( localize(9124, "{0}. Remote plugin", item.name)));
+        row.classList.toggle("disabled", item.enabled === false);
+        const details = append(row, $(".plugin-list-item-details"));
+        const nameRow = append(details, $(".plugin-list-item-name-row"));
+        const name = append(nameRow, $(".plugin-list-item-name"));
+        name.textContent = formatDisplayName(item.name);
+        const source = append(nameRow, $(".inline-badge.plugin-source-badge"));
+        source.textContent = ( localize(9125, "Remote"));
+        source.title = ( localize(9053, "Remote agent host"));
+        const description = append(details, $(".plugin-list-item-description"));
+        description.textContent = item.description || ( localize(9123, "No description provided."));
+        const metadata = append(details, $(".plugin-list-item-metadata"));
+        metadata.textContent = ( localize(9126, "Configured on the active remote agent host"));
+        const status = append(row, $(".plugin-list-item-status"));
+        const statusLabel = getRemotePluginStatusLabel(item);
+        if (statusLabel) {
+            status.textContent = statusLabel;
+            status.classList.toggle(
+                "disabled",
+                item.enabled === false || item.status === "degraded" || item.status === "error"
+            );
+        } else {
+            status.style.display = "none";
+        }
+        let more;
+        if (item.actions?.length) {
+            const actions = append(row, $(".plugin-list-item-action"));
+            const moreButton = this.cardDisposables.add(( new Button(actions, {
+                ...defaultButtonStyles,
+                secondary: true,
+                supportIcons: true,
+                ariaLabel: ( localize(9112, "More actions for {0}", item.name))
+            })));
+            moreButton.element.classList.add("plugin-card-icon-button");
+            moreButton.label = `$(${Codicon.ellipsis.id})`;
+            this.rememberCardFocusElement(moreButton.element);
+            this.cardDisposables.add(
+                moreButton.onDidClick(() => this.showRemotePluginActions(item, moreButton.element))
+            );
+            more = moreButton;
+        }
+        this.cardListControllers.get(parent)?.addItem({
+            row,
+            primaryAction: row,
+            label: item.name,
+            actions: more ? [more.element] : [],
+            contextMenuAction: more?.element
+        });
+    }
+    appendMarketplacePluginRow(parent, item) {
+        const row = append(parent, $(".plugin-list-item.plugin-home-row.plugin-marketplace-home-row"));
+        const primaryAction = this.addSurfaceActivation(row, ( localize(9127, "{0}. Available to install from {1}.", item.name, item.marketplace)), () => this._onDidSelectPlugin.fire(item));
+        const details = append(primaryAction, $(".plugin-list-item-details"));
+        const nameRow = append(details, $(".plugin-list-item-name-row"));
+        const name = append(nameRow, $(".plugin-list-item-name"));
+        name.textContent = item.name;
+        name.title = item.name;
+        const description = append(details, $(".plugin-list-item-description"));
+        description.textContent = truncateToFirstLine(item.description || ( localize(9123, "No description provided.")));
+        const actions = append(row, $(".plugin-list-item-action"));
+        const install = this.cardDisposables.add(( new Button(actions, {
+            ...defaultButtonStyles,
+            ariaLabel: ( localize(9128, "Install {0}", item.name))
+        })));
+        install.element.classList.add("plugin-list-item-install-button");
+        install.label = ( localize(9056, "Install"));
+        this.cardDisposables.add(install.onDidClick(() => this.installMarketplacePlugin(item, install)));
+        this.cardListControllers.get(parent)?.addItem({
+            row,
+            primaryAction,
+            label: item.name,
+            actions: [install.element]
+        });
+    }
+    rememberCardFocusElement(element) {
+        this.firstCardFocusElement ??= element;
+    }
+    renderBrowseMarketplaceCards() {
+        this.captureSectionScrollPositions();
+        this.cardDisposables.clear();
+        this.sectionLists = [];
+        this.installedCreateButton = undefined;
+        this.firstCardFocusElement = undefined;
+        clearNode(this.cardContainer);
+        const marketplaceItems = this.getUninstalledMarketplaceItems();
+        if (marketplaceItems.length === 0) {
+            this.showEmptySurface();
+            this.emptyText.textContent = ( localize(9129, "No plugins available"));
+            this.emptySubtext.textContent = "";
+            return;
+        }
+        this.showCardSurface();
+        const content = this.createCardScrollContent("distributed-section-layout");
+        const recommendedKeys = this.pluginMarketplaceService.recommendedPlugins.get();
+        const recommended = marketplaceItems.filter(item => ( recommendedKeys.has(getMarketplaceRecommendationKey(item))));
+        const allPlugins = marketplaceItems.filter(item => !( recommendedKeys.has(getMarketplaceRecommendationKey(item))));
+        if (recommended.length > 0) {
+            const recommendedGrid = this.renderCardSection(content, ( localize(9130, "Recommended for this workspace")), ( localize(9131, "Plugins recommended by workspace configuration.")), "plugin-marketplace-recommended-section");
+            recommendedGrid.classList.add("plugin-inventory-list");
+            this.createPluginSectionList(recommendedGrid, ( localize(9130, "Recommended for this workspace")), recommended.map(item => ({
+                type: "marketplace-item",
+                item
+            })));
+        }
+        const allGrid = this.renderCardSection(content, ( localize(9132, "All plugins")), ( localize(9133, "Plugins available from configured marketplaces.")), "plugin-marketplace-all-section");
+        allGrid.classList.add("plugin-inventory-list");
+        this.createPluginSectionList(allGrid, ( localize(9132, "All plugins")), allPlugins.map(item => ({
+            type: "marketplace-item",
+            item
+        })));
+        this.layoutPluginSectionLists();
+        this.cardScrollable.scanDomNode();
+        this.schedulePluginSectionLayout();
+    }
+    getUninstalledMarketplaceItems(items = this.marketplaceItems) {
+        const installedUris = ( new Set(this.agentPluginService.plugins.get().map(p => ( p.uri.toString()))));
+        return items.filter(item => {
+            const expectedUri = this.pluginInstallService.getPluginInstallUri({
+                name: item.name,
+                description: item.description,
+                version: item.version ?? "",
+                source: item.source,
+                sourceDescriptor: item.sourceDescriptor,
+                marketplace: item.marketplace,
+                marketplaceReference: item.marketplaceReference,
+                marketplaceType: item.marketplaceType
+            });
+            return !( installedUris.has(( expectedUri.toString())));
+        });
+    }
+    async installMarketplacePlugin(item, button) {
+        button.label = ( localize(9057, "Installing..."));
+        button.enabled = false;
+        try {
+            await this.pluginInstallService.installPlugin({
+                name: item.name,
+                description: item.description,
+                version: item.version ?? "",
+                sourceDescriptor: item.sourceDescriptor,
+                source: item.source,
+                marketplace: item.marketplace,
+                marketplaceReference: item.marketplaceReference,
+                marketplaceType: item.marketplaceType,
+                readmeUri: item.readmeUri
+            });
+            button.label = ( localize(9055, "Installed"));
+            void this.refresh();
+        } catch (error) {
+            button.label = ( localize(9056, "Install"));
+            button.enabled = true;
+            this.notificationService.error(( localize(9058, "Unable to install plugin: {0}", getErrorMessage(error))));
+        }
+    }
+    async queryMarketplaceSnapshot() {
+        if (!this.marketplaceSnapshot.beginLoading()) {
+            return;
+        }
+        this.marketplaceSnapshotCts?.dispose(true);
+        const cts = this.marketplaceSnapshotCts = ( new CancellationTokenSource());
+        try {
+            const plugins = await this.pluginMarketplaceService.fetchMarketplacePlugins(cts.token);
+            if (this.marketplaceSnapshotCts !== cts) {
+                return;
+            }
+            if (cts.token.isCancellationRequested) {
+                this.marketplaceSnapshot.reset();
+                return;
+            }
+            this.marketplaceSnapshot.complete(plugins.map(marketplacePluginToItem));
+            if (!this.browseMode && !this.searchQuery.trim()) {
+                this.renderPluginHome();
+            }
+        } catch {
+            if (this.marketplaceSnapshotCts === cts && !cts.token.isCancellationRequested) {
+                this.marketplaceSnapshot.fail();
+                if (!this.browseMode && !this.searchQuery.trim()) {
+                    this.renderPluginHome();
+                }
+            }
+        }
+    }
+    showBrowseMarketplace() {
+        if (!this.isBrowseMarketplaceAvailable()) {
+            return;
+        }
+        if (!this.browseMode) {
+            this.toggleBrowseMode(true);
+        }
+    }
+    setVisible(visible) {
+        if (this.visible === visible) {
+            return;
+        }
+        this.visible = visible;
+        if (visible) {
+            void this.refresh();
+        }
+    }
+    toggleBrowseMode(browse) {
+        this.delayedMarketplaceSearch.cancel();
+        this.marketplaceCts?.dispose(true);
+        this.marketplaceCts = undefined;
+        this.browseMode = browse;
+        this.element.classList.toggle("browse-mode", browse);
+        this.searchInput.value = "";
+        this.searchQuery = "";
+        this.updateToolbarActions();
+        this.searchInput.setPlaceHolder(browse ? ( localize(9134, "Search plugin marketplace...")) : ( localize(9080, "Type to search...")));
+        if (browse) {
+            void this.queryMarketplace();
+        } else {
+            this.marketplaceItems = [];
+            void this.filterPlugins();
+        }
+        if (this.lastHeight > 0) {
+            this.layout(this.lastHeight, this.lastWidth);
+        }
+    }
+    async queryMarketplace() {
+        this.marketplaceCts?.dispose(true);
+        const cts = this.marketplaceCts = ( new CancellationTokenSource());
+        const query = this.searchQuery.toLowerCase().trim();
+        const browseMode = this.browseMode;
+        this.showEmptySurface();
+        this.emptyText.textContent = ( localize(9120, "Loading marketplace..."));
+        this.emptySubtext.textContent = "";
+        try {
+            const plugins = await this.pluginMarketplaceService.fetchMarketplacePlugins(cts.token);
+            if (!this.isCurrentMarketplaceRequest(cts, query, browseMode)) {
+                return;
+            }
+            if (query) {
+                const allPlugins = this.agentPluginService.plugins.get();
+                const installedItems = allPlugins.map(p => installedPluginToItem(p, this.labelService)).filter(
+                    item => item.name.toLowerCase().includes(query) || item.description.toLowerCase().includes(query)
+                ).sort(compareInstalledPluginItems);
+                const remoteItems = [...(await this.getRemotePluginItems(query))];
+                if (!this.isCurrentMarketplaceRequest(cts, query, browseMode)) {
+                    return;
+                }
+                this.installedItems = installedItems;
+                this.remoteItems = remoteItems;
+            }
+            const filtered = query ? plugins.filter(
+                p => p.name.toLowerCase().includes(query) || p.description.toLowerCase().includes(query) || p.marketplace.toLowerCase().includes(query)
+            ) : plugins;
+            const installedUris = ( new Set(this.agentPluginService.plugins.get().map(p => ( p.uri.toString()))));
+            this.marketplaceItems = filtered.filter(p => {
+                const expectedUri = this.pluginInstallService.getPluginInstallUri(p);
+                return !( installedUris.has(( expectedUri.toString())));
+            }).map(marketplacePluginToItem);
+            if (query) {
+                this.updateSearchResultsList();
+            } else {
+                this.updateMarketplaceList();
+            }
+        } catch {
+            if (this.isCurrentMarketplaceRequest(cts, query, browseMode)) {
+                this.marketplaceItems = [];
+                this.showEmptySurface();
+                this.emptyText.textContent = ( localize(9135, "Unable to load marketplace"));
+                this.emptySubtext.textContent = ( localize(9136, "Check your connection and try again"));
+            }
+        }
+    }
+    async queryPluginSearch() {
+        if (!this.isBrowseMarketplaceAvailable()) {
+            this.marketplaceItems = [];
+            await this.filterPlugins();
+            return;
+        }
+        const query = this.searchQuery.toLowerCase().trim();
+        if (!query || this.browseMode) {
+            return;
+        }
+        this.marketplaceCts?.dispose(true);
+        const cts = this.marketplaceCts = ( new CancellationTokenSource());
+        try {
+            const plugins = await this.pluginMarketplaceService.fetchMarketplacePlugins(cts.token);
+            if (!this.isCurrentMarketplaceRequest(cts, query, false)) {
+                return;
+            }
+            const installedItems = this.agentPluginService.plugins.get().map(p => installedPluginToItem(p, this.labelService)).filter(
+                item => item.name.toLowerCase().includes(query) || item.description.toLowerCase().includes(query)
+            ).sort(compareInstalledPluginItems);
+            const remoteItems = [...(await this.getRemotePluginItems(query))];
+            if (!this.isCurrentMarketplaceRequest(cts, query, false)) {
+                return;
+            }
+            const filtered = query ? plugins.filter(
+                p => p.name.toLowerCase().includes(query) || p.description.toLowerCase().includes(query) || p.marketplace.toLowerCase().includes(query)
+            ) : plugins;
+            const installedUris = ( new Set(this.agentPluginService.plugins.get().map(p => ( p.uri.toString()))));
+            const marketplaceItems = filtered.filter(p => {
+                const expectedUri = this.pluginInstallService.getPluginInstallUri(p);
+                return !( installedUris.has(( expectedUri.toString())));
+            }).map(marketplacePluginToItem);
+            if (!this.isCurrentMarketplaceRequest(cts, query, false)) {
+                return;
+            }
+            this.installedItems = installedItems;
+            this.remoteItems = remoteItems;
+            this.marketplaceItems = marketplaceItems;
+            this.searchInput.hideMessage();
+        } catch {
+            if (!this.isCurrentMarketplaceRequest(cts, query, false)) {
+                return;
+            }
+            this.marketplaceItems = [];
+            this.searchInput.showMessage({
+                content: ( localize(
+                    9137,
+                    "Marketplace results are unavailable. Showing installed plugins only."
+                )),
+                type: MessageType.WARNING
+            });
+            await this.filterPlugins();
+            return;
+        }
+        if (this.isCurrentMarketplaceRequest(cts, query, false)) {
+            this.updateSearchResultsList();
+            this._onDidChangeItemCount.fire(this.itemCount);
+        }
+    }
+    isCurrentMarketplaceRequest(cts, query, browseMode) {
+        return isCurrentPluginMarketplaceRequest(
+            query,
+            this.searchQuery.toLowerCase().trim(),
+            browseMode,
+            this.browseMode,
+            this.marketplaceCts === cts,
+            cts.token.isCancellationRequested
+        );
+    }
+    updateMarketplaceList() {
+        if (this.marketplaceItems.length === 0) {
+            this.showEmptySurface();
+            if (this.searchQuery.trim()) {
+                this.emptyText.textContent = ( localize(9138, "No plugins match '{0}'", this.searchQuery));
+                this.emptySubtext.textContent = ( localize(9139, "Try a different search term"));
+            } else {
+                this.emptyText.textContent = ( localize(9129, "No plugins available"));
+                this.emptySubtext.textContent = "";
+            }
+            this.list.splice(0, this.list.length, []);
+            return;
+        }
+        const query = this.searchQuery.trim();
+        if (!query) {
+            this.renderBrowseMarketplaceCards();
+            this.list.splice(0, this.list.length, []);
+            return;
+        } else {
+            this.updateSearchResultsList();
+        }
+    }
+    updateSearchResultsList() {
+        const installedNames = ( new Set(this.installedItems.map(item => item.name.toLowerCase())));
+        const remoteItems = this.remoteItems.filter(
+            item => item.groupKey !== "remote-client" && (!item.name || !( installedNames.has(item.name.toLowerCase())))
+        );
+        const installedCount = this.installedItems.length + remoteItems.length;
+        if (installedCount === 0 && this.marketplaceItems.length === 0) {
+            this.showEmptySurface();
+            this.emptyText.textContent = ( localize(9140, "No plugins match '{0}'", this.searchQuery));
+            this.emptySubtext.textContent = ( localize(9139, "Try a different search term"));
+            this.list.splice(0, this.list.length, []);
+            return;
+        }
+        this.captureSectionScrollPositions();
+        this.cardDisposables.clear();
+        this.sectionLists = [];
+        this.installedCreateButton = undefined;
+        this.firstCardFocusElement = undefined;
+        clearNode(this.cardContainer);
+        this.showCardSurface();
+        const content = this.createCardScrollContent("plugin-search-results", "distributed-section-layout");
+        if (installedCount > 0) {
+            const installedList = this.renderCardSection(content, ( localize(9141, "Installed")), undefined, "installed-plugins-section", installedCount);
+            installedList.classList.add("plugin-inventory-list");
+            this.createPluginSectionList(installedList, ( localize(9141, "Installed")), [...this.installedItems.map(item => ({
+                type: "plugin-item",
+                item
+            })), ...remoteItems.map(item => ({
+                type: "remote-item",
+                item
+            }))]);
+        }
+        if (this.marketplaceItems.length > 0) {
+            this.renderAvailablePlugins(content, this.marketplaceItems, false, ( localize(9142, "Available to install")), undefined);
+        }
+        this.schedulePluginSectionLayout();
+        this.list.splice(0, this.list.length, []);
+    }
+    async getRemotePluginItems(query) {
+        if (!this.harnessService.getActiveDescriptor().itemProvider) {
+            return [];
+        }
+        try {
+            const provided = await this.itemsModel.getActiveItemSource().fetchProviderItems();
+            return provided.filter(
+                item => isPluginCustomizationItem(item) && (!query || item.name.toLowerCase().includes(query) || item.description?.toLowerCase().includes(query) || item.badge?.toLowerCase().includes(query))
+            );
+        } catch {
+            return [];
+        }
+    }
+    async filterPlugins() {
+        const generation = ++this.filterGeneration;
+        const query = this.searchQuery.toLowerCase().trim();
+        const browseMode = this.browseMode;
+        const allPlugins = this.agentPluginService.plugins.get();
+        const remoteItems = [...(await this.getRemotePluginItems(query))];
+        if (generation !== this.filterGeneration || this.searchQuery.toLowerCase().trim() !== query || this.browseMode !== browseMode) {
+            return;
+        }
+        this.remoteItems = remoteItems;
+        this.installedItems = allPlugins.map(p => installedPluginToItem(p, this.labelService)).filter(
+            item => !query || item.name.toLowerCase().includes(query) || item.description.toLowerCase().includes(query)
+        ).sort(compareInstalledPluginItems);
+        if (!query) {
+            this.renderPluginHome();
+            this._onDidChangeItemCount.fire(this.itemCount);
+            return;
+        }
+        this.updateSearchResultsList();
+        this._onDidChangeItemCount.fire(this.itemCount);
+    }
+    get itemCount() {
+        const installedNames = ( new Set(this.installedItems.map(item => item.name.toLowerCase())));
+        const uniqueRemote = this.remoteItems.filter(item => {
+            if (item.groupKey === "remote-client") {
+                return false;
+            }
+            if (item.name && ( installedNames.has(item.name.toLowerCase()))) {
+                return false;
+            }
+            return true;
+        });
+        return uniqueRemote.length + this.installedItems.length;
+    }
+    fireItemCount() {
+        this._onDidChangeItemCount.fire(this.itemCount);
+    }
+    toggleGroup(entry) {
+        if (( this.collapsedGroups.has(entry.group))) {
+            this.collapsedGroups.delete(entry.group);
+        } else {
+            this.collapsedGroups.add(entry.group);
+        }
+        void this.filterPlugins();
+    }
+    isInBrowseMode() {
+        return this.browseMode;
+    }
+    exitBrowseMode() {
+        if (this.browseMode) {
+            this.toggleBrowseMode(false);
+        }
+    }
+    layout(height, width) {
+        this.lastHeight = height;
+        this.lastWidth = width;
+        if (!this.visible || this.element.parentElement?.style.display === "none") {
+            return;
+        }
+        this.element.style.height = `${height}px`;
+        this.updateResponsiveLayout(width);
+        const searchBarHeight = this.searchAndButtonContainer.offsetHeight;
+        if (searchBarHeight === 0 && !this._layoutDeferred) {
+            this._layoutDeferred = true;
+            getWindow(this.element).requestAnimationFrame(() => {
+                try {
+                    this.layout(this.lastHeight, this.lastWidth);
+                } finally {
+                    this._layoutDeferred = false;
+                }
+            });
+            return;
+        }
+        const headerHeight = this.sectionTitleHeader.offsetHeight;
+        this.lastHeaderHeight = headerHeight;
+        const backHeight = this.marketplaceBackContainer.offsetHeight;
+        const listHeight = Math.max(0, height - searchBarHeight - headerHeight - backHeight);
+        this.cardScrollableNode.style.height = `${listHeight}px`;
+        this.listContainer.style.height = `${listHeight}px`;
+        this.list.layout(listHeight, width);
+        this.schedulePluginSectionLayout();
+    }
+    focusSearch() {
+        this.searchInput.focus();
+    }
+    revealLastItem() {
+        if (this.cardScrollableNode.style.display !== "none") {
+            const reveal = () => {
+                const section = this.sectionLists.at(-1);
+                if (section?.entries.length) {
+                    section.list.reveal(section.entries.length - 1);
+                }
+                this.cardScrollable.scanDomNode();
+                this.cardScrollable.setScrollPosition({
+                    scrollTop: this.cardContainer.scrollHeight
+                });
+            };
+            reveal();
+            this.revealLastItemScheduler.value = scheduleAtNextAnimationFrame(getWindow(this.element), reveal);
+            return;
+        }
+        if (this.list.length > 0) {
+            this.list.reveal(this.list.length - 1);
+        }
+    }
+    focus() {
+        if (this.cardScrollableNode.style.display !== "none") {
+            if (this.firstCardFocusElement) {
+                this.firstCardFocusElement.focus();
+            } else {
+                const section = this.sectionLists[0];
+                if (section?.entries.length) {
+                    section.list.setFocus([0]);
+                    section.list.domFocus();
+                }
+            }
+        } else if (this.list.length > 0) {
+            this.list.domFocus();
+            this.list.setFocus([0]);
+        }
+    }
+    getInstalledPluginActions(item, disposables) {
+        const actions = [];
+        const groups = getInstalledPluginContextMenuActions(item.plugin, this.instantiationService);
+        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();
+        }
+        return actions;
+    }
+    getRemotePluginActions(item) {
+        const actions = [];
+        for (const itemAction of item.actions ?? []) {
+            actions.push(( new Action(
+                itemAction.id,
+                itemAction.label,
+                itemAction.icon ? ThemeIcon.asClassName(itemAction.icon) : undefined,
+                itemAction.enabled !== false,
+                () => itemAction.run()
+            )));
+        }
+        return actions;
+    }
+    showInstalledPluginActions(item, anchor) {
+        const disposables = ( new DisposableStore());
+        this.contextMenuService.showContextMenu({
+            getAnchor: () => anchor,
+            getActions: () => this.getInstalledPluginActions(item, disposables),
+            onHide: () => disposables.dispose()
+        });
+    }
+    showRemotePluginActions(item, anchor) {
+        this.contextMenuService.showContextMenu({
+            getAnchor: () => anchor,
+            getActions: () => this.getRemotePluginActions(item)
+        });
+    }
+    onContextMenu(e) {
+        if (!e.element || e.element.type === "group-header" || e.element.type === "search-header" || e.element.type === "marketplace-item") {
+            return;
+        }
+        const entry = e.element;
+        const disposables = ( new DisposableStore());
+        const actions = entry.type === "plugin-item" ? this.getInstalledPluginActions(entry.item, disposables) : this.getRemotePluginActions(entry.item);
+        this.contextMenuService.showContextMenu({
+            getAnchor: () => e.anchor,
+            getActions: () => actions,
+            onHide: () => disposables.dispose()
+        });
+    }
+};
+PluginListWidget = ( __decorate([( __param(1, IInstantiationService)), ( __param(2, IAgentPluginService)), ( __param(3, IPluginMarketplaceService)), ( __param(4, IPluginInstallService)), ( __param(5, IOpenerService)), ( __param(6, IContextViewService)), ( __param(7, IContextMenuService)), ( __param(8, IHoverService)), ( __param(9, ILabelService)), ( __param(10, ICommandService)), ( __param(11, ICustomizationHarnessService)), ( __param(12, IAICustomizationItemsModel)), ( __param(13, IConfigurationService)), ( __param(14, INotificationService))], PluginListWidget));
+
+export { PluginListWidget, PluginMarketplaceSnapshotModel, getInstalledPluginMetadata, getRemotePluginDisabledLabel, getToggledPluginEnablementState, isCurrentPluginMarketplaceRequest, shouldLoadPluginMarketplaceSnapshot };