mcp: apply tool picker UX improvements

Applies the suggestions from #245721

- Adjusts 'From' to 'from'
- Remove status wording
- Add item buttons for configuration. I also show a button to view the MCP output when it's in a failed state, since I think showing that is important.

Author: connor4312

src/vs/workbench/contrib/chat/browser/actions/chatToolActions.ts

@@ -18,10 +18,13 @@ import { ICommandService } from '../../../../../platform/commands/common/command
 import { ContextKeyExpr } from '../../../../../platform/contextkey/common/contextkey.js';
 import { ExtensionIdentifier } from '../../../../../platform/extensions/common/extensions.js';
 import { KeybindingWeight } from '../../../../../platform/keybinding/common/keybindingsRegistry.js';
-import { IQuickInputService, IQuickPickItem, IQuickPickSeparator } from '../../../../../platform/quickinput/common/quickInput.js';
+import { IOpenerService } from '../../../../../platform/opener/common/opener.js';
+import { IQuickInputButton, IQuickInputService, IQuickPickItem, IQuickPickSeparator } from '../../../../../platform/quickinput/common/quickInput.js';
 import { ITelemetryService } from '../../../../../platform/telemetry/common/telemetry.js';
+import { IEditorService } from '../../../../services/editor/common/editorService.js';
 import { IExtensionsWorkbenchService } from '../../../extensions/common/extensions.js';
 import { AddConfigurationAction } from '../../../mcp/browser/mcpCommands.js';
+import { IMcpRegistry } from '../../../mcp/common/mcpRegistryTypes.js';
 import { IMcpService, IMcpServer, McpConnectionState } from '../../../mcp/common/mcpTypes.js';
 import { ChatContextKeys } from '../../common/chatContextKeys.js';
 import { IChatToolInvocation } from '../../common/chatService.js';
@@ -109,11 +112,13 @@ export class AttachToolsAction extends Action2 {
 
 		const quickPickService = accessor.get(IQuickInputService);
 		const mcpService = accessor.get(IMcpService);
+		const mcpRegistry = accessor.get(IMcpRegistry);
 		const toolsService = accessor.get(ILanguageModelToolsService);
 		const chatWidgetService = accessor.get(IChatWidgetService);
 		const telemetryService = accessor.get(ITelemetryService);
 		const commandService = accessor.get(ICommandService);
 		const extensionWorkbenchService = accessor.get(IExtensionsWorkbenchService);
+		const editorService = accessor.get(IEditorService);
 
 		let widget = chatWidgetService.lastFocusedWidget;
 		if (!widget) {
@@ -143,6 +148,7 @@ export class AttachToolsAction extends Action2 {
 		type ToolPick = IQuickPickItem & { picked: boolean; tool: IToolData; parent: BucketPick };
 		type AddPick = IQuickPickItem & { pickable: false; run: () => void };
 		type MyPick = ToolPick | BucketPick | AddPick;
+		type ActionableButton = IQuickInputButton & { action: () => void };
 
 		const addMcpPick: AddPick = { type: 'item', label: localize('addServer', "Add MCP Server..."), iconClass: ThemeIcon.asClassName(Codicon.add), pickable: false, run: () => commandService.executeCommand(AddConfigurationAction.ID) };
 		const addExpPick: AddPick = { type: 'item', label: localize('addExtension', "Install Extension..."), iconClass: ThemeIcon.asClassName(Codicon.add), pickable: false, run: () => extensionWorkbenchService.openSearch('@tag:language-model-tools') };
@@ -184,16 +190,44 @@ export class AttachToolsAction extends Action2 {
 					continue;
 				}
 				const key = tool.source.type + mcpServer.definition.id;
-				bucket = toolBuckets.get(key) ?? {
-					type: 'item',
-					label: localize('mcplabel', "MCP Server: {0}", mcpServer?.definition.label),
-					status: localize('mcpstatus', "From {0} ({1})", mcpServer.collection.label, McpConnectionState.toString(mcpServer.connectionState.get())),
-					ordinal: BucketOrdinal.Mcp,
-					source: tool.source,
-					picked: false,
-					children: []
-				};
-				toolBuckets.set(key, bucket);
+				const existingBucket = toolBuckets.get(key);
+				if (existingBucket) {
+					bucket = existingBucket;
+				} else {
+
+					const collection = mcpRegistry.collections.get().find(c => c.id === mcpServer.collection.id);
+					const buttons: ActionableButton[] = [];
+					if (collection?.presentation?.origin) {
+						buttons.push({
+							iconClass: ThemeIcon.asClassName(Codicon.settingsGear),
+							tooltip: localize('configMcpCol', "Configure {0}", collection.label),
+							alwaysVisible: true,
+							action: () => editorService.openEditor({
+								resource: collection!.presentation!.origin,
+							}),
+						});
+					}
+					if (mcpServer.connectionState.get().state === McpConnectionState.Kind.Error) {
+						buttons.push({
+							iconClass: ThemeIcon.asClassName(Codicon.warning),
+							tooltip: localize('mcpShowOutput', "Show Output"),
+							alwaysVisible: true,
+							action: () => mcpServer.showOutput(),
+						});
+					}
+
+					bucket = {
+						type: 'item',
+						label: localize('mcplabel', "MCP Server: {0}", mcpServer?.definition.label),
+						status: localize('mcpstatus', "from {0}", mcpServer.collection.label),
+						ordinal: BucketOrdinal.Mcp,
+						source: tool.source,
+						picked: false,
+						children: [],
+						buttons,
+					};
+					toolBuckets.set(key, bucket);
+				}
 			} else if (tool.source.type === 'extension') {
 				const key = tool.source.type + ExtensionIdentifier.toKey(tool.source.extensionId);
 
@@ -238,6 +272,9 @@ export class AttachToolsAction extends Action2 {
 		function isAddPick(obj: any): obj is AddPick {
 			return Boolean((obj as AddPick).run);
 		}
+		function isActionableButton(obj: IQuickInputButton): obj is ActionableButton {
+			return typeof (obj as ActionableButton).action === 'function';
+		}
 
 		const store = new DisposableStore();
 
@@ -306,6 +343,13 @@ export class AttachToolsAction extends Action2 {
 		picker.items = picks;
 		picker.show();
 
+		store.add(picker.onDidTriggerItemButton(e => {
+			if (isActionableButton(e.button)) {
+				e.button.action();
+				store.dispose();
+			}
+		}));
+
 		store.add(picker.onDidChangeSelection(selectedPicks => {
 			if (ignoreEvent) {
 				return;