feat: replace YoloToggle with PermissionModeSelector for Claude sessions

cli/src/claude/runClaude.ts

@@ -20,6 +20,7 @@ import { formatMessageWithAttachments } from '@/utils/attachmentFormatter';
 import { normalizeClaudeSessionModel } from './model';
 import { normalizeClaudeSessionEffort } from './effort';
 import { getInvokedCwd } from '@/utils/invokedCwd';
+import { readClaudeSettings } from '@/claude/utils/claudeSettings';
 
 export interface StartOptions {
     model?: string
@@ -151,7 +152,12 @@ export async function runClaude(options: StartOptions = {}): Promise<void> {
     }));
 
     // Forward messages to the queue
-    let currentPermissionMode: PermissionMode = options.permissionMode ?? 'default';
+    const claudeSettings = readClaudeSettings();
+    const rawDefaultMode = claudeSettings?.permissions?.defaultMode;
+    const claudeDefaultMode = PermissionModeSchema.safeParse(rawDefaultMode).success
+        ? rawDefaultMode as PermissionMode
+        : undefined;
+    let currentPermissionMode: PermissionMode = options.permissionMode ?? claudeDefaultMode ?? 'default';
     let currentModel: SessionModel = initialModel;
     let currentEffort: SessionEffort = initialEffort;
     let currentFallbackModel: string | undefined = undefined; // Track current fallback model

hub/src/web/routes/machines.ts

@@ -1,5 +1,6 @@
 import { Hono } from 'hono'
 import { z } from 'zod'
+import type { PermissionMode } from '@hapi/protocol'
 import type { SyncEngine } from '../../sync/syncEngine'
 import type { WebAppEnv } from '../middleware/auth'
 import { requireMachine } from './guards'
@@ -11,6 +12,7 @@ const spawnBodySchema = z.object({
     effort: z.string().optional(),
     modelReasoningEffort: z.string().optional(),
     yolo: z.boolean().optional(),
+    permissionMode: z.string().optional(),
     sessionType: z.enum(['simple', 'worktree']).optional(),
     worktreeName: z.string().optional()
 })
@@ -61,7 +63,8 @@ export function createMachinesRoutes(getSyncEngine: () => SyncEngine | null): Ho
             parsed.data.sessionType,
             parsed.data.worktreeName,
             undefined,
-            parsed.data.effort
+            parsed.data.effort,
+            parsed.data.permissionMode as PermissionMode | undefined
         )
         return c.json(result)
     })

web/src/api/client.ts

@@ -414,11 +414,12 @@ export class ApiClient {
         yolo?: boolean,
         sessionType?: 'simple' | 'worktree',
         worktreeName?: string,
-        effort?: string
+        effort?: string,
+        permissionMode?: string
     ): Promise<SpawnResponse> {
         return await this.request<SpawnResponse>(`/api/machines/${encodeURIComponent(machineId)}/spawn`, {
             method: 'POST',
-            body: JSON.stringify({ directory, agent, model, modelReasoningEffort, yolo, sessionType, worktreeName, effort })
+            body: JSON.stringify({ directory, agent, model, modelReasoningEffort, yolo, sessionType, worktreeName, effort, permissionMode })
         })
     }
 

web/src/components/NewSession/PermissionModeSelector.tsx

@@ -0,0 +1,36 @@
+import type { AgentType, ClaudePermissionMode } from './types'
+import { CLAUDE_PERMISSION_MODE_OPTIONS } from './types'
+import { useTranslation } from '@/lib/use-translation'
+
+export function PermissionModeSelector(props: {
+    agent: AgentType
+    permissionMode: ClaudePermissionMode
+    isDisabled: boolean
+    onPermissionModeChange: (value: ClaudePermissionMode) => void
+}) {
+    const { t } = useTranslation()
+
+    if (props.agent !== 'claude') {
+        return null
+    }
+
+    return (
+        <div className="flex flex-col gap-1.5 px-3 py-3">
+            <label className="text-xs font-medium text-[var(--app-hint)]">
+                {t('newSession.permissionMode')}
+            </label>
+            <select
+                value={props.permissionMode}
+                onChange={(e) => props.onPermissionModeChange(e.target.value as ClaudePermissionMode)}
+                disabled={props.isDisabled}
+                className="w-full px-3 py-2 text-sm rounded-lg border border-[var(--app-divider)] bg-[var(--app-bg)] text-[var(--app-text)] focus:outline-none focus:ring-2 focus:ring-[var(--app-link)] disabled:opacity-50"
+            >
+                {CLAUDE_PERMISSION_MODE_OPTIONS.map((option) => (
+                    <option key={option.value} value={option.value}>
+                        {option.label}
+                    </option>
+                ))}
+            </select>
+        </div>
+    )
+}

