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

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

@@ -1,13 +1,12 @@
 
 import { registerCss } from '@codingame/monaco-vscode-api/css';
 import { __decorate, __param } from '@codingame/monaco-vscode-api/external/tslib/tslib.es6';
-import { $ as $$1, addStandardDisposableListener, EventType, addDisposableListener, append, createTextNode, clearNode, isAncestor, EventHelper, getWindow } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/dom';
+import { $ as $$1, addDisposableGenericMouseDownListener, EventHelper, append, addDisposableListener, EventType, createTextNode, clearNode, isAncestor, getActiveElement, addStandardDisposableListener, scheduleAtNextAnimationFrame, getWindow } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/dom';
 import { Button } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/button/button';
 import { HighlightedLabel } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/highlightedlabel/highlightedLabel';
 import { InputBox } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/inputbox/inputBox';
 import { DomScrollableElement } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/scrollbar/scrollableElement';
 import { TriStateCheckbox, Checkbox } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/toggle/toggle';
-import { StandardMouseEvent } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/mouseEvent';
 import { Action } from '@codingame/monaco-vscode-api/vscode/vs/base/common/actions';
 import { Delayer } from '@codingame/monaco-vscode-api/vscode/vs/base/common/async';
 import { CancellationTokenSource } from '@codingame/monaco-vscode-api/vscode/vs/base/common/cancellation';
@@ -15,9 +14,10 @@ import { Codicon } from '@codingame/monaco-vscode-api/vscode/vs/base/common/codi
 import { Emitter } from '@codingame/monaco-vscode-api/vscode/vs/base/common/event';
 import { matchesContiguousSubString } from '@codingame/monaco-vscode-api/vscode/vs/base/common/filters';
 import { KeyCode } from '@codingame/monaco-vscode-api/vscode/vs/base/common/keyCodes';
-import { Disposable, DisposableStore, toDisposable } from '@codingame/monaco-vscode-api/vscode/vs/base/common/lifecycle';
+import { DisposableStore, Disposable, MutableDisposable, toDisposable } from '@codingame/monaco-vscode-api/vscode/vs/base/common/lifecycle';
 import '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/index';
 import { ScrollbarVisibility } from '@codingame/monaco-vscode-api/vscode/vs/base/common/scrollable';
+import { ThemeIcon } from '@codingame/monaco-vscode-api/vscode/vs/base/common/themables';
 import { URI } from '@codingame/monaco-vscode-api/vscode/vs/base/common/uri';
 import { localize } from '@codingame/monaco-vscode-api/vscode/vs/nls';
 import { ExtensionIdentifier } from '@codingame/monaco-vscode-api/vscode/vs/platform/extensions/common/extensions';
@@ -25,8 +25,9 @@ import { IContextViewService, IContextMenuService } from '@codingame/monaco-vsco
 import { IDialogService } from '@codingame/monaco-vscode-api/vscode/vs/platform/dialogs/common/dialogs.service';
 import { IInstantiationService } from '@codingame/monaco-vscode-api/vscode/vs/platform/instantiation/common/instantiation';
 import { WorkbenchList } from '@codingame/monaco-vscode-api/vscode/vs/platform/list/browser/listService';
+import { setupCollapsibleSection, layoutVirtualizedSections, getVirtualizedSectionMinimumHeight, layoutVirtualizedSectionList } from './customizationCardList.js';
 import { IOpenerService } from '@codingame/monaco-vscode-api/vscode/vs/platform/opener/common/opener.service';
-import { defaultInputBoxStyles, defaultButtonStyles, defaultCheckboxStyles } from '@codingame/monaco-vscode-api/vscode/vs/platform/theme/browser/defaultStyles';
+import { defaultCheckboxStyles, defaultInputBoxStyles, defaultButtonStyles } from '@codingame/monaco-vscode-api/vscode/vs/platform/theme/browser/defaultStyles';
 import { IExtensionManifestPropertiesService } from '@codingame/monaco-vscode-api/vscode/vs/workbench/services/extensions/common/extensionManifestPropertiesService.service';
 import { IWorkbenchEnvironmentService } from '@codingame/monaco-vscode-api/vscode/vs/workbench/services/environment/common/environmentService.service';
 import { ExtensionState } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/extensions/common/extensions';
@@ -34,7 +35,7 @@ import { IExtensionsWorkbenchService } from '@codingame/monaco-vscode-api/vscode
 import { GalleryItemInstallState, GalleryItemRenderer } from './galleryItemRenderer.js';
 import { ToolDataSource } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/tools/languageModelToolsService';
 import { ILanguageModelToolsService } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/tools/languageModelToolsService.service';
-import { countEnabledCustomizationTools, getToolSetTriState, isToolEnabledInSet } from '../agentSessions/agentHost/agentHostToolSetEnablementService.js';
+import { getToolSetTriState, isToolEnabledInSet, countEnabledCustomizationTools } from '../agentSessions/agentHost/agentHostToolSetEnablementService.js';
 import { IAgentHostToolSetEnablementService } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/browser/agentSessions/agentHost/agentHostToolSetEnablementService.service';
 import * as aiCustomizationManagement from './media/aiCustomizationManagement.css';
 import { observableValue } from '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/observables/observableValue';
@@ -44,6 +45,231 @@ import { derived } from '@codingame/monaco-vscode-api/vscode/vs/base/common/obse
 
 registerCss(aiCustomizationManagement);
 const $ = $$1;
