feat: unify AI agent mode into three clear presets

Replace the two separate Permission + Approval dropdowns with a single
AgentModeSelector showing three self-explanatory options:

  • Read Only   — Troubleshoot + Ask  (read-only commands, confirm each)
  • Fix Mode    — Full Access + Ask   (config changes, confirm each step)
  • Auto Pilot  — Full Access + Auto  (executes automatically, use with caution)

Rename the blacklist toolbar button from "Patterns" to "Blocked".
Merge the two Settings → ARIA sections ("Agent Mode" + "Command Execution")
into one section with colored badge labels describing the risk level of each mode.

Author: AnasProgrammer2

src/renderer/src/components/ai/AiPanel.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState, useCallback } from 'react'
 import { createPortal } from 'react-dom'
 import { nanoid } from 'nanoid'
-import { X, Send, Sparkles, Trash2, Square, ShieldCheck, Wrench, AlertCircle, ChevronDown, Check, Eye, EyeOff, ShieldAlert, RotateCcw, Download } from 'lucide-react'
+import { X, Send, Sparkles, Trash2, Square, ShieldCheck, Wrench, AlertCircle, ChevronDown, Check, Eye, EyeOff, ShieldAlert, RotateCcw, Download, Zap } from 'lucide-react'
 import { useAppStore, AiMessage as AiMessageType, AiPermission, AiApproval } from '../../store'
 import { cn, stripAnsi } from '../../lib/utils'
 import { AiMessage } from './AiMessage'
@@ -47,6 +47,21 @@ function formatTokens(n: number): string {
   return String(n)
 }
 