web/src/components/NewSession/index.tsx

@@ -10,22 +10,22 @@ import { useActiveSuggestions, type Suggestion } from '@/hooks/useActiveSuggesti
 import { useDirectorySuggestions } from '@/hooks/useDirectorySuggestions'
 import { useRecentPaths } from '@/hooks/useRecentPaths'
 import { useTranslation } from '@/lib/use-translation'
-import type { AgentType, ClaudeEffort, CodexReasoningEffort, SessionType } from './types'
+import type { AgentType, ClaudeEffort, ClaudePermissionMode, CodexReasoningEffort, SessionType } from './types'
 import { ActionButtons } from './ActionButtons'
 import { AgentSelector } from './AgentSelector'
 import { DirectorySection } from './DirectorySection'
 import { MachineSelector } from './MachineSelector'
 import { ModelSelector } from './ModelSelector'
 import { ClaudeEffortSelector } from './ClaudeEffortSelector'
 import { ReasoningEffortSelector } from './ReasoningEffortSelector'
+import { PermissionModeSelector } from './PermissionModeSelector'
 import {
     loadPreferredAgent,
-    loadPreferredYoloMode,
+    loadPreferredPermissionMode,
     savePreferredAgent,
-    savePreferredYoloMode,
+    savePreferredPermissionMode,
 } from './preferences'
 import { SessionTypeSelector } from './SessionTypeSelector'
