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

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

@@ -2,7 +2,7 @@
 import { registerCss } from '@codingame/monaco-vscode-api/css';
 import { __decorate, __param } from '@codingame/monaco-vscode-api/external/tslib/tslib.es6';
 import * as aiCustomizationManagement from './media/aiCustomizationManagement.css';
-import { $ as $$1, append, createTextNode, addDisposableListener, getWindow, DisposableResizeObserver, clearNode } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/dom';
+import { $ as $$1, append, clearNode, addDisposableGenericMouseDownListener, EventHelper, DisposableResizeObserver, getWindow, createTextNode, addDisposableListener, EventType, scheduleAtNextAnimationFrame } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/dom';
 import { DisposableStore, Disposable, MutableDisposable, isDisposable } from '@codingame/monaco-vscode-api/vscode/vs/base/common/lifecycle';
 import { Emitter } from '@codingame/monaco-vscode-api/vscode/vs/base/common/event';
 import { localize } from '@codingame/monaco-vscode-api/vscode/vs/nls';
@@ -11,11 +11,11 @@ import { WorkbenchList } from '@codingame/monaco-vscode-api/vscode/vs/platform/l
 import { ThemeIcon } from '@codingame/monaco-vscode-api/vscode/vs/base/common/themables';
 import { Codicon } from '@codingame/monaco-vscode-api/vscode/vs/base/common/codicons';
 import { Button, ButtonWithDropdown } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/button/button';
-import { defaultCheckboxStyles, defaultInputBoxStyles, defaultButtonStyles } from '@codingame/monaco-vscode-api/vscode/vs/platform/theme/browser/defaultStyles';
+import { defaultCheckboxStyles, defaultButtonStyles, getButtonStyles, defaultInputBoxStyles } from '@codingame/monaco-vscode-api/vscode/vs/platform/theme/browser/defaultStyles';
 import '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/index';
 import { IOpenerService } from '@codingame/monaco-vscode-api/vscode/vs/platform/opener/common/opener.service';
 import { URI } from '@codingame/monaco-vscode-api/vscode/vs/base/common/uri';
-import { InputBox } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/inputbox/inputBox';
+import { InputBox, MessageType } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/inputbox/inputBox';
 import { IContextViewService, IContextMenuService } from '@codingame/monaco-vscode-api/vscode/vs/platform/contextview/browser/contextView.service';
 import { ICommandService } from '@codingame/monaco-vscode-api/vscode/vs/platform/commands/common/commands.service';
 import { CancellationTokenSource } from '@codingame/monaco-vscode-api/vscode/vs/base/common/cancellation';
@@ -25,36 +25,91 @@ import { isEqual, basename, dirname } from '@codingame/monaco-vscode-api/vscode/
 import { IHoverService } from '@codingame/monaco-vscode-api/vscode/vs/platform/hover/browser/hover.service';
 import { isWeb } from '@codingame/monaco-vscode-api/vscode/vs/base/common/platform';
 import { IAgentPluginService } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/plugins/agentPluginService.service';
-import { isContributionEnabled } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/enablement';
-import { getInstalledPluginContextMenuActions } from '../agentPluginActions.js';
+import { isContributionEnabled, ContributionEnablementState } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/enablement';
+import { isPluginPolicyBlocked, getInstalledPluginContextMenuActions } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/browser/agentPluginActions';
 import { IPluginMarketplaceService } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/plugins/pluginMarketplaceService.service';
 import { IPluginInstallService } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/plugins/pluginInstallService.service';
 import { AgentPluginItemKind } from '../agentPluginEditor/agentPluginItems.js';
-import { pluginIcon } from './aiCustomizationIcons.js';
 import { formatDisplayName } from './aiCustomizationListWidget.js';
 import { ILabelService } from '@codingame/monaco-vscode-api/vscode/vs/platform/label/common/label.service';
 import { CUSTOMIZATION_GROUP_HEADER_HEIGHT, CUSTOMIZATION_GROUP_HEADER_HEIGHT_WITH_SEPARATOR, CustomizationGroupHeaderRenderer } from './customizationGroupHeaderRenderer.js';
-import { isPluginCustomizationItem } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/customizationHarnessService';
+import { getCustomizationDisabledLabel, isPluginCustomizationItem } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/customizationHarnessService';
 import { ICustomizationHarnessService } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/customizationHarnessService.service';
-import { Checkbox } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/toggle/toggle';
 import { IConfigurationService } from '@codingame/monaco-vscode-api/vscode/vs/platform/configuration/common/configuration.service';
 import { ChatConfiguration } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/constants';
 import { IAICustomizationItemsModel } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/browser/aiCustomization/aiCustomizationItemsModel.service';
-import { GalleryItemInstallState, GalleryItemRenderer } from './galleryItemRenderer.js';
+import { UpdateAgentPluginsCommandId } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/browser/chat';
+import { Switch } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/toggle/switch';
+import { Checkbox } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/toggle/toggle';
+import { INotificationService } from '@codingame/monaco-vscode-api/vscode/vs/platform/notification/common/notification.service';
+import { getErrorMessage } from '@codingame/monaco-vscode-api/vscode/vs/base/common/errors';
+import { getPluginInclusionLabel } from './aiCustomizationPresentation.js';
+import { status } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/aria/aria';
+import { setVirtualizedRowActionsTabbable, createCustomizationCardPrimaryAction, setupCollapsibleSection, CustomizationCardListController, layoutVirtualizedSections, getVirtualizedSectionMinimumHeight, layoutVirtualizedSectionList, renderVirtualizedSectionLoadingPlaceholder } from './customizationCardList.js';
+import { DomScrollableElement } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/scrollbar/scrollableElement';
+import { ScrollbarVisibility } from '@codingame/monaco-vscode-api/vscode/vs/base/common/scrollable';
 import { truncateToFirstLine } from './aiCustomizationListWidgetUtils.js';
 import { autorun } from '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/reactions/autorun';
-import { runOnChange } from '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/utils/runOnChange';
+import { derived } from '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/observables/derived';
 
 registerCss(aiCustomizationManagement);
 const $ = $$1;