+const TOOLS_SET_ROW_TEMPLATE_ID = "toolsSetRow";
+const TOOLS_TOOL_ROW_TEMPLATE_ID = "toolsToolRow";
+const TOOLS_SET_ROW_PADDING = 16;
+const TOOLS_TOOL_ROW_PADDING = 12;
+const TOOLS_ROW_LABEL_HEIGHT = 18;
+const TOOLS_ROW_SUBTEXT_HEIGHT = 14;
+const TOOLS_SECTION_MAX_HEIGHT = 320;
+function computeToolsRowHeight(entry) {
+    if (entry.kind === "set") {
+        return TOOLS_SET_ROW_PADDING + TOOLS_ROW_LABEL_HEIGHT + (entry.vm.detail ? TOOLS_ROW_SUBTEXT_HEIGHT : 0);
+    }
+    const description = entry.toolVm.tool.userDescription ?? entry.toolVm.tool.modelDescription;
+    return TOOLS_TOOL_ROW_PADDING + TOOLS_ROW_LABEL_HEIGHT + (description ? TOOLS_ROW_SUBTEXT_HEIGHT : 0);
+}
+class ToolsRowDelegate {
+    getHeight(entry) {
+        return computeToolsRowHeight(entry);
+    }
+    getTemplateId(entry) {
+        return entry.kind === "set" ? TOOLS_SET_ROW_TEMPLATE_ID : TOOLS_TOOL_ROW_TEMPLATE_ID;
+    }
+}
+class ToolsSetRowRenderer {
+    constructor(
+        _sessionType,
+        _enablementService,
+        _isExpanded,
+        _toggleExpand,
+        _resolveExtension,
+        _showExtensionMenu
+    ) {
+        this._sessionType = _sessionType;
+        this._enablementService = _enablementService;
+        this._isExpanded = _isExpanded;
+        this._toggleExpand = _toggleExpand;
+        this._resolveExtension = _resolveExtension;
+        this._showExtensionMenu = _showExtensionMenu;
+        this.templateId = TOOLS_SET_ROW_TEMPLATE_ID;
+        this._templates = ( new Set());
+        this._focusedIndex = -1;
+    }
+    renderTemplate(container) {
+        container.classList.add("tools-list-setrow");
+        const templateDisposables = ( new DisposableStore());
+        const checkbox = templateDisposables.add(( new TriStateCheckbox("", false, defaultCheckboxStyles)));
+        checkbox.domNode.tabIndex = -1;
+        container.appendChild(checkbox.domNode);
+        templateDisposables.add(
+            addDisposableGenericMouseDownListener(checkbox.domNode, event => EventHelper.stop(event, true))
+        );
+        const main = append(container, $(".tools-list-row-main"));
+        const text = append(main, $(".tools-list-row-text"));
+        const labelEl = append(text, $("span.tools-list-row-label"));
+        const label = templateDisposables.add(( new HighlightedLabel(labelEl)));
+        const subtext = append(text, $("span.tools-list-row-subtext"));
+        const count = append(container, $("span.tools-list-row-count"));
+        const alwaysAvailable = append(container, $("span.tools-list-always-available"));
+        alwaysAvailable.textContent = ( localize(7028, "Always Available"));
+        const moreButton = append(container, $("button.tools-list-more-action"));
+        moreButton.type = "button";
+        moreButton.tabIndex = -1;
+        moreButton.classList.add(...ThemeIcon.asClassNameArray(Codicon.ellipsis));
+        templateDisposables.add(
+            addDisposableGenericMouseDownListener(moreButton, event => EventHelper.stop(event, true))
+        );
+        const chevron = append(container, $("a.tools-list-chevron.codicon"));
+        chevron.setAttribute("aria-hidden", "true");
+        const template = {
+            container,
+            checkbox,
+            label,
+            subtext,
+            count,
+            alwaysAvailable,
+            moreButton,
+            chevron,
+            templateDisposables,
+            elementDisposables: templateDisposables.add(( new DisposableStore())),
+            currentIndex: -1
+        };
+        this._templates.add(template);
+        return template;
+    }
+    renderElement(entry, index, data) {
+        data.elementDisposables.clear();
+        data.currentIndex = index;
+        data.container.removeAttribute("aria-selected");
+        const vm = entry.vm;
+        const ts = vm.toolSet;
+        const setName = ts.description ?? ts.referenceName;
+        data.label.set(setName, vm.nameMatches);
+        data.subtext.style.display = vm.detail ? "" : "none";
+        data.subtext.textContent = vm.detail ?? "";
+        data.alwaysAvailable.style.display = vm.readOnly ? "" : "none";
+        data.checkbox.domNode.style.display = vm.readOnly ? "none" : "";
+        if (!vm.readOnly) {
+            data.checkbox.setTitle(( localize(7029, "Enable {0}", setName)));
+            data.elementDisposables.add(data.checkbox.onChange(() => {
+                this._enablementService.setToolSetEnabled(this._sessionType, ts.id, vm.allToolIds, data.checkbox.checked === true);
+            }));
+        }
+        data.elementDisposables.add(autorun(reader => {
+            const state = this._enablementService.observe(this._sessionType).read(reader);
+            const triState = getToolSetTriState(state, ts.id, vm.allToolIds);
+            if (!vm.readOnly) {
+                data.checkbox.checked = triState;
+                data.container.setAttribute("aria-checked", triState === "mixed" ? "mixed" : String(triState));
+            } else {
+                data.container.removeAttribute("aria-checked");
+            }
+            const enabledCount = vm.allToolIds.reduce((n, id) => n + (isToolEnabledInSet(state, ts.id, id) ? 1 : 0), 0);
+            data.count.textContent = `${enabledCount}/${vm.allToolIds.length}`;
+            data.count.setAttribute("aria-label", ( localize(7030, "{0} of {1} tools enabled", enabledCount, vm.allToolIds.length)));
+        }));
+        data.elementDisposables.add(autorun(reader => {
+            const expanded = this._isExpanded(vm, reader);
+            data.chevron.classList.toggle("codicon-chevron-down-compact", expanded);
+            data.chevron.classList.toggle("codicon-chevron-right-compact", !expanded);
+            data.container.setAttribute("aria-expanded", String(expanded));
+        }));
+        const extension = this._resolveExtension(ts);
+        data.moreButton.style.display = extension ? "" : "none";
+        data.moreButton.tabIndex = extension && index === this._focusedIndex ? 0 : -1;
+        if (extension) {
+            const moreLabel = ( localize(7031, "More actions for {0}", setName));
+            data.moreButton.setAttribute("aria-label", moreLabel);
+            data.moreButton.title = moreLabel;
+            data.elementDisposables.add(addDisposableListener(data.moreButton, "click", e => {
+                EventHelper.stop(e, true);
+                this._showExtensionMenu(data.moreButton, extension);
+            }));
+        }
+        data.elementDisposables.add(addDisposableListener(data.container, "click", e => {
+            if (data.checkbox.domNode.contains(e.target) || data.moreButton.contains(e.target)) {
+                return;
+            }
+            this._toggleExpand(ts.id);
+        }));
+    }
+    setFocusedIndex(index) {
+        this._focusedIndex = index;
+        for (const template of this._templates) {
+            template.moreButton.tabIndex = template.moreButton.style.display !== "none" && template.currentIndex === index ? 0 : -1;
+        }
+    }
+    disposeTemplate(data) {
+        this._templates.delete(data);
+        data.templateDisposables.dispose();
+    }
+}
+class ToolsToolRowRenderer {
+    constructor(_sessionType, _enablementService) {
+        this._sessionType = _sessionType;
+        this._enablementService = _enablementService;
+        this.templateId = TOOLS_TOOL_ROW_TEMPLATE_ID;
+    }
+    renderTemplate(container) {
+        container.classList.add("tools-list-toolrow");
+        const templateDisposables = ( new DisposableStore());
+        const checkbox = templateDisposables.add(( new Checkbox("", false, defaultCheckboxStyles)));
+        checkbox.domNode.tabIndex = -1;
+        container.appendChild(checkbox.domNode);
+        templateDisposables.add(
+            addDisposableGenericMouseDownListener(checkbox.domNode, event => EventHelper.stop(event, true))
+        );
+        const text = append(container, $(".tools-list-row-text"));
+        const labelEl = append(text, $("span.tools-list-row-label"));
+        const label = templateDisposables.add(( new HighlightedLabel(labelEl)));
+        const subtext = append(text, $("span.tools-list-row-subtext"));
+        const alwaysAvailable = append(container, $("span.tools-list-always-available"));
+        alwaysAvailable.textContent = ( localize(7028, "Always Available"));
+        return {
+            container,
+            checkbox,
+            label,
+            subtext,
+            alwaysAvailable,
+            templateDisposables,
+            elementDisposables: templateDisposables.add(( new DisposableStore()))
+        };
+    }
+    renderElement(entry, _index, data) {
+        data.elementDisposables.clear();
+        data.container.removeAttribute("aria-selected");
+        const {
+            setVm,
+            toolVm
+        } = entry;
+        const tool = toolVm.tool;
+        const toolName = tool.displayName ?? tool.id;
+        data.container.classList.toggle("readonly", setVm.readOnly);
+        data.label.set(toolName, toolVm.nameMatches);
+        const description = tool.userDescription ?? tool.modelDescription;
+        data.subtext.style.display = description ? "" : "none";
+        data.subtext.textContent = description ?? "";
+        data.alwaysAvailable.style.display = setVm.readOnly ? "" : "none";
+        data.checkbox.domNode.style.display = setVm.readOnly ? "none" : "";
+        if (!setVm.readOnly) {
+            data.checkbox.setTitle(( localize(7032, "Enable {0}", toolName)));
+            data.elementDisposables.add(data.checkbox.onChange(() => {
+                this._enablementService.setToolEnabled(this._sessionType, setVm.toolSet.id, tool.id, data.checkbox.checked);
+            }));
+            data.elementDisposables.add(autorun(reader => {
+                const enabled = isToolEnabledInSet(
+                    this._enablementService.observe(this._sessionType).read(reader),
+                    setVm.toolSet.id,
+                    tool.id
+                );
+                data.checkbox.checked = enabled;
+                data.container.setAttribute("aria-checked", String(enabled));
+            }));
+            data.elementDisposables.add(addDisposableListener(data.container, "click", e => {
+                if (data.checkbox.domNode.contains(e.target)) {
+                    return;
+                }
+                this._enablementService.setToolEnabled(this._sessionType, setVm.toolSet.id, tool.id, !data.checkbox.checked);
+            }));
+        } else {
+            data.container.removeAttribute("aria-checked");
+        }
+    }
+    disposeTemplate(data) {
+        data.templateDisposables.dispose();
+    }
+}
 const TOOLS_MARKETPLACE_QUERY = "language model tools";
 const TOOLS_GALLERY_ITEM_HEIGHT = 62;
 const TOOLS_GALLERY_ITEM_TEMPLATE_ID = "toolsGalleryItem";
