feat: Add YOLO mode for rapid prototyping without browser testing

Add a new YOLO (You Only Live Once) mode that skips all browser testing
and regression tests for faster feature iteration during prototyping.

Changes made:

**Core YOLO Mode Implementation:**
- Add --yolo CLI flag to autonomous_agent_demo.py
- Update agent.py to accept yolo_mode parameter and select appropriate prompt
- Modify client.py to conditionally include Playwright MCP server (excluded in YOLO mode)
- Add coding_prompt_yolo.template.md with static analysis only verification
- Add get_coding_prompt_yolo() to prompts.py

**Server/API Updates:**
- Add AgentStartRequest schema with yolo_mode field
- Update AgentStatus to include yolo_mode
- Modify process_manager.py to pass --yolo flag to subprocess
- Update agent router to accept yolo_mode in start request

**UI Updates:**
- Add YOLO toggle button (lightning bolt icon) in AgentControl
- Show YOLO mode indicator when agent is running in YOLO mode
- Add useAgentStatus hook to track current mode
- Update startAgent API to accept yoloMode parameter
- Add YOLO toggle in SpecCreationChat completion flow

**Spec Creation Improvements:**
- Fix create-spec.md to properly replace [FEATURE_COUNT] placeholder
- Add REQUIRED FEATURE COUNT section to initializer_prompt.template.md
- Fix spec_chat_session.py to create security settings file for Claude SDK
- Delete app_spec.txt before spec creation to allow fresh creation

**Documentation:**
- Add YOLO mode section to CLAUDE.md with usage examples
- Add checkpoint.md slash command for creating detailed commits

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

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

ui/src/App.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback } from 'react'
-import { useProjects, useFeatures } from './hooks/useProjects'
+import { useProjects, useFeatures, useAgentStatus } from './hooks/useProjects'
 import { useProjectWebSocket } from './hooks/useWebSocket'
 import { useFeatureSound } from './hooks/useFeatureSound'
 import { useCelebration } from './hooks/useCelebration'
@@ -34,6 +34,7 @@ function App() {
 
   const { data: projects, isLoading: projectsLoading } = useProjects()
   const { data: features } = useFeatures(selectedProject)
+  const { data: agentStatusData } = useAgentStatus(selectedProject)
   const wsState = useProjectWebSocket(selectedProject)
 
   // Play sounds when features move between columns
@@ -151,6 +152,7 @@ function App() {
                   <AgentControl
                     projectName={selectedProject}
                     status={wsState.agentStatus}
+                    yoloMode={agentStatusData?.yolo_mode ?? false}
                   />
                 </>
               )}

ui/src/components/AgentControl.tsx