-import { YoloToggle } from './YoloToggle'
 import { formatRunnerSpawnError } from '../../utils/formatRunnerSpawnError'
 
 export function NewSession(props: {
@@ -53,7 +53,7 @@ export function NewSession(props: {
     const [model, setModel] = useState('auto')
     const [effort, setEffort] = useState<ClaudeEffort>('auto')
     const [modelReasoningEffort, setModelReasoningEffort] = useState<CodexReasoningEffort>('default')
-    const [yoloMode, setYoloMode] = useState(loadPreferredYoloMode)
+    const [permissionMode, setPermissionMode] = useState<ClaudePermissionMode>(loadPreferredPermissionMode)
     const [sessionType, setSessionType] = useState<SessionType>('simple')
     const [worktreeName, setWorktreeName] = useState('')
     const [directoryCreationConfirmed, setDirectoryCreationConfirmed] = useState(false)
@@ -76,8 +76,8 @@ export function NewSession(props: {
     }, [agent])
 
     useEffect(() => {
-        savePreferredYoloMode(yoloMode)
-    }, [yoloMode])
+        savePreferredPermissionMode(permissionMode)
+    }, [permissionMode])
 
     useEffect(() => {
         if (props.machines.length === 0) return
@@ -289,7 +289,8 @@ export function NewSession(props: {
                 model: resolvedModel,
                 effort: resolvedEffort,
                 modelReasoningEffort: resolvedModelReasoningEffort,
-                yolo: yoloMode,
+                yolo: permissionMode === 'bypassPermissions',
+                permissionMode: agent === 'claude' ? permissionMode : undefined,
                 sessionType,
                 worktreeName: sessionType === 'worktree' ? (worktreeName.trim() || undefined) : undefined
             })
@@ -378,10 +379,11 @@ export function NewSession(props: {
                 isDisabled={isFormDisabled}
                 onChange={setModelReasoningEffort}
             />
-            <YoloToggle
-                yoloMode={yoloMode}
+            <PermissionModeSelector
+                agent={agent}
+                permissionMode={permissionMode}
                 isDisabled={isFormDisabled}
-                onToggle={setYoloMode}
+                onPermissionModeChange={setPermissionMode}
             />
 
             {(error ?? spawnError) ? (

web/src/components/NewSession/preferences.ts

@@ -1,7 +1,9 @@
-import type { AgentType } from './types'
+import type { AgentType, ClaudePermissionMode } from './types'
+import { CLAUDE_PERMISSION_MODES } from '@hapi/protocol'
 
 const AGENT_STORAGE_KEY = 'hapi:newSession:agent'
 const YOLO_STORAGE_KEY = 'hapi:newSession:yolo'
+const PERMISSION_MODE_STORAGE_KEY = 'hapi:newSession:permissionMode'
 
 const VALID_AGENTS: AgentType[] = ['claude', 'codex', 'cursor', 'gemini', 'opencode']
 
@@ -40,3 +42,28 @@ export function savePreferredYoloMode(enabled: boolean): void {
         // Ignore storage errors
     }
 }
+
+export function loadPreferredPermissionMode(): ClaudePermissionMode {
+    try {
+        const stored = localStorage.getItem(PERMISSION_MODE_STORAGE_KEY)
+        if (stored && (CLAUDE_PERMISSION_MODES as readonly string[]).includes(stored)) {
+            return stored as ClaudePermissionMode
+        }
+        // Migrate from legacy yolo toggle
+        if (localStorage.getItem(YOLO_STORAGE_KEY) === 'true') {
+            savePreferredPermissionMode('bypassPermissions')
+            return 'bypassPermissions'
+        }
+    } catch {
+        // Ignore storage errors
+    }
+    return 'default'
+}
+
+export function savePreferredPermissionMode(mode: ClaudePermissionMode): void {
+    try {
+        localStorage.setItem(PERMISSION_MODE_STORAGE_KEY, mode)
+    } catch {
+        // Ignore storage errors
+    }
+}

web/src/components/NewSession/types.ts

@@ -1,4 +1,7 @@
-import { GEMINI_MODEL_PRESETS, GEMINI_MODEL_LABELS } from '@hapi/protocol'
+import { GEMINI_MODEL_PRESETS, GEMINI_MODEL_LABELS, CLAUDE_PERMISSION_MODES, PERMISSION_MODE_LABELS } from '@hapi/protocol'
+import type { ClaudePermissionMode } from '@hapi/protocol'
+
+export type { ClaudePermissionMode }
 
 export type AgentType = 'claude' | 'codex' | 'cursor' | 'gemini' | 'opencode'
 export type SessionType = 'simple' | 'worktree'
@@ -38,3 +41,6 @@ export const CLAUDE_EFFORT_OPTIONS: { value: ClaudeEffort; label: string }[] = [
     { value: 'high', label: 'High' },
     { value: 'max', label: 'Max' },
 ]
+
+export const CLAUDE_PERMISSION_MODE_OPTIONS: { value: ClaudePermissionMode; label: string }[] =
+    CLAUDE_PERMISSION_MODES.map((mode) => ({ value: mode, label: PERMISSION_MODE_LABELS[mode] }))

web/src/hooks/mutations/useSpawnSession.ts

@@ -11,6 +11,7 @@ type SpawnInput = {
     effort?: string
     modelReasoningEffort?: string
     yolo?: boolean
+    permissionMode?: string
     sessionType?: 'simple' | 'worktree'
     worktreeName?: string
 }
@@ -36,7 +37,8 @@ export function useSpawnSession(api: ApiClient | null): {
                 input.yolo,
                 input.sessionType,
                 input.worktreeName,
-                input.effort
+                input.effort,
+                input.permissionMode
             )
         },
         onSuccess: () => {

web/src/lib/locales/en.ts

@@ -112,9 +112,7 @@ export default {
   'newSession.model.optional': 'optional',
   'newSession.model.loadFailed': 'Failed to load Codex models',
   'newSession.reasoningEffort': 'Reasoning effort',
-  'newSession.yolo': 'YOLO mode',
-  'newSession.yolo.title': 'Bypass approvals and sandbox',
-  'newSession.yolo.desc': 'Uses dangerous agent flags when spawning.',
+  'newSession.permissionMode': 'Permission Mode',
   'newSession.create': 'Create',
   'newSession.creating': 'Creating…',
 

web/src/lib/locales/zh-CN.ts

@@ -114,9 +114,7 @@ export default {
   'newSession.model.optional': '可选',
   'newSession.model.loadFailed': '加载 Codex 模型失败',
   'newSession.reasoningEffort': '推理强度',
-  'newSession.yolo': 'YOLO 模式',
-  'newSession.yolo.title': '跳过审批和沙箱',
-  'newSession.yolo.desc': '启动时使用危险的代理标志。',
+  'newSession.permissionMode': '权限模式',
   'newSession.create': '创建',
   'newSession.creating': '创建中…',