@@ -120,6 +346,7 @@ let ToolsListWidget = class ToolsListWidget extends Disposable {
         this._onDidSelectExtension = this._register(( new Emitter()));
         this.onDidSelectExtension = this._onDidSelectExtension.event;
         this._rowStore = this._register(( new DisposableStore()));
+        this._pendingSectionLayout = this._register(( new MutableDisposable()));
         this._searchQuery = observableValue("toolsSearchQuery", "");
         this._expanded = observableValue("toolsExpanded", ( new Set()));
         this._delayedSearch = this._register(( new Delayer(200)));
@@ -127,32 +354,29 @@ let ToolsListWidget = class ToolsListWidget extends Disposable {
         this._browseMode = false;
         this._lastHeight = 0;
         this._lastWidth = 0;
-        this._rows = [];
-        this._rowByElement = ( new Map());
+        this._sectionLists = [];
+        this._collapsedSections = ( new Set());
+        this._sectionScrollPositions = ( new Map());
         this._staticReadOnlySets = this._createStaticReadOnlySets();
         this.element = $(".tools-list-widget");
         this._createHeader();
         this._createSearchRow();
-        this._treeContainer = $(".tools-list-tree");
-        this._treeContainer.setAttribute("role", "tree");
-        this._treeContainer.setAttribute("aria-label", ( localize(6129, "Tool groups")));
-        this._register(
-            addStandardDisposableListener(this._treeContainer, EventType.KEY_DOWN, e => this._onTreeKeyDown(e))
-        );
-        this._register(
-            addDisposableListener(this._treeContainer, EventType.FOCUS_IN, e => {
-                const row = this._rowFromTarget(e.target);
-                if (row) {
-                    this._setRovingRow(row);
-                }
-            })
-        );
-        this._treeScrollable = this._register(( new DomScrollableElement(this._treeContainer, {
+        const treeScrollContainer = $(".tools-list-scroll-container");
+        this._treeContainer = append(treeScrollContainer, $(".tools-list-tree.distributed-section-layout"));
+        const treeScrollable = this._register(( new DomScrollableElement(treeScrollContainer, {
             horizontal: ScrollbarVisibility.Hidden,
             vertical: ScrollbarVisibility.Auto,
             useShadows: false
         })));
-        const treeScrollableNode = this._treeScrollable.getDomNode();
+        this._treeScrollable = treeScrollable;
+        this._register(
+            addDisposableListener(treeScrollContainer, EventType.SCROLL, () => {
+                treeScrollable.setScrollPosition({
+                    scrollTop: treeScrollContainer.scrollTop
+                });
+            })
+        );
+        const treeScrollableNode = treeScrollable.getDomNode();
         treeScrollableNode.classList.add("tools-list-tree-scrollable");
         this.element.appendChild(treeScrollableNode);
         this._createGallery();
@@ -161,6 +385,10 @@ let ToolsListWidget = class ToolsListWidget extends Disposable {
         this._register(autorun(reader => {
             this._render(viewModel.read(reader));
         }));
+        this._register(autorun(reader => {
+            this._expanded.read(reader);
+            this._refreshAllSectionEntries();
+        }));
         this._register(autorun(reader => {
             const count = countEnabledCustomizationTools(this._toolsService.toolSets.read(reader), this._readState(reader), reader);
             if (count !== this._lastCount) {
@@ -171,15 +399,15 @@ let ToolsListWidget = class ToolsListWidget extends Disposable {
     }
     _createHeader() {
         this._header = append(this.element, $(".section-title-header"));
-        append(append(this._header, $(".section-title-row")), $("h2.section-title")).textContent = ( localize(6130, "Tools"));
+        append(append(this._header, $(".section-title-row")), $("h2.section-title")).textContent = ( localize(7033, "Tools"));
         const description = append(this._header, $("p.section-title-description"));
         append(description, $("span.section-title-description-text")).textContent = ( localize(
-            6131,
-            "Enable or disable the tools available to chat. Disabled tools are not advertised to the agent. Tools other than Copilot CLI run on the client and require it to be connected."
+            7034,
+            "Enable or disable the tools available to chat. Disabled tools are not advertised to the agent. Tools other than Copilot's built-in tools run on the client and require it to be connected."
         ));
         description.appendChild(createTextNode(" "));
         const learnMore = append(description, $("a.section-title-link"));
-        learnMore.textContent = ( localize(6132, "Learn more about tools"));
+        learnMore.textContent = ( localize(7035, "Learn more about tools"));
         learnMore.href = "https://code.visualstudio.com/docs/agent-customization/tools?referrer=in-product";
         this._register(addDisposableListener(learnMore, "click", e => {
             e.preventDefault();
@@ -190,9 +418,9 @@ let ToolsListWidget = class ToolsListWidget extends Disposable {
         this._searchRow = append(this.element, $(".tools-list-search-and-button-container"));
         const searchContainer = append(this._searchRow, $(".tools-list-search-container"));
         this._searchInput = this._register(( new InputBox(searchContainer, this._contextViewService, {
-            placeholder: ( localize(6133, "Type to search...")),
+            placeholder: ( localize(7036, "Type to search...")),
             inputBoxStyles: defaultInputBoxStyles,
-            ariaLabel: ( localize(6134, "Search tools"))
+            ariaLabel: ( localize(7037, "Search tools"))
         })));
         this._register(this._searchInput.onDidChange(() => {
             this._delayedSearch.trigger(() => {
@@ -203,20 +431,7 @@ let ToolsListWidget = class ToolsListWidget extends Disposable {
                 }
             }).catch(() => {});
         }));
-        if (!this._environmentService.isSessionsWindow) {
-            const browseLabel = ( localize(6135, "Browse Marketplace"));
-            this._browseButtonContainer = append(this._searchRow, $(".tools-list-browse-button-container"));
-            const browseButton = this._register(( new Button(this._browseButtonContainer, {
-                ...defaultButtonStyles,
-                secondary: true,
-                supportIcons: true,
-                title: browseLabel,
-                ariaLabel: browseLabel
-            })));
-            browseButton.label = `$(${Codicon.library.id}) ${browseLabel}`;
-            this._register(browseButton.onDidClick(() => this._setBrowseMode(true)));
-        }
-        const backLabel = ( localize(6136, "Back"));
+        const backLabel = ( localize(7038, "Back"));
         this._backButtonContainer = append(this._searchRow, $(".tools-list-browse-button-container"));
         this._backButtonContainer.style.display = "none";
         const backButton = this._register(( new Button(this._backButtonContainer, {
@@ -232,6 +447,9 @@ let ToolsListWidget = class ToolsListWidget extends Disposable {
     _createGallery() {
         this._galleryContainer = append(this.element, $(".tools-gallery-container"));
         this._galleryContainer.style.display = "none";
+        const header = append(this._galleryContainer, $(".tools-marketplace-header"));
+        append(header, $("h3.tools-marketplace-title")).textContent = ( localize(7039, "Marketplace Tools"));
+        append(header, $("p.tools-marketplace-description")).textContent = ( localize(7040, "Install extensions that contribute additional tools."));
         this._galleryEmpty = append(this._galleryContainer, $(".list-empty-state"));
         this._galleryEmpty.style.display = "none";
         this._galleryListContainer = append(this._galleryContainer, $(".tools-gallery-list"));
@@ -246,7 +464,7 @@ let ToolsListWidget = class ToolsListWidget extends Disposable {
                 horizontalScrolling: false,
                 accessibilityProvider: {
                     getAriaLabel: extension => extension.displayName,
-                    getWidgetAriaLabel: () => ( localize(6137, "Tool extensions"))
+                    getWidgetAriaLabel: () => ( localize(7041, "Tool extensions"))
                 },
                 identityProvider: {
                     getId: extension => extension.identifier.id
@@ -276,8 +494,8 @@ let ToolsListWidget = class ToolsListWidget extends Disposable {
             referenceName: "copilotCli",
             icon: Codicon.copilot,
             source: ToolDataSource.Internal,
-            description: ( localize(6138, "Copilot CLI")),
-            detail: ( localize(6139, "Built-in tools the Copilot CLI agent runs inside its own runtime.")),
+            description: ( localize(7042, "Copilot")),
+            detail: ( localize(7043, "Built-in tools the Copilot agent runs inside its own runtime.")),
             getTools: () => tools
         };
         return [copilotCliSet];
@@ -347,14 +565,19 @@ let ToolsListWidget = class ToolsListWidget extends Disposable {
             visibleTools,
             nameMatches,
             forceExpanded: query !== "",
-            readOnly: ts.id === "copilot-cli"
+            readOnly: ts.id === "copilot-cli",
+            detail: this._resolveSetDetail(ts)
         };
     }
     layout(height, width) {
         this._lastHeight = height;
         this._lastWidth = width;
+        if (this.element.parentElement?.style.display === "none") {
+            return;
+        }
+        this.element.classList.toggle("narrow-layout", width < 500);
         this._searchInput.layout();
-        this._treeScrollable.scanDomNode();
+        this._scheduleSectionListLayout();
         const galleryOffset = this._galleryContainer.getBoundingClientRect().top - this.element.getBoundingClientRect().top;
         this._galleryList.layout(Math.max(0, height - galleryOffset), width);
     }
@@ -368,11 +591,8 @@ let ToolsListWidget = class ToolsListWidget extends Disposable {
         this._browseMode = browse;
         this._treeScrollable.getDomNode().style.display = browse ? "none" : "";
         this._galleryContainer.style.display = browse ? "" : "none";
-        if (this._browseButtonContainer) {
-            this._browseButtonContainer.style.display = browse ? "none" : "";
-        }
         this._backButtonContainer.style.display = browse ? "" : "none";
-        this._searchInput.setPlaceHolder(browse ? ( localize(6140, "Search the Marketplace...")) : ( localize(6133, "Type to search...")));
+        this._searchInput.setPlaceHolder(browse ? ( localize(7044, "Search the Marketplace...")) : ( localize(7036, "Type to search...")));
         this._searchInput.value = "";
         if (browse) {
             void this._queryGallery();
@@ -392,7 +612,7 @@ let ToolsListWidget = class ToolsListWidget extends Disposable {
         const cts = this._galleryCts = ( new CancellationTokenSource());
         const userText = this._searchInput.value.trim();
         const text = userText ? `${TOOLS_MARKETPLACE_QUERY} ${userText}` : TOOLS_MARKETPLACE_QUERY;
-        this._setGalleryMessage(( localize(6141, "Loading marketplace...")));
+        this._setGalleryMessage(( localize(7045, "Loading marketplace...")));
         try {
             const pager = await this._extensionsWorkbenchService.queryGallery({
                 text
@@ -407,10 +627,10 @@ let ToolsListWidget = class ToolsListWidget extends Disposable {
             }
             if (filteredItems.length === 0) {
                 this._setGalleryMessage(( localize(
-                    6142,
+                    7046,
                     "No tool extensions match '{0}'",
                     userText || TOOLS_MARKETPLACE_QUERY
-                )), ( localize(6143, "Try a different search term")));
+                )), ( localize(7047, "Try a different search term")));
                 return;
             }
             this._galleryEmpty.style.display = "none";
@@ -418,7 +638,7 @@ let ToolsListWidget = class ToolsListWidget extends Disposable {
             this._galleryList.splice(0, this._galleryList.length, filteredItems);
         } catch {
             if (!cts.token.isCancellationRequested) {
-                this._setGalleryMessage(( localize(6144, "Unable to load marketplace")), ( localize(6145, "Check your connection and try again")));
+                this._setGalleryMessage(( localize(7048, "Unable to load marketplace")), ( localize(7049, "Check your connection and try again")));
             }
         }
     }
@@ -462,276 +682,285 @@ let ToolsListWidget = class ToolsListWidget extends Disposable {
         this._onDidChangeItemCount.fire(this._lastCount === -1 ? 0 : this._lastCount);
     }
     _render(model) {
-        const hadFocus = isAncestor(this._treeContainer.ownerDocument.activeElement, this._treeContainer);
+        const focusedSection = this._sectionLists.find(
+            s => isAncestor(getActiveElement(this._treeContainer.ownerDocument), s.container)
+        );
+        const focusedRowId = focusedSection ? this._currentFocusedRowId(focusedSection) : undefined;
+        for (const section of this._sectionLists) {
+            this._sectionScrollPositions.set(section.label, section.list.scrollTop);
+        }
         this._rowStore.clear();
-        this._rows = [];
-        this._rowByElement.clear();
+        this._sectionLists = [];
         clearNode(this._treeContainer);
-        if (model.length === 0) {
+        const query = this._searchQuery.get().trim();
+        if (model.length === 0 && query) {
             const emptyState = append(this._treeContainer, $(".list-empty-state"));
             const header = append(emptyState, $(".empty-state-header"));
             const text = append(header, $(".empty-state-text"));
             const subtext = append(emptyState, $(".empty-state-subtext"));
-            const query = this._searchQuery.get().trim();
-            if (query) {
-                text.textContent = ( localize(6146, "No tools match '{0}'", query));
-                subtext.textContent = ( localize(6143, "Try a different search term"));
-            } else {
-                text.textContent = ( localize(6147, "No tools available."));
-            }
+            text.textContent = ( localize(7050, "No tools match '{0}'", query));
+            subtext.textContent = ( localize(7047, "Try a different search term"));
             this._treeScrollable.scanDomNode();
             return;
         }
-        for (const vm of model) {
-            const setRow = this._renderToolSet(vm);
-            this._addRow(setRow);
-            for (const child of setRow.children) {
-                this._addRow(child);
-            }
+        const builtIn = model.filter(
+            vm => vm.toolSet.source.type === "internal" || vm.toolSet.source.type === "external"
+        );
+        const connected = model.filter(
+            vm => vm.toolSet.source.type === "mcp" || vm.toolSet.source.type === "user"
+        );
+        const installed = model.filter(vm => vm.toolSet.source.type === "extension");
+        this._renderToolSection(( localize(7051, "Built-in Tools")), ( localize(7052, "Tools provided by the active agent and VS Code.")), ( localize(7053, "No built-in tool sets are available.")), builtIn, query);
+        this._renderToolSection(( localize(7054, "Connected Sources")), ( localize(7055, "Tool sets provided by MCP servers and user configuration.")), ( localize(7056, "No connected tool sources are available.")), connected, query, undefined, false);
+        this._renderToolSection(( localize(7057, "Extension Tools")), ( localize(7058, "Tool sets contributed by installed extensions.")), ( localize(7059, "No extension tools are installed.")), installed, query, !this._environmentService.isSessionsWindow ? sectionHeader => {
+            const actions = append(sectionHeader, $(".tools-inventory-section-actions"));
+            const browseLabel = ( localize(7060, "Browse Marketplace"));
+            const browseButton = this._rowStore.add(( new Button(actions, {
+                ...defaultButtonStyles,
+                secondary: true,
+                supportIcons: true,
+                title: browseLabel,
+                ariaLabel: browseLabel
+            })));
+            browseButton.label = `$(${Codicon.library.id}) ${browseLabel}`;
+            this._rowStore.add(browseButton.onDidClick(() => this._setBrowseMode(true)));
+        } : undefined);
+        this._scheduleSectionListLayout();
+        if (focusedRowId) {
+            this._restoreFocus(focusedRowId);
         }
-        this._initRovingTabIndex(hadFocus);
-        this._treeScrollable.scanDomNode();
     }
-    _addRow(row) {
-        this._rows.push(row);
-        this._rowByElement.set(row.element, row);
-    }
-    _renderToolSet(vm) {
-        const ts = vm.toolSet;
-        const row = append(this._treeContainer, $(".tools-list-setrow"));
-        row.setAttribute("role", "treeitem");
-        row.setAttribute("aria-level", "1");
-        row.tabIndex = -1;
-        const setName = ts.description ?? ts.referenceName;
-        const toggleExpand = () => this._toggleCollapsed(ts.id);
-        const checkbox = this._rowStore.add(( new TriStateCheckbox(( localize(6148, "Enable {0}", setName)), getToolSetTriState(this._currentState(), ts.id, vm.allToolIds), defaultCheckboxStyles)));
-        checkbox.domNode.tabIndex = -1;
-        row.appendChild(checkbox.domNode);
-        if (vm.readOnly) {
-            checkbox.disable();
-            checkbox.setTitle(( localize(6149, "These are the agent's built-in tools and cannot be changed.")));
+    _renderToolSection(
+        title,
+        description,
+        emptyMessage,
+        model,
+        query,
+        renderActions,
+        showWhenEmpty = true
+    ) {
+        if (model.length === 0 && (query || !showWhenEmpty)) {
+            return;
+        }
+        const section = append(this._treeContainer, $(".tools-inventory-section"));
+        const header = append(section, $(".tools-inventory-section-header"));
+        const text = append(header, $(".tools-inventory-section-text"));
+        const headingRow = append(text, $(".tools-inventory-section-heading-row"));
+        append(headingRow, $("h3.tools-inventory-section-title")).textContent = title;
+        append(headingRow, $("span.tools-inventory-section-count")).textContent = String(model.length);
+        append(text, $("p.tools-inventory-section-description")).textContent = description;
+        renderActions?.(header);
+        let inventory;
+        if (model.length === 0) {
+            inventory = append(section, $(".tools-inventory-list"));
+            append(inventory, $(".plugin-inventory-empty")).textContent = emptyMessage;
         } else {
-            this._rowStore.add(checkbox.onChange(() => {
-                const enabled = checkbox.checked === true;
-                this._enablementService.setToolSetEnabled(this._sessionType, ts.id, vm.allToolIds, enabled);
-            }));
+            inventory = this._createToolsSectionList(section, title, model).container;
         }
-        const main = append(row, $(".tools-list-row-main"));
-        const text = append(main, $(".tools-list-row-text"));
-        const label = append(text, $("span.tools-list-row-label"));
-        const labelHighlight = this._rowStore.add(( new HighlightedLabel(label)));
-        labelHighlight.set(setName, vm.nameMatches);
-        const detail = this._resolveSetDetail(ts);
-        if (detail) {
-            append(text, $("span.tools-list-row-subtext")).textContent = detail;
-        }
-        const count = append(row, $("span.tools-list-row-count"));
-        const chevron = append(row, $("a.tools-list-chevron.codicon"));
-        chevron.setAttribute("aria-hidden", "true");
-        this._rowStore.add(addDisposableListener(row, "click", e => {
-            if (checkbox.domNode.contains(e.target)) {
-                return;
-            }
-            row.focus();
-            toggleExpand();
-        }));
-        this._rowStore.add(addDisposableListener(row, "contextmenu", e => {
-            const extension = this._resolveExtensionForToolSet(ts);
-            if (!extension) {
-                return;
+        const collapsedSections = this._collapsedSections ??= ( new Set());
+        setupCollapsibleSection(headingRow, inventory, title, this._rowStore, ( collapsedSections.has(title)), collapsed => {
+            if (collapsed) {
+                collapsedSections.add(title);
+            } else {
+                collapsedSections.delete(title);
             }
-            EventHelper.stop(e, true);
-            const anchor = e.button === 2 ? ( new StandardMouseEvent(getWindow(row), e)) : row;
-            this._showExtensionContextMenu(anchor, extension);
-        }));
-        const group = append(this._treeContainer, $(".tools-list-children"));
-        group.id = `tools-group-${ts.id}`;
-        group.setAttribute("role", "group");
-        group.setAttribute("aria-label", setName);
-        row.setAttribute("aria-owns", group.id);
-        const setRow = {
-            kind: "set",
-            rowId: `set:${ts.id}`,
-            toolSetId: ts.id,
-            element: row,
-            toggleNode: checkbox.domNode,
-            group,
-            children: []
+            this._scheduleSectionListLayout();
+        });
+    }
+    _createToolsSectionList(sectionEl, label, setVms) {
+        const listContainer = append(sectionEl, $(".tools-inventory-list"));
+        const setRenderer = ( new ToolsSetRowRenderer(
+            this._sessionType,
+            this._enablementService,
+            (vm, reader) => vm.forceExpanded || ( this._expanded.read(reader).has(vm.toolSet.id)),
+            setId => this._toggleCollapsed(setId),
+            ts => this._resolveExtensionForToolSet(ts),
+            (anchor, extension) => this._showExtensionContextMenu(anchor, extension)
+        ));
+        const list = this._rowStore.add(
+            this._instantiationService.createInstance(WorkbenchList, "ToolsSectionList", listContainer, ( new ToolsRowDelegate()), [setRenderer, ( new ToolsToolRowRenderer(this._sessionType, this._enablementService))], {
+                multipleSelectionSupport: false,
+                horizontalScrolling: false,
+                accessibilityProvider: {
+                    getWidgetAriaLabel: () => label,
+                    getWidgetRole: () => "tree",
+                    getRole: () => "treeitem",
+                    getAriaLevel: entry => entry.kind === "set" ? 1 : 2,
+                    getAriaLabel: () => null
+                },
+                identityProvider: {
+                    getId: entry => this._entryRowId(entry)
+                }
+            })
+        );
+        const section = {
+            list,
+            entries: this._computeSectionEntries(setVms),
+            setVms,
+            container: listContainer,
+            label
         };
-        for (const tool of vm.visibleTools) {
-            setRow.children.push(this._renderTool(group, setRow, vm, tool));
+        if (section.entries.length > 0) {
+            listContainer.style.height = `${computeToolsRowHeight(section.entries[0])}px`;
         }
-        this._rowStore.add(autorun(reader => {
-            const state = this._readState(reader);
-            const triState = getToolSetTriState(state, ts.id, vm.allToolIds);
-            checkbox.checked = triState;
-            this._updateRowAriaChecked(row, triState);
-            const enabledCount = vm.allToolIds.reduce((n, id) => n + (isToolEnabledInSet(state, ts.id, id) ? 1 : 0), 0);
-            count.textContent = `${enabledCount}/${vm.allToolIds.length}`;
-            count.setAttribute("aria-label", ( localize(6150, "{0} of {1} tools enabled", enabledCount, vm.allToolIds.length)));
-        }));
-        this._rowStore.add(autorun(reader => {
-            const expanded = vm.forceExpanded || ( this._expanded.read(reader).has(ts.id));
-            group.style.display = expanded ? "" : "none";
-            chevron.classList.toggle("codicon-chevron-down", expanded);
-            chevron.classList.toggle("codicon-chevron-right", !expanded);
-            row.setAttribute("aria-expanded", String(expanded));
-            this._treeScrollable.scanDomNode();
+        list.splice(0, list.length, section.entries);
+        list.scrollTop = this._sectionScrollPositions.get(label) ?? 0;
+        this._rowStore.add(list.onDidChangeSelection(event => {
+            if (event.indexes.length > 0) {
+                list.setSelection([]);
+            }
         }));
-        return setRow;
+        this._rowStore.add(
+            list.onDidChangeFocus(event => setRenderer.setFocusedIndex(event.indexes[0] ?? -1))
+        );
+        let focusBeforeKeyDown;
+        this._rowStore.add(
+            addStandardDisposableListener(listContainer, EventType.KEY_DOWN, () => {
+                focusBeforeKeyDown = list.getFocus()[0];
+            }, true)
+        );
+        this._rowStore.add(
+            addStandardDisposableListener(list.getHTMLElement(), EventType.KEY_DOWN, e => {
+                this._onSectionKeyDown(section, e, () => focusBeforeKeyDown);
+            })
+        );
+        this._sectionLists.push(section);
+        return section;
     }
-    _renderTool(group, parent, vm, toolVm) {
-        const tool = toolVm.tool;
-        const enabled = isToolEnabledInSet(this._currentState(), vm.toolSet.id, tool.id);
-        const toolName = tool.displayName ?? tool.id;
-        const row = append(group, $(".tools-list-toolrow"));
-        row.classList.toggle("readonly", vm.readOnly);
-        row.setAttribute("role", "treeitem");
-        row.setAttribute("aria-level", "2");
-        row.tabIndex = -1;
-        const checkbox = this._rowStore.add(( new Checkbox(( localize(6151, "Enable {0}", toolName)), enabled, defaultCheckboxStyles)));
-        checkbox.domNode.tabIndex = -1;
-        row.appendChild(checkbox.domNode);
-        this._updateRowAriaChecked(row, enabled);
-        if (vm.readOnly) {
-            checkbox.disable();
-            checkbox.setTitle(( localize(6149, "These are the agent's built-in tools and cannot be changed.")));
-        } else {
-            this._rowStore.add(checkbox.onChange(() => {
-                this._enablementService.setToolEnabled(this._sessionType, vm.toolSet.id, tool.id, checkbox.checked);
-            }));
-            this._rowStore.add(addDisposableListener(row, "click", e => {
-                if (checkbox.domNode.contains(e.target)) {
-                    return;
+    _computeSectionEntries(setVms) {
+        const entries = [];
+        for (const vm of setVms) {
+            entries.push({
+                kind: "set",
+                vm
+            });
+            if (this._isRowExpanded(vm)) {
+                for (const toolVm of vm.visibleTools) {
+                    entries.push({
+                        kind: "tool",
+                        setVm: vm,
+                        toolVm
+                    });
                 }
-                row.focus();
-                this._enablementService.setToolEnabled(this._sessionType, vm.toolSet.id, tool.id, !checkbox.checked);
-            }));
-            this._rowStore.add(autorun(reader => {
-                const toolEnabled = isToolEnabledInSet(this._readState(reader), vm.toolSet.id, tool.id);
-                checkbox.checked = toolEnabled;
-                this._updateRowAriaChecked(row, toolEnabled);
-            }));
-        }
-        const text = append(row, $(".tools-list-row-text"));
-        const label = append(text, $("span.tools-list-row-label"));
-        const labelHighlight = this._rowStore.add(( new HighlightedLabel(label)));
-        labelHighlight.set(toolName, toolVm.nameMatches);
-        const description = tool.userDescription ?? tool.modelDescription;
-        if (description) {
-            const subtext = append(text, $("span.tools-list-row-subtext"));
-            subtext.textContent = description;
+            }
         }
-        return {
-            kind: "tool",
-            rowId: `tool:${vm.toolSet.id}:${tool.id}`,
-            toolSetId: vm.toolSet.id,
-            element: row,
-            toggleNode: checkbox.domNode,
-            parent
-        };
+        return entries;
     }
-    _resolveSetDetail(ts) {
-        if (ts.detail) {
-            return ts.detail;
-        }
-        if (ts.source.type !== "extension") {
-            return undefined;
-        }
-        const source = ts.source;
-        const extension = this._extensionsWorkbenchService.local.find(e => ExtensionIdentifier.equals(e.identifier.id, source.extensionId));
-        return extension?.description || ( localize(6152, "Tools contributed by {0}", source.label));
+    _isRowExpanded(vm) {
+        return vm.forceExpanded || ( this._expanded.get().has(vm.toolSet.id));
     }
-    _updateRowAriaChecked(element, state) {
-        element.setAttribute("aria-checked", state === "mixed" ? "mixed" : String(state));
+    _entryRowId(entry) {
+        return entry.kind === "set" ? `set:${entry.vm.toolSet.id}` : `tool:${entry.setVm.toolSet.id}:${entry.toolVm.tool.id}`;
     }
-    _toggleCollapsed(toolSetId) {
-        const next = ( new Set(this._expanded.get()));
-        if (( next.has(toolSetId))) {
-            next.delete(toolSetId);
-        } else {
-            next.add(toolSetId);
-        }
-        this._expanded.set(next, undefined);
+    _currentFocusedRowId(section) {
+        const index = section.list.getFocus()[0];
+        const entry = index !== undefined ? section.entries[index] : undefined;
+        return entry ? this._entryRowId(entry) : undefined;
     }
-    _setExpanded(toolSetId, expanded) {
-        const next = ( new Set(this._expanded.get()));
-        if (expanded === ( next.has(toolSetId))) {
-            return;
+    _refreshAllSectionEntries() {
+        for (const section of this._sectionLists) {
+            this._refreshSectionEntries(section);
         }
-        if (expanded) {
-            next.add(toolSetId);
-        } else {
-            next.delete(toolSetId);
-        }
-        this._expanded.set(next, undefined);
-    }
-    _isExpanded(setRow) {
-        return setRow.group.style.display !== "none";
     }
-    _visibleRows() {
-        return this._rows.filter(r => r.kind === "set" || this._isExpanded(r.parent));
-    }
-    _setRovingRow(row) {
-        for (const r of this._rows) {
-            r.element.tabIndex = r === row ? 0 : -1;
+    _refreshSectionEntries(section) {
+        const focusedRowId = this._currentFocusedRowId(section);
+        const nextEntries = this._computeSectionEntries(section.setVms);
+        section.entries = nextEntries;
+        section.list.splice(0, section.list.length, nextEntries);
+        if (focusedRowId) {
+            const index = nextEntries.findIndex(e => this._entryRowId(e) === focusedRowId);
+            if (index !== -1) {
+                section.list.setFocus([index]);
+                section.list.domFocus();
+            }
         }
-        this._activeRowId = row.rowId;
+        this._scheduleSectionListLayout();
     }
-    _focusRow(row) {
-        this._setRovingRow(row);
-        row.element.focus();
-    }
-    _rowFromTarget(target) {
-        for (let el = target; el && el !== this._treeContainer; el = el.parentElement) {
-            const row = this._rowByElement.get(el);
-            if (row) {
-                return row;
+    _restoreFocus(rowId) {
+        for (const section of this._sectionLists) {
+            if (section.container.hidden) {
+                continue;
+            }
+            const index = section.entries.findIndex(e => this._entryRowId(e) === rowId);
+            if (index !== -1) {
+                section.list.setFocus([index]);
+                section.list.reveal(index);
+                section.list.domFocus();
+                return;
             }
         }
-        return undefined;
+        this._focusFirstOverall();
     }
-    _initRovingTabIndex(refocus = false) {
-        let active = this._activeRowId ? this._rows.find(r => r.rowId === this._activeRowId) : undefined;
-        if (!active || (active.kind === "tool" && !this._isExpanded(active.parent))) {
-            active = this._visibleRows()[0];
-        }
-        for (const r of this._rows) {
-            r.element.tabIndex = r === active ? 0 : -1;
-        }
-        this._activeRowId = active?.rowId;
-        if (refocus && active) {
-            active.element.focus();
+    _layoutSectionLists() {
+        const heights = layoutVirtualizedSections(this._treeContainer, ( this._sectionLists.map(section => ({
+            container: section.container,
+            contentHeight: section.entries.reduce((sum, entry) => sum + computeToolsRowHeight(entry), 0),
+            minimumHeight: getVirtualizedSectionMinimumHeight(section.entries, computeToolsRowHeight)
+        }))));
+        for (let index = 0; index < this._sectionLists.length; index++) {
+            this._layoutSection(this._sectionLists[index], heights[index]);
         }
     }
-    _onTreeKeyDown(e) {
-        const row = this._rowFromTarget(e.target);
-        if (!row) {
+    _scheduleSectionListLayout() {
+        this._pendingSectionLayout.value = scheduleAtNextAnimationFrame(getWindow(this.element), () => {
+            this._layoutSectionLists();
+            this._treeScrollable.scanDomNode();
+        });
+    }
+    _layoutSection(section, allocatedHeight) {
+        const contentHeight = section.entries.reduce((sum, e) => sum + computeToolsRowHeight(e), 0);
+        const height = allocatedHeight ?? Math.min(contentHeight, TOOLS_SECTION_MAX_HEIGHT);
+        layoutVirtualizedSectionList(
+            section.list,
+            section.container,
+            height,
+            section.container.clientWidth || this._lastWidth || undefined
+        );
+    }
+    _onSectionKeyDown(section, e, getFocusBeforeKeyDown) {
+        const entries = section.entries;
+        if (entries.length === 0) {
             return;
         }
+        const focusIndex = section.list.getFocus()[0];
+        const entry = entries[focusIndex ?? 0];
         let handled = true;
         switch (e.keyCode) {
         case KeyCode.DownArrow:
-            this._focusRelative(row, 1);
-            break;
+            {
+                const before = getFocusBeforeKeyDown();
+                handled = before !== undefined && before === entries.length - 1;
+                if (handled) {
+                    this._focusAdjacentSection(section, 1);
+                }
+                break;
+            }
         case KeyCode.UpArrow:
-            this._focusRelative(row, -1);
-            break;
+            {
+                const before = getFocusBeforeKeyDown();
+                handled = before !== undefined && before === 0;
+                if (handled) {
+                    this._focusAdjacentSection(section, -1);
+                }
+                break;
+            }
         case KeyCode.RightArrow:
-            handled = this._onExpandKey(row);
+            handled = this._onExpandKey(section, entry);
             break;
         case KeyCode.LeftArrow:
-            handled = this._onCollapseKey(row);
+            handled = this._onCollapseKey(section, entry);
             break;
         case KeyCode.Home:
-            this._focusEdge(true);
+            this._focusFirstOverall();
             break;
         case KeyCode.End:
-            this._focusEdge(false);
+            this._focusLastOverall();
             break;
         case KeyCode.Space:
+            this._onActivateKey(entry, false);
+            break;
         case KeyCode.Enter:
-            row.toggleNode.click();
+            this._onActivateKey(entry, true);
             break;
         default:
             handled = false;
@@ -741,40 +970,129 @@ let ToolsListWidget = class ToolsListWidget extends Disposable {
             e.stopPropagation();
         }
     }
-    _focusRelative(row, delta) {
-        const rows = this._visibleRows();
-        const index = rows.indexOf(row);
-        const next = index === -1 ? undefined : rows[index + delta];
-        if (next) {
-            this._focusRow(next);
+    _onActivateKey(entry, viaEnter) {
+        const readOnly = entry.kind === "set" ? entry.vm.readOnly : entry.setVm.readOnly;
+        if (readOnly) {
+            if (viaEnter && entry.kind === "set") {
+                this._toggleCollapsed(entry.vm.toolSet.id);
+            }
+            return;
+        }
+        if (entry.kind === "set") {
+            const vm = entry.vm;
+            const current = getToolSetTriState(this._currentState(), vm.toolSet.id, vm.allToolIds);
+            this._enablementService.setToolSetEnabled(this._sessionType, vm.toolSet.id, vm.allToolIds, current !== true);
+        } else {
+            const {
+                setVm,
+                toolVm
+            } = entry;
+            const current = isToolEnabledInSet(this._currentState(), setVm.toolSet.id, toolVm.tool.id);
+            this._enablementService.setToolEnabled(this._sessionType, setVm.toolSet.id, toolVm.tool.id, !current);
         }
     }
-    _focusEdge(first) {
-        const rows = this._visibleRows();
-        this._focusRow(first ? rows[0] : rows[rows.length - 1]);
-    }
-    _onExpandKey(row) {
-        if (row.kind !== "set") {
+    _onExpandKey(section, entry) {
+        if (entry.kind !== "set") {
             return false;
         }
-        if (!this._isExpanded(row)) {
-            this._setExpanded(row.toolSetId, true);
-        } else if (row.children.length) {
-            this._focusRow(row.children[0]);
+        const vm = entry.vm;
+        if (!this._isRowExpanded(vm)) {
+            this._setExpanded(vm.toolSet.id, true);
+        } else if (vm.visibleTools.length) {
+            this._focusEntryInSection(section, `tool:${vm.toolSet.id}:${vm.visibleTools[0].tool.id}`);
         }
         return true;
     }
-    _onCollapseKey(row) {
-        if (row.kind === "set") {
-            if (this._isExpanded(row)) {
-                this._setExpanded(row.toolSetId, false);
+    _onCollapseKey(section, entry) {
+        if (entry.kind === "set") {
+            if (this._isRowExpanded(entry.vm)) {
+                this._setExpanded(entry.vm.toolSet.id, false);
                 return true;
             }
             return false;
         }
-        this._focusRow(row.parent);
+        this._focusEntryInSection(section, `set:${entry.setVm.toolSet.id}`);
         return true;
     }
+    _focusEntryInSection(section, rowId) {
+        const index = section.entries.findIndex(e => this._entryRowId(e) === rowId);
+        if (index === -1) {
+            return;
+        }
+        section.list.setFocus([index]);
+        section.list.reveal(index);
+        section.list.domFocus();
+    }
+    _focusAdjacentSection(from, delta) {
+        let targetIndex = this._sectionLists.indexOf(from) + delta;
+        while (this._sectionLists[targetIndex]?.container.hidden) {
+            targetIndex += delta;
+        }
+        const target = this._sectionLists[targetIndex];
+        if (!target) {
+            return;
+        }
+        if (target.entries.length === 0) {
+            this._focusAdjacentSection(target, delta);
+            return;
+        }
+        const index = delta === 1 ? 0 : target.entries.length - 1;
+        target.list.setFocus([index]);
+        target.list.reveal(index);
+        target.list.domFocus();
+    }
+    _focusFirstOverall() {
+        const section = this._sectionLists.find(s => !s.container.hidden && s.entries.length > 0);
+        if (section) {
+            section.list.setFocus([0]);
+            section.list.reveal(0);
+            section.list.domFocus();
+        }
+    }
+    _focusLastOverall() {
+        for (let i = this._sectionLists.length - 1; i >= 0; i--) {
+            const section = this._sectionLists[i];
+            if (!section.container.hidden && section.entries.length > 0) {
+                const index = section.entries.length - 1;
+                section.list.setFocus([index]);
+                section.list.reveal(index);
+                section.list.domFocus();
+                return;
+            }
+        }
+    }
+    _resolveSetDetail(ts) {
+        if (ts.detail) {
+            return ts.detail;
+        }
+        if (ts.source.type !== "extension") {
+            return undefined;
+        }
+        const source = ts.source;
+        const extension = this._extensionsWorkbenchService.local.find(e => ExtensionIdentifier.equals(e.identifier.id, source.extensionId));
+        return extension?.description || ( localize(7061, "Tools contributed by {0}", source.label));
+    }
+    _toggleCollapsed(toolSetId) {
+        const next = ( new Set(this._expanded.get()));
+        if (( next.has(toolSetId))) {
+            next.delete(toolSetId);
+        } else {
+            next.add(toolSetId);
+        }
+        this._expanded.set(next, undefined);
+    }
+    _setExpanded(toolSetId, expanded) {
+        const next = ( new Set(this._expanded.get()));
+        if (expanded === ( next.has(toolSetId))) {
+            return;
+        }
+        if (expanded) {
+            next.add(toolSetId);
+        } else {
+            next.delete(toolSetId);
+        }
+        this._expanded.set(next, undefined);
+    }
     _currentState() {
         return this._enablementService.getState(this._sessionType);
     }
@@ -798,7 +1116,7 @@ let ToolsListWidget = class ToolsListWidget extends Disposable {
     }
     _showExtensionContextMenu(anchor, extension) {
         const disposables = ( new DisposableStore());
-        const uninstallAction = disposables.add(( new Action("toolsList.uninstallExtension", ( localize(6153, "Uninstall Extension")), undefined, true, () => this._uninstallExtension(extension))));
+        const uninstallAction = disposables.add(( new Action("toolsList.uninstallExtension", ( localize(7062, "Uninstall Extension")), undefined, true, () => this._uninstallExtension(extension))));
         this._contextMenuService.showContextMenu({
             getAnchor: () => anchor,
             getActions: () => [uninstallAction],
@@ -808,15 +1126,15 @@ let ToolsListWidget = class ToolsListWidget extends Disposable {
     async _uninstallExtension(extension) {
         const result = await this._dialogService.confirm({
             message: ( localize(
-                6154,
+                7063,
                 "Do you want to uninstall the extension '{0}'?",
                 extension.displayName
             )),
             detail: ( localize(
-                6155,
+                7064,
                 "This extension may contribute more than tools. Uninstalling it removes all of its contributions."
             )),
-            primaryButton: ( localize(6156, "Uninstall Extension")),
+            primaryButton: ( localize(7065, "Uninstall Extension")),
             type: "question"
         });
         if (result.confirmed) {
@@ -828,58 +1146,58 @@ ToolsListWidget = ( __decorate([( __param(1, ILanguageModelToolsService)), ( __p
 const COPILOT_CLI_TOOLS = [
 {
     name: "bash / powershell",
-    description: ( localize(6157, "Execute commands"))
+    description: ( localize(7066, "Execute commands"))
 }, {
     name: "list_bash / list_powershell",
-    description: ( localize(6158, "List active shell sessions"))
+    description: ( localize(7067, "List active shell sessions"))
 }, {
     name: "read_bash / read_powershell",
-    description: ( localize(6159, "Read output from a shell session"))
+    description: ( localize(7068, "Read output from a shell session"))
 }, {
     name: "stop_bash / stop_powershell",
-    description: ( localize(6160, "Terminate a shell session"))
+    description: ( localize(7069, "Terminate a shell session"))
 }, {
     name: "write_bash / write_powershell",
-    description: ( localize(6161, "Send input to a shell session"))
+    description: ( localize(7070, "Send input to a shell session"))
 },
 {
     name: "apply_patch",
-    description: ( localize(6162, "Apply patches (used by some models instead of edit/create)"))
+    description: ( localize(7071, "Apply patches (used by some models instead of edit/create)"))
 }, {
     name: "create",
-    description: ( localize(6163, "Create new files"))
+    description: ( localize(7072, "Create new files"))
 }, {
     name: "edit",
-    description: ( localize(6164, "Edit files via string replacement"))
+    description: ( localize(7073, "Edit files via string replacement"))
 }, {
     name: "view",
-    description: ( localize(6165, "Read files or directories"))
+    description: ( localize(7074, "Read files or directories"))
 },
 {
     name: "list_agents",
-    description: ( localize(6166, "List available agents"))
+    description: ( localize(7075, "List available agents"))
 }, {
     name: "read_agent",
-    description: ( localize(6167, "Check background agent status"))
+    description: ( localize(7076, "Check background agent status"))
 }, {
     name: "task",
-    description: ( localize(6168, "Run subagents"))
+    description: ( localize(7077, "Run subagents"))
 },
 {
     name: "ask_user",
-    description: ( localize(6169, "Ask the user a question"))
+    description: ( localize(7078, "Ask the user a question"))
 }, {
     name: "glob",
-    description: ( localize(6170, "Find files matching patterns"))
+    description: ( localize(7079, "Find files matching patterns"))
 }, {
     name: "grep (or rg)",
-    description: ( localize(6171, "Search for text in files"))
+    description: ( localize(7080, "Search for text in files"))
 }, {
     name: "skill",
-    description: ( localize(6172, "Invoke custom skills"))
+    description: ( localize(7081, "Invoke custom skills"))
 }, {
     name: "web_fetch",
-    description: ( localize(6173, "Fetch and parse web content"))
+    description: ( localize(7082, "Fetch and parse web content"))
 }];
 const CUSTOM_TOOL_SET_ORDER = {
     "copilot-cli": 0,