()
+ if (DOC_SECTIONS.length > 0) {
+ initial.add(DOC_SECTIONS[0].id)
+ }
+ return initial
+ })
+
+ const normalizedQuery = searchQuery.trim().toLowerCase()
+
+ // Filter sections based on search query, matching against section title,
+ // subsection titles, and keywords
+ const filteredSections = useMemo(() => {
+ if (!normalizedQuery) {
+ return DOC_SECTIONS
+ }
+
+ return DOC_SECTIONS.filter((section) => {
+ // Check section title
+ if (section.title.toLowerCase().includes(normalizedQuery)) return true
+
+ // Check keywords
+ if (section.keywords.some((kw) => kw.toLowerCase().includes(normalizedQuery))) return true
+
+ // Check subsection titles
+ if (section.subsections.some((sub) => sub.title.toLowerCase().includes(normalizedQuery))) {
+ return true
+ }
+
+ return false
+ })
+ }, [normalizedQuery])
+
+ // Determine which sections should appear expanded:
+ // - When searching: auto-expand all matching sections
+ // - Otherwise: use manual expanded state, plus expand whichever section contains the active item
+ const isSectionExpanded = (sectionId: string): boolean => {
+ if (normalizedQuery) return true
+
+ if (expandedSections.has(sectionId)) return true
+
+ // Also expand the section that contains the currently active subsection
+ if (activeSectionId) {
+ const section = DOC_SECTIONS.find((s) => s.id === sectionId)
+ if (section) {
+ if (section.id === activeSectionId) return true
+ if (section.subsections.some((sub) => sub.id === activeSectionId)) return true
+ }
+ }
+
+ return false
+ }
+
+ const toggleSection = (sectionId: string) => {
+ setExpandedSections((prev) => {
+ const next = new Set(prev)
+ if (next.has(sectionId)) {
+ next.delete(sectionId)
+ } else {
+ next.add(sectionId)
+ }
+ return next
+ })
+ }
+
+ /**
+ * Checks whether a given id (section or subsection) is the currently active item.
+ * Active items get a highlighted visual treatment.
+ */
+ const isActive = (id: string): boolean => activeSectionId === id
+
+ /**
+ * Checks whether a section contains the active subsection.
+ * Used to highlight parent sections in a muted way.
+ */
+ const sectionContainsActive = (section: DocSection): boolean => {
+ if (!activeSectionId) return false
+ return section.subsections.some((sub) => sub.id === activeSectionId)
+ }
+
+ const handleItemClick = (id: string) => {
+ onSectionClick(id)
+ // On mobile, close the sidebar after navigation
+ onMobileClose?.()
+ }
+
+ return (
+
+ )
+}
diff --git a/ui/src/components/docs/docsData.ts b/ui/src/components/docs/docsData.ts
new file mode 100644
index 0000000..d7b2875
--- /dev/null
+++ b/ui/src/components/docs/docsData.ts
@@ -0,0 +1,222 @@
+import {
+ Rocket,
+ FileText,
+ FolderTree,
+ LayoutGrid,
+ Bot,
+ Settings,
+ Terminal,
+ MessageSquare,
+ Clock,
+ Palette,
+ Shield,
+ Wrench,
+ HelpCircle,
+ type LucideIcon,
+} from 'lucide-react'
+
+export interface DocSubsection {
+ id: string
+ title: string
+}
+
+export interface DocSection {
+ id: string
+ title: string
+ icon: LucideIcon
+ subsections: DocSubsection[]
+ keywords: string[]
+}
+
+export const DOC_SECTIONS: DocSection[] = [
+ {
+ id: 'getting-started',
+ title: 'Getting Started',
+ icon: Rocket,
+ subsections: [
+ { id: 'what-is-autocoder', title: 'What is AutoCoder?' },
+ { id: 'quick-start', title: 'Quick Start' },
+ { id: 'creating-a-project', title: 'Creating a New Project' },
+ { id: 'existing-project', title: 'Adding to an Existing Project' },
+ { id: 'system-requirements', title: 'System Requirements' },
+ ],
+ keywords: ['install', 'setup', 'start', 'begin', 'new', 'requirements', 'prerequisites'],
+ },
+ {
+ id: 'app-spec-setup',
+ title: 'App Spec & Project Setup',
+ icon: FileText,
+ subsections: [
+ { id: 'what-is-app-spec', title: 'What is an App Spec?' },
+ { id: 'creating-spec-with-claude', title: 'Creating a Spec with Claude' },
+ { id: 'writing-spec-manually', title: 'Writing a Spec Manually' },
+ { id: 'initializer-agent', title: 'The Initializer Agent' },
+ { id: 'starting-after-spec', title: 'Starting After Spec Creation' },
+ ],
+ keywords: ['spec', 'specification', 'xml', 'app_spec', 'initializer', 'prompt', 'template'],
+ },
+ {
+ id: 'project-structure',
+ title: 'Target Project Structure',
+ icon: FolderTree,
+ subsections: [
+ { id: 'autocoder-directory', title: '.autocoder/ Directory Layout' },
+ { id: 'features-db', title: 'Features Database' },
+ { id: 'prompts-directory', title: 'Prompts Directory' },
+ { id: 'allowed-commands-yaml', title: 'Allowed Commands Config' },
+ { id: 'claude-md', title: 'CLAUDE.md Convention' },
+ { id: 'legacy-migration', title: 'Legacy Layout Migration' },
+ { id: 'claude-inheritance', title: 'Claude Inheritance' },
+ ],
+ keywords: ['folder', 'directory', 'structure', 'layout', 'files', 'database', 'sqlite', 'migration'],
+ },
+ {
+ id: 'features-kanban',
+ title: 'Features & Kanban Board',
+ icon: LayoutGrid,
+ subsections: [
+ { id: 'kanban-overview', title: 'Kanban Board Overview' },
+ { id: 'feature-cards', title: 'Feature Cards' },
+ { id: 'dependency-graph', title: 'Dependency Graph View' },
+ { id: 'adding-features', title: 'Adding Features' },
+ { id: 'editing-features', title: 'Editing & Deleting Features' },
+ { id: 'feature-dependencies', title: 'Feature Dependencies' },
+ { id: 'expanding-with-ai', title: 'Expanding Project with AI' },
+ { id: 'feature-priority', title: 'Priority & Ordering' },
+ ],
+ keywords: ['kanban', 'board', 'feature', 'card', 'dependency', 'graph', 'priority', 'pending', 'progress', 'done'],
+ },
+ {
+ id: 'agent-system',
+ title: 'Agent System',
+ icon: Bot,
+ subsections: [
+ { id: 'maestro-orchestrator', title: 'Maestro: The Orchestrator' },
+ { id: 'coding-agents', title: 'Coding Agents' },
+ { id: 'testing-agents', title: 'Testing Agents' },
+ { id: 'agent-lifecycle', title: 'Agent Lifecycle' },
+ { id: 'concurrency', title: 'Concurrency Control' },
+ { id: 'mission-control', title: 'Agent Mission Control' },
+ { id: 'agent-mascots', title: 'Agent Mascots & States' },
+ { id: 'agent-logs', title: 'Viewing Agent Logs' },
+ { id: 'process-limits', title: 'Process Limits' },
+ ],
+ keywords: ['agent', 'maestro', 'orchestrator', 'coding', 'testing', 'parallel', 'concurrency', 'mascot', 'spark', 'fizz', 'octo', 'batch'],
+ },
+ {
+ id: 'settings-config',
+ title: 'Settings & Configuration',
+ icon: Settings,
+ subsections: [
+ { id: 'opening-settings', title: 'Opening Settings' },
+ { id: 'yolo-mode', title: 'YOLO Mode' },
+ { id: 'headless-browser', title: 'Headless Browser' },
+ { id: 'model-selection', title: 'Model Selection' },
+ { id: 'regression-agents', title: 'Regression Agents' },
+ { id: 'features-per-agent', title: 'Features per Agent (Batch Size)' },
+ { id: 'concurrency-setting', title: 'Concurrency' },
+ { id: 'settings-persistence', title: 'How Settings are Persisted' },
+ ],
+ keywords: ['settings', 'config', 'yolo', 'headless', 'model', 'opus', 'sonnet', 'haiku', 'batch', 'regression'],
+ },
+ {
+ id: 'developer-tools',
+ title: 'Developer Tools',
+ icon: Terminal,
+ subsections: [
+ { id: 'debug-panel', title: 'Debug Panel' },
+ { id: 'agent-logs-tab', title: 'Agent Logs Tab' },
+ { id: 'dev-server-logs', title: 'Dev Server Logs Tab' },
+ { id: 'terminal', title: 'Terminal' },
+ { id: 'dev-server-control', title: 'Dev Server Control' },
+ { id: 'per-agent-logs', title: 'Per-Agent Logs' },
+ ],
+ keywords: ['debug', 'terminal', 'logs', 'dev server', 'console', 'xterm', 'shell'],
+ },
+ {
+ id: 'ai-assistant',
+ title: 'AI Assistant',
+ icon: MessageSquare,
+ subsections: [
+ { id: 'what-is-assistant', title: 'What is the Assistant?' },
+ { id: 'opening-assistant', title: 'Opening the Assistant' },
+ { id: 'assistant-capabilities', title: 'What It Can Do' },
+ { id: 'assistant-limitations', title: 'What It Cannot Do' },
+ { id: 'conversation-history', title: 'Conversation History' },
+ ],
+ keywords: ['assistant', 'ai', 'chat', 'help', 'question', 'conversation'],
+ },
+ {
+ id: 'scheduling',
+ title: 'Scheduling',
+ icon: Clock,
+ subsections: [
+ { id: 'what-scheduling-does', title: 'What Scheduling Does' },
+ { id: 'creating-schedule', title: 'Creating a Schedule' },
+ { id: 'schedule-settings', title: 'Schedule Settings' },
+ { id: 'schedule-overrides', title: 'Schedule Overrides' },
+ { id: 'crash-recovery', title: 'Crash Recovery' },
+ ],
+ keywords: ['schedule', 'timer', 'automated', 'cron', 'run', 'recurring', 'utc'],
+ },
+ {
+ id: 'appearance-themes',
+ title: 'Appearance & Themes',
+ icon: Palette,
+ subsections: [
+ { id: 'themes-overview', title: 'Themes Overview' },
+ { id: 'dark-light-mode', title: 'Dark & Light Mode' },
+ { id: 'theme-selector', title: 'Theme Selector' },
+ { id: 'keyboard-shortcuts', title: 'Keyboard Shortcuts' },
+ ],
+ keywords: ['theme', 'dark', 'light', 'color', 'appearance', 'twitter', 'claude', 'neo', 'brutalism', 'retro', 'aurora', 'business', 'keyboard', 'shortcut'],
+ },
+ {
+ id: 'security',
+ title: 'Security',
+ icon: Shield,
+ subsections: [
+ { id: 'command-validation', title: 'Command Validation Overview' },
+ { id: 'command-hierarchy', title: 'Command Hierarchy' },
+ { id: 'hardcoded-blocklist', title: 'Hardcoded Blocklist' },
+ { id: 'global-allowlist', title: 'Global Allowlist' },
+ { id: 'project-allowlist', title: 'Per-Project Allowed Commands' },
+ { id: 'org-config', title: 'Organization Configuration' },
+ { id: 'extra-read-paths', title: 'Extra Read Paths' },
+ { id: 'filesystem-sandboxing', title: 'Filesystem Sandboxing' },
+ ],
+ keywords: ['security', 'sandbox', 'allowlist', 'blocklist', 'command', 'bash', 'permission', 'filesystem'],
+ },
+ {
+ id: 'advanced-config',
+ title: 'Advanced Configuration',
+ icon: Wrench,
+ subsections: [
+ { id: 'vertex-ai', title: 'Vertex AI Setup' },
+ { id: 'ollama', title: 'Ollama Local Models' },
+ { id: 'env-variables', title: 'Environment Variables' },
+ { id: 'cli-arguments', title: 'CLI Arguments' },
+ { id: 'webhooks', title: 'Webhook Support' },
+ { id: 'project-registry', title: 'Project Registry' },
+ ],
+ keywords: ['vertex', 'gcloud', 'ollama', 'local', 'env', 'environment', 'cli', 'webhook', 'n8n', 'registry', 'api'],
+ },
+ {
+ id: 'faq',
+ title: 'FAQ & Troubleshooting',
+ icon: HelpCircle,
+ subsections: [
+ { id: 'faq-new-project', title: 'Starting a New Project' },
+ { id: 'faq-existing-project', title: 'Adding to Existing Project' },
+ { id: 'faq-agent-crash', title: 'Agent Crashes' },
+ { id: 'faq-custom-commands', title: 'Custom Bash Commands' },
+ { id: 'faq-blocked-features', title: 'Blocked Features' },
+ { id: 'faq-parallel', title: 'Running in Parallel' },
+ { id: 'faq-local-model', title: 'Using Local Models' },
+ { id: 'faq-reset', title: 'Resetting a Project' },
+ { id: 'faq-agent-types', title: 'Coding vs Testing Agents' },
+ { id: 'faq-real-time', title: 'Monitoring in Real Time' },
+ ],
+ keywords: ['faq', 'troubleshoot', 'help', 'problem', 'issue', 'fix', 'error', 'stuck', 'reset', 'crash'],
+ },
+]
diff --git a/ui/src/components/docs/sections/AIAssistant.tsx b/ui/src/components/docs/sections/AIAssistant.tsx
new file mode 100644
index 0000000..cceb297
--- /dev/null
+++ b/ui/src/components/docs/sections/AIAssistant.tsx
@@ -0,0 +1,75 @@
+/**
+ * AIAssistant Documentation Section
+ *
+ * Covers the project assistant: what it is, how to open it,
+ * its capabilities and limitations, and conversation history.
+ */
+
+import { Badge } from '@/components/ui/badge'
+
+export function AIAssistant() {
+ return (
+
+ {/* What is the Assistant? */}
+
+ What is the Assistant?
+
+
+ The AI Assistant is a read-only project helper that can answer questions about your project, search
+ code, view progress, and help you understand what’s happening — without making any changes.
+
+
+ {/* Opening the Assistant */}
+
+ Opening the Assistant
+
+
+ -
+ Press A to toggle the assistant panel
+
+ - Or click the floating action button (chat bubble) in the bottom-right corner
+ - The panel slides in from the right side
+
+
+ {/* What It Can Do */}
+
+ What It Can Do
+
+
+ - Read and search your project’s source code
+ - Answer questions about code architecture and implementation
+ - View feature progress and status
+ - Create new features based on your description
+ - Explain what agents have done or are currently doing
+ - Help debug issues by analyzing code and logs
+
+
+ {/* What It Cannot Do */}
+
+ What It Cannot Do
+
+
+ - Modify files (read-only access)
+ - Run bash commands
+ - Mark features as passing/failing
+ - Start or stop agents
+ - Access external APIs or the internet
+
+
+ This is a deliberate security design — the assistant is a safe way to interact with your project
+ without risk of unintended changes.
+
+
+ {/* Conversation History */}
+
+ Conversation History
+
+
+ - Conversations are stored per-project in SQLite database
+ - Multiple conversations supported — start new ones as needed
+ - Switch between conversations using the conversation selector
+ - History persists across browser sessions
+
+
+ {/* Vertex AI Setup */}
+
+ Vertex AI Setup
+
+
+ Run coding agents via Google Cloud Vertex AI:
+
+
+ -
+ Install and authenticate the gcloud CLI:{' '}
+
+ gcloud auth application-default login
+
+
+ -
+ Configure your{' '}
+ .env file:
+
+
+
+
{`CLAUDE_CODE_USE_VERTEX=1
+CLOUD_ML_REGION=us-east5
+ANTHROPIC_VERTEX_PROJECT_ID=your-gcp-project-id
+ANTHROPIC_DEFAULT_OPUS_MODEL=claude-opus-4-5@20251101
+ANTHROPIC_DEFAULT_SONNET_MODEL=claude-sonnet-4-5@20250929
+ANTHROPIC_DEFAULT_HAIKU_MODEL=claude-3-5-haiku@20241022`}
+
+
+ Use @{' '}
+ instead of -{' '}
+ in model names for Vertex AI.
+
+
+ {/* Ollama Local Models */}
+
+ Ollama Local Models
+
+
+ Run coding agents using local models via Ollama v0.14.0+:
+
+
+ -
+ Install Ollama from{' '}
+
+ ollama.com
+
+
+ -
+ Start Ollama:{' '}
+ ollama serve
+
+ -
+ Pull a coding model:{' '}
+ ollama pull qwen3-coder
+
+ -
+ Configure your{' '}
+ .env:
+
+
+
+
{`ANTHROPIC_BASE_URL=http://localhost:11434
+ANTHROPIC_AUTH_TOKEN=ollama
+API_TIMEOUT_MS=3000000
+ANTHROPIC_DEFAULT_SONNET_MODEL=qwen3-coder`}
+
+
+ Recommended models:{' '}
+ qwen3-coder{' '}
+ deepseek-coder-v2{' '}
+ codellama
+
+
+ Limitations: Smaller context windows than Claude
+ (model-dependent), extended context beta disabled (not supported by Ollama), and performance
+ depends on local hardware (GPU recommended).
+
+
+ {/* Environment Variables */}
+
+ Environment Variables
+
+
+ Key environment variables for configuring AutoCoder:
+
+
+
+
+ |
+ Variable
+ |
+
+ Description
+ |
+
+
+
+ {ENV_VARS.map((v) => (
+
+ |
+ {v.name}
+ |
+ {v.description} |
+
+ ))}
+
+
+
+ {/* CLI Arguments */}
+
+ CLI Arguments
+
+
+ Command-line arguments for{' '}
+
+ autonomous_agent_demo.py
+
+ :
+
+
+
+
+ |
+ Argument
+ |
+
+ Description
+ |
+
+
+
+ {CLI_ARGS.map((arg) => (
+
+ |
+ {arg.name}
+ |
+ {arg.description} |
+
+ ))}
+
+
+
+ {/* Webhook Support */}
+
+ Webhook Support
+
+
+ - AutoCoder can send webhook notifications on feature completion
+ - Compatible with N8N and similar automation tools
+ - Configure the webhook URL in project settings
+ -
+ Payload includes: feature name, status, and project info
+
+
+
+ {/* Project Registry */}
+
+ Project Registry
+
+
+ -
+ All projects are registered in{' '}
+ ~/.autocoder/registry.db{' '}
+ (SQLite)
+
+ - Maps project names to filesystem paths
+ - Uses POSIX path format (forward slashes) for cross-platform compatibility
+ - SQLAlchemy ORM with SQLite's built-in transaction handling
+
+
+ {/* Maestro: The Orchestrator */}
+
+ Maestro: The Orchestrator
+
+
+ Maestro is the central orchestrator that coordinates all agents. It acts as the conductor,
+ ensuring features are implemented efficiently and in the correct order.
+
+
+ - Manages the full lifecycle of coding and testing agents
+ - Schedules which features to work on based on dependencies and priority
+ - Monitors agent health and restarts crashed agents automatically
+ - Reports status to the UI in real time via WebSocket
+
+
+ {/* Coding Agents */}
+
+ Coding Agents
+
+
+ - Implement features one at a time, or in batches of 1–3
+ -
+ Claim features atomically via the{' '}
+
+ feature_claim_and_get
+ {' '}
+ MCP tool — no two agents work on the same feature
+
+ - Run in isolated environments with their own browser context
+ -
+ Use the Claude Code SDK with project-specific tools and{' '}
+ CLAUDE.md
+
+
+
+ {/* Testing Agents */}
+
+ Testing Agents
+
+
+ - Run regression tests after features are implemented
+ - Verify that new code does not break existing features
+ - Configurable ratio: 0–3 testing agents per coding agent
+ - Can batch-test multiple features per session (1–5)
+
+
+ {/* Agent Lifecycle */}
+
+ Agent Lifecycle
+
+
+ Agents are controlled through the UI or CLI. The lifecycle states are:
+
+
+
+
+ |
+ Action
+ |
+
+ Behavior
+ |
+
+
+
+
+ | Start |
+
+ Click the Play button or run the CLI command
+ |
+
+
+ | Stop |
+
+ Gracefully terminates all running agents
+ |
+
+
+ | Pause |
+
+ Temporarily halts work (agents finish their current task first)
+ |
+
+
+ | Resume |
+
+ Continues from where the agents were paused
+ |
+
+
+
+
+ Agents auto-continue between sessions with a 3-second delay, so they keep working until
+ all features are complete or they are explicitly stopped.
+
+
+ {/* Concurrency Control */}
+
+ Concurrency Control
+
+
+ -
+ A slider in the agent control bar sets the number of concurrent coding agents
+ (1–5)
+
+ -
+ More agents means faster progress, but also higher API usage
+
+ - Each agent runs as an independent subprocess
+ -
+ Feature claiming is atomic — no two agents will ever work on the same feature
+ simultaneously
+
+
+
+ {/* Agent Mission Control */}
+
+ Agent Mission Control
+
+
+ The Mission Control dashboard provides a real-time overview of all active agents:
+
+
+ - Active agent cards with mascot icons and current status
+ - The feature each agent is currently working on
+ - Agent state indicators (thinking, working, testing, etc.)
+ - Orchestrator status and a recent activity feed
+
+
+ {/* Agent Mascots & States */}
+
+ Agent Mascots & States
+
+
+ Each agent is assigned a unique mascot for easy identification:{' '}
+ Spark,{' '}
+ Fizz,{' '}
+ Octo,{' '}
+ Hoot,{' '}
+ Buzz, and more. Agent states include:
+
+
+
+
+ |
+ State
+ |
+
+ Animation
+ |
+
+ Description
+ |
+
+
+
+
+ |
+ Thinking
+ |
+ Bouncing |
+ Agent is planning its approach |
+
+
+ |
+ Working
+ |
+ Shake |
+ Actively writing code |
+
+
+ |
+ Testing
+ |
+ Rotating |
+ Running tests |
+
+
+ |
+ Success
+ |
+ Celebration |
+ Feature completed |
+
+
+ |
+ Error
+ |
+ Red shake |
+ Encountered an issue |
+
+
+ |
+ Struggling
+ |
+ Concerned expression |
+ Multiple consecutive failures |
+
+
+
+
+ {/* Viewing Agent Logs */}
+
+ Viewing Agent Logs
+
+
+ - Click any agent card in Mission Control to see its log output
+ - Logs are color-coded by level (info, warning, error)
+ - Output streams in real time via WebSocket
+ - Each agent's logs are isolated and filterable
+
+
+ {/* Process Limits */}
+
+ Process Limits
+
+
+ The orchestrator enforces strict bounds on concurrent processes to prevent resource
+ exhaustion:
+
+
+
+
+ |
+ Limit
+ |
+
+ Value
+ |
+
+
+
+
+ |
+
+ MAX_PARALLEL_AGENTS
+
+ |
+ 5 (maximum concurrent coding agents) |
+
+
+ |
+
+ MAX_TOTAL_AGENTS
+
+ |
+
+ 10 (hard limit on coding + testing combined)
+ |
+
+
+ | Testing agents |
+
+ Capped at the same count as coding agents
+ |
+
+
+ | Total Python processes |
+
+ Never exceeds 11 (1 orchestrator + 5 coding + 5 testing)
+ |
+
+
+
+
+ {/* What is an App Spec? */}
+
+ What is an App Spec?
+
+
+ The app spec is an XML document that describes the application to be built. It lives at{' '}
+
+ .autocoder/prompts/app_spec.txt
+ {' '}
+ and tells the initializer agent what features to create. The spec defines your app's name,
+ description, tech stack, and the features that should be implemented.
+
+
+
{`
+ My App
+ A task management app
+
+ User authentication with login/signup
+ Task CRUD with categories
+
+`}
+
+
+ {/* Creating a Spec with Claude */}
+
+ Creating a Spec with Claude
+
+
+ -
+ In the UI, select your project and click{' '}
+ Create Spec
+
+ -
+ An interactive chat with Claude helps you define your app — it asks about
+ your app's purpose, features, and tech stack
+
+ - The spec is generated and saved automatically
+ - After creation, the initializer agent can be started immediately
+
+
+ {/* Writing a Spec Manually */}
+
+ Writing a Spec Manually
+
+
+ -
+ Create{' '}
+
+ .autocoder/prompts/app_spec.txt
+ {' '}
+ in your project directory
+
+ -
+ Use XML format with app name, description, tech stack, and a feature list
+
+ -
+ Be specific about each feature — the initializer creates test cases from these
+ descriptions
+
+ -
+ Include technical constraints where needed (e.g.,{' '}
+
+ "use PostgreSQL"
+
+ ,{' '}
+
+ "React with TypeScript"
+
+ )
+
+
+
+ {/* The Initializer Agent */}
+
+ The Initializer Agent
+
+
+ The initializer agent is the first agent to run on a new project. It bridges the gap between
+ your spec and the coding agents that implement features.
+
+
+ - Runs automatically on first agent start when no features exist in the database
+ - Reads the app spec and creates features with descriptions, steps, and priorities
+ -
+ Sets up feature dependencies (e.g., "auth must be done before user profile")
+
+ -
+ Creates the feature database at{' '}
+
+ .autocoder/features.db
+
+
+
+
+ {/* Starting After Spec Creation */}
+
+ Starting After Spec Creation
+
+
+ Once your spec is ready, you can kick off the agents:
+
+
+ -
+ From the UI, click the Play button to start
+ the agent
+
+ -
+ Or run from the CLI:
+
+
+
+
python autonomous_agent_demo.py --project-dir your-project
+
+
+ The initializer runs first to create features, then coding agents take over to implement
+ them. Progress is shown in real time on the Kanban board.
+
+
+ {/* Themes Overview */}
+
+ Themes Overview
+
+
+ AutoCoder comes with 6 built-in themes. Each theme provides a complete visual identity including
+ colors, accents, and dark mode variants.
+
+
+ {THEMES.map((theme) => (
+
+ {/* Color swatches */}
+
+ {theme.colors.map((color) => (
+
+ ))}
+
+ {/* Description */}
+
+ {theme.name}
+ {theme.name === 'Twitter' && (
+ <>
+ {' '}
+ Default
+
+ )}
+ — {theme.description}
+
+
+ ))}
+
+
+ {/* Dark & Light Mode */}
+
+ Dark & Light Mode
+
+
+ - Toggle with the sun/moon icon in the header
+ - All 6 themes have dedicated dark mode variants
+ -
+ Preference is saved in browser{' '}
+ localStorage
+
+ - Dark mode affects all UI elements including the docs page
+
+
+ {/* Theme Selector */}
+
+ Theme Selector
+
+
+ - Hover over the palette icon in the header to open the theme dropdown
+ - Preview themes by hovering over each option (live preview)
+ - Click to select — the change is applied instantly
+ - Theme preference persists across sessions
+
+
+ {/* Keyboard Shortcuts */}
+
+ Keyboard Shortcuts
+
+
+ Press ? anywhere in the UI to see the shortcuts help overlay.
+
+
+
+
+ | Key |
+ Action |
+
+
+
+ {SHORTCUTS.map((shortcut) => (
+
+ |
+ {shortcut.key}
+ |
+ {shortcut.action} |
+
+ ))}
+
+
+
+ {/* Debug Panel */}
+
+ Debug Panel
+
+
+ -
+ Press D to toggle the debug panel at the bottom of the screen
+
+ - Resizable by dragging the top edge
+ -
+ Three tabs: Agent Logs,{' '}
+ Dev Server Logs, and{' '}
+ Terminal
+
+ - Shows real-time output from agents and dev server
+
+
+ {/* Agent Logs Tab */}
+
+ Agent Logs Tab
+
+
+ -
+ Color-coded log levels:{' '}
+ Error,{' '}
+ Warning,{' '}
+ Info,{' '}
+ Debug,{' '}
+ Success
+
+ - Timestamps on each log entry
+ - Auto-scrolls to latest entry
+ - Clear button to reset log view
+
+
+ {/* Dev Server Logs Tab */}
+
+ Dev Server Logs Tab
+
+
+ -
+ Shows stdout/stderr from the project’s dev server (e.g.,{' '}
+ npm run dev)
+
+ - Useful for seeing compilation errors, hot reload status
+ - Clear button available
+
+
+ {/* Terminal */}
+
+ Terminal
+
+
+ -
+ Press T to open terminal (opens debug panel on the terminal tab)
+
+ - Full xterm.js terminal emulator with WebSocket backend
+ - Multi-tab support: create multiple terminal sessions
+ - Rename tabs by double-clicking the tab title
+ - Each tab runs an independent PTY (pseudo-terminal) session
+ - Supports standard terminal features: colors, cursor movement, history
+
+
+ {/* Dev Server Control */}
+
+ Dev Server Control
+
+
+ - Start/stop button in the header bar
+ -
+ Auto-detects project type (Next.js, Vite, CRA, etc.) and runs the appropriate dev command
+
+ - Shows the dev server URL when running
+ - Automatic crash detection and restart option
+ - Dev server output piped to the Dev Server Logs tab
+
+
+ {/* Per-Agent Logs */}
+
+ Per-Agent Logs
+
+
+ - In Agent Mission Control, click any agent card to see its individual logs
+ -
+ Logs include: what feature the agent is working on, code changes, test results
+
+ - Separate logs for coding agents and testing agents
+ - Real-time streaming — see agent output as it happens
+
+
+ {/* Starting a New Project */}
+
+ Starting a New Project
+
+
+ How do I use AutoCoder on a new project?
+
+
+ From the UI, select "Create New Project" in the project dropdown. Choose a folder and
+ name. Then create an app spec using the interactive chat or write one manually. Click Start to run
+ the initializer agent, which creates features from your spec. Coding agents then implement features
+ automatically.
+
+
+ {/* Adding to Existing Project */}
+
+ Adding to Existing Project
+
+
+ How do I add AutoCoder to an existing project?
+
+
+ Register the project folder through the UI project selector using "Add Existing".
+ AutoCoder creates a{' '}
+ .autocoder/ directory
+ alongside your existing code. Write an app spec describing what to build (new features), and the
+ agent works within your existing codebase.
+
+
+ {/* Agent Crashes */}
+
+ Agent Crashes
+
+
+ What happens if an agent crashes?
+
+
+ The orchestrator (Maestro) automatically detects crashed agents and can restart them. Features
+ claimed by a crashed agent are released back to the pending queue. Scheduled runs use exponential
+ backoff with up to 3 retries. Check the agent logs in the debug panel for crash details.
+
+
+ {/* Custom Bash Commands */}
+
+ Custom Bash Commands
+
+
+ How do I customize which bash commands the agent can use?
+
+
+ Create{' '}
+
+ .autocoder/allowed_commands.yaml
+ {' '}
+ in your project with a list of allowed commands. Supports exact names, wildcards (e.g.,{' '}
+ swift*), and local
+ scripts. See the Security section for full details on the command hierarchy.
+
+
+ {/* Blocked Features */}
+
+ Blocked Features
+
+
+ Why are my features stuck in "blocked" status?
+
+
+ Features with unmet dependencies show as blocked. Check the Dependency Graph view (press{' '}
+ G) to see which
+ features are waiting on others. A feature can only start when all its dependencies are marked as
+ "passing". Remove or reorder dependencies if needed.
+
+
+ {/* Running in Parallel */}
+
+ Running in Parallel
+
+
+ How do I run multiple agents in parallel?
+
+
+ Use the concurrency slider in the agent control bar (1–5 agents) or pass{' '}
+
+ --parallel --max-concurrency N
+ {' '}
+ on the CLI. Each agent claims features atomically, so there is no conflict. More agents means
+ faster progress but higher API cost.
+
+
+ {/* Using Local Models */}
+
+ Using Local Models
+
+
+ Can I use a local model instead of the Claude API?
+
+
+ Yes, via Ollama v0.14.0+. Install Ollama, pull a coding model (e.g.,{' '}
+ qwen3-coder), and
+ configure your{' '}
+ .env to point to
+ localhost. See the Advanced Configuration section for full setup instructions.
+
+
+ {/* Resetting a Project */}
+
+ Resetting a Project
+
+
+ How do I reset a project and start over?
+
+
+ Press R (when agents
+ are stopped) to open the Reset modal. Choose between: "Reset Features" (clears the
+ feature database, keeps the spec) or "Full Reset" (removes the spec too, starts fresh).
+ After a full reset, you will be prompted to create a new spec.
+
+
+ {/* Coding vs Testing Agents */}
+
+ Coding vs Testing Agents
+
+
+ What's the difference between coding and testing agents?
+
+
+ Coding agents implement features — they write code, create files, and run feature-specific
+ tests. Testing agents run regression tests across completed features to ensure new code does not
+ break existing functionality. Configure the testing agent ratio (0–3) in settings.
+
+
+ {/* Monitoring in Real Time */}
+
+ Monitoring in Real Time
+
+
+ How do I view what an agent is doing in real time?
+
+
+ Multiple ways: (1) Watch the Kanban board for feature status changes. (2) Open the debug panel
+ (D key) for live
+ agent logs. (3) Click agent cards in Mission Control for per-agent logs. (4) The progress bar
+ updates in real time via WebSocket.
+
+
+ {/* Kanban Board Overview */}
+
+ Kanban Board Overview
+
+
+ The main view organizes features into three columns representing their current status:
+
+
+
+
+ |
+ Column
+ |
+
+ Color
+ |
+
+ Meaning
+ |
+
+
+
+
+ | Pending |
+
+ Yellow
+ |
+ Waiting to be picked up |
+
+
+ | In Progress |
+
+ Cyan
+ |
+ An agent is actively working on it |
+
+
+ | Done |
+
+ Green
+ |
+ Implemented and passing |
+
+
+
+
+ Each feature appears as a card showing its name, priority, and category. The board updates
+ in real time as agents work.
+
+
+ {/* Feature Cards */}
+
+ Feature Cards
+
+
+ -
+ Each card displays a priority badge (P1 through{' '}
+ P5), a category tag, and the feature name
+
+ - Status icons indicate the current state of the feature
+ - Click a card to open the detail modal with the full description and test steps
+ -
+ Cards in the "In Progress" column show which agent is currently working on them
+
+
+
+ {/* Dependency Graph View */}
+
+ Dependency Graph View
+
+
+ An alternative to the Kanban board that visualizes feature relationships as a directed graph.
+
+
+ -
+ Press G to toggle between Kanban and Graph view
+
+ - Uses the dagre layout engine for automatic node positioning
+ -
+ Nodes are colored by status — pending, in-progress, and done each have
+ distinct colors
+
+ - Arrows show dependency relationships between features
+ - Click any node to open the feature detail modal
+ - Supports both horizontal and vertical layout orientations
+
+
+ {/* Adding Features */}
+
+ Adding Features
+
+
+ -
+ Press N to open the Add Feature form
+
+ - Fill in: name, description, category, and priority
+ - Optionally define steps (test criteria the agent must pass to complete the feature)
+ - New features are added to the Pending column immediately
+
+
+ {/* Editing & Deleting Features */}
+
+ Editing & Deleting Features
+
+
+ - Click a feature card to open the detail modal
+ -
+ Click Edit to modify the name, description,
+ category, priority, or steps
+
+ -
+ Delete removes the feature permanently
+
+ -
+ Skip moves a feature to the end of the queue
+ without deleting it
+
+
+
+ {/* Feature Dependencies */}
+
+ Feature Dependencies
+
+
+ Features can declare dependencies on other features, ensuring they are implemented in the
+ correct order.
+
+
+ - Set dependencies in the feature edit modal
+ -
+ Cycle detection prevents circular dependencies (uses Kahn's algorithm combined
+ with DFS)
+
+ -
+ Blocked features display a lock icon and cannot be claimed by agents until their
+ dependencies are met
+
+ - The Dependency Graph view makes these relationships easy to visualize
+
+
+ {/* Expanding Project with AI */}
+
+ Expanding Project with AI
+
+
+ -
+ Press E to open the Expand Project modal
+
+ - Chat with Claude to describe the new features you want to add
+ - Supports image attachments for UI mockups or design references
+ - Claude creates properly structured features with appropriate dependencies
+ - New features appear on the board immediately after creation
+
+
+ {/* Priority & Ordering */}
+
+ Priority & Ordering
+
+
+ -
+ Features are ordered by priority: P1 is the highest
+ and P5 is the lowest
+
+ - Within the same priority level, features are ordered by creation time
+ - Agents always pick up the highest-priority ready feature first
+
+
+ {/* What is AutoCoder? */}
+
+ What is AutoCoder?
+
+
+ AutoCoder is an autonomous coding agent system that builds complete applications over multiple
+ sessions using a two-agent pattern:
+
+
+ -
+ Initializer Agent — reads your app spec
+ and creates features in a SQLite database
+
+ -
+ Coding Agent — implements features one by
+ one, marking each as passing when complete
+
+
+
+ It comes with a React-based UI for monitoring progress, managing features, and controlling agents
+ in real time.
+
+
+ {/* Quick Start */}
+
+ Quick Start
+
+
+ Launch AutoCoder with a single command. The CLI menu lets you create or select a project,
+ while the Web UI provides a full dashboard experience.
+
+
+
{`# Windows
+start.bat # CLI menu
+start_ui.bat # Web UI
+
+# macOS/Linux
+./start.sh # CLI menu
+./start_ui.sh # Web UI`}
+
+
+ {/* Creating a New Project */}
+
+ Creating a New Project
+
+
+ -
+ From the UI, click the project dropdown and select{' '}
+ Create New Project
+
+ - Enter a name and select or browse to a folder for the project
+ -
+ Create an app spec interactively with Claude, or write one manually in XML format
+
+ -
+ The initializer agent reads your spec and creates features automatically
+
+
+
+ {/* Adding to an Existing Project */}
+
+ Adding to an Existing Project
+
+
+ - Register the project folder via the UI project selector
+ -
+ AutoCoder creates a{' '}
+ .autocoder/{' '}
+ directory inside your project
+
+ -
+ Existing code is preserved — AutoCoder adds its configuration alongside it
+
+ - Write or generate an app spec describing what to build
+
+
+ {/* System Requirements */}
+
+ System Requirements
+
+
+
+
+ |
+ Requirement
+ |
+
+ Details
+ |
+
+
+
+
+ | Python |
+
+ 3.11+
+ |
+
+
+ | Node.js |
+
+ 20+{' '}
+ (for UI development)
+ |
+
+
+ | Claude Code CLI |
+
+ Required for running agents
+ |
+
+
+ | Operating System |
+
+ Windows, macOS, or Linux
+ |
+
+
+
+
+ {/* .autocoder/ Directory Layout */}
+
+ .autocoder/ Directory Layout
+
+
+ Every AutoCoder project stores its configuration and runtime files in a{' '}
+ .autocoder/{' '}
+ directory at the project root.
+
+
+
{`your-project/
+\u251C\u2500\u2500 .autocoder/
+\u2502 \u251C\u2500\u2500 features.db # SQLite feature database
+\u2502 \u251C\u2500\u2500 .agent.lock # Lock file (prevents multiple instances)
+\u2502 \u251C\u2500\u2500 .gitignore # Ignores runtime files
+\u2502 \u251C\u2500\u2500 allowed_commands.yaml # Per-project bash command allowlist
+\u2502 \u2514\u2500\u2500 prompts/
+\u2502 \u251C\u2500\u2500 app_spec.txt # Application specification (XML)
+\u2502 \u251C\u2500\u2500 initializer_prompt.md # First session prompt
+\u2502 \u2514\u2500\u2500 coding_prompt.md # Continuation session prompt
+\u251C\u2500\u2500 CLAUDE.md # Claude Code convention file
+\u2514\u2500\u2500 app_spec.txt # Root copy for template compatibility`}
+
+
+ {/* Features Database */}
+
+ Features Database
+
+
+ -
+ SQLite database managed by SQLAlchemy, stored at{' '}
+
+ .autocoder/features.db
+
+
+ -
+ Each feature record includes: id, priority, category, name, description, steps, status
+ (pending,{' '}
+ in_progress,{' '}
+ passing,{' '}
+ failing),
+ and dependencies
+
+ - Agents interact with features through MCP server tools, not direct database access
+ - Viewable in the UI via the Kanban board or the Dependency Graph view
+
+
+ {/* Prompts Directory */}
+
+ Prompts Directory
+
+
+ Prompts control how agents behave during each session:
+
+
+ -
+ app_spec.txt{' '}
+ — your application specification in XML format
+
+ -
+
+ initializer_prompt.md
+ {' '}
+ — prompt for the initializer agent (creates features from the spec)
+
+ -
+
+ coding_prompt.md
+ {' '}
+ — prompt for coding agents (implements features)
+
+
+
+ These can be customized per project. If not present, defaults from{' '}
+
+ .claude/templates/
+ {' '}
+ are used as a fallback.
+
+
+ {/* Allowed Commands Config */}
+
+ Allowed Commands Config
+
+
+ The optional{' '}
+
+ .autocoder/allowed_commands.yaml
+ {' '}
+ file lets you grant project-specific bash commands to the agent. This is useful when your
+ project requires tools beyond the default allowlist (e.g., language-specific compilers or
+ custom build scripts).
+
+
+ See the Security section for full details on
+ the command hierarchy and how project-level commands interact with global and organization
+ policies.
+
+
+ {/* CLAUDE.md Convention */}
+
+ CLAUDE.md Convention
+
+
+ -
+ CLAUDE.md{' '}
+ lives at the project root, as required by the Claude Code SDK
+
+ -
+ Contains project-specific instructions that the agent follows during every coding session
+
+ -
+ Automatically inherited by all agents working on the project — no additional
+ configuration needed
+
+
+
+ {/* Legacy Layout Migration */}
+
+ Legacy Layout Migration
+
+
+ Older projects stored configuration files directly at the project root (e.g.,{' '}
+ features.db,{' '}
+ prompts/).
+
+
+ -
+ On the next agent start, these files are automatically migrated into{' '}
+ .autocoder/
+
+ - Dual-path resolution ensures both old and new layouts work transparently
+ - No manual migration is needed — it happens seamlessly
+
+
+ {/* Claude Inheritance */}
+
+ Claude Inheritance
+
+
+ Agents inherit all MCP servers, tools, skills, custom commands, and{' '}
+ CLAUDE.md{' '}
+ from the target project folder.
+
+
+ If your project has its own MCP servers or Claude commands, the coding agent can use them.
+ The agent essentially runs as if Claude Code was opened in your project directory.
+
+
+ {/* What Scheduling Does */}
+
+ What Scheduling Does
+
+
+ Scheduling automates agent runs at specific times. Set up a schedule and AutoCoder will automatically
+ start agents on your project — useful for overnight builds, periodic maintenance, or continuous
+ development.
+
+
+ {/* Creating a Schedule */}
+
+ Creating a Schedule
+
+
+ - Click the clock icon in the header to open the Schedule modal
+ - Set: start time, duration (how long agents run), days of the week
+ - Optionally configure: YOLO mode, concurrency, model selection
+ - Schedule is saved and starts at the next matching time
+
+
+ {/* Schedule Settings */}
+
+ Schedule Settings
+
+
+ Each schedule can override global settings:
+
+
+
+
+ | Setting |
+ Details |
+
+
+
+
+ | YOLO mode |
+ On/off per schedule |
+
+
+ | Concurrency |
+
+ 1–5 agents
+ |
+
+
+ | Model tier |
+ Opus / Sonnet / Haiku |
+
+
+ | Duration |
+ How long the session runs before auto-stopping |
+
+
+
+
+ All schedule times are in UTC timezone.
+
+
+ {/* Schedule Overrides */}
+
+ Schedule Overrides
+
+
+ - Manually skip a scheduled run (one-time override)
+ - Pause a schedule temporarily (resumes on next period)
+ -
+ View upcoming runs with{' '}
+ Running until /{' '}
+ Next run indicators
+
+ - Override without deleting the schedule
+
+
+ {/* Crash Recovery */}
+
+ Crash Recovery
+
+
+ - If a scheduled agent crashes, it uses exponential backoff for retries
+ -
+ Maximum 3 retry attempts per scheduled run
+
+ - Backoff prevents rapid restart loops
+ - Failed runs are logged for troubleshooting
+
+
+ {/* Command Validation Overview */}
+
+ Command Validation Overview
+
+
+ AutoCoder uses a defense-in-depth approach for security. All three layers must pass before any
+ command is executed:
+
+
+ -
+ OS-level sandbox — bash commands run inside
+ a restricted sandbox environment
+
+ -
+ Filesystem restriction — agents can only
+ access the project directory (plus configured extra read paths)
+
+ -
+ Hierarchical allowlist — every bash command
+ is validated against a multi-level allowlist system
+
+
+
+ {/* Command Hierarchy */}
+
+ Command Hierarchy
+
+
+ Commands are evaluated against a 5-level hierarchy, from highest to lowest priority:
+
+
+ -
+ Hardcoded Blocklist{' '}
+ security.py{' '}
+ — NEVER allowed, cannot be overridden
+
+ -
+ Org Blocklist{' '}
+ ~/.autocoder/config.yaml{' '}
+ — org-wide blocks, cannot be project-overridden
+
+ -
+ Org Allowlist{' '}
+ ~/.autocoder/config.yaml{' '}
+ — available to all projects
+
+ -
+ Global Allowlist{' '}
+ security.py{' '}
+ — default commands (npm, git, curl, etc.)
+
+ -
+ Project Allowlist{' '}
+
+ .autocoder/allowed_commands.yaml
+ {' '}
+ — project-specific additions
+
+
+
+ Higher priority levels always win. A command blocked at level 1 or 2 can never be allowed by
+ lower levels.
+
+
+ {/* Hardcoded Blocklist */}
+
+ Hardcoded Blocklist
+
+
+ The following commands can never be allowed, regardless
+ of any configuration. They are hardcoded in{' '}
+ security.py and
+ cannot be overridden:
+
+
+ {['dd', 'sudo', 'su', 'shutdown', 'reboot', 'poweroff', 'mkfs', 'fdisk', 'mount', 'umount', 'systemctl'].map(
+ (cmd) => (
+
+ {cmd}
+
+ ),
+ )}
+
+
+ {/* Global Allowlist */}
+
+ Global Allowlist
+
+
+ Default commands available to all projects out of the box. These are the standard development
+ commands needed for most projects:
+
+
+ {['npm', 'npx', 'node', 'git', 'curl', 'python', 'pip', 'cat', 'ls', 'mkdir', 'cp', 'mv', 'rm', 'grep', 'find'].map(
+ (cmd) => (
+
+ {cmd}
+
+ ),
+ )}
+
+
+ {/* Per-Project Allowed Commands */}
+
+ Per-Project Allowed Commands
+
+
+ Each project can define additional allowed commands in{' '}
+
+ .autocoder/allowed_commands.yaml
+
+ :
+
+
+
{`# .autocoder/allowed_commands.yaml
+version: 1
+commands:
+ # Exact command name
+ - name: swift
+ description: Swift compiler
+
+ # Wildcard - matches swiftc, swiftlint, swiftformat
+ - name: swift*
+ description: All Swift tools (wildcard)
+
+ # Local project scripts
+ - name: ./scripts/build.sh
+ description: Project build script`}
+
+
+ Pattern matching: exact match (
+ swift), wildcard (
+ swift* matches swiftc,
+ swiftlint, etc.), and scripts (
+ ./scripts/build.sh).
+ Limit: 100 commands per project.
+
+
+ {/* Organization Configuration */}
+
+ Organization Configuration
+
+
+ System administrators can set org-wide policies in{' '}
+ ~/.autocoder/config.yaml:
+
+
+
{`# ~/.autocoder/config.yaml
+version: 1
+
+# Commands available to ALL projects
+allowed_commands:
+ - name: jq
+ description: JSON processor
+
+# Commands blocked across ALL projects (cannot be overridden)
+blocked_commands:
+ - aws # Prevent accidental cloud operations
+ - kubectl # Block production deployments`}
+
+
+ Org-level blocked commands cannot be overridden by any project configuration.
+
+
+ {/* Extra Read Paths */}
+
+
+ Allow agents to read files from directories outside the project folder via the{' '}
+ EXTRA_READ_PATHS{' '}
+ environment variable:
+
+
+
EXTRA_READ_PATHS=/path/to/docs,/path/to/shared-libs
+
+
+ - Must be absolute paths and must exist as directories
+ - Only read operations allowed (Read, Glob, Grep — no Write/Edit)
+ -
+ Sensitive directories are always blocked:{' '}
+ .ssh,{' '}
+ .aws,{' '}
+ .gnupg,{' '}
+ .docker,{' '}
+ .kube, etc.
+
+
+
+ {/* Filesystem Sandboxing */}
+
+ Filesystem Sandboxing
+
+
+ - Agents can only write to the project directory
+ - Read access is limited to the project directory plus configured extra read paths
+ -
+ Path traversal attacks are prevented via canonicalization (
+ Path.resolve())
+
+ - File operations are validated before execution
+
+
+ {/* Opening Settings */}
+
+ Opening Settings
+
+
+ Press the , (comma) key or click the gear icon in the header bar to
+ open the Settings modal. Settings are global and apply to all projects.
+
+
+ {/* YOLO Mode */}
+
+ YOLO Mode
+
+
+ YOLO mode is for rapid prototyping — it skips testing for faster iteration:
+
+
+ -
+ What’s skipped: Regression testing, Playwright MCP
+ server (browser automation disabled)
+
+ -
+ What still runs: Lint and type-check (to verify code
+ compiles), Feature MCP server for tracking
+
+ -
+ Toggle via the lightning bolt button in the UI or the{' '}
+ --yolo CLI flag
+
+ -
+ When to use: Early prototyping when you want to scaffold
+ features quickly without verification overhead
+
+ - Switch back to standard mode for production-quality development
+
+
+ {/* Headless Browser */}
+
+ Headless Browser
+
+
+ - When enabled, Playwright runs without a visible browser window
+ - Saves CPU/GPU resources on machines running multiple agents
+ - Tests still run fully — just no visible browser UI
+ - Toggle in settings or via the UI button
+
+
+ {/* Model Selection */}
+
+ Model Selection
+
+
+ Choose which Claude model tier to use for your agents:
+
+
+
+
+ | Tier |
+
+ Characteristics
+ |
+
+
+
+
+ |
+ Opus
+ |
+ Most capable, highest quality |
+
+
+ |
+ Sonnet
+ |
+ Balanced speed and quality |
+
+
+ |
+ Haiku
+ |
+ Fastest, most economical |
+
+
+
+
+ - Model can be set globally in settings
+ - Per-schedule model override is also available
+ -
+ When using Vertex AI, model names use{' '}
+ @ instead of{' '}
+ - (e.g.,{' '}
+
+ claude-opus-4-5@20251101
+
+ )
+
+
+
+ {/* Regression Agents */}
+
+ Regression Agents
+
+
+ Controls how many testing agents run alongside coding agents (0–3):
+
+
+ -
+ 0: No regression testing (like YOLO but coding agents
+ still test their own feature)
+
+ -
+ 1: One testing agent runs in background verifying
+ completed features
+
+ -
+ 2–3: Multiple testing agents for thorough
+ verification
+
+ - Testing agents batch-test 1–5 features per session
+
+
+ {/* Features per Agent / Batch Size */}
+
+ Features per Agent (Batch Size)
+
+
+ Controls how many features each coding agent implements per session (1–3):
+
+
+ -
+ 1: One feature per session (most focused, lower risk of
+ conflicts)
+
+ -
+ 2–3: Multiple features per session (more efficient,
+ fewer session startups)
+
+ -
+ Set via settings UI or the{' '}
+ --batch-size CLI flag
+
+ -
+ Can also target specific features:{' '}
+ --batch-features 1,2,3
+
+
+
+ {/* Concurrency */}
+
+ Concurrency
+
+
+ - Per-project default concurrency saved in project settings
+ - Override at runtime with the concurrency slider in agent controls
+ -
+ Range: 1–5 concurrent coding agents
+
+ - Higher concurrency = faster progress but more API cost
+
+
+ {/* How Settings are Persisted */}
+
+ How Settings are Persisted
+
+
+ -
+ Global settings stored in SQLite registry at{' '}
+ ~/.autocoder/registry.db
+
+ - Per-project settings (like default concurrency) stored in the project registry entry
+ - UI settings (theme, dark mode) stored in browser localStorage
+ - Settings survive app restarts and are shared across UI sessions
+
+