+// ── Unified agent mode (combines permission + approval) ────────────────────────
+type AiMode = 'read-only' | 'fix' | 'auto-pilot'
+
+function modeToPermission(m: AiMode): AiPermission {
+  return m === 'read-only' ? 'troubleshoot' : 'full-access'
+}
+function modeToApproval(m: AiMode): AiApproval {
+  return m === 'auto-pilot' ? 'auto' : 'ask'
+}
+function permApprovalToMode(p: AiPermission, a: AiApproval): AiMode {
+  if (p === 'troubleshoot') return 'read-only'
+  if (a === 'auto') return 'auto-pilot'
+  return 'fix'
+}
+
 export function AiPanel({ activeSession, splitSession, allSessions, getTerminalContext, sendToTerminal, sendToSession }: Props): JSX.Element {
   const {
     aiMessages, aiStreaming, aiAgentActive, aiPermission, aiApproval, aiBlacklist, aiTokens,
@@ -57,22 +72,24 @@ export function AiPanel({ activeSession, splitSession, allSessions, getTerminalC
 
   // Per-session overrides — start from global settings, can be changed mid-chat
   // Reset to global defaults when conversation is cleared
-  const [sessionPermission, setSessionPermission] = useState<AiPermission>(aiPermission)
-  const [sessionApproval,   setSessionApproval]   = useState<AiApproval>(aiApproval)
-  const [sessionBlacklist,  setSessionBlacklist]  = useState<string[]>(aiBlacklist)
-  const [autoWatch,         setAutoWatch]          = useState(true)
-  const [historyCommands,   setHistoryCommands]    = useState<string[]>([])
-  const [privacyDismissed,  setPrivacyDismissed]  = useState(() =>
+  const [sessionMode,      setSessionMode]      = useState<AiMode>(() => permApprovalToMode(aiPermission, aiApproval))
+  const [sessionBlacklist, setSessionBlacklist] = useState<string[]>(aiBlacklist)
+  const [autoWatch,        setAutoWatch]         = useState(true)
+  const [historyCommands,  setHistoryCommands]   = useState<string[]>([])
+  const [privacyDismissed, setPrivacyDismissed]  = useState(() =>
     localStorage.getItem('aria-privacy-notice-accepted') === '1'
   )
+
+  // Derived — keeps the rest of the component working without changes
+  const sessionPermission = modeToPermission(sessionMode)
+  const sessionApproval   = modeToApproval(sessionMode)
   const prevMessageCount = useRef(0)
 
   // Sequential command queue — prevents race condition when auto-executing multiple commands
   const commandQueueRef = useRef<Promise<void>>(Promise.resolve())
   useEffect(() => {
     if (aiMessages.length === 0 && prevMessageCount.current > 0) {
-      setSessionPermission(aiPermission)
-      setSessionApproval(aiApproval)
+      setSessionMode(permApprovalToMode(aiPermission, aiApproval))
       setSessionBlacklist(aiBlacklist)
     }
     prevMessageCount.current = aiMessages.length
@@ -750,8 +767,7 @@ export function AiPanel({ activeSession, splitSession, allSessions, getTerminalC
 
                 {/* Toolbar */}
                 <div className="flex items-center gap-0.5 px-2.5 pb-2.5 pt-1">
-                  <ModeSelector value={sessionPermission} onChange={setSessionPermission} />
-                  <ApprovalSelector value={sessionApproval} onChange={setSessionApproval} />
+                  <AgentModeSelector value={sessionMode} onChange={setSessionMode} />
                   <BlacklistButton blacklist={sessionBlacklist} onChange={setSessionBlacklist} />
 
                   <button
@@ -904,41 +920,26 @@ function PillSelect<T extends string>({
   )
 }
 
-function ModeSelector({ value, onChange }: { value: AiPermission; onChange: (v: AiPermission) => void }): JSX.Element {
+function AgentModeSelector({ value, onChange }: { value: AiMode; onChange: (v: AiMode) => void }): JSX.Element {
   return (
     <PillSelect
       value={value}
       onChange={onChange}
       options={[
         {
-          id: 'troubleshoot', label: 'Troubleshoot', short: 'Scan',
+          id: 'read-only',   label: 'Read Only',   short: 'Read Only',
           icon: <ShieldCheck className="w-3 h-3" />,
-          dimColor: 'text-amber-500/70', activeColor: 'text-amber-400',
+          dimColor: 'text-emerald-500/70', activeColor: 'text-emerald-400',
         },
         {
-          id: 'full-access', label: 'Full Access', short: 'Full',
+          id: 'fix',         label: 'Fix Mode',    short: 'Fix Mode',
           icon: <Wrench className="w-3 h-3" />,
-          dimColor: 'text-red-500/70', activeColor: 'text-red-400',
-        },
-      ]}
-    />
-  )
-}
-
-function ApprovalSelector({ value, onChange }: { value: AiApproval; onChange: (v: AiApproval) => void }): JSX.Element {
-  return (
-    <PillSelect
-      value={value}
-      onChange={onChange}
-      align="right"
-      options={[
-        {
-          id: 'ask',  label: 'Ask each time', short: 'Ask',
-          dimColor: 'text-primary/60',    activeColor: 'text-primary',
+          dimColor: 'text-amber-500/70',   activeColor: 'text-amber-400',
         },
         {
-          id: 'auto', label: 'Auto-approve',  short: 'Auto',
-          dimColor: 'text-emerald-500/60', activeColor: 'text-emerald-400',
+          id: 'auto-pilot',  label: 'Auto Pilot',  short: 'Auto Pilot',
+          icon: <Zap className="w-3 h-3" />,
+          dimColor: 'text-red-500/70',     activeColor: 'text-red-400',
         },
       ]}
     />
@@ -991,7 +992,7 @@ function BlacklistButton({ blacklist, onChange }: { blacklist: string[]; onChang
         )}
       >
         <ShieldAlert className="w-3 h-3" />
-        <span>Patterns</span>
+        <span>Blocked</span>
         {activeCount > 0 && (
           <span className="text-[11px] opacity-70">({activeCount})</span>
         )}

src/renderer/src/components/dialogs/SettingsDialog.tsx

@@ -1102,36 +1102,6 @@ function AiSection(): JSX.Element {
     setTimeout(() => setSettingsSaved(false), 2500)
   }
 
-  const permissionOptions: { id: AiPermission; label: string; desc: string; icon: JSX.Element }[] = [
-    {
-      id:    'troubleshoot',
-      label: 'Troubleshoot',
-      desc:  'Read-only commands only — show, ping, ls, ps, etc. Safe for monitoring.',
-      icon:  <ShieldCheck className="w-4 h-4 text-amber-400" />,
-    },
-    {
-      id:    'full-access',
-      label: 'Full Access',
-      desc:  'Any command including configuration changes. Use with caution.',
-      icon:  <Wrench className="w-4 h-4 text-red-400" />,
-    },
-  ]
-
-  const approvalOptions: { id: AiApproval; label: string; desc: string; icon: JSX.Element }[] = [
-    {
-      id:    'ask',
-      label: 'Ask before each command',
-      desc:  'AI shows the command and waits for your approval before running.',
-      icon:  <Sparkles className="w-4 h-4 text-primary" />,
-    },
-    {
-      id:    'auto',
-      label: 'Auto-approve all',
-      desc:  'AI executes commands immediately without asking. Fastest workflow.',
-      icon:  <Zap className="w-4 h-4 text-emerald-400" />,
-    },
-  ]
-
   return (
     <div className="space-y-6">
       <SectionHeader
@@ -1213,57 +1183,64 @@ function AiSection(): JSX.Element {
         )}
       </SettingsGroup>
 
-      {/* Permission Mode */}
+      {/* Agent Mode — unified 3-option selector */}
       <SettingsGroup label="Agent Mode">
         <div className="space-y-2">
-          {permissionOptions.map((opt) => (
-            <button
-              key={opt.id}
-              onClick={() => setAiPermission(opt.id)}
-              className={cn(
-                'w-full flex items-start gap-3 p-3 rounded-lg border text-left transition-colors',
-                aiPermission === opt.id
-                  ? 'border-primary/50 bg-primary/10'
-                  : 'border-border hover:border-border/80 hover:bg-accent/50'
-              )}
-            >
-              <div className="mt-0.5 shrink-0">{opt.icon}</div>
-              <div className="flex-1 min-w-0">
-                <div className="flex items-center gap-2">
-                  <span className="text-sm font-medium text-foreground">{opt.label}</span>
-                  {aiPermission === opt.id && <Check className="w-3 h-3 text-primary" />}
-                </div>
-                <p className="text-xs text-muted-foreground mt-0.5 leading-relaxed">{opt.desc}</p>
-              </div>
-            </button>
-          ))}
-        </div>
-      </SettingsGroup>
-
-      {/* Approval Setting */}
-      <SettingsGroup label="Command Execution">
-        <div className="space-y-2">
-          {approvalOptions.map((opt) => (
-            <button
-              key={opt.id}
-              onClick={() => setAiApproval(opt.id)}
-              className={cn(
-                'w-full flex items-start gap-3 p-3 rounded-lg border text-left transition-colors',
-                aiApproval === opt.id
-                  ? 'border-primary/50 bg-primary/10'
-                  : 'border-border hover:border-border/80 hover:bg-accent/50'
-              )}
-            >
-              <div className="mt-0.5 shrink-0">{opt.icon}</div>
-              <div className="flex-1 min-w-0">
-                <div className="flex items-center gap-2">
-                  <span className="text-sm font-medium text-foreground">{opt.label}</span>
-                  {aiApproval === opt.id && <Check className="w-3 h-3 text-primary" />}
+          {[
+            {
+              permission: 'troubleshoot' as AiPermission,
+              approval:   'ask'          as AiApproval,
+              label: 'Read Only',
+              desc:  'Diagnose and inspect — read-only commands only (show, ping, ls…). Nothing is changed on the device.',
+              icon:  <ShieldCheck className="w-4 h-4 text-emerald-400" />,
+              badge: 'Safest',
+              badgeCls: 'text-emerald-400 bg-emerald-500/10 border-emerald-500/20',
+            },
+            {
+              permission: 'full-access'  as AiPermission,
+              approval:   'ask'          as AiApproval,
+              label: 'Fix Mode',
+              desc:  'ARIA can apply configuration changes, but pauses and asks your approval before running each command.',
+              icon:  <Wrench className="w-4 h-4 text-amber-400" />,
+              badge: 'Confirm each step',
+              badgeCls: 'text-amber-400 bg-amber-500/10 border-amber-500/20',
+            },
+            {
+              permission: 'full-access'  as AiPermission,
+              approval:   'auto'         as AiApproval,
+              label: 'Auto Pilot',
+              desc:  'ARIA executes commands automatically without stopping. Fastest workflow — use only on non-production devices.',
+              icon:  <Zap className="w-4 h-4 text-red-400" />,
+              badge: 'Use with caution',
+              badgeCls: 'text-red-400 bg-red-500/10 border-red-500/20',
+            },
+          ].map((opt) => {
+            const isActive = aiPermission === opt.permission && aiApproval === opt.approval
+            return (
+              <button
+                key={opt.label}
+                onClick={() => { setAiPermission(opt.permission); setAiApproval(opt.approval) }}
+                className={cn(
+                  'w-full flex items-start gap-3 p-3 rounded-lg border text-left transition-colors',
+                  isActive
+                    ? 'border-primary/50 bg-primary/10'
+                    : 'border-border hover:border-border/80 hover:bg-accent/50'
+                )}
+              >
+                <div className="mt-0.5 shrink-0">{opt.icon}</div>
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2 flex-wrap">
+                    <span className="text-sm font-medium text-foreground">{opt.label}</span>
+                    <span className={cn('text-[10px] px-1.5 py-0.5 rounded-full border font-medium', opt.badgeCls)}>
+                      {opt.badge}
+                    </span>
+                    {isActive && <Check className="w-3 h-3 text-primary ml-auto shrink-0" />}
+                  </div>
+                  <p className="text-xs text-muted-foreground mt-0.5 leading-relaxed">{opt.desc}</p>
                 </div>
-                <p className="text-xs text-muted-foreground mt-0.5 leading-relaxed">{opt.desc}</p>
-              </div>
-            </button>
-          ))}
+              </button>
+            )
+          })}
         </div>
       </SettingsGroup>