Trevhud/eng 279 (RooCodeInc#2505)

* Move restart/delete server and all toggle all

* changeset

* move buttons back to the bottom and show icons even when expanded

* Only display auto-approve all if auto-approve mcp is enabled

* Move auto-approve setting to bottom

---------

Co-authored-by: Saoud Rizwan <[email protected]>

Author: trevhud

.changeset/mighty-pants-sort.md

@@ -0,0 +1,5 @@
+---
+"claude-dev": patch
+---
+
+Move the MCP Restart and Delete buttons and add an auto-approve all toggle

src/core/webview/ClineProvider.ts

@@ -819,9 +819,20 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 					}
 					case "toggleToolAutoApprove": {
 						try {
-							await this.mcpHub?.toggleToolAutoApprove(message.serverName!, message.toolName!, message.autoApprove!)
+							await this.mcpHub?.toggleToolAutoApprove(
+								message.serverName!,
+								message.toolNames!,
+								message.autoApprove!,
+							)
 						} catch (error) {
-							console.error(`Failed to toggle auto-approve for tool ${message.toolName}:`, error)
+							if (message.toolNames?.length === 1) {
+								console.error(
+									`Failed to toggle auto-approve for server ${message.serverName} with tool ${message.toolNames[0]}:`,
+									error,
+								)
+							} else {
+								console.error(`Failed to toggle auto-approve tools for server ${message.serverName}:`, error)
+							}
 						}
 						break
 					}

src/services/mcp/McpHub.ts

@@ -621,7 +621,7 @@ export class McpHub {
 		)
 	}
 
-	async toggleToolAutoApprove(serverName: string, toolName: string, shouldAllow: boolean): Promise<void> {
+	async toggleToolAutoApprove(serverName: string, toolNames: string[], shouldAllow: boolean): Promise<void> {
 		try {
 			const settingsPath = await this.getMcpSettingsFilePath()
 			const content = await fs.readFile(settingsPath, "utf-8")
@@ -633,14 +633,16 @@ export class McpHub {
 			}
 
 			const autoApprove = config.mcpServers[serverName].autoApprove
-			const toolIndex = autoApprove.indexOf(toolName)
-
-			if (shouldAllow && toolIndex === -1) {
-				// Add tool to autoApprove list
-				autoApprove.push(toolName)
-			} else if (!shouldAllow && toolIndex !== -1) {
-				// Remove tool from autoApprove list
-				autoApprove.splice(toolIndex, 1)
+			for (const toolName of toolNames) {
+				const toolIndex = autoApprove.indexOf(toolName)
+
+				if (shouldAllow && toolIndex === -1) {
+					// Add tool to autoApprove list
+					autoApprove.push(toolName)
+				} else if (!shouldAllow && toolIndex !== -1) {
+					// Remove tool from autoApprove list
+					autoApprove.splice(toolIndex, 1)
+				}
 			}
 
 			await fs.writeFile(settingsPath, JSON.stringify(config, null, 2))

src/shared/WebviewMessage.ts

@@ -81,7 +81,7 @@ export interface WebviewMessage {
 	timeout?: number
 	// For toggleToolAutoApprove
 	serverName?: string
-	toolName?: string
+	toolNames?: string[]
 	autoApprove?: boolean
 
 	// For auth

webview-ui/src/components/mcp/McpToolRow.tsx

@@ -11,13 +11,15 @@ type McpToolRowProps = {
 const McpToolRow = ({ tool, serverName }: McpToolRowProps) => {
 	const { autoApprovalSettings } = useExtensionState()
 
-	const handleAutoApproveChange = () => {
-		if (!serverName) return
+	// Accept the event object
+	const handleAutoApproveChange = (event: any) => {
+		// Only proceed if the event was triggered by a direct user interaction
+		if (!serverName || !event.isTrusted) return
 
 		vscode.postMessage({
 			type: "toggleToolAutoApprove",
 			serverName,
-			toolName: tool.name,
+			toolNames: [tool.name],
 			autoApprove: !tool.autoApprove,
 		})
 	}

webview-ui/src/components/mcp/McpView.tsx

@@ -6,6 +6,7 @@ import {
 	VSCodePanelView,
 	VSCodeDropdown,
 	VSCodeOption,
+	VSCodeCheckbox,
 } from "@vscode/webview-ui-toolkit/react"
 import { useEffect, useState } from "react"
 import styled from "styled-components"
@@ -204,7 +205,7 @@ export const TabButton = ({
 
 // Server Row Component
 const ServerRow = ({ server }: { server: McpServer }) => {
-	const { mcpMarketplaceCatalog } = useExtensionState()
+	const { mcpMarketplaceCatalog, autoApprovalSettings } = useExtensionState()
 
 	const [isExpanded, setIsExpanded] = useState(false)
 	const [isDeleting, setIsDeleting] = useState(false)
@@ -271,6 +272,17 @@ const ServerRow = ({ server }: { server: McpServer }) => {
 		})
 	}
 
+	const handleAutoApproveChange = () => {
+		if (!server.name) return
+
+		vscode.postMessage({
+			type: "toggleToolAutoApprove",
+			serverName: server.name,
+			toolNames: server.tools?.map((tool) => tool.name) || [],
+			autoApprove: !server.tools?.every((tool) => tool.autoApprove),
+		})
+	}
+
 	return (
 		<div style={{ marginBottom: "10px" }}>
 			<div
@@ -299,7 +311,33 @@ const ServerRow = ({ server }: { server: McpServer }) => {
 					}}>
 					{getMcpServerDisplayName(server.name, mcpMarketplaceCatalog)}
 				</span>
-				<div style={{ display: "flex", alignItems: "center", marginRight: "8px" }} onClick={(e) => e.stopPropagation()}>
+				{/* Collapsed view controls */}
+				{!server.error && (
+					<div style={{ display: "flex", alignItems: "center", gap: "4px", marginLeft: "8px" }}>
+						<VSCodeButton
+							appearance="icon"
+							title="Restart Server"
+							onClick={(e) => {
+								e.stopPropagation()
+								handleRestart()
+							}}
+							disabled={server.status === "connecting"}>
+							<span className="codicon codicon-sync"></span>
+						</VSCodeButton>
+						<VSCodeButton
+							appearance="icon"
+							title="Delete Server"
+							onClick={(e) => {
+								e.stopPropagation()
+								handleDelete()
+							}}
+							disabled={isDeleting}>
+							<span className="codicon codicon-trash"></span>
+						</VSCodeButton>
+					</div>
+				)}
+				{/* Toggle Switch */}
+				<div style={{ display: "flex", alignItems: "center", marginLeft: "8px" }} onClick={(e) => e.stopPropagation()}>
 					<div
 						role="switch"
 						aria-checked={!server.disabled}
@@ -422,6 +460,15 @@ const ServerRow = ({ server }: { server: McpServer }) => {
 										{server.tools.map((tool) => (
 											<McpToolRow key={tool.name} tool={tool} serverName={server.name} />
 										))}
+										{server.name && autoApprovalSettings.enabled && autoApprovalSettings.actions.useMcp && (
+											<VSCodeCheckbox
+												style={{ marginBottom: -10 }}
+												checked={server.tools.every((tool) => tool.autoApprove)}
+												onChange={handleAutoApproveChange}
+												data-tool="all-tools">
+												Auto-approve all tools
+											</VSCodeCheckbox>
+										)}
 									</div>
 								) : (
 									<div