@@ -1,4 +1,5 @@
-import { Play, Pause, Square, Loader2 } from 'lucide-react'
+import { useState } from 'react'
+import { Play, Pause, Square, Loader2, Zap } from 'lucide-react'
 import {
   useStartAgent,
   useStopAgent,
@@ -10,9 +11,12 @@ 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 }: AgentControlProps) {
+export function AgentControl({ projectName, status, yoloMode = false }: AgentControlProps) {
+  const [yoloEnabled, setYoloEnabled] = useState(false)
+
   const startAgent = useStartAgent(projectName)
   const stopAgent = useStopAgent(projectName)
   const pauseAgent = usePauseAgent(projectName)
@@ -24,7 +28,7 @@ export function AgentControl({ projectName, status }: AgentControlProps) {
     pauseAgent.isPending ||
     resumeAgent.isPending
 
-  const handleStart = () => startAgent.mutate()
+  const handleStart = () => startAgent.mutate(yoloEnabled)
   const handleStop = () => stopAgent.mutate()
   const handlePause = () => pauseAgent.mutate()
   const handleResume = () => resumeAgent.mutate()
@@ -34,21 +38,43 @@ export function AgentControl({ projectName, status }: AgentControlProps) {
       {/* 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>
+      )}
+
       {/* Control Buttons */}
       <div className="flex gap-1">
         {status === 'stopped' || status === 'crashed' ? (
-          <button
-            onClick={handleStart}
-            disabled={isLoading}
-            className="neo-btn neo-btn-success text-sm py-2 px-3"
-            title="Start Agent"
-          >
-            {isLoading ? (
-              <Loader2 size={18} className="animate-spin" />
-            ) : (
-              <Play size={18} />
-            )}
-          </button>
+          <>
+            {/* 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

ui/src/components/NewProjectModal.tsx

@@ -39,6 +39,7 @@ export function NewProjectModal({
   const [error, setError] = useState<string | null>(null)
   const [initializerStatus, setInitializerStatus] = useState<InitializerStatus>('idle')
   const [initializerError, setInitializerError] = useState<string | null>(null)
+  const [yoloModeSelected, setYoloModeSelected] = useState(false)
 
   // Suppress unused variable warning - specMethod may be used in future
   void _specMethod
@@ -116,11 +117,13 @@ export function NewProjectModal({
     }
   }
 
-  const handleSpecComplete = async () => {
+  const handleSpecComplete = async (_specPath: string, yoloMode: boolean = false) => {
+    // Save yoloMode for retry
+    setYoloModeSelected(yoloMode)
     // Auto-start the initializer agent
     setInitializerStatus('starting')
     try {
-      await startAgent(projectName.trim())
+      await startAgent(projectName.trim(), yoloMode)
       // Success - navigate to project
       setStep('complete')
       setTimeout(() => {
@@ -136,7 +139,7 @@ export function NewProjectModal({
   const handleRetryInitializer = () => {
     setInitializerError(null)
     setInitializerStatus('idle')
-    handleSpecComplete()
+    handleSpecComplete('', yoloModeSelected)
   }
 
   const handleChatCancel = () => {
@@ -153,6 +156,7 @@ export function NewProjectModal({
     setError(null)
     setInitializerStatus('idle')
     setInitializerError(null)
+    setYoloModeSelected(false)
     onClose()
   }
 

ui/src/components/SpecCreationChat.tsx

@@ -6,7 +6,7 @@
  */
 
 import { useEffect, useRef, useState } from 'react'
-import { Send, X, CheckCircle2, AlertCircle, Wifi, WifiOff, RotateCcw, Loader2, ArrowRight } from 'lucide-react'
+import { Send, X, CheckCircle2, AlertCircle, Wifi, WifiOff, RotateCcw, Loader2, ArrowRight, Zap } from 'lucide-react'
 import { useSpecChat } from '../hooks/useSpecChat'
 import { ChatMessage } from './ChatMessage'
 import { QuestionOptions } from './QuestionOptions'
@@ -16,7 +16,7 @@ type InitializerStatus = 'idle' | 'starting' | 'error'
 
 interface SpecCreationChatProps {
   projectName: string
-  onComplete: (specPath: string) => void
+  onComplete: (specPath: string, yoloMode?: boolean) => void
   onCancel: () => void
   initializerStatus?: InitializerStatus
   initializerError?: string | null
@@ -33,6 +33,7 @@ export function SpecCreationChat({
 }: SpecCreationChatProps) {
   const [input, setInput] = useState('')
   const [error, setError] = useState<string | null>(null)
+  const [yoloEnabled, setYoloEnabled] = useState(false)
   const messagesEndRef = useRef<HTMLDivElement>(null)
   const inputRef = useRef<HTMLInputElement>(null)
 
@@ -257,7 +258,9 @@ export function SpecCreationChat({
               {initializerStatus === 'starting' ? (
                 <>
                   <Loader2 size={20} className="animate-spin" />
-                  <span className="font-bold">Starting agent...</span>
+                  <span className="font-bold">
+                    Starting agent{yoloEnabled ? ' (YOLO mode)' : ''}...
+                  </span>
                 </>
               ) : initializerStatus === 'error' ? (
                 <>
@@ -284,13 +287,28 @@ export function SpecCreationChat({
                 </button>
               )}
               {initializerStatus === 'idle' && (
-                <button
-                  onClick={() => onComplete('')}
-                  className="neo-btn neo-btn-primary"
-                >
-                  Continue to Project
-                  <ArrowRight size={16} />
-                </button>
+                <>
+                  {/* YOLO Mode Toggle */}
+                  <button
+                    onClick={() => setYoloEnabled(!yoloEnabled)}
+                    className={`neo-btn text-sm py-2 px-3 ${
+                      yoloEnabled ? 'neo-btn-warning' : 'bg-white'
+                    }`}
+                    title="YOLO Mode: Skip testing for rapid prototyping"
+                  >
+                    <Zap size={16} className={yoloEnabled ? 'text-yellow-900' : ''} />
+                    <span className={yoloEnabled ? 'text-yellow-900 font-bold' : ''}>
+                      YOLO
+                    </span>
+                  </button>
+                  <button
+                    onClick={() => onComplete('', yoloEnabled)}
+                    className="neo-btn neo-btn-primary"
+                  >
+                    Continue to Project
+                    <ArrowRight size={16} />
+                  </button>
+                </>
               )}
             </div>
           </div>

ui/src/hooks/useProjects.ts

@@ -111,7 +111,7 @@ export function useStartAgent(projectName: string) {
   const queryClient = useQueryClient()
 
   return useMutation({
-    mutationFn: () => api.startAgent(projectName),
+    mutationFn: (yoloMode: boolean = false) => api.startAgent(projectName, yoloMode),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['agent-status', projectName] })
     },

ui/src/lib/api.ts

@@ -117,9 +117,13 @@ export async function getAgentStatus(projectName: string): Promise<AgentStatusRe
   return fetchJSON(`/projects/${encodeURIComponent(projectName)}/agent/status`)
 }
 
-export async function startAgent(projectName: string): Promise<AgentActionResponse> {
+export async function startAgent(
+  projectName: string,
+  yoloMode: boolean = false
+): Promise<AgentActionResponse> {
   return fetchJSON(`/projects/${encodeURIComponent(projectName)}/agent/start`, {
     method: 'POST',
+    body: JSON.stringify({ yolo_mode: yoloMode }),
   })
 }
 

ui/src/lib/types.ts

@@ -89,6 +89,7 @@ export interface AgentStatusResponse {
   status: AgentStatus
   pid: number | null
   started_at: string | null
+  yolo_mode: boolean
 }
 
 export interface AgentActionResponse {