-const PLUGIN_ITEM_HEIGHT = 36;
+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 62;
+            return PLUGIN_MARKETPLACE_ITEM_HEIGHT;
         }
         return PLUGIN_ITEM_HEIGHT;
     }
@@ -62,6 +117,9 @@ class PluginItemDelegate {
         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;
         }
@@ -71,47 +129,82 @@ class PluginItemDelegate {
         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) {
+    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("mcp-server-item");
+        container.classList.add("plugin-list-item", "plugin-installed-item");
         const syncCheckboxContainer = append(container, $(".item-sync-checkbox"));
-        const typeIcon = append(container, $(".mcp-server-icon"));
-        typeIcon.classList.add(...ThemeIcon.asClassNameArray(pluginIcon));
-        const details = append(container, $(".mcp-server-details"));
-        const name = append(details, $(".mcp-server-name"));
-        const description = append(details, $(".mcp-server-description"));
-        return {
+        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,
-            typeIcon,
             name,
+            source,
             description,
-            disposables: ( new DisposableStore())
+            metadata,
+            actions,
+            disposables: ( new DisposableStore()),
+            currentIndex: -1
         };
+        this._templates.add(template);
+        return template;
     }
-    renderElement(element, _index, templateData) {
+    renderElement(element, index, templateData) {
         templateData.disposables.clear();
+        templateData.currentIndex = index;
         templateData.name.textContent = formatDisplayName(element.item.name);
+        templateData.source.textContent = element.item.marketplace ? "" : ( localize(6930, "Local"));
+        templateData.source.title = element.item.marketplace ? "" : ( localize(6931, "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._harnessService.getActiveDescriptor().syncProvider;
+        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(6076, "Enable {0} for sync", element.item.name)) : ( localize(6077, "Disable {0} from sync", element.item.name));
+            const title = disabled ? ( localize(6932, "Enable {0} for sync", element.item.name)) : ( localize(6933, "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(() => {
@@ -121,35 +214,60 @@ class PluginInstalledItemRenderer {
             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() {
+    constructor(_renderActions) {
+        this._renderActions = _renderActions;
         this.templateId = "pluginRemoteItem";
+        this._templates = ( new Set());
+        this._focusedIndex = -1;
     }
     renderTemplate(container) {
-        container.classList.add("mcp-server-item");
-        const typeIcon = append(container, $(".mcp-server-icon"));
-        typeIcon.classList.add(...ThemeIcon.asClassNameArray(pluginIcon));
-        const details = append(container, $(".mcp-server-details"));
-        const nameRow = append(details, $(".mcp-server-name"));
+        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, $(".mcp-server-description"));
-        const status = append(container, $(".mcp-server-status"));
-        return {
+        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,
-            typeIcon,
             name,
             badge,
             description,
-            status
+            metadata,
+            status,
+            actions,
+            disposables: ( new DisposableStore()),
+            currentIndex: -1
         };
+        this._templates.add(template);
+        return template;
     }
-    renderElement(element, _index, templateData) {
+    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;
@@ -168,76 +286,175 @@ class PluginRemoteItemRenderer {
             templateData.description.style.display = "none";
         }
         templateData.container.classList.toggle("disabled", element.item.enabled === false);
-        templateData.status.className = "mcp-server-status";
+        templateData.metadata.textContent = ( localize(6934, "Remote agent host"));
+        templateData.status.className = "plugin-list-item-status";
         if (element.item.enabled === false) {
-            templateData.status.textContent = ( localize(6078, "Disabled"));
+            templateData.status.textContent = getRemotePluginDisabledLabel(element.item);
             templateData.status.classList.add("disabled");
-            return;
+        } 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;
+            }
         }
-        switch (element.item.status) {
-        case "loading":
-            templateData.status.textContent = ( localize(6079, "Loading"));
-            templateData.status.classList.add("running");
-            break;
-        case "loaded":
-            templateData.status.textContent = ( localize(6080, "Loaded"));
-            templateData.status.classList.add("running");
-            break;
-        case "degraded":
-            templateData.status.textContent = ( localize(6081, "Warning"));
-            templateData.status.classList.add("disabled");
-            break;
-        case "error":
-            templateData.status.textContent = ( localize(6082, "Error"));
-            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) {}
+    disposeTemplate(templateData) {
+        this._templates.delete(templateData);
+        templateData.disposables.dispose();
+    }
+}
+function getRemotePluginDisabledLabel(item) {
+    return getCustomizationDisabledLabel(item.disabledReason);
 }
 const PLUGIN_MARKETPLACE_ITEM_TEMPLATE_ID = "pluginMarketplaceItem";
-class PluginMarketplaceItemProvider {
-    constructor(pluginInstallService, agentPluginService) {
+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;
     }
-    getLabel(element) {
-        return element.item.name;
-    }
-    getPublisherDisplayName(element) {
-        return element.item.marketplace;
+    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(6935, "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;
     }
-    getDescription(element) {
-        return element.item.description;
+    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(6936, "Installed"));
+            templateData.installButton.enabled = false;
+            this.updateInstallButtonTabbability(templateData);
+            return;
+        }
+        templateData.installButton.label = ( localize(6937, "Install"));
+        templateData.installButton.enabled = true;
+        this.updateInstallButtonTabbability(templateData);
+        templateData.elementDisposables.add(templateData.installButton.onDidClick(async event => {
+            EventHelper.stop(event, true);
+            templateData.installButton.label = ( localize(6938, "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(6936, "Installed"));
+                this.updateInstallButtonTabbability(templateData);
+            } catch (error) {
+                templateData.installButton.label = ( localize(6937, "Install"));
+                templateData.installButton.enabled = true;
+                this.updateInstallButtonTabbability(templateData);
+                this.notificationService.error(( localize(6939, "Unable to install plugin: {0}", getErrorMessage(error))));
+            }
+        }));
     }
-    getInstallState(element) {
-        const installUri = this.pluginInstallService.getPluginInstallUri(this._toInstallable(element.item));
-        const isInstalled = ( this.agentPluginService.plugins.get().some(p => isEqual(p.uri, installUri)));
-        return isInstalled ? GalleryItemInstallState.Installed : GalleryItemInstallState.Uninstalled;
+    setFocusedIndex(index) {
+        this._focusedIndex = index;
+        for (const template of this._templates) {
+            this.updateInstallButtonTabbability(template);
+        }
     }
-    async install(element) {
-        await this.pluginInstallService.installPlugin({
-            ...this._toInstallable(element.item),
-            readmeUri: element.item.readmeUri
-        });
+    updateInstallButtonTabbability(templateData) {
+        templateData.installButton.element.tabIndex = templateData.installButton.enabled && templateData.currentIndex === this._focusedIndex ? 0 : -1;
     }
-    onDidChangeInstallState(_element, listener) {
-        return runOnChange(this.agentPluginService.plugins, () => listener());
+    isRecommended(item) {
+        return ( this.pluginMarketplaceService.recommendedPlugins.get().has(getMarketplaceRecommendationKey(item)));
     }
-    _toInstallable(item) {
-        return {
-            name: item.name,
-            description: item.description,
-            version: "",
-            sourceDescriptor: item.sourceDescriptor,
-            source: item.source,
-            marketplace: item.marketplace,
-            marketplaceReference: item.marketplaceReference,
-            marketplaceType: item.marketplaceType
-        };
+    disposeTemplate(templateData) {
+        this._templates.delete(templateData);
+        templateData.elementDisposables.dispose();
+        templateData.templateDisposables.dispose();
     }
 }
 function installedPluginToItem(plugin, labelService) {
@@ -259,6 +476,7 @@ function marketplacePluginToItem(plugin) {
         kind: AgentPluginItemKind.Marketplace,
         name: plugin.name,
         description: plugin.description,
+        version: plugin.version,
         source: plugin.source,
         sourceDescriptor: plugin.sourceDescriptor,
         marketplace: plugin.marketplace,
@@ -267,8 +485,105 @@ function marketplacePluginToItem(plugin) {
         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(6940, "1 agent")), ( localize(6941, "{0} agents", plugin.agents.get().length))),
+        plugin.agents.get()
+    );
+    appendContributionEntry(
+        entries,
+        formatContributionLabel(plugin.skills.get().length, ( localize(6942, "1 skill")), ( localize(6943, "{0} skills", plugin.skills.get().length))),
+        plugin.skills.get()
+    );
+    appendContributionEntry(
+        entries,
+        formatContributionLabel(plugin.commands.get().length, ( localize(6944, "1 command")), ( localize(6945, "{0} commands", plugin.commands.get().length))),
+        plugin.commands.get()
+    );
+    appendContributionEntry(
+        entries,
+        formatContributionLabel(plugin.instructions.get().length, ( localize(6946, "1 instruction")), ( localize(6947, "{0} instructions", plugin.instructions.get().length))),
+        plugin.instructions.get()
+    );
+    appendContributionEntry(
+        entries,
+        formatContributionLabel(plugin.mcpServerDefinitions.get().length, ( localize(6948, "1 MCP server")), ( localize(6949, "{0} MCP servers", plugin.mcpServerDefinitions.get().length))),
+        ( plugin.mcpServerDefinitions.get().map(server => ({
+            name: server.name
+        })))
+    );
+    appendContributionEntry(entries, formatContributionLabel(plugin.hooks.get().length, ( localize(6950, "1 hook")), ( localize(6951, "{0} hooks", plugin.hooks.get().length))), ( plugin.hooks.get().map(hook => ({
+        name: hook.originalId,
+        description: ( localize(6952, "{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(6953, "Loading");
+    case "loaded":
+        return localize(6954, "Loaded");
+    case "degraded":
+        return localize(6955, "Warning");
+    case "error":
+        return localize(6956, "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,
@@ -281,9 +596,11 @@ let PluginListWidget = class PluginListWidget extends Disposable {
         commandService,
         harnessService,
         itemsModel,
-        configurationService
+        configurationService,
+        notificationService
     ) {
         super();
+        this.marketplaceBrowsingAvailable = marketplaceBrowsingAvailable;
         this.instantiationService = instantiationService;
         this.agentPluginService = agentPluginService;
         this.pluginMarketplaceService = pluginMarketplaceService;
@@ -297,27 +614,45 @@ let PluginListWidget = class PluginListWidget extends Disposable {
         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.displayEntries = [];
         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.element = $(".mcp-list-widget");
+        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)) {
@@ -326,7 +661,12 @@ let PluginListWidget = class PluginListWidget extends Disposable {
         }));
         this._register({
             dispose: () => {
-                this.marketplaceCts?.dispose();
+                this.delayedFilter.cancel();
+                this.delayedMarketplaceSearch.cancel();
+                this.marketplaceCts?.dispose(true);
+                this.marketplaceCts = undefined;
+                this.marketplaceSnapshotCts?.dispose(true);
+                this.marketplaceSnapshotCts = undefined;
             }
         });
     }
@@ -334,16 +674,16 @@ let PluginListWidget = class PluginListWidget extends Disposable {
         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(6083, "Plugins"));
+        sectionTitle.textContent = ( localize(6957, "Plugins"));
         const sectionTitleDescription = append(this.sectionTitleHeader, $("p.section-title-description"));
         const sectionTitleDescriptionText = append(sectionTitleDescription, $("span.section-title-description-text"));
         sectionTitleDescriptionText.textContent = ( localize(
-            6084,
+            6958,
             "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(6085, "Learn more about agent plugins"));
+        this.sectionLink.textContent = ( localize(6959, "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();
@@ -366,36 +706,49 @@ let PluginListWidget = class PluginListWidget extends Disposable {
             }, targetWindow)
         );
         this._register(headerObserver.observe(this.sectionTitleHeader));
+        this.marketplaceBackContainer = append(this.element, $(".plugin-marketplace-back-container"));
+        this.marketplaceBackContainer.style.display = "none";
+        const backToInstalledLabel = ( localize(6960, "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(6086, "Type to search...")),
+            placeholder: ( localize(6961, "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 backButtonContainer = append(this.buttonContainer, $(".list-add-button-container"));
-        const backToInstalledLabel = ( localize(6087, "Back to Installed Plugins"));
-        this.backButton = this._register(( new Button(backButtonContainer, {
-            ...defaultButtonStyles,
-            secondary: true,
-            supportIcons: true,
-            title: backToInstalledLabel,
-            ariaLabel: backToInstalledLabel
-        })));
-        this.backButton.label = `$(${Codicon.arrowLeft.id}) ${( localize(6088, "Back"))}`;
-        this.backButton.element.classList.add("list-add-button");
-        backButtonContainer.style.display = "none";
-        this._register(this.backButton.onDidClick(() => this.toggleBrowseMode(false)));
         const browseButtonContainer = append(this.buttonContainer, $(".list-add-button-container"));
-        const browseMarketplaceLabel = ( localize(6089, "Browse Marketplace"));
+        const browseMarketplaceLabel = ( localize(6962, "Browse Marketplace"));
         this.browseButton = this._register(( new Button(browseButtonContainer, {
             ...defaultButtonStyles,
             secondary: true,
@@ -404,13 +757,12 @@ let PluginListWidget = class PluginListWidget extends Disposable {
             ariaLabel: browseMarketplaceLabel
         })));
         this.browseButton.element.classList.add("list-add-button");
-        this._register(this.browseButton.onDidClick(() => this.runPrimaryButtonAction()));
+        browseButtonContainer.style.display = "none";
         this.addButtonContainer = append(this.buttonContainer, $(".list-add-button-container"));
-        const addPluginLabel = ( localize(6090, "Add Plugin"));
+        const addPluginLabel = ( localize(6963, "Add Plugin"));
         this.addButtonSimple = this._register(( new Button(this.addButtonContainer, {
             ...defaultButtonStyles,
             secondary: true,
-            supportIcons: true,
             title: addPluginLabel,
             ariaLabel: addPluginLabel
         })));
@@ -419,7 +771,6 @@ let PluginListWidget = class PluginListWidget extends Disposable {
         this.addButton = this._register(( new ButtonWithDropdown(this.addButtonContainer, {
             ...defaultButtonStyles,
             secondary: true,
-            supportIcons: true,
             contextMenuProvider: this.contextMenuService,
             addPrimaryActionToDropdown: false,
             actions: {
@@ -430,17 +781,17 @@ let PluginListWidget = class PluginListWidget extends Disposable {
         })));
         this.addButton.element.classList.add("list-add-button");
         this._register(this.addButton.onDidClick(() => this.runPrimaryAddAction()));
-        const createPluginLabel = ( localize(6091, "Create Plugin"));
-        this.createPluginButton = this._register(( new Button(this.buttonContainer, {
+        const updatePluginsLabel = ( localize(6964, "Update Plugins"));
+        this.updatePluginsButton = this._register(( new Button(this.buttonContainer, {
             ...defaultButtonStyles,
             secondary: true,
             supportIcons: true,
-            title: createPluginLabel,
-            ariaLabel: createPluginLabel
+            title: updatePluginsLabel,
+            ariaLabel: updatePluginsLabel
         })));
-        this.createPluginButton.element.classList.add("list-icon-button");
-        this.createPluginButton.label = `$(${Codicon.newFile.id})`;
-        this._register(this.createPluginButton.onDidClick(() => this.runCreatePluginAction()));
+        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"));
@@ -449,17 +800,50 @@ let PluginListWidget = class PluginListWidget extends Disposable {
         const disabledHeader = append(this.disabledContainer, $(".empty-state-header"));
         this.disabledIcon = append(disabledHeader, $(".empty-icon"));
         const disabledText = append(disabledHeader, $(".empty-text"));
-        disabledText.textContent = ( localize(6092, "Plugins are disabled"));
+        disabledText.textContent = ( localize(6965, "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 installedRenderer = ( new PluginInstalledItemRenderer(this.harnessService));
-        const remoteRenderer = ( new PluginRemoteItemRenderer());
-        const marketplaceRenderer = ( new GalleryItemRenderer(PLUGIN_MARKETPLACE_ITEM_TEMPLATE_ID, ( new PluginMarketplaceItemProvider(this.pluginInstallService, this.agentPluginService))));
+        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
@@ -468,27 +852,41 @@ let PluginListWidget = class PluginListWidget extends Disposable {
                 setRowLineHeight: false,
                 horizontalScrolling: false,
                 accessibilityProvider: {
-                    getAriaLabel(element) {
+                    getAriaLabel: element => {
                         if (element.type === "group-header") {
                             return localize(
-                                6093,
+                                6966,
                                 "{0}, {1} items, {2}",
                                 element.label,
                                 element.count,
-                                element.collapsed ? ( localize(6094, "collapsed")) : ( localize(6095, "expanded"))
+                                element.collapsed ? ( localize(6967, "collapsed")) : ( localize(6968, "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(6096, "{0}. {1}", name, description)) : name;
+                        const nameAndDesc = description ? ( localize(6969, "{0}. {1}", name, description)) : name;
                         if (element.type === "plugin-item") {
                             const enabled = isContributionEnabled(element.item.plugin.enablement.get());
-                            return enabled ? ( localize(6097, "{0}. Enabled", nameAndDesc)) : ( localize(6098, "{0}. Disabled", nameAndDesc));
+                            const metadata = getInstalledPluginMetadata(element.item);
+                            const withMetadata = metadata ? ( localize(6970, "{0}. {1}", nameAndDesc, metadata)) : nameAndDesc;
+                            return enabled ? ( localize(6971, "{0}. Enabled", withMetadata)) : ( localize(6972, "{0}. Disabled", withMetadata));
+                        }
+                        if (element.type === "remote-item") {
+                            const status = getRemotePluginStatusLabel(element.item);
+                            return status ? ( localize(6973, "{0}. Remote agent host. Status: {1}", nameAndDesc, status)) : ( localize(6974, "{0}. Remote agent host", nameAndDesc));
+                        }
+                        if (element.type === "marketplace-item") {
+                            const recommended = ( this.pluginMarketplaceService.recommendedPlugins.get().has(getMarketplaceRecommendationKey(element.item)));
+                            const label = ( localize(6975, "{0}. From {1}", nameAndDesc, element.item.marketplace));
+                            return recommended ? ( localize(6976, "{0}. Recommended for this workspace", label)) : label;
                         }
                         return nameAndDesc;
                     },
-                    getWidgetAriaLabel() {
-                        return localize(6099, "Plugins");
+                    getWidgetAriaLabel: () => {
+                        return localize(6977, "Plugins");
                     }
                 },
                 openOnSingleClick: true,
@@ -497,6 +895,9 @@ let PluginListWidget = class PluginListWidget extends Disposable {
                         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}`;
                         }
@@ -512,7 +913,8 @@ let PluginListWidget = class PluginListWidget extends Disposable {
             if (e.element) {
                 if (e.element.type === "group-header") {
                     this.toggleGroup(e.element);
-                } else if (e.element.type === "plugin-item") {
+                } 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") {
@@ -520,19 +922,29 @@ let PluginListWidget = class PluginListWidget extends Disposable {
                 }
             }
         }));
+        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 => {
-            const plugins = this.agentPluginService.plugins.read(reader);
-            for (const plugin of plugins) {
-                plugin.enablement.read(reader);
-            }
-            if (!this.browseMode) {
-                void this.refresh();
-            }
+            this.agentPluginService.plugins.read(reader);
+            void this.refresh();
         }));
         this._register(this.pluginMarketplaceService.onDidChangeMarketplaces(() => {
-            if (!this.browseMode) {
-                void this.refresh();
+            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 => {
@@ -562,6 +974,8 @@ let PluginListWidget = class PluginListWidget extends Disposable {
     async refresh() {
         if (this.browseMode) {
             await this.queryMarketplace();
+        } else if (this.searchQuery.trim()) {
+            await this.queryPluginSearch();
         } else {
             this.filterPlugins();
         }
@@ -574,18 +988,20 @@ let PluginListWidget = class PluginListWidget extends Disposable {
         this.element.classList.toggle("access-disabled", disabled);
         if (disabled) {
             this.disabledIcon.className = "empty-icon";
-            this.disabledIcon.classList.add(...ThemeIcon.asClassNameArray(policyLocked ? Codicon.shield : pluginIcon));
+            this.disabledIcon.classList.add(
+                ...ThemeIcon.asClassNameArray(policyLocked ? Codicon.shield : Codicon.plug)
+            );
             clearNode(this.disabledMessage);
             this.disabledLinkListener.clear();
             if (policyLocked) {
                 this.disabledMessage.textContent = ( localize(
-                    6100,
+                    6978,
                     "Plugin integration in chat is disabled by your organization. Contact your organization administrator for more information."
                 ));
             } else {
-                this.disabledMessage.appendChild(createTextNode(( localize(6101, "Plugins are disabled in settings. "))));
+                this.disabledMessage.appendChild(createTextNode(( localize(6979, "Plugins are disabled in settings. "))));
                 const link = append(this.disabledMessage, $("a.mcp-disabled-settings-link"));
-                link.textContent = ( localize(6102, "Configure in settings."));
+                link.textContent = ( localize(6980, "Configure in settings."));
                 link.href = "#";
                 link.setAttribute("role", "button");
                 this.disabledLinkListener.value = addDisposableListener(link, "click", e => {
@@ -609,52 +1025,47 @@ let PluginListWidget = class PluginListWidget extends Disposable {
         if (!browseMarketplaceAvailable && this.browseMode) {
             this.toggleBrowseMode(false);
         }
-        this.browseButton.element.parentElement.style.display = this.browseMode ? "none" : "";
-        this.browseButton.label = `$(${Codicon.library.id}) ${( localize(6089, "Browse Marketplace"))}`;
+        this.marketplaceBackContainer.style.display = this.browseMode ? "" : "none";
+        this.browseButton.element.parentElement.style.display = "none";
+        this.browseButton.label = `$(${Codicon.library.id}) ${( localize(6962, "Browse Marketplace"))}`;
         this.browseButton.enabled = browseMarketplaceAvailable;
-        const browseTitle = browseMarketplaceAvailable ? ( localize(6089, "Browse Marketplace")) : ( localize(6103, "Browse Marketplace is not available in VS Code for the Web."));
+        const browseTitle = browseMarketplaceAvailable ? ( localize(6962, "Browse Marketplace")) : ( localize(6981, "Browse Marketplace is not available in VS Code for the Web."));
         this.browseButton.setTitle(browseTitle);
         this.browseButton.element.setAttribute("aria-label", browseTitle);
-        this.updateAddButton();
-        this.createPluginButton.enabled = true;
+        this.addButton.element.style.display = "none";
+        this.addButtonSimple.element.style.display = "none";
+        this.updatePluginsButton.element.style.display = "none";
+        this.updateInstalledCreateButtonLabel();
     }
-    isBrowseMarketplaceAvailable() {
-        return !isWeb;
-    }
-    updateAddButton() {
-        const actions = this.buildAddActions();
-        const [primary, ...dropdown] = actions;
-        const hasDropdown = dropdown.length > 0;
-        this.addButton.element.style.display = hasDropdown ? "" : "none";
-        this.addButtonSimple.element.style.display = hasDropdown ? "none" : "";
-        if (!primary) {
-            this.addButton.element.style.display = "none";
-            this.addButtonSimple.element.style.display = "none";
-            return;
+    updateInstalledCreateButtonLabel() {
+        if (this.installedCreateButton) {
+            this.installedCreateButton.label = this.narrowLayout ? ( localize(6982, "Create")) : ( localize(6983, "Create Plugin"));
         }
-        if (hasDropdown) {
-            this.addButton.label = this.formatActionLabel(primary);
-            this.addButton.enabled = primary.enabled !== false;
-            const addPrimaryTitle = primary.tooltip ?? primary.label;
-            this.addButton.primaryButton.setTitle(addPrimaryTitle);
-            this.addButton.primaryButton.element.setAttribute("aria-label", addPrimaryTitle);
-            const moreLabel = ( localize(6104, "More Plugin Add Actions..."));
-            this.addButton.dropdownButton.setTitle(moreLabel);
-            this.addButton.dropdownButton.element.setAttribute("aria-label", moreLabel);
-        } else {
-            this.addButtonSimple.label = this.formatActionLabel(primary);
-            this.addButtonSimple.enabled = primary.enabled !== false;
-            const addSimpleTitle = primary.tooltip ?? primary.label;
-            this.addButtonSimple.setTitle(addSimpleTitle);
-            this.addButtonSimple.element.setAttribute("aria-label", addSimpleTitle);
+    }
+    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(6105, "Install Plugin from Source")),
-            tooltip: ( localize(6105, "Install Plugin from Source")),
-            icon: Codicon.add,
+            label: ( localize(6984, "Install from Source")),
+            tooltip: ( localize(6985, "Install Plugin from Source")),
             run: async () => {
                 const installed = await this.commandService.executeCommand("workbench.action.chat.installPluginFromSource", {
                     skipReveal: true
@@ -675,12 +1086,6 @@ let PluginListWidget = class PluginListWidget extends Disposable {
             () => this.runPluginAction(action)
         )))));
     }
-    async runPrimaryButtonAction() {
-        if (!this.isBrowseMarketplaceAvailable()) {
-            return;
-        }
-        this.toggleBrowseMode(!this.browseMode);
-    }
     async runPrimaryAddAction() {
         const [primary] = this.buildAddActions();
         if (primary) {
@@ -690,11 +1095,706 @@ let PluginListWidget = class PluginListWidget extends Disposable {
     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(6969, "{0}. {1}", name, description)) : name;
+        if (element.type === "plugin-item") {
+            const metadata = getInstalledPluginMetadata(element.item);
+            const withMetadata = metadata ? ( localize(6970, "{0}. {1}", nameAndDescription, metadata)) : nameAndDescription;
+            return derived(
+                this,
+                reader => isContributionEnabled(element.item.plugin.enablement.read(reader)) ? ( localize(6971, "{0}. Enabled", withMetadata)) : ( localize(6972, "{0}. Disabled", withMetadata))
+            );
+        }
+        if (element.type === "remote-item") {
+            const statusLabel = getRemotePluginStatusLabel(element.item);
+            return statusLabel ? ( localize(
+                6973,
+                "{0}. Remote agent host. Status: {1}",
+                nameAndDescription,
+                statusLabel
+            )) : ( localize(6974, "{0}. Remote agent host", nameAndDescription));
+        }
+        const marketplaceLabel = ( localize(6975, "{0}. From {1}", nameAndDescription, element.item.marketplace));
+        return ( this.pluginMarketplaceService.recommendedPlugins.get().has(getMarketplaceRecommendationKey(element.item))) ? ( localize(6976, "{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(6986, "Exclude {0} from Workspace", item.name)) : ( localize(6987, "Exclude {0} from Profile", item.name))) : (workspaceScope ? ( localize(6988, "Include {0} in Workspace", item.name)) : ( localize(6989, "Include {0} for Profile", item.name)));
+            toggle.disabled = blocked;
+            toggle.checked = checked;
+            toggle.setAriaLabel(blocked ? ( localize(6990, "{0} is managed by your organization", item.name)) : toggleLabel, blocked ? ( localize(6991, "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(6992, "{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(6993, "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(6993, "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(6994, "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(6995, "No plugins are installed."));
+        } else {
+            this.createPluginSectionList(installedList, ( localize(6994, "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(6996, "Remote session plugins")), ( localize(6997, "Plugins configured directly on the active remote agent host.")), "remote-plugins-section", remoteItems.length);
+            remoteList.classList.add("plugin-inventory-list");
+            this.createPluginSectionList(remoteList, ( localize(6996, "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(6983, "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(6998, "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(6999, "Available")),
+        description = ( localize(7000, "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(7001, "Loading marketplace...")), PLUGIN_MARKETPLACE_ITEM_HEIGHT);
+            } else {
+                const empty = append(availableList, $(".plugin-inventory-empty"));
+                empty.textContent = ( localize(7002, "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(6984, "Install from Source"));
+        const installTooltip = ( localize(6985, "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(7003, "{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(6930, "Local"));
+            source.title = ( localize(6931, "Installed from a local source"));
+        }
+        const description = append(details, $(".plugin-list-item-description"));
+        description.textContent = truncateToFirstLine(item.description || ( localize(7004, "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(6993, "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(6986, "Exclude {0} from Workspace", item.name)) : ( localize(6987, "Exclude {0} from Profile", item.name))) : (workspaceScope ? ( localize(6988, "Include {0} in Workspace", item.name)) : ( localize(6989, "Include {0} for Profile", item.name)));
+            const accessibleLabel = blocked ? ( localize(6990, "{0} is managed by your organization", item.name)) : toggleLabel;
+            toggle.disabled = blocked;
+            toggle.checked = checked;
+            toggle.setAriaLabel(accessibleLabel, blocked ? ( localize(6991, "This plugin is managed by your organization.")) : toggleLabel);
+            row.classList.toggle("disabled", !checked || blocked);
+            primaryAction.setAttribute("aria-label", ( localize(7003, "{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(6992, "{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(7005, "{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(7006, "Remote"));
+        source.title = ( localize(6934, "Remote agent host"));
+        const description = append(details, $(".plugin-list-item-description"));
+        description.textContent = item.description || ( localize(7004, "No description provided."));
+        const metadata = append(details, $(".plugin-list-item-metadata"));
+        metadata.textContent = ( localize(7007, "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(6993, "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(7008, "{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(7004, "No description provided.")));
+        const actions = append(row, $(".plugin-list-item-action"));
+        const install = this.cardDisposables.add(( new Button(actions, {
+            ...defaultButtonStyles,
+            ariaLabel: ( localize(7009, "Install {0}", item.name))
+        })));
+        install.element.classList.add("plugin-list-item-install-button");
+        install.label = ( localize(6937, "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(7010, "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(7011, "Recommended for this workspace")), ( localize(7012, "Plugins recommended by workspace configuration.")), "plugin-marketplace-recommended-section");
+            recommendedGrid.classList.add("plugin-inventory-list");
+            this.createPluginSectionList(recommendedGrid, ( localize(7011, "Recommended for this workspace")), ( recommended.map(item => ({
+                type: "marketplace-item",
+                item
+            }))));
+        }
+        const allGrid = this.renderCardSection(content, ( localize(7013, "All plugins")), ( localize(7014, "Plugins available from configured marketplaces.")), "plugin-marketplace-all-section");
+        allGrid.classList.add("plugin-inventory-list");
+        this.createPluginSectionList(allGrid, ( localize(7013, "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(6938, "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(6936, "Installed"));
+            void this.refresh();
+        } catch (error) {
+            button.label = ( localize(6937, "Install"));
+            button.enabled = true;
+            this.notificationService.error(( localize(6939, "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;
@@ -703,17 +1803,28 @@ let PluginListWidget = class PluginListWidget extends Disposable {
             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.browseButton.element.parentElement.style.display = browse ? "none" : "";
-        this.backButton.element.parentElement.style.display = browse ? "" : "none";
-        this.searchInput.setPlaceHolder(browse ? ( localize(6106, "Search plugin marketplace...")) : ( localize(6086, "Type to search...")));
+        this.updateToolbarActions();
+        this.searchInput.setPlaceHolder(browse ? ( localize(7015, "Search plugin marketplace...")) : ( localize(6961, "Type to search...")));
         if (browse) {
             void this.queryMarketplace();
         } else {
-            this.marketplaceCts?.dispose(true);
             this.marketplaceItems = [];
             void this.filterPlugins();
         }
@@ -724,55 +1835,178 @@ let PluginListWidget = class PluginListWidget extends Disposable {
     async queryMarketplace() {
         this.marketplaceCts?.dispose(true);
         const cts = this.marketplaceCts = ( new CancellationTokenSource());
-        this.emptyContainer.style.display = "flex";
-        this.listContainer.style.display = "none";
-        this.emptyText.textContent = ( localize(6107, "Loading marketplace..."));
+        const query = this.searchQuery.toLowerCase().trim();
+        const browseMode = this.browseMode;
+        this.showEmptySurface();
+        this.emptyText.textContent = ( localize(7001, "Loading marketplace..."));
         this.emptySubtext.textContent = "";
         try {
             const plugins = await this.pluginMarketplaceService.fetchMarketplacePlugins(cts.token);
-            if (cts.token.isCancellationRequested) {
+            if (!this.isCurrentMarketplaceRequest(cts, query, browseMode)) {
                 return;
             }
-            const query = this.searchQuery.toLowerCase().trim();
+            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 => 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));
-            this.updateMarketplaceList();
+            if (query) {
+                this.updateSearchResultsList();
+            } else {
+                this.updateMarketplaceList();
+            }
         } catch {
-            if (!cts.token.isCancellationRequested) {
+            if (this.isCurrentMarketplaceRequest(cts, query, browseMode)) {
                 this.marketplaceItems = [];
-                this.emptyContainer.style.display = "flex";
-                this.listContainer.style.display = "none";
-                this.emptyText.textContent = ( localize(6108, "Unable to load marketplace"));
-                this.emptySubtext.textContent = ( localize(6109, "Check your connection and try again"));
+                this.showEmptySurface();
+                this.emptyText.textContent = ( localize(7016, "Unable to load marketplace"));
+                this.emptySubtext.textContent = ( localize(7017, "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(
+                    7018,
+                    "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.emptyContainer.style.display = "flex";
-            this.listContainer.style.display = "none";
+            this.showEmptySurface();
             if (this.searchQuery.trim()) {
-                this.emptyText.textContent = ( localize(6110, "No plugins match '{0}'", this.searchQuery));
-                this.emptySubtext.textContent = ( localize(6111, "Try a different search term"));
+                this.emptyText.textContent = ( localize(7019, "No plugins match '{0}'", this.searchQuery));
+                this.emptySubtext.textContent = ( localize(7020, "Try a different search term"));
             } else {
-                this.emptyText.textContent = ( localize(6112, "No plugins available"));
+                this.emptyText.textContent = ( localize(7010, "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.emptyContainer.style.display = "none";
-            this.listContainer.style.display = "";
+            this.updateSearchResultsList();
         }
-        const entries = ( this.marketplaceItems.map(item => ({
-            type: "marketplace-item",
-            item
-        })));
-        this.list.splice(0, this.list.length, entries);
+    }
+    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(7021, "No plugins match '{0}'", this.searchQuery));
+            this.emptySubtext.textContent = ( localize(7020, "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(7022, "Installed")), undefined, "installed-plugins-section", installedCount);
+            installedList.classList.add("plugin-inventory-list");
+            this.createPluginSectionList(installedList, ( localize(7022, "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(7023, "Available to install")), undefined);
+        }
+        this.schedulePluginSectionLayout();
+        this.list.splice(0, this.list.length, []);
     }
     async getRemotePluginItems(query) {
         if (!this.harnessService.getActiveDescriptor().itemProvider) {
@@ -787,116 +2021,25 @@ let PluginListWidget = class PluginListWidget extends Disposable {
             return [];
         }
     }
-    getRemoteGroupMetadata(groupKey) {
-        return {
-            group: groupKey ?? "remote-host",
-            label: ( localize(6113, "Remote")),
-            description: ( localize(
-                6114,
-                "Plugins configured directly on the remote agent host and available without local sync."
-            ))
-        };
-    }
-    appendGroup(entries, header, items, isFirst) {
-        if (items.length === 0) {
-            return isFirst;
-        }
-        const collapsed = ( this.collapsedGroups.has(header.group));
-        entries.push({
-            type: "group-header",
-            id: `plugin-group-${header.group}`,
-            group: header.group,
-            label: header.label,
-            icon: pluginIcon,
-            count: items.length,
-            isFirst,
-            description: header.description,
-            collapsed
-        });
-        if (!collapsed) {
-            entries.push(...items);
-        }
-        return false;
-    }
     async filterPlugins() {
+        const generation = ++this.filterGeneration;
         const query = this.searchQuery.toLowerCase().trim();
+        const browseMode = this.browseMode;
         const allPlugins = this.agentPluginService.plugins.get();
-        this.remoteItems = [...(await this.getRemotePluginItems(query))];
+        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)
-        );
-        if (this.remoteItems.length === 0 && this.installedItems.length === 0) {
-            this.emptyContainer.style.display = "flex";
-            this.listContainer.style.display = "none";
-            if (this.searchQuery.trim()) {
-                this.emptyText.textContent = ( localize(6115, "No plugins match '{0}'", this.searchQuery));
-                this.emptySubtext.textContent = ( localize(6111, "Try a different search term"));
-            } else if (this.harnessService.getActiveDescriptor().itemProvider) {
-                this.emptyText.textContent = ( localize(6116, "No plugins configured"));
-                this.emptySubtext.textContent = ( localize(
-                    6117,
-                    "Use the toolbar to add remote plugins or install plugins from a source."
-                ));
-            } else {
-                this.emptyText.textContent = ( localize(6118, "No plugins installed"));
-                this.emptySubtext.textContent = ( localize(6119, "Browse the marketplace to discover and install plugins"));
-            }
-        } else {
-            this.emptyContainer.style.display = "none";
-            this.listContainer.style.display = "";
-        }
-        const enabledPlugins = this.installedItems.filter(item => isContributionEnabled(item.plugin.enablement.get()));
-        const disabledPlugins = this.installedItems.filter(item => !isContributionEnabled(item.plugin.enablement.get()));
-        const entries = [];
-        let isFirst = true;
-        const installedNames = ( new Set(( this.installedItems.map(item => item.name.toLowerCase()))));
-        const remoteGroups = ( new Map());
-        for (const item of this.remoteItems) {
-            const key = item.groupKey ?? "remote-host";
-            if (key === "remote-client") {
-                continue;
-            }
-            if (item.name && ( installedNames.has(item.name.toLowerCase()))) {
-                continue;
-            }
-            let group = remoteGroups.get(key);
-            if (!group) {
-                group = [];
-                remoteGroups.set(key, group);
-            }
-            group.push({
-                type: "remote-item",
-                item
-            });
-        }
-        for (const [groupKey, items] of remoteGroups) {
-            isFirst = this.appendGroup(entries, this.getRemoteGroupMetadata(groupKey), items, isFirst);
-        }
-        if (enabledPlugins.length > 0) {
-            isFirst = this.appendGroup(entries, {
-                group: "enabled",
-                label: ( localize(6120, "Enabled Locally")),
-                description: ( localize(
-                    6121,
-                    "Plugins installed in this client and available for syncing to the remote session."
-                ))
-            }, ( enabledPlugins.map(item => ({
-                type: "plugin-item",
-                item
-            }))), isFirst);
-        }
-        if (disabledPlugins.length > 0) {
-            this.appendGroup(entries, {
-                group: "disabled",
-                label: ( localize(6122, "Disabled Locally")),
-                description: ( localize(6123, "Plugins installed in this client but currently disabled."))
-            }, ( disabledPlugins.map(item => ({
-                type: "plugin-item",
-                item
-            }))), isFirst);
+        ).sort(compareInstalledPluginItems);
+        if (!query) {
+            this.renderPluginHome();
+            this._onDidChangeItemCount.fire(this.itemCount);
+            return;
         }
-        this.displayEntries = entries;
-        this.list.splice(0, this.list.length, this.displayEntries);
+        this.updateSearchResultsList();
         this._onDidChangeItemCount.fire(this.itemCount);
     }
     get itemCount() {
@@ -934,7 +2077,11 @@ let PluginListWidget = class PluginListWidget extends Disposable {
     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;
@@ -949,57 +2096,103 @@ let PluginListWidget = class PluginListWidget extends Disposable {
         }
         const headerHeight = this.sectionTitleHeader.offsetHeight;
         this.lastHeaderHeight = headerHeight;
-        const listHeight = Math.max(0, height - searchBarHeight - 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() {
-        this.list.domFocus();
-        if (this.list.length > 0) {
+        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 === "marketplace-item") {
+        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 = [];
-        if (entry.type === "plugin-item") {
-            const groups = getInstalledPluginContextMenuActions(entry.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();
-            }
-        } else {
-            const itemActions = entry.item.actions ?? [];
-            for (const itemAction of itemActions) {
-                actions.push(( new Action(
-                    itemAction.id,
-                    itemAction.label,
-                    itemAction.icon ? ThemeIcon.asClassName(itemAction.icon) : undefined,
-                    itemAction.enabled !== false,
-                    () => itemAction.run()
-                )));
-            }
-        }
+        const actions = entry.type === "plugin-item" ? this.getInstalledPluginActions(entry.item, disposables) : this.getRemotePluginActions(entry.item);
         this.contextMenuService.showContextMenu({
             getAnchor: () => e.anchor,
             getActions: () => actions,
@@ -1007,6 +2200,6 @@ let PluginListWidget = class PluginListWidget extends Disposable {
         });
     }
 };
-PluginListWidget = ( __decorate([( __param(0, IInstantiationService)), ( __param(1, IAgentPluginService)), ( __param(2, IPluginMarketplaceService)), ( __param(3, IPluginInstallService)), ( __param(4, IOpenerService)), ( __param(5, IContextViewService)), ( __param(6, IContextMenuService)), ( __param(7, IHoverService)), ( __param(8, ILabelService)), ( __param(9, ICommandService)), ( __param(10, ICustomizationHarnessService)), ( __param(11, IAICustomizationItemsModel)), ( __param(12, IConfigurationService))], PluginListWidget));
+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 };
+export { PluginListWidget, PluginMarketplaceSnapshotModel, getInstalledPluginMetadata, getRemotePluginDisabledLabel, getToggledPluginEnablementState, isCurrentPluginMarketplaceRequest, shouldLoadPluginMarketplaceSnapshot };