feat: add keyboard shortcut for toggling auto-approve (Cmd/Ctrl+Alt+A)

Author: roomote

packages/types/src/vscode.ts

@@ -53,6 +53,7 @@ export const commandIds = [
 	"focusInput",
 	"acceptInput",
 	"focusPanel",
+	"toggleAutoApprove",
 ] as const
 
 export type CommandId = (typeof commandIds)[number]

src/activate/registerCommands.ts

@@ -221,6 +221,38 @@ const getCommandsMap = ({ context, outputChannel, provider }: RegisterCommandOpt
 
 		visibleProvider.postMessageToWebview({ type: "acceptInput" })
 	},
+	toggleAutoApprove: async () => {
+		const visibleProvider = getVisibleProviderOrLog(outputChannel)
+
+		if (!visibleProvider) {
+			// If no visible provider, try to get the global state directly
+			const currentState = context.globalState.get<boolean>("autoApprovalEnabled") ?? false
+			const newState = !currentState
+			await context.globalState.update("autoApprovalEnabled", newState)
+
+			// Show notification even without visible provider
+			const message = newState ? t("notification.autoApprove.enabled") : t("notification.autoApprove.disabled")
+			vscode.window.showInformationMessage(message)
+			return
+		}
+
+		// Toggle the auto-approval state
+		const currentState = visibleProvider.getValue("autoApprovalEnabled") ?? false
+		const newState = !currentState
+
+		// Update the state
+		await visibleProvider.setValue("autoApprovalEnabled", newState)
+
+		// Post message to webview to update UI
+		visibleProvider.postMessageToWebview({
+			type: "action",
+			action: "toggleAutoApprove",
+		})
+
+		// Show toast notification
+		const message = newState ? t("notification.autoApprove.enabled") : t("notification.autoApprove.disabled")
+		vscode.window.showInformationMessage(message)
+	},
 })
 
 export const openClineInNewTab = async ({ context, outputChannel }: Omit<RegisterCommandOptions, "provider">) => {

src/i18n/locales/en/common.json

@@ -144,6 +144,12 @@
 		"mode_exported": "Mode '{{mode}}' exported successfully",
 		"mode_imported": "Mode imported successfully"
 	},
