@codingame/monaco-vscode-chat-service-override 31.0.0 → 32.0.0

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

@@ -10,7 +10,7 @@ import { IInstantiationService } from '@codingame/monaco-vscode-api/vscode/vs/pl
 import { WorkbenchList } from '@codingame/monaco-vscode-api/vscode/vs/platform/list/browser/listService';
 import { ThemeIcon } from '@codingame/monaco-vscode-api/vscode/vs/base/common/themables';
 import { Codicon } from '@codingame/monaco-vscode-api/vscode/vs/base/common/codicons';
-import { Button } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/button/button';
+import { Button, ButtonWithDropdown } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/button/button';
 import { defaultCheckboxStyles, defaultButtonStyles, defaultInputBoxStyles } from '@codingame/monaco-vscode-api/vscode/vs/platform/theme/browser/defaultStyles';
 import '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/index';
 import { IOpenerService } from '@codingame/monaco-vscode-api/vscode/vs/platform/opener/common/opener.service';
@@ -18,12 +18,12 @@ import { URI } from '@codingame/monaco-vscode-api/vscode/vs/base/common/uri';
 import { InputBox } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/inputbox/inputBox';
 import { IContextViewService, IContextMenuService } from '@codingame/monaco-vscode-api/vscode/vs/platform/contextview/browser/contextView.service';
 import { 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';
+import { CancellationTokenSource, CancellationToken } from '@codingame/monaco-vscode-api/vscode/vs/base/common/cancellation';
 import { Delayer } from '@codingame/monaco-vscode-api/vscode/vs/base/common/async';
-import { Separator } from '@codingame/monaco-vscode-api/vscode/vs/base/common/actions';
+import { Action, Separator } from '@codingame/monaco-vscode-api/vscode/vs/base/common/actions';
 import { isEqual, basename, dirname } from '@codingame/monaco-vscode-api/vscode/vs/base/common/resources';
-import { getDefaultHoverDelegate } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/hover/hoverDelegateFactory';
 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';
@@ -34,12 +34,13 @@ 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 { 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 { autorun } from '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/reactions/autorun';
 import { truncateToFirstLine } from './aiCustomizationListWidgetUtils.js';
+import { autorun } from '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/reactions/autorun';
 
 registerCss(aiCustomizationManagement);
 const $ = $$1;
@@ -61,6 +62,9 @@ class PluginItemDelegate {
         if (element.type === "marketplace-item") {
             return "pluginMarketplaceItem";
         }
+        if (element.type === "remote-item") {
+            return "pluginRemoteItem";
+        }
         return "pluginInstalledItem";
     }
 }
@@ -77,14 +81,12 @@ class PluginInstalledItemRenderer {
         const details = append(container, $(".mcp-server-details"));
         const name = append(details, $(".mcp-server-name"));
         const description = append(details, $(".mcp-server-description"));
-        const status = append(container, $(".mcp-server-status"));
         return {
             container,
             syncCheckboxContainer,
             typeIcon,
             name,
             description,
-            status,
             disposables: ( new DisposableStore())
         };
     }
@@ -100,25 +102,17 @@ class PluginInstalledItemRenderer {
         templateData.disposables.add(autorun(reader => {
             const enabled = isContributionEnabled(element.item.plugin.enablement.read(reader));
             templateData.container.classList.toggle("disabled", !enabled);
-            templateData.status.className = "mcp-server-status";
-            if (enabled) {
-                templateData.status.textContent = ( localize(5530, "Enabled"));
-                templateData.status.classList.add("running");
-            } else {
-                templateData.status.textContent = ( localize(5531, "Disabled"));
-                templateData.status.classList.add("disabled");
-            }
         }));
         const syncProvider = this._harnessService.getActiveDescriptor().syncProvider;
         if (syncProvider) {
             templateData.syncCheckboxContainer.style.display = "";
             const pluginUri = element.item.plugin.uri;
-            const synced = syncProvider.isSelected(pluginUri);
-            const title = synced ? ( localize(5532, "Remove {0} from sync", element.item.name)) : ( localize(5533, "Add {0} to sync", element.item.name));
-            const checkbox = templateData.disposables.add(( new Checkbox(title, synced, defaultCheckboxStyles)));
+            const disabled = syncProvider.isDisabled(pluginUri);
+            const title = disabled ? ( localize(5630, "Enable {0} for sync", element.item.name)) : ( localize(5631, "Disable {0} from sync", element.item.name));
+            const checkbox = templateData.disposables.add(( new Checkbox(title, !disabled, defaultCheckboxStyles)));
             templateData.syncCheckboxContainer.replaceChildren(checkbox.domNode);
             templateData.disposables.add(checkbox.onChange(() => {
-                syncProvider.toggleUri(pluginUri);
+                syncProvider.setDisabled(pluginUri, !checkbox.checked);
             }));
         } else {
             templateData.syncCheckboxContainer.style.display = "none";
@@ -129,6 +123,78 @@ class PluginInstalledItemRenderer {
         templateData.disposables.dispose();
     }
 }
+class PluginRemoteItemRenderer {
+    constructor() {
+        this.templateId = "pluginRemoteItem";
+    }
+    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"));
+        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 {
+            container,
+            typeIcon,
+            name,
+            badge,
+            description,
+            status
+        };
+    }
+    renderElement(element, _index, templateData) {
+        templateData.name.textContent = formatDisplayName(element.item.name);
+        if (element.item.badge) {
+            templateData.badge.textContent = element.item.badge;
+            templateData.badge.style.display = "";
+            templateData.badge.title = element.item.badgeTooltip ?? "";
+        } else {
+            templateData.badge.textContent = "";
+            templateData.badge.style.display = "none";
+            templateData.badge.title = "";
+        }
+        if (element.item.description) {
+            templateData.description.textContent = truncateToFirstLine(element.item.description);
+            templateData.description.style.display = "";
+        } else {
+            templateData.description.textContent = "";
+            templateData.description.style.display = "none";
+        }
+        templateData.container.classList.toggle("disabled", element.item.enabled === false);
+        templateData.status.className = "mcp-server-status";
+        if (element.item.enabled === false) {
+            templateData.status.textContent = ( localize(5632, "Disabled"));
+            templateData.status.classList.add("disabled");
+            return;
+        }
+        switch (element.item.status) {
+        case "loading":
+            templateData.status.textContent = ( localize(5633, "Loading"));
+            templateData.status.classList.add("running");
+            break;
+        case "loaded":
+            templateData.status.textContent = ( localize(5634, "Loaded"));
+            templateData.status.classList.add("running");
+            break;
+        case "degraded":
+            templateData.status.textContent = ( localize(5635, "Warning"));
+            templateData.status.classList.add("disabled");
+            break;
+        case "error":
+            templateData.status.textContent = ( localize(5636, "Error"));
+            templateData.status.classList.add("disabled");
+            break;
+        default:
+            templateData.status.textContent = "";
+            break;
+        }
+    }
+    disposeTemplate(_templateData) {}
+}
 class PluginMarketplaceItemRenderer {
     constructor(pluginInstallService, agentPluginService) {
         this.pluginInstallService = pluginInstallService;
@@ -165,7 +231,7 @@ class PluginMarketplaceItemRenderer {
     renderElement(element, _index, templateData) {
         templateData.elementDisposables.clear();
         templateData.name.textContent = element.item.name;
-        templateData.publisher.textContent = element.item.marketplace ? ( localize(5534, "by {0}", element.item.marketplace)) : "";
+        templateData.publisher.textContent = element.item.marketplace ? ( localize(5637, "by {0}", element.item.marketplace)) : "";
         templateData.description.textContent = element.item.description || "";
         const installUri = this.pluginInstallService.getPluginInstallUri({
             name: element.item.name,
@@ -179,14 +245,14 @@ class PluginMarketplaceItemRenderer {
         });
         const isAlreadyInstalled = ( this.agentPluginService.plugins.get().some(p => isEqual(p.uri, installUri)));
         if (isAlreadyInstalled) {
-            templateData.installButton.label = ( localize(5535, "Installed"));
+            templateData.installButton.label = ( localize(5638, "Installed"));
             templateData.installButton.enabled = false;
             return;
         }
-        templateData.installButton.label = ( localize(5536, "Install"));
+        templateData.installButton.label = ( localize(5639, "Install"));
         templateData.installButton.enabled = true;
         templateData.elementDisposables.add(templateData.installButton.onDidClick(async () => {
-            templateData.installButton.label = ( localize(5537, "Installing..."));
+            templateData.installButton.label = ( localize(5640, "Installing..."));
             templateData.installButton.enabled = false;
             try {
                 await this.pluginInstallService.installPlugin({
@@ -200,9 +266,9 @@ class PluginMarketplaceItemRenderer {
                     marketplaceType: element.item.marketplaceType,
                     readmeUri: element.item.readmeUri
                 });
-                templateData.installButton.label = ( localize(5535, "Installed"));
+                templateData.installButton.label = ( localize(5638, "Installed"));
             } catch (_e) {
-                templateData.installButton.label = ( localize(5536, "Install"));
+                templateData.installButton.label = ( localize(5639, "Install"));
                 templateData.installButton.enabled = true;
             }
         }));
@@ -213,7 +279,7 @@ class PluginMarketplaceItemRenderer {
     }
 }
 function installedPluginToItem(plugin, labelService) {
-    const name = plugin.label ?? basename(plugin.uri);
+    const name = plugin.label || basename(plugin.uri);
     const description = plugin.fromMarketplace?.description ?? labelService.getUriLabel(dirname(plugin.uri), {
         relative: true
     });
@@ -272,13 +338,16 @@ let PluginListWidget = class PluginListWidget extends Disposable {
         this._onDidChangeItemCount = this._register(( new Emitter()));
         this.onDidChangeItemCount = this._onDidChangeItemCount.event;
         this.disabledLinkListener = this._register(( new MutableDisposable()));
+        this.addDropdownActions = this._register(( new DisposableStore()));
         this.installedItems = [];
+        this.remoteItems = [];
         this.displayEntries = [];
         this.marketplaceItems = [];
         this.searchQuery = "";
         this.browseMode = false;
         this.lastHeight = 0;
         this.lastWidth = 0;
+        this._layoutDeferred = false;
         this.collapsedGroups = ( new Set());
         this.delayedFilter = ( new Delayer(200));
         this.delayedMarketplaceSearch = ( new Delayer(400));
@@ -300,7 +369,7 @@ let PluginListWidget = class PluginListWidget extends Disposable {
         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(5538, "Type to search...")),
+            placeholder: ( localize(5641, "Type to search...")),
             inputBoxStyles: defaultInputBoxStyles
         })));
         this._register(this.searchInput.onDidChange(() => {
@@ -311,68 +380,54 @@ let PluginListWidget = class PluginListWidget extends Disposable {
                 this.delayedFilter.trigger(() => this.filterPlugins());
             }
         }));
-        const buttonContainer = append(this.searchAndButtonContainer, $(".list-button-group"));
-        const browseButtonContainer = append(buttonContainer, $(".list-add-button-container"));
+        this.buttonContainer = append(this.searchAndButtonContainer, $(".list-button-group"));
+        const browseButtonContainer = append(this.buttonContainer, $(".list-add-button-container"));
+        const browseMarketplaceLabel = ( localize(5642, "Browse Marketplace"));
         this.browseButton = this._register(( new Button(browseButtonContainer, {
             ...defaultButtonStyles,
             secondary: true,
-            supportIcons: true
+            supportIcons: true,
+            title: browseMarketplaceLabel,
+            ariaLabel: browseMarketplaceLabel
         })));
-        this.browseButton.label = `$(${Codicon.library.id}) ${( localize(5539, "Browse Marketplace"))}`;
         this.browseButton.element.classList.add("list-add-button");
-        this._register(this.browseButton.onDidClick(() => {
-            this.toggleBrowseMode(!this.browseMode);
-        }));
-        const installFromSourceButton = this._register(( new Button(buttonContainer, {
+        this._register(this.browseButton.onDidClick(() => this.runPrimaryButtonAction()));
+        this.addButtonContainer = append(this.buttonContainer, $(".list-add-button-container"));
+        const addPluginLabel = ( localize(5643, "Add Plugin"));
+        this.addButtonSimple = this._register(( new Button(this.addButtonContainer, {
             ...defaultButtonStyles,
             secondary: true,
-            supportIcons: true
+            supportIcons: true,
+            title: addPluginLabel,
+            ariaLabel: addPluginLabel
         })));
-        installFromSourceButton.label = `$(${Codicon.add.id})`;
-        installFromSourceButton.setTitle(( localize(5540, "Install Plugin from Source")));
-        installFromSourceButton.element.classList.add("list-icon-button");
-        this._register(this.hoverService.setupManagedHover(
-            getDefaultHoverDelegate("element"),
-            installFromSourceButton.element,
-            ( localize(5541, "Install Plugin from Source"))
-        ));
-        this._register(installFromSourceButton.onDidClick(() => {
-            this.commandService.executeCommand("workbench.action.chat.installPluginFromSource");
-        }));
-        const createPluginButton = this._register(( new Button(buttonContainer, {
+        this.addButtonSimple.element.classList.add("list-add-button");
+        this._register(this.addButtonSimple.onDidClick(() => this.runPrimaryAddAction()));
+        this.addButton = this._register(( new ButtonWithDropdown(this.addButtonContainer, {
             ...defaultButtonStyles,
             secondary: true,
-            supportIcons: true
+            supportIcons: true,
+            contextMenuProvider: this.contextMenuService,
+            addPrimaryActionToDropdown: false,
+            actions: {
+                getActions: () => this.getAddDropdownActions()
+            },
+            title: addPluginLabel,
+            ariaLabel: addPluginLabel
         })));
-        createPluginButton.label = `$(${Codicon.newFile.id})`;
-        createPluginButton.setTitle(( localize(5542, "Create Plugin")));
-        createPluginButton.element.classList.add("list-icon-button");
-        this._register(this.hoverService.setupManagedHover(
-            getDefaultHoverDelegate("element"),
-            createPluginButton.element,
-            ( localize(5543, "Create Plugin"))
-        ));
-        this._register(createPluginButton.onDidClick(() => {
-            this.commandService.executeCommand("workbench.action.chat.createPlugin");
-        }));
-        this.backLink = append(this.element, $(".mcp-back-link"));
-        this.backLink.setAttribute("role", "button");
-        this.backLink.tabIndex = 0;
-        this.backLink.setAttribute("aria-label", ( localize(5544, "Back to installed plugins")));
-        const backIcon = append(this.backLink, $("span"));
-        backIcon.classList.add(...ThemeIcon.asClassNameArray(Codicon.arrowLeft));
-        const backText = append(this.backLink, $("span"));
-        backText.textContent = ( localize(5545, "Back to installed plugins"));
-        this._register(addDisposableListener(this.backLink, "click", () => {
-            this.toggleBrowseMode(false);
-        }));
-        this._register(addDisposableListener(this.backLink, "keydown", e => {
-            if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault();
-                this.toggleBrowseMode(false);
-            }
-        }));
-        this.backLink.style.display = "none";
+        this.addButton.element.classList.add("list-add-button");
+        this._register(this.addButton.onDidClick(() => this.runPrimaryAddAction()));
+        const createPluginLabel = ( localize(5644, "Create Plugin"));
+        this.createPluginButton = this._register(( new Button(this.buttonContainer, {
+            ...defaultButtonStyles,
+            secondary: true,
+            supportIcons: true,
+            title: createPluginLabel,
+            ariaLabel: createPluginLabel
+        })));
+        this.createPluginButton.element.classList.add("list-icon-button");
+        this.createPluginButton.label = `$(${Codicon.newFile.id})`;
+        this._register(this.createPluginButton.onDidClick(() => this.runCreatePluginAction()));
         this.emptyContainer = append(this.element, $(".mcp-empty-state"));
         const emptyHeader = append(this.emptyContainer, $(".empty-state-header"));
         const emptyIcon = append(emptyHeader, $(".empty-icon"));
@@ -383,17 +438,17 @@ 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(5546, "Plugins are disabled"));
+        disabledText.textContent = ( localize(5645, "Plugins are disabled"));
         this.disabledMessage = append(this.disabledContainer, $(".empty-subtext"));
         this.listContainer = append(this.element, $(".mcp-list-container"));
         this.sectionHeader = append(this.element, $(".section-footer"));
         this.sectionDescription = append(this.sectionHeader, $("p.section-footer-description"));
         this.sectionDescription.textContent = ( localize(
-            5547,
+            5646,
             "Extend your AI agent with plugins that add commands, skills, agents, hooks, and MCP servers from reusable packages."
         ));
         this.sectionLink = append(this.sectionHeader, $("a.section-footer-link"));
-        this.sectionLink.textContent = ( localize(5548, "Learn more about agent plugins"));
+        this.sectionLink.textContent = ( localize(5647, "Learn more about agent plugins"));
         this.sectionLink.href = "https://code.visualstudio.com/docs/copilot/customization/agent-plugins";
         this._register(addDisposableListener(this.sectionLink, "click", e => {
             e.preventDefault();
@@ -405,14 +460,15 @@ let PluginListWidget = class PluginListWidget extends Disposable {
         const delegate = ( new PluginItemDelegate());
         const groupHeaderRenderer = ( new CustomizationGroupHeaderRenderer("pluginGroupHeader", this.hoverService));
         const installedRenderer = ( new PluginInstalledItemRenderer(this.harnessService));
+        const remoteRenderer = ( new PluginRemoteItemRenderer());
         const marketplaceRenderer = ( new PluginMarketplaceItemRenderer(this.pluginInstallService, this.agentPluginService));
-        this.list = this._register(this.instantiationService.createInstance(
-            WorkbenchList,
-            "PluginManagementList",
-            this.listContainer,
-            delegate,
-            [groupHeaderRenderer, installedRenderer, marketplaceRenderer],
-            {
+        this.list = this._register(
+            this.instantiationService.createInstance(WorkbenchList, "PluginManagementList", this.listContainer, delegate, [
+                groupHeaderRenderer,
+                installedRenderer,
+                remoteRenderer,
+                marketplaceRenderer
+            ], {
                 multipleSelectionSupport: false,
                 setRowLineHeight: false,
                 horizontalScrolling: false,
@@ -420,20 +476,24 @@ let PluginListWidget = class PluginListWidget extends Disposable {
                     getAriaLabel(element) {
                         if (element.type === "group-header") {
                             return localize(
-                                5549,
+                                5648,
                                 "{0}, {1} items, {2}",
                                 element.label,
                                 element.count,
-                                element.collapsed ? ( localize(5550, "collapsed")) : ( localize(5551, "expanded"))
+                                element.collapsed ? ( localize(5649, "collapsed")) : ( localize(5650, "expanded"))
                             );
                         }
-                        if (element.type === "marketplace-item") {
-                            return element.item.name;
+                        const name = formatDisplayName(element.item.name);
+                        const description = element.item.description ? truncateToFirstLine(element.item.description) : undefined;
+                        const nameAndDesc = description ? ( localize(5651, "{0}. {1}", name, description)) : name;
+                        if (element.type === "plugin-item") {
+                            const enabled = isContributionEnabled(element.item.plugin.enablement.get());
+                            return enabled ? ( localize(5652, "{0}. Enabled", nameAndDesc)) : ( localize(5653, "{0}. Disabled", nameAndDesc));
                         }
-                        return element.item.name;
+                        return nameAndDesc;
                     },
                     getWidgetAriaLabel() {
-                        return localize(5552, "Plugins");
+                        return localize(5654, "Plugins");
                     }
                 },
                 openOnSingleClick: true,
@@ -445,18 +505,22 @@ let PluginListWidget = class PluginListWidget extends Disposable {
                         if (element.type === "marketplace-item") {
                             return `marketplace-${element.item.marketplaceReference.canonicalId}/${element.item.source}`;
                         }
+                        if (element.type === "remote-item") {
+                            return element.item.itemKey ?? `remote-${element.item.groupKey ?? "default"}-${( element.item.uri.toString())}`;
+                        }
                         return ( element.item.plugin.uri.toString());
                     }
                 }
-            }
-        ));
+            })
+        );
         this._register(this.list.onDidOpen(e => {
             if (e.element) {
                 if (e.element.type === "group-header") {
                     this.toggleGroup(e.element);
                 } else if (e.element.type === "plugin-item") {
                     this._onDidSelectPlugin.fire(e.element.item);
-                } else if (e.element.type === "marketplace-item") {
+                } else if (e.element.type === "remote-item")
+                    ; else if (e.element.type === "marketplace-item") {
                     this._onDidSelectPlugin.fire(e.element.item);
                 }
             }
@@ -468,34 +532,36 @@ let PluginListWidget = class PluginListWidget extends Disposable {
                 plugin.enablement.read(reader);
             }
             if (!this.browseMode) {
-                this.refresh();
+                void this.refresh();
             }
         }));
         this._register(this.pluginMarketplaceService.onDidChangeMarketplaces(() => {
             if (!this.browseMode) {
-                this.refresh();
+                void this.refresh();
             }
         }));
         this._register(autorun(reader => {
             this.harnessService.activeHarness.read(reader);
+            this.updateToolbarActions();
             if (!this.browseMode) {
-                this.refresh();
+                void this.refresh();
             }
         }));
-        const syncChangeDisposable = this._register(( new MutableDisposable()));
+        const itemProviderChangeDisposable = this._register(( new MutableDisposable()));
         this._register(autorun(reader => {
             this.harnessService.activeHarness.read(reader);
-            const syncProvider = this.harnessService.getActiveDescriptor().syncProvider;
-            if (syncProvider) {
-                syncChangeDisposable.value = syncProvider.onDidChange(() => {
+            const itemProvider = this.harnessService.getActiveDescriptor().itemProvider;
+            if (itemProvider) {
+                itemProviderChangeDisposable.value = itemProvider.onDidChange(() => {
                     if (!this.browseMode) {
-                        this.refresh();
+                        void this.refresh();
                     }
                 });
             } else {
-                syncChangeDisposable.clear();
+                itemProviderChangeDisposable.clear();
             }
         }));
+        this.updateToolbarActions();
         void this.refresh();
     }
     async refresh() {
@@ -518,13 +584,13 @@ let PluginListWidget = class PluginListWidget extends Disposable {
             this.disabledLinkListener.clear();
             if (policyLocked) {
                 this.disabledMessage.textContent = ( localize(
-                    5553,
+                    5655,
                     "Plugin integration in chat is disabled by your organization. Contact your organization administrator for more information."
                 ));
             } else {
-                this.disabledMessage.appendChild(createTextNode(( localize(5554, "Plugins are disabled in settings. "))));
+                this.disabledMessage.appendChild(createTextNode(( localize(5656, "Plugins are disabled in settings. "))));
                 const link = append(this.disabledMessage, $("a.mcp-disabled-settings-link"));
-                link.textContent = ( localize(5555, "Configure in settings."));
+                link.textContent = ( localize(5657, "Configure in settings."));
                 link.href = "#";
                 link.setAttribute("role", "button");
                 this.disabledLinkListener.value = addDisposableListener(link, "click", e => {
@@ -534,7 +600,103 @@ let PluginListWidget = class PluginListWidget extends Disposable {
             }
         }
     }
+    get pluginActions() {
+        return this.harnessService.getActiveDescriptor().pluginActions ?? [];
+    }
+    formatActionLabel(action, iconOnly = false) {
+        if (!action.icon) {
+            return action.label;
+        }
+        return iconOnly ? `$(${action.icon.id})` : `$(${action.icon.id}) ${action.label}`;
+    }
+    updateToolbarActions() {
+        const browseMarketplaceAvailable = this.isBrowseMarketplaceAvailable();
+        if (!browseMarketplaceAvailable && this.browseMode) {
+            this.toggleBrowseMode(false);
+        }
+        this.browseButton.element.parentElement.style.display = this.browseMode ? "none" : "";
+        this.browseButton.label = `$(${Codicon.library.id}) ${( localize(5642, "Browse Marketplace"))}`;
+        this.browseButton.enabled = browseMarketplaceAvailable;
+        const browseTitle = browseMarketplaceAvailable ? ( localize(5642, "Browse Marketplace")) : ( localize(5658, "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;
+    }
+    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;
+        }
+        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(5659, "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);
+        }
+    }
+    buildAddActions() {
+        return [...this.pluginActions, {
+            id: "plugin.installFromSource",
+            label: ( localize(5660, "Install Plugin from Source")),
+            tooltip: ( localize(5660, "Install Plugin from Source")),
+            icon: Codicon.add,
+            run: () => this.commandService.executeCommand("workbench.action.chat.installPluginFromSource")
+        }];
+    }
+    getAddDropdownActions() {
+        this.addDropdownActions.clear();
+        return ( this.buildAddActions().slice(1).map((action, index) => this.addDropdownActions.add(( new Action(
+            `plugin_add_${index}`,
+            this.formatActionLabel(action),
+            undefined,
+            action.enabled !== false,
+            () => this.runPluginAction(action)
+        )))));
+    }
+    async runPrimaryButtonAction() {
+        if (!this.isBrowseMarketplaceAvailable()) {
+            return;
+        }
+        this.toggleBrowseMode(!this.browseMode);
+    }
+    async runPrimaryAddAction() {
+        const [primary] = this.buildAddActions();
+        if (primary) {
+            await this.runPluginAction(primary);
+        }
+    }
+    async runCreatePluginAction() {
+        await this.commandService.executeCommand("workbench.action.chat.createPlugin");
+    }
+    async runPluginAction(action) {
+        if (action.enabled !== false) {
+            await action.run();
+        }
+    }
     showBrowseMarketplace() {
+        if (!this.isBrowseMarketplaceAvailable()) {
+            return;
+        }
         if (!this.browseMode) {
             this.toggleBrowseMode(true);
         }
@@ -543,15 +705,14 @@ let PluginListWidget = class PluginListWidget extends Disposable {
         this.browseMode = browse;
         this.searchInput.value = "";
         this.searchQuery = "";
-        this.backLink.style.display = browse ? "" : "none";
         this.browseButton.element.parentElement.style.display = browse ? "none" : "";
-        this.searchInput.setPlaceHolder(browse ? ( localize(5556, "Search plugin marketplace...")) : ( localize(5538, "Type to search...")));
+        this.searchInput.setPlaceHolder(browse ? ( localize(5661, "Search plugin marketplace...")) : ( localize(5641, "Type to search...")));
         if (browse) {
             void this.queryMarketplace();
         } else {
             this.marketplaceCts?.dispose(true);
             this.marketplaceItems = [];
-            this.filterPlugins();
+            void this.filterPlugins();
         }
         if (this.lastHeight > 0) {
             this.layout(this.lastHeight, this.lastWidth);
@@ -562,7 +723,7 @@ let PluginListWidget = class PluginListWidget extends Disposable {
         const cts = this.marketplaceCts = ( new CancellationTokenSource());
         this.emptyContainer.style.display = "flex";
         this.listContainer.style.display = "none";
-        this.emptyText.textContent = ( localize(5557, "Loading marketplace..."));
+        this.emptyText.textContent = ( localize(5662, "Loading marketplace..."));
         this.emptySubtext.textContent = "";
         try {
             const plugins = await this.pluginMarketplaceService.fetchMarketplacePlugins(cts.token);
@@ -584,8 +745,8 @@ let PluginListWidget = class PluginListWidget extends Disposable {
                 this.marketplaceItems = [];
                 this.emptyContainer.style.display = "flex";
                 this.listContainer.style.display = "none";
-                this.emptyText.textContent = ( localize(5558, "Unable to load marketplace"));
-                this.emptySubtext.textContent = ( localize(5559, "Check your connection and try again"));
+                this.emptyText.textContent = ( localize(5663, "Unable to load marketplace"));
+                this.emptySubtext.textContent = ( localize(5664, "Check your connection and try again"));
             }
         }
     }
@@ -594,10 +755,10 @@ let PluginListWidget = class PluginListWidget extends Disposable {
             this.emptyContainer.style.display = "flex";
             this.listContainer.style.display = "none";
             if (this.searchQuery.trim()) {
-                this.emptyText.textContent = ( localize(5560, "No plugins match '{0}'", this.searchQuery));
-                this.emptySubtext.textContent = ( localize(5561, "Try a different search term"));
+                this.emptyText.textContent = ( localize(5665, "No plugins match '{0}'", this.searchQuery));
+                this.emptySubtext.textContent = ( localize(5666, "Try a different search term"));
             } else {
-                this.emptyText.textContent = ( localize(5562, "No plugins available"));
+                this.emptyText.textContent = ( localize(5667, "No plugins available"));
                 this.emptySubtext.textContent = "";
             }
         } else {
@@ -610,21 +771,73 @@ let PluginListWidget = class PluginListWidget extends Disposable {
         })));
         this.list.splice(0, this.list.length, entries);
     }
-    filterPlugins() {
+    async getRemotePluginItems(query) {
+        const provider = this.harnessService.getActiveDescriptor().itemProvider;
+        if (!provider) {
+            return [];
+        }
+        try {
+            const provided = (await provider.provideChatSessionCustomizations(CancellationToken.None)) ?? [];
+            return provided.filter(
+                item => isPluginCustomizationItem(item) && (!query || item.name.toLowerCase().includes(query) || item.description?.toLowerCase().includes(query) || item.badge?.toLowerCase().includes(query))
+            );
+        } catch {
+            return [];
+        }
+    }
+    getRemoteGroupMetadata(groupKey) {
+        return {
+            group: groupKey ?? "remote-host",
+            label: ( localize(5668, "Remote")),
+            description: ( localize(
+                5669,
+                "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 query = this.searchQuery.toLowerCase().trim();
         const allPlugins = this.agentPluginService.plugins.get();
+        this.remoteItems = [...(await this.getRemotePluginItems(query))];
         this.installedItems = ( allPlugins.map(p => installedPluginToItem(p, this.labelService))).filter(
             item => !query || item.name.toLowerCase().includes(query) || item.description.toLowerCase().includes(query)
         );
-        if (this.installedItems.length === 0) {
+        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(5563, "No plugins match '{0}'", this.searchQuery));
-                this.emptySubtext.textContent = ( localize(5561, "Try a different search term"));
+                this.emptyText.textContent = ( localize(5670, "No plugins match '{0}'", this.searchQuery));
+                this.emptySubtext.textContent = ( localize(5666, "Try a different search term"));
+            } else if (this.harnessService.getActiveDescriptor().itemProvider) {
+                this.emptyText.textContent = ( localize(5671, "No plugins configured"));
+                this.emptySubtext.textContent = ( localize(
+                    5672,
+                    "Use the toolbar to add remote plugins or install plugins from a source."
+                ));
             } else {
-                this.emptyText.textContent = ( localize(5564, "No plugins installed"));
-                this.emptySubtext.textContent = ( localize(5565, "Browse the marketplace to discover and install plugins"));
+                this.emptyText.textContent = ( localize(5673, "No plugins installed"));
+                this.emptySubtext.textContent = ( localize(5674, "Browse the marketplace to discover and install plugins"));
             }
         } else {
             this.emptyContainer.style.display = "none";
@@ -634,63 +847,68 @@ let PluginListWidget = class PluginListWidget extends Disposable {
         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) {
-            const collapsed = ( this.collapsedGroups.has("enabled"));
-            entries.push({
-                type: "group-header",
-                id: "plugin-group-enabled",
+            isFirst = this.appendGroup(entries, {
                 group: "enabled",
-                label: ( localize(5566, "Enabled")),
-                icon: pluginIcon,
-                count: enabledPlugins.length,
-                isFirst,
+                label: ( localize(5675, "Enabled Locally")),
                 description: ( localize(
-                    5567,
-                    "Plugins that are currently active and providing commands, skills, agents, and other capabilities."
-                )),
-                collapsed
-            });
-            if (!collapsed) {
-                for (const item of enabledPlugins) {
-                    entries.push({
-                        type: "plugin-item",
-                        item
-                    });
-                }
-            }
-            isFirst = false;
+                    5676,
+                    "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) {
-            const collapsed = ( this.collapsedGroups.has("disabled"));
-            entries.push({
-                type: "group-header",
-                id: "plugin-group-disabled",
+            this.appendGroup(entries, {
                 group: "disabled",
-                label: ( localize(5568, "Disabled")),
-                icon: pluginIcon,
-                count: disabledPlugins.length,
-                isFirst,
-                description: ( localize(
-                    5569,
-                    "Plugins that are installed but currently disabled. Enable them to use their capabilities."
-                )),
-                collapsed
-            });
-            if (!collapsed) {
-                for (const item of disabledPlugins) {
-                    entries.push({
-                        type: "plugin-item",
-                        item
-                    });
-                }
-            }
+                label: ( localize(5677, "Disabled Locally")),
+                description: ( localize(5678, "Plugins installed in this client but currently disabled."))
+            }, ( disabledPlugins.map(item => ({
+                type: "plugin-item",
+                item
+            }))), isFirst);
         }
         this.displayEntries = entries;
         this.list.splice(0, this.list.length, this.displayEntries);
         this._onDidChangeItemCount.fire(this.itemCount);
     }
     get itemCount() {
-        return this.installedItems.length;
+        const installedNames = ( new Set(( this.installedItems.map(item => item.name.toLowerCase()))));
+        const uniqueRemote = this.remoteItems.filter(item => {
+            if (item.groupKey === "remote-client") {
+                return false;
+            }
+            if (item.name && ( installedNames.has(item.name.toLowerCase()))) {
+                return false;
+            }
+            return true;
+        });
+        return uniqueRemote.length + this.installedItems.length;
     }
     fireItemCount() {
         this._onDidChangeItemCount.fire(this.itemCount);
@@ -701,23 +919,37 @@ let PluginListWidget = class PluginListWidget extends Disposable {
         } else {
             this.collapsedGroups.add(entry.group);
         }
-        this.filterPlugins();
+        void this.filterPlugins();
     }
     prependToSearchRow(element) {
         this.searchAndButtonContainer.insertBefore(element, this.searchAndButtonContainer.firstChild);
     }
+    isInBrowseMode() {
+        return this.browseMode;
+    }
+    exitBrowseMode() {
+        if (this.browseMode) {
+            this.toggleBrowseMode(false);
+        }
+    }
     layout(height, width) {
         this.lastHeight = height;
         this.lastWidth = width;
         this.element.style.height = `${height}px`;
         const searchBarHeight = this.searchAndButtonContainer.offsetHeight;
-        if (searchBarHeight === 0) {
-            getWindow(this.element).requestAnimationFrame(() => this.layout(this.lastHeight, this.lastWidth));
+        if (searchBarHeight === 0 && !this._layoutDeferred) {
+            this._layoutDeferred = true;
+            getWindow(this.element).requestAnimationFrame(() => {
+                try {
+                    this.layout(this.lastHeight, this.lastWidth);
+                } finally {
+                    this._layoutDeferred = false;
+                }
+            });
             return;
         }
         const footerHeight = this.sectionHeader.offsetHeight;
-        const backLinkHeight = this.browseMode ? this.backLink.offsetHeight : 0;
-        const listHeight = Math.max(0, height - searchBarHeight - footerHeight - backLinkHeight);
+        const listHeight = Math.max(0, height - searchBarHeight - footerHeight);
         this.listContainer.style.height = `${listHeight}px`;
         this.list.layout(listHeight, width);
     }
@@ -736,24 +968,37 @@ let PluginListWidget = class PluginListWidget extends Disposable {
         }
     }
     onContextMenu(e) {
-        if (!e.element || e.element.type !== "plugin-item") {
+        if (!e.element || e.element.type === "group-header" || e.element.type === "marketplace-item") {
             return;
         }
         const entry = e.element;
         const disposables = ( new DisposableStore());
-        const groups = getInstalledPluginContextMenuActions(entry.item.plugin, this.instantiationService);
         const actions = [];
-        for (const menuActions of groups) {
-            for (const menuAction of menuActions) {
-                actions.push(menuAction);
-                if (isDisposable(menuAction)) {
-                    disposables.add(menuAction);
+        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()
+                )));
             }
-            actions.push(( new Separator()));
-        }
-        if (actions.length > 0 && actions[actions.length - 1] instanceof Separator) {
-            actions.pop();
         }
         this.contextMenuService.showContextMenu({
             getAnchor: () => e.anchor,