chat - adjustments to the tools and server picker in input (microsoft#272475)

* chat - adjustments to the tools and server picker in input

* revert accidental changes

* decorate

* back to &

* polish

Author: bpasero

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

@@ -122,9 +122,9 @@ class ConfigureToolsAction extends Action2 {
 			precondition: ChatContextKeys.chatModeKind.isEqualTo(ChatModeKind.Agent),
 			menu: [{
 				when: ContextKeyExpr.and(ChatContextKeys.chatModeKind.isEqualTo(ChatModeKind.Agent), ChatContextKeys.lockedToCodingAgent.negate()),
-				id: MenuId.ChatExecute,
+				id: MenuId.ChatInput,
 				group: 'navigation',
-				order: 1,
+				order: 100,
 			}]
 		});
 	}
@@ -189,7 +189,7 @@ class ConfigureToolsActionRendering implements IWorkbenchContribution {
 	constructor(
 		@IActionViewItemService actionViewItemService: IActionViewItemService,
 	) {
-		const disposable = actionViewItemService.register(MenuId.ChatExecute, ConfigureToolsAction.ID, (action, _opts, instantiationService) => {
+		const disposable = actionViewItemService.register(MenuId.ChatInput, ConfigureToolsAction.ID, (action, _opts, instantiationService) => {
 			if (!(action instanceof MenuItemAction)) {
 				return undefined;
 			}

src/vs/workbench/contrib/chat/browser/media/chat.css

@@ -1308,8 +1308,8 @@ have to be updated for changes to the rules above, or to support more deeply nes
 
 .interactive-session .chat-input-toolbars .tool-warning-indicator {
 	position: absolute;
-	bottom: 0;
-	right: 0;
+	bottom: 1px;
+	right: 1px;
 	font-size: 9px !important;
 	color: var(--vscode-problemsWarningIcon-foreground);
 	background: var(--vscode-input-background);
@@ -1599,40 +1599,27 @@ have to be updated for changes to the rules above, or to support more deeply nes
 }
 
 .action-item.chat-mcp {
-	display: flex !important;
-
-	&.chat-mcp-has-action .action-label {
-		border-top-right-radius: 0;
-		border-bottom-right-radius: 0;
-		border-right: 0;
-	}
 
-	.chat-mcp-action {
-		align-self: stretch;
-		padding: 0 2px;
-		border-radius: 0;
-		outline: 0;
-		border: 0;
-		border-top-right-radius: 4px;
-		border-bottom-right-radius: 4px;
-		background: var(--vscode-button-background);
-		cursor: pointer;
+	.chat-mcp-state-indicator {
+		position: absolute;
+		bottom: 1px;
+		right: 1px;
+		font-size: 9px !important;
+		background: var(--vscode-input-background);
+		width: fit-content;
+		height: fit-content;
+		border-radius: 100%;
 
-		.codicon {
-			width: fit-content;
+		&.chat-mcp-state-new {
 			color: var(--vscode-button-foreground);
 		}
 
-		.codicon::before {
-			font-size: 14px;
+		&.chat-mcp-state-error {
+			color: var(--vscode-problemsErrorIcon-foreground);
 		}
 
-		&.chat-mcp-action-error {
-			background: var(--vscode-activityErrorBadge-background);
-
-			.codicon {
-				color: var(--vscode-activityErrorBadge-foreground);
-			}
+		&.chat-mcp-state-refreshing {
+			color: var(--vscode-button-foreground);
 		}
 	}
 }

src/vs/workbench/contrib/mcp/browser/mcpCommands.ts

@@ -3,7 +3,7 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import { $, addDisposableListener, disposableWindowInterval, EventType, h } from '../../../../base/browser/dom.js';
+import { $, addDisposableListener, disposableWindowInterval, EventType } from '../../../../base/browser/dom.js';
 import { renderMarkdown } from '../../../../base/browser/markdownRenderer.js';
 import { IManagedHoverTooltipHTMLElement } from '../../../../base/browser/ui/hover/hover.js';
 import { Checkbox } from '../../../../base/browser/ui/toggle/toggle.js';
@@ -90,9 +90,9 @@ export class ListMcpServerCommand extends Action2 {
 					ChatContextKeys.chatModeKind.isEqualTo(ChatModeKind.Agent),
 					ChatContextKeys.lockedToCodingAgent.negate()
 				),
-				id: MenuId.ChatExecute,
+				id: MenuId.ChatInput,
 				group: 'navigation',
-				order: 2,
+				order: 101,
 			}],
 		});
 	}
@@ -478,7 +478,7 @@ export class MCPServerActionRendering extends Disposable implements IWorkbenchCo
 			}
 		});
 
-		this._store.add(actionViewItemService.register(MenuId.ChatExecute, McpCommandIds.ListServer, (action, options) => {
+		this._store.add(actionViewItemService.register(MenuId.ChatInput, McpCommandIds.ListServer, (action, options) => {
 			if (!(action instanceof MenuItemAction)) {
 				return undefined;
 			}
@@ -489,34 +489,30 @@ export class MCPServerActionRendering extends Disposable implements IWorkbenchCo
 
 					super.render(container);
 					container.classList.add('chat-mcp');
+					container.style.position = 'relative';
 
-					const action = h('button.chat-mcp-action', [h('span@icon')]);
+					const stateIndicator = container.appendChild($('.chat-mcp-state-indicator'));
+					stateIndicator.style.display = 'none';
 
 					this._register(autorun(r => {
 						const displayed = displayedState.read(r);
 						const { state } = displayed;
-						const { root, icon } = action;
 						this.updateTooltip();
-						container.classList.toggle('chat-mcp-has-action', state !== DisplayedState.None);
 
-						if (!root.parentElement) {
-							container.appendChild(root);
-						}
 
-						root.ariaLabel = this.getLabelForState(displayed);
-						root.className = 'chat-mcp-action';
-						icon.className = '';
+						stateIndicator.ariaLabel = this.getLabelForState(displayed);
+						stateIndicator.className = 'chat-mcp-state-indicator';
 						if (state === DisplayedState.NewTools) {
-							root.classList.add('chat-mcp-action-new');
-							icon.classList.add(...ThemeIcon.asClassNameArray(Codicon.refresh));
+							stateIndicator.style.display = 'block';
+							stateIndicator.classList.add('chat-mcp-state-new', ...ThemeIcon.asClassNameArray(Codicon.refresh));
 						} else if (state === DisplayedState.Error) {
-							root.classList.add('chat-mcp-action-error');
-							icon.classList.add(...ThemeIcon.asClassNameArray(Codicon.warning));
+							stateIndicator.style.display = 'block';
+							stateIndicator.classList.add('chat-mcp-state-error', ...ThemeIcon.asClassNameArray(Codicon.warning));
 						} else if (state === DisplayedState.Refreshing) {
-							root.classList.add('chat-mcp-action-refreshing');
-							icon.classList.add(...ThemeIcon.asClassNameArray(spinningLoading));
+							stateIndicator.style.display = 'block';
+							stateIndicator.classList.add('chat-mcp-state-refreshing', ...ThemeIcon.asClassNameArray(spinningLoading));
 						} else {
-							root.remove();
+							stateIndicator.style.display = 'none';
 						}
 					}));
 				}