+	"notification": {
+		"autoApprove": {
+			"enabled": "Auto-approve enabled",
+			"disabled": "Auto-approve disabled"
+		}
+	},
 	"answers": {
 		"yes": "Yes",
 		"no": "No",

src/package.json

@@ -174,6 +174,11 @@
 				"command": "roo-cline.acceptInput",
 				"title": "%command.acceptInput.title%",
 				"category": "%configuration.title%"
+			},
+			{
+				"command": "roo-cline.toggleAutoApprove",
+				"title": "%command.toggleAutoApprove.title%",
+				"category": "%configuration.title%"
 			}
 		],
 		"menus": {
@@ -310,6 +315,13 @@
 				"win": "ctrl+y",
 				"linux": "ctrl+y",
 				"when": "editorTextFocus && editorHasSelection"
+			},
+			{
+				"command": "roo-cline.toggleAutoApprove",
+				"key": "cmd+alt+a",
+				"mac": "cmd+alt+a",
+				"win": "ctrl+alt+a",
+				"linux": "ctrl+alt+a"
 			}
 		],
 		"submenus": [

src/package.nls.json

@@ -26,6 +26,7 @@
 	"command.terminal.fixCommand.title": "Fix This Command",
 	"command.terminal.explainCommand.title": "Explain This Command",
 	"command.acceptInput.title": "Accept Input/Suggestion",
+	"command.toggleAutoApprove.title": "Toggle Auto-Approve",
 	"configuration.title": "Roo Code",
 	"commands.allowedCommands.description": "Commands that can be auto-executed when 'Always approve execute operations' is enabled",
 	"commands.deniedCommands.description": "Command prefixes that will be automatically denied without asking for approval. In case of conflicts with allowed commands, the longest prefix match takes precedence. Add * to deny all commands.",

src/shared/ExtensionMessage.ts

@@ -137,6 +137,7 @@ export interface ExtensionMessage {
 		| "didBecomeVisible"
 		| "focusInput"
 		| "switchTab"
+		| "toggleAutoApprove"
 	invoke?: "newChat" | "sendMessage" | "primaryButtonClick" | "secondaryButtonClick" | "setChatBoxMessage"
 	state?: ExtensionState
 	images?: string[]

webview-ui/src/components/chat/AutoApproveDropdown.tsx

@@ -10,6 +10,7 @@ import { Popover, PopoverContent, PopoverTrigger, StandardTooltip, ToggleSwitch
 import { AutoApproveSetting, autoApproveSettingsConfig } from "../settings/AutoApproveToggle"
 import { useAutoApprovalToggles } from "@/hooks/useAutoApprovalToggles"
 import { useAutoApprovalState } from "@/hooks/useAutoApprovalState"
+import { getAutoApproveShortcut } from "@/utils/keyboard"
 
 interface AutoApproveDropdownProps {
 	disabled?: boolean
@@ -296,11 +297,13 @@ export const AutoApproveDropdown = ({ disabled = false, triggerClassName = "" }:
 								}
 								handleAutoApprovalToggle()
 							}}>
-							<ToggleSwitch
-								checked={effectiveAutoApprovalEnabled}
-								aria-label="Toggle auto-approval"
-								onChange={handleAutoApprovalToggle}
-							/>
+							<StandardTooltip content={`Toggle auto-approve ${getAutoApproveShortcut()}`}>
+								<ToggleSwitch
+									checked={effectiveAutoApprovalEnabled}
+									aria-label="Toggle auto-approval"
+									onChange={handleAutoApprovalToggle}
+								/>
+							</StandardTooltip>
 							<span className={cn("text-sm font-bold select-none")}>Enabled</span>
 						</label>
 					</div>

webview-ui/src/components/settings/AutoApproveSettings.tsx

@@ -14,6 +14,7 @@ import { MaxLimitInputs } from "./MaxLimitInputs"
 import { useExtensionState } from "@/context/ExtensionStateContext"
 import { useAutoApprovalState } from "@/hooks/useAutoApprovalState"
 import { useAutoApprovalToggles } from "@/hooks/useAutoApprovalToggles"
+import { getAutoApproveShortcut } from "@/utils/keyboard"
 
 type AutoApproveSettingsProps = HTMLAttributes<HTMLDivElement> & {
 	alwaysAllowReadOnly?: boolean
@@ -135,7 +136,7 @@ export const AutoApproveSettings = ({
 							<span className="font-medium">{t("settings:autoApprove.enabled")}</span>
 						</VSCodeCheckbox>
 						<div className="text-vscode-descriptionForeground text-sm mt-1">
-							{t("settings:autoApprove.description")}
+							{t("settings:autoApprove.description")} {getAutoApproveShortcut()}
 						</div>
 					</div>
 

webview-ui/src/context/ExtensionStateContext.tsx

@@ -326,6 +326,18 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 					}
 					break
 				}
+				case "action": {
+					if (message.action === "toggleAutoApprove") {
+						// Toggle the auto-approval state
+						setState((prevState) => {
+							const newValue = !(prevState.autoApprovalEnabled ?? false)
+							// Also send the update to the extension
+							vscode.postMessage({ type: "autoApprovalEnabled", bool: newValue })
+							return { ...prevState, autoApprovalEnabled: newValue }
+						})
+					}
+					break
+				}
 				case "theme": {
 					if (message.text) {
 						setTheme(convertTextMateToHljs(JSON.parse(message.text)))

webview-ui/src/utils/keyboard.ts

@@ -0,0 +1,36 @@
+/**
+ * Utility functions for keyboard shortcuts
+ */
+
+/**
+ * Detects if the current platform is macOS
+ */
+export const isMac = (): boolean => {
+	// Check if we're in a browser environment
+	if (typeof navigator !== "undefined" && navigator.platform) {
+		return navigator.platform.toUpperCase().indexOf("MAC") >= 0
+	}
+	// Fallback for non-browser environments
+	return false
+}
+
+/**
+ * Gets the platform-specific modifier key label
+ */
+export const getModifierKey = (): string => {
+	return isMac() ? "Cmd" : "Ctrl"
+}
+
+/**
+ * Gets the platform-specific keyboard shortcut for toggling auto-approve
+ */
+export const getAutoApproveShortcut = (): string => {
+	return isMac() ? "Cmd+Option+A" : "Ctrl+Alt+A"
+}
+
+/**
+ * Formats a keyboard shortcut for display
+ */
+export const formatShortcut = (shortcut: string): string => {
+	return `(${shortcut})`
+}