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>
   )
 }