feat: Add global settings modal and simplify agent controls

Adds a settings system for global configuration with YOLO mode toggle and
model selection. Simplifies the agent control UI by removing redundant
status indicator and pause functionality.

## Settings System
- New SettingsModal with YOLO mode toggle and model selection
- Settings persisted in SQLite (registry.db) - shared across all projects
- Models fetched from API endpoint (/api/settings/models)
- Single source of truth for models in registry.py - easy to add new models
- Optimistic UI updates with rollback on error

## Agent Control Simplification
- Removed StatusIndicator ("STOPPED"/"RUNNING" label) - redundant
- Removed Pause/Resume buttons - just Start/Stop toggle now
- Start button shows flame icon with fiery gradient when YOLO mode enabled

## Code Review Fixes
- Added focus trap to SettingsModal for accessibility
- Fixed YOLO button color contrast (WCAG AA compliance)
- Added model validation to AgentStartRequest schema
- Added model to AgentStatus response
- Added aria-labels to all icon-only buttons
- Added role="radiogroup" to model selection
- Added loading indicator during settings save
- Added SQLite timeout (30s) and retry logic with exponential backoff
- Added thread-safe database engine initialization
- Added orphaned lock file cleanup on server startup

## Files Changed
- registry.py: Model config, Settings CRUD, SQLite improvements
- server/routers/settings.py: New settings API
- server/schemas.py: Settings schemas with validation
- server/services/process_manager.py: Model param, orphan cleanup
- ui/src/components/SettingsModal.tsx: New modal component
- ui/src/components/AgentControl.tsx: Simplified to Start/Stop only

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

ui/src/components/AgentControl.tsx

@@ -1,170 +1,66 @@
-import { useState } from 'react'
-import { Play, Pause, Square, Loader2, Zap } from 'lucide-react'
+import { Play, Square, Loader2, Flame } from 'lucide-react'
 import {
   useStartAgent,
   useStopAgent,
-  usePauseAgent,
-  useResumeAgent,
+  useSettings,
 } from '../hooks/useProjects'
 import type { AgentStatus } from '../lib/types'
 
 interface AgentControlProps {
   projectName: string
   status: AgentStatus
-  yoloMode?: boolean  // From server status - whether currently running in YOLO mode
 }
 
