diff --git a/webview-ui/src/components/chat/AutoApproveMenu.tsx b/webview-ui/src/components/chat/AutoApproveMenu.tsx
index ae363a7b63b..2e987b7c497 100644
--- a/webview-ui/src/components/chat/AutoApproveMenu.tsx
+++ b/webview-ui/src/components/chat/AutoApproveMenu.tsx
@@ -6,6 +6,9 @@ import { vscode } from "@src/utils/vscode"
import { useExtensionState } from "@src/context/ExtensionStateContext"
import { useAppTranslation } from "@src/i18n/TranslationContext"
import { AutoApproveToggle, AutoApproveSetting, autoApproveSettingsConfig } from "../settings/AutoApproveToggle"
+import { StandardTooltip } from "@src/components/ui"
+import { useAutoApprovalState } from "@src/hooks/useAutoApprovalState"
+import { useAutoApprovalToggles } from "@src/hooks/useAutoApprovalToggles"
interface AutoApproveMenuProps {
style?: React.CSSProperties
@@ -17,16 +20,7 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
const {
autoApprovalEnabled,
setAutoApprovalEnabled,
- alwaysAllowReadOnly,
- alwaysAllowWrite,
- alwaysAllowExecute,
- alwaysAllowBrowser,
- alwaysAllowMcp,
- alwaysAllowModeSwitch,
- alwaysAllowSubtasks,
alwaysApproveResubmit,
- alwaysAllowFollowupQuestions,
- alwaysAllowUpdateTodoList,
allowedMaxRequests,
setAlwaysAllowReadOnly,
setAlwaysAllowWrite,
@@ -43,10 +37,24 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
const { t } = useAppTranslation()
+ const baseToggles = useAutoApprovalToggles()
+
+ // AutoApproveMenu needs alwaysApproveResubmit in addition to the base toggles
+ const toggles = useMemo(
+ () => ({
+ ...baseToggles,
+ alwaysApproveResubmit: alwaysApproveResubmit,
+ }),
+ [baseToggles, alwaysApproveResubmit],
+ )
+
+ const { hasEnabledOptions, effectiveAutoApprovalEnabled } = useAutoApprovalState(toggles, autoApprovalEnabled)
+
const onAutoApproveToggle = useCallback(
(key: AutoApproveSetting, value: boolean) => {
vscode.postMessage({ type: key, bool: value })
+ // Update the specific toggle state
switch (key) {
case "alwaysAllowReadOnly":
setAlwaysAllowReadOnly(value)
@@ -79,8 +87,30 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
setAlwaysAllowUpdateTodoList(value)
break
}
+
+ // Check if we need to update the master auto-approval state
+ // Create a new toggles state with the updated value
+ const updatedToggles = {
+ ...toggles,
+ [key]: value,
+ }
+
+ const willHaveEnabledOptions = Object.values(updatedToggles).some((v) => !!v)
+
+ // If enabling the first option, enable master auto-approval
+ if (value && !hasEnabledOptions && willHaveEnabledOptions) {
+ setAutoApprovalEnabled(true)
+ vscode.postMessage({ type: "autoApprovalEnabled", bool: true })
+ }
+ // If disabling the last option, disable master auto-approval
+ else if (!value && hasEnabledOptions && !willHaveEnabledOptions) {
+ setAutoApprovalEnabled(false)
+ vscode.postMessage({ type: "autoApprovalEnabled", bool: false })
+ }
},
[
+ toggles,
+ hasEnabledOptions,
setAlwaysAllowReadOnly,
setAlwaysAllowWrite,
setAlwaysAllowExecute,
@@ -91,43 +121,32 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
setAlwaysApproveResubmit,
setAlwaysAllowFollowupQuestions,
setAlwaysAllowUpdateTodoList,
+ setAutoApprovalEnabled,
],
)
- const toggleExpanded = useCallback(() => setIsExpanded((prev) => !prev), [])
+ const toggleExpanded = useCallback(() => {
+ setIsExpanded((prev) => !prev)
+ }, [])
- const toggles = useMemo(
- () => ({
- alwaysAllowReadOnly: alwaysAllowReadOnly,
- alwaysAllowWrite: alwaysAllowWrite,
- alwaysAllowExecute: alwaysAllowExecute,
- alwaysAllowBrowser: alwaysAllowBrowser,
- alwaysAllowMcp: alwaysAllowMcp,
- alwaysAllowModeSwitch: alwaysAllowModeSwitch,
- alwaysAllowSubtasks: alwaysAllowSubtasks,
- alwaysApproveResubmit: alwaysApproveResubmit,
- alwaysAllowFollowupQuestions: alwaysAllowFollowupQuestions,
- alwaysAllowUpdateTodoList: alwaysAllowUpdateTodoList,
- }),
- [
- alwaysAllowReadOnly,
- alwaysAllowWrite,
- alwaysAllowExecute,
- alwaysAllowBrowser,
- alwaysAllowMcp,
- alwaysAllowModeSwitch,
- alwaysAllowSubtasks,
- alwaysApproveResubmit,
- alwaysAllowFollowupQuestions,
- alwaysAllowUpdateTodoList,
- ],
- )
+ // 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))
.join(", ")
+ // Update displayed text logic
+ const displayText = useMemo(() => {
+ if (!effectiveAutoApprovalEnabled || !hasEnabledOptions) {
+ return t("chat:autoApprove.none")
+ }
+ return enabledActionsList || t("chat:autoApprove.none")
+ }, [effectiveAutoApprovalEnabled, hasEnabledOptions, enabledActionsList, t])
+
const handleOpenSettings = useCallback(
() =>
window.postMessage({ type: "action", action: "settingsButtonClicked", values: { section: "autoApprove" } }),
@@ -155,14 +174,26 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
}}
onClick={toggleExpanded}>
e.stopPropagation()}>
- {
- const newValue = !(autoApprovalEnabled ?? false)
- setAutoApprovalEnabled(newValue)
- vscode.postMessage({ type: "autoApprovalEnabled", bool: newValue })
- }}
- />
+
+ {
+ if (hasEnabledOptions) {
+ const newValue = !(autoApprovalEnabled ?? false)
+ setAutoApprovalEnabled(newValue)
+ vscode.postMessage({ type: "autoApprovalEnabled", bool: newValue })
+ }
+ // If no options enabled, do nothing
+ }}
+ />
+
{
flex: 1,
minWidth: 0,
}}>
- {enabledActionsList || t("chat:autoApprove.none")}
+ {displayText}
{
+ // First check if auto-approval is enabled AND we have at least one permission
if (!autoApprovalEnabled || !message || message.type !== "ask") {
return false
}
+ // Use the hook's result instead of duplicating the logic
+ if (!hasEnabledOptions) {
+ return false
+ }
+
if (message.ask === "followup") {
return alwaysAllowFollowupQuestions
}
@@ -1038,6 +1051,7 @@ const ChatViewComponent: React.ForwardRefRenderFunction ({
+ vscode: {
+ postMessage: vi.fn(),
+ },
+}))
+
+// Mock ExtensionStateContext
+vi.mock("@src/context/ExtensionStateContext")
+
+// Mock translation hook
+vi.mock("@src/i18n/TranslationContext", () => ({
+ useAppTranslation: () => ({
+ t: (key: string) => {
+ const translations: Record = {
+ "chat:autoApprove.title": "Auto-approve",
+ "chat:autoApprove.none": "None selected",
+ "chat:autoApprove.selectOptionsFirst": "Select at least one option below to enable auto-approval",
+ "chat:autoApprove.description": "Configure auto-approval settings",
+ "settings:autoApprove.readOnly.label": "Read-only operations",
+ "settings:autoApprove.write.label": "Write operations",
+ "settings:autoApprove.execute.label": "Execute operations",
+ "settings:autoApprove.browser.label": "Browser operations",
+ "settings:autoApprove.modeSwitch.label": "Mode switches",
+ "settings:autoApprove.mcp.label": "MCP operations",
+ "settings:autoApprove.subtasks.label": "Subtasks",
+ "settings:autoApprove.resubmit.label": "Resubmit",
+ "settings:autoApprove.followupQuestions.label": "Follow-up questions",
+ "settings:autoApprove.updateTodoList.label": "Update todo list",
+ "settings:autoApprove.apiRequestLimit.title": "API request limit",
+ "settings:autoApprove.apiRequestLimit.unlimited": "Unlimited",
+ "settings:autoApprove.apiRequestLimit.description": "Limit the number of API requests",
+ "settings:autoApprove.readOnly.outsideWorkspace": "Also allow outside workspace",
+ "settings:autoApprove.write.outsideWorkspace": "Also allow outside workspace",
+ "settings:autoApprove.write.delay": "Delay",
+ }
+ return translations[key] || key
+ },
+ }),
+}))
+
+// Get the mocked postMessage function
+const mockPostMessage = vscode.postMessage as ReturnType
+
+describe("AutoApproveMenu", () => {
+ const defaultExtensionState = {
+ autoApprovalEnabled: true,
+ alwaysAllowReadOnly: false,
+ alwaysAllowReadOnlyOutsideWorkspace: false,
+ alwaysAllowWrite: false,
+ alwaysAllowWriteOutsideWorkspace: false,
+ alwaysAllowExecute: false,
+ alwaysAllowBrowser: false,
+ alwaysAllowMcp: false,
+ alwaysAllowModeSwitch: false,
+ alwaysAllowSubtasks: false,
+ alwaysApproveResubmit: false,
+ alwaysAllowFollowupQuestions: false,
+ alwaysAllowUpdateTodoList: false,
+ writeDelayMs: 3000,
+ allowedMaxRequests: undefined,
+ setAutoApprovalEnabled: vi.fn(),
+ setAlwaysAllowReadOnly: vi.fn(),
+ setAlwaysAllowWrite: vi.fn(),
+ setAlwaysAllowExecute: vi.fn(),
+ setAlwaysAllowBrowser: vi.fn(),
+ setAlwaysAllowMcp: vi.fn(),
+ setAlwaysAllowModeSwitch: vi.fn(),
+ setAlwaysAllowSubtasks: vi.fn(),
+ setAlwaysApproveResubmit: vi.fn(),
+ setAlwaysAllowFollowupQuestions: vi.fn(),
+ setAlwaysAllowUpdateTodoList: vi.fn(),
+ setAllowedMaxRequests: vi.fn(),
+ }
+
+ beforeEach(() => {
+ vi.clearAllMocks()
+ ;(useExtensionState as ReturnType).mockReturnValue(defaultExtensionState)
+ })
+
+ describe("Master checkbox behavior", () => {
+ it("should show 'None selected' when no sub-options are selected", () => {
+ ;(useExtensionState as ReturnType).mockReturnValue({
+ ...defaultExtensionState,
+ autoApprovalEnabled: false,
+ alwaysAllowReadOnly: false,
+ alwaysAllowWrite: false,
+ alwaysAllowExecute: false,
+ alwaysAllowBrowser: false,
+ alwaysAllowModeSwitch: false,
+ })
+
+ render()
+
+ // Check that the text shows "None selected"
+ expect(screen.getByText("None selected")).toBeInTheDocument()
+ })
+
+ it("should show enabled options when sub-options are selected", () => {
+ ;(useExtensionState as ReturnType).mockReturnValue({
+ ...defaultExtensionState,
+ autoApprovalEnabled: true,
+ alwaysAllowReadOnly: true,
+ alwaysAllowWrite: false,
+ })
+
+ render()
+
+ // Check that the text shows the enabled option
+ expect(screen.getByText("Read-only operations")).toBeInTheDocument()
+ })
+
+ it("should not allow toggling master checkbox when no options are selected", () => {
+ ;(useExtensionState as ReturnType).mockReturnValue({
+ ...defaultExtensionState,
+ autoApprovalEnabled: false,
+ alwaysAllowReadOnly: false,
+ })
+
+ render()
+
+ // Click on the master checkbox
+ const masterCheckbox = screen.getByRole("checkbox")
+ fireEvent.click(masterCheckbox)
+
+ // Should not send any message since no options are selected
+ expect(mockPostMessage).not.toHaveBeenCalled()
+ })
+
+ it("should toggle master checkbox when options are selected", () => {
+ ;(useExtensionState as ReturnType).mockReturnValue({
+ ...defaultExtensionState,
+ autoApprovalEnabled: true,
+ alwaysAllowReadOnly: true,
+ })
+
+ render()
+
+ // Click on the master checkbox
+ const masterCheckbox = screen.getByRole("checkbox")
+ fireEvent.click(masterCheckbox)
+
+ // Should toggle the master checkbox
+ expect(mockPostMessage).toHaveBeenCalledWith({
+ type: "autoApprovalEnabled",
+ bool: false,
+ })
+ })
+ })
+
+ describe("Sub-option toggles", () => {
+ it("should toggle read-only operations", async () => {
+ const mockSetAlwaysAllowReadOnly = vi.fn()
+
+ ;(useExtensionState as ReturnType).mockReturnValue({
+ ...defaultExtensionState,
+ setAlwaysAllowReadOnly: mockSetAlwaysAllowReadOnly,
+ })
+
+ render()
+
+ // Expand the menu
+ const menuContainer = screen.getByText("Auto-approve").parentElement
+ fireEvent.click(menuContainer!)
+
+ // Wait for the menu to expand and find the read-only button
+ await waitFor(() => {
+ expect(screen.getByTestId("always-allow-readonly-toggle")).toBeInTheDocument()
+ })
+
+ const readOnlyButton = screen.getByTestId("always-allow-readonly-toggle")
+ fireEvent.click(readOnlyButton)
+
+ expect(mockPostMessage).toHaveBeenCalledWith({
+ type: "alwaysAllowReadOnly",
+ bool: true,
+ })
+ })
+
+ it("should toggle write operations", async () => {
+ const mockSetAlwaysAllowWrite = vi.fn()
+
+ ;(useExtensionState as ReturnType).mockReturnValue({
+ ...defaultExtensionState,
+ setAlwaysAllowWrite: mockSetAlwaysAllowWrite,
+ })
+
+ render()
+
+ // Expand the menu
+ const menuContainer = screen.getByText("Auto-approve").parentElement
+ fireEvent.click(menuContainer!)
+
+ await waitFor(() => {
+ expect(screen.getByTestId("always-allow-write-toggle")).toBeInTheDocument()
+ })
+
+ const writeButton = screen.getByTestId("always-allow-write-toggle")
+ fireEvent.click(writeButton)
+
+ expect(mockPostMessage).toHaveBeenCalledWith({
+ type: "alwaysAllowWrite",
+ bool: true,
+ })
+ })
+ })
+
+ describe("Complex scenarios", () => {
+ it("should display multiple enabled options in summary text", () => {
+ ;(useExtensionState as ReturnType).mockReturnValue({
+ ...defaultExtensionState,
+ autoApprovalEnabled: true,
+ alwaysAllowReadOnly: true,
+ alwaysAllowWrite: true,
+ alwaysAllowExecute: true,
+ })
+
+ render()
+
+ // Should show all enabled options in the summary
+ expect(screen.getByText("Read-only operations, Write operations, Execute operations")).toBeInTheDocument()
+ })
+
+ it("should handle enabling first option when none selected", async () => {
+ const mockSetAutoApprovalEnabled = vi.fn()
+ const mockSetAlwaysAllowReadOnly = vi.fn()
+
+ ;(useExtensionState as ReturnType).mockReturnValue({
+ ...defaultExtensionState,
+ autoApprovalEnabled: false,
+ alwaysAllowReadOnly: false,
+ setAutoApprovalEnabled: mockSetAutoApprovalEnabled,
+ setAlwaysAllowReadOnly: mockSetAlwaysAllowReadOnly,
+ })
+
+ render()
+
+ // Expand the menu
+ const menuContainer = screen.getByText("Auto-approve").parentElement
+ fireEvent.click(menuContainer!)
+
+ await waitFor(() => {
+ expect(screen.getByTestId("always-allow-readonly-toggle")).toBeInTheDocument()
+ })
+
+ // Enable read-only
+ const readOnlyButton = screen.getByTestId("always-allow-readonly-toggle")
+ fireEvent.click(readOnlyButton)
+
+ // Should enable the sub-option
+ expect(mockPostMessage).toHaveBeenCalledWith({
+ type: "alwaysAllowReadOnly",
+ bool: true,
+ })
+
+ // Should also enable master auto-approval
+ expect(mockPostMessage).toHaveBeenCalledWith({
+ type: "autoApprovalEnabled",
+ bool: true,
+ })
+ })
+
+ it("should handle disabling last option", async () => {
+ const mockSetAutoApprovalEnabled = vi.fn()
+ const mockSetAlwaysAllowReadOnly = vi.fn()
+
+ ;(useExtensionState as ReturnType).mockReturnValue({
+ ...defaultExtensionState,
+ autoApprovalEnabled: true,
+ alwaysAllowReadOnly: true,
+ setAutoApprovalEnabled: mockSetAutoApprovalEnabled,
+ setAlwaysAllowReadOnly: mockSetAlwaysAllowReadOnly,
+ })
+
+ render()
+
+ // Expand the menu
+ const menuContainer = screen.getByText("Auto-approve").parentElement
+ fireEvent.click(menuContainer!)
+
+ await waitFor(() => {
+ expect(screen.getByTestId("always-allow-readonly-toggle")).toBeInTheDocument()
+ })
+
+ // Disable read-only (the last enabled option)
+ const readOnlyButton = screen.getByTestId("always-allow-readonly-toggle")
+ fireEvent.click(readOnlyButton)
+
+ // Should disable the sub-option
+ expect(mockPostMessage).toHaveBeenCalledWith({
+ type: "alwaysAllowReadOnly",
+ bool: false,
+ })
+
+ // Should also disable master auto-approval
+ expect(mockPostMessage).toHaveBeenCalledWith({
+ type: "autoApprovalEnabled",
+ bool: false,
+ })
+ })
+ })
+})
diff --git a/webview-ui/src/components/chat/__tests__/ChatView.auto-approve-new.spec.tsx b/webview-ui/src/components/chat/__tests__/ChatView.auto-approve-new.spec.tsx
new file mode 100644
index 00000000000..b00e3f592ef
--- /dev/null
+++ b/webview-ui/src/components/chat/__tests__/ChatView.auto-approve-new.spec.tsx
@@ -0,0 +1,480 @@
+// npx vitest run src/components/chat/__tests__/ChatView.auto-approve-new.spec.tsx
+
+import { render, waitFor } from "@/utils/test-utils"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+
+import { ExtensionStateContextProvider } from "@src/context/ExtensionStateContext"
+import { vscode } from "@src/utils/vscode"
+
+import ChatView, { ChatViewProps } from "../ChatView"
+
+// Mock vscode API
+vi.mock("@src/utils/vscode", () => ({
+ vscode: {
+ postMessage: vi.fn(),
+ },
+}))
+
+// Mock all problematic dependencies
+vi.mock("rehype-highlight", () => ({
+ default: () => () => {},
+}))
+
+vi.mock("hast-util-to-text", () => ({
+ default: () => "",
+}))
+
+// Mock components that use ESM dependencies
+vi.mock("../BrowserSessionRow", () => ({
+ default: function MockBrowserSessionRow({ messages }: { messages: any[] }) {
+ return {JSON.stringify(messages)}
+ },
+}))
+
+vi.mock("../ChatRow", () => ({
+ default: function MockChatRow({ message }: { message: any }) {
+ return {JSON.stringify(message)}
+ },
+}))
+
+vi.mock("../TaskHeader", () => ({
+ default: function MockTaskHeader({ task }: { task: any }) {
+ return {JSON.stringify(task)}
+ },
+}))
+
+vi.mock("../AutoApproveMenu", () => ({
+ default: () => null,
+}))
+
+vi.mock("@src/components/common/CodeBlock", () => ({
+ default: () => null,
+ CODE_BLOCK_BG_COLOR: "rgb(30, 30, 30)",
+}))
+
+vi.mock("@src/components/common/CodeAccordion", () => ({
+ default: () => null,
+}))
+
+vi.mock("@src/components/chat/ContextMenu", () => ({
+ default: () => null,
+}))
+
+// Mock window.postMessage to trigger state hydration
+const mockPostMessage = (state: any) => {
+ window.postMessage(
+ {
+ type: "state",
+ state: {
+ version: "1.0.0",
+ clineMessages: [],
+ taskHistory: [],
+ shouldShowAnnouncement: false,
+ allowedCommands: [],
+ alwaysAllowExecute: false,
+ autoApprovalEnabled: true,
+ ...state,
+ },
+ },
+ "*",
+ )
+}
+
+const queryClient = new QueryClient()
+
+const defaultProps: ChatViewProps = {
+ isHidden: false,
+ showAnnouncement: false,
+ hideAnnouncement: () => {},
+}
+
+const renderChatView = (props: Partial = {}) => {
+ return render(
+
+
+
+
+ ,
+ )
+}
+
+describe("ChatView - New Auto Approval Logic Tests", () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ })
+
+ describe("Master auto-approval with no sub-options enabled", () => {
+ it("should NOT auto-approve when autoApprovalEnabled is true but no sub-options are enabled", async () => {
+ renderChatView()
+
+ // First hydrate state with initial task
+ mockPostMessage({
+ autoApprovalEnabled: true, // Master is enabled
+ alwaysAllowReadOnly: false, // But no sub-options are enabled
+ alwaysAllowWrite: false,
+ alwaysAllowExecute: false,
+ alwaysAllowBrowser: false,
+ alwaysAllowModeSwitch: false,
+ clineMessages: [
+ {
+ type: "say",
+ say: "task",
+ ts: Date.now() - 2000,
+ text: "Initial task",
+ },
+ ],
+ })
+
+ // Then send a read tool ask message
+ mockPostMessage({
+ autoApprovalEnabled: true,
+ alwaysAllowReadOnly: false,
+ alwaysAllowWrite: false,
+ alwaysAllowExecute: false,
+ alwaysAllowBrowser: false,
+ alwaysAllowModeSwitch: false,
+ clineMessages: [
+ {
+ type: "say",
+ say: "task",
+ ts: Date.now() - 2000,
+ text: "Initial task",
+ },
+ {
+ type: "ask",
+ ask: "tool",
+ ts: Date.now(),
+ text: JSON.stringify({ tool: "readFile", path: "test.txt" }),
+ partial: false,
+ },
+ ],
+ })
+
+ // Wait and verify no auto-approval message was sent
+ await new Promise((resolve) => setTimeout(resolve, 100))
+ expect(vscode.postMessage).not.toHaveBeenCalledWith({
+ type: "askResponse",
+ askResponse: "yesButtonClicked",
+ })
+ })
+
+ it("should NOT auto-approve write operations when only master is enabled", async () => {
+ renderChatView()
+
+ // First hydrate state with initial task
+ mockPostMessage({
+ autoApprovalEnabled: true, // Master is enabled
+ alwaysAllowReadOnly: false,
+ alwaysAllowWrite: false, // Write is not enabled
+ writeDelayMs: 0,
+ clineMessages: [
+ {
+ type: "say",
+ say: "task",
+ ts: Date.now() - 2000,
+ text: "Initial task",
+ },
+ ],
+ })
+
+ // Then send a write tool ask message
+ mockPostMessage({
+ autoApprovalEnabled: true,
+ alwaysAllowReadOnly: false,
+ alwaysAllowWrite: false,
+ writeDelayMs: 0,
+ clineMessages: [
+ {
+ type: "say",
+ say: "task",
+ ts: Date.now() - 2000,
+ text: "Initial task",
+ },
+ {
+ type: "ask",
+ ask: "tool",
+ ts: Date.now(),
+ text: JSON.stringify({ tool: "editedExistingFile", path: "test.txt" }),
+ partial: false,
+ },
+ ],
+ })
+
+ // Wait and verify no auto-approval message was sent
+ await new Promise((resolve) => setTimeout(resolve, 100))
+ expect(vscode.postMessage).not.toHaveBeenCalledWith({
+ type: "askResponse",
+ askResponse: "yesButtonClicked",
+ })
+ })
+
+ it("should NOT auto-approve browser actions when only master is enabled", async () => {
+ renderChatView()
+
+ // First hydrate state with initial task
+ mockPostMessage({
+ autoApprovalEnabled: true, // Master is enabled
+ alwaysAllowBrowser: false, // Browser is not enabled
+ clineMessages: [
+ {
+ type: "say",
+ say: "task",
+ ts: Date.now() - 2000,
+ text: "Initial task",
+ },
+ ],
+ })
+
+ // Then send a browser action ask message
+ mockPostMessage({
+ autoApprovalEnabled: true,
+ alwaysAllowBrowser: false,
+ clineMessages: [
+ {
+ type: "say",
+ say: "task",
+ ts: Date.now() - 2000,
+ text: "Initial task",
+ },
+ {
+ type: "ask",
+ ask: "browser_action_launch",
+ ts: Date.now(),
+ text: JSON.stringify({ action: "launch", url: "http://example.com" }),
+ partial: false,
+ },
+ ],
+ })
+
+ // Wait and verify no auto-approval message was sent
+ await new Promise((resolve) => setTimeout(resolve, 100))
+ expect(vscode.postMessage).not.toHaveBeenCalledWith({
+ type: "askResponse",
+ askResponse: "yesButtonClicked",
+ })
+ })
+ })
+
+ describe("Correct auto-approval with sub-options enabled", () => {
+ it("should auto-approve when master and at least one sub-option are enabled", async () => {
+ renderChatView()
+
+ // First hydrate state with initial task
+ mockPostMessage({
+ autoApprovalEnabled: true,
+ alwaysAllowReadOnly: true, // At least one sub-option is enabled
+ alwaysAllowWrite: false,
+ clineMessages: [
+ {
+ type: "say",
+ say: "task",
+ ts: Date.now() - 2000,
+ text: "Initial task",
+ },
+ ],
+ })
+
+ // Then send a read tool ask message
+ mockPostMessage({
+ autoApprovalEnabled: true,
+ alwaysAllowReadOnly: true,
+ alwaysAllowWrite: false,
+ clineMessages: [
+ {
+ type: "say",
+ say: "task",
+ ts: Date.now() - 2000,
+ text: "Initial task",
+ },
+ {
+ type: "ask",
+ ask: "tool",
+ ts: Date.now(),
+ text: JSON.stringify({ tool: "readFile", path: "test.txt" }),
+ partial: false,
+ },
+ ],
+ })
+
+ // Wait for the auto-approval message
+ await waitFor(() => {
+ expect(vscode.postMessage).toHaveBeenCalledWith({
+ type: "askResponse",
+ askResponse: "yesButtonClicked",
+ })
+ })
+ })
+
+ it("should auto-approve when multiple sub-options are enabled", async () => {
+ renderChatView()
+
+ // First hydrate state with initial task
+ mockPostMessage({
+ autoApprovalEnabled: true,
+ alwaysAllowReadOnly: true, // Multiple sub-options enabled
+ alwaysAllowWrite: true,
+ alwaysAllowExecute: true,
+ writeDelayMs: 0,
+ clineMessages: [
+ {
+ type: "say",
+ say: "task",
+ ts: Date.now() - 2000,
+ text: "Initial task",
+ },
+ ],
+ })
+
+ // Then send a write tool ask message
+ mockPostMessage({
+ autoApprovalEnabled: true,
+ alwaysAllowReadOnly: true,
+ alwaysAllowWrite: true,
+ alwaysAllowExecute: true,
+ writeDelayMs: 0,
+ clineMessages: [
+ {
+ type: "say",
+ say: "task",
+ ts: Date.now() - 2000,
+ text: "Initial task",
+ },
+ {
+ type: "ask",
+ ask: "tool",
+ ts: Date.now(),
+ text: JSON.stringify({ tool: "editedExistingFile", path: "test.txt" }),
+ partial: false,
+ },
+ ],
+ })
+
+ // Wait for the auto-approval message
+ await waitFor(() => {
+ expect(vscode.postMessage).toHaveBeenCalledWith({
+ type: "askResponse",
+ askResponse: "yesButtonClicked",
+ })
+ })
+ })
+ })
+
+ describe("Edge cases", () => {
+ it("should handle state transitions correctly", async () => {
+ renderChatView()
+
+ // Start with auto-approval properly configured
+ mockPostMessage({
+ autoApprovalEnabled: true,
+ alwaysAllowReadOnly: true,
+ clineMessages: [
+ {
+ type: "say",
+ say: "task",
+ ts: Date.now() - 2000,
+ text: "Initial task",
+ },
+ ],
+ })
+
+ // Then transition to a state where no sub-options are enabled
+ mockPostMessage({
+ autoApprovalEnabled: true, // Master still true
+ alwaysAllowReadOnly: false, // All sub-options now false
+ alwaysAllowWrite: false,
+ alwaysAllowExecute: false,
+ alwaysAllowBrowser: false,
+ alwaysAllowModeSwitch: false,
+ clineMessages: [
+ {
+ type: "say",
+ say: "task",
+ ts: Date.now() - 2000,
+ text: "Initial task",
+ },
+ {
+ type: "ask",
+ ask: "tool",
+ ts: Date.now(),
+ text: JSON.stringify({ tool: "readFile", path: "test.txt" }),
+ partial: false,
+ },
+ ],
+ })
+
+ // Wait and verify no auto-approval message was sent
+ await new Promise((resolve) => setTimeout(resolve, 100))
+ expect(vscode.postMessage).not.toHaveBeenCalledWith({
+ type: "askResponse",
+ askResponse: "yesButtonClicked",
+ })
+ })
+
+ it("should respect the hasEnabledOptions check in isAutoApproved", async () => {
+ renderChatView()
+
+ // Configure state where master is true but effective approval should be false
+ mockPostMessage({
+ autoApprovalEnabled: true,
+ alwaysAllowReadOnly: false,
+ alwaysAllowReadOnlyOutsideWorkspace: false,
+ alwaysAllowWrite: false,
+ alwaysAllowWriteOutsideWorkspace: false,
+ alwaysAllowExecute: false,
+ alwaysAllowBrowser: false,
+ alwaysAllowModeSwitch: false,
+ clineMessages: [
+ {
+ type: "say",
+ say: "task",
+ ts: Date.now() - 2000,
+ text: "Initial task",
+ },
+ ],
+ })
+
+ // Try various tool types - none should auto-approve
+ const toolRequests = [
+ { tool: "readFile", path: "test.txt" },
+ { tool: "editedExistingFile", path: "test.txt" },
+ { tool: "executeCommand", command: "ls" },
+ { tool: "switchMode", mode: "architect" },
+ ]
+
+ for (const toolRequest of toolRequests) {
+ vi.clearAllMocks()
+
+ mockPostMessage({
+ autoApprovalEnabled: true,
+ alwaysAllowReadOnly: false,
+ alwaysAllowWrite: false,
+ alwaysAllowExecute: false,
+ alwaysAllowBrowser: false,
+ alwaysAllowModeSwitch: false,
+ clineMessages: [
+ {
+ type: "say",
+ say: "task",
+ ts: Date.now() - 2000,
+ text: "Initial task",
+ },
+ {
+ type: "ask",
+ ask: "tool",
+ ts: Date.now(),
+ text: JSON.stringify(toolRequest),
+ partial: false,
+ },
+ ],
+ })
+
+ // Wait and verify no auto-approval for any tool type
+ await new Promise((resolve) => setTimeout(resolve, 100))
+ expect(vscode.postMessage).not.toHaveBeenCalledWith({
+ type: "askResponse",
+ askResponse: "yesButtonClicked",
+ })
+ }
+ })
+ })
+})
diff --git a/webview-ui/src/components/settings/AutoApproveSettings.tsx b/webview-ui/src/components/settings/AutoApproveSettings.tsx
index fe8a3598325..e1d3c52cb93 100644
--- a/webview-ui/src/components/settings/AutoApproveSettings.tsx
+++ b/webview-ui/src/components/settings/AutoApproveSettings.tsx
@@ -4,12 +4,15 @@ import { X } from "lucide-react"
import { useAppTranslation } from "@/i18n/TranslationContext"
import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react"
import { vscode } from "@/utils/vscode"
-import { Button, Input, Slider } from "@/components/ui"
+import { Button, Input, Slider, StandardTooltip } from "@/components/ui"
import { SetCachedStateField } from "./types"
import { SectionHeader } from "./SectionHeader"
import { Section } from "./Section"
import { AutoApproveToggle } from "./AutoApproveToggle"
+import { useExtensionState } from "@/context/ExtensionStateContext"
+import { useAutoApprovalState } from "@/hooks/useAutoApprovalState"
+import { useAutoApprovalToggles } from "@/hooks/useAutoApprovalToggles"
type AutoApproveSettingsProps = HTMLAttributes & {
alwaysAllowReadOnly?: boolean
@@ -77,6 +80,11 @@ export const AutoApproveSettings = ({
const { t } = useAppTranslation()
const [commandInput, setCommandInput] = useState("")
const [deniedCommandInput, setDeniedCommandInput] = useState("")
+ const { autoApprovalEnabled, setAutoApprovalEnabled } = useExtensionState()
+
+ const toggles = useAutoApprovalToggles()
+
+ const { hasEnabledOptions, effectiveAutoApprovalEnabled } = useAutoApprovalState(toggles, autoApprovalEnabled)
const handleAddCommand = () => {
const currentCommands = allowedCommands ?? []
@@ -104,6 +112,30 @@ export const AutoApproveSettings = ({
+ {!hasEnabledOptions ? (
+
+ {
+ // Do nothing when no options are enabled
+ return
+ }}
+ />
+
+ ) : (
+
{
+ const newValue = !(autoApprovalEnabled ?? false)
+ setAutoApprovalEnabled(newValue)
+ vscode.postMessage({ type: "autoApprovalEnabled", bool: newValue })
+ }}
+ />
+ )}
{t("settings:sections.autoApprove")}