@codingame/monaco-vscode-chat-service-override 32.0.2 → 33.0.4

package/vscode/src/vs/workbench/contrib/chat/browser/aiCustomization/mcpListWidget.d.ts

@@ -36,8 +36,7 @@ export declare class McpListWidget extends Disposable {
     readonly onDidChangeItemCount: import("@codingame/monaco-vscode-api/vscode/vs/base/common/event").Event<number>;
     private readonly _onDidRequestShowPlugin;
     readonly onDidRequestShowPlugin: import("@codingame/monaco-vscode-api/vscode/vs/base/common/event").Event<IAgentPluginItem>;
-    private sectionHeader;
-    private sectionDescription;
+    private sectionTitleHeader;
     private sectionLink;
     private searchAndButtonContainer;
     private searchInput;
@@ -60,6 +59,7 @@ export declare class McpListWidget extends Disposable {
     private browseMode;
     private lastHeight;
     private lastWidth;
+    private lastHeaderHeight;
     private _layoutDeferred;
     private readonly collapsedGroups;
     private galleryCts;
@@ -88,10 +88,6 @@ export declare class McpListWidget extends Disposable {
      * Toggles the collapsed state of a group.
      */
     private toggleGroup;
-    /**
-     * Prepends an element to the search row (left of the search input).
-     */
-    prependToSearchRow(element: HTMLElement): void;
     /**
      * Whether the widget is currently in marketplace browse mode.
      */

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

@@ -2,7 +2,7 @@
 import { registerCss } from '@codingame/monaco-vscode-api/css';
 import { __decorate, __param } from '@codingame/monaco-vscode-api/external/tslib/tslib.es6';
 import * as aiCustomizationManagement from './media/aiCustomizationManagement.css';
-import { $ as $$1, append, addDisposableListener, clearNode, createTextNode, getWindow } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/dom';
+import { $ as $$1, append, createTextNode, addDisposableListener, getWindow, DisposableResizeObserver, clearNode } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/dom';
 import { DisposableStore, Disposable, MutableDisposable, isDisposable } from '@codingame/monaco-vscode-api/vscode/vs/base/common/lifecycle';
 import { Emitter } from '@codingame/monaco-vscode-api/vscode/vs/base/common/event';
 import { localize } from '@codingame/monaco-vscode-api/vscode/vs/nls';
@@ -119,7 +119,7 @@ let McpServerItemRenderer = class McpServerItemRenderer {
                     const plugin = this.agentPluginService.plugins.get().find(p => ( p.uri.toString()) === pluginUriStr);
                     if (plugin) {
                         return {
-                            content: `${element.label}\n${( localize(5593, "Plugin: {0}", plugin.label))}`,
+                            content: `${element.label}\n${( localize(5641, "Plugin: {0}", plugin.label))}`,
                             appearance: {
                                 compact: true,
                                 skipFadeInAnimation: true
@@ -161,26 +161,26 @@ let McpServerItemRenderer = class McpServerItemRenderer {
         }
         statusElement.style.display = "";
         if (state === "disabled") {
-            statusElement.textContent = ( localize(5594, "Disabled"));
+            statusElement.textContent = ( localize(5642, "Disabled"));
             statusElement.classList.add("disabled");
             return;
         }
         switch (state) {
         case McpConnectionState.Kind.Running:
-            statusElement.textContent = ( localize(5595, "Running"));
+            statusElement.textContent = ( localize(5643, "Running"));
             statusElement.classList.add("running");
             break;
         case McpConnectionState.Kind.Starting:
-            statusElement.textContent = ( localize(5596, "Starting"));
+            statusElement.textContent = ( localize(5644, "Starting"));
             statusElement.classList.add("starting");
             break;
         case McpConnectionState.Kind.Error:
-            statusElement.textContent = ( localize(5597, "Error"));
+            statusElement.textContent = ( localize(5645, "Error"));
             statusElement.classList.add("error");
             break;
         case McpConnectionState.Kind.Stopped:
         default:
-            statusElement.textContent = ( localize(5598, "Stopped"));
+            statusElement.textContent = ( localize(5646, "Stopped"));
             statusElement.classList.add("stopped");
             break;
         }
@@ -231,7 +231,7 @@ class McpGalleryItemRenderer {
         templateData.elementDisposables.add(templateData.installButton.onDidClick(async () => {
             const canInstall = this.mcpWorkbenchService.canInstall(element.server);
             if (canInstall === true) {
-                templateData.installButton.label = ( localize(5599, "Installing..."));
+                templateData.installButton.label = ( localize(5647, "Installing..."));
                 templateData.installButton.enabled = false;
                 await this.mcpWorkbenchService.install(element.server);
             }
@@ -245,15 +245,15 @@ class McpGalleryItemRenderer {
     updateInstallButton(button, server) {
         switch (server.installState) {
         case McpServerInstallState.Installed:
-            button.label = ( localize(5600, "Installed"));
+            button.label = ( localize(5648, "Installed"));
             button.enabled = false;
             break;
         case McpServerInstallState.Installing:
-            button.label = ( localize(5599, "Installing..."));
+            button.label = ( localize(5647, "Installing..."));
             button.enabled = false;
             break;
         default:
-            button.label = ( localize(5601, "Install"));
+            button.label = ( localize(5649, "Install"));
             button.enabled = true;
             break;
         }
@@ -306,6 +306,7 @@ let McpListWidget = class McpListWidget extends Disposable {
         this.browseMode = false;
         this.lastHeight = 0;
         this.lastWidth = 0;
+        this.lastHeaderHeight = 0;
         this._layoutDeferred = false;
         this.collapsedGroups = ( new Set());
         this.delayedFilter = ( new Delayer(200));
@@ -325,10 +326,45 @@ let McpListWidget = class McpListWidget extends Disposable {
         });
     }
     create() {
+        this.sectionTitleHeader = append(this.element, $(".section-title-header"));
+        const titleRow = append(this.sectionTitleHeader, $(".section-title-row"));
+        const sectionTitle = append(titleRow, $("h2.section-title"));
+        sectionTitle.textContent = ( localize(5650, "MCP Servers"));
+        const sectionTitleDescription = append(this.sectionTitleHeader, $("p.section-title-description"));
+        const sectionTitleDescriptionText = append(sectionTitleDescription, $("span.section-title-description-text"));
+        sectionTitleDescriptionText.textContent = ( localize(
+            5651,
+            "An open standard that lets AI use external tools and services. MCP servers provide tools for file operations, databases, APIs, and more."
+        ));
+        sectionTitleDescription.appendChild(createTextNode(" "));
+        this.sectionLink = append(sectionTitleDescription, $("a.section-title-link"));
+        this.sectionLink.textContent = ( localize(5652, "Learn more about MCP servers"));
+        this.sectionLink.href = "https://code.visualstudio.com/docs/copilot/chat/mcp-servers";
+        this._register(addDisposableListener(this.sectionLink, "click", e => {
+            e.preventDefault();
+            const href = this.sectionLink.href;
+            if (href) {
+                this.openerService.open(( URI.parse(href)));
+            }
+        }));
+        const targetWindow = getWindow(this.element);
+        const headerObserver = this._register(
+            new DisposableResizeObserver("McpListWidget.sectionTitleHeader", () => {
+                if (this.lastWidth <= 0 || this.lastHeight <= 0) {
+                    return;
+                }
+                const headerHeight = this.sectionTitleHeader.offsetHeight;
+                if (headerHeight === this.lastHeaderHeight) {
+                    return;
+                }
+                this.layout(this.lastHeight, this.lastWidth);
+            }, targetWindow)
+        );
+        this._register(headerObserver.observe(this.sectionTitleHeader));
         this.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(5602, "Type to search...")),
+            placeholder: ( localize(5653, "Type to search...")),
             inputBoxStyles: defaultInputBoxStyles
         })));
         this._register(this.searchInput.onDidChange(() => {
@@ -346,7 +382,7 @@ let McpListWidget = class McpListWidget extends Disposable {
             secondary: true,
             supportIcons: true
         })));
-        this.browseButton.label = `$(${Codicon.library.id}) ${( localize(5603, "Browse Marketplace"))}`;
+        this.browseButton.label = `$(${Codicon.library.id}) ${( localize(5654, "Browse Marketplace"))}`;
         this.browseButton.element.classList.add("list-add-button");
         this._register(this.browseButton.onDidClick(() => {
             this.toggleBrowseMode(!this.browseMode);
@@ -355,13 +391,13 @@ let McpListWidget = class McpListWidget extends Disposable {
             ...defaultButtonStyles,
             secondary: true,
             supportIcons: true,
-            title: ( localize(5604, "Add Server")),
-            ariaLabel: ( localize(5604, "Add Server"))
+            title: ( localize(5655, "Add Server")),
+            ariaLabel: ( localize(5655, "Add Server"))
         })));
         this.addButton.label = `$(${Codicon.add.id})`;
         this.addButton.element.classList.add("list-icon-button");
         this._register(
-            this.hoverService.setupManagedHover(getDefaultHoverDelegate("element"), this.addButton.element, ( localize(5605, "Add Server")))
+            this.hoverService.setupManagedHover(getDefaultHoverDelegate("element"), this.addButton.element, ( localize(5656, "Add Server")))
         );
         this._register(this.addButton.onDidClick(() => {
             this.commandService.executeCommand(McpCommandIds.AddConfiguration);
@@ -376,25 +412,9 @@ let McpListWidget = class McpListWidget 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(5606, "MCP servers are disabled"));
+        disabledText.textContent = ( localize(5657, "MCP servers 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(
-            5607,
-            "An open standard that lets AI use external tools and services. MCP servers provide tools for file operations, databases, APIs, and more."
-        ));
-        this.sectionLink = append(this.sectionHeader, $("a.section-footer-link"));
-        this.sectionLink.textContent = ( localize(5608, "Learn more about MCP servers"));
-        this.sectionLink.href = "https://code.visualstudio.com/docs/copilot/chat/mcp-servers";
-        this._register(addDisposableListener(this.sectionLink, "click", e => {
-            e.preventDefault();
-            const href = this.sectionLink.href;
-            if (href) {
-                this.openerService.open(( URI.parse(href)));
-            }
-        }));
         const delegate = ( new McpServerItemDelegate());
         const groupHeaderRenderer = ( new CustomizationGroupHeaderRenderer("mcpGroupHeader", this.hoverService));
         const localRenderer = this.instantiationService.createInstance(McpServerItemRenderer);
@@ -413,17 +433,17 @@ let McpListWidget = class McpListWidget extends Disposable {
                     getAriaLabel: element => {
                         if (element.type === "group-header") {
                             return localize(
-                                5609,
+                                5658,
                                 "{0}, {1} items, {2}",
                                 element.label,
                                 element.count,
-                                element.collapsed ? ( localize(5610, "collapsed")) : ( localize(5611, "expanded"))
+                                element.collapsed ? ( localize(5659, "collapsed")) : ( localize(5660, "expanded"))
                             );
                         }
                         return element.type === "builtin-item" ? element.label : element.server.label;
                     },
                     getWidgetAriaLabel() {
-                        return localize(5612, "MCP Servers");
+                        return localize(5661, "MCP Servers");
                     }
                 },
                 openOnSingleClick: true,
@@ -485,13 +505,13 @@ let McpListWidget = class McpListWidget extends Disposable {
             this.disabledLinkListener.clear();
             if (policyLocked) {
                 this.disabledMessage.textContent = ( localize(
-                    5613,
+                    5662,
                     "Access to MCP servers is disabled by your organization. Contact your organization administrator for more information."
                 ));
             } else {
-                this.disabledMessage.appendChild(createTextNode(( localize(5614, "MCP servers are disabled in settings. "))));
+                this.disabledMessage.appendChild(createTextNode(( localize(5663, "MCP servers are disabled in settings. "))));
                 const link = append(this.disabledMessage, $("a.mcp-disabled-settings-link"));
-                link.textContent = ( localize(5615, "Configure in settings."));
+                link.textContent = ( localize(5664, "Configure in settings."));
                 link.href = "#";
                 link.setAttribute("role", "button");
                 this.disabledLinkListener.value = addDisposableListener(link, "click", e => {
@@ -512,7 +532,7 @@ let McpListWidget = class McpListWidget extends Disposable {
         this.searchQuery = "";
         this.addButton.element.style.display = browse ? "none" : "";
         this.browseButton.element.parentElement.style.display = browse ? "none" : "";
-        this.searchInput.setPlaceHolder(browse ? ( localize(5616, "Search MCP marketplace...")) : ( localize(5602, "Type to search...")));
+        this.searchInput.setPlaceHolder(browse ? ( localize(5665, "Search MCP marketplace...")) : ( localize(5653, "Type to search...")));
         if (browse) {
             void this.queryGallery();
         } else {
@@ -529,7 +549,7 @@ let McpListWidget = class McpListWidget extends Disposable {
         const cts = this.galleryCts = ( new CancellationTokenSource());
         this.emptyContainer.style.display = "flex";
         this.listContainer.style.display = "none";
-        this.emptyText.textContent = ( localize(5617, "Loading marketplace..."));
+        this.emptyText.textContent = ( localize(5666, "Loading marketplace..."));
         this.emptySubtext.textContent = "";
         try {
             const pager = await this.mcpWorkbenchService.queryGallery({
@@ -545,8 +565,8 @@ let McpListWidget = class McpListWidget extends Disposable {
                 this.galleryServers = [];
                 this.emptyContainer.style.display = "flex";
                 this.listContainer.style.display = "none";
-                this.emptyText.textContent = ( localize(5618, "Unable to load marketplace"));
-                this.emptySubtext.textContent = ( localize(5619, "Check your connection and try again"));
+                this.emptyText.textContent = ( localize(5667, "Unable to load marketplace"));
+                this.emptySubtext.textContent = ( localize(5668, "Check your connection and try again"));
             }
         }
     }
@@ -555,10 +575,10 @@ let McpListWidget = class McpListWidget extends Disposable {
             this.emptyContainer.style.display = "flex";
             this.listContainer.style.display = "none";
             if (this.searchQuery.trim()) {
-                this.emptyText.textContent = ( localize(5620, "No servers match '{0}'", this.searchQuery));
-                this.emptySubtext.textContent = ( localize(5621, "Try a different search term"));
+                this.emptyText.textContent = ( localize(5669, "No servers match '{0}'", this.searchQuery));
+                this.emptySubtext.textContent = ( localize(5670, "Try a different search term"));
             } else {
-                this.emptyText.textContent = ( localize(5622, "No MCP servers available"));
+                this.emptyText.textContent = ( localize(5671, "No MCP servers available"));
                 this.emptySubtext.textContent = "";
             }
         } else {
@@ -586,11 +606,11 @@ let McpListWidget = class McpListWidget extends Disposable {
             this.emptyContainer.style.display = "flex";
             this.listContainer.style.display = "none";
             if (this.searchQuery.trim()) {
-                this.emptyText.textContent = ( localize(5623, "No servers match '{0}'", this.searchQuery));
-                this.emptySubtext.textContent = ( localize(5621, "Try a different search term"));
+                this.emptyText.textContent = ( localize(5672, "No servers match '{0}'", this.searchQuery));
+                this.emptySubtext.textContent = ( localize(5670, "Try a different search term"));
             } else {
-                this.emptyText.textContent = ( localize(5624, "No MCP servers configured"));
-                this.emptySubtext.textContent = ( localize(5625, "Add an MCP server configuration to get started"));
+                this.emptyText.textContent = ( localize(5673, "No MCP servers configured"));
+                this.emptySubtext.textContent = ( localize(5674, "Add an MCP server configuration to get started"));
             }
         } else {
             this.emptyContainer.style.display = "none";
@@ -598,19 +618,19 @@ let McpListWidget = class McpListWidget extends Disposable {
         }
         const groups = [{
             scope: LocalMcpServerScope.Workspace,
-            label: ( localize(5626, "Workspace")),
+            label: ( localize(5675, "Workspace")),
             icon: workspaceIcon,
             description: ( localize(
-                5627,
+                5676,
                 "MCP servers configured in your workspace settings, shared with your team via version control."
             )),
             servers: []
         }, {
             scope: LocalMcpServerScope.User,
-            label: ( localize(5628, "User")),
+            label: ( localize(5677, "User")),
             icon: userIcon,
             description: ( localize(
-                5629,
+                5678,
                 "MCP servers configured in your user settings. Private to you and available across all projects."
             )),
             servers: []
@@ -671,11 +691,11 @@ let McpListWidget = class McpListWidget extends Disposable {
                 type: "group-header",
                 id: "mcp-group-plugin",
                 scope: "plugin",
-                label: ( localize(5630, "Plugins")),
+                label: ( localize(5679, "Plugins")),
                 icon: pluginIcon,
                 count: pluginServers.length,
                 isFirst,
-                description: ( localize(5631, "MCP servers provided by installed plugins.")),
+                description: ( localize(5680, "MCP servers provided by installed plugins.")),
                 collapsed
             });
             if (!collapsed) {
@@ -697,11 +717,11 @@ let McpListWidget = class McpListWidget extends Disposable {
                 type: "group-header",
                 id: "mcp-group-extension",
                 scope: "extension",
-                label: ( localize(5632, "Extensions")),
+                label: ( localize(5681, "Extensions")),
                 icon: extensionIcon,
                 count: extensionServers.length,
                 isFirst,
-                description: ( localize(5633, "MCP servers contributed by installed VS Code extensions.")),
+                description: ( localize(5682, "MCP servers contributed by installed VS Code extensions.")),
                 collapsed
             });
             if (!collapsed) {
@@ -723,11 +743,11 @@ let McpListWidget = class McpListWidget extends Disposable {
                 type: "group-header",
                 id: "mcp-group-builtin",
                 scope: "builtin",
-                label: ( localize(5634, "Built-in")),
+                label: ( localize(5683, "Built-in")),
                 icon: builtinIcon,
                 count: otherBuiltinServers.length,
                 isFirst,
-                description: ( localize(5635, "MCP servers built into VS Code. These are available automatically.")),
+                description: ( localize(5684, "MCP servers built into VS Code. These are available automatically.")),
                 collapsed
             });
             if (!collapsed) {
@@ -762,9 +782,6 @@ let McpListWidget = class McpListWidget extends Disposable {
         }
         this.filterServers();
     }
-    prependToSearchRow(element) {
-        this.searchAndButtonContainer.insertBefore(element, this.searchAndButtonContainer.firstChild);
-    }
     isInBrowseMode() {
         return this.browseMode;
     }
@@ -789,8 +806,9 @@ let McpListWidget = class McpListWidget extends Disposable {
             });
             return;
         }
-        const footerHeight = this.sectionHeader.offsetHeight;
-        const listHeight = Math.max(0, height - searchBarHeight - footerHeight);
+        const headerHeight = this.sectionTitleHeader.offsetHeight;
+        this.lastHeaderHeight = headerHeight;
+        const listHeight = Math.max(0, height - searchBarHeight - headerHeight);
         this.listContainer.style.height = `${listHeight}px`;
         this.list.layout(listHeight, width);
     }
@@ -824,7 +842,7 @@ let McpListWidget = class McpListWidget extends Disposable {
                 return;
             }
             const disposables = ( new DisposableStore());
-            const showPluginAction = disposables.add(( new Action("mcpServer.showPlugin", ( localize(5636, "Show Plugin")), undefined, true, async () => {
+            const showPluginAction = disposables.add(( new Action("mcpServer.showPlugin", ( localize(5685, "Show Plugin")), undefined, true, async () => {
                 const item = {
                     kind: AgentPluginItemKind.Installed,
                     name: plugin.label,
@@ -834,14 +852,14 @@ let McpListWidget = class McpListWidget extends Disposable {
                 };
                 this._onDidRequestShowPlugin.fire(item);
             })));
-            const uninstallAction = disposables.add(( new Action("mcpServer.uninstallPlugin", ( localize(5637, "Uninstall Plugin")), undefined, true, async () => {
+            const uninstallAction = disposables.add(( new Action("mcpServer.uninstallPlugin", ( localize(5686, "Uninstall Plugin")), undefined, true, async () => {
                 const result = await this.dialogService.confirm({
-                    message: ( localize(5638, "This MCP server is provided by the plugin '{0}'", plugin.label)),
+                    message: ( localize(5687, "This MCP server is provided by the plugin '{0}'", plugin.label)),
                     detail: ( localize(
-                        5639,
+                        5688,
                         "Individual MCP servers from a plugin cannot be removed separately. Would you like to uninstall the entire plugin?"
                     )),
-                    primaryButton: ( localize(5640, "Uninstall Plugin")),
+                    primaryButton: ( localize(5689, "Uninstall Plugin")),
                     type: "question"
                 });
                 if (result.confirmed) {

package/vscode/src/vs/workbench/contrib/chat/browser/aiCustomization/media/aiCustomizationManagement.css

@@ -32,8 +32,6 @@
 	align-items: center;
 	gap: 4px;
 	padding: 2px 0 6px;
-	margin-bottom: 6px;
-	border-bottom: 1px solid var(--vscode-sideBarSectionHeader-border, var(--vscode-panel-border, var(--vscode-widget-border, transparent)));
 }
 
 .ai-customization-management-editor .sidebar-home-button {
@@ -253,7 +251,7 @@
 	align-items: center;
 	gap: 8px;
 	flex-shrink: 0;
-	padding: 6px 2px;
+	padding: 12px 2px;
 }
 
 .ai-customization-list-widget .list-search-container,
@@ -358,6 +356,8 @@
 	justify-content: center;
 	font-size: 12px;
 	opacity: 0.7;
+	order: 10;
+	margin-left: auto;
 }
 
 .ai-customization-group-header .group-icon {
@@ -365,7 +365,6 @@
 }
 
 .ai-customization-group-header .group-label-group {
-	flex: 1;
 	display: flex;
 	align-items: center;
 	gap: 4px;
@@ -376,7 +375,6 @@
 .ai-customization-group-header .group-label {
 	font-weight: 500;
 	text-transform: capitalize;
-	letter-spacing: 0.04em;
 	color: var(--vscode-sideBarSectionHeader-foreground, var(--vscode-foreground));
 	overflow: hidden;
 	text-overflow: ellipsis;
@@ -388,7 +386,6 @@
 	font-size: 10px;
 	font-weight: 500;
 	color: var(--vscode-descriptionForeground);
-	border-radius: 8px;
 	min-width: 14px;
 	text-align: center;
 	line-height: 16px;
@@ -423,7 +420,7 @@
 .ai-customization-list-item {
 	display: flex;
 	align-items: flex-start;
-	padding: 6px 8px 6px 24px;
+	padding: 6px 8px 6px 30px;
 	cursor: pointer;
 	border-radius: 4px;
 	min-height: 32px;
@@ -479,7 +476,7 @@
 	opacity: 0.6;
 }
 
-/* Shared inline badge style — used for item badges */
+/* Shared inline badge style — used by MCP "Bridged" badge and item badges */
 .inline-badge {
 	flex-shrink: 0;
 	font-size: 10px;
@@ -510,7 +507,7 @@
 	margin-right: 4px;
 }
 
-/* MCP server name row — inline layout for the server name */
+/* MCP bridged badge — shown inline next to the server name */
 .mcp-server-item .mcp-server-name-row {
 	display: flex;
 	align-items: center;
@@ -518,14 +515,7 @@
 }
 
 .ai-customization-list-item .item-type-icon {
-	flex-shrink: 0;
-	width: 16px;
-	height: 16px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	opacity: 0.8;
-	font-size: 14px;
+	display: none;
 }
 
 .ai-customization-list-item .item-text {
@@ -578,7 +568,7 @@
 
 .ai-customization-list-item:hover .item-right,
 .ai-customization-list-item:focus-within .item-right,
-.monaco-list-row.focused .item-right {
+.monaco-list-row.focused .ai-customization-list-item .item-right {
 	opacity: 1;
 }
 
@@ -588,6 +578,74 @@
 	color: var(--vscode-list-highlightForeground);
 }
 
+/* Section title header at top of list widget (shared by all list widgets) */
+.ai-customization-list-widget .section-title-header,
+.mcp-list-widget .section-title-header {
+	flex-shrink: 0;
+	padding: 4px 4px 32px 4px;
+	border-bottom: 1px solid var(--vscode-panel-border);
+}
+
+.ai-customization-list-widget .section-title-header .section-title-row,
+.mcp-list-widget .section-title-header .section-title-row {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	margin: 0 0 6px 0;
+}
+
+.ai-customization-list-widget .section-title-header .section-title-back-slot,
+.mcp-list-widget .section-title-header .section-title-back-slot {
+	display: flex;
+	align-items: center;
+}
+
+.ai-customization-list-widget .section-title-header .section-title-back-slot:empty,
+.mcp-list-widget .section-title-header .section-title-back-slot:empty {
+	display: none;
+}
+
+.ai-customization-list-widget .section-title-header .section-title,
+.mcp-list-widget .section-title-header .section-title {
+	font-size: 22px;
+	font-weight: 600;
+	line-height: 1.2;
+	margin: 0;
+	color: var(--vscode-foreground);
+}
+
+.ai-customization-list-widget .section-title-header .section-title-description,
+.mcp-list-widget .section-title-header .section-title-description {
+	font-size: 13px;
+	line-height: 1.45;
+	color: var(--vscode-descriptionForeground);
+	margin: 0 0 8px 0;
+	/* Reserve space for ~2 lines so the header height is stable across sections. */
+	/* Rounded up to a whole pixel so naturally-wrapped 2-line descriptions and */
+	/* shorter 1-line descriptions render at the same height instead of differing */
+	/* by a sub-pixel rounding. */
+	min-height: 38px;
+}
+
+.ai-customization-list-widget .section-title-header .section-title-link,
+.mcp-list-widget .section-title-header .section-title-link {
+	font-size: 13px;
+	/* Match the description's line-height so the link's inline-flex line-box */
+	/* does not change the total header height between sections. */
+	line-height: 1.45;
+	color: var(--vscode-textLink-foreground);
+	text-decoration: none;
+	cursor: pointer;
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+}
+
+.ai-customization-list-widget .section-title-header .section-title-link:hover,
+.mcp-list-widget .section-title-header .section-title-link:hover {
+	text-decoration: underline;
+}
+
 /* Section footer at bottom of list widget */
 .ai-customization-list-widget .section-footer {
 	flex-shrink: 0;
@@ -850,34 +908,6 @@
 	overflow: hidden;
 }
 
-.mcp-list-widget .section-footer {
-	flex-shrink: 0;
-	padding: 12px 4px 6px 4px;
-	border-top: 1px solid var(--vscode-widget-border);
-}
-
-.mcp-list-widget .section-footer .section-footer-description {
-	font-size: 13px;
-	color: var(--vscode-descriptionForeground);
-	line-height: 1.5;
-	margin: 0 0 8px 0;
-}
-
-.mcp-list-widget .section-footer .section-footer-link {
-	font-size: 13px;
-	color: var(--vscode-textLink-foreground);
-	text-decoration: none;
-	cursor: pointer;
-	display: inline-flex;
-	align-items: center;
-	gap: 4px;
-}
-
-.mcp-list-widget .section-footer .section-footer-link:hover {
-	text-decoration: underline;
-	color: var(--vscode-textLink-activeForeground);
-}
-
 .mcp-list-widget .mcp-list-container {
 	flex: 1;
 	min-height: 0;
@@ -990,7 +1020,7 @@
 .mcp-server-item {
 	display: flex;
 	align-items: center;
-	padding: 6px 8px;
+	padding: 6px 8px 6px 30px;
 	cursor: pointer;
 	border-radius: 4px;
 	min-height: 32px;
@@ -1007,13 +1037,7 @@
 }
 
 .mcp-server-item .mcp-server-icon {
-	flex-shrink: 0;
-	width: 24px;
-	height: 24px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	opacity: 0.8;
+	display: none;
 }
 
 .mcp-server-item .mcp-server-details {
@@ -1083,8 +1107,10 @@
 	display: flex;
 	gap: 4px;
 	flex-shrink: 0;
-	/* Reserve space so focused button outlines do not clip against the widget's overflow:hidden */
-	padding: 1px;
+	/* Horizontal-only padding so focused button outlines do not clip against */
+	/* the widget's overflow:hidden. Vertical padding is omitted so the button */
+	/* group does not make the search row taller than on other sections. */
+	padding: 0 1px;
 }
 
 .mcp-list-widget .list-button-group .monaco-button:focus-visible {