fix: allow auto-approve checkbox to be toggled at any time

During model responses, users need the ability to disable auto-approval
for safety when they realize the model is about to perform unintended
actions. The checkbox was previously disabled when no options were
selected or when the menu was open, preventing users from turning off
auto-approval when needed most.

- Remove disabled state from main auto-approve checkbox
- Simplify toggle logic to always allow state changes
- Add memoization to reduce unnecessary re-renders that cause flickering
- Update tests to reflect new always-enabled behavior

This ensures users can always disable auto-approval for safety,
especially during time-critical situations when the model is actively
responding.

Fixes: #6060
Signed-off-by: Eric Wheeler <[email protected]>

Author: Eric Wheeler

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

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from "react"
+import { memo, useCallback, useMemo, useState } from "react"
 import { Trans } from "react-i18next"
 import { VSCodeCheckbox, VSCodeLink, VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
 
@@ -129,11 +129,6 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
 		setIsExpanded((prev) => !prev)
 	}, [])
 
-	// Disable main checkbox while menu is open or no options selected
-	const isCheckboxDisabled = useMemo(() => {
-		return !hasEnabledOptions || isExpanded
-	}, [hasEnabledOptions, isExpanded])
-
 	const enabledActionsList = Object.entries(toggles)
 		.filter(([_key, value]) => !!value)
 		.map(([key]) => t(autoApproveSettingsConfig[key as AutoApproveSetting].labelKey))
@@ -178,19 +173,15 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
 						content={!hasEnabledOptions ? t("chat:autoApprove.selectOptionsFirst") : undefined}>
 						<VSCodeCheckbox
 							checked={effectiveAutoApprovalEnabled}
-							disabled={isCheckboxDisabled}
 							aria-label={
 								hasEnabledOptions
 									? t("chat:autoApprove.toggleAriaLabel")
 									: t("chat:autoApprove.disabledAriaLabel")
 							}
 							onChange={() => {
-								if (hasEnabledOptions) {
-									const newValue = !(autoApprovalEnabled ?? false)
-									setAutoApprovalEnabled(newValue)
-									vscode.postMessage({ type: "autoApprovalEnabled", bool: newValue })
-								}
-								// If no options enabled, do nothing
+								const newValue = !(autoApprovalEnabled ?? false)
+								setAutoApprovalEnabled(newValue)
+								vscode.postMessage({ type: "autoApprovalEnabled", bool: newValue })
 							}}
 						/>
 					</StandardTooltip>
@@ -290,4 +281,4 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
 	)
 }
 
-export default AutoApproveMenu
+export default memo(AutoApproveMenu)

webview-ui/src/components/chat/__tests__/AutoApproveMenu.spec.tsx

@@ -115,7 +115,7 @@ describe("AutoApproveMenu", () => {
 			expect(screen.getByText("Read-only operations")).toBeInTheDocument()
 		})
 
-		it("should not allow toggling master checkbox when no options are selected", () => {
+		it("should allow toggling master checkbox even when no options are selected", () => {
 			;(useExtensionState as ReturnType<typeof vi.fn>).mockReturnValue({
 				...defaultExtensionState,
 				autoApprovalEnabled: false,
@@ -128,8 +128,11 @@ describe("AutoApproveMenu", () => {
 			const masterCheckbox = screen.getByRole("checkbox")
 			fireEvent.click(masterCheckbox)
 
-			// Should not send any message since no options are selected
-			expect(mockPostMessage).not.toHaveBeenCalled()
+			// Should send message to toggle auto-approval even when no options are selected
+			expect(mockPostMessage).toHaveBeenCalledWith({
+				type: "autoApprovalEnabled",
+				bool: true,
+			})
 		})
 
 		it("should toggle master checkbox when options are selected", () => {