-export function AgentControl({ projectName, status, yoloMode = false }: AgentControlProps) {
-  const [yoloEnabled, setYoloEnabled] = useState(false)
+export function AgentControl({ projectName, status }: AgentControlProps) {
+  const { data: settings } = useSettings()
+  const yoloMode = settings?.yolo_mode ?? false
 
   const startAgent = useStartAgent(projectName)
   const stopAgent = useStopAgent(projectName)
-  const pauseAgent = usePauseAgent(projectName)
-  const resumeAgent = useResumeAgent(projectName)
 
-  const isLoading =
-    startAgent.isPending ||
-    stopAgent.isPending ||
-    pauseAgent.isPending ||
-    resumeAgent.isPending
+  const isLoading = startAgent.isPending || stopAgent.isPending
 
-  const handleStart = () => startAgent.mutate(yoloEnabled)
+  const handleStart = () => startAgent.mutate(yoloMode)
   const handleStop = () => stopAgent.mutate()
-  const handlePause = () => pauseAgent.mutate()
-  const handleResume = () => resumeAgent.mutate()
+
+  // Simplified: either show Start (when stopped/crashed) or Stop (when running/paused)
+  const isStopped = status === 'stopped' || status === 'crashed'
 
   return (
-    <div className="flex items-center gap-2">
-      {/* Status Indicator */}
-      <StatusIndicator status={status} />
-
-      {/* YOLO Mode Indicator - shown when running in YOLO mode */}
-      {(status === 'running' || status === 'paused') && yoloMode && (
-        <div className="flex items-center gap-1 px-2 py-1 bg-[var(--color-neo-pending)] border-3 border-[var(--color-neo-border)]">
-          <Zap size={14} className="text-yellow-900" />
-          <span className="font-display font-bold text-xs uppercase text-yellow-900">
-            YOLO
-          </span>
-        </div>
+    <div className="flex items-center">
+      {isStopped ? (
+        <button
+          onClick={handleStart}
+          disabled={isLoading}
+          className={`neo-btn text-sm py-2 px-3 ${
+            yoloMode ? 'neo-btn-yolo' : 'neo-btn-success'
+          }`}
+          title={yoloMode ? 'Start Agent (YOLO Mode)' : 'Start Agent'}
+          aria-label={yoloMode ? 'Start Agent in YOLO Mode' : 'Start Agent'}
+        >
+          {isLoading ? (
+            <Loader2 size={18} className="animate-spin" />
+          ) : yoloMode ? (
+            <Flame size={18} />
+          ) : (
+            <Play size={18} />
+          )}
+        </button>
+      ) : (
+        <button
+          onClick={handleStop}
+          disabled={isLoading}
+          className="neo-btn neo-btn-danger text-sm py-2 px-3"
+          title="Stop Agent"
+          aria-label="Stop Agent"
+        >
+          {isLoading ? (
+            <Loader2 size={18} className="animate-spin" />
+          ) : (
+            <Square size={18} />
+          )}
+        </button>
       )}
-
-      {/* Control Buttons */}
-      <div className="flex gap-1">
-        {status === 'stopped' || status === 'crashed' ? (
-          <>
-            {/* YOLO Toggle - only shown when stopped */}
-            <button
-              onClick={() => setYoloEnabled(!yoloEnabled)}
-              className={`neo-btn text-sm py-2 px-3 ${
-                yoloEnabled ? 'neo-btn-warning' : 'neo-btn-secondary'
-              }`}
-              title="YOLO Mode: Skip testing for rapid prototyping"
-            >
-              <Zap size={18} className={yoloEnabled ? 'text-yellow-900' : ''} />
-            </button>
-            <button
-              onClick={handleStart}
-              disabled={isLoading}
-              className="neo-btn neo-btn-success text-sm py-2 px-3"
-              title={yoloEnabled ? "Start Agent (YOLO Mode)" : "Start Agent"}
-            >
-              {isLoading ? (
-                <Loader2 size={18} className="animate-spin" />
-              ) : (
-                <Play size={18} />
-              )}
-            </button>
-          </>
-        ) : status === 'running' ? (
-          <>
-            <button
-              onClick={handlePause}
-              disabled={isLoading}
-              className="neo-btn neo-btn-warning text-sm py-2 px-3"
-              title="Pause Agent"
-            >
-              {isLoading ? (
-                <Loader2 size={18} className="animate-spin" />
-              ) : (
-                <Pause size={18} />
-              )}
-            </button>
-            <button
-              onClick={handleStop}
-              disabled={isLoading}
-              className="neo-btn neo-btn-danger text-sm py-2 px-3"
-              title="Stop Agent"
-            >
-              <Square size={18} />
-            </button>
-          </>
-        ) : status === 'paused' ? (
-          <>
-            <button
-              onClick={handleResume}
-              disabled={isLoading}
-              className="neo-btn neo-btn-success text-sm py-2 px-3"
-              title="Resume Agent"
-            >
-              {isLoading ? (
-                <Loader2 size={18} className="animate-spin" />
-              ) : (
-                <Play size={18} />
-              )}
-            </button>
-            <button
-              onClick={handleStop}
-              disabled={isLoading}
-              className="neo-btn neo-btn-danger text-sm py-2 px-3"
-              title="Stop Agent"
-            >
-              <Square size={18} />
-            </button>
-          </>
-        ) : null}
-      </div>
-    </div>
-  )
-}
-
-function StatusIndicator({ status }: { status: AgentStatus }) {
-  const statusConfig = {
-    stopped: {
-      color: 'var(--color-neo-text-secondary)',
-      label: 'Stopped',
-      pulse: false,
-    },
-    running: {
-      color: 'var(--color-neo-done)',
-      label: 'Running',
-      pulse: true,
-    },
-    paused: {
-      color: 'var(--color-neo-pending)',
-      label: 'Paused',
-      pulse: false,
-    },
-    crashed: {
-      color: 'var(--color-neo-danger)',
-      label: 'Crashed',
-      pulse: true,
-    },
-  }
-
-  const config = statusConfig[status]
-
-  return (
-    <div className="flex items-center gap-2 px-3 py-2 bg-white border-3 border-[var(--color-neo-border)]">
-      <span
-        className={`w-3 h-3 rounded-full ${config.pulse ? 'animate-pulse' : ''}`}
-        style={{ backgroundColor: config.color }}
-      />
-      <span
-        className="font-display font-bold text-sm uppercase"
-        style={{ color: config.color }}
-      >
-        {config.label}
-      </span>
     </div>
   )
 }

ui/src/components/SettingsModal.tsx

@@ -0,0 +1,213 @@
+import { useEffect, useRef } from 'react'
+import { X, Loader2, AlertCircle } from 'lucide-react'
+import { useSettings, useUpdateSettings, useAvailableModels } from '../hooks/useProjects'
+
+interface SettingsModalProps {
+  onClose: () => void
+}
+
+export function SettingsModal({ onClose }: SettingsModalProps) {
+  const { data: settings, isLoading, isError, refetch } = useSettings()
+  const { data: modelsData } = useAvailableModels()
+  const updateSettings = useUpdateSettings()
+  const modalRef = useRef<HTMLDivElement>(null)
+  const closeButtonRef = useRef<HTMLButtonElement>(null)
+
+  // Focus trap - keep focus within modal
+  useEffect(() => {
+    const modal = modalRef.current
+    if (!modal) return
+
+    // Focus the close button when modal opens
+    closeButtonRef.current?.focus()
+
+    const focusableElements = modal.querySelectorAll<HTMLElement>(
+      'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+    )
+    const firstElement = focusableElements[0]
+    const lastElement = focusableElements[focusableElements.length - 1]
+
+    const handleTabKey = (e: KeyboardEvent) => {
+      if (e.key !== 'Tab') return
+
+      if (e.shiftKey) {
+        if (document.activeElement === firstElement) {
+          e.preventDefault()
+          lastElement?.focus()
+        }
+      } else {
+        if (document.activeElement === lastElement) {
+          e.preventDefault()
+          firstElement?.focus()
+        }
+      }
+    }
+
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose()
+      }
+    }
+
+    document.addEventListener('keydown', handleTabKey)
+    document.addEventListener('keydown', handleEscape)
+
+    return () => {
+      document.removeEventListener('keydown', handleTabKey)
+      document.removeEventListener('keydown', handleEscape)
+    }
+  }, [onClose])
+
+  const handleYoloToggle = () => {
+    if (settings && !updateSettings.isPending) {
+      updateSettings.mutate({ yolo_mode: !settings.yolo_mode })
+    }
+  }
+
+  const handleModelChange = (modelId: string) => {
+    if (!updateSettings.isPending) {
+      updateSettings.mutate({ model: modelId })
+    }
+  }
+
+  const models = modelsData?.models ?? []
+  const isSaving = updateSettings.isPending
+
+  return (
+    <div
+      className="neo-modal-backdrop"
+      onClick={onClose}
+      role="presentation"
+    >
+      <div
+        ref={modalRef}
+        className="neo-modal w-full max-w-sm p-6"
+        onClick={(e) => e.stopPropagation()}
+        role="dialog"
+        aria-labelledby="settings-title"
+        aria-modal="true"
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between mb-6">
+          <h2 id="settings-title" className="font-display text-xl font-bold">
+            Settings
+            {isSaving && (
+              <Loader2 className="inline-block ml-2 animate-spin" size={16} />
+            )}
+          </h2>
+          <button
+            ref={closeButtonRef}
+            onClick={onClose}
+            className="neo-btn neo-btn-ghost p-2"
+            aria-label="Close settings"
+          >
+            <X size={20} />
+          </button>
+        </div>
+
+        {/* Loading State */}
+        {isLoading && (
+          <div className="flex items-center justify-center py-8">
+            <Loader2 className="animate-spin" size={24} />
+            <span className="ml-2">Loading settings...</span>
+          </div>
+        )}
+
+        {/* Error State */}
+        {isError && (
+          <div className="p-4 bg-[var(--color-neo-danger)] text-white border-3 border-[var(--color-neo-border)] mb-4">
+            <div className="flex items-center gap-2">
+              <AlertCircle size={18} />
+              <span>Failed to load settings</span>
+            </div>
+            <button
+              onClick={() => refetch()}
+              className="mt-2 underline text-sm"
+            >
+              Retry
+            </button>
+          </div>
+        )}
+
+        {/* Settings Content */}
+        {settings && !isLoading && (
+          <div className="space-y-6">
+            {/* YOLO Mode Toggle */}
+            <div>
+              <div className="flex items-center justify-between">
+                <div>
+                  <label
+                    id="yolo-label"
+                    className="font-display font-bold text-base"
+                  >
+                    YOLO Mode
+                  </label>
+                  <p className="text-sm text-[var(--color-neo-text-secondary)] mt-1">
+                    Skip testing for rapid prototyping
+                  </p>
+                </div>
+                <button
+                  onClick={handleYoloToggle}
+                  disabled={isSaving}
+                  className={`relative w-14 h-8 rounded-none border-3 border-[var(--color-neo-border)] transition-colors ${
+                    settings.yolo_mode
+                      ? 'bg-[var(--color-neo-pending)]'
+                      : 'bg-white'
+                  } ${isSaving ? 'opacity-50 cursor-not-allowed' : ''}`}
+                  role="switch"
+                  aria-checked={settings.yolo_mode}
+                  aria-labelledby="yolo-label"
+                >
+                  <span
+                    className={`absolute top-1 w-5 h-5 bg-[var(--color-neo-border)] transition-transform ${
+                      settings.yolo_mode ? 'left-7' : 'left-1'
+                    }`}
+                  />
+                </button>
+              </div>
+            </div>
+
+            {/* Model Selection - Radio Group */}
+            <div>
+              <label
+                id="model-label"
+                className="font-display font-bold text-base block mb-2"
+              >
+                Model
+              </label>
+              <div
+                className="flex border-3 border-[var(--color-neo-border)]"
+                role="radiogroup"
+                aria-labelledby="model-label"
+              >
+                {models.map((model) => (
+                  <button
+                    key={model.id}
+                    onClick={() => handleModelChange(model.id)}
+                    disabled={isSaving}
+                    role="radio"
+                    aria-checked={settings.model === model.id}
+                    className={`flex-1 py-3 px-4 font-display font-bold text-sm transition-colors ${
+                      settings.model === model.id
+                        ? 'bg-[var(--color-neo-accent)] text-white'
+                        : 'bg-white text-[var(--color-neo-text)] hover:bg-gray-100'
+                    } ${isSaving ? 'opacity-50 cursor-not-allowed' : ''}`}
+                  >
+                    {model.name}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            {/* Update Error */}
+            {updateSettings.isError && (
+              <div className="p-3 bg-red-50 border-3 border-red-200 text-red-700 text-sm">
+                Failed to save settings. Please try again.
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}