Add Interactive Approval Mode Dialog (#1012)

packages/cli/src/ui/hooks/slashCommandProcessor.ts

@@ -48,6 +48,7 @@ interface SlashCommandProcessorActions {
   openSettingsDialog: () => void;
   openModelDialog: () => void;
   openPermissionsDialog: () => void;
+  openApprovalModeDialog: () => void;
   quit: (messages: HistoryItem[]) => void;
   setDebugMessage: (message: string) => void;
   toggleCorgiMode: () => void;
@@ -396,6 +397,9 @@ export const useSlashCommandProcessor = (
                     case 'subagent_list':
                       actions.openAgentsManagerDialog();
                       return { type: 'handled' };
+                    case 'approval-mode':
+                      actions.openApprovalModeDialog();
+                      return { type: 'handled' };
                     case 'help':
                       return { type: 'handled' };
                     default: {

packages/cli/src/ui/hooks/useApprovalModeCommand.ts

@@ -0,0 +1,57 @@
+/**
+ * @license
+ * Copyright 2025 Qwen
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { useState, useCallback } from 'react';
+import type { ApprovalMode, Config } from '@qwen-code/qwen-code-core';
+import type { LoadedSettings, SettingScope } from '../../config/settings.js';
+
+interface UseApprovalModeCommandReturn {
+  isApprovalModeDialogOpen: boolean;
+  openApprovalModeDialog: () => void;
+  handleApprovalModeSelect: (
+    mode: ApprovalMode | undefined,
+    scope: SettingScope,
+  ) => void;
+}
+
+export const useApprovalModeCommand = (
+  loadedSettings: LoadedSettings,
+  config: Config,
+): UseApprovalModeCommandReturn => {
+  const [isApprovalModeDialogOpen, setIsApprovalModeDialogOpen] =
+    useState(false);
+
+  const openApprovalModeDialog = useCallback(() => {
+    setIsApprovalModeDialogOpen(true);
+  }, []);
+
+  const handleApprovalModeSelect = useCallback(
+    (mode: ApprovalMode | undefined, scope: SettingScope) => {
+      try {
+        if (!mode) {
+          // User cancelled the dialog
+          setIsApprovalModeDialogOpen(false);
+          return;
+        }
+
+        // Set the mode in the current session and persist to settings
+        loadedSettings.setValue(scope, 'tools.approvalMode', mode);
+        config.setApprovalMode(
+          loadedSettings.merged.tools?.approvalMode ?? mode,
+        );
+      } finally {
+        setIsApprovalModeDialogOpen(false);
+      }
+    },
+    [config, loadedSettings],
+  );
+
+  return {
+    isApprovalModeDialogOpen,
+    openApprovalModeDialog,
+    handleApprovalModeSelect,
+  };
+};

packages/cli/src/ui/hooks/useDialogClose.ts

@@ -6,13 +6,20 @@
 
 import { useCallback } from 'react';
 import { SettingScope } from '../../config/settings.js';
-import type { AuthType } from '@qwen-code/qwen-code-core';
+import type { AuthType, ApprovalMode } from '@qwen-code/qwen-code-core';
 
 export interface DialogCloseOptions {
   // Theme dialog
   isThemeDialogOpen: boolean;
   handleThemeSelect: (theme: string | undefined, scope: SettingScope) => void;
 
+  // Approval mode dialog
+  isApprovalModeDialogOpen: boolean;
+  handleApprovalModeSelect: (
+    mode: ApprovalMode | undefined,
+    scope: SettingScope,
+  ) => void;
+
   // Auth dialog
   isAuthDialogOpen: boolean;
   handleAuthSelect: (
@@ -57,6 +64,12 @@ export function useDialogClose(options: DialogCloseOptions) {
       return true;
     }
 
+    if (options.isApprovalModeDialogOpen) {
+      // Mimic ESC behavior: onSelect(undefined, selectedScope) - keeps current mode
+      options.handleApprovalModeSelect(undefined, SettingScope.User);
+      return true;
+    }
+
     if (options.isEditorDialogOpen) {
       // Mimic ESC behavior: call onExit() directly
       options.exitEditorDialog();