feat: add onboarding wizard components and logic

- Introduced a new onboarding wizard for guiding users through the board features.
- Added shared onboarding components including OnboardingWizard, useOnboardingWizard, and related types and constants.
- Implemented onboarding logic in the BoardView, integrating sample feature generation for a quick start.
- Updated UI components to support onboarding interactions and improve user experience.
- Enhanced onboarding state management with localStorage persistence for user progress tracking.

.github/workflows/e2e-tests.yml

@@ -37,7 +37,14 @@ jobs:
           git config --global user.email "ci@example.com"
 
       - name: Start backend server
-        run: npm run start --workspace=apps/server &
+        run: |
+          echo "Starting backend server..."
+          # Start server in background and save PID
+          npm run start --workspace=apps/server > backend.log 2>&1 &
+          SERVER_PID=$!
+          echo "Server started with PID: $SERVER_PID"
+          echo "SERVER_PID=$SERVER_PID" >> $GITHUB_ENV
+
         env:
           PORT: 3008
           NODE_ENV: test
@@ -53,21 +60,70 @@ jobs:
       - name: Wait for backend server
         run: |
           echo "Waiting for backend server to be ready..."
+
+          # Check if server process is running
+          if [ -z "$SERVER_PID" ]; then
+            echo "ERROR: Server PID not found in environment"
+            cat backend.log 2>/dev/null || echo "No backend log found"
+            exit 1
+          fi
+
+          # Check if process is actually running
+          if ! kill -0 $SERVER_PID 2>/dev/null; then
+            echo "ERROR: Server process $SERVER_PID is not running!"
+            echo "=== Backend logs ==="
+            cat backend.log
+            echo ""
+            echo "=== Recent system logs ==="
+            dmesg 2>/dev/null | tail -20 || echo "No dmesg available"
+            exit 1
+          fi
+
+          # Wait for health endpoint
           for i in {1..60}; do
             if curl -s -f http://localhost:3008/api/health > /dev/null 2>&1; then
               echo "Backend server is ready!"
-              curl -s http://localhost:3008/api/health | jq . 2>/dev/null || echo "Health check response: $(curl -s http://localhost:3008/api/health 2>/dev/null || echo 'No response')"
+              echo "=== Backend logs ==="
+              cat backend.log
+              echo ""
+              echo "Health check response:"
+              curl -s http://localhost:3008/api/health | jq . 2>/dev/null || echo "Health check: $(curl -s http://localhost:3008/api/health 2>/dev/null || echo 'No response')"
               exit 0
             fi
+            
+            # Check if server process is still running
+            if ! kill -0 $SERVER_PID 2>/dev/null; then
+              echo "ERROR: Server process died during wait!"
+              echo "=== Backend logs ==="
+              cat backend.log
+              exit 1
+            fi
+            
             echo "Waiting... ($i/60)"
             sleep 1
           done
-          echo "Backend server failed to start!"
-          echo "Checking server status..."
+
+          echo "ERROR: Backend server failed to start within 60 seconds!"
+          echo "=== Backend logs ==="
+          cat backend.log
+          echo ""
+          echo "=== Process status ==="
           ps aux | grep -E "(node|tsx)" | grep -v grep || echo "No node processes found"
+          echo ""
+          echo "=== Port status ==="
           netstat -tlnp 2>/dev/null | grep :3008 || echo "Port 3008 not listening"
-          echo "Testing health endpoint..."
+          lsof -i :3008 2>/dev/null || echo "lsof not available or port not in use"
+          echo ""
+          echo "=== Health endpoint test ==="
           curl -v http://localhost:3008/api/health 2>&1 || echo "Health endpoint failed"
+
+          # Kill the server process if it's still hanging
+          if kill -0 $SERVER_PID 2>/dev/null; then
+            echo ""
+            echo "Killing stuck server process..."
+            kill -9 $SERVER_PID 2>/dev/null || true
+          fi
+
           exit 1
 
       - name: Run E2E tests
@@ -81,6 +137,18 @@ jobs:
           # Keep UI-side login/defaults consistent
           AUTOMAKER_API_KEY: test-api-key-for-e2e-tests
 
+      - name: Print backend logs on failure
+        if: failure()
+        run: |
+          echo "=== E2E Tests Failed - Backend Logs ==="
+          cat backend.log 2>/dev/null || echo "No backend log found"
+          echo ""
+          echo "=== Process status at failure ==="
+          ps aux | grep -E "(node|tsx)" | grep -v grep || echo "No node processes found"
+          echo ""
+          echo "=== Port status ==="
+          netstat -tlnp 2>/dev/null | grep :3008 || echo "Port 3008 not listening"
+
       - name: Upload Playwright report
         uses: actions/upload-artifact@v4
         if: always()
@@ -98,3 +166,13 @@ jobs:
             apps/ui/test-results/
           retention-days: 7
           if-no-files-found: ignore
+
+      - name: Cleanup - Kill backend server
+        if: always()
+        run: |
+          if [ -n "$SERVER_PID" ]; then
+            echo "Cleaning up backend server (PID: $SERVER_PID)..."
+            kill $SERVER_PID 2>/dev/null || true
+            kill -9 $SERVER_PID 2>/dev/null || true
+            echo "Backend server cleanup complete"
+          fi

.gitignore

@@ -73,6 +73,9 @@ blob-report/
 !.env.example
 !.env.local.example
 
+# Codex config (contains API keys)
+.codex/config.toml
+
 # TypeScript
 *.tsbuildinfo
 
@@ -84,4 +87,11 @@ docker-compose.override.yml
 .claude/hans/
 
 pnpm-lock.yaml
-yarn.lock
+yarn.lock
+
+# Fork-specific workflow files (should never be committed)
+DEVELOPMENT_WORKFLOW.md
+check-sync.sh
+# API key files
+data/.api-key
+data/credentials.json

apps/server/package.json

@@ -32,7 +32,7 @@
     "@automaker/prompts": "1.0.0",
     "@automaker/types": "1.0.0",
     "@automaker/utils": "1.0.0",
-    "@modelcontextprotocol/sdk": "1.25.1",
+    "@modelcontextprotocol/sdk": "1.25.2",
     "@openai/codex-sdk": "^0.77.0",
     "cookie-parser": "1.4.7",
     "cors": "2.8.5",

apps/server/src/index.ts

@@ -55,6 +55,8 @@ import { createClaudeRoutes } from './routes/claude/index.js';
 import { ClaudeUsageService } from './services/claude-usage-service.js';
 import { createCodexRoutes } from './routes/codex/index.js';
 import { CodexUsageService } from './services/codex-usage-service.js';
+import { CodexAppServerService } from './services/codex-app-server-service.js';
+import { CodexModelCacheService } from './services/codex-model-cache-service.js';
 import { createGitHubRoutes } from './routes/github/index.js';
 import { createContextRoutes } from './routes/context/index.js';
 import { createBacklogPlanRoutes } from './routes/backlog-plan/index.js';
@@ -168,7 +170,9 @@ const agentService = new AgentService(DATA_DIR, events, settingsService);
 const featureLoader = new FeatureLoader();
 const autoModeService = new AutoModeService(events, settingsService);
 const claudeUsageService = new ClaudeUsageService();
-const codexUsageService = new CodexUsageService();
+const codexAppServerService = new CodexAppServerService();
+const codexModelCacheService = new CodexModelCacheService(DATA_DIR, codexAppServerService);
+const codexUsageService = new CodexUsageService(codexAppServerService);
 const mcpTestService = new MCPTestService(settingsService);
 const ideationService = new IdeationService(events, settingsService, featureLoader);
 
@@ -176,6 +180,11 @@ const ideationService = new IdeationService(events, settingsService, featureLoad
 (async () => {
   await agentService.initialize();
   logger.info('Agent service initialized');
+
+  // Bootstrap Codex model cache in background (don't block server startup)
+  void codexModelCacheService.getModels().catch((err) => {
+    logger.error('Failed to bootstrap Codex model cache:', err);
+  });
 })();
 
 // Run stale validation cleanup every hour to prevent memory leaks from crashed validations
@@ -219,7 +228,7 @@ app.use('/api/templates', createTemplatesRoutes());
 app.use('/api/terminal', createTerminalRoutes());
 app.use('/api/settings', createSettingsRoutes(settingsService));
 app.use('/api/claude', createClaudeRoutes(claudeUsageService));
-app.use('/api/codex', createCodexRoutes(codexUsageService));
+app.use('/api/codex', createCodexRoutes(codexUsageService, codexModelCacheService));
 app.use('/api/github', createGitHubRoutes(events, settingsService));
 app.use('/api/context', createContextRoutes(settingsService));
 app.use('/api/backlog-plan', createBacklogPlanRoutes(events, settingsService));
@@ -588,6 +597,26 @@ const startServer = (port: number) => {
 
 startServer(PORT);
 
+// Global error handlers to prevent crashes from uncaught errors
+process.on('unhandledRejection', (reason: unknown, _promise: Promise<unknown>) => {
+  logger.error('Unhandled Promise Rejection:', {
+    reason: reason instanceof Error ? reason.message : String(reason),
+    stack: reason instanceof Error ? reason.stack : undefined,
+  });
+  // Don't exit - log the error and continue running
+  // This prevents the server from crashing due to unhandled rejections
+});
+
+process.on('uncaughtException', (error: Error) => {
+  logger.error('Uncaught Exception:', {
+    message: error.message,
+    stack: error.stack,
+  });
+  // Exit on uncaught exceptions to prevent undefined behavior
+  // The process is in an unknown state after an uncaught exception
+  process.exit(1);
+});
+
 // Graceful shutdown
 process.on('SIGTERM', () => {
   logger.info('SIGTERM received, shutting down...');

apps/server/src/lib/codex-auth.ts

@@ -5,9 +5,11 @@
  * Never assumes authenticated - only returns true if CLI confirms.
  */
 
-import { spawnProcess, getCodexAuthPath } from '@automaker/platform';
+import { spawnProcess } from '@automaker/platform';
 import { findCodexCliPath } from '@automaker/platform';
-import * as fs from 'fs';
+import { createLogger } from '@automaker/utils';
+
+const logger = createLogger('CodexAuth');
 
 const CODEX_COMMAND = 'codex';
 const OPENAI_API_KEY_ENV = 'OPENAI_API_KEY';
@@ -26,36 +28,16 @@ export interface CodexAuthCheckResult {
 export async function checkCodexAuthentication(
   cliPath?: string | null
 ): Promise<CodexAuthCheckResult> {
-  console.log('[CodexAuth] checkCodexAuthentication called with cliPath:', cliPath);
-
   const resolvedCliPath = cliPath || (await findCodexCliPath());
   const hasApiKey = !!process.env[OPENAI_API_KEY_ENV];
 
-  console.log('[CodexAuth] resolvedCliPath:', resolvedCliPath);
-  console.log('[CodexAuth] hasApiKey:', hasApiKey);
-
-  // Debug: Check auth file
-  const authFilePath = getCodexAuthPath();
-  console.log('[CodexAuth] Auth file path:', authFilePath);
-  try {
-    const authFileExists = fs.existsSync(authFilePath);
-    console.log('[CodexAuth] Auth file exists:', authFileExists);
-    if (authFileExists) {
-      const authContent = fs.readFileSync(authFilePath, 'utf-8');
-      console.log('[CodexAuth] Auth file content:', authContent.substring(0, 500)); // First 500 chars
-    }
-  } catch (error) {
-    console.log('[CodexAuth] Error reading auth file:', error);
-  }
-
   // If CLI is not installed, cannot be authenticated
   if (!resolvedCliPath) {
-    console.log('[CodexAuth] No CLI path found, returning not authenticated');
+    logger.info('CLI not found');
     return { authenticated: false, method: 'none' };
   }
 
   try {
-    console.log('[CodexAuth] Running: ' + resolvedCliPath + ' login status');
     const result = await spawnProcess({
       command: resolvedCliPath || CODEX_COMMAND,
       args: ['login', 'status'],
@@ -66,33 +48,21 @@ export async function checkCodexAuthentication(
       },
     });
 
-    console.log('[CodexAuth] Command result:');
-    console.log('[CodexAuth]   exitCode:', result.exitCode);
-    console.log('[CodexAuth]   stdout:', JSON.stringify(result.stdout));
-    console.log('[CodexAuth]   stderr:', JSON.stringify(result.stderr));
-
     // Check both stdout and stderr for "logged in" - Codex CLI outputs to stderr
     const combinedOutput = (result.stdout + result.stderr).toLowerCase();
     const isLoggedIn = combinedOutput.includes('logged in');
-    console.log('[CodexAuth] isLoggedIn (contains "logged in" in stdout or stderr):', isLoggedIn);
 
     if (result.exitCode === 0 && isLoggedIn) {
       // Determine auth method based on what we know
       const method = hasApiKey ? 'api_key_env' : 'cli_authenticated';
-      console.log('[CodexAuth] Authenticated! method:', method);
+      logger.info(`✓ Authenticated (${method})`);
       return { authenticated: true, method };
     }
 
-    console.log(
-      '[CodexAuth] Not authenticated. exitCode:',
-      result.exitCode,
-      'isLoggedIn:',
-      isLoggedIn
-    );
+    logger.info('Not authenticated');
+    return { authenticated: false, method: 'none' };
   } catch (error) {
-    console.log('[CodexAuth] Error running command:', error);
+    logger.error('Failed to check authentication:', error);
+    return { authenticated: false, method: 'none' };
   }
-
-  console.log('[CodexAuth] Returning not authenticated');
-  return { authenticated: false, method: 'none' };
 }

apps/server/src/providers/codex-provider.ts

@@ -21,6 +21,7 @@ import {
   extractTextFromContent,
   classifyError,
   getUserFriendlyErrorMessage,
+  createLogger,
 } from '@automaker/utils';
 import type {
   ExecuteOptions,
@@ -658,6 +659,8 @@ async function loadCodexInstructions(cwd: string, enabled: boolean): Promise<str
     .join('\n\n');
 }
 
+const logger = createLogger('CodexProvider');
+
 export class CodexProvider extends BaseProvider {
   getName(): string {
     return 'codex';
@@ -967,21 +970,11 @@ export class CodexProvider extends BaseProvider {
   }
 
   async detectInstallation(): Promise<InstallationStatus> {
-    console.log('[CodexProvider.detectInstallation] Starting...');
-
     const cliPath = await findCodexCliPath();
     const hasApiKey = !!process.env[OPENAI_API_KEY_ENV];
     const authIndicators = await getCodexAuthIndicators();
     const installed = !!cliPath;
 
-    console.log('[CodexProvider.detectInstallation] cliPath:', cliPath);
-    console.log('[CodexProvider.detectInstallation] hasApiKey:', hasApiKey);
-    console.log(
-      '[CodexProvider.detectInstallation] authIndicators:',
-      JSON.stringify(authIndicators)
-    );
-    console.log('[CodexProvider.detectInstallation] installed:', installed);
-
     let version = '';
     if (installed) {
       try {
@@ -991,20 +984,16 @@ export class CodexProvider extends BaseProvider {
           cwd: process.cwd(),
         });
         version = result.stdout.trim();
-        console.log('[CodexProvider.detectInstallation] version:', version);
       } catch (error) {
-        console.log('[CodexProvider.detectInstallation] Error getting version:', error);
         version = '';
       }
     }
 
     // Determine auth status - always verify with CLI, never assume authenticated
-    console.log('[CodexProvider.detectInstallation] Calling checkCodexAuthentication...');
     const authCheck = await checkCodexAuthentication(cliPath);
-    console.log('[CodexProvider.detectInstallation] authCheck result:', JSON.stringify(authCheck));
     const authenticated = authCheck.authenticated;
 
-    const result = {
+    return {
       installed,
       path: cliPath || undefined,
       version: version || undefined,
@@ -1012,8 +1001,6 @@ export class CodexProvider extends BaseProvider {
       hasApiKey,
       authenticated,
     };
-    console.log('[CodexProvider.detectInstallation] Final result:', JSON.stringify(result));
-    return result;
   }
 
   getAvailableModels(): ModelDefinition[] {
@@ -1025,36 +1012,24 @@ export class CodexProvider extends BaseProvider {
    * Check authentication status for Codex CLI
    */
   async checkAuth(): Promise<CodexAuthStatus> {
-    console.log('[CodexProvider.checkAuth] Starting auth check...');
-
     const cliPath = await findCodexCliPath();
     const hasApiKey = !!process.env[OPENAI_API_KEY_ENV];
     const authIndicators = await getCodexAuthIndicators();
 
-    console.log('[CodexProvider.checkAuth] cliPath:', cliPath);
-    console.log('[CodexProvider.checkAuth] hasApiKey:', hasApiKey);
-    console.log('[CodexProvider.checkAuth] authIndicators:', JSON.stringify(authIndicators));
-
     // Check for API key in environment
     if (hasApiKey) {
-      console.log('[CodexProvider.checkAuth] Has API key, returning authenticated');
       return { authenticated: true, method: 'api_key' };
     }
 
     // Check for OAuth/token from Codex CLI
     if (authIndicators.hasOAuthToken || authIndicators.hasApiKey) {
-      console.log(
-        '[CodexProvider.checkAuth] Has OAuth token or API key in auth file, returning authenticated'
-      );
       return { authenticated: true, method: 'oauth' };
     }
 
     // CLI is installed but not authenticated via indicators - try CLI command
-    console.log('[CodexProvider.checkAuth] No indicators found, trying CLI command...');
     if (cliPath) {
       try {
         // Try 'codex login status' first (same as checkCodexAuthentication)
-        console.log('[CodexProvider.checkAuth] Running: ' + cliPath + ' login status');
         const result = await spawnProcess({
           command: cliPath || CODEX_COMMAND,
           args: ['login', 'status'],
@@ -1064,26 +1039,19 @@ export class CodexProvider extends BaseProvider {
             TERM: 'dumb',
           },
         });
-        console.log('[CodexProvider.checkAuth] login status result:');
-        console.log('[CodexProvider.checkAuth]   exitCode:', result.exitCode);
-        console.log('[CodexProvider.checkAuth]   stdout:', JSON.stringify(result.stdout));
-        console.log('[CodexProvider.checkAuth]   stderr:', JSON.stringify(result.stderr));
 
         // Check both stdout and stderr - Codex CLI outputs to stderr
         const combinedOutput = (result.stdout + result.stderr).toLowerCase();
         const isLoggedIn = combinedOutput.includes('logged in');
-        console.log('[CodexProvider.checkAuth] isLoggedIn:', isLoggedIn);
 
         if (result.exitCode === 0 && isLoggedIn) {
-          console.log('[CodexProvider.checkAuth] CLI says logged in, returning authenticated');
           return { authenticated: true, method: 'oauth' };
         }
       } catch (error) {
-        console.log('[CodexProvider.checkAuth] Error running login status:', error);
+        logger.warn('Error running login status command during auth check:', error);
       }
     }
 
-    console.log('[CodexProvider.checkAuth] Not authenticated');
     return { authenticated: false, method: 'none' };
   }
 

apps/server/src/providers/opencode-provider.ts

@@ -41,95 +41,103 @@ export interface OpenCodeAuthStatus {
 
 /**
  * Base interface for all OpenCode stream events
+ * OpenCode uses underscore format: step_start, step_finish, text
  */
 interface OpenCodeBaseEvent {
   /** Event type identifier */
   type: string;
-  /** Optional session identifier */
-  session_id?: string;
+  /** Timestamp of the event */
+  timestamp?: number;
+  /** Session ID */
+  sessionID?: string;
+  /** Part object containing the actual event data */
+  part?: Record<string, unknown>;
 }
 
 /**
- * Text delta event - Incremental text output from the model
+ * Text event - Text output from the model
+ * Format: {"type":"text","part":{"text":"content",...}}
  */
-export interface OpenCodeTextDeltaEvent extends OpenCodeBaseEvent {
-  type: 'text-delta';
-  /** The incremental text content */
-  text: string;
-}
-
-/**
- * Text end event - Signals completion of text generation
- */
-export interface OpenCodeTextEndEvent extends OpenCodeBaseEvent {
-  type: 'text-end';
+export interface OpenCodeTextEvent extends OpenCodeBaseEvent {
+  type: 'text';
+  part: {
+    type: 'text';
+    text: string;
+    [key: string]: unknown;
+  };
 }
 
 /**
  * Tool call event - Request to execute a tool
  */
 export interface OpenCodeToolCallEvent extends OpenCodeBaseEvent {
-  type: 'tool-call';
-  /** Unique identifier for this tool call */
-  call_id?: string;
-  /** Tool name to invoke */
-  name: string;
-  /** Arguments to pass to the tool */
-  args: unknown;
+  type: 'tool_call';
+  part: {
+    type: 'tool-call';
+    name: string;
+    call_id?: string;
+    args: unknown;
+    [key: string]: unknown;
+  };
 }
 
 /**
  * Tool result event - Output from a tool execution
  */
 export interface OpenCodeToolResultEvent extends OpenCodeBaseEvent {
-  type: 'tool-result';
-  /** The tool call ID this result corresponds to */
-  call_id?: string;
-  /** Output from the tool execution */
-  output: string;
+  type: 'tool_result';
+  part: {
+    type: 'tool-result';
+    call_id?: string;
+    output: string;
+    [key: string]: unknown;
+  };
 }
 
 /**
  * Tool error event - Tool execution failed
  */
 export interface OpenCodeToolErrorEvent extends OpenCodeBaseEvent {
-  type: 'tool-error';
-  /** The tool call ID that failed */
-  call_id?: string;
-  /** Error message describing the failure */
-  error: string;
+  type: 'tool_error';
+  part: {
+    type: 'tool-error';
+    call_id?: string;
+    error: string;
+    [key: string]: unknown;
+  };
 }
 
 /**
  * Start step event - Begins an agentic loop iteration
+ * Format: {"type":"step_start","part":{...}}
  */
 export interface OpenCodeStartStepEvent extends OpenCodeBaseEvent {
-  type: 'start-step';
-  /** Step number in the agentic loop */
-  step?: number;
+  type: 'step_start';
+  part?: {
+    type: 'step-start';
+    [key: string]: unknown;
+  };
 }
 
 /**
  * Finish step event - Completes an agentic loop iteration
+ * Format: {"type":"step_finish","part":{"reason":"stop",...}}
  */
 export interface OpenCodeFinishStepEvent extends OpenCodeBaseEvent {
-  type: 'finish-step';
-  /** Step number that completed */
-  step?: number;
-  /** Whether the step completed successfully */
-  success?: boolean;
-  /** Optional result data */
-  result?: string;
-  /** Optional error if step failed */
-  error?: string;
+  type: 'step_finish';
+  part?: {
+    type: 'step-finish';
+    reason?: string;
+    error?: string;
+    [key: string]: unknown;
+  };
 }
 
 /**
  * Union type of all OpenCode stream events
  */
 export type OpenCodeStreamEvent =
-  | OpenCodeTextDeltaEvent
-  | OpenCodeTextEndEvent
+  | OpenCodeTextEvent
   | OpenCodeToolCallEvent
   | OpenCodeToolResultEvent
   | OpenCodeToolErrorEvent
@@ -219,14 +227,12 @@ export class OpencodeProvider extends CliProvider {
    *
    * Arguments built:
    * - 'run' subcommand for executing queries
-   * - '--format', 'stream-json' for JSONL streaming output
-   * - '-q' / '--quiet' to suppress spinner and interactive elements
-   * - '-c', '<cwd>' for working directory
+   * - '--format', 'json' for JSON streaming output
    * - '--model', '<model>' for model selection (if specified)
-   * - '-' as final arg to read prompt from stdin
+   * - Message passed via stdin (no positional args needed)
    *
-   * The prompt is NOT included in CLI args - it's passed via stdin to avoid
-   * shell escaping issues with special characters in content.
+   * The prompt is passed via stdin to avoid shell escaping issues.
+   * OpenCode will read from stdin when no positional message arguments are provided.
    *
    * @param options - Execution options containing model, cwd, etc.
    * @returns Array of CLI arguments for opencode run
@@ -234,27 +240,18 @@ export class OpencodeProvider extends CliProvider {
   buildCliArgs(options: ExecuteOptions): string[] {
     const args: string[] = ['run'];
 
-    // Add streaming JSON output format for JSONL parsing
-    args.push('--format', 'stream-json');
-
-    // Suppress spinner and interactive elements for non-TTY usage
-    args.push('-q');
-
-    // Set working directory
-    if (options.cwd) {
-      args.push('-c', options.cwd);
-    }
+    // Add JSON output format for streaming
+    args.push('--format', 'json');
 
     // Handle model selection
-    // Strip 'opencode-' prefix if present, OpenCode uses format like 'anthropic/claude-sonnet-4-5'
+    // Strip 'opencode-' prefix if present, OpenCode uses native format
     if (options.model) {
       const model = stripProviderPrefix(options.model);
       args.push('--model', model);
     }
 
-    // Use '-' to indicate reading prompt from stdin
-    // This avoids shell escaping issues with special characters
-    args.push('-');
+    // Note: Working directory is set via subprocess cwd option, not CLI args
+    // Note: Message is passed via stdin, OpenCode reads from stdin automatically
 
     return args;
   }
@@ -314,14 +311,12 @@ export class OpencodeProvider extends CliProvider {
    * Normalize a raw CLI event to ProviderMessage format
    *
    * Maps OpenCode event types to the standard ProviderMessage structure:
-   * - text-delta -> type: 'assistant', content with type: 'text'
-   * - text-end -> null (informational, no message needed)
-   * - tool-call -> type: 'assistant', content with type: 'tool_use'
-   * - tool-result -> type: 'assistant', content with type: 'tool_result'
-   * - tool-error -> type: 'error'
-   * - start-step -> null (informational, no message needed)
-   * - finish-step with success -> type: 'result', subtype: 'success'
-   * - finish-step with error -> type: 'error'
+   * - text -> type: 'assistant', content with type: 'text'
+   * - step_start -> null (informational, no message needed)
+   * - step_finish -> type: 'result', subtype: 'success' (or error if failed)
+   * - tool_call -> type: 'assistant', content with type: 'tool_use'
+   * - tool_result -> type: 'assistant', content with type: 'tool_result'
+   * - tool_error -> type: 'error'
    *
    * @param event - Raw event from OpenCode CLI JSONL output
    * @returns Normalized ProviderMessage or null to skip the event
@@ -334,24 +329,24 @@ export class OpencodeProvider extends CliProvider {
     const openCodeEvent = event as OpenCodeStreamEvent;
 
     switch (openCodeEvent.type) {
-      case 'text-delta': {
-        const textEvent = openCodeEvent as OpenCodeTextDeltaEvent;
+      case 'text': {
+        const textEvent = openCodeEvent as OpenCodeTextEvent;
 
-        // Skip empty text deltas
-        if (!textEvent.text) {
+        // Skip if no text content
+        if (!textEvent.part?.text) {
           return null;
         }
 
         const content: ContentBlock[] = [
           {
             type: 'text',
-            text: textEvent.text,
+            text: textEvent.part.text,
           },
         ];
 
         return {
           type: 'assistant',
-          session_id: textEvent.session_id,
+          session_id: textEvent.sessionID,
           message: {
             role: 'assistant',
             content,
@@ -359,90 +354,105 @@ export class OpencodeProvider extends CliProvider {
         };
       }
 
-      case 'text-end': {
-        // Text end is informational - no message needed
-        return null;
-      }
-
-      case 'tool-call': {
-        const toolEvent = openCodeEvent as OpenCodeToolCallEvent;
-
-        // Generate a tool use ID if not provided
-        const toolUseId = toolEvent.call_id || generateToolUseId();
-
-        const content: ContentBlock[] = [
-          {
-            type: 'tool_use',
-            name: toolEvent.name,
-            tool_use_id: toolUseId,
-            input: toolEvent.args,
-          },
-        ];
-
-        return {
-          type: 'assistant',
-          session_id: toolEvent.session_id,
-          message: {
-            role: 'assistant',
-            content,
-          },
-        };
-      }
-
-      case 'tool-result': {
-        const resultEvent = openCodeEvent as OpenCodeToolResultEvent;
-
-        const content: ContentBlock[] = [
-          {
-            type: 'tool_result',
-            tool_use_id: resultEvent.call_id,
-            content: resultEvent.output,
-          },
-        ];
-
-        return {
-          type: 'assistant',
-          session_id: resultEvent.session_id,
-          message: {
-            role: 'assistant',
-            content,
-          },
-        };
-      }
-
-      case 'tool-error': {
-        const errorEvent = openCodeEvent as OpenCodeToolErrorEvent;
-
-        return {
-          type: 'error',
-          session_id: errorEvent.session_id,
-          error: errorEvent.error || 'Tool execution failed',
-        };
-      }
-
-      case 'start-step': {
+      case 'step_start': {
         // Start step is informational - no message needed
         return null;
       }
 
-      case 'finish-step': {
+      case 'step_finish': {
         const finishEvent = openCodeEvent as OpenCodeFinishStepEvent;
 
-        // Check if the step failed
-        if (finishEvent.success === false || finishEvent.error) {
+        // Check if the step failed (either has error field or reason is 'error')
+        if (finishEvent.part?.error || finishEvent.part?.reason === 'error') {
           return {
             type: 'error',
-            session_id: finishEvent.session_id,
-            error: finishEvent.error || 'Step execution failed',
+            session_id: finishEvent.sessionID,
+            error: finishEvent.part?.error || 'Step execution failed',
           };
         }
 
         // Successful completion
+        const result: { type: 'result'; subtype: 'success'; session_id?: string; result?: string } =
+          {
+            type: 'result',
+            subtype: 'success',
+          };
+
+        if (finishEvent.sessionID) {
+          result.session_id = finishEvent.sessionID;
+        }
+
+        // Safely handle arbitrary result payloads from CLI: ensure we assign a string.
+        const rawResult =
+          (finishEvent.part && (finishEvent.part as Record<string, unknown>).result) ?? undefined;
+        if (rawResult !== undefined) {
+          result.result = typeof rawResult === 'string' ? rawResult : JSON.stringify(rawResult);
+        }
+
+        return result;
+      }
+
+      case 'tool_call': {
+        const toolEvent = openCodeEvent as OpenCodeToolCallEvent;
+
+        if (!toolEvent.part) {
+          return null;
+        }
+
+        // Generate a tool use ID if not provided
+        const toolUseId = toolEvent.part.call_id || generateToolUseId();
+
+        const content: ContentBlock[] = [
+          {
+            type: 'tool_use',
+            name: toolEvent.part.name,
+            tool_use_id: toolUseId,
+            input: toolEvent.part.args,
+          },
+        ];
+
         return {
-          type: 'result',
-          subtype: 'success',
-          session_id: finishEvent.session_id,
-          result: finishEvent.result,
+          type: 'assistant',
+          session_id: toolEvent.sessionID,
+          message: {
+            role: 'assistant',
+            content,
+          },
+        };
+      }
+
+      case 'tool_result': {
+        const resultEvent = openCodeEvent as OpenCodeToolResultEvent;
+
+        if (!resultEvent.part) {
+          return null;
+        }
+
+        const content: ContentBlock[] = [
+          {
+            type: 'tool_result',
+            tool_use_id: resultEvent.part.call_id,
+            content: resultEvent.part.output,
+          },
+        ];
+
+        return {
+          type: 'assistant',
+          session_id: resultEvent.sessionID,
+          message: {
+            role: 'assistant',
+            content,
+          },
+        };
+      }
+
+      case 'tool_error': {
+        const errorEvent = openCodeEvent as OpenCodeToolErrorEvent;
+
+        return {
+          type: 'error',
+          session_id: errorEvent.sessionID,
+          error: errorEvent.part?.error || 'Tool execution failed',
         };
       }
 

apps/server/src/routes/app-spec/common.ts

@@ -6,26 +6,57 @@ import { createLogger } from '@automaker/utils';
 
 const logger = createLogger('SpecRegeneration');
 
-// Shared state for tracking generation status - private
-let isRunning = false;
-let currentAbortController: AbortController | null = null;
+// Shared state for tracking generation status - scoped by project path
+const runningProjects = new Map<string, boolean>();
+const abortControllers = new Map<string, AbortController>();
 
 /**
- * Get the current running state
+ * Get the running state for a specific project
  */
-export function getSpecRegenerationStatus(): {
+export function getSpecRegenerationStatus(projectPath?: string): {
   isRunning: boolean;
   currentAbortController: AbortController | null;
+  projectPath?: string;
 } {
-  return { isRunning, currentAbortController };
+  if (projectPath) {
+    return {
+      isRunning: runningProjects.get(projectPath) || false,
+      currentAbortController: abortControllers.get(projectPath) || null,
+      projectPath,
+    };
+  }
+  // Fallback: check if any project is running (for backward compatibility)
+  const isAnyRunning = Array.from(runningProjects.values()).some((running) => running);
+  return { isRunning: isAnyRunning, currentAbortController: null };
 }
 
 /**
- * Set the running state and abort controller
+ * Get the project path that is currently running (if any)
  */
-export function setRunningState(running: boolean, controller: AbortController | null = null): void {
-  isRunning = running;
-  currentAbortController = controller;
+export function getRunningProjectPath(): string | null {
+  for (const [path, running] of runningProjects.entries()) {
+    if (running) return path;
+  }
+  return null;
+}
+
+/**
+ * Set the running state and abort controller for a specific project
+ */
+export function setRunningState(
+  projectPath: string,
+  running: boolean,
+  controller: AbortController | null = null
+): void {
+  if (running) {
+    runningProjects.set(projectPath, true);
+    if (controller) {
+      abortControllers.set(projectPath, controller);
+    }
+  } else {
+    runningProjects.delete(projectPath);
+    abortControllers.delete(projectPath);
+  }
 }
 
 /**

apps/server/src/routes/app-spec/routes/create.ts

@@ -47,17 +47,17 @@ export function createCreateHandler(events: EventEmitter) {
         return;
       }
 
-      const { isRunning } = getSpecRegenerationStatus();
+      const { isRunning } = getSpecRegenerationStatus(projectPath);
       if (isRunning) {
-        logger.warn('Generation already running, rejecting request');
-        res.json({ success: false, error: 'Spec generation already running' });
+        logger.warn('Generation already running for project:', projectPath);
+        res.json({ success: false, error: 'Spec generation already running for this project' });
         return;
       }
 
       logAuthStatus('Before starting generation');
 
       const abortController = new AbortController();
-      setRunningState(true, abortController);
+      setRunningState(projectPath, true, abortController);
       logger.info('Starting background generation task...');
 
       // Start generation in background
@@ -80,7 +80,7 @@ export function createCreateHandler(events: EventEmitter) {
         })
         .finally(() => {
           logger.info('Generation task finished (success or error)');
-          setRunningState(false, null);
+          setRunningState(projectPath, false, null);
         });
 
       logger.info('Returning success response (generation running in background)');

apps/server/src/routes/app-spec/routes/generate-features.ts

@@ -40,17 +40,17 @@ export function createGenerateFeaturesHandler(
         return;
       }
 
-      const { isRunning } = getSpecRegenerationStatus();
+      const { isRunning } = getSpecRegenerationStatus(projectPath);
       if (isRunning) {
-        logger.warn('Generation already running, rejecting request');
-        res.json({ success: false, error: 'Generation already running' });
+        logger.warn('Generation already running for project:', projectPath);
+        res.json({ success: false, error: 'Generation already running for this project' });
         return;
       }
 
       logAuthStatus('Before starting feature generation');
 
       const abortController = new AbortController();
-      setRunningState(true, abortController);
+      setRunningState(projectPath, true, abortController);
       logger.info('Starting background feature generation task...');
 
       generateFeaturesFromSpec(projectPath, events, abortController, maxFeatures, settingsService)
@@ -63,7 +63,7 @@ export function createGenerateFeaturesHandler(
         })
         .finally(() => {
           logger.info('Feature generation task finished (success or error)');
-          setRunningState(false, null);
+          setRunningState(projectPath, false, null);
         });
 
       logger.info('Returning success response (generation running in background)');

apps/server/src/routes/app-spec/routes/generate.ts

@@ -48,17 +48,17 @@ export function createGenerateHandler(events: EventEmitter, settingsService?: Se
         return;
       }
 
-      const { isRunning } = getSpecRegenerationStatus();
+      const { isRunning } = getSpecRegenerationStatus(projectPath);
       if (isRunning) {
-        logger.warn('Generation already running, rejecting request');
-        res.json({ success: false, error: 'Spec generation already running' });
+        logger.warn('Generation already running for project:', projectPath);
+        res.json({ success: false, error: 'Spec generation already running for this project' });
         return;
       }
 
       logAuthStatus('Before starting generation');
 
       const abortController = new AbortController();
-      setRunningState(true, abortController);
+      setRunningState(projectPath, true, abortController);
       logger.info('Starting background generation task...');
 
       generateSpec(
@@ -81,7 +81,7 @@ export function createGenerateHandler(events: EventEmitter, settingsService?: Se
         })
         .finally(() => {
           logger.info('Generation task finished (success or error)');
-          setRunningState(false, null);
+          setRunningState(projectPath, false, null);
         });
 
       logger.info('Returning success response (generation running in background)');

apps/server/src/routes/app-spec/routes/status.ts

@@ -6,10 +6,11 @@ import type { Request, Response } from 'express';
 import { getSpecRegenerationStatus, getErrorMessage } from '../common.js';
 
 export function createStatusHandler() {
-  return async (_req: Request, res: Response): Promise<void> => {
+  return async (req: Request, res: Response): Promise<void> => {
     try {
-      const { isRunning } = getSpecRegenerationStatus();
-      res.json({ success: true, isRunning });
+      const projectPath = req.query.projectPath as string | undefined;
+      const { isRunning } = getSpecRegenerationStatus(projectPath);
+      res.json({ success: true, isRunning, projectPath });
     } catch (error) {
       res.status(500).json({ success: false, error: getErrorMessage(error) });
     }

apps/server/src/routes/app-spec/routes/stop.ts

@@ -6,13 +6,16 @@ import type { Request, Response } from 'express';
 import { getSpecRegenerationStatus, setRunningState, getErrorMessage } from '../common.js';
 
 export function createStopHandler() {
-  return async (_req: Request, res: Response): Promise<void> => {
+  return async (req: Request, res: Response): Promise<void> => {
     try {
-      const { currentAbortController } = getSpecRegenerationStatus();
+      const { projectPath } = req.body as { projectPath?: string };
+      const { currentAbortController } = getSpecRegenerationStatus(projectPath);
       if (currentAbortController) {
         currentAbortController.abort();
       }
-      setRunningState(false, null);
+      if (projectPath) {
+        setRunningState(projectPath, false, null);
+      }
       res.json({ success: true });
     } catch (error) {
       res.status(500).json({ success: false, error: getErrorMessage(error) });

apps/server/src/routes/auto-mode/index.ts

@@ -17,6 +17,7 @@ import { createAnalyzeProjectHandler } from './routes/analyze-project.js';
 import { createFollowUpFeatureHandler } from './routes/follow-up-feature.js';
 import { createCommitFeatureHandler } from './routes/commit-feature.js';
 import { createApprovePlanHandler } from './routes/approve-plan.js';
+import { createResumeInterruptedHandler } from './routes/resume-interrupted.js';
 
 export function createAutoModeRoutes(autoModeService: AutoModeService): Router {
   const router = Router();
@@ -63,6 +64,11 @@ export function createAutoModeRoutes(autoModeService: AutoModeService): Router {
     validatePathParams('projectPath'),
     createApprovePlanHandler(autoModeService)
   );
+  router.post(
+    '/resume-interrupted',
+    validatePathParams('projectPath'),
+    createResumeInterruptedHandler(autoModeService)
+  );
 
   return router;
 }

apps/server/src/routes/auto-mode/routes/resume-interrupted.ts

@@ -0,0 +1,42 @@
+/**
+ * Resume Interrupted Features Handler
+ *
+ * Checks for features that were interrupted (in pipeline steps or in_progress)
+ * when the server was restarted and resumes them.
+ */
+
+import type { Request, Response } from 'express';
+import { createLogger } from '@automaker/utils';
+import type { AutoModeService } from '../../../services/auto-mode-service.js';
+
+const logger = createLogger('ResumeInterrupted');
+
+interface ResumeInterruptedRequest {
+  projectPath: string;
+}
+
+export function createResumeInterruptedHandler(autoModeService: AutoModeService) {
+  return async (req: Request, res: Response): Promise<void> => {
+    const { projectPath } = req.body as ResumeInterruptedRequest;
+
+    if (!projectPath) {
+      res.status(400).json({ error: 'Project path is required' });
+      return;
+    }
+
+    logger.info(`Checking for interrupted features in ${projectPath}`);
+
+    try {
+      await autoModeService.resumeInterruptedFeatures(projectPath);
+      res.json({
+        success: true,
+        message: 'Resume check completed',
+      });
+    } catch (error) {
+      logger.error('Error resuming interrupted features:', error);
+      res.status(500).json({
+        error: error instanceof Error ? error.message : 'Unknown error',
+      });
+    }
+  };
+}

apps/server/src/routes/codex/index.ts

@@ -1,17 +1,21 @@
 import { Router, Request, Response } from 'express';
 import { CodexUsageService } from '../../services/codex-usage-service.js';
+import { CodexModelCacheService } from '../../services/codex-model-cache-service.js';
 import { createLogger } from '@automaker/utils';
 
 const logger = createLogger('Codex');
 
-export function createCodexRoutes(service: CodexUsageService): Router {
+export function createCodexRoutes(
+  usageService: CodexUsageService,
+  modelCacheService: CodexModelCacheService
+): Router {
   const router = Router();
 
   // Get current usage (attempts to fetch from Codex CLI)
-  router.get('/usage', async (req: Request, res: Response) => {
+  router.get('/usage', async (_req: Request, res: Response) => {
     try {
       // Check if Codex CLI is available first
-      const isAvailable = await service.isAvailable();
+      const isAvailable = await usageService.isAvailable();
       if (!isAvailable) {
         // IMPORTANT: This endpoint is behind Automaker session auth already.
         // Use a 200 + error payload for Codex CLI issues so the UI doesn't
@@ -23,7 +27,7 @@ export function createCodexRoutes(service: CodexUsageService): Router {
         return;
       }
 
-      const usage = await service.fetchUsageData();
+      const usage = await usageService.fetchUsageData();
       res.json(usage);
     } catch (error) {
       const message = error instanceof Error ? error.message : 'Unknown error';
@@ -52,5 +56,35 @@ export function createCodexRoutes(service: CodexUsageService): Router {
     }
   });
 
+  // Get available Codex models (cached)
+  router.get('/models', async (req: Request, res: Response) => {
+    try {
+      const forceRefresh = req.query.refresh === 'true';
+      const { models, cachedAt } = await modelCacheService.getModelsWithMetadata(forceRefresh);
+
+      if (models.length === 0) {
+        res.status(503).json({
+          success: false,
+          error: 'Codex CLI not available or not authenticated',
+          message: "Please install Codex CLI and run 'codex login' to authenticate",
+        });
+        return;
+      }
+
+      res.json({
+        success: true,
+        models,
+        cachedAt,
+      });
+    } catch (error) {
+      logger.error('Error fetching models:', error);
+      const message = error instanceof Error ? error.message : 'Unknown error';
+      res.status(500).json({
+        success: false,
+        error: message,
+      });
+    }
+  });
+
   return router;
 }

apps/server/src/routes/enhance-prompt/routes/enhance.ts

@@ -188,6 +188,7 @@ export function createEnhanceHandler(
         technical: prompts.enhancement.technicalSystemPrompt,
         simplify: prompts.enhancement.simplifySystemPrompt,
         acceptance: prompts.enhancement.acceptanceSystemPrompt,
+        'ux-reviewer': prompts.enhancement.uxReviewerSystemPrompt,
       };
       const systemPrompt = systemPromptMap[validMode];
 

apps/server/src/routes/features/index.ts

@@ -10,6 +10,7 @@ import { createGetHandler } from './routes/get.js';
 import { createCreateHandler } from './routes/create.js';
 import { createUpdateHandler } from './routes/update.js';
 import { createBulkUpdateHandler } from './routes/bulk-update.js';
+import { createBulkDeleteHandler } from './routes/bulk-delete.js';
 import { createDeleteHandler } from './routes/delete.js';
 import { createAgentOutputHandler, createRawOutputHandler } from './routes/agent-output.js';
 import { createGenerateTitleHandler } from './routes/generate-title.js';
@@ -26,6 +27,11 @@ export function createFeaturesRoutes(featureLoader: FeatureLoader): Router {
     validatePathParams('projectPath'),
     createBulkUpdateHandler(featureLoader)
   );
+  router.post(
+    '/bulk-delete',
+    validatePathParams('projectPath'),
+    createBulkDeleteHandler(featureLoader)
+  );
   router.post('/delete', validatePathParams('projectPath'), createDeleteHandler(featureLoader));
   router.post('/agent-output', createAgentOutputHandler(featureLoader));
   router.post('/raw-output', createRawOutputHandler(featureLoader));

apps/server/src/routes/features/routes/bulk-delete.ts

@@ -0,0 +1,61 @@
+/**
+ * POST /bulk-delete endpoint - Delete multiple features at once
+ */
+
+import type { Request, Response } from 'express';
+import { FeatureLoader } from '../../../services/feature-loader.js';
+import { getErrorMessage, logError } from '../common.js';
+
+interface BulkDeleteRequest {
+  projectPath: string;
+  featureIds: string[];
+}
+
+interface BulkDeleteResult {
+  featureId: string;
+  success: boolean;
+  error?: string;
+}
+
+export function createBulkDeleteHandler(featureLoader: FeatureLoader) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, featureIds } = req.body as BulkDeleteRequest;
+
+      if (!projectPath || !featureIds || !Array.isArray(featureIds) || featureIds.length === 0) {
+        res.status(400).json({
+          success: false,
+          error: 'projectPath and featureIds (non-empty array) are required',
+        });
+        return;
+      }
+
+      const results = await Promise.all(
+        featureIds.map(async (featureId) => {
+          const success = await featureLoader.delete(projectPath, featureId);
+          if (success) {
+            return { featureId, success: true };
+          }
+          return {
+            featureId,
+            success: false,
+            error: 'Deletion failed. Check server logs for details.',
+          };
+        })
+      );
+
+      const successCount = results.reduce((count, r) => count + (r.success ? 1 : 0), 0);
+      const failureCount = results.length - successCount;
+
+      res.json({
+        success: failureCount === 0,
+        deletedCount: successCount,
+        failedCount: failureCount,
+        results,
+      });
+    } catch (error) {
+      logError(error, 'Bulk delete features failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}

apps/server/src/routes/features/routes/update.ts

@@ -16,7 +16,7 @@ export function createUpdateHandler(featureLoader: FeatureLoader) {
           featureId: string;
           updates: Partial<Feature>;
           descriptionHistorySource?: 'enhance' | 'edit';
-          enhancementMode?: 'improve' | 'technical' | 'simplify' | 'acceptance';
+          enhancementMode?: 'improve' | 'technical' | 'simplify' | 'acceptance' | 'ux-reviewer';
         };
 
       if (!projectPath || !featureId || !updates) {

apps/server/src/routes/worktree/routes/list.ts

@@ -2,18 +2,23 @@
  * POST /list endpoint - List all git worktrees
  *
  * Returns actual git worktrees from `git worktree list`.
+ * Also scans .worktrees/ directory to discover worktrees that may have been
+ * created externally or whose git state was corrupted.
  * Does NOT include tracked branches - only real worktrees with separate directories.
  */
 
 import type { Request, Response } from 'express';
 import { exec } from 'child_process';
 import { promisify } from 'util';
+import path from 'path';
 import * as secureFs from '../../../lib/secure-fs.js';
 import { isGitRepo } from '@automaker/git-utils';
 import { getErrorMessage, logError, normalizePath } from '../common.js';
 import { readAllWorktreeMetadata, type WorktreePRInfo } from '../../../lib/worktree-metadata.js';
+import { createLogger } from '@automaker/utils';
 
 const execAsync = promisify(exec);
+const logger = createLogger('Worktree');
 
 interface WorktreeInfo {
   path: string;
@@ -35,6 +40,87 @@ async function getCurrentBranch(cwd: string): Promise<string> {
   }
 }
 
+/**
+ * Scan the .worktrees directory to discover worktrees that may exist on disk
+ * but are not registered with git (e.g., created externally or corrupted state).
+ */
+async function scanWorktreesDirectory(
+  projectPath: string,
+  knownWorktreePaths: Set<string>
+): Promise<Array<{ path: string; branch: string }>> {
+  const discovered: Array<{ path: string; branch: string }> = [];
+  const worktreesDir = path.join(projectPath, '.worktrees');
+
+  try {
+    // Check if .worktrees directory exists
+    await secureFs.access(worktreesDir);
+  } catch {
+    // .worktrees directory doesn't exist
+    return discovered;
+  }
+
+  try {
+    const entries = await secureFs.readdir(worktreesDir, { withFileTypes: true });
+
+    for (const entry of entries) {
+      if (!entry.isDirectory()) continue;
+
+      const worktreePath = path.join(worktreesDir, entry.name);
+      const normalizedPath = normalizePath(worktreePath);
+
+      // Skip if already known from git worktree list
+      if (knownWorktreePaths.has(normalizedPath)) continue;
+
+      // Check if this is a valid git repository
+      const gitPath = path.join(worktreePath, '.git');
+      try {
+        const gitStat = await secureFs.stat(gitPath);
+
+        // Git worktrees have a .git FILE (not directory) that points to the parent repo
+        // Regular repos have a .git DIRECTORY
+        if (gitStat.isFile() || gitStat.isDirectory()) {
+          // Try to get the branch name
+          const branch = await getCurrentBranch(worktreePath);
+          if (branch) {
+            logger.info(
+              `Discovered worktree in .worktrees/ not in git worktree list: ${entry.name} (branch: ${branch})`
+            );
+            discovered.push({
+              path: normalizedPath,
+              branch,
+            });
+          } else {
+            // Try to get branch from HEAD if branch --show-current fails (detached HEAD)
+            try {
+              const { stdout: headRef } = await execAsync('git rev-parse --abbrev-ref HEAD', {
+                cwd: worktreePath,
+              });
+              const headBranch = headRef.trim();
+              if (headBranch && headBranch !== 'HEAD') {
+                logger.info(
+                  `Discovered worktree in .worktrees/ not in git worktree list: ${entry.name} (branch: ${headBranch})`
+                );
+                discovered.push({
+                  path: normalizedPath,
+                  branch: headBranch,
+                });
+              }
+            } catch {
+              // Can't determine branch, skip this directory
+            }
+          }
+        }
+      } catch {
+        // Not a git repo, skip
+      }
+    }
+  } catch (error) {
+    logger.warn(`Failed to scan .worktrees directory: ${getErrorMessage(error)}`);
+  }
+
+  return discovered;
+}
+
 export function createListHandler() {
   return async (req: Request, res: Response): Promise<void> => {
     try {
@@ -116,6 +202,22 @@ export function createListHandler() {
         }
       }
 
+      // Scan .worktrees directory to discover worktrees that exist on disk
+      // but are not registered with git (e.g., created externally)
+      const knownPaths = new Set(worktrees.map((w) => w.path));
+      const discoveredWorktrees = await scanWorktreesDirectory(projectPath, knownPaths);
+
+      // Add discovered worktrees to the list
+      for (const discovered of discoveredWorktrees) {
+        worktrees.push({
+          path: discovered.path,
+          branch: discovered.branch,
+          isMain: false,
+          isCurrent: discovered.branch === currentBranch,
+          hasWorktree: true,
+        });
+      }
+
       // Read all worktree metadata to get PR info
       const allMetadata = await readAllWorktreeMetadata(projectPath);
 

apps/server/src/services/auto-mode-service.ts

@@ -31,7 +31,13 @@ import {
 const logger = createLogger('AutoMode');
 import { resolveModelString, resolvePhaseModel, DEFAULT_MODELS } from '@automaker/model-resolver';
 import { resolveDependencies, areDependenciesSatisfied } from '@automaker/dependency-resolver';
-import { getFeatureDir, getAutomakerDir, getFeaturesDir } from '@automaker/platform';
+import {
+  getFeatureDir,
+  getAutomakerDir,
+  getFeaturesDir,
+  getExecutionStatePath,
+  ensureAutomakerDir,
+} from '@automaker/platform';
 import { exec } from 'child_process';
 import { promisify } from 'util';
 import path from 'path';
@@ -201,6 +207,29 @@ interface AutoModeConfig {
   projectPath: string;
 }
 
+/**
+ * Execution state for recovery after server restart
+ * Tracks which features were running and auto-loop configuration
+ */
+interface ExecutionState {
+  version: 1;
+  autoLoopWasRunning: boolean;
+  maxConcurrency: number;
+  projectPath: string;
+  runningFeatureIds: string[];
+  savedAt: string;
+}
+
+// Default empty execution state
+const DEFAULT_EXECUTION_STATE: ExecutionState = {
+  version: 1,
+  autoLoopWasRunning: false,
+  maxConcurrency: 3,
+  projectPath: '',
+  runningFeatureIds: [],
+  savedAt: '',
+};
+
 // Constants for consecutive failure tracking
 const CONSECUTIVE_FAILURE_THRESHOLD = 3; // Pause after 3 consecutive failures
 const FAILURE_WINDOW_MS = 60000; // Failures within 1 minute count as consecutive
@@ -322,6 +351,9 @@ export class AutoModeService {
       projectPath,
     });
 
+    // Save execution state for recovery after restart
+    await this.saveExecutionState(projectPath);
+
     // Note: Memory folder initialization is now handled by loadContextFiles
 
     // Run the loop in the background
@@ -390,17 +422,23 @@ export class AutoModeService {
    */
   async stopAutoLoop(): Promise<number> {
     const wasRunning = this.autoLoopRunning;
+    const projectPath = this.config?.projectPath;
     this.autoLoopRunning = false;
     if (this.autoLoopAbortController) {
       this.autoLoopAbortController.abort();
       this.autoLoopAbortController = null;
     }
 
+    // Clear execution state when auto-loop is explicitly stopped
+    if (projectPath) {
+      await this.clearExecutionState(projectPath);
+    }
+
     // Emit stop event immediately when user explicitly stops
     if (wasRunning) {
       this.emitAutoModeEvent('auto_mode_stopped', {
         message: 'Auto mode stopped',
-        projectPath: this.config?.projectPath,
+        projectPath,
       });
     }
 
@@ -441,6 +479,11 @@ export class AutoModeService {
     };
     this.runningFeatures.set(featureId, tempRunningFeature);
 
+    // Save execution state when feature starts
+    if (isAutoMode) {
+      await this.saveExecutionState(projectPath);
+    }
+
     try {
       // Validate that project path is allowed using centralized validation
       validateWorkingDirectory(projectPath);
@@ -695,6 +738,11 @@ export class AutoModeService {
         `Pending approvals at cleanup: ${Array.from(this.pendingApprovals.keys()).join(', ') || 'none'}`
       );
       this.runningFeatures.delete(featureId);
+
+      // Update execution state after feature completes
+      if (this.autoLoopRunning && projectPath) {
+        await this.saveExecutionState(projectPath);
+      }
     }
   }
 
@@ -2950,6 +2998,149 @@ Begin implementing task ${task.id} now.`;
     });
   }
 
+  // ============================================================================
+  // Execution State Persistence - For recovery after server restart
+  // ============================================================================
+
+  /**
+   * Save execution state to disk for recovery after server restart
+   */
+  private async saveExecutionState(projectPath: string): Promise<void> {
+    try {
+      await ensureAutomakerDir(projectPath);
+      const statePath = getExecutionStatePath(projectPath);
+      const state: ExecutionState = {
+        version: 1,
+        autoLoopWasRunning: this.autoLoopRunning,
+        maxConcurrency: this.config?.maxConcurrency ?? 3,
+        projectPath,
+        runningFeatureIds: Array.from(this.runningFeatures.keys()),
+        savedAt: new Date().toISOString(),
+      };
+      await secureFs.writeFile(statePath, JSON.stringify(state, null, 2), 'utf-8');
+      logger.info(`Saved execution state: ${state.runningFeatureIds.length} running features`);
+    } catch (error) {
+      logger.error('Failed to save execution state:', error);
+    }
+  }
+
+  /**
+   * Load execution state from disk
+   */
+  private async loadExecutionState(projectPath: string): Promise<ExecutionState> {
+    try {
+      const statePath = getExecutionStatePath(projectPath);
+      const content = (await secureFs.readFile(statePath, 'utf-8')) as string;
+      const state = JSON.parse(content) as ExecutionState;
+      return state;
+    } catch (error) {
+      if ((error as NodeJS.ErrnoException).code !== 'ENOENT') {
+        logger.error('Failed to load execution state:', error);
+      }
+      return DEFAULT_EXECUTION_STATE;
+    }
+  }
+
+  /**
+   * Clear execution state (called on successful shutdown or when auto-loop stops)
+   */
+  private async clearExecutionState(projectPath: string): Promise<void> {
+    try {
+      const statePath = getExecutionStatePath(projectPath);
+      await secureFs.unlink(statePath);
+      logger.info('Cleared execution state');
+    } catch (error) {
+      if ((error as NodeJS.ErrnoException).code !== 'ENOENT') {
+        logger.error('Failed to clear execution state:', error);
+      }
+    }
+  }
+
+  /**
+   * Check for and resume interrupted features after server restart
+   * This should be called during server initialization
+   */
+  async resumeInterruptedFeatures(projectPath: string): Promise<void> {
+    logger.info('Checking for interrupted features to resume...');
+
+    // Load all features and find those that were interrupted
+    const featuresDir = getFeaturesDir(projectPath);
+
+    try {
+      const entries = await secureFs.readdir(featuresDir, { withFileTypes: true });
+      const interruptedFeatures: Feature[] = [];
+
+      for (const entry of entries) {
+        if (entry.isDirectory()) {
+          const featurePath = path.join(featuresDir, entry.name, 'feature.json');
+          try {
+            const data = (await secureFs.readFile(featurePath, 'utf-8')) as string;
+            const feature = JSON.parse(data) as Feature;
+
+            // Check if feature was interrupted (in_progress or pipeline_*)
+            if (
+              feature.status === 'in_progress' ||
+              (feature.status && feature.status.startsWith('pipeline_'))
+            ) {
+              // Verify it has existing context (agent-output.md)
+              const featureDir = getFeatureDir(projectPath, feature.id);
+              const contextPath = path.join(featureDir, 'agent-output.md');
+              try {
+                await secureFs.access(contextPath);
+                interruptedFeatures.push(feature);
+                logger.info(
+                  `Found interrupted feature: ${feature.id} (${feature.title}) - status: ${feature.status}`
+                );
+              } catch {
+                // No context file, skip this feature - it will be restarted fresh
+                logger.info(`Interrupted feature ${feature.id} has no context, will restart fresh`);
+              }
+            }
+          } catch {
+            // Skip invalid features
+          }
+        }
+      }
+
+      if (interruptedFeatures.length === 0) {
+        logger.info('No interrupted features found');
+        return;
+      }
+
+      logger.info(`Found ${interruptedFeatures.length} interrupted feature(s) to resume`);
+
+      // Emit event to notify UI
+      this.emitAutoModeEvent('auto_mode_resuming_features', {
+        message: `Resuming ${interruptedFeatures.length} interrupted feature(s) after server restart`,
+        projectPath,
+        featureIds: interruptedFeatures.map((f) => f.id),
+        features: interruptedFeatures.map((f) => ({
+          id: f.id,
+          title: f.title,
+          status: f.status,
+        })),
+      });
+
+      // Resume each interrupted feature
+      for (const feature of interruptedFeatures) {
+        try {
+          logger.info(`Resuming feature: ${feature.id} (${feature.title})`);
+          // Use resumeFeature which will detect the existing context and continue
+          await this.resumeFeature(projectPath, feature.id, true);
+        } catch (error) {
+          logger.error(`Failed to resume feature ${feature.id}:`, error);
+          // Continue with other features
+        }
+      }
+    } catch (error) {
+      if ((error as NodeJS.ErrnoException).code === 'ENOENT') {
+        logger.info('No features directory found, nothing to resume');
+      } else {
+        logger.error('Error checking for interrupted features:', error);
+      }
+    }
+  }
+
   /**
    * Extract and record learnings from a completed feature
    * Uses a quick Claude call to identify important decisions and patterns

apps/server/src/services/claude-usage-service.ts

@@ -2,6 +2,7 @@ import { spawn } from 'child_process';
 import * as os from 'os';
 import * as pty from 'node-pty';
 import { ClaudeUsage } from '../routes/claude/types.js';
+import { createLogger } from '@automaker/utils';
 
 /**
  * Claude Usage Service
@@ -14,6 +15,8 @@ import { ClaudeUsage } from '../routes/claude/types.js';
  * - macOS: Uses 'expect' command for PTY
  * - Windows/Linux: Uses node-pty for PTY
  */
+const logger = createLogger('ClaudeUsage');
+
 export class ClaudeUsageService {
   private claudeBinary = 'claude';
   private timeout = 30000; // 30 second timeout
@@ -164,21 +167,40 @@ export class ClaudeUsageService {
       const shell = this.isWindows ? 'cmd.exe' : '/bin/sh';
       const args = this.isWindows ? ['/c', 'claude', '/usage'] : ['-c', 'claude /usage'];
 
-      const ptyProcess = pty.spawn(shell, args, {
-        name: 'xterm-256color',
-        cols: 120,
-        rows: 30,
-        cwd: workingDirectory,
-        env: {
-          ...process.env,
-          TERM: 'xterm-256color',
-        } as Record<string, string>,
-      });
+      let ptyProcess: any = null;
+
+      try {
+        ptyProcess = pty.spawn(shell, args, {
+          name: 'xterm-256color',
+          cols: 120,
+          rows: 30,
+          cwd: workingDirectory,
+          env: {
+            ...process.env,
+            TERM: 'xterm-256color',
+          } as Record<string, string>,
+        });
+      } catch (spawnError) {
+        // pty.spawn() can throw synchronously if the native module fails to load
+        // or if PTY is not available in the current environment (e.g., containers without /dev/pts)
+        const errorMessage = spawnError instanceof Error ? spawnError.message : String(spawnError);
+        logger.error('[executeClaudeUsageCommandPty] Failed to spawn PTY:', errorMessage);
+
+        // Return a user-friendly error instead of crashing
+        reject(
+          new Error(
+            `Unable to access terminal: ${errorMessage}. Claude CLI may not be available or PTY support is limited in this environment.`
+          )
+        );
+        return;
+      }
 
       const timeoutId = setTimeout(() => {
         if (!settled) {
           settled = true;
-          ptyProcess.kill();
+          if (ptyProcess && !ptyProcess.killed) {
+            ptyProcess.kill();
+          }
           // Don't fail if we have data - return it instead
           if (output.includes('Current session')) {
             resolve(output);
@@ -188,7 +210,7 @@ export class ClaudeUsageService {
         }
       }, this.timeout);
 
-      ptyProcess.onData((data) => {
+      ptyProcess.onData((data: string) => {
         output += data;
 
         // Check if we've seen the usage data (look for "Current session")
@@ -196,12 +218,12 @@ export class ClaudeUsageService {
           hasSeenUsageData = true;
           // Wait for full output, then send escape to exit
           setTimeout(() => {
-            if (!settled) {
+            if (!settled && ptyProcess && !ptyProcess.killed) {
               ptyProcess.write('\x1b'); // Send escape key
 
               // Fallback: if ESC doesn't exit (Linux), use SIGTERM after 2s
               setTimeout(() => {
-                if (!settled) {
+                if (!settled && ptyProcess && !ptyProcess.killed) {
                   ptyProcess.kill('SIGTERM');
                 }
               }, 2000);
@@ -212,14 +234,14 @@ export class ClaudeUsageService {
         // Fallback: if we see "Esc to cancel" but haven't seen usage data yet
         if (!hasSeenUsageData && output.includes('Esc to cancel')) {
           setTimeout(() => {
-            if (!settled) {
+            if (!settled && ptyProcess && !ptyProcess.killed) {
               ptyProcess.write('\x1b'); // Send escape key
             }
           }, 3000);
         }
       });
 
-      ptyProcess.onExit(({ exitCode }) => {
+      ptyProcess.onExit(({ exitCode }: { exitCode: number }) => {
         clearTimeout(timeoutId);
         if (settled) return;
         settled = true;

apps/server/src/services/codex-app-server-service.ts

@@ -0,0 +1,212 @@
+import { spawn, type ChildProcess } from 'child_process';
+import readline from 'readline';
+import { findCodexCliPath } from '@automaker/platform';
+import { createLogger } from '@automaker/utils';
+import type {
+  AppServerModelResponse,
+  AppServerAccountResponse,
+  AppServerRateLimitsResponse,
+  JsonRpcRequest,
+} from '@automaker/types';
+
+const logger = createLogger('CodexAppServer');
+
+/**
+ * CodexAppServerService
+ *
+ * Centralized service for communicating with Codex CLI's app-server via JSON-RPC protocol.
+ * Handles process spawning, JSON-RPC messaging, and cleanup.
+ *
+ * Connection strategy: Spawn on-demand (new process for each method call)
+ */
+export class CodexAppServerService {
+  private cachedCliPath: string | null = null;
+
+  /**
+   * Check if Codex CLI is available on the system
+   */
+  async isAvailable(): Promise<boolean> {
+    this.cachedCliPath = await findCodexCliPath();
+    return Boolean(this.cachedCliPath);
+  }
+
+  /**
+   * Fetch available models from app-server
+   */
+  async getModels(): Promise<AppServerModelResponse | null> {
+    const result = await this.executeJsonRpc<AppServerModelResponse>((sendRequest) => {
+      return sendRequest('model/list', {});
+    });
+
+    if (result) {
+      logger.info(`[getModels] ✓ Fetched ${result.data.length} models`);
+    }
+
+    return result;
+  }
+
+  /**
+   * Fetch account information from app-server
+   */
+  async getAccount(): Promise<AppServerAccountResponse | null> {
+    return this.executeJsonRpc<AppServerAccountResponse>((sendRequest) => {
+      return sendRequest('account/read', { refreshToken: false });
+    });
+  }
+
+  /**
+   * Fetch rate limits from app-server
+   */
+  async getRateLimits(): Promise<AppServerRateLimitsResponse | null> {
+    return this.executeJsonRpc<AppServerRateLimitsResponse>((sendRequest) => {
+      return sendRequest('account/rateLimits/read', {});
+    });
+  }
+
+  /**
+   * Execute JSON-RPC requests via Codex app-server
+   *
+   * This method:
+   * 1. Spawns a new `codex app-server` process
+   * 2. Handles JSON-RPC initialization handshake
+   * 3. Executes user-provided requests
+   * 4. Cleans up the process
+   *
+   * @param requestFn - Function that receives sendRequest helper and returns a promise
+   * @returns Result of the JSON-RPC request or null on failure
+   */
+  private async executeJsonRpc<T>(
+    requestFn: (sendRequest: <R>(method: string, params?: unknown) => Promise<R>) => Promise<T>
+  ): Promise<T | null> {
+    let childProcess: ChildProcess | null = null;
+
+    try {
+      const cliPath = this.cachedCliPath || (await findCodexCliPath());
+
+      if (!cliPath) {
+        return null;
+      }
+
+      // On Windows, .cmd files must be run through shell
+      const needsShell = process.platform === 'win32' && cliPath.toLowerCase().endsWith('.cmd');
+
+      childProcess = spawn(cliPath, ['app-server'], {
+        cwd: process.cwd(),
+        env: {
+          ...process.env,
+          TERM: 'dumb',
+        },
+        stdio: ['pipe', 'pipe', 'pipe'],
+        shell: needsShell,
+      });
+
+      if (!childProcess.stdin || !childProcess.stdout) {
+        throw new Error('Failed to create stdio pipes');
+      }
+
+      // Setup readline for reading JSONL responses
+      const rl = readline.createInterface({
+        input: childProcess.stdout,
+        crlfDelay: Infinity,
+      });
+
+      // Message ID counter for JSON-RPC
+      let messageId = 0;
+      const pendingRequests = new Map<
+        number,
+        {
+          resolve: (value: unknown) => void;
+          reject: (error: Error) => void;
+          timeout: NodeJS.Timeout;
+        }
+      >();
+
+      // Process incoming messages
+      rl.on('line', (line) => {
+        if (!line.trim()) return;
+
+        try {
+          const message = JSON.parse(line);
+
+          // Handle response to our request
+          if ('id' in message && message.id !== undefined) {
+            const pending = pendingRequests.get(message.id);
+            if (pending) {
+              clearTimeout(pending.timeout);
+              pendingRequests.delete(message.id);
+              if (message.error) {
+                pending.reject(new Error(message.error.message || 'Unknown error'));
+              } else {
+                pending.resolve(message.result);
+              }
+            }
+          }
+          // Ignore notifications (no id field)
+        } catch {
+          // Ignore parse errors for non-JSON lines
+        }
+      });
+
+      // Helper to send JSON-RPC request and wait for response
+      const sendRequest = <R>(method: string, params?: unknown): Promise<R> => {
+        return new Promise((resolve, reject) => {
+          const id = ++messageId;
+          const request: JsonRpcRequest = {
+            method,
+            id,
+            params: params ?? {},
+          };
+
+          // Set timeout for request (10 seconds)
+          const timeout = setTimeout(() => {
+            pendingRequests.delete(id);
+            reject(new Error(`Request timeout: ${method}`));
+          }, 10000);
+
+          pendingRequests.set(id, {
+            resolve: resolve as (value: unknown) => void,
+            reject,
+            timeout,
+          });
+
+          childProcess!.stdin!.write(JSON.stringify(request) + '\n');
+        });
+      };
+
+      // Helper to send notification (no response expected)
+      const sendNotification = (method: string, params?: unknown): void => {
+        const notification = params ? { method, params } : { method };
+        childProcess!.stdin!.write(JSON.stringify(notification) + '\n');
+      };
+
+      // 1. Initialize the app-server
+      await sendRequest('initialize', {
+        clientInfo: {
+          name: 'automaker',
+          title: 'AutoMaker',
+          version: '1.0.0',
+        },
+      });
+
+      // 2. Send initialized notification
+      sendNotification('initialized');
+
+      // 3. Execute user-provided requests
+      const result = await requestFn(sendRequest);
+
+      // Clean up
+      rl.close();
+      childProcess.kill('SIGTERM');
+
+      return result;
+    } catch (error) {
+      logger.error('[executeJsonRpc] Failed:', error);
+      return null;
+    } finally {
+      // Ensure process is killed
+      if (childProcess && !childProcess.killed) {
+        childProcess.kill('SIGTERM');
+      }
+    }
+  }
+}

apps/server/src/services/codex-model-cache-service.ts

@@ -0,0 +1,258 @@
+import path from 'path';
+import { secureFs } from '@automaker/platform';
+import { createLogger } from '@automaker/utils';
+import type { AppServerModel } from '@automaker/types';
+import type { CodexAppServerService } from './codex-app-server-service.js';
+
+const logger = createLogger('CodexModelCache');
+
+/**
+ * Codex model with UI-compatible format
+ */
+export interface CodexModel {
+  id: string;
+  label: string;
+  description: string;
+  hasThinking: boolean;
+  supportsVision: boolean;
+  tier: 'premium' | 'standard' | 'basic';
+  isDefault: boolean;
+}
+
+/**
+ * Cache structure stored on disk
+ */
+interface CodexModelCache {
+  models: CodexModel[];
+  cachedAt: number;
+  ttl: number;
+}
+
+/**
+ * CodexModelCacheService
+ *
+ * Caches Codex models fetched from app-server with TTL-based invalidation and disk persistence.
+ *
+ * Features:
+ * - 1-hour TTL (configurable)
+ * - Atomic file writes (temp file + rename)
+ * - Thread-safe (deduplicates concurrent refresh requests)
+ * - Auto-bootstrap on service creation
+ * - Graceful fallback (returns empty array on errors)
+ */
+export class CodexModelCacheService {
+  private cacheFilePath: string;
+  private ttl: number;
+  private appServerService: CodexAppServerService;
+  private inFlightRefresh: Promise<CodexModel[]> | null = null;
+
+  constructor(
+    dataDir: string,
+    appServerService: CodexAppServerService,
+    ttl: number = 3600000 // 1 hour default
+  ) {
+    this.cacheFilePath = path.join(dataDir, 'codex-models-cache.json');
+    this.ttl = ttl;
+    this.appServerService = appServerService;
+  }
+
+  /**
+   * Get models from cache or fetch if stale
+   *
+   * @param forceRefresh - If true, bypass cache and fetch fresh data
+   * @returns Array of Codex models (empty array if unavailable)
+   */
+  async getModels(forceRefresh = false): Promise<CodexModel[]> {
+    // If force refresh, skip cache
+    if (forceRefresh) {
+      return this.refreshModels();
+    }
+
+    // Try to load from cache
+    const cached = await this.loadFromCache();
+    if (cached) {
+      const age = Date.now() - cached.cachedAt;
+      const isStale = age > cached.ttl;
+
+      if (!isStale) {
+        logger.info(
+          `[getModels] ✓ Using cached models (${cached.models.length} models, age: ${Math.round(age / 60000)}min)`
+        );
+        return cached.models;
+      }
+    }
+
+    // Cache is stale or missing, refresh
+    return this.refreshModels();
+  }
+
+  /**
+   * Get models with cache metadata
+   *
+   * @param forceRefresh - If true, bypass cache and fetch fresh data
+   * @returns Object containing models and cache timestamp
+   */
+  async getModelsWithMetadata(
+    forceRefresh = false
+  ): Promise<{ models: CodexModel[]; cachedAt: number }> {
+    const models = await this.getModels(forceRefresh);
+
+    // Try to get the actual cache timestamp
+    const cached = await this.loadFromCache();
+    const cachedAt = cached?.cachedAt ?? Date.now();
+
+    return { models, cachedAt };
+  }
+
+  /**
+   * Refresh models from app-server and update cache
+   *
+   * Thread-safe: Deduplicates concurrent refresh requests
+   */
+  async refreshModels(): Promise<CodexModel[]> {
+    // Deduplicate concurrent refresh requests
+    if (this.inFlightRefresh) {
+      return this.inFlightRefresh;
+    }
+
+    // Start new refresh
+    this.inFlightRefresh = this.doRefresh();
+
+    try {
+      const models = await this.inFlightRefresh;
+      return models;
+    } finally {
+      this.inFlightRefresh = null;
+    }
+  }
+
+  /**
+   * Clear the cache file
+   */
+  async clearCache(): Promise<void> {
+    logger.info('[clearCache] Clearing cache...');
+
+    try {
+      await secureFs.unlink(this.cacheFilePath);
+      logger.info('[clearCache] Cache cleared');
+    } catch (error) {
+      if ((error as NodeJS.ErrnoException).code !== 'ENOENT') {
+        logger.error('[clearCache] Failed to clear cache:', error);
+      }
+    }
+  }
+
+  /**
+   * Internal method to perform the actual refresh
+   */
+  private async doRefresh(): Promise<CodexModel[]> {
+    try {
+      // Check if app-server is available
+      const isAvailable = await this.appServerService.isAvailable();
+      if (!isAvailable) {
+        return [];
+      }
+
+      // Fetch models from app-server
+      const response = await this.appServerService.getModels();
+      if (!response || !response.data) {
+        return [];
+      }
+
+      // Transform models to UI format
+      const models = response.data.map((model) => this.transformModel(model));
+
+      // Save to cache
+      await this.saveToCache(models);
+
+      logger.info(`[refreshModels] ✓ Fetched fresh models (${models.length} models)`);
+
+      return models;
+    } catch (error) {
+      logger.error('[doRefresh] Refresh failed:', error);
+      return [];
+    }
+  }
+
+  /**
+   * Transform app-server model to UI-compatible format
+   */
+  private transformModel(appServerModel: AppServerModel): CodexModel {
+    return {
+      id: `codex-${appServerModel.id}`, // Add 'codex-' prefix for compatibility
+      label: appServerModel.displayName,
+      description: appServerModel.description,
+      hasThinking: appServerModel.supportedReasoningEfforts.length > 0,
+      supportsVision: true, // All Codex models support vision
+      tier: this.inferTier(appServerModel.id),
+      isDefault: appServerModel.isDefault,
+    };
+  }
+
+  /**
+   * Infer tier from model ID
+   */
+  private inferTier(modelId: string): 'premium' | 'standard' | 'basic' {
+    if (modelId.includes('max') || modelId.includes('gpt-5.2-codex')) {
+      return 'premium';
+    }
+    if (modelId.includes('mini')) {
+      return 'basic';
+    }
+    return 'standard';
+  }
+
+  /**
+   * Load cache from disk
+   */
+  private async loadFromCache(): Promise<CodexModelCache | null> {
+    try {
+      const content = await secureFs.readFile(this.cacheFilePath, 'utf-8');
+      const cache = JSON.parse(content.toString()) as CodexModelCache;
+
+      // Validate cache structure
+      if (!Array.isArray(cache.models) || typeof cache.cachedAt !== 'number') {
+        logger.warn('[loadFromCache] Invalid cache structure, ignoring');
+        return null;
+      }
+
+      return cache;
+    } catch (error) {
+      if ((error as NodeJS.ErrnoException).code !== 'ENOENT') {
+        logger.warn('[loadFromCache] Failed to read cache:', error);
+      }
+      return null;
+    }
+  }
+
+  /**
+   * Save cache to disk (atomic write)
+   */
+  private async saveToCache(models: CodexModel[]): Promise<void> {
+    const cache: CodexModelCache = {
+      models,
+      cachedAt: Date.now(),
+      ttl: this.ttl,
+    };
+
+    const tempPath = `${this.cacheFilePath}.tmp.${Date.now()}`;
+
+    try {
+      // Write to temp file
+      const content = JSON.stringify(cache, null, 2);
+      await secureFs.writeFile(tempPath, content, 'utf-8');
+
+      // Atomic rename
+      await secureFs.rename(tempPath, this.cacheFilePath);
+    } catch (error) {
+      logger.error('[saveToCache] Failed to save cache:', error);
+
+      // Clean up temp file
+      try {
+        await secureFs.unlink(tempPath);
+      } catch {
+        // Ignore cleanup errors
+      }
+    }
+  }
+}

apps/server/src/services/codex-usage-service.ts

@@ -1,11 +1,11 @@
 import {
   findCodexCliPath,
-  spawnProcess,
   getCodexAuthPath,
   systemPathExists,
   systemPathReadFile,
 } from '@automaker/platform';
 import { createLogger } from '@automaker/utils';
+import type { CodexAppServerService } from './codex-app-server-service.js';
 
 const logger = createLogger('CodexUsage');
 
@@ -18,19 +18,12 @@ export interface CodexRateLimitWindow {
   resetsAt: number;
 }
 
-export interface CodexCreditsSnapshot {
-  balance?: string;
-  unlimited?: boolean;
-  hasCredits?: boolean;
-}
-
 export type CodexPlanType = 'free' | 'plus' | 'pro' | 'team' | 'enterprise' | 'edu' | 'unknown';
 
 export interface CodexUsageData {
   rateLimits: {
     primary?: CodexRateLimitWindow;
     secondary?: CodexRateLimitWindow;
-    credits?: CodexCreditsSnapshot;
     planType?: CodexPlanType;
   } | null;
   lastUpdated: string;
@@ -39,13 +32,24 @@ export interface CodexUsageData {
 /**
  * Codex Usage Service
  *
- * Attempts to fetch usage data from Codex CLI and OpenAI API.
- * Codex CLI doesn't provide a direct usage command, but we can:
- * 1. Parse usage info from error responses (rate limit errors contain plan info)
- * 2. Check for OpenAI API usage if API key is available
+ * Fetches usage data from Codex CLI using the app-server JSON-RPC API.
+ * Falls back to auth file parsing if app-server is unavailable.
  */
 export class CodexUsageService {
   private cachedCliPath: string | null = null;
+  private appServerService: CodexAppServerService | null = null;
+  private accountPlanTypeArray: CodexPlanType[] = [
+    'free',
+    'plus',
+    'pro',
+    'team',
+    'enterprise',
+    'edu',
+  ];
+
+  constructor(appServerService?: CodexAppServerService) {
+    this.appServerService = appServerService || null;
+  }
 
   /**
    * Check if Codex CLI is available on the system
@@ -58,60 +62,131 @@ export class CodexUsageService {
   /**
    * Attempt to fetch usage data
    *
-   * Tries multiple approaches:
-   * 1. Always try to get plan type from auth file first (authoritative source)
-   * 2. Check for OpenAI API key in environment for API usage
-   * 3. Make a test request to capture rate limit headers from CLI
-   * 4. Combine results from auth file and CLI
+   * Priority order:
+   * 1. Codex app-server JSON-RPC API (most reliable, provides real-time data)
+   * 2. Auth file JWT parsing (fallback for plan type)
    */
   async fetchUsageData(): Promise<CodexUsageData> {
+    logger.info('[fetchUsageData] Starting...');
     const cliPath = this.cachedCliPath || (await findCodexCliPath());
 
     if (!cliPath) {
+      logger.error('[fetchUsageData] Codex CLI not found');
       throw new Error('Codex CLI not found. Please install it with: npm install -g @openai/codex');
     }
 
-    // Always try to get plan type from auth file first - this is the authoritative source
-    const authPlanType = await this.getPlanTypeFromAuthFile();
+    logger.info(`[fetchUsageData] Using CLI path: ${cliPath}`);
 
-    // Check if user has an API key that we can use
-    const hasApiKey = !!process.env.OPENAI_API_KEY;
-
-    if (hasApiKey) {
-      // Try to get usage from OpenAI API
-      const openaiUsage = await this.fetchOpenAIUsage();
-      if (openaiUsage) {
-        // Merge with auth file plan type if available
-        if (authPlanType && openaiUsage.rateLimits) {
-          openaiUsage.rateLimits.planType = authPlanType;
-        }
-        return openaiUsage;
-      }
+    // Try to get usage from Codex app-server (most reliable method)
+    const appServerUsage = await this.fetchFromAppServer();
+    if (appServerUsage) {
+      logger.info('[fetchUsageData] ✓ Fetched usage from app-server');
+      return appServerUsage;
     }
 
-    // Try to get usage from Codex CLI by making a simple request
-    const codexUsage = await this.fetchCodexUsage(cliPath, authPlanType);
-    if (codexUsage) {
-      return codexUsage;
-    }
+    logger.info('[fetchUsageData] App-server failed, trying auth file fallback...');
 
-    // Fallback: try to parse full usage from auth file
+    // Fallback: try to parse usage from auth file
     const authUsage = await this.fetchFromAuthFile();
     if (authUsage) {
+      logger.info('[fetchUsageData] ✓ Fetched usage from auth file');
       return authUsage;
     }
 
-    // If all else fails, return a message with helpful information
-    throw new Error(
-      'Codex usage statistics require additional configuration. ' +
-        'To enable usage tracking:\n\n' +
-        '1. Set your OpenAI API key in the environment:\n' +
-        '   export OPENAI_API_KEY=sk-...\n\n' +
-        '2. Or check your usage at:\n' +
-        '   https://platform.openai.com/usage\n\n' +
-        'Note: If using Codex CLI with ChatGPT OAuth authentication, ' +
-        'usage data must be queried through your OpenAI account.'
-    );
+    logger.info('[fetchUsageData] All methods failed, returning unknown');
+
+    // If all else fails, return unknown
+    return {
+      rateLimits: {
+        planType: 'unknown',
+      },
+      lastUpdated: new Date().toISOString(),
+    };
+  }
+
+  /**
+   * Fetch usage data from Codex app-server using JSON-RPC API
+   * This is the most reliable method as it gets real-time data from OpenAI
+   */
+  private async fetchFromAppServer(): Promise<CodexUsageData | null> {
+    try {
+      // Use CodexAppServerService if available
+      if (!this.appServerService) {
+        return null;
+      }
+
+      // Fetch account and rate limits in parallel
+      const [accountResult, rateLimitsResult] = await Promise.all([
+        this.appServerService.getAccount(),
+        this.appServerService.getRateLimits(),
+      ]);
+
+      if (!accountResult) {
+        return null;
+      }
+
+      // Build response
+      // Prefer planType from rateLimits (more accurate/current) over account (can be stale)
+      let planType: CodexPlanType = 'unknown';
+
+      // First try rate limits planType (most accurate)
+      const rateLimitsPlanType = rateLimitsResult?.rateLimits?.planType;
+      if (rateLimitsPlanType) {
+        const normalizedType = rateLimitsPlanType.toLowerCase() as CodexPlanType;
+        if (this.accountPlanTypeArray.includes(normalizedType)) {
+          planType = normalizedType;
+        }
+      }
+
+      // Fall back to account planType if rate limits didn't have it
+      if (planType === 'unknown' && accountResult.account?.planType) {
+        const normalizedType = accountResult.account.planType.toLowerCase() as CodexPlanType;
+        if (this.accountPlanTypeArray.includes(normalizedType)) {
+          planType = normalizedType;
+        }
+      }
+
+      const result: CodexUsageData = {
+        rateLimits: {
+          planType,
+        },
+        lastUpdated: new Date().toISOString(),
+      };
+
+      // Add rate limit info if available
+      if (rateLimitsResult?.rateLimits?.primary) {
+        const primary = rateLimitsResult.rateLimits.primary;
+        result.rateLimits!.primary = {
+          limit: -1, // Not provided by API
+          used: -1, // Not provided by API
+          remaining: -1, // Not provided by API
+          usedPercent: primary.usedPercent,
+          windowDurationMins: primary.windowDurationMins,
+          resetsAt: primary.resetsAt,
+        };
+      }
+
+      // Add secondary rate limit if available
+      if (rateLimitsResult?.rateLimits?.secondary) {
+        const secondary = rateLimitsResult.rateLimits.secondary;
+        result.rateLimits!.secondary = {
+          limit: -1, // Not provided by API
+          used: -1, // Not provided by API
+          remaining: -1, // Not provided by API
+          usedPercent: secondary.usedPercent,
+          windowDurationMins: secondary.windowDurationMins,
+          resetsAt: secondary.resetsAt,
+        };
+      }
+
+      logger.info(
+        `[fetchFromAppServer] ✓ Plan: ${planType}, Primary: ${result.rateLimits?.primary?.usedPercent || 'N/A'}%, Secondary: ${result.rateLimits?.secondary?.usedPercent || 'N/A'}%`
+      );
+      return result;
+    } catch (error) {
+      logger.error('[fetchFromAppServer] Failed:', error);
+      return null;
+    }
   }
 
   /**
@@ -121,9 +196,11 @@ export class CodexUsageService {
   private async getPlanTypeFromAuthFile(): Promise<CodexPlanType> {
     try {
       const authFilePath = getCodexAuthPath();
-      const exists = await systemPathExists(authFilePath);
+      logger.info(`[getPlanTypeFromAuthFile] Auth file path: ${authFilePath}`);
+      const exists = systemPathExists(authFilePath);
 
       if (!exists) {
+        logger.warn('[getPlanTypeFromAuthFile] Auth file does not exist');
         return 'unknown';
       }
 
@@ -131,16 +208,24 @@ export class CodexUsageService {
       const authData = JSON.parse(authContent);
 
       if (!authData.tokens?.id_token) {
+        logger.info('[getPlanTypeFromAuthFile] No id_token in auth file');
         return 'unknown';
       }
 
       const claims = this.parseJwt(authData.tokens.id_token);
       if (!claims) {
+        logger.info('[getPlanTypeFromAuthFile] Failed to parse JWT');
         return 'unknown';
       }
 
+      logger.info('[getPlanTypeFromAuthFile] JWT claims keys:', Object.keys(claims));
+
       // Extract plan type from nested OpenAI auth object with type validation
       const openaiAuthClaim = claims['https://api.openai.com/auth'];
+      logger.info(
+        '[getPlanTypeFromAuthFile] OpenAI auth claim:',
+        JSON.stringify(openaiAuthClaim, null, 2)
+      );
 
       let accountType: string | undefined;
       let isSubscriptionExpired = false;
@@ -188,154 +273,23 @@ export class CodexUsageService {
       }
 
       if (accountType) {
-        const normalizedType = accountType.toLowerCase();
-        if (['free', 'plus', 'pro', 'team', 'enterprise', 'edu'].includes(normalizedType)) {
-          return normalizedType as CodexPlanType;
-        }
-      }
-    } catch (error) {
-      logger.error('Failed to get plan type from auth file:', error);
-    }
-
-    return 'unknown';
-  }
-
-  /**
-   * Try to fetch usage from OpenAI API using the API key
-   */
-  private async fetchOpenAIUsage(): Promise<CodexUsageData | null> {
-    const apiKey = process.env.OPENAI_API_KEY;
-    if (!apiKey) {
-      return null;
-    }
-
-    try {
-      const endTime = Math.floor(Date.now() / 1000);
-      const startTime = endTime - 7 * 24 * 60 * 60; // Last 7 days
-
-      const response = await fetch(
-        `https://api.openai.com/v1/organization/usage/completions?start_time=${startTime}&end_time=${endTime}&limit=1`,
-        {
-          headers: {
-            Authorization: `Bearer ${apiKey}`,
-            'Content-Type': 'application/json',
-          },
-        }
-      );
-
-      if (response.ok) {
-        const data = await response.json();
-        return this.parseOpenAIUsage(data);
-      }
-    } catch (error) {
-      logger.error('Failed to fetch from OpenAI API:', error);
-    }
-
-    return null;
-  }
-
-  /**
-   * Parse OpenAI usage API response
-   */
-  private parseOpenAIUsage(data: any): CodexUsageData {
-    let totalInputTokens = 0;
-    let totalOutputTokens = 0;
-
-    if (data.data && Array.isArray(data.data)) {
-      for (const bucket of data.data) {
-        if (bucket.results && Array.isArray(bucket.results)) {
-          for (const result of bucket.results) {
-            totalInputTokens += result.input_tokens || 0;
-            totalOutputTokens += result.output_tokens || 0;
-          }
-        }
-      }
-    }
-
-    return {
-      rateLimits: {
-        planType: 'unknown',
-        credits: {
-          hasCredits: true,
-        },
-      },
-      lastUpdated: new Date().toISOString(),
-    };
-  }
-
-  /**
-   * Try to fetch usage by making a test request to Codex CLI
-   * and parsing rate limit information from the response
-   */
-  private async fetchCodexUsage(
-    cliPath: string,
-    authPlanType: CodexPlanType
-  ): Promise<CodexUsageData | null> {
-    try {
-      // Make a simple request to trigger rate limit info if at limit
-      const result = await spawnProcess({
-        command: cliPath,
-        args: ['exec', '--', 'echo', 'test'],
-        cwd: process.cwd(),
-        env: {
-          ...process.env,
-          TERM: 'dumb',
-        },
-        timeout: 10000,
-      });
-
-      // Parse the output for rate limit information
-      const combinedOutput = (result.stdout + result.stderr).toLowerCase();
-
-      // Check if we got a rate limit error
-      const rateLimitMatch = combinedOutput.match(
-        /usage_limit_reached.*?"plan_type":"([^"]+)".*?"resets_at":(\d+).*?"resets_in_seconds":(\d+)/
-      );
-
-      if (rateLimitMatch) {
-        // Rate limit error contains the plan type - use that as it's the most authoritative
-        const planType = rateLimitMatch[1] as CodexPlanType;
-        const resetsAt = parseInt(rateLimitMatch[2], 10);
-        const resetsInSeconds = parseInt(rateLimitMatch[3], 10);
-
+        const normalizedType = accountType.toLowerCase() as CodexPlanType;
         logger.info(
-          `Rate limit hit - plan: ${planType}, resets in ${Math.ceil(resetsInSeconds / 60)} mins`
+          `[getPlanTypeFromAuthFile] Account type: "${accountType}", normalized: "${normalizedType}"`
         );
-
-        return {
-          rateLimits: {
-            planType,
-            primary: {
-              limit: 0,
-              used: 0,
-              remaining: 0,
-              usedPercent: 100,
-              windowDurationMins: Math.ceil(resetsInSeconds / 60),
-              resetsAt,
-            },
-          },
-          lastUpdated: new Date().toISOString(),
-        };
+        if (this.accountPlanTypeArray.includes(normalizedType)) {
+          logger.info(`[getPlanTypeFromAuthFile] Returning plan type: ${normalizedType}`);
+          return normalizedType;
+        }
+      } else {
+        logger.info('[getPlanTypeFromAuthFile] No account type found in claims');
       }
-
-      // No rate limit error - use the plan type from auth file
-      const isFreePlan = authPlanType === 'free';
-
-      return {
-        rateLimits: {
-          planType: authPlanType,
-          credits: {
-            hasCredits: true,
-            unlimited: !isFreePlan && authPlanType !== 'unknown',
-          },
-        },
-        lastUpdated: new Date().toISOString(),
-      };
     } catch (error) {
-      logger.error('Failed to fetch from Codex CLI:', error);
+      logger.error('[getPlanTypeFromAuthFile] Failed to get plan type from auth file:', error);
     }
 
-    return null;
+    logger.info('[getPlanTypeFromAuthFile] Returning unknown');
+    return 'unknown';
   }
 
   /**
@@ -343,27 +297,27 @@ export class CodexUsageService {
    * Reuses getPlanTypeFromAuthFile to avoid code duplication
    */
   private async fetchFromAuthFile(): Promise<CodexUsageData | null> {
+    logger.info('[fetchFromAuthFile] Starting...');
     try {
       const planType = await this.getPlanTypeFromAuthFile();
+      logger.info(`[fetchFromAuthFile] Got plan type: ${planType}`);
 
       if (planType === 'unknown') {
+        logger.info('[fetchFromAuthFile] Plan type unknown, returning null');
         return null;
       }
 
-      const isFreePlan = planType === 'free';
-
-      return {
+      const result: CodexUsageData = {
         rateLimits: {
           planType,
-          credits: {
-            hasCredits: true,
-            unlimited: !isFreePlan,
-          },
         },
         lastUpdated: new Date().toISOString(),
       };
+
+      logger.info('[fetchFromAuthFile] Returning result:', JSON.stringify(result, null, 2));
+      return result;
     } catch (error) {
-      logger.error('Failed to parse auth file:', error);
+      logger.error('[fetchFromAuthFile] Failed to parse auth file:', error);
     }
 
     return null;
@@ -372,7 +326,7 @@ export class CodexUsageService {
   /**
    * Parse JWT token to extract claims
    */
-  private parseJwt(token: string): any {
+  private parseJwt(token: string): Record<string, unknown> | null {
     try {
       const parts = token.split('.');
 
@@ -383,18 +337,8 @@ export class CodexUsageService {
       const base64Url = parts[1];
       const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
 
-      // Use Buffer for Node.js environment instead of atob
-      let jsonPayload: string;
-      if (typeof Buffer !== 'undefined') {
-        jsonPayload = Buffer.from(base64, 'base64').toString('utf-8');
-      } else {
-        jsonPayload = decodeURIComponent(
-          atob(base64)
-            .split('')
-            .map((c) => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2))
-            .join('')
-        );
-      }
+      // Use Buffer for Node.js environment
+      const jsonPayload = Buffer.from(base64, 'base64').toString('utf-8');
 
       return JSON.parse(jsonPayload);
     } catch {

apps/server/src/services/feature-loader.ts

@@ -314,7 +314,7 @@ export class FeatureLoader {
     featureId: string,
     updates: Partial<Feature>,
     descriptionHistorySource?: 'enhance' | 'edit',
-    enhancementMode?: 'improve' | 'technical' | 'simplify' | 'acceptance'
+    enhancementMode?: 'improve' | 'technical' | 'simplify' | 'acceptance' | 'ux-reviewer'
   ): Promise<Feature> {
     const feature = await this.get(projectPath, featureId);
     if (!feature) {

apps/server/src/services/settings-service.ts

@@ -22,7 +22,6 @@ import type {
   Credentials,
   ProjectSettings,
   KeyboardShortcuts,
-  AIProfile,
   ProjectRef,
   TrashedProjectRef,
   BoardBackgroundSettings,
@@ -299,7 +298,6 @@ export class SettingsService {
     ignoreEmptyArrayOverwrite('trashedProjects');
     ignoreEmptyArrayOverwrite('projectHistory');
     ignoreEmptyArrayOverwrite('recentFolders');
-    ignoreEmptyArrayOverwrite('aiProfiles');
     ignoreEmptyArrayOverwrite('mcpServers');
     ignoreEmptyArrayOverwrite('enabledCursorModels');
 
@@ -602,8 +600,6 @@ export class SettingsService {
         theme: (appState.theme as GlobalSettings['theme']) || 'dark',
         sidebarOpen: appState.sidebarOpen !== undefined ? (appState.sidebarOpen as boolean) : true,
         chatHistoryOpen: (appState.chatHistoryOpen as boolean) || false,
-        kanbanCardDetailLevel:
-          (appState.kanbanCardDetailLevel as GlobalSettings['kanbanCardDetailLevel']) || 'standard',
         maxConcurrency: (appState.maxConcurrency as number) || 3,
         defaultSkipTests:
           appState.defaultSkipTests !== undefined ? (appState.defaultSkipTests as boolean) : true,
@@ -617,18 +613,15 @@ export class SettingsService {
             : false,
         useWorktrees:
           appState.useWorktrees !== undefined ? (appState.useWorktrees as boolean) : true,
-        showProfilesOnly: (appState.showProfilesOnly as boolean) || false,
         defaultPlanningMode:
           (appState.defaultPlanningMode as GlobalSettings['defaultPlanningMode']) || 'skip',
         defaultRequirePlanApproval: (appState.defaultRequirePlanApproval as boolean) || false,
-        defaultAIProfileId: (appState.defaultAIProfileId as string | null) || null,
         muteDoneSound: (appState.muteDoneSound as boolean) || false,
         enhancementModel:
           (appState.enhancementModel as GlobalSettings['enhancementModel']) || 'sonnet',
         keyboardShortcuts:
           (appState.keyboardShortcuts as KeyboardShortcuts) ||
           DEFAULT_GLOBAL_SETTINGS.keyboardShortcuts,
-        aiProfiles: (appState.aiProfiles as AIProfile[]) || [],
         projects: (appState.projects as ProjectRef[]) || [],
         trashedProjects: (appState.trashedProjects as TrashedProjectRef[]) || [],
         projectHistory: (appState.projectHistory as string[]) || [],

apps/server/src/types/settings.ts

@@ -7,13 +7,11 @@
 
 export type {
   ThemeMode,
-  KanbanCardDetailLevel,
   ModelAlias,
   PlanningMode,
   ThinkingLevel,
   ModelProvider,
   KeyboardShortcuts,
-  AIProfile,
   ProjectRef,
   TrashedProjectRef,
   ChatSessionRef,

apps/server/tests/unit/providers/opencode-provider.test.ts

@@ -168,41 +168,23 @@ describe('opencode-provider.ts', () => {
     it('should build correct args with run subcommand', () => {
       const args = provider.buildCliArgs({
         prompt: 'Hello',
+        model: 'opencode/big-pickle',
         cwd: '/tmp/project',
       });
 
       expect(args[0]).toBe('run');
     });
 
-    it('should include --format stream-json for streaming output', () => {
+    it('should include --format json for streaming output', () => {
       const args = provider.buildCliArgs({
         prompt: 'Hello',
+        model: 'opencode/big-pickle',
         cwd: '/tmp/project',
       });
 
       const formatIndex = args.indexOf('--format');
       expect(formatIndex).toBeGreaterThan(-1);
-      expect(args[formatIndex + 1]).toBe('stream-json');
-    });
-
-    it('should include -q flag for quiet mode', () => {
-      const args = provider.buildCliArgs({
-        prompt: 'Hello',
-        cwd: '/tmp/project',
-      });
-
-      expect(args).toContain('-q');
-    });
-
-    it('should include working directory with -c flag', () => {
-      const args = provider.buildCliArgs({
-        prompt: 'Hello',
-        cwd: '/tmp/my-project',
-      });
-
-      const cwdIndex = args.indexOf('-c');
-      expect(cwdIndex).toBeGreaterThan(-1);
-      expect(args[cwdIndex + 1]).toBe('/tmp/my-project');
+      expect(args[formatIndex + 1]).toBe('json');
     });
 
     it('should include model with --model flag', () => {
@@ -228,30 +210,24 @@ describe('opencode-provider.ts', () => {
       expect(args[modelIndex + 1]).toBe('anthropic/claude-sonnet-4-5');
     });
 
-    it('should include dash as final arg for stdin prompt', () => {
-      const args = provider.buildCliArgs({
-        prompt: 'Hello',
-        cwd: '/tmp/project',
-      });
-
-      expect(args[args.length - 1]).toBe('-');
-    });
-
     it('should handle missing cwd', () => {
       const args = provider.buildCliArgs({
         prompt: 'Hello',
+        model: 'opencode/big-pickle',
       });
 
       expect(args).not.toContain('-c');
     });
 
-    it('should handle missing model', () => {
+    it('should handle model from opencode provider', () => {
       const args = provider.buildCliArgs({
         prompt: 'Hello',
+        model: 'opencode/big-pickle',
         cwd: '/tmp/project',
       });
 
-      expect(args).not.toContain('--model');
+      expect(args).toContain('--model');
+      expect(args).toContain('opencode/big-pickle');
     });
   });
 
@@ -260,12 +236,15 @@ describe('opencode-provider.ts', () => {
   // ==========================================================================
 
   describe('normalizeEvent', () => {
-    describe('text-delta events', () => {
-      it('should convert text-delta to assistant message with text content', () => {
+    describe('text events (new OpenCode format)', () => {
+      it('should convert text to assistant message with text content', () => {
         const event = {
-          type: 'text-delta',
-          text: 'Hello, world!',
-          session_id: 'test-session',
+          type: 'text',
+          part: {
+            type: 'text',
+            text: 'Hello, world!',
+          },
+          sessionID: 'test-session',
         };
 
         const result = provider.normalizeEvent(event);
@@ -285,10 +264,13 @@ describe('opencode-provider.ts', () => {
         });
       });
 
-      it('should return null for empty text-delta', () => {
+      it('should return null for empty text', () => {
         const event = {
-          type: 'text-delta',
-          text: '',
+          type: 'text',
+          part: {
+            type: 'text',
+            text: '',
+          },
         };
 
         const result = provider.normalizeEvent(event);
@@ -296,9 +278,10 @@ describe('opencode-provider.ts', () => {
         expect(result).toBeNull();
       });
 
-      it('should return null for text-delta with undefined text', () => {
+      it('should return null for text with undefined text', () => {
         const event = {
-          type: 'text-delta',
+          type: 'text',
+          part: {},
         };
 
         const result = provider.normalizeEvent(event);
@@ -307,27 +290,17 @@ describe('opencode-provider.ts', () => {
       });
     });
 
-    describe('text-end events', () => {
-      it('should return null for text-end events (informational)', () => {
+    describe('tool_call events', () => {
+      it('should convert tool_call to assistant message with tool_use content', () => {
         const event = {
-          type: 'text-end',
-          session_id: 'test-session',
-        };
-
-        const result = provider.normalizeEvent(event);
-
-        expect(result).toBeNull();
-      });
-    });
-
-    describe('tool-call events', () => {
-      it('should convert tool-call to assistant message with tool_use content', () => {
-        const event = {
-          type: 'tool-call',
-          call_id: 'call-123',
-          name: 'Read',
-          args: { file_path: '/tmp/test.txt' },
-          session_id: 'test-session',
+          type: 'tool_call',
+          part: {
+            type: 'tool-call',
+            call_id: 'call-123',
+            name: 'Read',
+            args: { file_path: '/tmp/test.txt' },
+          },
+          sessionID: 'test-session',
         };
 
         const result = provider.normalizeEvent(event);
@@ -351,9 +324,12 @@ describe('opencode-provider.ts', () => {
 
       it('should generate tool_use_id when call_id is missing', () => {
         const event = {
-          type: 'tool-call',
-          name: 'Write',
-          args: { content: 'test' },
+          type: 'tool_call',
+          part: {
+            type: 'tool-call',
+            name: 'Write',
+            args: { content: 'test' },
+          },
         };
 
         const result = provider.normalizeEvent(event);
@@ -363,21 +339,27 @@ describe('opencode-provider.ts', () => {
 
         // Second call should increment
         const result2 = provider.normalizeEvent({
-          type: 'tool-call',
-          name: 'Edit',
-          args: {},
+          type: 'tool_call',
+          part: {
+            type: 'tool-call',
+            name: 'Edit',
+            args: {},
+          },
         });
         expect(result2?.message?.content[0].tool_use_id).toBe('opencode-tool-2');
       });
     });
 
-    describe('tool-result events', () => {
-      it('should convert tool-result to assistant message with tool_result content', () => {
+    describe('tool_result events', () => {
+      it('should convert tool_result to assistant message with tool_result content', () => {
         const event = {
-          type: 'tool-result',
-          call_id: 'call-123',
-          output: 'File contents here',
-          session_id: 'test-session',
+          type: 'tool_result',
+          part: {
+            type: 'tool-result',
+            call_id: 'call-123',
+            output: 'File contents here',
+          },
+          sessionID: 'test-session',
         };
 
         const result = provider.normalizeEvent(event);
@@ -398,10 +380,13 @@ describe('opencode-provider.ts', () => {
         });
       });
 
-      it('should handle tool-result without call_id', () => {
+      it('should handle tool_result without call_id', () => {
         const event = {
-          type: 'tool-result',
-          output: 'Result without ID',
+          type: 'tool_result',
+          part: {
+            type: 'tool-result',
+            output: 'Result without ID',
+          },
         };
 
         const result = provider.normalizeEvent(event);
@@ -411,13 +396,16 @@ describe('opencode-provider.ts', () => {
       });
     });
 
-    describe('tool-error events', () => {
-      it('should convert tool-error to error message', () => {
+    describe('tool_error events', () => {
+      it('should convert tool_error to error message', () => {
         const event = {
-          type: 'tool-error',
-          call_id: 'call-123',
-          error: 'File not found',
-          session_id: 'test-session',
+          type: 'tool_error',
+          part: {
+            type: 'tool-error',
+            call_id: 'call-123',
+            error: 'File not found',
+          },
+          sessionID: 'test-session',
         };
 
         const result = provider.normalizeEvent(event);
@@ -431,8 +419,11 @@ describe('opencode-provider.ts', () => {
 
       it('should provide default error message when error is missing', () => {
         const event = {
-          type: 'tool-error',
-          call_id: 'call-123',
+          type: 'tool_error',
+          part: {
+            type: 'tool-error',
+            call_id: 'call-123',
+          },
         };
 
         const result = provider.normalizeEvent(event);
@@ -442,12 +433,14 @@ describe('opencode-provider.ts', () => {
       });
     });
 
-    describe('start-step events', () => {
-      it('should return null for start-step events (informational)', () => {
+    describe('step_start events', () => {
+      it('should return null for step_start events (informational)', () => {
         const event = {
-          type: 'start-step',
-          step: 1,
-          session_id: 'test-session',
+          type: 'step_start',
+          part: {
+            type: 'step-start',
+          },
+          sessionID: 'test-session',
         };
 
         const result = provider.normalizeEvent(event);
@@ -456,14 +449,16 @@ describe('opencode-provider.ts', () => {
       });
     });
 
-    describe('finish-step events', () => {
-      it('should convert successful finish-step to result message', () => {
+    describe('step_finish events', () => {
+      it('should convert successful step_finish to result message', () => {
         const event = {
-          type: 'finish-step',
-          step: 1,
-          success: true,
-          result: 'Task completed successfully',
-          session_id: 'test-session',
+          type: 'step_finish',
+          part: {
+            type: 'step-finish',
+            reason: 'stop',
+            result: 'Task completed successfully',
+          },
+          sessionID: 'test-session',
         };
 
         const result = provider.normalizeEvent(event);
@@ -476,13 +471,15 @@ describe('opencode-provider.ts', () => {
         });
       });
 
-      it('should convert finish-step with success=false to error message', () => {
+      it('should convert step_finish with error to error message', () => {
         const event = {
-          type: 'finish-step',
-          step: 1,
-          success: false,
-          error: 'Something went wrong',
-          session_id: 'test-session',
+          type: 'step_finish',
+          part: {
+            type: 'step-finish',
+            reason: 'error',
+            error: 'Something went wrong',
+          },
+          sessionID: 'test-session',
         };
 
         const result = provider.normalizeEvent(event);
@@ -494,11 +491,13 @@ describe('opencode-provider.ts', () => {
         });
       });
 
-      it('should convert finish-step with error property to error message', () => {
+      it('should convert step_finish with error property to error message', () => {
         const event = {
-          type: 'finish-step',
-          step: 1,
-          error: 'Process failed',
+          type: 'step_finish',
+          part: {
+            type: 'step-finish',
+            error: 'Process failed',
+          },
         };
 
         const result = provider.normalizeEvent(event);
@@ -509,9 +508,11 @@ describe('opencode-provider.ts', () => {
 
       it('should provide default error message for failed step without error text', () => {
         const event = {
-          type: 'finish-step',
-          step: 1,
-          success: false,
+          type: 'step_finish',
+          part: {
+            type: 'step-finish',
+            reason: 'error',
+          },
         };
 
         const result = provider.normalizeEvent(event);
@@ -520,11 +521,14 @@ describe('opencode-provider.ts', () => {
         expect(result?.error).toBe('Step execution failed');
       });
 
-      it('should treat finish-step without success flag as success', () => {
+      it('should treat step_finish with reason=stop as success', () => {
         const event = {
-          type: 'finish-step',
-          step: 1,
-          result: 'Done',
+          type: 'step_finish',
+          part: {
+            type: 'step-finish',
+            reason: 'stop',
+            result: 'Done',
+          },
         };
 
         const result = provider.normalizeEvent(event);
@@ -586,13 +590,12 @@ describe('opencode-provider.ts', () => {
       return mockedProvider;
     }
 
-    it('should stream text-delta events as assistant messages', async () => {
+    it('should stream text events as assistant messages', async () => {
       const mockedProvider = setupMockedProvider();
 
       const mockEvents = [
-        { type: 'text-delta', text: 'Hello ' },
-        { type: 'text-delta', text: 'World!' },
-        { type: 'text-end' },
+        { type: 'text', part: { type: 'text', text: 'Hello ' } },
+        { type: 'text', part: { type: 'text', text: 'World!' } },
       ];
 
       vi.mocked(spawnJSONLProcess).mockReturnValue(
@@ -611,7 +614,6 @@ describe('opencode-provider.ts', () => {
         })
       );
 
-      // text-end should be filtered out (returns null)
       expect(results).toHaveLength(2);
       expect(results[0].type).toBe('assistant');
       expect(results[0].message?.content[0].text).toBe('Hello ');
@@ -623,15 +625,21 @@ describe('opencode-provider.ts', () => {
 
       const mockEvents = [
         {
-          type: 'tool-call',
-          call_id: 'tool-1',
-          name: 'Read',
-          args: { file_path: '/tmp/test.txt' },
+          type: 'tool_call',
+          part: {
+            type: 'tool-call',
+            call_id: 'tool-1',
+            name: 'Read',
+            args: { file_path: '/tmp/test.txt' },
+          },
         },
         {
-          type: 'tool-result',
-          call_id: 'tool-1',
-          output: 'File contents',
+          type: 'tool_result',
+          part: {
+            type: 'tool-result',
+            call_id: 'tool-1',
+            output: 'File contents',
+          },
         },
       ];
 
@@ -718,10 +726,7 @@ describe('opencode-provider.ts', () => {
       const call = vi.mocked(spawnJSONLProcess).mock.calls[0][0];
       expect(call.args).toContain('run');
       expect(call.args).toContain('--format');
-      expect(call.args).toContain('stream-json');
-      expect(call.args).toContain('-q');
-      expect(call.args).toContain('-c');
-      expect(call.args).toContain('/tmp/workspace');
+      expect(call.args).toContain('json');
       expect(call.args).toContain('--model');
       expect(call.args).toContain('anthropic/claude-opus-4-5');
     });
@@ -731,9 +736,9 @@ describe('opencode-provider.ts', () => {
 
       const mockEvents = [
         { type: 'unknown-internal-event', data: 'ignored' },
-        { type: 'text-delta', text: 'Valid text' },
+        { type: 'text', part: { type: 'text', text: 'Valid text' } },
         { type: 'another-unknown', foo: 'bar' },
-        { type: 'finish-step', result: 'Done' },
+        { type: 'step_finish', part: { type: 'step-finish', reason: 'stop', result: 'Done' } },
       ];
 
       vi.mocked(spawnJSONLProcess).mockReturnValue(
@@ -747,6 +752,7 @@ describe('opencode-provider.ts', () => {
       const results = await collectAsyncGenerator<ProviderMessage>(
         mockedProvider.executeQuery({
           prompt: 'Test',
+          model: 'opencode/big-pickle',
           cwd: '/test',
         })
       );
@@ -1039,10 +1045,22 @@ describe('opencode-provider.ts', () => {
       const sessionId = 'test-session-123';
 
       const mockEvents = [
-        { type: 'text-delta', text: 'Hello ', session_id: sessionId },
-        { type: 'tool-call', name: 'Read', args: {}, call_id: 'c1', session_id: sessionId },
-        { type: 'tool-result', call_id: 'c1', output: 'file content', session_id: sessionId },
-        { type: 'finish-step', result: 'Done', session_id: sessionId },
+        { type: 'text', part: { type: 'text', text: 'Hello ' }, sessionID: sessionId },
+        {
+          type: 'tool_call',
+          part: { type: 'tool-call', name: 'Read', args: {}, call_id: 'c1' },
+          sessionID: sessionId,
+        },
+        {
+          type: 'tool_result',
+          part: { type: 'tool-result', call_id: 'c1', output: 'file content' },
+          sessionID: sessionId,
+        },
+        {
+          type: 'step_finish',
+          part: { type: 'step-finish', reason: 'stop', result: 'Done' },
+          sessionID: sessionId,
+        },
       ];
 
       vi.mocked(spawnJSONLProcess).mockReturnValue(
@@ -1056,6 +1074,7 @@ describe('opencode-provider.ts', () => {
       const results = await collectAsyncGenerator<ProviderMessage>(
         mockedProvider.executeQuery({
           prompt: 'Test',
+          model: 'opencode/big-pickle',
           cwd: '/tmp',
         })
       );
@@ -1069,12 +1088,15 @@ describe('opencode-provider.ts', () => {
   });
 
   describe('normalizeEvent additional edge cases', () => {
-    it('should handle tool-call with empty args object', () => {
+    it('should handle tool_call with empty args object', () => {
       const event = {
-        type: 'tool-call',
-        call_id: 'call-123',
-        name: 'Glob',
-        args: {},
+        type: 'tool_call',
+        part: {
+          type: 'tool-call',
+          call_id: 'call-123',
+          name: 'Glob',
+          args: {},
+        },
       };
 
       const result = provider.normalizeEvent(event);
@@ -1083,12 +1105,15 @@ describe('opencode-provider.ts', () => {
       expect(result?.message?.content[0].input).toEqual({});
     });
 
-    it('should handle tool-call with null args', () => {
+    it('should handle tool_call with null args', () => {
       const event = {
-        type: 'tool-call',
-        call_id: 'call-123',
-        name: 'Glob',
-        args: null,
+        type: 'tool_call',
+        part: {
+          type: 'tool-call',
+          call_id: 'call-123',
+          name: 'Glob',
+          args: null,
+        },
       };
 
       const result = provider.normalizeEvent(event);
@@ -1097,18 +1122,21 @@ describe('opencode-provider.ts', () => {
       expect(result?.message?.content[0].input).toBeNull();
     });
 
-    it('should handle tool-call with complex nested args', () => {
+    it('should handle tool_call with complex nested args', () => {
       const event = {
-        type: 'tool-call',
-        call_id: 'call-123',
-        name: 'Edit',
-        args: {
-          file_path: '/tmp/test.ts',
-          changes: [
-            { line: 10, old: 'foo', new: 'bar' },
-            { line: 20, old: 'baz', new: 'qux' },
-          ],
-          options: { replace_all: true },
+        type: 'tool_call',
+        part: {
+          type: 'tool-call',
+          call_id: 'call-123',
+          name: 'Edit',
+          args: {
+            file_path: '/tmp/test.ts',
+            changes: [
+              { line: 10, old: 'foo', new: 'bar' },
+              { line: 20, old: 'baz', new: 'qux' },
+            ],
+            options: { replace_all: true },
+          },
         },
       };
 
@@ -1125,11 +1153,14 @@ describe('opencode-provider.ts', () => {
       });
     });
 
-    it('should handle tool-result with empty output', () => {
+    it('should handle tool_result with empty output', () => {
       const event = {
-        type: 'tool-result',
-        call_id: 'call-123',
-        output: '',
+        type: 'tool_result',
+        part: {
+          type: 'tool-result',
+          call_id: 'call-123',
+          output: '',
+        },
       };
 
       const result = provider.normalizeEvent(event);
@@ -1138,10 +1169,13 @@ describe('opencode-provider.ts', () => {
       expect(result?.message?.content[0].content).toBe('');
     });
 
-    it('should handle text-delta with whitespace-only text', () => {
+    it('should handle text with whitespace-only text', () => {
       const event = {
-        type: 'text-delta',
-        text: '   ',
+        type: 'text',
+        part: {
+          type: 'text',
+          text: '   ',
+        },
       };
 
       const result = provider.normalizeEvent(event);
@@ -1151,10 +1185,13 @@ describe('opencode-provider.ts', () => {
       expect(result?.message?.content[0].text).toBe('   ');
     });
 
-    it('should handle text-delta with newlines', () => {
+    it('should handle text with newlines', () => {
       const event = {
-        type: 'text-delta',
-        text: 'Line 1\nLine 2\nLine 3',
+        type: 'text',
+        part: {
+          type: 'text',
+          text: 'Line 1\nLine 2\nLine 3',
+        },
       };
 
       const result = provider.normalizeEvent(event);
@@ -1162,12 +1199,15 @@ describe('opencode-provider.ts', () => {
       expect(result?.message?.content[0].text).toBe('Line 1\nLine 2\nLine 3');
     });
 
-    it('should handle finish-step with both result and error (error takes precedence)', () => {
+    it('should handle step_finish with both result and error (error takes precedence)', () => {
       const event = {
-        type: 'finish-step',
-        result: 'Some result',
-        error: 'But also an error',
-        success: false,
+        type: 'step_finish',
+        part: {
+          type: 'step-finish',
+          reason: 'stop',
+          result: 'Some result',
+          error: 'But also an error',
+        },
       };
 
       const result = provider.normalizeEvent(event);
@@ -1231,13 +1271,14 @@ describe('opencode-provider.ts', () => {
       const longPrompt = 'a'.repeat(10000);
       const args = provider.buildCliArgs({
         prompt: longPrompt,
+        model: 'opencode/big-pickle',
         cwd: '/tmp',
       });
 
       // The prompt is NOT in args (it's passed via stdin)
       // Just verify the args structure is correct
       expect(args).toContain('run');
-      expect(args).toContain('-');
+      expect(args).not.toContain('-');
       expect(args.join(' ')).not.toContain(longPrompt);
     });
 
@@ -1245,22 +1286,25 @@ describe('opencode-provider.ts', () => {
       const specialPrompt = 'Test $HOME $(rm -rf /) `command` "quotes" \'single\'';
       const args = provider.buildCliArgs({
         prompt: specialPrompt,
+        model: 'opencode/big-pickle',
         cwd: '/tmp',
       });
 
       // Special chars in prompt should not affect args (prompt is via stdin)
       expect(args).toContain('run');
-      expect(args).toContain('-');
+      expect(args).not.toContain('-');
     });
 
     it('should handle cwd with spaces', () => {
       const args = provider.buildCliArgs({
         prompt: 'Test',
+        model: 'opencode/big-pickle',
         cwd: '/tmp/path with spaces/project',
       });
 
-      const cwdIndex = args.indexOf('-c');
-      expect(args[cwdIndex + 1]).toBe('/tmp/path with spaces/project');
+      // cwd is set at subprocess level, not via CLI args
+      expect(args).not.toContain('-c');
+      expect(args).not.toContain('/tmp/path with spaces/project');
     });
 
     it('should handle model with unusual characters', () => {

apps/ui/scripts/setup-e2e-fixtures.mjs

@@ -41,16 +41,13 @@ const E2E_SETTINGS = {
   theme: 'dark',
   sidebarOpen: true,
   chatHistoryOpen: false,
-  kanbanCardDetailLevel: 'standard',
   maxConcurrency: 3,
   defaultSkipTests: true,
   enableDependencyBlocking: true,
   skipVerificationInAutoMode: false,
   useWorktrees: true,
-  showProfilesOnly: false,
   defaultPlanningMode: 'skip',
   defaultRequirePlanApproval: false,
-  defaultAIProfileId: null,
   muteDoneSound: false,
   phaseModels: {
     enhancementModel: { model: 'sonnet' },
@@ -73,7 +70,6 @@ const E2E_SETTINGS = {
     spec: 'D',
     context: 'C',
     settings: 'S',
-    profiles: 'M',
     terminal: 'T',
     toggleSidebar: '`',
     addFeature: 'N',
@@ -84,7 +80,6 @@ const E2E_SETTINGS = {
     projectPicker: 'P',
     cyclePrevProject: 'Q',
     cycleNextProject: 'E',
-    addProfile: 'N',
     splitTerminalRight: 'Alt+D',
     splitTerminalDown: 'Alt+S',
     closeTerminal: 'Alt+W',
@@ -94,48 +89,6 @@ const E2E_SETTINGS = {
     githubPrs: 'R',
     newTerminalTab: 'Alt+T',
   },
-  aiProfiles: [
-    {
-      id: 'profile-heavy-task',
-      name: 'Heavy Task',
-      description:
-        'Claude Opus with Ultrathink for complex architecture, migrations, or deep debugging.',
-      model: 'opus',
-      thinkingLevel: 'ultrathink',
-      provider: 'claude',
-      isBuiltIn: true,
-      icon: 'Brain',
-    },
-    {
-      id: 'profile-balanced',
-      name: 'Balanced',
-      description: 'Claude Sonnet with medium thinking for typical development tasks.',
-      model: 'sonnet',
-      thinkingLevel: 'medium',
-      provider: 'claude',
-      isBuiltIn: true,
-      icon: 'Scale',
-    },
-    {
-      id: 'profile-quick-edit',
-      name: 'Quick Edit',
-      description: 'Claude Haiku for fast, simple edits and minor fixes.',
-      model: 'haiku',
-      thinkingLevel: 'none',
-      provider: 'claude',
-      isBuiltIn: true,
-      icon: 'Zap',
-    },
-    {
-      id: 'profile-cursor-refactoring',
-      name: 'Cursor Refactoring',
-      description: 'Cursor Composer 1 for refactoring tasks.',
-      provider: 'cursor',
-      cursorModel: 'composer-1',
-      isBuiltIn: true,
-      icon: 'Sparkles',
-    },
-  ],
   // Default test project using the fixture path - tests can override via route mocking if needed
   projects: [
     {

apps/ui/src/components/layout/sidebar.tsx

@@ -17,7 +17,6 @@ import { CreateSpecDialog } from '@/components/views/spec-view/dialogs';
 import {
   CollapseToggleButton,
   SidebarHeader,
-  ProjectActions,
   SidebarNavigation,
   ProjectSelectorWithOptions,
   SidebarFooter,
@@ -59,7 +58,7 @@ export function Sidebar() {
   } = useAppStore();
 
   // Environment variable flags for hiding sidebar items
-  const { hideTerminal, hideWiki, hideRunningAgents, hideContext, hideSpecEditor, hideAiProfiles } =
+  const { hideTerminal, hideWiki, hideRunningAgents, hideContext, hideSpecEditor } =
     SIDEBAR_FEATURE_FLAGS;
 
   // Get customizable keyboard shortcuts
@@ -127,6 +126,9 @@ export function Sidebar() {
   // Derive isCreatingSpec from store state
   const isCreatingSpec = specCreatingForProject !== null;
   const creatingSpecProjectPath = specCreatingForProject;
+  // Check if the current project is specifically the one generating spec
+  const isCurrentProjectGeneratingSpec =
+    specCreatingForProject !== null && specCreatingForProject === currentProject?.path;
 
   // Auto-collapse sidebar on small screens and update Electron window minWidth
   useSidebarAutoCollapse({ sidebarOpen, toggleSidebar });
@@ -232,7 +234,6 @@ export function Sidebar() {
     hideSpecEditor,
     hideContext,
     hideTerminal,
-    hideAiProfiles,
     currentProject,
     projects,
     projectHistory,
@@ -243,6 +244,7 @@ export function Sidebar() {
     cyclePrevProject,
     cycleNextProject,
     unviewedValidationsCount,
+    isSpecGenerating: isCurrentProjectGeneratingSpec,
   });
 
   // Register keyboard shortcuts
@@ -277,17 +279,6 @@ export function Sidebar() {
       <div className="flex-1 flex flex-col overflow-hidden">
         <SidebarHeader sidebarOpen={sidebarOpen} navigate={navigate} />
 
-        {/* Project Actions - Moved above project selector */}
-        {sidebarOpen && (
-          <ProjectActions
-            setShowNewProjectModal={setShowNewProjectModal}
-            handleOpenFolder={handleOpenFolder}
-            setShowTrashDialog={setShowTrashDialog}
-            trashedProjects={trashedProjects}
-            shortcuts={{ openProject: shortcuts.openProject }}
-          />
-        )}
-
         <ProjectSelectorWithOptions
           sidebarOpen={sidebarOpen}
           isProjectPickerOpen={isProjectPickerOpen}

apps/ui/src/components/layout/sidebar/components/automaker-logo.tsx

@@ -32,7 +32,7 @@ export function AutomakerLogo({ sidebarOpen, navigate }: AutomakerLogoProps) {
         'flex items-center gap-3 titlebar-no-drag cursor-pointer group',
         !sidebarOpen && 'flex-col gap-1'
       )}
-      onClick={() => navigate({ to: '/' })}
+      onClick={() => navigate({ to: '/dashboard' })}
       data-testid="logo-button"
     >
       {/* Collapsed logo - shown when sidebar is closed OR on small screens when sidebar is open */}

apps/ui/src/components/layout/sidebar/components/sidebar-navigation.tsx

@@ -1,4 +1,5 @@
 import type { NavigateOptions } from '@tanstack/react-router';
+import { Loader2 } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { formatShortcut } from '@/store/app-store';
 import type { NavSection } from '../types';
@@ -80,14 +81,23 @@ export function SidebarNavigation({
                     data-testid={`nav-${item.id}`}
                   >
                     <div className="relative">
-                      <Icon
-                        className={cn(
-                          'w-[18px] h-[18px] shrink-0 transition-all duration-200',
-                          isActive
-                            ? 'text-brand-500 drop-shadow-sm'
-                            : 'group-hover:text-brand-400 group-hover:scale-110'
-                        )}
-                      />
+                      {item.isLoading ? (
+                        <Loader2
+                          className={cn(
+                            'w-[18px] h-[18px] shrink-0 animate-spin',
+                            isActive ? 'text-brand-500' : 'text-muted-foreground'
+                          )}
+                        />
+                      ) : (
+                        <Icon
+                          className={cn(
+                            'w-[18px] h-[18px] shrink-0 transition-all duration-200',
+                            isActive
+                              ? 'text-brand-500 drop-shadow-sm'
+                              : 'group-hover:text-brand-400 group-hover:scale-110'
+                          )}
+                        />
+                      )}
                       {/* Count badge for collapsed state */}
                       {!sidebarOpen && item.count !== undefined && item.count > 0 && (
                         <span

apps/ui/src/components/layout/sidebar/constants.ts

@@ -20,5 +20,4 @@ export const SIDEBAR_FEATURE_FLAGS = {
   hideRunningAgents: import.meta.env.VITE_HIDE_RUNNING_AGENTS === 'true',
   hideContext: import.meta.env.VITE_HIDE_CONTEXT === 'true',
   hideSpecEditor: import.meta.env.VITE_HIDE_SPEC_EDITOR === 'true',
-  hideAiProfiles: import.meta.env.VITE_HIDE_AI_PROFILES === 'true',
 } as const;

apps/ui/src/components/layout/sidebar/dialogs/onboarding-dialog.tsx

@@ -1,3 +1,4 @@
+import { useRef } from 'react';
 import { Rocket, CheckCircle2, Zap, FileText, Sparkles, ArrowRight } from 'lucide-react';
 import {
   Dialog,
@@ -24,13 +25,25 @@ export function OnboardingDialog({
   onSkip,
   onGenerateSpec,
 }: OnboardingDialogProps) {
+  // Track if we're closing because user clicked "Generate App Spec"
+  // to avoid incorrectly calling onSkip
+  const isGeneratingRef = useRef(false);
+
+  const handleGenerateSpec = () => {
+    isGeneratingRef.current = true;
+    onGenerateSpec();
+  };
+
   return (
     <Dialog
       open={open}
       onOpenChange={(isOpen) => {
-        if (!isOpen) {
+        if (!isOpen && !isGeneratingRef.current) {
+          // Only call onSkip when user dismisses dialog (escape, click outside, or skip button)
+          // NOT when they click "Generate App Spec"
           onSkip();
         }
+        isGeneratingRef.current = false;
         onOpenChange(isOpen);
       }}
     >
@@ -108,7 +121,7 @@ export function OnboardingDialog({
             Skip for now
           </Button>
           <Button
-            onClick={onGenerateSpec}
+            onClick={handleGenerateSpec}
             className="bg-gradient-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-600 text-white border-0"
           >
             <Sparkles className="w-4 h-4 mr-2" />

apps/ui/src/components/layout/sidebar/hooks/use-navigation.ts

@@ -5,12 +5,12 @@ import {
   LayoutGrid,
   Bot,
   BookOpen,
-  UserCircle,
   Terminal,
   CircleDot,
   GitPullRequest,
-  Zap,
   Lightbulb,
+  Brain,
+  Network,
 } from 'lucide-react';
 import type { NavSection, NavItem } from '../types';
 import type { KeyboardShortcut } from '@/hooks/use-keyboard-shortcuts';
@@ -26,8 +26,9 @@ interface UseNavigationProps {
     cycleNextProject: string;
     spec: string;
     context: string;
-    profiles: string;
+    memory: string;
     board: string;
+    graph: string;
     agent: string;
     terminal: string;
     settings: string;
@@ -38,7 +39,6 @@ interface UseNavigationProps {
   hideSpecEditor: boolean;
   hideContext: boolean;
   hideTerminal: boolean;
-  hideAiProfiles: boolean;
   currentProject: Project | null;
   projects: Project[];
   projectHistory: string[];
@@ -50,6 +50,8 @@ interface UseNavigationProps {
   cycleNextProject: () => void;
   /** Count of unviewed validations to show on GitHub Issues nav item */
   unviewedValidationsCount?: number;
+  /** Whether spec generation is currently running for the current project */
+  isSpecGenerating?: boolean;
 }
 
 export function useNavigation({
@@ -57,7 +59,6 @@ export function useNavigation({
   hideSpecEditor,
   hideContext,
   hideTerminal,
-  hideAiProfiles,
   currentProject,
   projects,
   projectHistory,
@@ -68,6 +69,7 @@ export function useNavigation({
   cyclePrevProject,
   cycleNextProject,
   unviewedValidationsCount,
+  isSpecGenerating,
 }: UseNavigationProps) {
   // Track if current project has a GitHub remote
   const [hasGitHubRemote, setHasGitHubRemote] = useState(false);
@@ -107,6 +109,7 @@ export function useNavigation({
         label: 'Spec Editor',
         icon: FileText,
         shortcut: shortcuts.spec,
+        isLoading: isSpecGenerating,
       },
       {
         id: 'context',
@@ -115,10 +118,10 @@ export function useNavigation({
         shortcut: shortcuts.context,
       },
       {
-        id: 'profiles',
-        label: 'AI Profiles',
-        icon: UserCircle,
-        shortcut: shortcuts.profiles,
+        id: 'memory',
+        label: 'Memory',
+        icon: Brain,
+        shortcut: shortcuts.memory,
       },
     ];
 
@@ -130,9 +133,6 @@ export function useNavigation({
       if (item.id === 'context' && hideContext) {
         return false;
       }
-      if (item.id === 'profiles' && hideAiProfiles) {
-        return false;
-      }
       return true;
     });
 
@@ -144,6 +144,12 @@ export function useNavigation({
         icon: LayoutGrid,
         shortcut: shortcuts.board,
       },
+      {
+        id: 'graph',
+        label: 'Graph View',
+        icon: Network,
+        shortcut: shortcuts.graph,
+      },
       {
         id: 'agent',
         label: 'Agent Runner',
@@ -201,9 +207,9 @@ export function useNavigation({
     hideSpecEditor,
     hideContext,
     hideTerminal,
-    hideAiProfiles,
     hasGitHubRemote,
     unviewedValidationsCount,
+    isSpecGenerating,
   ]);
 
   // Build keyboard shortcuts for navigation

apps/ui/src/components/layout/sidebar/types.ts

@@ -13,6 +13,8 @@ export interface NavItem {
   shortcut?: string;
   /** Optional count badge to display next to the nav item */
   count?: number;
+  /** Whether this nav item is in a loading state (shows spinner) */
+  isLoading?: boolean;
 }
 
 export interface SortableProjectItemProps {

apps/ui/src/components/shared/index.ts

@@ -5,3 +5,17 @@ export {
   type UseModelOverrideOptions,
   type UseModelOverrideResult,
 } from './use-model-override';
+
+// Onboarding Wizard Components
+export {
+  OnboardingWizard,
+  useOnboardingWizard,
+  ONBOARDING_STORAGE_PREFIX,
+  ONBOARDING_TARGET_ATTRIBUTE,
+  ONBOARDING_ANALYTICS,
+  type OnboardingStep,
+  type OnboardingState,
+  type OnboardingWizardProps,
+  type UseOnboardingWizardOptions,
+  type UseOnboardingWizardResult,
+} from './onboarding';

apps/ui/src/components/shared/onboarding/constants.ts

@@ -0,0 +1,55 @@
+/**
+ * Shared Onboarding Wizard Constants
+ *
+ * Layout, positioning, and timing constants for the onboarding wizard.
+ */
+
+/** Storage key prefix for onboarding state */
+export const ONBOARDING_STORAGE_PREFIX = 'automaker:onboarding';
+
+/** Padding around spotlight highlight elements (px) */
+export const SPOTLIGHT_PADDING = 8;
+
+/** Padding between target element and tooltip (px) */
+export const TOOLTIP_OFFSET = 16;
+
+/** Vertical offset from top of target to tooltip (px) */
+export const TOOLTIP_TOP_OFFSET = 40;
+
+/** Maximum tooltip width (px) */
+export const TOOLTIP_MAX_WIDTH = 400;
+
+/** Minimum safe margin from viewport edges (px) */
+export const VIEWPORT_SAFE_MARGIN = 16;
+
+/** Threshold for placing tooltip to the right of target (30% of viewport) */
+export const TOOLTIP_POSITION_RIGHT_THRESHOLD = 0.3;
+
+/** Threshold for placing tooltip to the left of target (70% of viewport) */
+export const TOOLTIP_POSITION_LEFT_THRESHOLD = 0.7;
+
+/** Threshold from bottom of viewport to trigger alternate positioning (px) */
+export const BOTTOM_THRESHOLD = 450;
+
+/** Debounce delay for resize handler (ms) */
+export const RESIZE_DEBOUNCE_MS = 100;
+
+/** Animation duration for step transitions (ms) */
+export const STEP_TRANSITION_DURATION = 200;
+
+/** ID for the wizard description element (for aria-describedby) */
+export const WIZARD_DESCRIPTION_ID = 'onboarding-wizard-description';
+
+/** ID for the wizard title element (for aria-labelledby) */
+export const WIZARD_TITLE_ID = 'onboarding-wizard-title';
+
+/** Data attribute name for targeting elements */
+export const ONBOARDING_TARGET_ATTRIBUTE = 'data-onboarding-target';
+
+/** Analytics event names for onboarding tracking */
+export const ONBOARDING_ANALYTICS = {
+  STARTED: 'onboarding_started',
+  COMPLETED: 'onboarding_completed',
+  SKIPPED: 'onboarding_skipped',
+  STEP_VIEWED: 'onboarding_step_viewed',
+} as const;

apps/ui/src/components/shared/onboarding/index.ts

@@ -0,0 +1,21 @@
+/**
+ * Shared Onboarding Components
+ *
+ * Generic onboarding wizard infrastructure for building
+ * interactive tutorials across different views.
+ */
+
+export { OnboardingWizard } from './onboarding-wizard';
+export { useOnboardingWizard } from './use-onboarding-wizard';
+export type {
+  OnboardingStep,
+  OnboardingState,
+  OnboardingWizardProps,
+  UseOnboardingWizardOptions,
+  UseOnboardingWizardResult,
+} from './types';
+export {
+  ONBOARDING_STORAGE_PREFIX,
+  ONBOARDING_TARGET_ATTRIBUTE,
+  ONBOARDING_ANALYTICS,
+} from './constants';

apps/ui/src/components/shared/onboarding/onboarding-wizard.tsx

@@ -0,0 +1,545 @@
+/**
+ * Generic Onboarding Wizard Component
+ *
+ * A multi-step wizard overlay that guides users through features
+ * with visual highlighting (spotlight effect) on target elements.
+ *
+ * Features:
+ * - Spotlight overlay targeting elements via data-onboarding-target
+ * - Responsive tooltip positioning (left/right/bottom)
+ * - Step navigation (keyboard & mouse)
+ * - Configurable children slot for view-specific content
+ * - Completion celebration animation
+ * - Full accessibility (ARIA, focus management)
+ */
+
+import { useEffect, useRef, useCallback, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { X, ChevronLeft, ChevronRight, CheckCircle2, PartyPopper, Sparkles } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+import {
+  SPOTLIGHT_PADDING,
+  TOOLTIP_OFFSET,
+  TOOLTIP_TOP_OFFSET,
+  TOOLTIP_MAX_WIDTH,
+  VIEWPORT_SAFE_MARGIN,
+  TOOLTIP_POSITION_RIGHT_THRESHOLD,
+  TOOLTIP_POSITION_LEFT_THRESHOLD,
+  BOTTOM_THRESHOLD,
+  RESIZE_DEBOUNCE_MS,
+  STEP_TRANSITION_DURATION,
+  WIZARD_DESCRIPTION_ID,
+  WIZARD_TITLE_ID,
+  ONBOARDING_TARGET_ATTRIBUTE,
+} from './constants';
+import type { OnboardingWizardProps, OnboardingStep } from './types';
+
+interface HighlightRect {
+  top: number;
+  left: number;
+  right: number;
+  bottom: number;
+  width: number;
+  height: number;
+}
+
+export function OnboardingWizard({
+  isVisible,
+  currentStep,
+  currentStepData,
+  totalSteps,
+  onNext,
+  onPrevious,
+  onSkip,
+  onComplete,
+  steps,
+  children,
+}: OnboardingWizardProps) {
+  const [highlightRect, setHighlightRect] = useState<HighlightRect | null>(null);
+  const [tooltipPosition, setTooltipPosition] = useState<'left' | 'right' | 'bottom'>('bottom');
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [showCompletionCelebration, setShowCompletionCelebration] = useState(false);
+
+  // Refs for focus management
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const nextButtonRef = useRef<HTMLButtonElement>(null);
+
+  // Detect if user is on a touch device
+  const [isTouchDevice, setIsTouchDevice] = useState(false);
+
+  useEffect(() => {
+    setIsTouchDevice('ontouchstart' in window || navigator.maxTouchPoints > 0);
+  }, []);
+
+  // Lock scroll when wizard is visible
+  useEffect(() => {
+    if (!isVisible) return;
+
+    const originalOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+
+    return () => {
+      document.body.style.overflow = originalOverflow;
+    };
+  }, [isVisible]);
+
+  // Focus management - move focus to dialog when opened
+  useEffect(() => {
+    if (!isVisible) return;
+
+    const timer = setTimeout(() => {
+      nextButtonRef.current?.focus();
+    }, STEP_TRANSITION_DURATION);
+
+    return () => clearTimeout(timer);
+  }, [isVisible]);
+
+  // Animate step transitions
+  useEffect(() => {
+    if (!isVisible) return;
+
+    setIsAnimating(true);
+    const timer = setTimeout(() => {
+      setIsAnimating(false);
+    }, STEP_TRANSITION_DURATION);
+
+    return () => clearTimeout(timer);
+  }, [currentStep, isVisible]);
+
+  // Find and highlight the target element
+  useEffect(() => {
+    if (!isVisible || !currentStepData) {
+      setHighlightRect(null);
+      return;
+    }
+
+    const updateHighlight = () => {
+      // Find target element by data-onboarding-target attribute
+      const targetEl = document.querySelector(
+        `[${ONBOARDING_TARGET_ATTRIBUTE}="${currentStepData.targetId}"]`
+      );
+
+      if (targetEl) {
+        const rect = targetEl.getBoundingClientRect();
+        setHighlightRect({
+          top: rect.top,
+          left: rect.left,
+          right: rect.right,
+          bottom: rect.bottom,
+          width: rect.width,
+          height: rect.height,
+        });
+
+        // Determine tooltip position based on target position and available space
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        const targetCenter = rect.left + rect.width / 2;
+        const tooltipWidth = Math.min(TOOLTIP_MAX_WIDTH, viewportWidth - VIEWPORT_SAFE_MARGIN * 2);
+
+        const spaceAtBottom = viewportHeight - rect.bottom - TOOLTIP_OFFSET;
+        const spaceAtRight = viewportWidth - rect.right - TOOLTIP_OFFSET;
+        const spaceAtLeft = rect.left - TOOLTIP_OFFSET;
+
+        // For leftmost targets, prefer right position
+        if (
+          targetCenter < viewportWidth * TOOLTIP_POSITION_RIGHT_THRESHOLD &&
+          spaceAtRight >= tooltipWidth
+        ) {
+          setTooltipPosition('right');
+        }
+        // For rightmost targets, prefer left position
+        else if (
+          targetCenter > viewportWidth * TOOLTIP_POSITION_LEFT_THRESHOLD &&
+          spaceAtLeft >= tooltipWidth
+        ) {
+          setTooltipPosition('left');
+        }
+        // For middle targets, check if bottom position would work
+        else if (spaceAtBottom >= BOTTOM_THRESHOLD) {
+          setTooltipPosition('bottom');
+        }
+        // Fallback logic
+        else if (spaceAtRight > spaceAtLeft && spaceAtRight >= tooltipWidth * 0.6) {
+          setTooltipPosition('right');
+        } else if (spaceAtLeft >= tooltipWidth * 0.6) {
+          setTooltipPosition('left');
+        } else {
+          setTooltipPosition('bottom');
+        }
+      }
+    };
+
+    updateHighlight();
+
+    // Debounced resize handler
+    let resizeTimeout: ReturnType<typeof setTimeout>;
+    const handleResize = () => {
+      clearTimeout(resizeTimeout);
+      resizeTimeout = setTimeout(updateHighlight, RESIZE_DEBOUNCE_MS);
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      clearTimeout(resizeTimeout);
+    };
+  }, [isVisible, currentStepData]);
+
+  // Keyboard navigation
+  useEffect(() => {
+    if (!isVisible) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onSkip();
+      } else if (e.key === 'ArrowRight' || e.key === 'Enter') {
+        if (currentStep < totalSteps - 1) {
+          onNext();
+        } else {
+          handleComplete();
+        }
+      } else if (e.key === 'ArrowLeft') {
+        onPrevious();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [isVisible, currentStep, totalSteps, onNext, onPrevious, onSkip]);
+
+  // Calculate tooltip styles based on position and highlight rect
+  const getTooltipStyles = useCallback((): React.CSSProperties => {
+    if (!highlightRect) return {};
+
+    const viewportHeight = window.innerHeight;
+    const viewportWidth = window.innerWidth;
+    const tooltipWidth = Math.min(TOOLTIP_MAX_WIDTH, viewportWidth - VIEWPORT_SAFE_MARGIN * 2);
+
+    switch (tooltipPosition) {
+      case 'right': {
+        const topPos = Math.max(VIEWPORT_SAFE_MARGIN, highlightRect.top + TOOLTIP_TOP_OFFSET);
+        const availableHeight = viewportHeight - topPos - VIEWPORT_SAFE_MARGIN;
+        return {
+          position: 'fixed',
+          top: topPos,
+          left: highlightRect.right + TOOLTIP_OFFSET,
+          width: tooltipWidth,
+          maxWidth: `calc(100vw - ${highlightRect.right + TOOLTIP_OFFSET * 2}px)`,
+          maxHeight: Math.max(200, availableHeight),
+        };
+      }
+      case 'left': {
+        const topPos = Math.max(VIEWPORT_SAFE_MARGIN, highlightRect.top + TOOLTIP_TOP_OFFSET);
+        const availableHeight = viewportHeight - topPos - VIEWPORT_SAFE_MARGIN;
+        return {
+          position: 'fixed',
+          top: topPos,
+          right: viewportWidth - highlightRect.left + TOOLTIP_OFFSET,
+          width: tooltipWidth,
+          maxWidth: `calc(${highlightRect.left - TOOLTIP_OFFSET * 2}px)`,
+          maxHeight: Math.max(200, availableHeight),
+        };
+      }
+      case 'bottom':
+      default: {
+        const idealTop = highlightRect.bottom + TOOLTIP_OFFSET;
+        const availableHeight = viewportHeight - idealTop - VIEWPORT_SAFE_MARGIN;
+
+        const minTop = 100;
+        const topPos =
+          availableHeight < 250
+            ? Math.max(
+                minTop,
+                viewportHeight - Math.max(300, availableHeight) - VIEWPORT_SAFE_MARGIN
+              )
+            : idealTop;
+
+        const idealLeft = highlightRect.left + highlightRect.width / 2 - tooltipWidth / 2;
+        const leftPos = Math.max(
+          VIEWPORT_SAFE_MARGIN,
+          Math.min(idealLeft, viewportWidth - tooltipWidth - VIEWPORT_SAFE_MARGIN)
+        );
+
+        return {
+          position: 'fixed',
+          top: topPos,
+          left: leftPos,
+          width: tooltipWidth,
+          maxHeight: Math.max(200, viewportHeight - topPos - VIEWPORT_SAFE_MARGIN),
+        };
+      }
+    }
+  }, [highlightRect, tooltipPosition]);
+
+  // Handle completion with celebration
+  const handleComplete = useCallback(() => {
+    setShowCompletionCelebration(true);
+    setTimeout(() => {
+      setShowCompletionCelebration(false);
+      onComplete();
+    }, 1200);
+  }, [onComplete]);
+
+  // Handle step indicator click for direct navigation
+  const handleStepClick = useCallback(
+    (stepIndex: number) => {
+      if (stepIndex === currentStep) return;
+
+      if (stepIndex > currentStep) {
+        for (let i = currentStep; i < stepIndex; i++) {
+          onNext();
+        }
+      } else {
+        for (let i = currentStep; i > stepIndex; i--) {
+          onPrevious();
+        }
+      }
+    },
+    [currentStep, onNext, onPrevious]
+  );
+
+  if (!isVisible || !currentStepData) return null;
+
+  const StepIcon = currentStepData.icon || Sparkles;
+  const isLastStep = currentStep === totalSteps - 1;
+  const isFirstStep = currentStep === 0;
+
+  const content = (
+    <div
+      ref={dialogRef}
+      className="fixed inset-0 z-[100]"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby={WIZARD_TITLE_ID}
+      aria-describedby={WIZARD_DESCRIPTION_ID}
+    >
+      {/* Completion celebration overlay */}
+      {showCompletionCelebration && (
+        <div className="absolute inset-0 z-[102] flex items-center justify-center pointer-events-none">
+          <div className="animate-in zoom-in-50 fade-in duration-300 flex flex-col items-center gap-4 text-white">
+            <PartyPopper className="w-16 h-16 text-yellow-400 animate-bounce" />
+            <p className="text-2xl font-bold">You're all set!</p>
+          </div>
+        </div>
+      )}
+
+      {/* Dark overlay with cutout for highlighted element */}
+      <svg
+        className="absolute inset-0 w-full h-full pointer-events-none"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden="true"
+      >
+        <defs>
+          <mask id="spotlight-mask">
+            <rect x="0" y="0" width="100%" height="100%" fill="white" />
+            {highlightRect && (
+              <rect
+                x={highlightRect.left - SPOTLIGHT_PADDING}
+                y={highlightRect.top - SPOTLIGHT_PADDING}
+                width={highlightRect.width + SPOTLIGHT_PADDING * 2}
+                height={highlightRect.height + SPOTLIGHT_PADDING * 2}
+                rx="16"
+                fill="black"
+              />
+            )}
+          </mask>
+        </defs>
+        <rect
+          x="0"
+          y="0"
+          width="100%"
+          height="100%"
+          fill="rgba(0, 0, 0, 0.75)"
+          mask="url(#spotlight-mask)"
+          className="transition-all duration-300"
+        />
+      </svg>
+
+      {/* Highlight border around the target element */}
+      {highlightRect && (
+        <div
+          className="absolute pointer-events-none transition-all duration-300 ease-out"
+          style={{
+            left: highlightRect.left - SPOTLIGHT_PADDING,
+            top: highlightRect.top - SPOTLIGHT_PADDING,
+            width: highlightRect.width + SPOTLIGHT_PADDING * 2,
+            height: highlightRect.height + SPOTLIGHT_PADDING * 2,
+            borderRadius: '16px',
+            border: '2px solid hsl(var(--primary))',
+            boxShadow:
+              '0 0 20px 4px hsl(var(--primary) / 0.3), inset 0 0 20px 4px hsl(var(--primary) / 0.1)',
+          }}
+        />
+      )}
+
+      {/* Skip button - top right */}
+      <Button
+        variant="ghost"
+        size="sm"
+        className={cn(
+          'fixed top-4 right-4 z-[101]',
+          'text-white/70 hover:text-white hover:bg-white/10',
+          'focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-transparent',
+          'min-h-[44px] min-w-[44px] px-3'
+        )}
+        onClick={onSkip}
+        aria-label="Skip the onboarding tour"
+      >
+        <X className="w-4 h-4 mr-1.5" aria-hidden="true" />
+        <span>Skip Tour</span>
+      </Button>
+
+      {/* Tooltip card with step content */}
+      <div
+        className={cn(
+          'z-[101] bg-popover/95 backdrop-blur-xl rounded-xl shadow-2xl border border-border/50',
+          'p-6 animate-in fade-in-0 slide-in-from-bottom-4 duration-300',
+          'max-h-[calc(100vh-100px)] overflow-y-auto',
+          isAnimating && 'opacity-90 scale-[0.98]',
+          'transition-all duration-200 ease-out'
+        )}
+        style={getTooltipStyles()}
+      >
+        {/* Header */}
+        <div className="flex items-start gap-4 mb-4">
+          <div className="flex items-center justify-center w-12 h-12 rounded-xl bg-primary/10 border border-primary/20 shrink-0">
+            <StepIcon className="w-6 h-6 text-primary" />
+          </div>
+          <div className="flex-1 min-w-0">
+            <h3 id={WIZARD_TITLE_ID} className="text-lg font-semibold text-foreground truncate">
+              {currentStepData.title}
+            </h3>
+            <div className="flex items-center gap-2 mt-1.5">
+              <span className="text-xs text-muted-foreground" aria-live="polite">
+                Step {currentStep + 1} of {totalSteps}
+              </span>
+              {/* Step indicators - clickable for navigation */}
+              <nav aria-label="Wizard steps" className="flex items-center gap-1">
+                {Array.from({ length: totalSteps }).map((_, i) => (
+                  <button
+                    key={i}
+                    type="button"
+                    onClick={() => handleStepClick(i)}
+                    className={cn(
+                      'relative flex items-center justify-center',
+                      'w-6 h-6',
+                      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1 focus-visible:rounded-full',
+                      'transition-transform duration-200 hover:scale-110'
+                    )}
+                    aria-label={`Go to step ${i + 1}: ${steps[i]?.title}`}
+                    aria-current={i === currentStep ? 'step' : undefined}
+                  >
+                    <span
+                      className={cn(
+                        'block rounded-full transition-all duration-200',
+                        i === currentStep
+                          ? 'w-2.5 h-2.5 bg-primary ring-2 ring-primary/30 ring-offset-1 ring-offset-popover'
+                          : i < currentStep
+                            ? 'w-2 h-2 bg-primary/60'
+                            : 'w-2 h-2 bg-muted-foreground/40'
+                      )}
+                    />
+                  </button>
+                ))}
+              </nav>
+            </div>
+          </div>
+        </div>
+
+        {/* Description */}
+        <p
+          id={WIZARD_DESCRIPTION_ID}
+          className="text-sm text-muted-foreground leading-relaxed mb-4"
+        >
+          {currentStepData.description}
+        </p>
+
+        {/* Tip box */}
+        {currentStepData.tip && (
+          <div className="rounded-lg bg-primary/5 border border-primary/10 p-3 mb-4">
+            <p className="text-xs text-muted-foreground">
+              <span className="font-medium text-foreground">Tip: </span>
+              {currentStepData.tip}
+            </p>
+          </div>
+        )}
+
+        {/* Custom content slot (e.g., Quick Start section) */}
+        {children}
+
+        {/* Navigation buttons */}
+        <div className="flex items-center justify-between gap-3 pt-2">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={onPrevious}
+            disabled={isFirstStep}
+            className={cn(
+              'text-muted-foreground min-h-[44px]',
+              'focus-visible:ring-2 focus-visible:ring-primary',
+              isFirstStep && 'invisible'
+            )}
+            aria-label="Go to previous step"
+          >
+            <ChevronLeft className="w-4 h-4 mr-1" aria-hidden="true" />
+            <span>Previous</span>
+          </Button>
+
+          <Button
+            ref={nextButtonRef}
+            size="sm"
+            onClick={isLastStep ? handleComplete : onNext}
+            disabled={showCompletionCelebration}
+            className={cn(
+              'bg-primary hover:bg-primary/90 text-primary-foreground',
+              'min-w-[120px] min-h-[44px]',
+              'focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2',
+              'transition-all duration-200'
+            )}
+            aria-label={isLastStep ? 'Complete the tour and get started' : 'Go to next step'}
+          >
+            {isLastStep ? (
+              <>
+                <span>Get Started</span>
+                <CheckCircle2 className="w-4 h-4 ml-1.5" aria-hidden="true" />
+              </>
+            ) : (
+              <>
+                <span>Next</span>
+                <ChevronRight className="w-4 h-4 ml-1" aria-hidden="true" />
+              </>
+            )}
+          </Button>
+        </div>
+
+        {/* Keyboard hints - hidden on touch devices */}
+        {!isTouchDevice && (
+          <div
+            className="mt-4 pt-3 border-t border-border/50 flex items-center justify-center gap-4 text-xs text-muted-foreground/70"
+            aria-hidden="true"
+          >
+            <span className="flex items-center gap-1.5">
+              <kbd className="px-2 py-1 rounded bg-muted text-muted-foreground font-mono text-[11px] shadow-sm">
+                ESC
+              </kbd>
+              <span>to skip</span>
+            </span>
+            <span className="flex items-center gap-1.5">
+              <kbd className="px-2 py-1 rounded bg-muted text-muted-foreground font-mono text-[11px] shadow-sm">
+                ←
+              </kbd>
+              <kbd className="px-2 py-1 rounded bg-muted text-muted-foreground font-mono text-[11px] shadow-sm">
+                →
+              </kbd>
+              <span>to navigate</span>
+            </span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+
+  // Render in a portal to ensure it's above everything
+  return createPortal(content, document.body);
+}

apps/ui/src/components/shared/onboarding/types.ts

@@ -0,0 +1,109 @@
+/**
+ * Shared Onboarding Wizard Types
+ *
+ * Generic types for building onboarding wizards across different views.
+ */
+
+import type { ComponentType } from 'react';
+
+/**
+ * Represents a single step in the onboarding wizard
+ */
+export interface OnboardingStep {
+  /** Unique identifier for this step */
+  id: string;
+  /** Target element ID - matches data-onboarding-target attribute */
+  targetId: string;
+  /** Step title displayed in the wizard */
+  title: string;
+  /** Main description explaining this step */
+  description: string;
+  /** Optional tip shown in a highlighted box */
+  tip?: string;
+  /** Optional icon component for visual identification */
+  icon?: ComponentType<{ className?: string }>;
+}
+
+/**
+ * Persisted onboarding state structure
+ */
+export interface OnboardingState {
+  /** Whether the wizard has been completed */
+  completed: boolean;
+  /** ISO timestamp when completed */
+  completedAt?: string;
+  /** Whether the wizard has been skipped */
+  skipped: boolean;
+  /** ISO timestamp when skipped */
+  skippedAt?: string;
+}
+
+/**
+ * Options for the useOnboardingWizard hook
+ */
+export interface UseOnboardingWizardOptions {
+  /** Unique storage key for localStorage persistence */
+  storageKey: string;
+  /** Array of wizard steps to display */
+  steps: OnboardingStep[];
+  /** Optional callback when wizard is completed */
+  onComplete?: () => void;
+  /** Optional callback when wizard is skipped */
+  onSkip?: () => void;
+}
+
+/**
+ * Return type for the useOnboardingWizard hook
+ */
+export interface UseOnboardingWizardResult {
+  /** Whether the wizard is currently visible */
+  isVisible: boolean;
+  /** Current step index (0-based) */
+  currentStep: number;
+  /** Current step data or null if not available */
+  currentStepData: OnboardingStep | null;
+  /** Total number of steps */
+  totalSteps: number;
+  /** Navigate to the next step */
+  goToNextStep: () => void;
+  /** Navigate to the previous step */
+  goToPreviousStep: () => void;
+  /** Navigate to a specific step by index */
+  goToStep: (step: number) => void;
+  /** Start/show the wizard from the beginning */
+  startWizard: () => void;
+  /** Complete the wizard and hide it */
+  completeWizard: () => void;
+  /** Skip the wizard and hide it */
+  skipWizard: () => void;
+  /** Whether the wizard has been completed */
+  isCompleted: boolean;
+  /** Whether the wizard has been skipped */
+  isSkipped: boolean;
+}
+
+/**
+ * Props for the OnboardingWizard component
+ */
+export interface OnboardingWizardProps {
+  /** Whether the wizard is visible */
+  isVisible: boolean;
+  /** Current step index */
+  currentStep: number;
+  /** Current step data */
+  currentStepData: OnboardingStep | null;
+  /** Total number of steps */
+  totalSteps: number;
+  /** Handler for next step navigation */
+  onNext: () => void;
+  /** Handler for previous step navigation */
+  onPrevious: () => void;
+  /** Handler for skipping the wizard */
+  onSkip: () => void;
+  /** Handler for completing the wizard */
+  onComplete: () => void;
+  /** Array of all steps (for step indicator navigation) */
+  steps: OnboardingStep[];
+  /** Optional content to render before navigation buttons (e.g., Quick Start) */
+  children?: React.ReactNode;
+}

apps/ui/src/components/shared/onboarding/use-onboarding-wizard.ts

@@ -0,0 +1,216 @@
+/**
+ * Generic Onboarding Wizard Hook
+ *
+ * Manages the state and logic for interactive onboarding wizards.
+ * Can be used to create onboarding experiences for any view.
+ *
+ * Features:
+ * - Persists completion status to localStorage
+ * - Step navigation (next, previous, jump to step)
+ * - Analytics tracking hooks
+ * - No auto-show logic - wizard only shows via startWizard()
+ */
+
+import { useState, useCallback, useEffect, useMemo } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import { getItem, setItem } from '@/lib/storage';
+import { ONBOARDING_STORAGE_PREFIX, ONBOARDING_ANALYTICS } from './constants';
+import type {
+  OnboardingState,
+  OnboardingStep,
+  UseOnboardingWizardOptions,
+  UseOnboardingWizardResult,
+} from './types';
+
+const logger = createLogger('OnboardingWizard');
+
+/** Default state for new wizards */
+const DEFAULT_ONBOARDING_STATE: OnboardingState = {
+  completed: false,
+  skipped: false,
+};
+
+/**
+ * Load onboarding state from localStorage
+ */
+function loadOnboardingState(storageKey: string): OnboardingState {
+  try {
+    const fullKey = `${ONBOARDING_STORAGE_PREFIX}:${storageKey}`;
+    const stored = getItem(fullKey);
+    if (stored) {
+      return JSON.parse(stored) as OnboardingState;
+    }
+  } catch (error) {
+    logger.error('Failed to load onboarding state:', error);
+  }
+  return { ...DEFAULT_ONBOARDING_STATE };
+}
+
+/**
+ * Save onboarding state to localStorage
+ */
+function saveOnboardingState(storageKey: string, state: OnboardingState): void {
+  try {
+    const fullKey = `${ONBOARDING_STORAGE_PREFIX}:${storageKey}`;
+    setItem(fullKey, JSON.stringify(state));
+  } catch (error) {
+    logger.error('Failed to save onboarding state:', error);
+  }
+}
+
+/**
+ * Track analytics event (placeholder - integrate with actual analytics service)
+ */
+function trackAnalytics(event: string, data?: Record<string, unknown>): void {
+  logger.debug(`[Analytics] ${event}`, data);
+}
+
+/**
+ * Generic hook for managing onboarding wizard state.
+ *
+ * @example
+ * ```tsx
+ * const wizard = useOnboardingWizard({
+ *   storageKey: 'my-view-onboarding',
+ *   steps: MY_WIZARD_STEPS,
+ *   onComplete: () => console.log('Done!'),
+ * });
+ *
+ * // Start the wizard when user clicks help button
+ * <button onClick={wizard.startWizard}>Help</button>
+ *
+ * // Render the wizard
+ * <OnboardingWizard
+ *   isVisible={wizard.isVisible}
+ *   currentStep={wizard.currentStep}
+ *   currentStepData={wizard.currentStepData}
+ *   totalSteps={wizard.totalSteps}
+ *   onNext={wizard.goToNextStep}
+ *   onPrevious={wizard.goToPreviousStep}
+ *   onSkip={wizard.skipWizard}
+ *   onComplete={wizard.completeWizard}
+ *   steps={MY_WIZARD_STEPS}
+ * />
+ * ```
+ */
+export function useOnboardingWizard({
+  storageKey,
+  steps,
+  onComplete,
+  onSkip,
+}: UseOnboardingWizardOptions): UseOnboardingWizardResult {
+  const [currentStep, setCurrentStep] = useState(0);
+  const [isWizardVisible, setIsWizardVisible] = useState(false);
+  const [onboardingState, setOnboardingState] = useState<OnboardingState>(DEFAULT_ONBOARDING_STATE);
+
+  // Load persisted state on mount
+  useEffect(() => {
+    const state = loadOnboardingState(storageKey);
+    setOnboardingState(state);
+  }, [storageKey]);
+
+  // Update persisted state helper
+  const updateState = useCallback(
+    (updates: Partial<OnboardingState>) => {
+      setOnboardingState((prev) => {
+        const newState = { ...prev, ...updates };
+        saveOnboardingState(storageKey, newState);
+        return newState;
+      });
+    },
+    [storageKey]
+  );
+
+  // Current step data
+  const currentStepData = useMemo(() => steps[currentStep] || null, [steps, currentStep]);
+  const totalSteps = steps.length;
+
+  // Navigation handlers
+  const goToNextStep = useCallback(() => {
+    if (currentStep < totalSteps - 1) {
+      const nextStep = currentStep + 1;
+      setCurrentStep(nextStep);
+      trackAnalytics(ONBOARDING_ANALYTICS.STEP_VIEWED, {
+        storageKey,
+        step: nextStep,
+        stepId: steps[nextStep]?.id,
+      });
+    }
+  }, [currentStep, totalSteps, storageKey, steps]);
+
+  const goToPreviousStep = useCallback(() => {
+    if (currentStep > 0) {
+      setCurrentStep(currentStep - 1);
+    }
+  }, [currentStep]);
+
+  const goToStep = useCallback(
+    (step: number) => {
+      if (step >= 0 && step < totalSteps) {
+        setCurrentStep(step);
+        trackAnalytics(ONBOARDING_ANALYTICS.STEP_VIEWED, {
+          storageKey,
+          step,
+          stepId: steps[step]?.id,
+        });
+      }
+    },
+    [totalSteps, storageKey, steps]
+  );
+
+  // Wizard lifecycle handlers
+  const startWizard = useCallback(() => {
+    setCurrentStep(0);
+    setIsWizardVisible(true);
+    trackAnalytics(ONBOARDING_ANALYTICS.STARTED, { storageKey });
+  }, [storageKey]);
+
+  const completeWizard = useCallback(() => {
+    setIsWizardVisible(false);
+    setCurrentStep(0);
+    updateState({
+      completed: true,
+      completedAt: new Date().toISOString(),
+    });
+    trackAnalytics(ONBOARDING_ANALYTICS.COMPLETED, { storageKey });
+    onComplete?.();
+  }, [storageKey, updateState, onComplete]);
+
+  const skipWizard = useCallback(() => {
+    setIsWizardVisible(false);
+    setCurrentStep(0);
+    updateState({
+      skipped: true,
+      skippedAt: new Date().toISOString(),
+    });
+    trackAnalytics(ONBOARDING_ANALYTICS.SKIPPED, {
+      storageKey,
+      skippedAtStep: currentStep,
+    });
+    onSkip?.();
+  }, [storageKey, currentStep, updateState, onSkip]);
+
+  return {
+    // Visibility
+    isVisible: isWizardVisible,
+
+    // Steps
+    currentStep,
+    currentStepData,
+    totalSteps,
+
+    // Navigation
+    goToNextStep,
+    goToPreviousStep,
+    goToStep,
+
+    // Actions
+    startWizard,
+    completeWizard,
+    skipWizard,
+
+    // State
+    isCompleted: onboardingState.completed,
+    isSkipped: onboardingState.skipped,
+  };
+}

apps/ui/src/components/ui/keyboard-map.tsx

@@ -84,11 +84,12 @@ const KEYBOARD_ROWS = [
 // Map shortcut names to human-readable labels
 const SHORTCUT_LABELS: Record<keyof KeyboardShortcuts, string> = {
   board: 'Kanban Board',
+  graph: 'Graph View',
   agent: 'Agent Runner',
   spec: 'Spec Editor',
   context: 'Context',
+  memory: 'Memory',
   settings: 'Settings',
-  profiles: 'AI Profiles',
   terminal: 'Terminal',
   ideation: 'Ideation',
   githubIssues: 'GitHub Issues',
@@ -102,7 +103,6 @@ const SHORTCUT_LABELS: Record<keyof KeyboardShortcuts, string> = {
   projectPicker: 'Project Picker',
   cyclePrevProject: 'Prev Project',
   cycleNextProject: 'Next Project',
-  addProfile: 'Add Profile',
   splitTerminalRight: 'Split Right',
   splitTerminalDown: 'Split Down',
   closeTerminal: 'Close Terminal',
@@ -112,11 +112,12 @@ const SHORTCUT_LABELS: Record<keyof KeyboardShortcuts, string> = {
 // Categorize shortcuts for color coding
 const SHORTCUT_CATEGORIES: Record<keyof KeyboardShortcuts, 'navigation' | 'ui' | 'action'> = {
   board: 'navigation',
+  graph: 'navigation',
   agent: 'navigation',
   spec: 'navigation',
   context: 'navigation',
+  memory: 'navigation',
   settings: 'navigation',
-  profiles: 'navigation',
   terminal: 'navigation',
   ideation: 'navigation',
   githubIssues: 'navigation',
@@ -130,7 +131,6 @@ const SHORTCUT_CATEGORIES: Record<keyof KeyboardShortcuts, 'navigation' | 'ui' |
   projectPicker: 'action',
   cyclePrevProject: 'action',
   cycleNextProject: 'action',
-  addProfile: 'action',
   splitTerminalRight: 'action',
   splitTerminalDown: 'action',
   closeTerminal: 'action',

apps/ui/src/components/ui/provider-icon.tsx

@@ -1,5 +1,4 @@
 import type { ComponentType, SVGProps } from 'react';
-import { Cpu } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import type { AgentModel, ModelProvider } from '@automaker/types';
 import { getProviderFromModel } from '@/lib/utils';
@@ -10,6 +9,15 @@ const PROVIDER_ICON_KEYS = {
   cursor: 'cursor',
   gemini: 'gemini',
   grok: 'grok',
+  opencode: 'opencode',
+  deepseek: 'deepseek',
+  qwen: 'qwen',
+  nova: 'nova',
+  meta: 'meta',
+  mistral: 'mistral',
+  minimax: 'minimax',
+  glm: 'glm',
+  bigpickle: 'bigpickle',
 } as const;
 
 type ProviderIconKey = keyof typeof PROVIDER_ICON_KEYS;
@@ -17,6 +25,8 @@ type ProviderIconKey = keyof typeof PROVIDER_ICON_KEYS;
 interface ProviderIconDefinition {
   viewBox: string;
   path: string;
+  fillRule?: 'nonzero' | 'evenodd';
+  fill?: string;
 }
 
 const PROVIDER_ICON_DEFINITIONS: Record<ProviderIconKey, ProviderIconDefinition> = {
@@ -24,15 +34,18 @@ const PROVIDER_ICON_DEFINITIONS: Record<ProviderIconKey, ProviderIconDefinition>
     viewBox: '0 0 248 248',
     // Official Claude logo from claude.ai favicon
     path: 'M52.4285 162.873L98.7844 136.879L99.5485 134.602L98.7844 133.334H96.4921L88.7237 132.862L62.2346 132.153L39.3113 131.207L17.0249 130.026L11.4214 128.844L6.2 121.873L6.7094 118.447L11.4214 115.257L18.171 115.847L33.0711 116.911L55.485 118.447L71.6586 119.392L95.728 121.873H99.5485L100.058 120.337L98.7844 119.392L97.7656 118.447L74.5877 102.732L49.4995 86.1905L36.3823 76.62L29.3779 71.7757L25.8121 67.2858L24.2839 57.3608L30.6515 50.2716L39.3113 50.8623L41.4763 51.4531L50.2636 58.1879L68.9842 72.7209L93.4357 90.6804L97.0015 93.6343L98.4374 92.6652L98.6571 91.9801L97.0015 89.2625L83.757 65.2772L69.621 40.8192L63.2534 30.6579L61.5978 24.632C60.9565 22.1032 60.579 20.0111 60.579 17.4246L67.8381 7.49965L71.9133 6.19995L81.7193 7.49965L85.7946 11.0443L91.9074 24.9865L101.714 46.8451L116.996 76.62L121.453 85.4816L123.873 93.6343L124.764 96.1155H126.292V94.6976L127.566 77.9197L129.858 57.3608L132.15 30.8942L132.915 23.4505L136.608 14.4708L143.994 9.62643L149.725 12.344L154.437 19.0788L153.8 23.4505L150.998 41.6463L145.522 70.1215L141.957 89.2625H143.994L146.414 86.7813L156.093 74.0206L172.266 53.698L179.398 45.6635L187.803 36.802L193.152 32.5484H203.34L210.726 43.6549L207.415 55.1159L196.972 68.3492L188.312 79.5739L175.896 96.2095L168.191 109.585L168.882 110.689L170.738 110.53L198.755 104.504L213.91 101.787L231.994 98.7149L240.144 102.496L241.036 106.395L237.852 114.311L218.495 119.037L195.826 123.645L162.07 131.592L161.696 131.893L162.137 132.547L177.36 133.925L183.855 134.279H199.774L229.447 136.524L237.215 141.605L241.8 147.867L241.036 152.711L229.065 158.737L213.019 154.956L175.45 145.977L162.587 142.787H160.805V143.85L171.502 154.366L191.242 172.089L215.82 195.011L217.094 200.682L213.91 205.172L210.599 204.699L188.949 188.394L180.544 181.069L161.696 165.118H160.422V166.772L164.752 173.152L187.803 207.771L188.949 218.405L187.294 221.832L181.308 223.959L174.813 222.777L161.187 203.754L147.305 182.486L136.098 163.345L134.745 164.2L128.075 235.42L125.019 239.082L117.887 241.8L111.902 237.31L108.718 229.984L111.902 215.452L115.722 196.547L118.779 181.541L121.58 162.873L123.291 156.636L123.14 156.219L121.773 156.449L107.699 175.752L86.304 204.699L69.3663 222.777L65.291 224.431L58.2867 220.768L58.9235 214.27L62.8713 208.48L86.304 178.705L100.44 160.155L109.551 149.507L109.462 147.967L108.959 147.924L46.6977 188.512L35.6182 189.93L30.7788 185.44L31.4156 178.115L33.7079 175.752L52.4285 162.873Z',
+    fill: '#d97757',
   },
   openai: {
     viewBox: '0 0 158.7128 157.296',
     path: 'M60.8734,57.2556v-14.9432c0-1.2586.4722-2.2029,1.5728-2.8314l30.0443-17.3023c4.0899-2.3593,8.9662-3.4599,13.9988-3.4599,18.8759,0,30.8307,14.6289,30.8307,30.2006,0,1.1007,0,2.3593-.158,3.6178l-31.1446-18.2467c-1.8872-1.1006-3.7754-1.1006-5.6629,0l-39.4812,22.9651ZM131.0276,115.4561v-35.7074c0-2.2028-.9446-3.7756-2.8318-4.8763l-39.481-22.9651,12.8982-7.3934c1.1007-.6285,2.0453-.6285,3.1458,0l30.0441,17.3024c8.6523,5.0341,14.4708,15.7296,14.4708,26.1107,0,11.9539-7.0769,22.965-18.2461,27.527v.0021ZM51.593,83.9964l-12.8982-7.5497c-1.1007-.6285-1.5728-1.5728-1.5728-2.8314v-34.6048c0-16.8303,12.8982-29.5722,30.3585-29.5722,6.607,0,12.7403,2.2029,17.9324,6.1349l-30.987,17.9324c-1.8871,1.1007-2.8314,2.6735-2.8314,4.8764v45.6159l-.0014-.0015ZM79.3562,100.0403l-18.4829-10.3811v-22.0209l18.4829-10.3811,18.4812,10.3811v22.0209l-18.4812,10.3811ZM91.2319,147.8591c-6.607,0-12.7403-2.2031-17.9324-6.1344l30.9866-17.9333c1.8872-1.1005,2.8318-2.6728,2.8318-4.8759v-45.616l13.0564,7.5498c1.1005.6285,1.5723,1.5728,1.5723,2.8314v34.6051c0,16.8297-13.0564,29.5723-30.5147,29.5723v.001ZM53.9522,112.7822l-30.0443-17.3024c-8.652-5.0343-14.471-15.7296-14.471-26.1107,0-12.1119,7.2356-22.9652,18.403-27.5272v35.8634c0,2.2028.9443,3.7756,2.8314,4.8763l39.3248,22.8068-12.8982,7.3938c-1.1007.6287-2.045.6287-3.1456,0ZM52.2229,138.5791c-17.7745,0-30.8306-13.3713-30.8306-29.8871,0-1.2585.1578-2.5169.3143-3.7754l30.987,17.9323c1.8871,1.1005,3.7757,1.1005,5.6628,0l39.4811-22.807v14.9435c0,1.2585-.4721,2.2021-1.5728,2.8308l-30.0443,17.3025c-4.0898,2.359-8.9662,3.4605-13.9989,3.4605h.0014ZM91.2319,157.296c19.0327,0,34.9188-13.5272,38.5383-31.4594,17.6164-4.562,28.9425-21.0779,28.9425-37.908,0-11.0112-4.719-21.7066-13.2133-29.4143.7867-3.3035,1.2595-6.607,1.2595-9.909,0-22.4929-18.2471-39.3247-39.3251-39.3247-4.2461,0-8.3363.6285-12.4262,2.045-7.0792-6.9213-16.8318-11.3254-27.5271-11.3254-19.0331,0-34.9191,13.5268-38.5384,31.4591C11.3255,36.0212,0,52.5373,0,69.3675c0,11.0112,4.7184,21.7065,13.2125,29.4142-.7865,3.3035-1.2586,6.6067-1.2586,9.9092,0,22.4923,18.2466,39.3241,39.3248,39.3241,4.2462,0,8.3362-.6277,12.426-2.0441,7.0776,6.921,16.8302,11.3251,27.5271,11.3251Z',
+    fill: '#74aa9c',
   },
   cursor: {
     viewBox: '0 0 512 512',
     // Official Cursor logo - hexagonal shape with triangular wedge
     path: 'M415.035 156.35l-151.503-87.4695c-4.865-2.8094-10.868-2.8094-15.733 0l-151.4969 87.4695c-4.0897 2.362-6.6146 6.729-6.6146 11.459v176.383c0 4.73 2.5249 9.097 6.6146 11.458l151.5039 87.47c4.865 2.809 10.868 2.809 15.733 0l151.504-87.47c4.089-2.361 6.614-6.728 6.614-11.458v-176.383c0-4.73-2.525-9.097-6.614-11.459zm-9.516 18.528l-146.255 253.32c-.988 1.707-3.599 1.01-3.599-.967v-165.872c0-3.314-1.771-6.379-4.644-8.044l-143.645-82.932c-1.707-.988-1.01-3.599.968-3.599h292.509c4.154 0 6.75 4.503 4.673 8.101h-.007z',
+    fill: '#5E9EFF',
   },
   gemini: {
     viewBox: '0 0 192 192',
@@ -44,6 +57,55 @@ const PROVIDER_ICON_DEFINITIONS: Record<ProviderIconKey, ProviderIconDefinition>
     // Official Grok/xAI logo - stylized symbol from grok.com
     path: 'M213.235 306.019l178.976-180.002v.169l51.695-51.763c-.924 1.32-1.86 2.605-2.785 3.89-39.281 54.164-58.46 80.649-43.07 146.922l-.09-.101c10.61 45.11-.744 95.137-37.398 131.836-46.216 46.306-120.167 56.611-181.063 14.928l42.462-19.675c38.863 15.278 81.392 8.57 111.947-22.03 30.566-30.6 37.432-75.159 22.065-112.252-2.92-7.025-11.67-8.795-17.792-4.263l-124.947 92.341zm-25.786 22.437l-.033.034L68.094 435.217c7.565-10.429 16.957-20.294 26.327-30.149 26.428-27.803 52.653-55.359 36.654-94.302-21.422-52.112-8.952-113.177 30.724-152.898 41.243-41.254 101.98-51.661 152.706-30.758 11.23 4.172 21.016 10.114 28.638 15.639l-42.359 19.584c-39.44-16.563-84.629-5.299-112.207 22.313-37.298 37.308-44.84 102.003-1.128 143.81z',
   },
+  opencode: {
+    viewBox: '0 0 512 512',
+    // Official OpenCode favicon - geometric icon from opencode.ai
+    path: 'M384 416H128V96H384V416ZM320 160H192V352H320V160Z',
+    fillRule: 'evenodd',
+    fill: '#6366F1',
+  },
+  deepseek: {
+    viewBox: '0 0 24 24',
+    // Official DeepSeek logo - whale icon from lobehub/lobe-icons
+    path: 'M23.748 4.482c-.254-.124-.364.113-.512.234-.051.039-.094.09-.137.136-.372.397-.806.657-1.373.626-.829-.046-1.537.214-2.163.848-.133-.782-.575-1.248-1.247-1.548-.352-.156-.708-.311-.955-.65-.172-.241-.219-.51-.305-.774-.055-.16-.11-.323-.293-.35-.2-.031-.278.136-.356.276-.313.572-.434 1.202-.422 1.84.027 1.436.633 2.58 1.838 3.393.137.093.172.187.129.323-.082.28-.18.552-.266.833-.055.179-.137.217-.329.14a5.526 5.526 0 01-1.736-1.18c-.857-.828-1.631-1.742-2.597-2.458a11.365 11.365 0 00-.689-.471c-.985-.957.13-1.743.388-1.836.27-.098.093-.432-.779-.428-.872.004-1.67.295-2.687.684a3.055 3.055 0 01-.465.137 9.597 9.597 0 00-2.883-.102c-1.885.21-3.39 1.102-4.497 2.623C.082 8.606-.231 10.684.152 12.85c.403 2.284 1.569 4.175 3.36 5.653 1.858 1.533 3.997 2.284 6.438 2.14 1.482-.085 3.133-.284 4.994-1.86.47.234.962.327 1.78.397.63.059 1.236-.03 1.705-.128.735-.156.684-.837.419-.961-2.155-1.004-1.682-.595-2.113-.926 1.096-1.296 2.746-2.642 3.392-7.003.05-.347.007-.565 0-.845-.004-.17.035-.237.23-.256a4.173 4.173 0 001.545-.475c1.396-.763 1.96-2.015 2.093-3.517.02-.23-.004-.467-.247-.588zM11.581 18c-2.089-1.642-3.102-2.183-3.52-2.16-.392.024-.321.471-.235.763.09.288.207.486.371.739.114.167.192.416-.113.603-.673.416-1.842-.14-1.897-.167-1.361-.802-2.5-1.86-3.301-3.307-.774-1.393-1.224-2.887-1.298-4.482-.02-.386.093-.522.477-.592a4.696 4.696 0 011.529-.039c2.132.312 3.946 1.265 5.468 2.774.868.86 1.525 1.887 2.202 2.891.72 1.066 1.494 2.082 2.48 2.914.348.292.625.514.891.677-.802.09-2.14.11-3.054-.614zm1-6.44a.306.306 0 01.415-.287.302.302 0 01.2.288.306.306 0 01-.31.307.303.303 0 01-.304-.308zm3.11 1.596c-.2.081-.399.151-.59.16a1.245 1.245 0 01-.798-.254c-.274-.23-.47-.358-.552-.758a1.73 1.73 0 01.016-.588c.07-.327-.008-.537-.239-.727-.187-.156-.426-.199-.688-.199a.559.559 0 01-.254-.078c-.11-.054-.2-.19-.114-.358.028-.054.16-.186.192-.21.356-.202.767-.136 1.146.016.352.144.618.408 1.001.782.391.451.462.576.685.914.176.265.336.537.445.848.067.195-.019.354-.25.452z',
+  },
+  qwen: {
+    viewBox: '0 0 24 24',
+    // Official Qwen logo - geometric star from lobehub/lobe-icons
+    path: 'M12.604 1.34c.393.69.784 1.382 1.174 2.075a.18.18 0 00.157.091h5.552c.174 0 .322.11.446.327l1.454 2.57c.19.337.24.478.024.837-.26.43-.513.864-.76 1.3l-.367.658c-.106.196-.223.28-.04.512l2.652 4.637c.172.301.111.494-.043.77-.437.785-.882 1.564-1.335 2.34-.159.272-.352.375-.68.37-.777-.016-1.552-.01-2.327.016a.099.099 0 00-.081.05 575.097 575.097 0 01-2.705 4.74c-.169.293-.38.363-.725.364-.997.003-2.002.004-3.017.002a.537.537 0 01-.465-.271l-1.335-2.323a.09.09 0 00-.083-.049H4.982c-.285.03-.553-.001-.805-.092l-1.603-2.77a.543.543 0 01-.002-.54l1.207-2.12a.198.198 0 000-.197 550.951 550.951 0 01-1.875-3.272l-.79-1.395c-.16-.31-.173-.496.095-.965.465-.813.927-1.625 1.387-2.436.132-.234.304-.334.584-.335a338.3 338.3 0 012.589-.001.124.124 0 00.107-.063l2.806-4.895a.488.488 0 01.422-.246c.524-.001 1.053 0 1.583-.006L11.704 1c.341-.003.724.032.9.34zm-3.432.403a.06.06 0 00-.052.03L6.254 6.788a.157.157 0 01-.135.078H3.253c-.056 0-.07.025-.041.074l5.81 10.156c.025.042.013.062-.034.063l-2.795.015a.218.218 0 00-.2.116l-1.32 2.31c-.044.078-.021.118.068.118l5.716.008c.046 0 .08.02.104.061l1.403 2.454c.046.081.092.082.139 0l5.006-8.76.783-1.382a.055.055 0 01.096 0l1.424 2.53a.122.122 0 00.107.062l2.763-.02a.04.04 0 00.035-.02.041.041 0 000-.04l-2.9-5.086a.108.108 0 010-.113l.293-.507 1.12-1.977c.024-.041.012-.062-.035-.062H9.2c-.059 0-.073-.026-.043-.077l1.434-2.505a.107.107 0 000-.114L9.225 1.774a.06.06 0 00-.053-.031zm6.29 8.02c.046 0 .058.02.034.06l-.832 1.465-2.613 4.585a.056.056 0 01-.05.029.058.058 0 01-.05-.029L8.498 9.841c-.02-.034-.01-.052.028-.054l.216-.012 6.722-.012z',
+  },
+  nova: {
+    viewBox: '0 0 33 32',
+    // Official Amazon Nova logo from lobehub/lobe-icons
+    path: 'm17.865 23.28 1.533 1.543c.07.07.092.175.055.267l-2.398 6.118A1.24 1.24 0 0 1 15.9 32c-.51 0-.969-.315-1.155-.793l-3.451-8.804-5.582 5.617a.246.246 0 0 1-.35 0l-1.407-1.415a.25.25 0 0 1 0-.352l6.89-6.932a1.3 1.3 0 0 1 .834-.398 1.25 1.25 0 0 1 1.232.79l2.992 7.63 1.557-3.977a.248.248 0 0 1 .408-.085zm8.224-19.3-5.583 5.617-3.45-8.805a1.24 1.24 0 0 0-1.43-.762c-.414.092-.744.407-.899.805l-2.38 6.072a.25.25 0 0 0 .055.267l1.533 1.543c.127.127.34.082.407-.085L15.9 4.655l2.991 7.629a1.24 1.24 0 0 0 2.035.425l6.922-6.965a.25.25 0 0 0 0-.352L26.44 3.977a.246.246 0 0 0-.35 0zM8.578 17.566l-3.953-1.567 7.582-3.01c.49-.195.815-.685.785-1.24a1.3 1.3 0 0 0-.395-.84l-6.886-6.93a.246.246 0 0 0-.35 0L3.954 5.395a.25.25 0 0 0 0 .353l5.583 5.617-8.75 3.472a1.25 1.25 0 0 0 0 2.325l6.079 2.412a.24.24 0 0 0 .266-.055l1.533-1.542a.25.25 0 0 0-.085-.41zm22.434-2.73-6.08-2.412a.24.24 0 0 0-.265.055l-1.533 1.542a.25.25 0 0 0 .084.41L27.172 16l-7.583 3.01a1.255 1.255 0 0 0-.785 1.24c.018.317.172.614.395.84l6.89 6.931a.246.246 0 0 0 .35 0l1.406-1.415a.25.25 0 0 0 0-.352l-5.582-5.617 8.75-3.472a1.25 1.25 0 0 0 0-2.325z',
+    fill: '#FF9900',
+  },
+  // Meta and Mistral use custom standalone SVG components
+  // These placeholder entries prevent TypeScript errors
+  meta: {
+    viewBox: '0 0 24 24',
+    path: '',
+  },
+  mistral: {
+    viewBox: '0 0 24 24',
+    path: '',
+  },
+  minimax: {
+    viewBox: '0 0 24 24',
+    // Official MiniMax logo from lobehub/lobe-icons
+    path: 'M16.278 2c1.156 0 2.093.927 2.093 2.07v12.501a.74.74 0 00.744.709.74.74 0 00.743-.709V9.099a2.06 2.06 0 012.071-2.049A2.06 2.06 0 0124 9.1v6.561a.649.649 0 01-.652.645.649.649 0 01-.653-.645V9.1a.762.762 0 00-.766-.758.762.762 0 00-.766.758v7.472a2.037 2.037 0 01-2.048 2.026 2.037 2.037 0 01-2.048-2.026v-12.5a.785.785 0 00-.788-.753.785.785 0 00-.789.752l-.001 15.904A2.037 2.037 0 0113.441 22a2.037 2.037 0 01-2.048-2.026V18.04c0-.356.292-.645.652-.645.36 0 .652.289.652.645v1.934c0 .263.142.506.372.638.23.131.514.131.744 0a.734.734 0 00.372-.638V4.07c0-1.143.937-2.07 2.093-2.07zm-5.674 0c1.156 0 2.093.927 2.093 2.07v11.523a.648.648 0 01-.652.645.648.648 0 01-.652-.645V4.07a.785.785 0 00-.789-.78.785.785 0 00-.789.78v14.013a2.06 2.06 0 01-2.07 2.048 2.06 2.06 0 01-2.071-2.048V9.1a.762.762 0 00-.766-.758.762.762 0 00-.766.758v3.8a2.06 2.06 0 01-2.071 2.049A2.06 2.06 0 010 12.9v-1.378c0-.357.292-.646.652-.646.36 0 .653.29.653.646V12.9c0 .418.343.757.766.757s.766-.339.766-.757V9.099a2.06 2.06 0 012.07-2.048 2.06 2.06 0 012.071 2.048v8.984c0 .419.343.758.767.758.423 0 .766-.339.766-.758V4.07c0-1.143.937-2.07 2.093-2.07z',
+  },
+  glm: {
+    viewBox: '0 0 24 24',
+    // Official Z.ai logo from lobehub/lobe-icons (GLM provider)
+    path: 'M12.105 2L9.927 4.953H.653L2.83 2h9.276zM23.254 19.048L21.078 22h-9.242l2.174-2.952h9.244zM24 2L9.264 22H0L14.736 2H24z',
+  },
+  bigpickle: {
+    viewBox: '0 0 24 24',
+    // Big Pickle logo - stylized shape with dots
+    path: 'M8 4c-2.21 0-4 1.79-4 4v8c0 2.21 1.79 4 4 4h8c2.21 0 4-1.79 4-4V8c0-2.21-1.79-4-4-4H8zm0 2h8c1.103 0 2 .897 2 2v8c0 1.103-.897 2-2 2H8c-1.103 0-2-.897-2-2V8c0-1.103.897-2 2-2zm2 3a1 1 0 100 2 1 1 0 000-2zm4 0a1 1 0 100 2 1 1 0 000-2zm-4 4a1 1 0 100 2 1 1 0 000-2zm4 0a1 1 0 100 2 1 1 0 000-2z',
+    fill: '#4ADE80',
+  },
 };
 
 export interface ProviderIconProps extends Omit<SVGProps<SVGSVGElement>, 'viewBox'> {
@@ -72,7 +134,11 @@ export function ProviderIcon({ provider, title, className, ...props }: ProviderI
       {...rest}
     >
       {title && <title>{title}</title>}
-      <path d={definition.path} fill="currentColor" />
+      <path
+        d={definition.path}
+        fill={definition.fill || 'currentColor'}
+        fillRule={definition.fillRule}
+      />
     </svg>
   );
 }
@@ -97,8 +163,217 @@ export function GrokIcon(props: Omit<ProviderIconProps, 'provider'>) {
   return <ProviderIcon provider={PROVIDER_ICON_KEYS.grok} {...props} />;
 }
 
-export function OpenCodeIcon({ className, ...props }: { className?: string }) {
-  return <Cpu className={cn('inline-block', className)} {...props} />;
+export function OpenCodeIcon(props: Omit<ProviderIconProps, 'provider'>) {
+  return <ProviderIcon provider={PROVIDER_ICON_KEYS.opencode} {...props} />;
+}
+
+export function DeepSeekIcon({
+  className,
+  title,
+  ...props
+}: {
+  className?: string;
+  title?: string;
+}) {
+  const hasAccessibleLabel = Boolean(title);
+
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      className={cn('inline-block', className)}
+      role={hasAccessibleLabel ? 'img' : 'presentation'}
+      aria-hidden={!hasAccessibleLabel}
+      focusable="false"
+      {...props}
+    >
+      {title && <title>{title}</title>}
+      <path
+        d="M23.748 4.482c-.254-.124-.364.113-.512.234-.051.039-.094.09-.137.136-.372.397-.806.657-1.373.626-.829-.046-1.537.214-2.163.848-.133-.782-.575-1.248-1.247-1.548-.352-.156-.708-.311-.955-.65-.172-.241-.219-.51-.305-.774-.055-.16-.11-.323-.293-.35-.2-.031-.278.136-.356.276-.313.572-.434 1.202-.422 1.84.027 1.436.633 2.58 1.838 3.393.137.093.172.187.129.323-.082.28-.18.552-.266.833-.055.179-.137.217-.329.14a5.526 5.526 0 01-1.736-1.18c-.857-.828-1.631-1.742-2.597-2.458a11.365 11.365 0 00-.689-.471c-.985-.957.13-1.743.388-1.836.27-.098.093-.432-.779-.428-.872.004-1.67.295-2.687.684a3.055 3.055 0 01-.465.137 9.597 9.597 0 00-2.883-.102c-1.885.21-3.39 1.102-4.497 2.623C.082 8.606-.231 10.684.152 12.85c.403 2.284 1.569 4.175 3.36 5.653 1.858 1.533 3.997 2.284 6.438 2.14 1.482-.085 3.133-.284 4.994-1.86.47.234.962.327 1.78.397.63.059 1.236-.03 1.705-.128.735-.156.684-.837.419-.961-2.155-1.004-1.682-.595-2.113-.926 1.096-1.296 2.746-2.642 3.392-7.003.05-.347.007-.565 0-.845-.004-.17.035-.237.23-.256a4.173 4.173 0 001.545-.475c1.396-.763 1.96-2.015 2.093-3.517.02-.23-.004-.467-.247-.588zM11.581 18c-2.089-1.642-3.102-2.183-3.52-2.16-.392.024-.321.471-.235.763.09.288.207.486.371.739.114.167.192.416-.113.603-.673.416-1.842-.14-1.897-.167-1.361-.802-2.5-1.86-3.301-3.307-.774-1.393-1.224-2.887-1.298-4.482-.02-.386.093-.522.477-.592a4.696 4.696 0 011.529-.039c2.132.312 3.946 1.265 5.468 2.774.868.86 1.525 1.887 2.202 2.891.72 1.066 1.494 2.082 2.48 2.914.348.292.625.514.891.677-.802.09-2.14.11-3.054-.614zm1-6.44a.306.306 0 01.415-.287.302.302 0 01.2.288.306.306 0 01-.31.307.303.303 0 01-.304-.308zm3.11 1.596c-.2.081-.399.151-.59.16a1.245 1.245 0 01-.798-.254c-.274-.23-.47-.358-.552-.758a1.73 1.73 0 01.016-.588c.07-.327-.008-.537-.239-.727-.187-.156-.426-.199-.688-.199a.559.559 0 01-.254-.078c-.11-.054-.2-.19-.114-.358.028-.054.16-.186.192-.21.356-.202.767-.136 1.146.016.352.144.618.408 1.001.782.391.451.462.576.685.914.176.265.336.537.445.848.067.195-.019.354-.25.452z"
+        fill="#4D6BFE"
+      />
+    </svg>
+  );
+}
+
+export function QwenIcon({ className, title, ...props }: { className?: string; title?: string }) {
+  const hasAccessibleLabel = Boolean(title);
+
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      className={cn('inline-block', className)}
+      role={hasAccessibleLabel ? 'img' : 'presentation'}
+      aria-hidden={!hasAccessibleLabel}
+      focusable="false"
+      {...props}
+    >
+      {title && <title>{title}</title>}
+      <defs>
+        <linearGradient id="qwen-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
+          <stop offset="0%" style={{ stopColor: '#6336E7', stopOpacity: 0.84 }} />
+          <stop offset="100%" style={{ stopColor: '#6F69F7', stopOpacity: 0.84 }} />
+        </linearGradient>
+      </defs>
+      <path
+        d="M12.604 1.34c.393.69.784 1.382 1.174 2.075a.18.18 0 00.157.091h5.552c.174 0 .322.11.446.327l1.454 2.57c.19.337.24.478.024.837-.26.43-.513.864-.76 1.3l-.367.658c-.106.196-.223.28-.04.512l2.652 4.637c.172.301.111.494-.043.77-.437.785-.882 1.564-1.335 2.34-.159.272-.352.375-.68.37-.777-.016-1.552-.01-2.327.016a.099.099 0 00-.081.05 575.097 575.097 0 01-2.705 4.74c-.169.293-.38.363-.725.364-.997.003-2.002.004-3.017.002a.537.537 0 01-.465-.271l-1.335-2.323a.09.09 0 00-.083-.049H4.982c-.285.03-.553-.001-.805-.092l-1.603-2.77a.543.543 0 01-.002-.54l1.207-2.12a.198.198 0 000-.197 550.951 550.951 0 01-1.875-3.272l-.79-1.395c-.16-.31-.173-.496.095-.965.465-.813.927-1.625 1.387-2.436.132-.234.304-.334.584-.335a338.3 338.3 0 012.589-.001.124.124 0 00.107-.063l2.806-4.895a.488.488 0 01.422-.246c.524-.001 1.053 0 1.583-.006L11.704 1c.341-.003.724.032.9.34zm-3.432.403a.06.06 0 00-.052.03L6.254 6.788a.157.157 0 01-.135.078H3.253c-.056 0-.07.025-.041.074l5.81 10.156c.025.042.013.062-.034.063l-2.795.015a.218.218 0 00-.2.116l-1.32 2.31c-.044.078-.021.118.068.118l5.716.008c.046 0 .08.02.104.061l1.403 2.454c.046.081.092.082.139 0l5.006-8.76.783-1.382a.055.055 0 01.096 0l1.424 2.53a.122.122 0 00.107.062l2.763-.02a.04.04 0 00.035-.02.041.041 0 000-.04l-2.9-5.086a.108.108 0 010-.113l.293-.507 1.12-1.977c.024-.041.012-.062-.035-.062H9.2c-.059 0-.073-.026-.043-.077l1.434-2.505a.107.107 0 000-.114L9.225 1.774a.06.06 0 00-.053-.031zm6.29 8.02c.046 0 .058.02.034.06l-.832 1.465-2.613 4.585a.056.056 0 01-.05.029.058.058 0 01-.05-.029L8.498 9.841c-.02-.034-.01-.052.028-.054l.216-.012 6.722-.012z"
+        fill="url(#qwen-gradient)"
+      />
+    </svg>
+  );
+}
+
+export function NovaIcon({ className, title, ...props }: { className?: string; title?: string }) {
+  const hasAccessibleLabel = Boolean(title);
+
+  return (
+    <svg
+      viewBox="0 0 33 32"
+      className={cn('inline-block', className)}
+      role={hasAccessibleLabel ? 'img' : 'presentation'}
+      aria-hidden={!hasAccessibleLabel}
+      focusable="false"
+      {...props}
+    >
+      {title && <title>{title}</title>}
+      <path
+        d="m17.865 23.28 1.533 1.543c.07.07.092.175.055.267l-2.398 6.118A1.24 1.24 0 0 1 15.9 32c-.51 0-.969-.315-1.155-.793l-3.451-8.804-5.582 5.617a.246.246 0 0 1-.35 0l-1.407-1.415a.25.25 0 0 1 0-.352l6.89-6.932a1.3 1.3 0 0 1 .834-.398 1.25 1.25 0 0 1 1.232.79l2.992 7.63 1.557-3.977a.248.248 0 0 1 .408-.085zm8.224-19.3-5.583 5.617-3.45-8.805a1.24 1.24 0 0 0-1.43-.762c-.414.092-.744.407-.899.805l-2.38 6.072a.25.25 0 0 0 .055.267l1.533 1.543c.127.127.34.082.407-.085L15.9 4.655l2.991 7.629a1.24 1.24 0 0 0 2.035.425l6.922-6.965a.25.25 0 0 0 0-.352L26.44 3.977a.246.246 0 0 0-.35 0zM8.578 17.566l-3.953-1.567 7.582-3.01c.49-.195.815-.685.785-1.24a1.3 1.3 0 0 0-.395-.84l-6.886-6.93a.246.246 0 0 0-.35 0L3.954 5.395a.25.25 0 0 0 0 .353l5.583 5.617-8.75 3.472a1.25 1.25 0 0 0 0 2.325l6.079 2.412a.24.24 0 0 0 .266-.055l1.533-1.542a.25.25 0 0 0-.085-.41zm22.434-2.73-6.08-2.412a.24.24 0 0 0-.265.055l-1.533 1.542a.25.25 0 0 0 .084.41L27.172 16l-7.583 3.01a1.255 1.255 0 0 0-.785 1.24c.018.317.172.614.395.84l6.89 6.931a.246.246 0 0 0 .35 0l1.406-1.415a.25.25 0 0 0 0-.352l-5.582-5.617 8.75-3.472a1.25 1.25 0 0 0 0-2.325z"
+        fill="#FF9900"
+      />
+    </svg>
+  );
+}
+
+export function MistralIcon({
+  className,
+  title,
+  ...props
+}: {
+  className?: string;
+  title?: string;
+}) {
+  const hasAccessibleLabel = Boolean(title);
+
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      className={cn('inline-block', className)}
+      role={hasAccessibleLabel ? 'img' : 'presentation'}
+      aria-hidden={!hasAccessibleLabel}
+      focusable="false"
+      {...props}
+    >
+      {title && <title>{title}</title>}
+      <path d="M3.428 3.4h3.429v3.428H3.428V3.4zm13.714 0h3.43v3.428h-3.43V3.4z" fill="gold" />
+      <path
+        d="M3.428 6.828h6.857v3.429H3.429V6.828zm10.286 0h6.857v3.429h-6.857V6.828z"
+        fill="#FFAF00"
+      />
+      <path d="M3.428 10.258h17.144v3.428H3.428v-3.428z" fill="#FF8205" />
+      <path
+        d="M3.428 13.686h3.429v3.428H3.428v-3.428zm6.858 0h3.429v3.428h-3.429v-3.428zm6.856 0h3.43v3.428h-3.43v-3.428z"
+        fill="#FA500F"
+      />
+      <path d="M0 17.114h10.286v3.429H0v-3.429zm13.714 0H24v3.429H13.714v-3.429z" fill="#E10500" />
+    </svg>
+  );
+}
+
+export function MetaIcon({ className, title, ...props }: { className?: string; title?: string }) {
+  const hasAccessibleLabel = Boolean(title);
+
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      className={cn('inline-block', className)}
+      role={hasAccessibleLabel ? 'img' : 'presentation'}
+      aria-hidden={!hasAccessibleLabel}
+      focusable="false"
+      {...props}
+    >
+      {title && <title>{title}</title>}
+      <path
+        d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"
+        fill="#1877F2"
+      />
+    </svg>
+  );
+}
+
+export function MiniMaxIcon({
+  className,
+  title,
+  ...props
+}: {
+  className?: string;
+  title?: string;
+}) {
+  const hasAccessibleLabel = Boolean(title);
+
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      className={cn('inline-block', className)}
+      role={hasAccessibleLabel ? 'img' : 'presentation'}
+      aria-hidden={!hasAccessibleLabel}
+      focusable="false"
+      {...props}
+    >
+      {title && <title>{title}</title>}
+      <path
+        d="M16.278 2c1.156 0 2.093.927 2.093 2.07v12.501a.74.74 0 00.744.709.74.74 0 00.743-.709V9.099a2.06 2.06 0 012.071-2.049A2.06 2.06 0 0124 9.1v6.561a.649.649 0 01-.652.645.649.649 0 01-.653-.645V9.1a.762.762 0 00-.766-.758.762.762 0 00-.766.758v7.472a2.037 2.037 0 01-2.048 2.026 2.037 2.037 0 01-2.048-2.026v-12.5a.785.785 0 00-.788-.753.785.785 0 00-.789.752l-.001 15.904A2.037 2.037 0 0113.441 22a2.037 2.037 0 01-2.048-2.026V18.04c0-.356.292-.645.652-.645.36 0 .652.289.652.645v1.934c0 .263.142.506.372.638.23.131.514.131.744 0a.734.734 0 00.372-.638V4.07c0-1.143.937-2.07 2.093-2.07zm-5.674 0c1.156 0 2.093.927 2.093 2.07v11.523a.648.648 0 01-.652.645.648.648 0 01-.652-.645V4.07a.785.785 0 00-.789-.78.785.785 0 00-.789.78v14.013a2.06 2.06 0 01-2.07 2.048 2.06 2.06 0 01-2.071-2.048V9.1a.762.762 0 00-.766-.758.762.762 0 00-.766.758v3.8a2.06 2.06 0 01-2.071 2.049A2.06 2.06 0 010 12.9v-1.378c0-.357.292-.646.652-.646.36 0 .653.29.653.646V12.9c0 .418.343.757.766.757s.766-.339.766-.757V9.099a2.06 2.06 0 012.07-2.048 2.06 2.06 0 012.071 2.048v8.984c0 .419.343.758.767.758.423 0 .766-.339.766-.758V4.07c0-1.143.937-2.07 2.093-2.07z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export function GlmIcon({ className, title, ...props }: { className?: string; title?: string }) {
+  const hasAccessibleLabel = Boolean(title);
+
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      className={cn('inline-block', className)}
+      role={hasAccessibleLabel ? 'img' : 'presentation'}
+      aria-hidden={!hasAccessibleLabel}
+      focusable="false"
+      {...props}
+    >
+      {title && <title>{title}</title>}
+      <path
+        d="M12.105 2L9.927 4.953H.653L2.83 2h9.276zM23.254 19.048L21.078 22h-9.242l2.174-2.952h9.244zM24 2L9.264 22H0L14.736 2H24z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export function BigPickleIcon({
+  className,
+  title,
+  ...props
+}: {
+  className?: string;
+  title?: string;
+}) {
+  const hasAccessibleLabel = Boolean(title);
+
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      className={cn('inline-block', className)}
+      role={hasAccessibleLabel ? 'img' : 'presentation'}
+      aria-hidden={!hasAccessibleLabel}
+      focusable="false"
+      {...props}
+    >
+      {title && <title>{title}</title>}
+      <path
+        d="M8 4c-2.21 0-4 1.79-4 4v8c0 2.21 1.79 4 4 4h8c2.21 0 4-1.79 4-4V8c0-2.21-1.79-4-4-4H8zm0 2h8c1.103 0 2 .897 2 2v8c0 1.103-.897 2-2 2H8c-1.103 0-2-.897-2-2V8c0-1.103.897-2 2-2zm2 3a1 1 0 100 2 1 1 0 000-2zm4 0a1 1 0 100 2 1 1 0 000-2zm-4 4a1 1 0 100 2 1 1 0 000-2zm4 0a1 1 0 100 2 1 1 0 000-2z"
+        fill="#4ADE80"
+      />
+    </svg>
+  );
 }
 
 export const PROVIDER_ICON_COMPONENTS: Record<
@@ -106,7 +381,7 @@ export const PROVIDER_ICON_COMPONENTS: Record<
   ComponentType<{ className?: string }>
 > = {
   claude: AnthropicIcon,
-  cursor: CursorIcon, // Default for Cursor provider (will be overridden by getProviderIconForModel)
+  cursor: CursorIcon,
   codex: OpenAIIcon,
   opencode: OpenCodeIcon,
 };
@@ -120,6 +395,53 @@ function getUnderlyingModelIcon(model?: AgentModel | string): ProviderIconKey {
 
   const modelStr = typeof model === 'string' ? model.toLowerCase() : model;
 
+  // Check for Amazon Bedrock models first (amazon-bedrock/...)
+  if (modelStr.startsWith('amazon-bedrock/')) {
+    // Bedrock-hosted models - detect the specific provider
+    if (modelStr.includes('anthropic') || modelStr.includes('claude')) {
+      return 'anthropic';
+    }
+    if (modelStr.includes('deepseek')) {
+      return 'deepseek';
+    }
+    if (modelStr.includes('nova')) {
+      return 'nova';
+    }
+    if (modelStr.includes('meta') || modelStr.includes('llama')) {
+      return 'meta';
+    }
+    if (modelStr.includes('mistral')) {
+      return 'mistral';
+    }
+    if (modelStr.includes('qwen')) {
+      return 'qwen';
+    }
+    // Default for unknown Bedrock models
+    return 'opencode';
+  }
+
+  // Check for native OpenCode models (opencode/...)
+  if (modelStr.startsWith('opencode/')) {
+    // Native OpenCode models - check specific model types
+    if (modelStr.includes('big-pickle')) {
+      return 'bigpickle';
+    }
+    if (modelStr.includes('grok')) {
+      return 'grok';
+    }
+    if (modelStr.includes('glm')) {
+      return 'glm';
+    }
+    if (modelStr.includes('gpt-5-nano') || modelStr.includes('nano')) {
+      return 'openai'; // GPT-5 Nano uses OpenAI icon
+    }
+    if (modelStr.includes('minimax')) {
+      return 'minimax';
+    }
+    // Default for other OpenCode models
+    return 'opencode';
+  }
+
   // Check for Cursor-specific models with underlying providers
   if (modelStr.includes('sonnet') || modelStr.includes('opus') || modelStr.includes('claude')) {
     return 'anthropic';
@@ -141,6 +463,7 @@ function getUnderlyingModelIcon(model?: AgentModel | string): ProviderIconKey {
   const provider = getProviderFromModel(model);
   if (provider === 'codex') return 'openai';
   if (provider === 'cursor') return 'cursor';
+  if (provider === 'opencode') return 'opencode';
   return 'anthropic';
 }
 
@@ -155,6 +478,15 @@ export function getProviderIconForModel(
     cursor: CursorIcon,
     gemini: GeminiIcon,
     grok: GrokIcon,
+    opencode: OpenCodeIcon,
+    deepseek: DeepSeekIcon,
+    qwen: QwenIcon,
+    nova: NovaIcon,
+    meta: MetaIcon,
+    mistral: MistralIcon,
+    minimax: MiniMaxIcon,
+    glm: GlmIcon,
+    bigpickle: BigPickleIcon,
   };
 
   return iconMap[iconKey] || AnthropicIcon;

apps/ui/src/components/views/board-view.tsx

@@ -7,7 +7,24 @@ import {
   useSensors,
   rectIntersection,
   pointerWithin,
+  type PointerEvent as DndPointerEvent,
 } from '@dnd-kit/core';
+
+// Custom pointer sensor that ignores drag events from within dialogs
+class DialogAwarePointerSensor extends PointerSensor {
+  static activators = [
+    {
+      eventName: 'onPointerDown' as const,
+      handler: ({ nativeEvent: event }: { nativeEvent: DndPointerEvent }) => {
+        // Don't start drag if the event originated from inside a dialog
+        if ((event.target as Element)?.closest?.('[role="dialog"]')) {
+          return false;
+        }
+        return true;
+      },
+    },
+  ];
+}
 import { useAppStore, Feature } from '@/store/app-store';
 import { getElectronAPI } from '@/lib/electron';
 import { getHttpApiClient } from '@/lib/http-api-client';
@@ -23,10 +40,7 @@ import { useKeyboardShortcutsConfig } from '@/hooks/use-keyboard-shortcuts';
 import { useWindowState } from '@/hooks/use-window-state';
 // Board-view specific imports
 import { BoardHeader } from './board-view/board-header';
-import { BoardSearchBar } from './board-view/board-search-bar';
-import { BoardControls } from './board-view/board-controls';
 import { KanbanBoard } from './board-view/kanban-board';
-import { GraphView } from './graph-view';
 import {
   AddFeatureDialog,
   AgentOutputModal,
@@ -58,9 +72,11 @@ import {
   useBoardPersistence,
   useFollowUpState,
   useSelectionMode,
+  useBoardOnboarding,
 } from './board-view/hooks';
-import { SelectionActionBar } from './board-view/components';
+import { SelectionActionBar, BoardOnboardingWizard } from './board-view/components';
 import { MassEditDialog } from './board-view/dialogs';
+import { generateSampleFeatures, isSampleFeature } from './board-view/constants';
 
 // Stable empty array to avoid infinite loop in selector
 const EMPTY_WORKTREES: ReturnType<ReturnType<typeof useAppStore.getState>['getWorktrees']> = [];
@@ -73,12 +89,6 @@ export function BoardView() {
     maxConcurrency,
     setMaxConcurrency,
     defaultSkipTests,
-    showProfilesOnly,
-    aiProfiles,
-    kanbanCardDetailLevel,
-    setKanbanCardDetailLevel,
-    boardViewMode,
-    setBoardViewMode,
     specCreatingForProject,
     setSpecCreatingForProject,
     pendingPlanApproval,
@@ -97,6 +107,8 @@ export function BoardView() {
   } = useAppStore();
   // Subscribe to pipelineConfigByProject to trigger re-renders when it changes
   const pipelineConfigByProject = useAppStore((state) => state.pipelineConfigByProject);
+  // Subscribe to worktreePanelVisibleByProject to trigger re-renders when it changes
+  const worktreePanelVisibleByProject = useAppStore((state) => state.worktreePanelVisibleByProject);
   const shortcuts = useKeyboardShortcutsConfig();
   const {
     features: hookFeatures,
@@ -176,6 +188,8 @@ export function BoardView() {
   const [searchQuery, setSearchQuery] = useState('');
   // Plan approval loading state
   const [isPlanApprovalLoading, setIsPlanApprovalLoading] = useState(false);
+  // Quick start loading state for onboarding
+  const [isQuickStartLoading, setIsQuickStartLoading] = useState(false);
   // Derive spec creation state from store - check if current project is the one being created
   const isCreatingSpec = specCreatingForProject === currentProject?.path;
   const creatingSpecProjectPath = specCreatingForProject ?? undefined;
@@ -248,7 +262,7 @@ export function BoardView() {
   }, []);
 
   const sensors = useSensors(
-    useSensor(PointerSensor, {
+    useSensor(DialogAwarePointerSensor, {
       activationConstraint: {
         distance: 8,
       },
@@ -495,6 +509,45 @@ export function BoardView() {
     [currentProject, selectedFeatureIds, updateFeature, exitSelectionMode]
   );
 
+  // Handler for bulk deleting multiple features
+  const handleBulkDelete = useCallback(async () => {
+    if (!currentProject || selectedFeatureIds.size === 0) return;
+
+    try {
+      const api = getHttpApiClient();
+      const featureIds = Array.from(selectedFeatureIds);
+      const result = await api.features.bulkDelete(currentProject.path, featureIds);
+
+      const successfullyDeletedIds =
+        result.results?.filter((r) => r.success).map((r) => r.featureId) ?? [];
+
+      if (successfullyDeletedIds.length > 0) {
+        // Delete from local state without calling the API again
+        successfullyDeletedIds.forEach((featureId) => {
+          useAppStore.getState().removeFeature(featureId);
+        });
+        toast.success(`Deleted ${successfullyDeletedIds.length} features`);
+      }
+
+      if (result.failedCount && result.failedCount > 0) {
+        toast.error('Failed to delete some features', {
+          description: `${result.failedCount} features failed to delete`,
+        });
+      }
+
+      // Exit selection mode and reload if the operation was at least partially processed.
+      if (result.results) {
+        exitSelectionMode();
+        loadFeatures();
+      } else if (!result.success) {
+        toast.error('Failed to delete features', { description: result.error });
+      }
+    } catch (error) {
+      logger.error('Bulk delete failed:', error);
+      toast.error('Failed to delete features');
+    }
+  }, [currentProject, selectedFeatureIds, exitSelectionMode, loadFeatures]);
+
   // Get selected features for mass edit dialog
   const selectedFeatures = useMemo(() => {
     return hookFeatures.filter((f) => selectedFeatureIds.has(f.id));
@@ -979,6 +1032,76 @@ export function BoardView() {
     currentProject,
   });
 
+  // Use onboarding wizard hook - triggered manually via help button
+  const onboarding = useBoardOnboarding({
+    projectPath: currentProject?.path || null,
+  });
+
+  // Handler for Quick Start - create sample features
+  const handleQuickStart = useCallback(async () => {
+    if (!currentProject) return;
+
+    setIsQuickStartLoading(true);
+    try {
+      const api = getHttpApiClient();
+      const sampleFeatures = generateSampleFeatures();
+
+      // Create each sample feature
+      for (const featureData of sampleFeatures) {
+        const result = await api.features.create(currentProject.path, featureData);
+        if (result.success && result.feature) {
+          useAppStore.getState().addFeature(result.feature);
+        }
+      }
+
+      onboarding.markQuickStartUsed();
+      toast.success('Sample tasks added!', {
+        description: 'Explore the board to see tasks at different stages.',
+      });
+
+      // Reload features to ensure state is in sync
+      loadFeatures();
+    } catch (error) {
+      logger.error('Failed to create sample features:', error);
+      toast.error('Failed to add sample tasks');
+    } finally {
+      setIsQuickStartLoading(false);
+    }
+  }, [currentProject, loadFeatures, onboarding]);
+
+  // Handler for clearing sample data
+  const handleClearSampleData = useCallback(async () => {
+    if (!currentProject) return;
+
+    const sampleFeatures = hookFeatures.filter((f) => isSampleFeature(f));
+    if (sampleFeatures.length === 0) {
+      onboarding.setHasSampleData(false);
+      return;
+    }
+
+    try {
+      const api = getHttpApiClient();
+      const featureIds = sampleFeatures.map((f) => f.id);
+      const result = await api.features.bulkDelete(currentProject.path, featureIds);
+
+      if (result.success || (result.results && result.results.some((r) => r.success))) {
+        // Remove from local state
+        const successfullyDeletedIds =
+          result.results?.filter((r) => r.success).map((r) => r.featureId) ?? featureIds;
+        successfullyDeletedIds.forEach((id) => {
+          useAppStore.getState().removeFeature(id);
+        });
+
+        onboarding.setHasSampleData(false);
+        toast.success('Sample tasks removed');
+        loadFeatures();
+      }
+    } catch (error) {
+      logger.error('Failed to clear sample data:', error);
+      toast.error('Failed to remove sample tasks');
+    }
+  }, [currentProject, hookFeatures, loadFeatures, onboarding]);
+
   // Find feature for pending plan approval
   const pendingApprovalFeature = useMemo(() => {
     if (!pendingPlanApproval) return null;
@@ -1140,7 +1263,7 @@ export function BoardView() {
     >
       {/* Header */}
       <BoardHeader
-        projectName={currentProject.name}
+        projectPath={currentProject.path}
         maxConcurrency={maxConcurrency}
         runningAgentsCount={runningAutoTasks.length}
         onConcurrencyChange={setMaxConcurrency}
@@ -1152,134 +1275,94 @@ export function BoardView() {
             autoMode.stop();
           }
         }}
-        onAddFeature={() => setShowAddDialog(true)}
         onOpenPlanDialog={() => setShowPlanDialog(true)}
-        addFeatureShortcut={{
-          key: shortcuts.addFeature,
-          action: () => setShowAddDialog(true),
-          description: 'Add new feature',
-        }}
         isMounted={isMounted}
+        searchQuery={searchQuery}
+        onSearchChange={setSearchQuery}
+        isCreatingSpec={isCreatingSpec}
+        creatingSpecProjectPath={creatingSpecProjectPath}
+        onShowBoardBackground={() => setShowBoardBackgroundModal(true)}
+        onShowCompletedModal={() => setShowCompletedModal(true)}
+        completedCount={completedFeatures.length}
+        onStartTour={onboarding.startWizard}
       />
 
-      {/* Worktree Panel */}
-      <WorktreePanel
-        refreshTrigger={worktreeRefreshKey}
-        projectPath={currentProject.path}
-        onCreateWorktree={() => setShowCreateWorktreeDialog(true)}
-        onDeleteWorktree={(worktree) => {
-          setSelectedWorktreeForAction(worktree);
-          setShowDeleteWorktreeDialog(true);
-        }}
-        onCommit={(worktree) => {
-          setSelectedWorktreeForAction(worktree);
-          setShowCommitWorktreeDialog(true);
-        }}
-        onCreatePR={(worktree) => {
-          setSelectedWorktreeForAction(worktree);
-          setShowCreatePRDialog(true);
-        }}
-        onCreateBranch={(worktree) => {
-          setSelectedWorktreeForAction(worktree);
-          setShowCreateBranchDialog(true);
-        }}
-        onAddressPRComments={handleAddressPRComments}
-        onResolveConflicts={handleResolveConflicts}
-        onRemovedWorktrees={handleRemovedWorktrees}
-        runningFeatureIds={runningAutoTasks}
-        branchCardCounts={branchCardCounts}
-        features={hookFeatures.map((f) => ({
-          id: f.id,
-          branchName: f.branchName,
-        }))}
-      />
+      {/* Worktree Panel - conditionally rendered based on visibility setting */}
+      {(worktreePanelVisibleByProject[currentProject.path] ?? true) && (
+        <WorktreePanel
+          refreshTrigger={worktreeRefreshKey}
+          projectPath={currentProject.path}
+          onCreateWorktree={() => setShowCreateWorktreeDialog(true)}
+          onDeleteWorktree={(worktree) => {
+            setSelectedWorktreeForAction(worktree);
+            setShowDeleteWorktreeDialog(true);
+          }}
+          onCommit={(worktree) => {
+            setSelectedWorktreeForAction(worktree);
+            setShowCommitWorktreeDialog(true);
+          }}
+          onCreatePR={(worktree) => {
+            setSelectedWorktreeForAction(worktree);
+            setShowCreatePRDialog(true);
+          }}
+          onCreateBranch={(worktree) => {
+            setSelectedWorktreeForAction(worktree);
+            setShowCreateBranchDialog(true);
+          }}
+          onAddressPRComments={handleAddressPRComments}
+          onResolveConflicts={handleResolveConflicts}
+          onRemovedWorktrees={handleRemovedWorktrees}
+          runningFeatureIds={runningAutoTasks}
+          branchCardCounts={branchCardCounts}
+          features={hookFeatures.map((f) => ({
+            id: f.id,
+            branchName: f.branchName,
+          }))}
+        />
+      )}
 
       {/* Main Content Area */}
       <div className="flex-1 flex flex-col overflow-hidden">
-        {/* Search Bar Row */}
-        <div className="px-4 pt-4 pb-2 flex items-center justify-between">
-          <BoardSearchBar
-            searchQuery={searchQuery}
-            onSearchChange={setSearchQuery}
-            isCreatingSpec={isCreatingSpec}
-            creatingSpecProjectPath={creatingSpecProjectPath ?? undefined}
-            currentProjectPath={currentProject?.path}
-          />
-
-          {/* Board Background & Detail Level Controls */}
-          <BoardControls
-            isMounted={isMounted}
-            onShowBoardBackground={() => setShowBoardBackgroundModal(true)}
-            onShowCompletedModal={() => setShowCompletedModal(true)}
-            completedCount={completedFeatures.length}
-            kanbanCardDetailLevel={kanbanCardDetailLevel}
-            onDetailLevelChange={setKanbanCardDetailLevel}
-            boardViewMode={boardViewMode}
-            onBoardViewModeChange={setBoardViewMode}
-          />
-        </div>
-        {/* View Content - Kanban or Graph */}
-        {boardViewMode === 'kanban' ? (
-          <KanbanBoard
-            sensors={sensors}
-            collisionDetectionStrategy={collisionDetectionStrategy}
-            onDragStart={handleDragStart}
-            onDragEnd={handleDragEnd}
-            activeFeature={activeFeature}
-            getColumnFeatures={getColumnFeatures}
-            backgroundImageStyle={backgroundImageStyle}
-            backgroundSettings={backgroundSettings}
-            onEdit={(feature) => setEditingFeature(feature)}
-            onDelete={(featureId) => handleDeleteFeature(featureId)}
-            onViewOutput={handleViewOutput}
-            onVerify={handleVerifyFeature}
-            onResume={handleResumeFeature}
-            onForceStop={handleForceStopFeature}
-            onManualVerify={handleManualVerify}
-            onMoveBackToInProgress={handleMoveBackToInProgress}
-            onFollowUp={handleOpenFollowUp}
-            onComplete={handleCompleteFeature}
-            onImplement={handleStartImplementation}
-            onViewPlan={(feature) => setViewPlanFeature(feature)}
-            onApprovePlan={handleOpenApprovalDialog}
-            onSpawnTask={(feature) => {
-              setSpawnParentFeature(feature);
-              setShowAddDialog(true);
-            }}
-            featuresWithContext={featuresWithContext}
-            runningAutoTasks={runningAutoTasks}
-            onArchiveAllVerified={() => setShowArchiveAllVerifiedDialog(true)}
-            pipelineConfig={
-              currentProject?.path ? pipelineConfigByProject[currentProject.path] || null : null
-            }
-            onOpenPipelineSettings={() => setShowPipelineSettings(true)}
-            isSelectionMode={isSelectionMode}
-            selectedFeatureIds={selectedFeatureIds}
-            onToggleFeatureSelection={toggleFeatureSelection}
-            onToggleSelectionMode={toggleSelectionMode}
-          />
-        ) : (
-          <GraphView
-            features={hookFeatures}
-            runningAutoTasks={runningAutoTasks}
-            currentWorktreePath={currentWorktreePath}
-            currentWorktreeBranch={currentWorktreeBranch}
-            projectPath={currentProject?.path || null}
-            searchQuery={searchQuery}
-            onSearchQueryChange={setSearchQuery}
-            onEditFeature={(feature) => setEditingFeature(feature)}
-            onViewOutput={handleViewOutput}
-            onStartTask={handleStartImplementation}
-            onStopTask={handleForceStopFeature}
-            onResumeTask={handleResumeFeature}
-            onUpdateFeature={updateFeature}
-            onSpawnTask={(feature) => {
-              setSpawnParentFeature(feature);
-              setShowAddDialog(true);
-            }}
-            onDeleteTask={(feature) => handleDeleteFeature(feature.id)}
-          />
-        )}
+        {/* View Content - Kanban Board */}
+        <KanbanBoard
+          sensors={sensors}
+          collisionDetectionStrategy={collisionDetectionStrategy}
+          onDragStart={handleDragStart}
+          onDragEnd={handleDragEnd}
+          activeFeature={activeFeature}
+          getColumnFeatures={getColumnFeatures}
+          backgroundImageStyle={backgroundImageStyle}
+          backgroundSettings={backgroundSettings}
+          onEdit={(feature) => setEditingFeature(feature)}
+          onDelete={(featureId) => handleDeleteFeature(featureId)}
+          onViewOutput={handleViewOutput}
+          onVerify={handleVerifyFeature}
+          onResume={handleResumeFeature}
+          onForceStop={handleForceStopFeature}
+          onManualVerify={handleManualVerify}
+          onMoveBackToInProgress={handleMoveBackToInProgress}
+          onFollowUp={handleOpenFollowUp}
+          onComplete={handleCompleteFeature}
+          onImplement={handleStartImplementation}
+          onViewPlan={(feature) => setViewPlanFeature(feature)}
+          onApprovePlan={handleOpenApprovalDialog}
+          onSpawnTask={(feature) => {
+            setSpawnParentFeature(feature);
+            setShowAddDialog(true);
+          }}
+          featuresWithContext={featuresWithContext}
+          runningAutoTasks={runningAutoTasks}
+          onArchiveAllVerified={() => setShowArchiveAllVerifiedDialog(true)}
+          onAddFeature={() => setShowAddDialog(true)}
+          pipelineConfig={
+            currentProject?.path ? pipelineConfigByProject[currentProject.path] || null : null
+          }
+          onOpenPipelineSettings={() => setShowPipelineSettings(true)}
+          isSelectionMode={isSelectionMode}
+          selectedFeatureIds={selectedFeatureIds}
+          onToggleFeatureSelection={toggleFeatureSelection}
+          onToggleSelectionMode={toggleSelectionMode}
+        />
       </div>
 
       {/* Selection Action Bar */}
@@ -1288,6 +1371,7 @@ export function BoardView() {
           selectedCount={selectedCount}
           totalCount={allSelectableFeatureIds.length}
           onEdit={() => setShowMassEditDialog(true)}
+          onDelete={handleBulkDelete}
           onClear={clearSelection}
           onSelectAll={() => selectAll(allSelectableFeatureIds)}
         />
@@ -1299,8 +1383,6 @@ export function BoardView() {
         onClose={() => setShowMassEditDialog(false)}
         selectedFeatures={selectedFeatures}
         onApply={handleBulkUpdate}
-        showProfilesOnly={showProfilesOnly}
-        aiProfiles={aiProfiles}
       />
 
       {/* Board Background Modal */}
@@ -1348,8 +1430,6 @@ export function BoardView() {
         defaultBranch={selectedWorktreeBranch}
         currentBranch={currentWorktreeBranch || undefined}
         isMaximized={isMaximized}
-        showProfilesOnly={showProfilesOnly}
-        aiProfiles={aiProfiles}
         parentFeature={spawnParentFeature}
         allFeatures={hookFeatures}
       />
@@ -1364,8 +1444,6 @@ export function BoardView() {
         branchCardCounts={branchCardCounts}
         currentBranch={currentWorktreeBranch || undefined}
         isMaximized={isMaximized}
-        showProfilesOnly={showProfilesOnly}
-        aiProfiles={aiProfiles}
         allFeatures={hookFeatures}
       />
 
@@ -1565,6 +1643,23 @@ export function BoardView() {
           setSelectedWorktreeForAction(null);
         }}
       />
+
+      {/* Board Onboarding Wizard */}
+      <BoardOnboardingWizard
+        isVisible={onboarding.isWizardVisible}
+        currentStep={onboarding.currentStep}
+        currentStepData={onboarding.currentStepData}
+        totalSteps={onboarding.totalSteps}
+        onNext={onboarding.goToNextStep}
+        onPrevious={onboarding.goToPreviousStep}
+        onSkip={onboarding.skipWizard}
+        onComplete={onboarding.completeWizard}
+        onQuickStart={handleQuickStart}
+        hasSampleData={onboarding.hasSampleData}
+        onClearSampleData={handleClearSampleData}
+        isQuickStartLoading={isQuickStartLoading}
+        steps={onboarding.steps}
+      />
     </div>
   );
 }

apps/ui/src/components/views/board-view/board-controls.tsx

@@ -1,18 +1,14 @@
 import { Button } from '@/components/ui/button';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
-import { ImageIcon, Archive, Minimize2, Square, Maximize2, Columns3, Network } from 'lucide-react';
-import { cn } from '@/lib/utils';
-import { BoardViewMode } from '@/store/app-store';
+import { ImageIcon, Archive, HelpCircle } from 'lucide-react';
 
 interface BoardControlsProps {
   isMounted: boolean;
   onShowBoardBackground: () => void;
   onShowCompletedModal: () => void;
   completedCount: number;
-  kanbanCardDetailLevel: 'minimal' | 'standard' | 'detailed';
-  onDetailLevelChange: (level: 'minimal' | 'standard' | 'detailed') => void;
-  boardViewMode: BoardViewMode;
-  onBoardViewModeChange: (mode: BoardViewMode) => void;
+  /** Callback to start the onboarding wizard tour */
+  onStartTour?: () => void;
 }
 
 export function BoardControls({
@@ -20,60 +16,33 @@ export function BoardControls({
   onShowBoardBackground,
   onShowCompletedModal,
   completedCount,
-  kanbanCardDetailLevel,
-  onDetailLevelChange,
-  boardViewMode,
-  onBoardViewModeChange,
+  onStartTour,
 }: BoardControlsProps) {
   if (!isMounted) return null;
 
   return (
     <TooltipProvider>
-      <div className="flex items-center gap-2 ml-4">
-        {/* View Mode Toggle - Kanban / Graph */}
-        <div
-          className="flex items-center rounded-lg bg-secondary border border-border"
-          data-testid="view-mode-toggle"
-        >
+      <div className="flex items-center gap-2">
+        {/* Board Tour Button - always visible when handler is provided */}
+        {onStartTour && (
           <Tooltip>
             <TooltipTrigger asChild>
-              <button
-                onClick={() => onBoardViewModeChange('kanban')}
-                className={cn(
-                  'p-2 rounded-l-lg transition-colors',
-                  boardViewMode === 'kanban'
-                    ? 'bg-brand-500/20 text-brand-500'
-                    : 'text-muted-foreground hover:text-foreground hover:bg-accent'
-                )}
-                data-testid="view-mode-kanban"
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={onStartTour}
+                className="h-8 px-2 min-w-[32px] focus-visible:ring-2 focus-visible:ring-primary"
+                data-testid="board-tour-button"
+                aria-label="Take a board tour - learn how to use the kanban board"
               >
-                <Columns3 className="w-4 h-4" />
-              </button>
+                <HelpCircle className="w-4 h-4" aria-hidden="true" />
+              </Button>
             </TooltipTrigger>
             <TooltipContent>
-              <p>Kanban Board View</p>
+              <p>Take a Board Tour</p>
             </TooltipContent>
           </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <button
-                onClick={() => onBoardViewModeChange('graph')}
-                className={cn(
-                  'p-2 rounded-r-lg transition-colors',
-                  boardViewMode === 'graph'
-                    ? 'bg-brand-500/20 text-brand-500'
-                    : 'text-muted-foreground hover:text-foreground hover:bg-accent'
-                )}
-                data-testid="view-mode-graph"
-              >
-                <Network className="w-4 h-4" />
-              </button>
-            </TooltipTrigger>
-            <TooltipContent>
-              <p>Dependency Graph View</p>
-            </TooltipContent>
-          </Tooltip>
-        </div>
+        )}
 
         {/* Board Background Button */}
         <Tooltip>
@@ -115,70 +84,6 @@ export function BoardControls({
             <p>Completed Features ({completedCount})</p>
           </TooltipContent>
         </Tooltip>
-
-        {/* Kanban Card Detail Level Toggle */}
-        <div
-          className="flex items-center rounded-lg bg-secondary border border-border"
-          data-testid="kanban-detail-toggle"
-        >
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <button
-                onClick={() => onDetailLevelChange('minimal')}
-                className={cn(
-                  'p-2 rounded-l-lg transition-colors',
-                  kanbanCardDetailLevel === 'minimal'
-                    ? 'bg-brand-500/20 text-brand-500'
-                    : 'text-muted-foreground hover:text-foreground hover:bg-accent'
-                )}
-                data-testid="kanban-toggle-minimal"
-              >
-                <Minimize2 className="w-4 h-4" />
-              </button>
-            </TooltipTrigger>
-            <TooltipContent>
-              <p>Minimal - Title & category only</p>
-            </TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <button
-                onClick={() => onDetailLevelChange('standard')}
-                className={cn(
-                  'p-2 transition-colors',
-                  kanbanCardDetailLevel === 'standard'
-                    ? 'bg-brand-500/20 text-brand-500'
-                    : 'text-muted-foreground hover:text-foreground hover:bg-accent'
-                )}
-                data-testid="kanban-toggle-standard"
-              >
-                <Square className="w-4 h-4" />
-              </button>
-            </TooltipTrigger>
-            <TooltipContent>
-              <p>Standard - Steps & progress</p>
-            </TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <button
-                onClick={() => onDetailLevelChange('detailed')}
-                className={cn(
-                  'p-2 rounded-r-lg transition-colors',
-                  kanbanCardDetailLevel === 'detailed'
-                    ? 'bg-brand-500/20 text-brand-500'
-                    : 'text-muted-foreground hover:text-foreground hover:bg-accent'
-                )}
-                data-testid="kanban-toggle-detailed"
-              >
-                <Maximize2 className="w-4 h-4" />
-              </button>
-            </TooltipTrigger>
-            <TooltipContent>
-              <p>Detailed - Model, tools & tasks</p>
-            </TooltipContent>
-          </Tooltip>
-        </div>
       </div>
     </TooltipProvider>
   );

apps/ui/src/components/views/board-view/board-header.tsx

@@ -1,27 +1,38 @@
-import { useState } from 'react';
-import { HotkeyButton } from '@/components/ui/hotkey-button';
+import { useState, useCallback } from 'react';
 import { Button } from '@/components/ui/button';
 import { Slider } from '@/components/ui/slider';
 import { Switch } from '@/components/ui/switch';
 import { Label } from '@/components/ui/label';
-import { Plus, Bot, Wand2, Settings2 } from 'lucide-react';
-import { KeyboardShortcut } from '@/hooks/use-keyboard-shortcuts';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { Bot, Wand2, Settings2, GitBranch } from 'lucide-react';
 import { UsagePopover } from '@/components/usage-popover';
 import { useAppStore } from '@/store/app-store';
 import { useSetupStore } from '@/store/setup-store';
 import { AutoModeSettingsDialog } from './dialogs/auto-mode-settings-dialog';
+import { getHttpApiClient } from '@/lib/http-api-client';
+import { BoardSearchBar } from './board-search-bar';
+import { BoardControls } from './board-controls';
 
 interface BoardHeaderProps {
-  projectName: string;
+  projectPath: string;
   maxConcurrency: number;
   runningAgentsCount: number;
   onConcurrencyChange: (value: number) => void;
   isAutoModeRunning: boolean;
   onAutoModeToggle: (enabled: boolean) => void;
-  onAddFeature: () => void;
   onOpenPlanDialog: () => void;
-  addFeatureShortcut: KeyboardShortcut;
   isMounted: boolean;
+  // Search bar props
+  searchQuery: string;
+  onSearchChange: (query: string) => void;
+  isCreatingSpec: boolean;
+  creatingSpecProjectPath?: string;
+  // Board controls props
+  onShowBoardBackground: () => void;
+  onShowCompletedModal: () => void;
+  completedCount: number;
+  // Tour/onboarding props
+  onStartTour?: () => void;
 }
 
 // Shared styles for header control containers
@@ -29,16 +40,22 @@ const controlContainerClass =
   'flex items-center gap-1.5 px-3 h-8 rounded-md bg-secondary border border-border';
 
 export function BoardHeader({
-  projectName,
+  projectPath,
   maxConcurrency,
   runningAgentsCount,
   onConcurrencyChange,
   isAutoModeRunning,
   onAutoModeToggle,
-  onAddFeature,
   onOpenPlanDialog,
-  addFeatureShortcut,
   isMounted,
+  searchQuery,
+  onSearchChange,
+  isCreatingSpec,
+  creatingSpecProjectPath,
+  onShowBoardBackground,
+  onShowCompletedModal,
+  completedCount,
+  onStartTour,
 }: BoardHeaderProps) {
   const [showAutoModeSettings, setShowAutoModeSettings] = useState(false);
   const apiKeys = useAppStore((state) => state.apiKeys);
@@ -47,6 +64,29 @@ export function BoardHeader({
   const setSkipVerificationInAutoMode = useAppStore((state) => state.setSkipVerificationInAutoMode);
   const codexAuthStatus = useSetupStore((state) => state.codexAuthStatus);
 
+  // Worktree panel visibility (per-project)
+  const worktreePanelVisibleByProject = useAppStore((state) => state.worktreePanelVisibleByProject);
+  const setWorktreePanelVisible = useAppStore((state) => state.setWorktreePanelVisible);
+  const isWorktreePanelVisible = worktreePanelVisibleByProject[projectPath] ?? true;
+
+  const handleWorktreePanelToggle = useCallback(
+    async (visible: boolean) => {
+      // Update local store
+      setWorktreePanelVisible(projectPath, visible);
+
+      // Persist to server
+      try {
+        const httpClient = getHttpApiClient();
+        await httpClient.settings.updateProject(projectPath, {
+          worktreePanelVisible: visible,
+        });
+      } catch (error) {
+        console.error('Failed to persist worktree panel visibility:', error);
+      }
+    },
+    [projectPath, setWorktreePanelVisible]
+  );
+
   // Claude usage tracking visibility logic
   // Hide when using API key (only show for Claude Code CLI users)
   // Also hide on Windows for now (CLI usage command not supported)
@@ -63,37 +103,85 @@ export function BoardHeader({
 
   return (
     <div className="flex items-center justify-between p-4 border-b border-border bg-glass backdrop-blur-md">
-      <div>
-        <h1 className="text-xl font-bold">Kanban Board</h1>
-        <p className="text-sm text-muted-foreground">{projectName}</p>
+      <div className="flex items-center gap-4">
+        <BoardSearchBar
+          searchQuery={searchQuery}
+          onSearchChange={onSearchChange}
+          isCreatingSpec={isCreatingSpec}
+          creatingSpecProjectPath={creatingSpecProjectPath}
+          currentProjectPath={projectPath}
+        />
+        <BoardControls
+          isMounted={isMounted}
+          onShowBoardBackground={onShowBoardBackground}
+          onShowCompletedModal={onShowCompletedModal}
+          completedCount={completedCount}
+          onStartTour={onStartTour}
+        />
       </div>
       <div className="flex gap-2 items-center">
         {/* Usage Popover - show if either provider is authenticated */}
         {isMounted && (showClaudeUsage || showCodexUsage) && <UsagePopover />}
 
-        {/* Concurrency Slider - only show after mount to prevent hydration issues */}
+        {/* Worktrees Toggle - only show after mount to prevent hydration issues */}
         {isMounted && (
-          <div className={controlContainerClass} data-testid="concurrency-slider-container">
-            <Bot className="w-4 h-4 text-muted-foreground" />
-            <span className="text-sm font-medium">Agents</span>
-            <Slider
-              value={[maxConcurrency]}
-              onValueChange={(value) => onConcurrencyChange(value[0])}
-              min={1}
-              max={10}
-              step={1}
-              className="w-20"
-              data-testid="concurrency-slider"
+          <div className={controlContainerClass} data-testid="worktrees-toggle-container">
+            <GitBranch className="w-4 h-4 text-muted-foreground" />
+            <Label htmlFor="worktrees-toggle" className="text-sm font-medium cursor-pointer">
+              Worktrees
+            </Label>
+            <Switch
+              id="worktrees-toggle"
+              checked={isWorktreePanelVisible}
+              onCheckedChange={handleWorktreePanelToggle}
+              data-testid="worktrees-toggle"
             />
-            <span
-              className="text-sm text-muted-foreground min-w-[5ch] text-center"
-              data-testid="concurrency-value"
-            >
-              {runningAgentsCount} / {maxConcurrency}
-            </span>
           </div>
         )}
 
+        {/* Concurrency Control - only show after mount to prevent hydration issues */}
+        {isMounted && (
+          <Popover>
+            <PopoverTrigger asChild>
+              <button
+                className={`${controlContainerClass} cursor-pointer hover:bg-accent/50 transition-colors`}
+                data-testid="concurrency-slider-container"
+              >
+                <Bot className="w-4 h-4 text-muted-foreground" />
+                <span className="text-sm font-medium">Agents</span>
+                <span className="text-sm text-muted-foreground" data-testid="concurrency-value">
+                  {runningAgentsCount}/{maxConcurrency}
+                </span>
+              </button>
+            </PopoverTrigger>
+            <PopoverContent className="w-64" align="end">
+              <div className="space-y-4">
+                <div>
+                  <h4 className="font-medium text-sm mb-1">Max Concurrent Agents</h4>
+                  <p className="text-xs text-muted-foreground">
+                    Controls how many AI agents can run simultaneously. Higher values process more
+                    features in parallel but use more API resources.
+                  </p>
+                </div>
+                <div className="flex items-center gap-3">
+                  <Slider
+                    value={[maxConcurrency]}
+                    onValueChange={(value) => onConcurrencyChange(value[0])}
+                    min={1}
+                    max={10}
+                    step={1}
+                    className="flex-1"
+                    data-testid="concurrency-slider"
+                  />
+                  <span className="text-sm font-medium min-w-[2ch] text-right">
+                    {maxConcurrency}
+                  </span>
+                </div>
+              </div>
+            </PopoverContent>
+          </Popover>
+        )}
+
         {/* Auto Mode Toggle - only show after mount to prevent hydration issues */}
         {isMounted && (
           <div className={controlContainerClass} data-testid="auto-mode-toggle-container">
@@ -134,17 +222,6 @@ export function BoardHeader({
           <Wand2 className="w-4 h-4 mr-2" />
           Plan
         </Button>
-
-        <HotkeyButton
-          size="sm"
-          onClick={onAddFeature}
-          hotkey={addFeatureShortcut}
-          hotkeyActive={false}
-          data-testid="add-feature-button"
-        >
-          <Plus className="w-4 h-4 mr-2" />
-          Add Feature
-        </HotkeyButton>
       </div>
     </div>
   );

apps/ui/src/components/views/board-view/components/board-onboarding-wizard.tsx

@@ -0,0 +1,137 @@
+/**
+ * Board Onboarding Wizard Component
+ *
+ * Board-specific wrapper around the shared OnboardingWizard component.
+ * Adds Quick Start functionality to generate sample tasks.
+ */
+
+import { Sparkles, CheckCircle2, Trash2, Loader2 } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+import { OnboardingWizard, type OnboardingStep } from '@/components/shared/onboarding';
+
+interface BoardOnboardingWizardProps {
+  isVisible: boolean;
+  currentStep: number;
+  currentStepData: OnboardingStep | null;
+  totalSteps: number;
+  onNext: () => void;
+  onPrevious: () => void;
+  onSkip: () => void;
+  onComplete: () => void;
+  onQuickStart: () => void;
+  hasSampleData: boolean;
+  onClearSampleData: () => void;
+  isQuickStartLoading?: boolean;
+  steps: OnboardingStep[];
+}
+
+/**
+ * Quick Start section component - only shown on first step
+ */
+function QuickStartSection({
+  onQuickStart,
+  hasSampleData,
+  onClearSampleData,
+  isQuickStartLoading = false,
+}: {
+  onQuickStart: () => void;
+  hasSampleData: boolean;
+  onClearSampleData: () => void;
+  isQuickStartLoading?: boolean;
+}) {
+  return (
+    <div className="rounded-lg bg-muted/30 border border-border/50 p-4 mb-4">
+      <h4 className="text-sm font-medium text-foreground mb-2 flex items-center gap-2">
+        <Sparkles className="w-4 h-4 text-primary" aria-hidden="true" />
+        Quick Start
+      </h4>
+      <p className="text-xs text-muted-foreground mb-3">
+        Want to see the board in action? We can add some sample tasks to demonstrate the workflow.
+      </p>
+      <div className="flex gap-2">
+        <Button
+          size="sm"
+          variant="secondary"
+          onClick={onQuickStart}
+          disabled={hasSampleData || isQuickStartLoading}
+          className={cn('flex-1 min-h-[40px]', 'focus-visible:ring-2 focus-visible:ring-primary')}
+          aria-busy={isQuickStartLoading}
+        >
+          {isQuickStartLoading ? (
+            <>
+              <Loader2 className="w-3.5 h-3.5 mr-1.5 animate-spin" aria-hidden="true" />
+              <span>Adding tasks...</span>
+            </>
+          ) : hasSampleData ? (
+            <>
+              <CheckCircle2 className="w-3.5 h-3.5 mr-1.5 text-green-500" aria-hidden="true" />
+              <span>Sample Data Added</span>
+            </>
+          ) : (
+            <>
+              <Sparkles className="w-3.5 h-3.5 mr-1.5" aria-hidden="true" />
+              <span>Add Sample Tasks</span>
+            </>
+          )}
+        </Button>
+        {hasSampleData && (
+          <Button
+            size="sm"
+            variant="ghost"
+            onClick={onClearSampleData}
+            className={cn(
+              'min-w-[44px] min-h-[40px] px-3',
+              'focus-visible:ring-2 focus-visible:ring-destructive'
+            )}
+            aria-label="Remove sample tasks"
+          >
+            <Trash2 className="w-4 h-4" aria-hidden="true" />
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function BoardOnboardingWizard({
+  isVisible,
+  currentStep,
+  currentStepData,
+  totalSteps,
+  onNext,
+  onPrevious,
+  onSkip,
+  onComplete,
+  onQuickStart,
+  hasSampleData,
+  onClearSampleData,
+  isQuickStartLoading = false,
+  steps,
+}: BoardOnboardingWizardProps) {
+  const isFirstStep = currentStep === 0;
+
+  return (
+    <OnboardingWizard
+      isVisible={isVisible}
+      currentStep={currentStep}
+      currentStepData={currentStepData}
+      totalSteps={totalSteps}
+      onNext={onNext}
+      onPrevious={onPrevious}
+      onSkip={onSkip}
+      onComplete={onComplete}
+      steps={steps}
+    >
+      {/* Board-specific Quick Start section - only on first step */}
+      {isFirstStep && (
+        <QuickStartSection
+          onQuickStart={onQuickStart}
+          hasSampleData={hasSampleData}
+          onClearSampleData={onClearSampleData}
+          isQuickStartLoading={isQuickStartLoading}
+        />
+      )}
+    </OnboardingWizard>
+  );
+}

apps/ui/src/components/views/board-view/components/index.ts

@@ -1,3 +1,4 @@
 export { KanbanCard } from './kanban-card/kanban-card';
 export { KanbanColumn } from './kanban-column';
 export { SelectionActionBar } from './selection-action-bar';
+export { BoardOnboardingWizard } from './board-onboarding-wizard';

apps/ui/src/components/views/board-view/components/kanban-card/agent-info-panel.tsx

@@ -1,6 +1,6 @@
 // @ts-nocheck
 import { useEffect, useState } from 'react';
-import { Feature, ThinkingLevel, useAppStore } from '@/store/app-store';
+import { Feature, ThinkingLevel } from '@/store/app-store';
 import type { ReasoningEffort } from '@automaker/types';
 import { getProviderFromModel } from '@/lib/utils';
 import {
@@ -68,11 +68,9 @@ export function AgentInfoPanel({
   summary,
   isCurrentAutoTask,
 }: AgentInfoPanelProps) {
-  const { kanbanCardDetailLevel } = useAppStore();
   const [agentInfo, setAgentInfo] = useState<AgentTaskInfo | null>(null);
   const [isSummaryDialogOpen, setIsSummaryDialogOpen] = useState(false);
-
-  const showAgentInfo = kanbanCardDetailLevel === 'detailed';
+  const [isTodosExpanded, setIsTodosExpanded] = useState(false);
 
   useEffect(() => {
     const loadContext = async () => {
@@ -123,7 +121,7 @@ export function AgentInfoPanel({
     }
   }, [feature.id, feature.status, contextContent, isCurrentAutoTask]);
   // Model/Preset Info for Backlog Cards
-  if (showAgentInfo && feature.status === 'backlog') {
+  if (feature.status === 'backlog') {
     const provider = getProviderFromModel(feature.model);
     const isCodex = provider === 'codex';
     const isClaude = provider === 'claude';
@@ -160,7 +158,7 @@ export function AgentInfoPanel({
   }
 
   // Agent Info Panel for non-backlog cards
-  if (showAgentInfo && feature.status !== 'backlog' && agentInfo) {
+  if (feature.status !== 'backlog' && agentInfo) {
     return (
       <>
         <div className="mb-3 space-y-2 overflow-hidden">
@@ -200,32 +198,47 @@ export function AgentInfoPanel({
                   {agentInfo.todos.length} tasks
                 </span>
               </div>
-              <div className="space-y-0.5 max-h-16 overflow-y-auto">
-                {agentInfo.todos.slice(0, 3).map((todo, idx) => (
-                  <div key={idx} className="flex items-center gap-1.5 text-[10px]">
-                    {todo.status === 'completed' ? (
-                      <CheckCircle2 className="w-2.5 h-2.5 text-[var(--status-success)] shrink-0" />
-                    ) : todo.status === 'in_progress' ? (
-                      <Loader2 className="w-2.5 h-2.5 text-[var(--status-warning)] animate-spin shrink-0" />
-                    ) : (
-                      <Circle className="w-2.5 h-2.5 text-muted-foreground/50 shrink-0" />
-                    )}
-                    <span
-                      className={cn(
-                        'break-words hyphens-auto line-clamp-2 leading-relaxed',
-                        todo.status === 'completed' && 'text-muted-foreground/60 line-through',
-                        todo.status === 'in_progress' && 'text-[var(--status-warning)]',
-                        todo.status === 'pending' && 'text-muted-foreground/80'
+              <div
+                className={cn(
+                  'space-y-0.5 overflow-y-auto',
+                  isTodosExpanded ? 'max-h-40' : 'max-h-16'
+                )}
+              >
+                {(isTodosExpanded ? agentInfo.todos : agentInfo.todos.slice(0, 3)).map(
+                  (todo, idx) => (
+                    <div key={idx} className="flex items-center gap-1.5 text-[10px]">
+                      {todo.status === 'completed' ? (
+                        <CheckCircle2 className="w-2.5 h-2.5 text-[var(--status-success)] shrink-0" />
+                      ) : todo.status === 'in_progress' ? (
+                        <Loader2 className="w-2.5 h-2.5 text-[var(--status-warning)] animate-spin shrink-0" />
+                      ) : (
+                        <Circle className="w-2.5 h-2.5 text-muted-foreground/50 shrink-0" />
                       )}
-                    >
-                      {todo.content}
-                    </span>
-                  </div>
-                ))}
+                      <span
+                        className={cn(
+                          'break-words hyphens-auto line-clamp-2 leading-relaxed',
+                          todo.status === 'completed' && 'text-muted-foreground/60 line-through',
+                          todo.status === 'in_progress' && 'text-[var(--status-warning)]',
+                          todo.status === 'pending' && 'text-muted-foreground/80'
+                        )}
+                      >
+                        {todo.content}
+                      </span>
+                    </div>
+                  )
+                )}
                 {agentInfo.todos.length > 3 && (
-                  <p className="text-[10px] text-muted-foreground/60 pl-4">
-                    +{agentInfo.todos.length - 3} more
-                  </p>
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setIsTodosExpanded(!isTodosExpanded);
+                    }}
+                    onPointerDown={(e) => e.stopPropagation()}
+                    onMouseDown={(e) => e.stopPropagation()}
+                    className="text-[10px] text-muted-foreground/60 pl-4 hover:text-muted-foreground transition-colors cursor-pointer"
+                  >
+                    {isTodosExpanded ? 'Show less' : `+${agentInfo.todos.length - 3} more`}
+                  </button>
                 )}
               </div>
             </div>
@@ -255,7 +268,11 @@ export function AgentInfoPanel({
                       <Expand className="w-3 h-3" />
                     </button>
                   </div>
-                  <p className="text-[10px] text-muted-foreground/70 line-clamp-3 break-words hyphens-auto leading-relaxed overflow-hidden">
+                  <p
+                    className="text-[10px] text-muted-foreground/70 line-clamp-3 break-words hyphens-auto leading-relaxed overflow-hidden select-text cursor-text"
+                    onPointerDown={(e) => e.stopPropagation()}
+                    onMouseDown={(e) => e.stopPropagation()}
+                  >
                     {feature.summary || summary || agentInfo.summary}
                   </p>
                 </div>
@@ -292,58 +309,15 @@ export function AgentInfoPanel({
     );
   }
 
-  // Show just the todo list for non-backlog features when showAgentInfo is false
-  // This ensures users always see what the agent is working on
-  if (!showAgentInfo && feature.status !== 'backlog' && agentInfo && agentInfo.todos.length > 0) {
-    return (
-      <div className="mb-3 space-y-1 overflow-hidden">
-        <div className="flex items-center gap-1 text-[10px] text-muted-foreground/70">
-          <ListTodo className="w-3 h-3" />
-          <span>
-            {agentInfo.todos.filter((t) => t.status === 'completed').length}/
-            {agentInfo.todos.length} tasks
-          </span>
-        </div>
-        <div className="space-y-0.5 max-h-24 overflow-y-auto">
-          {agentInfo.todos.map((todo, idx) => (
-            <div key={idx} className="flex items-center gap-1.5 text-[10px]">
-              {todo.status === 'completed' ? (
-                <CheckCircle2 className="w-2.5 h-2.5 text-[var(--status-success)] shrink-0" />
-              ) : todo.status === 'in_progress' ? (
-                <Loader2 className="w-2.5 h-2.5 text-[var(--status-warning)] animate-spin shrink-0" />
-              ) : (
-                <Circle className="w-2.5 h-2.5 text-muted-foreground/50 shrink-0" />
-              )}
-              <span
-                className={cn(
-                  'break-words hyphens-auto line-clamp-2 leading-relaxed',
-                  todo.status === 'completed' && 'text-muted-foreground/60 line-through',
-                  todo.status === 'in_progress' && 'text-[var(--status-warning)]',
-                  todo.status === 'pending' && 'text-muted-foreground/80'
-                )}
-              >
-                {todo.content}
-              </span>
-            </div>
-          ))}
-        </div>
-      </div>
-    );
-  }
-
-  // Always render SummaryDialog if showAgentInfo is true (even if no agentInfo yet)
+  // Always render SummaryDialog (even if no agentInfo yet)
   // This ensures the dialog can be opened from the expand button
   return (
-    <>
-      {showAgentInfo && (
-        <SummaryDialog
-          feature={feature}
-          agentInfo={agentInfo}
-          summary={summary}
-          isOpen={isSummaryDialogOpen}
-          onOpenChange={setIsSummaryDialogOpen}
-        />
-      )}
-    </>
+    <SummaryDialog
+      feature={feature}
+      agentInfo={agentInfo}
+      summary={summary}
+      isOpen={isSummaryDialogOpen}
+      onOpenChange={setIsSummaryDialogOpen}
+    />
   );
 }

apps/ui/src/components/views/board-view/components/kanban-card/summary-dialog.tsx

@@ -31,8 +31,11 @@ export function SummaryDialog({
   return (
     <Dialog open={isOpen} onOpenChange={onOpenChange}>
       <DialogContent
-        className="max-w-4xl max-h-[80vh] overflow-hidden flex flex-col"
+        className="max-w-4xl max-h-[80vh] overflow-hidden flex flex-col select-text"
         data-testid={`summary-dialog-${feature.id}`}
+        onPointerDown={(e) => e.stopPropagation()}
+        onMouseDown={(e) => e.stopPropagation()}
+        onDoubleClick={(e) => e.stopPropagation()}
       >
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">

apps/ui/src/components/views/board-view/components/kanban-column.tsx

@@ -10,6 +10,8 @@ interface KanbanColumnProps {
   count: number;
   children: ReactNode;
   headerAction?: ReactNode;
+  /** Floating action button at the bottom of the column */
+  footerAction?: ReactNode;
   opacity?: number;
   showBorder?: boolean;
   hideScrollbar?: boolean;
@@ -24,6 +26,7 @@ export const KanbanColumn = memo(function KanbanColumn({
   count,
   children,
   headerAction,
+  footerAction,
   opacity = 100,
   showBorder = true,
   hideScrollbar = false,
@@ -47,6 +50,7 @@ export const KanbanColumn = memo(function KanbanColumn({
       )}
       style={widthStyle}
       data-testid={`kanban-column-${id}`}
+      data-onboarding-target={id}
     >
       {/* Background layer with opacity */}
       <div
@@ -79,12 +83,21 @@ export const KanbanColumn = memo(function KanbanColumn({
           hideScrollbar &&
             '[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]',
           // Smooth scrolling
-          'scroll-smooth'
+          'scroll-smooth',
+          // Add padding at bottom if there's a footer action
+          footerAction && 'pb-14'
         )}
       >
         {children}
       </div>
 
+      {/* Floating Footer Action */}
+      {footerAction && (
+        <div className="absolute bottom-0 left-0 right-0 z-20 p-2 bg-gradient-to-t from-card/95 via-card/80 to-transparent pt-6">
+          {footerAction}
+        </div>
+      )}
+
       {/* Drop zone indicator when dragging over */}
       {isOver && (
         <div className="absolute inset-0 rounded-xl bg-primary/5 pointer-events-none z-5 border-2 border-dashed border-primary/20" />

apps/ui/src/components/views/board-view/components/selection-action-bar.tsx

@@ -1,11 +1,21 @@
+import { useState } from 'react';
 import { Button } from '@/components/ui/button';
-import { Pencil, X, CheckSquare } from 'lucide-react';
+import { Pencil, X, CheckSquare, Trash2 } from 'lucide-react';
 import { cn } from '@/lib/utils';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
 
 interface SelectionActionBarProps {
   selectedCount: number;
   totalCount: number;
   onEdit: () => void;
+  onDelete: () => void;
   onClear: () => void;
   onSelectAll: () => void;
 }
@@ -14,65 +24,126 @@ export function SelectionActionBar({
   selectedCount,
   totalCount,
   onEdit,
+  onDelete,
   onClear,
   onSelectAll,
 }: SelectionActionBarProps) {
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+
   if (selectedCount === 0) return null;
 
   const allSelected = selectedCount === totalCount;
 
+  const handleDeleteClick = () => {
+    setShowDeleteDialog(true);
+  };
+
+  const handleConfirmDelete = () => {
+    setShowDeleteDialog(false);
+    onDelete();
+  };
+
   return (
-    <div
-      className={cn(
-        'fixed bottom-6 left-1/2 -translate-x-1/2 z-50',
-        'flex items-center gap-3 px-4 py-3 rounded-xl',
-        'bg-background/95 backdrop-blur-sm border border-border shadow-lg',
-        'animate-in slide-in-from-bottom-4 fade-in duration-200'
-      )}
-      data-testid="selection-action-bar"
-    >
-      <span className="text-sm font-medium text-foreground">
-        {selectedCount} feature{selectedCount !== 1 ? 's' : ''} selected
-      </span>
+    <>
+      <div
+        className={cn(
+          'fixed bottom-6 left-1/2 -translate-x-1/2 z-50',
+          'flex items-center gap-3 px-4 py-3 rounded-xl',
+          'bg-background/95 backdrop-blur-sm border border-border shadow-lg',
+          'animate-in slide-in-from-bottom-4 fade-in duration-200'
+        )}
+        data-testid="selection-action-bar"
+      >
+        <span className="text-sm font-medium text-foreground">
+          {selectedCount} feature{selectedCount !== 1 ? 's' : ''} selected
+        </span>
 
-      <div className="h-4 w-px bg-border" />
+        <div className="h-4 w-px bg-border" />
 
-      <div className="flex items-center gap-2">
-        <Button
-          variant="default"
-          size="sm"
-          onClick={onEdit}
-          className="h-8 bg-brand-500 hover:bg-brand-600"
-          data-testid="selection-edit-button"
-        >
-          <Pencil className="w-4 h-4 mr-1.5" />
-          Edit Selected
-        </Button>
+        <div className="flex items-center gap-2">
+          <Button
+            variant="default"
+            size="sm"
+            onClick={onEdit}
+            className="h-8 bg-brand-500 hover:bg-brand-600"
+            data-testid="selection-edit-button"
+          >
+            <Pencil className="w-4 h-4 mr-1.5" />
+            Edit Selected
+          </Button>
 
-        {!allSelected && (
           <Button
             variant="outline"
             size="sm"
-            onClick={onSelectAll}
-            className="h-8"
-            data-testid="selection-select-all-button"
+            onClick={handleDeleteClick}
+            className="h-8 text-destructive hover:text-destructive hover:bg-destructive/10"
+            data-testid="selection-delete-button"
           >
-            <CheckSquare className="w-4 h-4 mr-1.5" />
-            Select All ({totalCount})
+            <Trash2 className="w-4 h-4 mr-1.5" />
+            Delete
           </Button>
-        )}
 
-        <Button
-          variant="ghost"
-          size="sm"
-          onClick={onClear}
-          className="h-8 text-muted-foreground hover:text-foreground"
-          data-testid="selection-clear-button"
-        >
-          <X className="w-4 h-4 mr-1.5" />
-          Clear
-        </Button>
+          {!allSelected && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={onSelectAll}
+              className="h-8"
+              data-testid="selection-select-all-button"
+            >
+              <CheckSquare className="w-4 h-4 mr-1.5" />
+              Select All ({totalCount})
+            </Button>
+          )}
+
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={onClear}
+            className="h-8 text-muted-foreground hover:text-foreground"
+            data-testid="selection-clear-button"
+          >
+            <X className="w-4 h-4 mr-1.5" />
+            Clear
+          </Button>
+        </div>
       </div>
-    </div>
+
+      {/* Delete Confirmation Dialog */}
+      <Dialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
+        <DialogContent data-testid="bulk-delete-confirmation-dialog">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2 text-destructive">
+              <Trash2 className="w-5 h-5" />
+              Delete Selected Features?
+            </DialogTitle>
+            <DialogDescription>
+              Are you sure you want to permanently delete {selectedCount} feature
+              {selectedCount !== 1 ? 's' : ''}?
+              <span className="block mt-2 text-destructive font-medium">
+                This action cannot be undone.
+              </span>
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button
+              variant="ghost"
+              onClick={() => setShowDeleteDialog(false)}
+              data-testid="cancel-bulk-delete-button"
+            >
+              Cancel
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={handleConfirmDelete}
+              data-testid="confirm-bulk-delete-button"
+            >
+              <Trash2 className="w-4 h-4 mr-2" />
+              Delete
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
   );
 }

apps/ui/src/components/views/board-view/constants.ts

@@ -89,3 +89,117 @@ export function getStepIdFromStatus(status: string): string | null {
   }
   return status.replace('pipeline_', '');
 }
+
+// ============================================================================
+// SAMPLE DATA FOR ONBOARDING WIZARD
+// ============================================================================
+
+/**
+ * Prefix used to identify sample/demo features in the board
+ * This marker persists through the database and is used for cleanup
+ */
+export const SAMPLE_FEATURE_PREFIX = '[DEMO]';
+
+/**
+ * Sample feature template for Quick Start onboarding
+ * These demonstrate a typical workflow progression across columns
+ */
+export interface SampleFeatureTemplate {
+  title: string;
+  description: string;
+  category: string;
+  status: Feature['status'];
+  priority: number;
+  isSampleData: true; // Marker to identify sample data
+}
+
+/**
+ * Sample features that demonstrate the workflow across all columns.
+ * Each feature shows a realistic task at different stages.
+ */
+export const SAMPLE_FEATURES: SampleFeatureTemplate[] = [
+  // Backlog items - awaiting work
+  {
+    title: '[DEMO] Add user profile page',
+    description:
+      'Create a user profile page where users can view and edit their account settings, change password, and manage preferences.\n\n---\n**This is sample data** - Click the trash icon in the wizard to remove all demo items.',
+    category: 'Feature',
+    status: 'backlog',
+    priority: 1,
+    isSampleData: true,
+  },
+  {
+    title: '[DEMO] Implement dark mode toggle',
+    description:
+      'Add a toggle in the settings to switch between light and dark themes. Should persist the preference across sessions.\n\n---\n**This is sample data** - Click the trash icon in the wizard to remove all demo items.',
+    category: 'Enhancement',
+    status: 'backlog',
+    priority: 2,
+    isSampleData: true,
+  },
+
+  // In Progress - currently being worked on
+  {
+    title: '[DEMO] Fix login timeout issue',
+    description:
+      'Users are being logged out after 5 minutes of inactivity. Investigate and increase the session timeout to 30 minutes.\n\n---\n**This is sample data** - Click the trash icon in the wizard to remove all demo items.',
+    category: 'Bug Fix',
+    status: 'in_progress',
+    priority: 1,
+    isSampleData: true,
+  },
+
+  // Waiting Approval - completed and awaiting review
+  {
+    title: '[DEMO] Update API documentation',
+    description:
+      'Update the API documentation to reflect recent endpoint changes and add examples for new authentication flow.\n\n---\n**This is sample data** - Click the trash icon in the wizard to remove all demo items.',
+    category: 'Documentation',
+    status: 'waiting_approval',
+    priority: 2,
+    isSampleData: true,
+  },
+
+  // Verified - approved and ready
+  {
+    title: '[DEMO] Add loading spinners',
+    description:
+      'Added loading spinner components to all async operations to improve user feedback during data fetching.\n\n---\n**This is sample data** - Click the trash icon in the wizard to remove all demo items.',
+    category: 'Enhancement',
+    status: 'verified',
+    priority: 3,
+    isSampleData: true,
+  },
+];
+
+/**
+ * Check if a feature is sample data
+ * Uses the SAMPLE_FEATURE_PREFIX in the title as the marker for sample data
+ */
+export function isSampleFeature(feature: Partial<Feature>): boolean {
+  // Check title prefix - this is the reliable marker that persists through the database
+  return feature.title?.startsWith(SAMPLE_FEATURE_PREFIX) ?? false;
+}
+
+/**
+ * Generate sample feature data with unique IDs
+ * @returns Array of sample features ready to be created
+ */
+export function generateSampleFeatures(): Array<Omit<Feature, 'id' | 'createdAt' | 'updatedAt'>> {
+  return SAMPLE_FEATURES.map((template) => ({
+    title: template.title,
+    description: template.description,
+    category: template.category,
+    status: template.status,
+    priority: template.priority,
+    images: [],
+    imagePaths: [],
+    skipTests: true,
+    model: 'sonnet' as const,
+    thinkingLevel: 'none' as const,
+    planningMode: 'skip' as const,
+    requirePlanApproval: false,
+    // Mark as sample data in a way that persists
+    // We use the title prefix [DEMO] as the marker
+  }));
+}

apps/ui/src/components/views/board-view/dialogs/add-edit-pipeline-step-dialog.tsx

@@ -0,0 +1,254 @@
+import { useState, useRef, useEffect } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Upload } from 'lucide-react';
+import { toast } from 'sonner';
+import type { PipelineStep } from '@automaker/types';
+import { cn } from '@/lib/utils';
+import { STEP_TEMPLATES } from './pipeline-step-templates';
+
+// Color options for pipeline columns
+const COLOR_OPTIONS = [
+  { value: 'bg-blue-500/20', label: 'Blue', preview: 'bg-blue-500' },
+  { value: 'bg-purple-500/20', label: 'Purple', preview: 'bg-purple-500' },
+  { value: 'bg-green-500/20', label: 'Green', preview: 'bg-green-500' },
+  { value: 'bg-orange-500/20', label: 'Orange', preview: 'bg-orange-500' },
+  { value: 'bg-red-500/20', label: 'Red', preview: 'bg-red-500' },
+  { value: 'bg-pink-500/20', label: 'Pink', preview: 'bg-pink-500' },
+  { value: 'bg-cyan-500/20', label: 'Cyan', preview: 'bg-cyan-500' },
+  { value: 'bg-amber-500/20', label: 'Amber', preview: 'bg-amber-500' },
+  { value: 'bg-indigo-500/20', label: 'Indigo', preview: 'bg-indigo-500' },
+];
+
+interface AddEditPipelineStepDialogProps {
+  open: boolean;
+  onClose: () => void;
+  onSave: (step: Omit<PipelineStep, 'id' | 'createdAt' | 'updatedAt'> & { id?: string }) => void;
+  existingStep?: PipelineStep | null;
+  defaultOrder: number;
+}
+
+export function AddEditPipelineStepDialog({
+  open,
+  onClose,
+  onSave,
+  existingStep,
+  defaultOrder,
+}: AddEditPipelineStepDialogProps) {
+  const isEditing = !!existingStep;
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const [name, setName] = useState('');
+  const [instructions, setInstructions] = useState('');
+  const [colorClass, setColorClass] = useState(COLOR_OPTIONS[0].value);
+  const [selectedTemplate, setSelectedTemplate] = useState<string | null>(null);
+
+  // Reset form when dialog opens/closes or existingStep changes
+  useEffect(() => {
+    if (open) {
+      if (existingStep) {
+        setName(existingStep.name);
+        setInstructions(existingStep.instructions);
+        setColorClass(existingStep.colorClass);
+        setSelectedTemplate(null);
+      } else {
+        setName('');
+        setInstructions('');
+        setColorClass(COLOR_OPTIONS[defaultOrder % COLOR_OPTIONS.length].value);
+        setSelectedTemplate(null);
+      }
+    }
+  }, [open, existingStep, defaultOrder]);
+
+  const handleTemplateClick = (templateId: string) => {
+    const template = STEP_TEMPLATES.find((t) => t.id === templateId);
+    if (template) {
+      setName(template.name);
+      setInstructions(template.instructions);
+      setColorClass(template.colorClass);
+      setSelectedTemplate(templateId);
+      toast.success(`Loaded "${template.name}" template`);
+    }
+  };
+
+  const handleFileUpload = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleFileInputChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    try {
+      const content = await file.text();
+      setInstructions(content);
+      toast.success('Instructions loaded from file');
+    } catch {
+      toast.error('Failed to load file');
+    }
+
+    // Reset the input so the same file can be selected again
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  };
+
+  const handleSave = () => {
+    if (!name.trim()) {
+      toast.error('Step name is required');
+      return;
+    }
+
+    if (!instructions.trim()) {
+      toast.error('Step instructions are required');
+      return;
+    }
+
+    onSave({
+      id: existingStep?.id,
+      name: name.trim(),
+      instructions: instructions.trim(),
+      colorClass,
+      order: existingStep?.order ?? defaultOrder,
+    });
+
+    onClose();
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
+      <DialogContent className="max-w-2xl max-h-[85vh] overflow-hidden flex flex-col">
+        {/* Hidden file input for loading instructions from .md files */}
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept=".md,.txt"
+          className="hidden"
+          onChange={handleFileInputChange}
+        />
+
+        <DialogHeader>
+          <DialogTitle>{isEditing ? 'Edit Pipeline Step' : 'Add Pipeline Step'}</DialogTitle>
+          <DialogDescription>
+            {isEditing
+              ? 'Modify the step configuration below.'
+              : 'Configure a new step for your pipeline. Choose a template to get started quickly, or create from scratch.'}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex-1 overflow-y-auto py-4 space-y-6">
+          {/* Template Quick Start - Only show for new steps */}
+          {!isEditing && (
+            <div className="space-y-3">
+              <Label className="text-sm font-medium">Quick Start from Template</Label>
+              <div className="flex flex-wrap gap-2">
+                {STEP_TEMPLATES.map((template) => (
+                  <button
+                    key={template.id}
+                    type="button"
+                    onClick={() => handleTemplateClick(template.id)}
+                    className={cn(
+                      'flex items-center gap-2 px-3 py-2 rounded-lg border transition-all text-sm',
+                      selectedTemplate === template.id
+                        ? 'border-primary bg-primary/10 ring-1 ring-primary'
+                        : 'border-border hover:border-primary/50 hover:bg-muted/50'
+                    )}
+                  >
+                    <div
+                      className={cn('w-2 h-2 rounded-full', template.colorClass.replace('/20', ''))}
+                    />
+                    {template.name}
+                  </button>
+                ))}
+              </div>
+              <p className="text-xs text-muted-foreground">
+                Click a template to pre-fill the form, then customize as needed.
+              </p>
+            </div>
+          )}
+
+          {/* Divider */}
+          {!isEditing && <div className="border-t" />}
+
+          {/* Step Name */}
+          <div className="space-y-2">
+            <Label htmlFor="step-name">
+              Step Name <span className="text-destructive">*</span>
+            </Label>
+            <Input
+              id="step-name"
+              placeholder="e.g., Code Review, Testing, Documentation"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              autoFocus={isEditing}
+            />
+          </div>
+
+          {/* Color Selection */}
+          <div className="space-y-2">
+            <Label>Column Color</Label>
+            <div className="flex flex-wrap gap-2">
+              {COLOR_OPTIONS.map((color) => (
+                <button
+                  key={color.value}
+                  type="button"
+                  className={cn(
+                    'w-8 h-8 rounded-full transition-all',
+                    color.preview,
+                    colorClass === color.value
+                      ? 'ring-2 ring-offset-2 ring-primary'
+                      : 'opacity-60 hover:opacity-100'
+                  )}
+                  onClick={() => setColorClass(color.value)}
+                  title={color.label}
+                />
+              ))}
+            </div>
+          </div>
+
+          {/* Agent Instructions */}
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <Label htmlFor="step-instructions">
+                Agent Instructions <span className="text-destructive">*</span>
+              </Label>
+              <Button variant="ghost" size="sm" className="h-7 text-xs" onClick={handleFileUpload}>
+                <Upload className="h-3 w-3 mr-1" />
+                Load from file
+              </Button>
+            </div>
+            <Textarea
+              id="step-instructions"
+              placeholder="Instructions for the agent to follow during this pipeline step. Use markdown formatting for best results."
+              value={instructions}
+              onChange={(e) => setInstructions(e.target.value)}
+              rows={10}
+              className="font-mono text-sm"
+            />
+            <p className="text-xs text-muted-foreground">
+              These instructions will be sent to the agent when this step runs. Be specific about
+              what you want the agent to review, check, or modify.
+            </p>
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button onClick={handleSave}>{isEditing ? 'Update Step' : 'Add to Pipeline'}</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/ui/src/components/views/board-view/dialogs/add-feature-dialog.tsx

@@ -32,24 +32,17 @@ import {
   ModelAlias,
   ThinkingLevel,
   FeatureImage,
-  AIProfile,
   PlanningMode,
   Feature,
 } from '@/store/app-store';
 import type { ReasoningEffort, PhaseModelEntry } from '@automaker/types';
-import {
-  supportsReasoningEffort,
-  PROVIDER_PREFIXES,
-  isCursorModel,
-  isClaudeModel,
-} from '@automaker/types';
+import { supportsReasoningEffort, isClaudeModel } from '@automaker/types';
 import {
   TestingTabContent,
   PrioritySelector,
   WorkModeSelector,
   PlanningModeSelect,
   AncestorContextSection,
-  ProfileTypeahead,
 } from '../shared';
 import type { WorkMode } from '../shared';
 import { PhaseModelSelector } from '@/components/views/settings-view/model-defaults/phase-model-selector';
@@ -60,7 +53,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import { useNavigate } from '@tanstack/react-router';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import {
   getAncestors,
   formatAncestorContextForPrompt,
@@ -100,8 +93,6 @@ interface AddFeatureDialogProps {
   defaultBranch?: string;
   currentBranch?: string;
   isMaximized: boolean;
-  showProfilesOnly: boolean;
-  aiProfiles: AIProfile[];
   parentFeature?: Feature | null;
   allFeatures?: Feature[];
 }
@@ -118,13 +109,10 @@ export function AddFeatureDialog({
   defaultBranch = 'main',
   currentBranch,
   isMaximized,
-  showProfilesOnly,
-  aiProfiles,
   parentFeature = null,
   allFeatures = [],
 }: AddFeatureDialogProps) {
   const isSpawnMode = !!parentFeature;
-  const navigate = useNavigate();
   const [workMode, setWorkMode] = useState<WorkMode>('current');
 
   // Form state
@@ -139,7 +127,6 @@ export function AddFeatureDialog({
   const [priority, setPriority] = useState(2);
 
   // Model selection state
-  const [selectedProfileId, setSelectedProfileId] = useState<string | undefined>();
   const [modelEntry, setModelEntry] = useState<PhaseModelEntry>({ model: 'opus' });
 
   // Check if current model supports planning mode (Claude/Anthropic only)
@@ -154,7 +141,7 @@ export function AddFeatureDialog({
   const [descriptionError, setDescriptionError] = useState(false);
   const [isEnhancing, setIsEnhancing] = useState(false);
   const [enhancementMode, setEnhancementMode] = useState<
-    'improve' | 'technical' | 'simplify' | 'acceptance'
+    'improve' | 'technical' | 'simplify' | 'acceptance' | 'ux-reviewer'
   >('improve');
   const [enhanceOpen, setEnhanceOpen] = useState(false);
 
@@ -163,7 +150,7 @@ export function AddFeatureDialog({
   const [selectedAncestorIds, setSelectedAncestorIds] = useState<Set<string>>(new Set());
 
   // Get defaults from store
-  const { defaultPlanningMode, defaultRequirePlanApproval, defaultAIProfileId } = useAppStore();
+  const { defaultPlanningMode, defaultRequirePlanApproval } = useAppStore();
 
   // Enhancement model override
   const enhancementOverride = useModelOverride({ phase: 'enhancementModel' });
@@ -177,24 +164,12 @@ export function AddFeatureDialog({
     wasOpenRef.current = open;
 
     if (justOpened) {
-      const defaultProfile = defaultAIProfileId
-        ? aiProfiles.find((p) => p.id === defaultAIProfileId)
-        : null;
-
       setSkipTests(defaultSkipTests);
       setBranchName(defaultBranch || '');
       setWorkMode('current');
       setPlanningMode(defaultPlanningMode);
       setRequirePlanApproval(defaultRequirePlanApproval);
-
-      // Set model from default profile or fallback
-      if (defaultProfile) {
-        setSelectedProfileId(defaultProfile.id);
-        applyProfileToModel(defaultProfile);
-      } else {
-        setSelectedProfileId(undefined);
-        setModelEntry({ model: 'opus' });
-      }
+      setModelEntry({ model: 'opus' });
 
       // Initialize ancestors for spawn mode
       if (parentFeature) {
@@ -212,41 +187,12 @@ export function AddFeatureDialog({
     defaultBranch,
     defaultPlanningMode,
     defaultRequirePlanApproval,
-    defaultAIProfileId,
-    aiProfiles,
     parentFeature,
     allFeatures,
   ]);
 
-  const applyProfileToModel = (profile: AIProfile) => {
-    if (profile.provider === 'cursor') {
-      const cursorModel = `${PROVIDER_PREFIXES.cursor}${profile.cursorModel || 'auto'}`;
-      setModelEntry({ model: cursorModel as ModelAlias });
-    } else if (profile.provider === 'codex') {
-      setModelEntry({
-        model: profile.codexModel || 'codex-gpt-5.2-codex',
-        reasoningEffort: 'none',
-      });
-    } else if (profile.provider === 'opencode') {
-      setModelEntry({ model: profile.opencodeModel || 'opencode/big-pickle' });
-    } else {
-      // Claude
-      setModelEntry({
-        model: profile.model || 'sonnet',
-        thinkingLevel: profile.thinkingLevel || 'none',
-      });
-    }
-  };
-
-  const handleProfileSelect = (profile: AIProfile) => {
-    setSelectedProfileId(profile.id);
-    applyProfileToModel(profile);
-  };
-
   const handleModelChange = (entry: PhaseModelEntry) => {
     setModelEntry(entry);
-    // Clear profile selection when manually changing model
-    setSelectedProfileId(undefined);
   };
 
   const buildFeatureData = (): FeatureData | null => {
@@ -327,7 +273,6 @@ export function AddFeatureDialog({
     setSkipTests(defaultSkipTests);
     setBranchName('');
     setPriority(2);
-    setSelectedProfileId(undefined);
     setModelEntry({ model: 'opus' });
     setWorkMode('current');
     setPlanningMode(defaultPlanningMode);
@@ -486,6 +431,7 @@ export function AddFeatureDialog({
                         {enhancementMode === 'technical' && 'Add Technical Details'}
                         {enhancementMode === 'simplify' && 'Simplify'}
                         {enhancementMode === 'acceptance' && 'Add Acceptance Criteria'}
+                        {enhancementMode === 'ux-reviewer' && 'User Experience'}
                         <ChevronDown className="w-3 h-3 ml-1" />
                       </Button>
                     </DropdownMenuTrigger>
@@ -502,6 +448,9 @@ export function AddFeatureDialog({
                       <DropdownMenuItem onClick={() => setEnhancementMode('acceptance')}>
                         Add Acceptance Criteria
                       </DropdownMenuItem>
+                      <DropdownMenuItem onClick={() => setEnhancementMode('ux-reviewer')}>
+                        User Experience
+                      </DropdownMenuItem>
                     </DropdownMenuContent>
                   </DropdownMenu>
 
@@ -538,50 +487,54 @@ export function AddFeatureDialog({
               <span>AI & Execution</span>
             </div>
 
-            <div className="grid grid-cols-2 gap-3">
-              <div className="space-y-1.5">
-                <Label className="text-xs text-muted-foreground">Profile</Label>
-                <ProfileTypeahead
-                  profiles={aiProfiles}
-                  selectedProfileId={selectedProfileId}
-                  onSelect={handleProfileSelect}
-                  placeholder="Select profile..."
-                  showManageLink
-                  onManageLinkClick={() => {
-                    onOpenChange(false);
-                    navigate({ to: '/profiles' });
-                  }}
-                  testIdPrefix="add-feature-profile"
-                />
-              </div>
-              <div className="space-y-1.5">
-                <Label className="text-xs text-muted-foreground">Model</Label>
-                <PhaseModelSelector
-                  value={modelEntry}
-                  onChange={handleModelChange}
-                  compact
-                  align="end"
-                />
-              </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs text-muted-foreground">Model</Label>
+              <PhaseModelSelector
+                value={modelEntry}
+                onChange={handleModelChange}
+                compact
+                align="end"
+              />
             </div>
 
-            <div
-              className={cn(
-                'grid gap-3',
-                modelSupportsPlanningMode ? 'grid-cols-2' : 'grid-cols-1'
-              )}
-            >
-              {modelSupportsPlanningMode && (
-                <div className="space-y-1.5">
-                  <Label className="text-xs text-muted-foreground">Planning</Label>
+            <div className="grid gap-3 grid-cols-2">
+              <div className="space-y-1.5">
+                <Label
+                  className={cn(
+                    'text-xs text-muted-foreground',
+                    !modelSupportsPlanningMode && 'opacity-50'
+                  )}
+                >
+                  Planning
+                </Label>
+                {modelSupportsPlanningMode ? (
                   <PlanningModeSelect
                     mode={planningMode}
                     onModeChange={setPlanningMode}
                     testIdPrefix="add-feature-planning"
                     compact
                   />
-                </div>
-              )}
+                ) : (
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <div>
+                          <PlanningModeSelect
+                            mode="skip"
+                            onModeChange={() => {}}
+                            testIdPrefix="add-feature-planning"
+                            compact
+                            disabled
+                          />
+                        </div>
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        <p>Planning modes are only available for Claude Provider</p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                )}
+              </div>
               <div className="space-y-1.5">
                 <Label className="text-xs text-muted-foreground">Options</Label>
                 <div className="flex flex-col gap-2 pt-1">
@@ -599,28 +552,32 @@ export function AddFeatureDialog({
                       Run tests
                     </Label>
                   </div>
-                  {modelSupportsPlanningMode && (
-                    <div className="flex items-center gap-2">
-                      <Checkbox
-                        id="add-feature-require-approval"
-                        checked={requirePlanApproval}
-                        onCheckedChange={(checked) => setRequirePlanApproval(!!checked)}
-                        disabled={planningMode === 'skip' || planningMode === 'lite'}
-                        data-testid="add-feature-require-approval-checkbox"
-                      />
-                      <Label
-                        htmlFor="add-feature-require-approval"
-                        className={cn(
-                          'text-xs font-normal',
-                          planningMode === 'skip' || planningMode === 'lite'
-                            ? 'cursor-not-allowed text-muted-foreground'
-                            : 'cursor-pointer'
-                        )}
-                      >
-                        Require approval
-                      </Label>
-                    </div>
-                  )}
+                  <div className="flex items-center gap-2">
+                    <Checkbox
+                      id="add-feature-require-approval"
+                      checked={requirePlanApproval}
+                      onCheckedChange={(checked) => setRequirePlanApproval(!!checked)}
+                      disabled={
+                        !modelSupportsPlanningMode ||
+                        planningMode === 'skip' ||
+                        planningMode === 'lite'
+                      }
+                      data-testid="add-feature-require-approval-checkbox"
+                    />
+                    <Label
+                      htmlFor="add-feature-require-approval"
+                      className={cn(
+                        'text-xs font-normal',
+                        !modelSupportsPlanningMode ||
+                          planningMode === 'skip' ||
+                          planningMode === 'lite'
+                          ? 'cursor-not-allowed text-muted-foreground'
+                          : 'cursor-pointer'
+                      )}
+                    >
+                      Require approval
+                    </Label>
+                  </div>
                 </div>
               </div>
             </div>

apps/ui/src/components/views/board-view/dialogs/edit-feature-dialog.tsx

@@ -34,21 +34,13 @@ import {
 import { toast } from 'sonner';
 import { getElectronAPI } from '@/lib/electron';
 import { cn, modelSupportsThinking } from '@/lib/utils';
-import {
-  Feature,
-  ModelAlias,
-  ThinkingLevel,
-  AIProfile,
-  useAppStore,
-  PlanningMode,
-} from '@/store/app-store';
+import { Feature, ModelAlias, ThinkingLevel, useAppStore, PlanningMode } from '@/store/app-store';
 import type { ReasoningEffort, PhaseModelEntry, DescriptionHistoryEntry } from '@automaker/types';
 import {
   TestingTabContent,
   PrioritySelector,
   WorkModeSelector,
   PlanningModeSelect,
-  ProfileTypeahead,
 } from '../shared';
 import type { WorkMode } from '../shared';
 import { PhaseModelSelector } from '@/components/views/settings-view/model-defaults/phase-model-selector';
@@ -60,14 +52,9 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { DependencyTreeDialog } from './dependency-tree-dialog';
-import {
-  isCursorModel,
-  isClaudeModel,
-  PROVIDER_PREFIXES,
-  supportsReasoningEffort,
-} from '@automaker/types';
-import { useNavigate } from '@tanstack/react-router';
+import { isClaudeModel, supportsReasoningEffort } from '@automaker/types';
 
 const logger = createLogger('EditFeatureDialog');
 
@@ -92,15 +79,13 @@ interface EditFeatureDialogProps {
       requirePlanApproval: boolean;
     },
     descriptionHistorySource?: 'enhance' | 'edit',
-    enhancementMode?: 'improve' | 'technical' | 'simplify' | 'acceptance'
+    enhancementMode?: 'improve' | 'technical' | 'simplify' | 'acceptance' | 'ux-reviewer'
   ) => void;
   categorySuggestions: string[];
   branchSuggestions: string[];
   branchCardCounts?: Record<string, number>; // Map of branch name to unarchived card count
   currentBranch?: string;
   isMaximized: boolean;
-  showProfilesOnly: boolean;
-  aiProfiles: AIProfile[];
   allFeatures: Feature[];
 }
 
@@ -113,11 +98,8 @@ export function EditFeatureDialog({
   branchCardCounts,
   currentBranch,
   isMaximized,
-  showProfilesOnly,
-  aiProfiles,
   allFeatures,
 }: EditFeatureDialogProps) {
-  const navigate = useNavigate();
   const [editingFeature, setEditingFeature] = useState<Feature | null>(feature);
   // Derive initial workMode from feature's branchName
   const [workMode, setWorkMode] = useState<WorkMode>(() => {
@@ -130,7 +112,7 @@ export function EditFeatureDialog({
   );
   const [isEnhancing, setIsEnhancing] = useState(false);
   const [enhancementMode, setEnhancementMode] = useState<
-    'improve' | 'technical' | 'simplify' | 'acceptance'
+    'improve' | 'technical' | 'simplify' | 'acceptance' | 'ux-reviewer'
   >('improve');
   const [enhanceOpen, setEnhanceOpen] = useState(false);
   const [showDependencyTree, setShowDependencyTree] = useState(false);
@@ -140,7 +122,6 @@ export function EditFeatureDialog({
   );
 
   // Model selection state
-  const [selectedProfileId, setSelectedProfileId] = useState<string | undefined>();
   const [modelEntry, setModelEntry] = useState<PhaseModelEntry>(() => ({
     model: (feature?.model as ModelAlias) || 'opus',
     thinkingLevel: feature?.thinkingLevel || 'none',
@@ -180,7 +161,6 @@ export function EditFeatureDialog({
         thinkingLevel: feature.thinkingLevel || 'none',
         reasoningEffort: feature.reasoningEffort || 'none',
       });
-      setSelectedProfileId(undefined);
     } else {
       setEditFeaturePreviewMap(new Map());
       setDescriptionChangeSource(null);
@@ -188,35 +168,8 @@ export function EditFeatureDialog({
     }
   }, [feature]);
 
-  const applyProfileToModel = (profile: AIProfile) => {
-    if (profile.provider === 'cursor') {
-      const cursorModel = `${PROVIDER_PREFIXES.cursor}${profile.cursorModel || 'auto'}`;
-      setModelEntry({ model: cursorModel as ModelAlias });
-    } else if (profile.provider === 'codex') {
-      setModelEntry({
-        model: profile.codexModel || 'codex-gpt-5.2-codex',
-        reasoningEffort: 'none',
-      });
-    } else if (profile.provider === 'opencode') {
-      setModelEntry({ model: profile.opencodeModel || 'opencode/big-pickle' });
-    } else {
-      // Claude
-      setModelEntry({
-        model: profile.model || 'sonnet',
-        thinkingLevel: profile.thinkingLevel || 'none',
-      });
-    }
-  };
-
-  const handleProfileSelect = (profile: AIProfile) => {
-    setSelectedProfileId(profile.id);
-    applyProfileToModel(profile);
-  };
-
   const handleModelChange = (entry: PhaseModelEntry) => {
     setModelEntry(entry);
-    // Clear profile selection when manually changing model
-    setSelectedProfileId(undefined);
   };
 
   const handleUpdate = () => {
@@ -385,11 +338,21 @@ export function EditFeatureDialog({
                               hour: '2-digit',
                               minute: '2-digit',
                             });
+                            const getEnhancementModeLabel = (mode?: string) => {
+                              const labels: Record<string, string> = {
+                                improve: 'Improve Clarity',
+                                technical: 'Add Technical Details',
+                                simplify: 'Simplify',
+                                acceptance: 'Add Acceptance Criteria',
+                                'ux-reviewer': 'User Experience',
+                              };
+                              return labels[mode || 'improve'] || mode || 'improve';
+                            };
                             const sourceLabel =
                               entry.source === 'initial'
                                 ? 'Original'
                                 : entry.source === 'enhance'
-                                  ? `Enhanced (${entry.enhancementMode || 'improve'})`
+                                  ? `Enhanced (${getEnhancementModeLabel(entry.enhancementMode)})`
                                   : 'Edited';
 
                             return (
@@ -502,6 +465,7 @@ export function EditFeatureDialog({
                         {enhancementMode === 'technical' && 'Add Technical Details'}
                         {enhancementMode === 'simplify' && 'Simplify'}
                         {enhancementMode === 'acceptance' && 'Add Acceptance Criteria'}
+                        {enhancementMode === 'ux-reviewer' && 'User Experience'}
                         <ChevronDown className="w-3 h-3 ml-1" />
                       </Button>
                     </DropdownMenuTrigger>
@@ -518,6 +482,9 @@ export function EditFeatureDialog({
                       <DropdownMenuItem onClick={() => setEnhancementMode('acceptance')}>
                         Add Acceptance Criteria
                       </DropdownMenuItem>
+                      <DropdownMenuItem onClick={() => setEnhancementMode('ux-reviewer')}>
+                        User Experience
+                      </DropdownMenuItem>
                     </DropdownMenuContent>
                   </DropdownMenu>
 
@@ -554,50 +521,54 @@ export function EditFeatureDialog({
               <span>AI & Execution</span>
             </div>
 
-            <div className="grid grid-cols-2 gap-3">
-              <div className="space-y-1.5">
-                <Label className="text-xs text-muted-foreground">Profile</Label>
-                <ProfileTypeahead
-                  profiles={aiProfiles}
-                  selectedProfileId={selectedProfileId}
-                  onSelect={handleProfileSelect}
-                  placeholder="Select profile..."
-                  showManageLink
-                  onManageLinkClick={() => {
-                    onClose();
-                    navigate({ to: '/profiles' });
-                  }}
-                  testIdPrefix="edit-feature-profile"
-                />
-              </div>
-              <div className="space-y-1.5">
-                <Label className="text-xs text-muted-foreground">Model</Label>
-                <PhaseModelSelector
-                  value={modelEntry}
-                  onChange={handleModelChange}
-                  compact
-                  align="end"
-                />
-              </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs text-muted-foreground">Model</Label>
+              <PhaseModelSelector
+                value={modelEntry}
+                onChange={handleModelChange}
+                compact
+                align="end"
+              />
             </div>
 
-            <div
-              className={cn(
-                'grid gap-3',
-                modelSupportsPlanningMode ? 'grid-cols-2' : 'grid-cols-1'
-              )}
-            >
-              {modelSupportsPlanningMode && (
-                <div className="space-y-1.5">
-                  <Label className="text-xs text-muted-foreground">Planning</Label>
+            <div className="grid gap-3 grid-cols-2">
+              <div className="space-y-1.5">
+                <Label
+                  className={cn(
+                    'text-xs text-muted-foreground',
+                    !modelSupportsPlanningMode && 'opacity-50'
+                  )}
+                >
+                  Planning
+                </Label>
+                {modelSupportsPlanningMode ? (
                   <PlanningModeSelect
                     mode={planningMode}
                     onModeChange={setPlanningMode}
                     testIdPrefix="edit-feature-planning"
                     compact
                   />
-                </div>
-              )}
+                ) : (
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <div>
+                          <PlanningModeSelect
+                            mode="skip"
+                            onModeChange={() => {}}
+                            testIdPrefix="edit-feature-planning"
+                            compact
+                            disabled
+                          />
+                        </div>
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        <p>Planning modes are only available for Claude Provider</p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                )}
+              </div>
               <div className="space-y-1.5">
                 <Label className="text-xs text-muted-foreground">Options</Label>
                 <div className="flex flex-col gap-2 pt-1">
@@ -617,28 +588,32 @@ export function EditFeatureDialog({
                       Run tests
                     </Label>
                   </div>
-                  {modelSupportsPlanningMode && (
-                    <div className="flex items-center gap-2">
-                      <Checkbox
-                        id="edit-feature-require-approval"
-                        checked={requirePlanApproval}
-                        onCheckedChange={(checked) => setRequirePlanApproval(!!checked)}
-                        disabled={planningMode === 'skip' || planningMode === 'lite'}
-                        data-testid="edit-feature-require-approval-checkbox"
-                      />
-                      <Label
-                        htmlFor="edit-feature-require-approval"
-                        className={cn(
-                          'text-xs font-normal',
-                          planningMode === 'skip' || planningMode === 'lite'
-                            ? 'cursor-not-allowed text-muted-foreground'
-                            : 'cursor-pointer'
-                        )}
-                      >
-                        Require approval
-                      </Label>
-                    </div>
-                  )}
+                  <div className="flex items-center gap-2">
+                    <Checkbox
+                      id="edit-feature-require-approval"
+                      checked={requirePlanApproval}
+                      onCheckedChange={(checked) => setRequirePlanApproval(!!checked)}
+                      disabled={
+                        !modelSupportsPlanningMode ||
+                        planningMode === 'skip' ||
+                        planningMode === 'lite'
+                      }
+                      data-testid="edit-feature-require-approval-checkbox"
+                    />
+                    <Label
+                      htmlFor="edit-feature-require-approval"
+                      className={cn(
+                        'text-xs font-normal',
+                        !modelSupportsPlanningMode ||
+                          planningMode === 'skip' ||
+                          planningMode === 'lite'
+                          ? 'cursor-not-allowed text-muted-foreground'
+                          : 'cursor-pointer'
+                      )}
+                    >
+                      Require approval
+                    </Label>
+                  </div>
                 </div>
               </div>
             </div>

apps/ui/src/components/views/board-view/dialogs/mass-edit-dialog.tsx

@@ -12,19 +12,18 @@ import { Checkbox } from '@/components/ui/checkbox';
 import { Label } from '@/components/ui/label';
 import { AlertCircle } from 'lucide-react';
 import { modelSupportsThinking } from '@/lib/utils';
-import { Feature, ModelAlias, ThinkingLevel, AIProfile, PlanningMode } from '@/store/app-store';
-import { ProfileSelect, TestingTabContent, PrioritySelect, PlanningModeSelect } from '../shared';
+import { Feature, ModelAlias, ThinkingLevel, PlanningMode } from '@/store/app-store';
+import { TestingTabContent, PrioritySelect, PlanningModeSelect } from '../shared';
 import { PhaseModelSelector } from '@/components/views/settings-view/model-defaults/phase-model-selector';
-import { isCursorModel, PROVIDER_PREFIXES, type PhaseModelEntry } from '@automaker/types';
+import { isCursorModel, isClaudeModel, type PhaseModelEntry } from '@automaker/types';
 import { cn } from '@/lib/utils';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 
 interface MassEditDialogProps {
   open: boolean;
   onClose: () => void;
   selectedFeatures: Feature[];
   onApply: (updates: Partial<Feature>) => Promise<void>;
-  showProfilesOnly: boolean;
-  aiProfiles: AIProfile[];
 }
 
 interface ApplyState {
@@ -98,14 +97,7 @@ function FieldWrapper({ label, isMixed, willApply, onApplyChange, children }: Fi
   );
 }
 
-export function MassEditDialog({
-  open,
-  onClose,
-  selectedFeatures,
-  onApply,
-  showProfilesOnly,
-  aiProfiles,
-}: MassEditDialogProps) {
+export function MassEditDialog({ open, onClose, selectedFeatures, onApply }: MassEditDialogProps) {
   const [isApplying, setIsApplying] = useState(false);
 
   // Track which fields to apply
@@ -149,26 +141,6 @@ export function MassEditDialog({
     }
   }, [open, selectedFeatures]);
 
-  const handleModelSelect = (newModel: string) => {
-    const isCursor = isCursorModel(newModel);
-    setModel(newModel as ModelAlias);
-    if (isCursor || !modelSupportsThinking(newModel)) {
-      setThinkingLevel('none');
-    }
-  };
-
-  const handleProfileSelect = (profile: AIProfile) => {
-    if (profile.provider === 'cursor') {
-      const cursorModel = `${PROVIDER_PREFIXES.cursor}${profile.cursorModel || 'auto'}`;
-      setModel(cursorModel as ModelAlias);
-      setThinkingLevel('none');
-    } else {
-      setModel((profile.model || 'sonnet') as ModelAlias);
-      setThinkingLevel(profile.thinkingLevel || 'none');
-    }
-    setApplyState((prev) => ({ ...prev, model: true, thinkingLevel: true }));
-  };
-
   const handleApply = async () => {
     const updates: Partial<Feature> = {};
 
@@ -196,6 +168,7 @@ export function MassEditDialog({
   const hasAnyApply = Object.values(applyState).some(Boolean);
   const isCurrentModelCursor = isCursorModel(model);
   const modelAllowsThinking = !isCurrentModelCursor && modelSupportsThinking(model);
+  const modelSupportsPlanningMode = isClaudeModel(model);
 
   return (
     <Dialog open={open} onOpenChange={(open) => !open && onClose()}>
@@ -208,29 +181,11 @@ export function MassEditDialog({
         </DialogHeader>
 
         <div className="py-4 pr-4 space-y-4 max-h-[60vh] overflow-y-auto">
-          {/* Quick Select Profile Section */}
-          {aiProfiles.length > 0 && (
-            <div className="space-y-2">
-              <Label className="text-sm font-medium">Quick Select Profile</Label>
-              <p className="text-xs text-muted-foreground mb-2">
-                Selecting a profile will automatically enable model settings
-              </p>
-              <ProfileSelect
-                profiles={aiProfiles}
-                selectedModel={model}
-                selectedThinkingLevel={thinkingLevel}
-                selectedCursorModel={isCurrentModelCursor ? model : undefined}
-                onSelect={handleProfileSelect}
-                testIdPrefix="mass-edit-profile"
-              />
-            </div>
-          )}
-
           {/* Model Selector */}
           <div className="space-y-2">
             <Label className="text-sm font-medium">AI Model</Label>
             <p className="text-xs text-muted-foreground mb-2">
-              Or select a specific model configuration
+              Select a specific model configuration
             </p>
             <PhaseModelSelector
               value={{ model, thinkingLevel }}
@@ -252,30 +207,64 @@ export function MassEditDialog({
           <div className="border-t border-border" />
 
           {/* Planning Mode */}
-          <FieldWrapper
-            label="Planning Mode"
-            isMixed={mixedValues.planningMode || mixedValues.requirePlanApproval}
-            willApply={applyState.planningMode || applyState.requirePlanApproval}
-            onApplyChange={(apply) =>
-              setApplyState((prev) => ({
-                ...prev,
-                planningMode: apply,
-                requirePlanApproval: apply,
-              }))
-            }
-          >
-            <PlanningModeSelect
-              mode={planningMode}
-              onModeChange={(newMode) => {
-                setPlanningMode(newMode);
-                // Auto-suggest approval based on mode, but user can override
-                setRequirePlanApproval(newMode === 'spec' || newMode === 'full');
-              }}
-              requireApproval={requirePlanApproval}
-              onRequireApprovalChange={setRequirePlanApproval}
-              testIdPrefix="mass-edit-planning"
-            />
-          </FieldWrapper>
+          {modelSupportsPlanningMode ? (
+            <FieldWrapper
+              label="Planning Mode"
+              isMixed={mixedValues.planningMode || mixedValues.requirePlanApproval}
+              willApply={applyState.planningMode || applyState.requirePlanApproval}
+              onApplyChange={(apply) =>
+                setApplyState((prev) => ({
+                  ...prev,
+                  planningMode: apply,
+                  requirePlanApproval: apply,
+                }))
+              }
+            >
+              <PlanningModeSelect
+                mode={planningMode}
+                onModeChange={(newMode) => {
+                  setPlanningMode(newMode);
+                  // Auto-suggest approval based on mode, but user can override
+                  setRequirePlanApproval(newMode === 'spec' || newMode === 'full');
+                }}
+                requireApproval={requirePlanApproval}
+                onRequireApprovalChange={setRequirePlanApproval}
+                testIdPrefix="mass-edit-planning"
+              />
+            </FieldWrapper>
+          ) : (
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <div
+                    className={cn(
+                      'p-3 rounded-lg border transition-colors border-border bg-muted/20 opacity-50 cursor-not-allowed'
+                    )}
+                  >
+                    <div className="flex items-center justify-between mb-3">
+                      <div className="flex items-center gap-2">
+                        <Checkbox checked={false} disabled className="opacity-50" />
+                        <Label className="text-sm font-medium text-muted-foreground">
+                          Planning Mode
+                        </Label>
+                      </div>
+                    </div>
+                    <div className="opacity-50 pointer-events-none">
+                      <PlanningModeSelect
+                        mode="skip"
+                        onModeChange={() => {}}
+                        testIdPrefix="mass-edit-planning"
+                        disabled
+                      />
+                    </div>
+                  </div>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>Planning modes are only available for Claude Provider</p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          )}
 
           {/* Priority */}
           <FieldWrapper

apps/ui/src/components/views/board-view/dialogs/pipeline-settings-dialog.tsx

@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import {
   Dialog,
   DialogContent,
@@ -8,223 +8,11 @@ import {
   DialogTitle,
 } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Textarea } from '@/components/ui/textarea';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import { Plus, Trash2, ChevronUp, ChevronDown, Upload, Pencil, X, FileText } from 'lucide-react';
+import { Plus, Trash2, ChevronUp, ChevronDown, Pencil } from 'lucide-react';
 import { toast } from 'sonner';
 import type { PipelineConfig, PipelineStep } from '@automaker/types';
 import { cn } from '@/lib/utils';
-
-// Color options for pipeline columns
-const COLOR_OPTIONS = [
-  { value: 'bg-blue-500/20', label: 'Blue', preview: 'bg-blue-500' },
-  { value: 'bg-purple-500/20', label: 'Purple', preview: 'bg-purple-500' },
-  { value: 'bg-green-500/20', label: 'Green', preview: 'bg-green-500' },
-  { value: 'bg-orange-500/20', label: 'Orange', preview: 'bg-orange-500' },
-  { value: 'bg-red-500/20', label: 'Red', preview: 'bg-red-500' },
-  { value: 'bg-pink-500/20', label: 'Pink', preview: 'bg-pink-500' },
-  { value: 'bg-cyan-500/20', label: 'Cyan', preview: 'bg-cyan-500' },
-  { value: 'bg-amber-500/20', label: 'Amber', preview: 'bg-amber-500' },
-  { value: 'bg-indigo-500/20', label: 'Indigo', preview: 'bg-indigo-500' },
-];
-
-// Pre-built step templates with well-designed prompts
-const STEP_TEMPLATES = [
-  {
-    id: 'code-review',
-    name: 'Code Review',
-    colorClass: 'bg-blue-500/20',
-    instructions: `## Code Review
-
-Please perform a thorough code review of the changes made in this feature. Focus on:
-
-### Code Quality
-- **Readability**: Is the code easy to understand? Are variable/function names descriptive?
-- **Maintainability**: Will this code be easy to modify in the future?
-- **DRY Principle**: Is there any duplicated code that should be abstracted?
-- **Single Responsibility**: Do functions and classes have a single, clear purpose?
-
-### Best Practices
-- Follow established patterns and conventions used in the codebase
-- Ensure proper error handling is in place
-- Check for appropriate logging where needed
-- Verify that magic numbers/strings are replaced with named constants
-
-### Performance
-- Identify any potential performance bottlenecks
-- Check for unnecessary re-renders (React) or redundant computations
-- Ensure efficient data structures are used
-
-### Testing
-- Verify that new code has appropriate test coverage
-- Check that edge cases are handled
-
-### Action Required
-After reviewing, make any necessary improvements directly. If you find issues:
-1. Fix them immediately if they are straightforward
-2. For complex issues, document them clearly with suggested solutions
-
-Provide a brief summary of changes made or issues found.`,
-  },
-  {
-    id: 'security-review',
-    name: 'Security Review',
-    colorClass: 'bg-red-500/20',
-    instructions: `## Security Review
-
-Perform a comprehensive security audit of the changes made in this feature. Check for vulnerabilities in the following areas:
-
-### Input Validation & Sanitization
-- Verify all user inputs are properly validated and sanitized
-- Check for SQL injection vulnerabilities
-- Check for XSS (Cross-Site Scripting) vulnerabilities
-- Ensure proper encoding of output data
-
-### Authentication & Authorization
-- Verify authentication checks are in place where needed
-- Ensure authorization logic correctly restricts access
-- Check for privilege escalation vulnerabilities
-- Verify session management is secure
-
-### Data Protection
-- Ensure sensitive data is not logged or exposed
-- Check that secrets/credentials are not hardcoded
-- Verify proper encryption is used for sensitive data
-- Check for secure transmission of data (HTTPS, etc.)
-
-### Common Vulnerabilities (OWASP Top 10)
-- Injection flaws
-- Broken authentication
-- Sensitive data exposure
-- XML External Entities (XXE)
-- Broken access control
-- Security misconfiguration
-- Cross-Site Scripting (XSS)
-- Insecure deserialization
-- Using components with known vulnerabilities
-- Insufficient logging & monitoring
-
-### Action Required
-1. Fix any security vulnerabilities immediately
-2. For complex security issues, document them with severity levels
-3. Add security-related comments where appropriate
-
-Provide a security assessment summary with any issues found and fixes applied.`,
-  },
-  {
-    id: 'testing',
-    name: 'Testing',
-    colorClass: 'bg-green-500/20',
-    instructions: `## Testing Step
-
-Please ensure comprehensive test coverage for the changes made in this feature.
-
-### Unit Tests
-- Write unit tests for all new functions and methods
-- Ensure edge cases are covered
-- Test error handling paths
-- Aim for high code coverage on new code
-
-### Integration Tests
-- Test interactions between components/modules
-- Verify API endpoints work correctly
-- Test database operations if applicable
-
-### Test Quality
-- Tests should be readable and well-documented
-- Each test should have a clear purpose
-- Use descriptive test names that explain the scenario
-- Follow the Arrange-Act-Assert pattern
-
-### Run Tests
-After writing tests, run the full test suite and ensure:
-1. All new tests pass
-2. No existing tests are broken
-3. Test coverage meets project standards
-
-Provide a summary of tests added and any issues found during testing.`,
-  },
-  {
-    id: 'documentation',
-    name: 'Documentation',
-    colorClass: 'bg-amber-500/20',
-    instructions: `## Documentation Step
-
-Please ensure all changes are properly documented.
-
-### Code Documentation
-- Add/update JSDoc or docstrings for new functions and classes
-- Document complex algorithms or business logic
-- Add inline comments for non-obvious code
-
-### API Documentation
-- Document any new or modified API endpoints
-- Include request/response examples
-- Document error responses
-
-### README Updates
-- Update README if new setup steps are required
-- Document any new environment variables
-- Update architecture diagrams if applicable
-
-### Changelog
-- Document notable changes for the changelog
-- Include breaking changes if any
-
-Provide a summary of documentation added or updated.`,
-  },
-  {
-    id: 'optimization',
-    name: 'Performance Optimization',
-    colorClass: 'bg-cyan-500/20',
-    instructions: `## Performance Optimization Step
-
-Review and optimize the performance of the changes made in this feature.
-
-### Code Performance
-- Identify and optimize slow algorithms (O(n²) → O(n log n), etc.)
-- Remove unnecessary computations or redundant operations
-- Optimize loops and iterations
-- Use appropriate data structures
-
-### Memory Usage
-- Check for memory leaks
-- Optimize memory-intensive operations
-- Ensure proper cleanup of resources
-
-### Database/API
-- Optimize database queries (add indexes, reduce N+1 queries)
-- Implement caching where appropriate
-- Batch API calls when possible
-
-### Frontend (if applicable)
-- Minimize bundle size
-- Optimize render performance
-- Implement lazy loading where appropriate
-- Use memoization for expensive computations
-
-### Action Required
-1. Profile the code to identify bottlenecks
-2. Apply optimizations
-3. Measure improvements
-
-Provide a summary of optimizations applied and performance improvements achieved.`,
-  },
-];
-
-// Helper to get template color class
-const getTemplateColorClass = (templateId: string): string => {
-  const template = STEP_TEMPLATES.find((t) => t.id === templateId);
-  return template?.colorClass || COLOR_OPTIONS[0].value;
-};
+import { AddEditPipelineStepDialog } from './add-edit-pipeline-step-dialog';
 
 interface PipelineSettingsDialogProps {
   open: boolean;
@@ -234,18 +22,10 @@ interface PipelineSettingsDialogProps {
   onSave: (config: PipelineConfig) => Promise<void>;
 }
 
-interface EditingStep {
-  id?: string;
-  name: string;
-  instructions: string;
-  colorClass: string;
-  order: number;
-}
-
 export function PipelineSettingsDialog({
   open,
   onClose,
-  projectPath,
+  projectPath: _projectPath,
   pipelineConfig,
   onSave,
 }: PipelineSettingsDialogProps) {
@@ -262,9 +42,11 @@ export function PipelineSettingsDialog({
   };
 
   const [steps, setSteps] = useState<PipelineStep[]>(() => validateSteps(pipelineConfig?.steps));
-  const [editingStep, setEditingStep] = useState<EditingStep | null>(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
-  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  // Sub-dialog state
+  const [addEditDialogOpen, setAddEditDialogOpen] = useState(false);
+  const [editingStep, setEditingStep] = useState<PipelineStep | null>(null);
 
   // Sync steps when dialog opens or pipelineConfig changes
   useEffect(() => {
@@ -276,22 +58,13 @@ export function PipelineSettingsDialog({
   const sortedSteps = [...steps].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
 
   const handleAddStep = () => {
-    setEditingStep({
-      name: '',
-      instructions: '',
-      colorClass: COLOR_OPTIONS[steps.length % COLOR_OPTIONS.length].value,
-      order: steps.length,
-    });
+    setEditingStep(null);
+    setAddEditDialogOpen(true);
   };
 
   const handleEditStep = (step: PipelineStep) => {
-    setEditingStep({
-      id: step.id,
-      name: step.name,
-      instructions: step.instructions,
-      colorClass: step.colorClass,
-      order: step.order,
-    });
+    setEditingStep(step);
+    setAddEditDialogOpen(true);
   };
 
   const handleDeleteStep = (stepId: string) => {
@@ -323,53 +96,21 @@ export function PipelineSettingsDialog({
     setSteps(newSteps);
   };
 
-  const handleFileUpload = () => {
-    fileInputRef.current?.click();
-  };
-
-  const handleFileInputChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (!file) return;
-
-    try {
-      const content = await file.text();
-      setEditingStep((prev) => (prev ? { ...prev, instructions: content } : null));
-      toast.success('Instructions loaded from file');
-    } catch (error) {
-      toast.error('Failed to load file');
-    }
-
-    // Reset the input so the same file can be selected again
-    if (fileInputRef.current) {
-      fileInputRef.current.value = '';
-    }
-  };
-
-  const handleSaveStep = () => {
-    if (!editingStep) return;
-
-    if (!editingStep.name.trim()) {
-      toast.error('Step name is required');
-      return;
-    }
-
-    if (!editingStep.instructions.trim()) {
-      toast.error('Step instructions are required');
-      return;
-    }
-
+  const handleSaveStep = (
+    stepData: Omit<PipelineStep, 'id' | 'createdAt' | 'updatedAt'> & { id?: string }
+  ) => {
     const now = new Date().toISOString();
 
-    if (editingStep.id) {
+    if (stepData.id) {
       // Update existing step
       setSteps((prev) =>
         prev.map((s) =>
-          s.id === editingStep.id
+          s.id === stepData.id
             ? {
                 ...s,
-                name: editingStep.name,
-                instructions: editingStep.instructions,
-                colorClass: editingStep.colorClass,
+                name: stepData.name,
+                instructions: stepData.instructions,
+                colorClass: stepData.colorClass,
                 updatedAt: now,
               }
             : s
@@ -379,90 +120,21 @@ export function PipelineSettingsDialog({
       // Add new step
       const newStep: PipelineStep = {
         id: `step_${Date.now().toString(36)}_${Math.random().toString(36).substring(2, 8)}`,
-        name: editingStep.name,
-        instructions: editingStep.instructions,
-        colorClass: editingStep.colorClass,
+        name: stepData.name,
+        instructions: stepData.instructions,
+        colorClass: stepData.colorClass,
         order: steps.length,
         createdAt: now,
         updatedAt: now,
       };
       setSteps((prev) => [...prev, newStep]);
     }
-
-    setEditingStep(null);
   };
 
   const handleSaveConfig = async () => {
     setIsSubmitting(true);
     try {
-      // If the user is currently editing a step and clicks "Save Configuration",
-      // include that step in the config (common expectation) instead of silently dropping it.
-      let effectiveSteps = steps;
-      if (editingStep) {
-        if (!editingStep.name.trim()) {
-          toast.error('Step name is required');
-          return;
-        }
-
-        if (!editingStep.instructions.trim()) {
-          toast.error('Step instructions are required');
-          return;
-        }
-
-        const now = new Date().toISOString();
-        if (editingStep.id) {
-          // Update existing (or add if missing for some reason)
-          const existingIdx = effectiveSteps.findIndex((s) => s.id === editingStep.id);
-          if (existingIdx >= 0) {
-            effectiveSteps = effectiveSteps.map((s) =>
-              s.id === editingStep.id
-                ? {
-                    ...s,
-                    name: editingStep.name,
-                    instructions: editingStep.instructions,
-                    colorClass: editingStep.colorClass,
-                    updatedAt: now,
-                  }
-                : s
-            );
-          } else {
-            effectiveSteps = [
-              ...effectiveSteps,
-              {
-                id: editingStep.id,
-                name: editingStep.name,
-                instructions: editingStep.instructions,
-                colorClass: editingStep.colorClass,
-                order: effectiveSteps.length,
-                createdAt: now,
-                updatedAt: now,
-              },
-            ];
-          }
-        } else {
-          // Add new step
-          effectiveSteps = [
-            ...effectiveSteps,
-            {
-              id: `step_${Date.now().toString(36)}_${Math.random().toString(36).substring(2, 8)}`,
-              name: editingStep.name,
-              instructions: editingStep.instructions,
-              colorClass: editingStep.colorClass,
-              order: effectiveSteps.length,
-              createdAt: now,
-              updatedAt: now,
-            },
-          ];
-        }
-
-        // Keep local UI state consistent with what we are saving.
-        setSteps(effectiveSteps);
-        setEditingStep(null);
-      }
-
-      const sortedEffectiveSteps = [...effectiveSteps].sort(
-        (a, b) => (a.order ?? 0) - (b.order ?? 0)
-      );
+      const sortedEffectiveSteps = [...steps].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
       const config: PipelineConfig = {
         version: 1,
         steps: sortedEffectiveSteps.map((s, index) => ({ ...s, order: index })),
@@ -470,7 +142,7 @@ export function PipelineSettingsDialog({
       await onSave(config);
       toast.success('Pipeline configuration saved');
       onClose();
-    } catch (error) {
+    } catch {
       toast.error('Failed to save pipeline configuration');
     } finally {
       setIsSubmitting(false);
@@ -478,259 +150,121 @@ export function PipelineSettingsDialog({
   };
 
   return (
-    <Dialog open={open} onOpenChange={(open) => !open && onClose()}>
-      <DialogContent className="max-w-2xl max-h-[85vh] overflow-hidden flex flex-col">
-        {/* Hidden file input for loading instructions from .md files */}
-        <input
-          ref={fileInputRef}
-          type="file"
-          accept=".md,.txt"
-          className="hidden"
-          onChange={handleFileInputChange}
-        />
-        <DialogHeader>
-          <DialogTitle>Pipeline Settings</DialogTitle>
-          <DialogDescription>
-            Configure custom pipeline steps that run after a feature completes "In Progress". Each
-            step will automatically prompt the agent with its instructions.
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className="flex-1 overflow-y-auto py-4 space-y-4">
-          {/* Steps List */}
-          {sortedSteps.length > 0 ? (
-            <div className="space-y-2">
-              {sortedSteps.map((step, index) => (
-                <div
-                  key={step.id}
-                  className="flex items-center gap-2 p-3 border rounded-lg bg-muted/30"
-                >
-                  <div className="flex flex-col gap-1">
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      className="h-5 w-5"
-                      onClick={() => handleMoveStep(step.id, 'up')}
-                      disabled={index === 0}
-                    >
-                      <ChevronUp className="h-3 w-3" />
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      className="h-5 w-5"
-                      onClick={() => handleMoveStep(step.id, 'down')}
-                      disabled={index === sortedSteps.length - 1}
-                    >
-                      <ChevronDown className="h-3 w-3" />
-                    </Button>
-                  </div>
+    <>
+      <Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
+        <DialogContent className="max-w-2xl max-h-[85vh] overflow-hidden flex flex-col">
+          <DialogHeader>
+            <DialogTitle>Pipeline Settings</DialogTitle>
+            <DialogDescription>
+              Configure custom pipeline steps that run after a feature completes "In Progress". Each
+              step will automatically prompt the agent with its instructions.
+            </DialogDescription>
+          </DialogHeader>
 
+          <div className="flex-1 overflow-y-auto py-4 space-y-4">
+            {/* Steps List */}
+            {sortedSteps.length > 0 ? (
+              <div className="space-y-2">
+                {sortedSteps.map((step, index) => (
                   <div
-                    className={cn(
-                      'w-3 h-8 rounded',
-                      (step.colorClass || 'bg-blue-500/20').replace('/20', '')
-                    )}
-                  />
+                    key={step.id}
+                    className="flex items-center gap-2 p-3 border rounded-lg bg-muted/30"
+                  >
+                    <div className="flex flex-col gap-1">
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-5 w-5"
+                        onClick={() => handleMoveStep(step.id, 'up')}
+                        disabled={index === 0}
+                      >
+                        <ChevronUp className="h-3 w-3" />
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-5 w-5"
+                        onClick={() => handleMoveStep(step.id, 'down')}
+                        disabled={index === sortedSteps.length - 1}
+                      >
+                        <ChevronDown className="h-3 w-3" />
+                      </Button>
+                    </div>
 
-                  <div className="flex-1 min-w-0">
-                    <div className="font-medium truncate">{step.name || 'Unnamed Step'}</div>
-                    <div className="text-xs text-muted-foreground truncate">
-                      {(step.instructions || '').substring(0, 100)}
-                      {(step.instructions || '').length > 100 ? '...' : ''}
+                    <div
+                      className={cn(
+                        'w-3 h-8 rounded',
+                        (step.colorClass || 'bg-blue-500/20').replace('/20', '')
+                      )}
+                    />
+
+                    <div className="flex-1 min-w-0">
+                      <div className="font-medium truncate">{step.name || 'Unnamed Step'}</div>
+                      <div className="text-xs text-muted-foreground truncate">
+                        {(step.instructions || '').substring(0, 100)}
+                        {(step.instructions || '').length > 100 ? '...' : ''}
+                      </div>
+                    </div>
+
+                    <div className="flex items-center gap-1">
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-7 w-7"
+                        onClick={() => handleEditStep(step)}
+                      >
+                        <Pencil className="h-3 w-3" />
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-7 w-7 text-destructive hover:text-destructive"
+                        onClick={() => handleDeleteStep(step.id)}
+                      >
+                        <Trash2 className="h-3 w-3" />
+                      </Button>
                     </div>
                   </div>
+                ))}
+              </div>
+            ) : (
+              <div className="text-center py-8 text-muted-foreground">
+                <p>No pipeline steps configured.</p>
+                <p className="text-sm">
+                  Add steps to create a custom workflow after features complete.
+                </p>
+              </div>
+            )}
 
-                  <div className="flex items-center gap-1">
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      className="h-7 w-7"
-                      onClick={() => handleEditStep(step)}
-                    >
-                      <Pencil className="h-3 w-3" />
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      className="h-7 w-7 text-destructive hover:text-destructive"
-                      onClick={() => handleDeleteStep(step.id)}
-                    >
-                      <Trash2 className="h-3 w-3" />
-                    </Button>
-                  </div>
-                </div>
-              ))}
-            </div>
-          ) : (
-            <div className="text-center py-8 text-muted-foreground">
-              <p>No pipeline steps configured.</p>
-              <p className="text-sm">
-                Add steps to create a custom workflow after features complete.
-              </p>
-            </div>
-          )}
-
-          {/* Add Step Button */}
-          {!editingStep && (
+            {/* Add Step Button */}
             <Button variant="outline" className="w-full" onClick={handleAddStep}>
               <Plus className="h-4 w-4 mr-2" />
               Add Pipeline Step
             </Button>
-          )}
+          </div>
 
-          {/* Edit/Add Step Form */}
-          {editingStep && (
-            <div className="border rounded-lg p-4 space-y-4 bg-muted/20">
-              <div className="flex items-center justify-between">
-                <h4 className="font-medium">{editingStep.id ? 'Edit Step' : 'New Step'}</h4>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="h-6 w-6"
-                  onClick={() => setEditingStep(null)}
-                >
-                  <X className="h-4 w-4" />
-                </Button>
-              </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={onClose}>
+              Cancel
+            </Button>
+            <Button onClick={handleSaveConfig} disabled={isSubmitting}>
+              {isSubmitting ? 'Saving...' : 'Save Pipeline'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
 
-              {/* Template Selector - only show for new steps */}
-              {!editingStep.id && (
-                <div className="space-y-2">
-                  <Label>Start from Template</Label>
-                  <Select
-                    onValueChange={(templateId) => {
-                      const template = STEP_TEMPLATES.find((t) => t.id === templateId);
-                      if (template) {
-                        setEditingStep((prev) =>
-                          prev
-                            ? {
-                                ...prev,
-                                name: template.name,
-                                instructions: template.instructions,
-                                colorClass: template.colorClass,
-                              }
-                            : null
-                        );
-                        toast.success(`Loaded "${template.name}" template`);
-                      }
-                    }}
-                  >
-                    <SelectTrigger className="w-full">
-                      <SelectValue placeholder="Choose a template (optional)" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {STEP_TEMPLATES.map((template) => (
-                        <SelectItem key={template.id} value={template.id}>
-                          <div className="flex items-center gap-2">
-                            <div
-                              className={cn(
-                                'w-2 h-2 rounded-full',
-                                template.colorClass.replace('/20', '')
-                              )}
-                            />
-                            {template.name}
-                          </div>
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                  <p className="text-xs text-muted-foreground">
-                    Select a pre-built template to populate the form, or create your own from
-                    scratch.
-                  </p>
-                </div>
-              )}
-
-              <div className="space-y-2">
-                <Label htmlFor="step-name">Step Name</Label>
-                <Input
-                  id="step-name"
-                  placeholder="e.g., Code Review, Testing, Documentation"
-                  value={editingStep.name}
-                  onChange={(e) =>
-                    setEditingStep((prev) => (prev ? { ...prev, name: e.target.value } : null))
-                  }
-                />
-              </div>
-
-              <div className="space-y-2">
-                <Label>Color</Label>
-                <div className="flex flex-wrap gap-2">
-                  {COLOR_OPTIONS.map((color) => (
-                    <button
-                      key={color.value}
-                      type="button"
-                      className={cn(
-                        'w-8 h-8 rounded-full transition-all',
-                        color.preview,
-                        editingStep.colorClass === color.value
-                          ? 'ring-2 ring-offset-2 ring-primary'
-                          : 'opacity-60 hover:opacity-100'
-                      )}
-                      onClick={() =>
-                        setEditingStep((prev) =>
-                          prev ? { ...prev, colorClass: color.value } : null
-                        )
-                      }
-                      title={color.label}
-                    />
-                  ))}
-                </div>
-              </div>
-
-              <div className="space-y-2">
-                <div className="flex items-center justify-between">
-                  <Label htmlFor="step-instructions">Agent Instructions</Label>
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    className="h-7 text-xs"
-                    onClick={handleFileUpload}
-                  >
-                    <Upload className="h-3 w-3 mr-1" />
-                    Load from .md file
-                  </Button>
-                </div>
-                <Textarea
-                  id="step-instructions"
-                  placeholder="Instructions for the agent to follow during this pipeline step..."
-                  value={editingStep.instructions}
-                  onChange={(e) =>
-                    setEditingStep((prev) =>
-                      prev ? { ...prev, instructions: e.target.value } : null
-                    )
-                  }
-                  rows={6}
-                  className="font-mono text-sm"
-                />
-              </div>
-
-              <div className="flex justify-end gap-2">
-                <Button variant="outline" onClick={() => setEditingStep(null)}>
-                  Cancel
-                </Button>
-                <Button onClick={handleSaveStep}>
-                  {editingStep.id ? 'Update Step' : 'Add Step'}
-                </Button>
-              </div>
-            </div>
-          )}
-        </div>
-
-        <DialogFooter>
-          <Button variant="outline" onClick={onClose}>
-            Cancel
-          </Button>
-          <Button onClick={handleSaveConfig} disabled={isSubmitting}>
-            {isSubmitting
-              ? 'Saving...'
-              : editingStep
-                ? 'Save Step & Configuration'
-                : 'Save Configuration'}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+      {/* Sub-dialog for adding/editing steps */}
+      <AddEditPipelineStepDialog
+        open={addEditDialogOpen}
+        onClose={() => {
+          setAddEditDialogOpen(false);
+          setEditingStep(null);
+        }}
+        onSave={handleSaveStep}
+        existingStep={editingStep}
+        defaultOrder={steps.length}
+      />
+    </>
   );
 }

apps/ui/src/components/views/board-view/dialogs/pipeline-step-templates/code-review.ts

@@ -0,0 +1,94 @@
+export const codeReviewTemplate = {
+  id: 'code-review',
+  name: 'Code Review',
+  colorClass: 'bg-blue-500/20',
+  instructions: `## Code Review & Update
+
+# ⚠️ CRITICAL REQUIREMENT: YOU MUST UPDATE THE CODE ⚠️
+
+**THIS IS NOT OPTIONAL. AFTER REVIEWING, YOU MUST MODIFY THE CODE WITH YOUR FINDINGS.**
+
+This step has TWO mandatory phases:
+1. **REVIEW** the code (identify issues)
+2. **UPDATE** the code (fix the issues you found)
+
+**You cannot complete this step by only reviewing. You MUST make code changes based on your review findings.**
+
+---
+
+### Phase 1: Review Phase
+Perform a thorough code review of the changes made in this feature. Focus on:
+
+#### Code Quality
+- **Readability**: Is the code easy to understand? Are variable/function names descriptive?
+- **Maintainability**: Will this code be easy to modify in the future?
+- **DRY Principle**: Is there any duplicated code that should be abstracted?
+- **Single Responsibility**: Do functions and classes have a single, clear purpose?
+
+#### Best Practices
+- Follow established patterns and conventions used in the codebase
+- Ensure proper error handling is in place
+- Check for appropriate logging where needed
+- Verify that magic numbers/strings are replaced with named constants
+
+#### Performance
+- Identify any potential performance bottlenecks
+- Check for unnecessary re-renders (React) or redundant computations
+- Ensure efficient data structures are used
+
+#### Testing
+- Verify that new code has appropriate test coverage
+- Check that edge cases are handled
+
+---
+
+### Phase 2: Update Phase - ⚠️ MANDATORY ACTION REQUIRED ⚠️
+
+**YOU MUST NOW MODIFY THE CODE BASED ON YOUR REVIEW FINDINGS.**
+
+**This is not optional. Every issue you identify must be addressed with code changes.**
+
+#### Action Steps (You MUST complete these):
+
+1. **Fix Issues Immediately**: For every issue you found during review:
+   - ✅ Refactor code for better readability
+   - ✅ Extract duplicated code into reusable functions
+   - ✅ Improve variable/function names for clarity
+   - ✅ Add missing error handling
+   - ✅ Replace magic numbers/strings with named constants
+   - ✅ Optimize performance bottlenecks
+   - ✅ Fix any code quality issues you identify
+   - ✅ **MAKE THE ACTUAL CODE CHANGES - DO NOT JUST DOCUMENT THEM**
+
+2. **Apply All Improvements**: Don't just identify problems - fix them in code:
+   - ✅ Improve code structure and organization
+   - ✅ Enhance error handling and logging
+   - ✅ Optimize performance where possible
+   - ✅ Ensure consistency with codebase patterns
+   - ✅ Add or improve comments where needed
+   - ✅ **MODIFY THE FILES DIRECTLY WITH YOUR IMPROVEMENTS**
+
+3. **For Complex Issues**: If you encounter issues that require significant refactoring:
+   - ✅ Make the improvements you can make safely
+   - ✅ Document remaining issues with clear explanations
+   - ✅ Provide specific suggestions for future improvements
+   - ✅ **STILL MAKE AS MANY CODE CHANGES AS POSSIBLE**
+
+---
+
+### Summary Required
+After completing BOTH review AND update phases, provide:
+- A summary of issues found during review
+- **A detailed list of ALL code changes and improvements made (this proves you updated the code)**
+- Any remaining issues that need attention (if applicable)
+
+---
+
+# ⚠️ FINAL REMINDER ⚠️
+
+**Reviewing without updating is INCOMPLETE and UNACCEPTABLE.**
+
+**You MUST modify the code files directly with your improvements.**
+**You MUST show evidence of code changes in your summary.**
+**This step is only complete when code has been updated.**`,
+};

apps/ui/src/components/views/board-view/dialogs/pipeline-step-templates/documentation.ts

@@ -0,0 +1,77 @@
+export const documentationTemplate = {
+  id: 'documentation',
+  name: 'Documentation',
+  colorClass: 'bg-amber-500/20',
+  instructions: `## Documentation Step
+
+# ⚠️ CRITICAL REQUIREMENT: YOU MUST UPDATE THE CODE WITH DOCUMENTATION ⚠️
+
+**THIS IS NOT OPTIONAL. YOU MUST ADD/UPDATE DOCUMENTATION IN THE CODEBASE.**
+
+This step requires you to:
+1. **REVIEW** what needs documentation
+2. **UPDATE** the code by adding/updating documentation files and code comments
+
+**You cannot complete this step by only identifying what needs documentation. You MUST add the documentation directly to the codebase.**
+
+---
+
+### Phase 1: Review Phase
+Identify what documentation is needed:
+
+- Review new functions, classes, and modules
+- Identify new or modified API endpoints
+- Check for missing README updates
+- Identify changelog entries needed
+
+---
+
+### Phase 2: Update Phase - ⚠️ MANDATORY ACTION REQUIRED ⚠️
+
+**YOU MUST NOW ADD/UPDATE DOCUMENTATION IN THE CODEBASE.**
+
+**This is not optional. You must modify files to add documentation.**
+
+#### Action Steps (You MUST complete these):
+
+1. **Code Documentation** - UPDATE THE CODE FILES:
+   - ✅ Add/update JSDoc or docstrings for new functions and classes
+   - ✅ Document complex algorithms or business logic
+   - ✅ Add inline comments for non-obvious code
+   - ✅ **MODIFY THE SOURCE FILES DIRECTLY WITH DOCUMENTATION**
+
+2. **API Documentation** - UPDATE API DOCUMENTATION FILES:
+   - ✅ Document any new or modified API endpoints
+   - ✅ Include request/response examples
+   - ✅ Document error responses
+   - ✅ **UPDATE THE API DOCUMENTATION FILES DIRECTLY**
+
+3. **README Updates** - UPDATE THE README FILE:
+   - ✅ Update README if new setup steps are required
+   - ✅ Document any new environment variables
+   - ✅ Update architecture diagrams if applicable
+   - ✅ **MODIFY THE README FILE DIRECTLY**
+
+4. **Changelog** - UPDATE THE CHANGELOG FILE:
+   - ✅ Document notable changes for the changelog
+   - ✅ Include breaking changes if any
+   - ✅ **UPDATE THE CHANGELOG FILE DIRECTLY**
+
+---
+
+### Summary Required
+After completing BOTH review AND update phases, provide:
+- A summary of documentation needs identified
+- **A detailed list of ALL documentation files and code comments added/updated (this proves you updated the code)**
+- Specific files modified with documentation
+
+---
+
+# ⚠️ FINAL REMINDER ⚠️
+
+**Identifying documentation needs without adding documentation is INCOMPLETE and UNACCEPTABLE.**
+
+**You MUST modify the code files directly to add documentation.**
+**You MUST show evidence of documentation changes in your summary.**
+**This step is only complete when documentation has been added to the codebase.**`,
+};

apps/ui/src/components/views/board-view/dialogs/pipeline-step-templates/index.ts

@@ -0,0 +1,28 @@
+import { codeReviewTemplate } from './code-review';
+import { securityReviewTemplate } from './security-review';
+import { uxReviewTemplate } from './ux-review';
+import { testingTemplate } from './testing';
+import { documentationTemplate } from './documentation';
+import { optimizationTemplate } from './optimization';
+
+export interface PipelineStepTemplate {
+  id: string;
+  name: string;
+  colorClass: string;
+  instructions: string;
+}
+
+export const STEP_TEMPLATES: PipelineStepTemplate[] = [
+  codeReviewTemplate,
+  securityReviewTemplate,
+  uxReviewTemplate,
+  testingTemplate,
+  documentationTemplate,
+  optimizationTemplate,
+];
+
+// Helper to get template color class
+export const getTemplateColorClass = (templateId: string): string => {
+  const template = STEP_TEMPLATES.find((t) => t.id === templateId);
+  return template?.colorClass || 'bg-blue-500/20';
+};

apps/ui/src/components/views/board-view/dialogs/pipeline-step-templates/optimization.ts

@@ -0,0 +1,103 @@
+export const optimizationTemplate = {
+  id: 'optimization',
+  name: 'Performance',
+  colorClass: 'bg-cyan-500/20',
+  instructions: `## Performance Optimization Step
+
+# ⚠️ CRITICAL REQUIREMENT: YOU MUST UPDATE THE CODE WITH OPTIMIZATIONS ⚠️
+
+**THIS IS NOT OPTIONAL. AFTER IDENTIFYING OPTIMIZATION OPPORTUNITIES, YOU MUST UPDATE THE CODE.**
+
+This step has TWO mandatory phases:
+1. **REVIEW** the code for performance issues (identify bottlenecks)
+2. **UPDATE** the code with optimizations (fix the performance issues)
+
+**You cannot complete this step by only identifying performance issues. You MUST modify the code to optimize it.**
+
+---
+
+### Phase 1: Review Phase
+Identify performance bottlenecks and optimization opportunities:
+
+#### Code Performance
+- Identify slow algorithms (O(n²) → O(n log n), etc.)
+- Find unnecessary computations or redundant operations
+- Identify inefficient loops and iterations
+- Check for inappropriate data structures
+
+#### Memory Usage
+- Check for memory leaks
+- Identify memory-intensive operations
+- Check for proper cleanup of resources
+
+#### Database/API
+- Identify slow database queries (N+1 queries, missing indexes)
+- Find opportunities for caching
+- Identify API calls that could be batched
+
+#### Frontend (if applicable)
+- Identify bundle size issues
+- Find render performance problems
+- Identify opportunities for lazy loading
+- Find expensive computations that need memoization
+
+---
+
+### Phase 2: Update Phase - ⚠️ MANDATORY ACTION REQUIRED ⚠️
+
+**YOU MUST NOW MODIFY THE CODE TO APPLY OPTIMIZATIONS.**
+
+**This is not optional. Every performance issue you identify must be addressed with code changes.**
+
+#### Action Steps (You MUST complete these):
+
+1. **Optimize Code Performance** - UPDATE THE CODE:
+   - ✅ Optimize slow algorithms (O(n²) → O(n log n), etc.)
+   - ✅ Remove unnecessary computations or redundant operations
+   - ✅ Optimize loops and iterations
+   - ✅ Use appropriate data structures
+   - ✅ **MODIFY THE SOURCE FILES DIRECTLY WITH OPTIMIZATIONS**
+
+2. **Fix Memory Issues** - UPDATE THE CODE:
+   - ✅ Fix memory leaks
+   - ✅ Optimize memory-intensive operations
+   - ✅ Ensure proper cleanup of resources
+   - ✅ **MAKE THE ACTUAL CODE CHANGES**
+
+3. **Optimize Database/API** - UPDATE THE CODE:
+   - ✅ Optimize database queries (add indexes, reduce N+1 queries)
+   - ✅ Implement caching where appropriate
+   - ✅ Batch API calls when possible
+   - ✅ **MODIFY THE DATABASE/API CODE DIRECTLY**
+
+4. **Optimize Frontend** (if applicable) - UPDATE THE CODE:
+   - ✅ Minimize bundle size
+   - ✅ Optimize render performance
+   - ✅ Implement lazy loading where appropriate
+   - ✅ Use memoization for expensive computations
+   - ✅ **MODIFY THE FRONTEND CODE DIRECTLY**
+
+5. **Profile and Measure**:
+   - ✅ Profile the code to verify bottlenecks are fixed
+   - ✅ Measure improvements achieved
+   - ✅ **DOCUMENT THE PERFORMANCE IMPROVEMENTS**
+
+---
+
+### Summary Required
+After completing BOTH review AND update phases, provide:
+- A summary of performance issues identified
+- **A detailed list of ALL optimizations applied to the code (this proves you updated the code)**
+- Performance improvements achieved (with metrics if possible)
+- Any remaining optimization opportunities
+
+---
+
+# ⚠️ FINAL REMINDER ⚠️
+
+**Identifying performance issues without optimizing the code is INCOMPLETE and UNACCEPTABLE.**
+
+**You MUST modify the code files directly with optimizations.**
+**You MUST show evidence of optimization changes in your summary.**
+**This step is only complete when code has been optimized.**`,
+};

apps/ui/src/components/views/board-view/dialogs/pipeline-step-templates/security-review.ts

@@ -0,0 +1,114 @@
+export const securityReviewTemplate = {
+  id: 'security-review',
+  name: 'Security Review',
+  colorClass: 'bg-red-500/20',
+  instructions: `## Security Review & Update
+
+# ⚠️ CRITICAL REQUIREMENT: YOU MUST UPDATE THE CODE TO FIX SECURITY ISSUES ⚠️
+
+**THIS IS NOT OPTIONAL. AFTER REVIEWING FOR SECURITY ISSUES, YOU MUST FIX THEM IN THE CODE.**
+
+This step has TWO mandatory phases:
+1. **REVIEW** the code for security vulnerabilities (identify issues)
+2. **UPDATE** the code to fix vulnerabilities (secure the code)
+
+**You cannot complete this step by only identifying security issues. You MUST modify the code to fix them.**
+
+**Security vulnerabilities left unfixed are unacceptable. You must address them with code changes.**
+
+---
+
+### Phase 1: Review Phase
+Perform a comprehensive security audit of the changes made in this feature. Check for vulnerabilities in the following areas:
+
+#### Input Validation & Sanitization
+- Verify all user inputs are properly validated and sanitized
+- Check for SQL injection vulnerabilities
+- Check for XSS (Cross-Site Scripting) vulnerabilities
+- Ensure proper encoding of output data
+
+#### Authentication & Authorization
+- Verify authentication checks are in place where needed
+- Ensure authorization logic correctly restricts access
+- Check for privilege escalation vulnerabilities
+- Verify session management is secure
+
+#### Data Protection
+- Ensure sensitive data is not logged or exposed
+- Check that secrets/credentials are not hardcoded
+- Verify proper encryption is used for sensitive data
+- Check for secure transmission of data (HTTPS, etc.)
+
+#### Common Vulnerabilities (OWASP Top 10)
+- Injection flaws
+- Broken authentication
+- Sensitive data exposure
+- XML External Entities (XXE)
+- Broken access control
+- Security misconfiguration
+- Cross-Site Scripting (XSS)
+- Insecure deserialization
+- Using components with known vulnerabilities
+- Insufficient logging & monitoring
+
+---
+
+### Phase 2: Update Phase - ⚠️ MANDATORY ACTION REQUIRED ⚠️
+
+**YOU MUST NOW MODIFY THE CODE TO FIX ALL SECURITY VULNERABILITIES.**
+
+**This is not optional. Every security issue you identify must be fixed with code changes.**
+
+**Security vulnerabilities cannot be left unfixed. You must address them immediately.**
+
+#### Action Steps (You MUST complete these):
+
+1. **Fix Vulnerabilities Immediately** - UPDATE THE CODE:
+   - ✅ Add input validation and sanitization where missing
+   - ✅ Fix SQL injection vulnerabilities by using parameterized queries
+   - ✅ Fix XSS vulnerabilities by properly encoding output
+   - ✅ Add authentication/authorization checks where needed
+   - ✅ Remove hardcoded secrets and credentials
+   - ✅ Implement proper encryption for sensitive data
+   - ✅ Fix broken access control
+   - ✅ Add security headers and configurations
+   - ✅ Fix any other security vulnerabilities you find
+   - ✅ **MODIFY THE SOURCE FILES DIRECTLY TO FIX SECURITY ISSUES**
+
+2. **Apply Security Best Practices** - UPDATE THE CODE:
+   - ✅ Implement proper input validation on all user inputs
+   - ✅ Ensure all outputs are properly encoded
+   - ✅ Add authentication checks to protected routes/endpoints
+   - ✅ Implement proper authorization logic
+   - ✅ Remove or secure any exposed sensitive data
+   - ✅ Add security logging and monitoring
+   - ✅ Update dependencies with known vulnerabilities
+   - ✅ **MAKE THE ACTUAL CODE CHANGES - DO NOT JUST DOCUMENT THEM**
+
+3. **For Complex Security Issues** - UPDATE THE CODE:
+   - ✅ Fix what you can fix safely
+   - ✅ Document critical security issues with severity levels
+   - ✅ Provide specific remediation steps for complex issues
+   - ✅ Add security-related comments explaining protections in place
+   - ✅ **STILL MAKE AS MANY SECURITY FIXES AS POSSIBLE**
+
+---
+
+### Summary Required
+After completing BOTH review AND update phases, provide:
+- A security assessment summary of vulnerabilities found
+- **A detailed list of ALL security fixes applied to the code (this proves you updated the code)**
+- Any remaining security concerns that need attention (if applicable)
+- Severity levels for any unfixed issues
+
+---
+
+# ⚠️ FINAL REMINDER ⚠️
+
+**Reviewing security without fixing vulnerabilities is INCOMPLETE, UNACCEPTABLE, and DANGEROUS.**
+
+**You MUST modify the code files directly to fix security issues.**
+**You MUST show evidence of security fixes in your summary.**
+**This step is only complete when security vulnerabilities have been fixed in the code.**
+**Security issues cannot be left as documentation - they must be fixed.**`,
+};

apps/ui/src/components/views/board-view/dialogs/pipeline-step-templates/testing.ts

@@ -0,0 +1,81 @@
+export const testingTemplate = {
+  id: 'testing',
+  name: 'Testing',
+  colorClass: 'bg-green-500/20',
+  instructions: `## Testing Step
+
+# ⚠️ CRITICAL REQUIREMENT: YOU MUST UPDATE THE CODEBASE WITH TESTS ⚠️
+
+**THIS IS NOT OPTIONAL. YOU MUST WRITE AND ADD TESTS TO THE CODEBASE.**
+
+This step requires you to:
+1. **REVIEW** what needs testing
+2. **UPDATE** the codebase by writing and adding test files
+
+**You cannot complete this step by only identifying what needs testing. You MUST create test files and write tests.**
+
+---
+
+### Phase 1: Review Phase
+Identify what needs test coverage:
+
+- Review new functions, methods, and classes
+- Identify new API endpoints
+- Check for edge cases that need testing
+- Identify integration points that need testing
+
+---
+
+### Phase 2: Update Phase - ⚠️ MANDATORY ACTION REQUIRED ⚠️
+
+**YOU MUST NOW WRITE AND ADD TESTS TO THE CODEBASE.**
+
+**This is not optional. You must create test files and write actual test code.**
+
+#### Action Steps (You MUST complete these):
+
+1. **Write Unit Tests** - CREATE TEST FILES:
+   - ✅ Write unit tests for all new functions and methods
+   - ✅ Ensure edge cases are covered
+   - ✅ Test error handling paths
+   - ✅ Aim for high code coverage on new code
+   - ✅ **CREATE TEST FILES AND WRITE THE ACTUAL TEST CODE**
+
+2. **Write Integration Tests** - CREATE TEST FILES:
+   - ✅ Test interactions between components/modules
+   - ✅ Verify API endpoints work correctly
+   - ✅ Test database operations if applicable
+   - ✅ **CREATE INTEGRATION TEST FILES AND WRITE THE ACTUAL TEST CODE**
+
+3. **Ensure Test Quality** - WRITE QUALITY TESTS:
+   - ✅ Tests should be readable and well-documented
+   - ✅ Each test should have a clear purpose
+   - ✅ Use descriptive test names that explain the scenario
+   - ✅ Follow the Arrange-Act-Assert pattern
+   - ✅ **WRITE COMPLETE, FUNCTIONAL TESTS**
+
+4. **Run Tests** - VERIFY TESTS WORK:
+   - ✅ Run the full test suite and ensure all new tests pass
+   - ✅ Verify no existing tests are broken
+   - ✅ Check that test coverage meets project standards
+   - ✅ **FIX ANY FAILING TESTS**
+
+---
+
+### Summary Required
+After completing BOTH review AND update phases, provide:
+- A summary of testing needs identified
+- **A detailed list of ALL test files created and tests written (this proves you updated the codebase)**
+- Test coverage metrics achieved
+- Any issues found during testing and how they were resolved
+
+---
+
+# ⚠️ FINAL REMINDER ⚠️
+
+**Identifying what needs testing without writing tests is INCOMPLETE and UNACCEPTABLE.**
+
+**You MUST create test files and write actual test code.**
+**You MUST show evidence of test files created in your summary.**
+**This step is only complete when tests have been written and added to the codebase.**`,
+};

apps/ui/src/components/views/board-view/dialogs/pipeline-step-templates/ux-review.ts

@@ -0,0 +1,116 @@
+export const uxReviewTemplate = {
+  id: 'ux-reviewer',
+  name: 'User Experience',
+  colorClass: 'bg-purple-500/20',
+  instructions: `## User Experience Review & Update
+
+# ⚠️ CRITICAL REQUIREMENT: YOU MUST UPDATE THE CODE TO IMPROVE UX ⚠️
+
+**THIS IS NOT OPTIONAL. AFTER REVIEWING THE USER EXPERIENCE, YOU MUST UPDATE THE CODE.**
+
+This step has TWO mandatory phases:
+1. **REVIEW** the user experience (identify UX issues)
+2. **UPDATE** the code to improve UX (fix the issues you found)
+
+**You cannot complete this step by only reviewing UX. You MUST modify the code to improve the user experience.**
+
+---
+
+### Phase 1: Review Phase
+Review the changes made in this feature from a user experience and design perspective. Focus on creating an exceptional user experience.
+
+#### User-Centered Design
+- **User Goals**: Does this feature solve a real user problem?
+- **Clarity**: Is the interface clear and easy to understand?
+- **Simplicity**: Can the feature be simplified without losing functionality?
+- **Consistency**: Does it follow existing design patterns and conventions?
+
+#### Visual Design & Hierarchy
+- **Layout**: Is the visual hierarchy clear? Does important information stand out?
+- **Spacing**: Is there appropriate whitespace and grouping?
+- **Typography**: Is text readable with proper sizing and contrast?
+- **Color**: Does color usage support functionality and meet accessibility standards?
+
+#### Accessibility (WCAG 2.1)
+- **Keyboard Navigation**: Can all functionality be accessed via keyboard?
+- **Screen Readers**: Are ARIA labels and semantic HTML used appropriately?
+- **Color Contrast**: Does text meet WCAG AA standards (4.5:1 for body, 3:1 for large)?
+- **Focus Indicators**: Are focus states visible and clear?
+- **Touch Targets**: Are interactive elements at least 44x44px on mobile?
+
+#### Responsive Design
+- **Mobile Experience**: Does it work well on small screens?
+- **Touch Targets**: Are buttons and links easy to tap?
+- **Content Adaptation**: Does content adapt appropriately to different screen sizes?
+- **Navigation**: Is navigation accessible and intuitive on mobile?
+
+#### User Feedback & States
+- **Loading States**: Are loading indicators shown for async operations?
+- **Error States**: Are error messages clear and actionable?
+- **Empty States**: Do empty states guide users on what to do next?
+- **Success States**: Are successful actions clearly confirmed?
+
+#### Performance & Perceived Performance
+- **Loading Speed**: Does the feature load quickly?
+- **Skeleton Screens**: Are skeleton screens used for better perceived performance?
+- **Optimistic Updates**: Can optimistic UI updates improve perceived speed?
+- **Micro-interactions**: Do animations and transitions enhance the experience?
+
+---
+
+### Phase 2: Update Phase - ⚠️ MANDATORY ACTION REQUIRED ⚠️
+
+**YOU MUST NOW MODIFY THE CODE TO IMPROVE THE USER EXPERIENCE.**
+
+**This is not optional. Every UX issue you identify must be addressed with code changes.**
+
+#### Action Steps (You MUST complete these):
+
+1. **Fix UX Issues Immediately** - UPDATE THE CODE:
+   - ✅ Improve visual hierarchy and layout
+   - ✅ Fix spacing and typography issues
+   - ✅ Add missing ARIA labels and semantic HTML
+   - ✅ Fix color contrast issues
+   - ✅ Add or improve focus indicators
+   - ✅ Ensure touch targets meet size requirements
+   - ✅ Add missing loading, error, empty, and success states
+   - ✅ Improve responsive design for mobile
+   - ✅ Add keyboard navigation support
+   - ✅ Fix any accessibility issues
+   - ✅ **MODIFY THE UI COMPONENT FILES DIRECTLY WITH UX IMPROVEMENTS**
+
+2. **Apply UX Improvements** - UPDATE THE CODE:
+   - ✅ Refactor components for better clarity and simplicity
+   - ✅ Improve visual design and spacing
+   - ✅ Enhance accessibility features
+   - ✅ Add user feedback mechanisms (loading, error, success states)
+   - ✅ Optimize for mobile and responsive design
+   - ✅ Improve micro-interactions and animations
+   - ✅ Ensure consistency with design system
+   - ✅ **MAKE THE ACTUAL CODE CHANGES - DO NOT JUST DOCUMENT THEM**
+
+3. **For Complex UX Issues** - UPDATE THE CODE:
+   - ✅ Make the improvements you can make safely
+   - ✅ Document UX considerations and recommendations
+   - ✅ Provide specific suggestions for major UX improvements
+   - ✅ **STILL MAKE AS MANY UX IMPROVEMENTS AS POSSIBLE**
+
+---
+
+### Summary Required
+After completing BOTH review AND update phases, provide:
+- A summary of UX issues found during review
+- **A detailed list of ALL UX improvements made to the code (this proves you updated the code)**
+- Any remaining UX considerations that need attention (if applicable)
+- Recommendations for future UX enhancements
+
+---
+
+# ⚠️ FINAL REMINDER ⚠️
+
+**Reviewing UX without updating the code is INCOMPLETE and UNACCEPTABLE.**
+
+**You MUST modify the UI component files directly with UX improvements.**
+**You MUST show evidence of UX code changes in your summary.**
+**This step is only complete when code has been updated to improve the user experience.**`,
+};

apps/ui/src/components/views/board-view/hooks/index.ts

@@ -8,3 +8,4 @@ export { useBoardBackground } from './use-board-background';
 export { useBoardPersistence } from './use-board-persistence';
 export { useFollowUpState } from './use-follow-up-state';
 export { useSelectionMode } from './use-selection-mode';
+export { useBoardOnboarding } from './use-board-onboarding';

apps/ui/src/components/views/board-view/hooks/use-board-actions.ts

@@ -30,7 +30,7 @@ interface UseBoardActionsProps {
     featureId: string,
     updates: Partial<Feature>,
     descriptionHistorySource?: 'enhance' | 'edit',
-    enhancementMode?: 'improve' | 'technical' | 'simplify' | 'acceptance'
+    enhancementMode?: 'improve' | 'technical' | 'simplify' | 'acceptance' | 'ux-reviewer'
   ) => Promise<void>;
   persistFeatureDelete: (featureId: string) => Promise<void>;
   saveCategory: (category: string) => Promise<void>;
@@ -251,7 +251,7 @@ export function useBoardActions({
         workMode?: 'current' | 'auto' | 'custom';
       },
       descriptionHistorySource?: 'enhance' | 'edit',
-      enhancementMode?: 'improve' | 'technical' | 'simplify' | 'acceptance'
+      enhancementMode?: 'improve' | 'technical' | 'simplify' | 'acceptance' | 'ux-reviewer'
     ) => {
       const workMode = updates.workMode || 'current';
 

apps/ui/src/components/views/board-view/hooks/use-board-column-features.ts

@@ -70,9 +70,21 @@ export function useBoardColumnFeatures({
         // We're viewing main but branch hasn't been initialized yet
         // (worktrees disabled or haven't loaded yet).
         // Show features assigned to primary worktree's branch.
-        matchesWorktree = projectPath
-          ? useAppStore.getState().isPrimaryWorktreeBranch(projectPath, featureBranch)
-          : false;
+        if (projectPath) {
+          const worktrees = useAppStore.getState().worktreesByProject[projectPath] ?? [];
+          if (worktrees.length === 0) {
+            // Worktrees not loaded yet - fallback to showing features on common default branches
+            // This prevents features from disappearing during initial load
+            matchesWorktree =
+              featureBranch === 'main' || featureBranch === 'master' || featureBranch === 'develop';
+          } else {
+            matchesWorktree = useAppStore
+              .getState()
+              .isPrimaryWorktreeBranch(projectPath, featureBranch);
+          }
+        } else {
+          matchesWorktree = false;
+        }
       } else {
         // Match by branch name
         matchesWorktree = featureBranch === effectiveBranch;

apps/ui/src/components/views/board-view/hooks/use-board-features.ts

@@ -75,6 +75,17 @@ export function useBoardFeatures({ currentProject }: UseBoardFeaturesProps) {
         if (isProjectSwitch) {
           setPersistedCategories([]);
         }
+
+        // Check for interrupted features and resume them
+        // This handles server restarts where features were in pipeline steps
+        if (api.autoMode?.resumeInterrupted) {
+          try {
+            await api.autoMode.resumeInterrupted(currentProject.path);
+            logger.info('Checked for interrupted features');
+          } catch (resumeError) {
+            logger.warn('Failed to check for interrupted features:', resumeError);
+          }
+        }
       } else if (!result.success && result.error) {
         logger.error('API returned error:', result.error);
         // If it's a new project or the error indicates no features found,

apps/ui/src/components/views/board-view/hooks/use-board-onboarding.ts

@@ -0,0 +1,275 @@
+/**
+ * Board Onboarding Hook
+ *
+ * Board-specific wrapper around the shared onboarding wizard hook.
+ * Manages board-specific features like sample data (Quick Start).
+ *
+ * Usage:
+ * - Wizard is triggered manually via startWizard() when user clicks help button
+ * - No auto-show logic - user controls when to see the wizard
+ */
+
+import { useState, useCallback, useEffect } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import { getItem, setItem } from '@/lib/storage';
+import {
+  useOnboardingWizard,
+  ONBOARDING_TARGET_ATTRIBUTE,
+  type OnboardingStep,
+} from '@/components/shared/onboarding';
+import { PlayCircle, Sparkles, Lightbulb, CheckCircle2, Settings2 } from 'lucide-react';
+
+const logger = createLogger('BoardOnboarding');
+
+// ============================================================================
+// CONSTANTS
+// ============================================================================
+
+/** Storage key prefix for board-specific onboarding data */
+const BOARD_ONBOARDING_STORAGE_KEY = 'automaker:board-onboarding-data';
+
+/** Maximum length for project path hash in storage key */
+const PROJECT_PATH_HASH_MAX_LENGTH = 50;
+
+// Board-specific analytics events
+export const BOARD_ONBOARDING_ANALYTICS = {
+  QUICK_START_USED: 'board_onboarding_quick_start_used',
+  SAMPLE_DATA_CLEARED: 'board_onboarding_sample_data_cleared',
+} as const;
+
+// ============================================================================
+// WIZARD STEPS
+// ============================================================================
+
+/**
+ * Board wizard step definitions
+ * Each step targets a kanban column via data-onboarding-target
+ */
+export const BOARD_WIZARD_STEPS: OnboardingStep[] = [
+  {
+    id: 'backlog',
+    targetId: 'backlog',
+    title: 'Backlog',
+    description:
+      'This is where all your planned tasks live. Add new features, bug fixes, or improvements here. When you\'re ready to work on something, drag it to "In Progress" or click the play button.',
+    tip: 'Press N or click the + button to quickly add a new feature.',
+    icon: PlayCircle,
+  },
+  {
+    id: 'in_progress',
+    targetId: 'in_progress',
+    title: 'In Progress',
+    description:
+      'Tasks being actively worked on appear here. AI agents automatically pick up items from the backlog and move them here when processing begins.',
+    tip: 'You can run multiple tasks simultaneously using Auto Mode.',
+    icon: Sparkles,
+  },
+  {
+    id: 'waiting_approval',
+    targetId: 'waiting_approval',
+    title: 'Waiting Approval',
+    description:
+      'Completed work lands here for your review. Check the changes, run tests, and approve or send back for revisions.',
+    tip: 'Click "View Output" to see what the AI agent did.',
+    icon: Lightbulb,
+  },
+  {
+    id: 'verified',
+    targetId: 'verified',
+    title: 'Verified',
+    description:
+      "Approved and verified tasks are ready for deployment! Archive them when you're done or move them back if changes are needed.",
+    tip: 'Click "Complete All" to archive all verified items at once.',
+    icon: CheckCircle2,
+  },
+  {
+    id: 'custom_columns',
+    targetId: 'pipeline-settings', // Highlight the pipeline settings button icon
+    title: 'Custom Pipelines',
+    description:
+      'You can create custom columns (called pipelines) to build your own workflow! Click this settings icon to add, rename, or configure pipeline steps.',
+    tip: 'Use pipelines to add code review, QA testing, or any custom stage to your workflow.',
+    icon: Settings2,
+  },
+];
+
+// Re-export for backward compatibility
+export type { OnboardingStep as WizardStep } from '@/components/shared/onboarding';
+export { ONBOARDING_TARGET_ATTRIBUTE };
+
+// ============================================================================
+// BOARD-SPECIFIC STATE
+// ============================================================================
+
+interface BoardOnboardingData {
+  hasSampleData: boolean;
+  quickStartUsed: boolean;
+}
+
+const DEFAULT_BOARD_DATA: BoardOnboardingData = {
+  hasSampleData: false,
+  quickStartUsed: false,
+};
+
+/**
+ * Sanitize project path to create a storage key
+ */
+function sanitizeProjectPath(projectPath: string): string {
+  return projectPath.replace(/[^a-zA-Z0-9]/g, '_').slice(0, PROJECT_PATH_HASH_MAX_LENGTH);
+}
+
+/**
+ * Get storage key for board-specific data
+ */
+function getBoardDataStorageKey(projectPath: string): string {
+  const hash = sanitizeProjectPath(projectPath);
+  return `${BOARD_ONBOARDING_STORAGE_KEY}:${hash}`;
+}
+
+/**
+ * Load board-specific onboarding data from localStorage
+ */
+function loadBoardData(projectPath: string): BoardOnboardingData {
+  try {
+    const key = getBoardDataStorageKey(projectPath);
+    const stored = getItem(key);
+    if (stored) {
+      return JSON.parse(stored) as BoardOnboardingData;
+    }
+  } catch (error) {
+    logger.error('Failed to load board onboarding data:', error);
+  }
+  return { ...DEFAULT_BOARD_DATA };
+}
+
+/**
+ * Save board-specific onboarding data to localStorage
+ */
+function saveBoardData(projectPath: string, data: BoardOnboardingData): void {
+  try {
+    const key = getBoardDataStorageKey(projectPath);
+    setItem(key, JSON.stringify(data));
+  } catch (error) {
+    logger.error('Failed to save board onboarding data:', error);
+  }
+}
+
+/**
+ * Track analytics event (placeholder)
+ */
+function trackAnalytics(event: string, data?: Record<string, unknown>): void {
+  logger.debug(`[Analytics] ${event}`, data);
+}
+
+// ============================================================================
+// HOOK
+// ============================================================================
+
+export interface UseBoardOnboardingOptions {
+  projectPath: string | null;
+}
+
+export interface UseBoardOnboardingResult {
+  // From shared wizard hook
+  isWizardVisible: boolean;
+  currentStep: number;
+  currentStepData: OnboardingStep | null;
+  totalSteps: number;
+  goToNextStep: () => void;
+  goToPreviousStep: () => void;
+  goToStep: (step: number) => void;
+  startWizard: () => void;
+  completeWizard: () => void;
+  skipWizard: () => void;
+  isCompleted: boolean;
+  isSkipped: boolean;
+
+  // Board-specific
+  hasSampleData: boolean;
+  setHasSampleData: (has: boolean) => void;
+  markQuickStartUsed: () => void;
+
+  // Steps data for component
+  steps: OnboardingStep[];
+}
+
+export function useBoardOnboarding({
+  projectPath,
+}: UseBoardOnboardingOptions): UseBoardOnboardingResult {
+  // Board-specific state for sample data
+  const [boardData, setBoardData] = useState<BoardOnboardingData>(DEFAULT_BOARD_DATA);
+
+  // Create storage key from project path
+  const storageKey = projectPath ? `board:${sanitizeProjectPath(projectPath)}` : 'board:default';
+
+  // Use the shared onboarding wizard hook
+  const wizard = useOnboardingWizard({
+    storageKey,
+    steps: BOARD_WIZARD_STEPS,
+  });
+
+  // Load board-specific data when project changes
+  useEffect(() => {
+    if (!projectPath) {
+      setBoardData(DEFAULT_BOARD_DATA);
+      return;
+    }
+
+    const data = loadBoardData(projectPath);
+    setBoardData(data);
+  }, [projectPath]);
+
+  // Update board data helper
+  const updateBoardData = useCallback(
+    (updates: Partial<BoardOnboardingData>) => {
+      if (!projectPath) return;
+
+      setBoardData((prev) => {
+        const newData = { ...prev, ...updates };
+        saveBoardData(projectPath, newData);
+        return newData;
+      });
+    },
+    [projectPath]
+  );
+
+  // Sample data handlers
+  const setHasSampleData = useCallback(
+    (has: boolean) => {
+      updateBoardData({ hasSampleData: has });
+      if (!has) {
+        trackAnalytics(BOARD_ONBOARDING_ANALYTICS.SAMPLE_DATA_CLEARED, { projectPath });
+      }
+    },
+    [projectPath, updateBoardData]
+  );
+
+  const markQuickStartUsed = useCallback(() => {
+    updateBoardData({ quickStartUsed: true, hasSampleData: true });
+    trackAnalytics(BOARD_ONBOARDING_ANALYTICS.QUICK_START_USED, { projectPath });
+  }, [projectPath, updateBoardData]);
+
+  return {
+    // Spread shared wizard state and actions
+    isWizardVisible: wizard.isVisible,
+    currentStep: wizard.currentStep,
+    currentStepData: wizard.currentStepData,
+    totalSteps: wizard.totalSteps,
+    goToNextStep: wizard.goToNextStep,
+    goToPreviousStep: wizard.goToPreviousStep,
+    goToStep: wizard.goToStep,
+    startWizard: wizard.startWizard,
+    completeWizard: wizard.completeWizard,
+    skipWizard: wizard.skipWizard,
+    isCompleted: wizard.isCompleted,
+    isSkipped: wizard.isSkipped,
+
+    // Board-specific
+    hasSampleData: boardData.hasSampleData,
+    setHasSampleData,
+    markQuickStartUsed,
+
+    // Steps data
+    steps: BOARD_WIZARD_STEPS,
+  };
+}

apps/ui/src/components/views/board-view/hooks/use-board-persistence.ts

@@ -19,7 +19,7 @@ export function useBoardPersistence({ currentProject }: UseBoardPersistenceProps
       featureId: string,
       updates: Partial<Feature>,
       descriptionHistorySource?: 'enhance' | 'edit',
-      enhancementMode?: 'improve' | 'technical' | 'simplify' | 'acceptance'
+      enhancementMode?: 'improve' | 'technical' | 'simplify' | 'acceptance' | 'ux-reviewer'
     ) => {
       if (!currentProject) return;
 

apps/ui/src/components/views/board-view/kanban-board.tsx

@@ -3,8 +3,8 @@ import { DndContext, DragOverlay } from '@dnd-kit/core';
 import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { Button } from '@/components/ui/button';
 import { KanbanColumn, KanbanCard } from './components';
-import { Feature } from '@/store/app-store';
-import { Archive, Settings2, CheckSquare, GripVertical } from 'lucide-react';
+import { Feature, useAppStore, formatShortcut } from '@/store/app-store';
+import { Archive, Settings2, CheckSquare, GripVertical, Plus } from 'lucide-react';
 import { useResponsiveKanban } from '@/hooks/use-responsive-kanban';
 import { getColumnsWithPipeline, type ColumnId } from './constants';
 import type { PipelineConfig } from '@automaker/types';
@@ -43,6 +43,7 @@ interface KanbanBoardProps {
   featuresWithContext: Set<string>;
   runningAutoTasks: string[];
   onArchiveAllVerified: () => void;
+  onAddFeature: () => void;
   pipelineConfig: PipelineConfig | null;
   onOpenPipelineSettings?: () => void;
   // Selection mode props
@@ -78,6 +79,7 @@ export function KanbanBoard({
   featuresWithContext,
   runningAutoTasks,
   onArchiveAllVerified,
+  onAddFeature,
   pipelineConfig,
   onOpenPipelineSettings,
   isSelectionMode = false,
@@ -88,12 +90,16 @@ export function KanbanBoard({
   // Generate columns including pipeline steps
   const columns = useMemo(() => getColumnsWithPipeline(pipelineConfig), [pipelineConfig]);
 
+  // Get the keyboard shortcut for adding features
+  const { keyboardShortcuts } = useAppStore();
+  const addFeatureShortcut = keyboardShortcuts.addFeature || 'N';
+
   // Use responsive column widths based on window size
   // containerStyle handles centering and ensures columns fit without horizontal scroll in Electron
   const { columnWidth, containerStyle } = useResponsiveKanban(columns.length);
 
   return (
-    <div className="flex-1 overflow-x-auto px-5 pb-4 relative" style={backgroundImageStyle}>
+    <div className="flex-1 overflow-x-auto px-5 pt-4 pb-4 relative" style={backgroundImageStyle}>
       <DndContext
         sensors={sensors}
         collisionDetection={collisionDetectionStrategy}
@@ -127,26 +133,38 @@ export function KanbanBoard({
                       Complete All
                     </Button>
                   ) : column.id === 'backlog' ? (
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className={`h-6 px-2 text-xs ${isSelectionMode ? 'text-primary bg-primary/10' : 'text-muted-foreground hover:text-foreground'}`}
-                      onClick={onToggleSelectionMode}
-                      title={isSelectionMode ? 'Switch to Drag Mode' : 'Select Multiple'}
-                      data-testid="selection-mode-button"
-                    >
-                      {isSelectionMode ? (
-                        <>
-                          <GripVertical className="w-3.5 h-3.5 mr-1" />
-                          Drag
-                        </>
-                      ) : (
-                        <>
-                          <CheckSquare className="w-3.5 h-3.5 mr-1" />
-                          Select
-                        </>
-                      )}
-                    </Button>
+                    <div className="flex items-center gap-1">
+                      <Button
+                        variant="default"
+                        size="sm"
+                        className="h-6 w-6 p-0"
+                        onClick={onAddFeature}
+                        title="Add Feature"
+                        data-testid="add-feature-button"
+                      >
+                        <Plus className="w-3.5 h-3.5" />
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className={`h-6 px-2 text-xs ${isSelectionMode ? 'text-primary bg-primary/10' : 'text-muted-foreground hover:text-foreground'}`}
+                        onClick={onToggleSelectionMode}
+                        title={isSelectionMode ? 'Switch to Drag Mode' : 'Select Multiple'}
+                        data-testid="selection-mode-button"
+                      >
+                        {isSelectionMode ? (
+                          <>
+                            <GripVertical className="w-3.5 h-3.5 mr-1" />
+                            Drag
+                          </>
+                        ) : (
+                          <>
+                            <CheckSquare className="w-3.5 h-3.5 mr-1" />
+                            Select
+                          </>
+                        )}
+                      </Button>
+                    </div>
                   ) : column.id === 'in_progress' ? (
                     <Button
                       variant="ghost"
@@ -155,6 +173,7 @@ export function KanbanBoard({
                       onClick={onOpenPipelineSettings}
                       title="Pipeline Settings"
                       data-testid="pipeline-settings-button"
+                      data-onboarding-target="pipeline-settings"
                     >
                       <Settings2 className="w-3.5 h-3.5" />
                     </Button>
@@ -171,6 +190,23 @@ export function KanbanBoard({
                     </Button>
                   ) : undefined
                 }
+                footerAction={
+                  column.id === 'backlog' ? (
+                    <Button
+                      variant="default"
+                      size="sm"
+                      className="w-full h-9 text-sm"
+                      onClick={onAddFeature}
+                      data-testid="add-feature-floating-button"
+                    >
+                      <Plus className="w-4 h-4 mr-2" />
+                      Add Feature
+                      <span className="ml-auto pl-2 text-[10px] font-mono opacity-70 bg-black/20 px-1.5 py-0.5 rounded">
+                        {formatShortcut(addFeatureShortcut, true)}
+                      </span>
+                    </Button>
+                  ) : undefined
+                }
               >
                 <SortableContext
                   items={columnFeatures.map((f) => f.id)}

apps/ui/src/components/views/board-view/shared/index.ts

@@ -2,9 +2,6 @@ export * from './model-constants';
 export * from './model-selector';
 export * from './thinking-level-selector';
 export * from './reasoning-effort-selector';
-export * from './profile-quick-select';
-export * from './profile-select';
-export * from './profile-typeahead';
 export * from './testing-tab-content';
 export * from './priority-selector';
 export * from './priority-select';

apps/ui/src/components/views/board-view/shared/model-constants.ts

@@ -110,7 +110,7 @@ export const OPENCODE_MODELS: ModelOption[] = OPENCODE_MODEL_CONFIGS.map((config
   label: config.label,
   description: config.description,
   badge: config.tier === 'free' ? 'Free' : config.tier === 'premium' ? 'Premium' : undefined,
-  provider: 'opencode' as ModelProvider,
+  provider: config.provider as ModelProvider,
 }));
 
 /**

apps/ui/src/components/views/board-view/shared/model-selector.tsx

@@ -9,7 +9,9 @@ import { useAppStore } from '@/store/app-store';
 import { useSetupStore } from '@/store/setup-store';
 import { getModelProvider, PROVIDER_PREFIXES, stripProviderPrefix } from '@automaker/types';
 import type { ModelProvider } from '@automaker/types';
-import { CLAUDE_MODELS, CURSOR_MODELS, CODEX_MODELS, ModelOption } from './model-constants';
+import { CLAUDE_MODELS, CURSOR_MODELS, ModelOption } from './model-constants';
+import { useEffect } from 'react';
+import { RefreshCw } from 'lucide-react';
 
 interface ModelSelectorProps {
   selectedModel: string; // Can be ModelAlias or "cursor-{id}"
@@ -22,7 +24,14 @@ export function ModelSelector({
   onModelSelect,
   testIdPrefix = 'model-select',
 }: ModelSelectorProps) {
-  const { enabledCursorModels, cursorDefaultModel } = useAppStore();
+  const {
+    enabledCursorModels,
+    cursorDefaultModel,
+    codexModels,
+    codexModelsLoading,
+    codexModelsError,
+    fetchCodexModels,
+  } = useAppStore();
   const { cursorCliStatus, codexCliStatus } = useSetupStore();
 
   const selectedProvider = getModelProvider(selectedModel);
@@ -33,6 +42,31 @@ export function ModelSelector({
   // Check if Codex CLI is available
   const isCodexAvailable = codexCliStatus?.installed && codexCliStatus?.auth?.authenticated;
 
+  // Fetch Codex models on mount
+  useEffect(() => {
+    if (isCodexAvailable && codexModels.length === 0 && !codexModelsLoading) {
+      fetchCodexModels();
+    }
+  }, [isCodexAvailable, codexModels.length, codexModelsLoading, fetchCodexModels]);
+
+  // Transform codex models from store to ModelOption format
+  const dynamicCodexModels: ModelOption[] = codexModels.map((model) => {
+    // Infer badge based on tier
+    let badge: string | undefined;
+    if (model.tier === 'premium') badge = 'Premium';
+    else if (model.tier === 'basic') badge = 'Speed';
+    else if (model.tier === 'standard') badge = 'Balanced';
+
+    return {
+      id: model.id,
+      label: model.label,
+      description: model.description,
+      badge,
+      provider: 'codex' as ModelProvider,
+      hasThinking: model.hasThinking,
+    };
+  });
+
   // Filter Cursor models based on enabled models from global settings
   const filteredCursorModels = CURSOR_MODELS.filter((model) => {
     // Extract the cursor model ID from the prefixed ID (e.g., "cursor-auto" -> "auto")
@@ -45,8 +79,10 @@ export function ModelSelector({
       // Switch to Cursor's default model (from global settings)
       onModelSelect(`${PROVIDER_PREFIXES.cursor}${cursorDefaultModel}`);
     } else if (provider === 'codex' && selectedProvider !== 'codex') {
-      // Switch to Codex's default model (codex-gpt-5.2-codex)
-      onModelSelect('codex-gpt-5.2-codex');
+      // Switch to Codex's default model (use isDefault flag from dynamic models)
+      const defaultModel = codexModels.find((m) => m.isDefault);
+      const defaultModelId = defaultModel?.id || codexModels[0]?.id || 'codex-gpt-5.2-codex';
+      onModelSelect(defaultModelId);
     } else if (provider === 'claude' && selectedProvider !== 'claude') {
       // Switch to Claude's default model
       onModelSelect('sonnet');
@@ -234,41 +270,91 @@ export function ModelSelector({
               CLI
             </span>
           </div>
-          <div className="flex flex-col gap-2">
-            {CODEX_MODELS.map((option) => {
-              const isSelected = selectedModel === option.id;
-              return (
+
+          {/* Loading state */}
+          {codexModelsLoading && dynamicCodexModels.length === 0 && (
+            <div className="flex items-center justify-center gap-2 p-6 text-sm text-muted-foreground">
+              <RefreshCw className="w-4 h-4 animate-spin" />
+              Loading models...
+            </div>
+          )}
+
+          {/* Error state */}
+          {codexModelsError && !codexModelsLoading && (
+            <div className="flex items-start gap-2 p-3 rounded-lg bg-red-500/10 border border-red-500/20">
+              <AlertTriangle className="w-4 h-4 text-red-400 mt-0.5 shrink-0" />
+              <div className="space-y-1">
+                <div className="text-sm text-red-400">Failed to load Codex models</div>
                 <button
-                  key={option.id}
                   type="button"
-                  onClick={() => onModelSelect(option.id)}
-                  title={option.description}
-                  className={cn(
-                    'w-full px-3 py-2 rounded-md border text-sm font-medium transition-colors flex items-center justify-between',
-                    isSelected
-                      ? 'bg-primary text-primary-foreground border-primary'
-                      : 'bg-background hover:bg-accent border-border'
-                  )}
-                  data-testid={`${testIdPrefix}-${option.id}`}
+                  onClick={() => fetchCodexModels(true)}
+                  className="text-xs text-red-400 underline hover:no-underline"
                 >
-                  <span>{option.label}</span>
-                  {option.badge && (
-                    <Badge
-                      variant="outline"
-                      className={cn(
-                        'text-xs',
-                        isSelected
-                          ? 'border-primary-foreground/50 text-primary-foreground'
-                          : 'border-muted-foreground/50 text-muted-foreground'
-                      )}
-                    >
-                      {option.badge}
-                    </Badge>
-                  )}
+                  Retry
                 </button>
-              );
-            })}
-          </div>
+              </div>
+            </div>
+          )}
+
+          {/* Model list */}
+          {!codexModelsLoading && !codexModelsError && dynamicCodexModels.length === 0 && (
+            <div className="text-sm text-muted-foreground p-3 border border-dashed rounded-md text-center">
+              No Codex models available
+            </div>
+          )}
+
+          {!codexModelsLoading && dynamicCodexModels.length > 0 && (
+            <div className="flex flex-col gap-2">
+              {dynamicCodexModels.map((option) => {
+                const isSelected = selectedModel === option.id;
+                return (
+                  <button
+                    key={option.id}
+                    type="button"
+                    onClick={() => onModelSelect(option.id)}
+                    title={option.description}
+                    className={cn(
+                      'w-full px-3 py-2 rounded-md border text-sm font-medium transition-colors flex items-center justify-between',
+                      isSelected
+                        ? 'bg-primary text-primary-foreground border-primary'
+                        : 'bg-background hover:bg-accent border-border'
+                    )}
+                    data-testid={`${testIdPrefix}-${option.id}`}
+                  >
+                    <span>{option.label}</span>
+                    <div className="flex gap-1">
+                      {option.hasThinking && (
+                        <Badge
+                          variant="outline"
+                          className={cn(
+                            'text-xs',
+                            isSelected
+                              ? 'border-primary-foreground/50 text-primary-foreground'
+                              : 'border-emerald-500/50 text-emerald-600 dark:text-emerald-400'
+                          )}
+                        >
+                          Thinking
+                        </Badge>
+                      )}
+                      {option.badge && (
+                        <Badge
+                          variant="outline"
+                          className={cn(
+                            'text-xs',
+                            isSelected
+                              ? 'border-primary-foreground/50 text-primary-foreground'
+                              : 'border-muted-foreground/50 text-muted-foreground'
+                          )}
+                        >
+                          {option.badge}
+                        </Badge>
+                      )}
+                    </div>
+                  </button>
+                );
+              })}
+            </div>
+          )}
         </div>
       )}
     </div>

apps/ui/src/components/views/board-view/shared/profile-quick-select.tsx

@@ -1,155 +0,0 @@
-import { Label } from '@/components/ui/label';
-import { Brain, UserCircle, Terminal } from 'lucide-react';
-import { cn } from '@/lib/utils';
-import type { ModelAlias, ThinkingLevel, AIProfile, CursorModelId } from '@automaker/types';
-import {
-  CURSOR_MODEL_MAP,
-  profileHasThinking,
-  PROVIDER_PREFIXES,
-  getCodexModelLabel,
-} from '@automaker/types';
-import { PROFILE_ICONS } from './model-constants';
-
-/**
- * Get display string for a profile's model configuration
- */
-function getProfileModelDisplay(profile: AIProfile): string {
-  if (profile.provider === 'cursor') {
-    const cursorModel = profile.cursorModel || 'auto';
-    const modelConfig = CURSOR_MODEL_MAP[cursorModel];
-    return modelConfig?.label || cursorModel;
-  }
-  if (profile.provider === 'codex') {
-    return getCodexModelLabel(profile.codexModel || 'codex-gpt-5.2-codex');
-  }
-  // Claude
-  return profile.model || 'sonnet';
-}
-
-/**
- * Get display string for a profile's thinking configuration
- */
-function getProfileThinkingDisplay(profile: AIProfile): string | null {
-  if (profile.provider === 'cursor') {
-    // For Cursor, thinking is embedded in the model
-    return profileHasThinking(profile) ? 'thinking' : null;
-  }
-  if (profile.provider === 'codex') {
-    // For Codex, thinking is embedded in the model
-    return profileHasThinking(profile) ? 'thinking' : null;
-  }
-  // Claude
-  return profile.thinkingLevel && profile.thinkingLevel !== 'none' ? profile.thinkingLevel : null;
-}
-
-interface ProfileQuickSelectProps {
-  profiles: AIProfile[];
-  selectedModel: ModelAlias | CursorModelId;
-  selectedThinkingLevel: ThinkingLevel;
-  selectedCursorModel?: string; // For detecting cursor profile selection
-  onSelect: (profile: AIProfile) => void; // Changed to pass full profile
-  testIdPrefix?: string;
-  showManageLink?: boolean;
-  onManageLinkClick?: () => void;
-}
-
-export function ProfileQuickSelect({
-  profiles,
-  selectedModel,
-  selectedThinkingLevel,
-  selectedCursorModel,
-  onSelect,
-  testIdPrefix = 'profile-quick-select',
-  showManageLink = false,
-  onManageLinkClick,
-}: ProfileQuickSelectProps) {
-  // Show both Claude and Cursor profiles
-  const allProfiles = profiles;
-
-  if (allProfiles.length === 0) {
-    return null;
-  }
-
-  // Check if a profile is selected
-  const isProfileSelected = (profile: AIProfile): boolean => {
-    if (profile.provider === 'cursor') {
-      // For cursor profiles, check if cursor model matches
-      const profileCursorModel = `${PROVIDER_PREFIXES.cursor}${profile.cursorModel || 'auto'}`;
-      return selectedCursorModel === profileCursorModel;
-    }
-    // For Claude profiles
-    return selectedModel === profile.model && selectedThinkingLevel === profile.thinkingLevel;
-  };
-
-  return (
-    <div className="space-y-3">
-      <div className="flex items-center justify-between">
-        <Label className="flex items-center gap-2">
-          <UserCircle className="w-4 h-4 text-brand-500" />
-          Quick Select Profile
-        </Label>
-        <span className="text-[11px] px-2 py-0.5 rounded-full border border-brand-500/40 text-brand-500">
-          Presets
-        </span>
-      </div>
-      <div className="grid grid-cols-2 gap-2">
-        {allProfiles.slice(0, 6).map((profile) => {
-          const IconComponent = profile.icon ? PROFILE_ICONS[profile.icon] : Brain;
-          const isSelected = isProfileSelected(profile);
-          const isCursorProfile = profile.provider === 'cursor';
-
-          return (
-            <button
-              key={profile.id}
-              type="button"
-              onClick={() => onSelect(profile)}
-              className={cn(
-                'flex items-center gap-2 p-2 rounded-lg border text-left transition-all',
-                isSelected
-                  ? 'bg-brand-500/10 border-brand-500 text-foreground'
-                  : 'bg-background hover:bg-accent border-input'
-              )}
-              data-testid={`${testIdPrefix}-${profile.id}`}
-            >
-              <div
-                className={cn(
-                  'w-7 h-7 rounded flex items-center justify-center shrink-0',
-                  isCursorProfile ? 'bg-amber-500/10' : 'bg-primary/10'
-                )}
-              >
-                {isCursorProfile ? (
-                  <Terminal className="w-4 h-4 text-amber-500" />
-                ) : (
-                  IconComponent && <IconComponent className="w-4 h-4 text-primary" />
-                )}
-              </div>
-              <div className="min-w-0 flex-1">
-                <p className="text-sm font-medium truncate">{profile.name}</p>
-                <p className="text-[10px] text-muted-foreground truncate">
-                  {getProfileModelDisplay(profile)}
-                  {getProfileThinkingDisplay(profile) && ` + ${getProfileThinkingDisplay(profile)}`}
-                </p>
-              </div>
-            </button>
-          );
-        })}
-      </div>
-      <p className="text-xs text-muted-foreground">
-        Or customize below.
-        {showManageLink && onManageLinkClick && (
-          <>
-            {' '}
-            Manage profiles in{' '}
-            <button
-              type="button"
-              onClick={onManageLinkClick}
-              className="text-brand-500 hover:underline"
-            >
-              AI Profiles
-            </button>
-          </>
-        )}
-      </p>
-    </div>
-  );
-}

apps/ui/src/components/views/board-view/shared/profile-select.tsx

@@ -1,187 +0,0 @@
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import { Brain, Terminal } from 'lucide-react';
-import { cn } from '@/lib/utils';
-import type { ModelAlias, ThinkingLevel, AIProfile, CursorModelId } from '@automaker/types';
-import {
-  CURSOR_MODEL_MAP,
-  profileHasThinking,
-  PROVIDER_PREFIXES,
-  getCodexModelLabel,
-} from '@automaker/types';
-import { PROFILE_ICONS } from './model-constants';
-
-/**
- * Get display string for a profile's model configuration
- */
-function getProfileModelDisplay(profile: AIProfile): string {
-  if (profile.provider === 'cursor') {
-    const cursorModel = profile.cursorModel || 'auto';
-    const modelConfig = CURSOR_MODEL_MAP[cursorModel];
-    return modelConfig?.label || cursorModel;
-  }
-  if (profile.provider === 'codex') {
-    return getCodexModelLabel(profile.codexModel || 'codex-gpt-5.2-codex');
-  }
-  // Claude
-  return profile.model || 'sonnet';
-}
-
-/**
- * Get display string for a profile's thinking configuration
- */
-function getProfileThinkingDisplay(profile: AIProfile): string | null {
-  if (profile.provider === 'cursor') {
-    // For Cursor, thinking is embedded in the model
-    return profileHasThinking(profile) ? 'thinking' : null;
-  }
-  if (profile.provider === 'codex') {
-    // For Codex, thinking is embedded in the model
-    return profileHasThinking(profile) ? 'thinking' : null;
-  }
-  // Claude
-  return profile.thinkingLevel && profile.thinkingLevel !== 'none' ? profile.thinkingLevel : null;
-}
-
-interface ProfileSelectProps {
-  profiles: AIProfile[];
-  selectedModel: ModelAlias | CursorModelId;
-  selectedThinkingLevel: ThinkingLevel;
-  selectedCursorModel?: string; // For detecting cursor profile selection
-  onSelect: (profile: AIProfile) => void;
-  testIdPrefix?: string;
-  className?: string;
-  disabled?: boolean;
-}
-
-/**
- * ProfileSelect - Compact dropdown selector for AI profiles
- *
- * A lightweight alternative to ProfileQuickSelect for contexts where
- * space is limited (e.g., mass edit, bulk operations).
- *
- * Shows icon + profile name in dropdown, with model details below.
- *
- * @example
- * ```tsx
- * <ProfileSelect
- *   profiles={aiProfiles}
- *   selectedModel={model}
- *   selectedThinkingLevel={thinkingLevel}
- *   selectedCursorModel={isCurrentModelCursor ? model : undefined}
- *   onSelect={handleProfileSelect}
- *   testIdPrefix="mass-edit-profile"
- * />
- * ```
- */
-export function ProfileSelect({
-  profiles,
-  selectedModel,
-  selectedThinkingLevel,
-  selectedCursorModel,
-  onSelect,
-  testIdPrefix = 'profile-select',
-  className,
-  disabled = false,
-}: ProfileSelectProps) {
-  if (profiles.length === 0) {
-    return null;
-  }
-
-  // Check if a profile is selected
-  const isProfileSelected = (profile: AIProfile): boolean => {
-    if (profile.provider === 'cursor') {
-      // For cursor profiles, check if cursor model matches
-      const profileCursorModel = `${PROVIDER_PREFIXES.cursor}${profile.cursorModel || 'auto'}`;
-      return selectedCursorModel === profileCursorModel;
-    }
-    // For Claude profiles
-    return selectedModel === profile.model && selectedThinkingLevel === profile.thinkingLevel;
-  };
-
-  const selectedProfile = profiles.find(isProfileSelected);
-
-  return (
-    <div className={cn('space-y-2', className)}>
-      <Select
-        value={selectedProfile?.id || 'none'}
-        onValueChange={(value: string) => {
-          if (value !== 'none') {
-            const profile = profiles.find((p) => p.id === value);
-            if (profile) {
-              onSelect(profile);
-            }
-          }
-        }}
-        disabled={disabled}
-      >
-        <SelectTrigger className="h-9" data-testid={`${testIdPrefix}-select-trigger`}>
-          <SelectValue>
-            {selectedProfile ? (
-              <div className="flex items-center gap-2">
-                {selectedProfile.provider === 'cursor' ? (
-                  <Terminal className="h-4 w-4 text-amber-500" />
-                ) : (
-                  (() => {
-                    const IconComponent = selectedProfile.icon
-                      ? PROFILE_ICONS[selectedProfile.icon]
-                      : Brain;
-                    return <IconComponent className="h-4 w-4 text-primary" />;
-                  })()
-                )}
-                <span>{selectedProfile.name}</span>
-              </div>
-            ) : (
-              <span className="text-muted-foreground">Select a profile...</span>
-            )}
-          </SelectValue>
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="none" className="text-muted-foreground">
-            No profile selected
-          </SelectItem>
-          {profiles.map((profile) => {
-            const isCursorProfile = profile.provider === 'cursor';
-            const IconComponent = profile.icon ? PROFILE_ICONS[profile.icon] : Brain;
-
-            return (
-              <SelectItem
-                key={profile.id}
-                value={profile.id}
-                data-testid={`${testIdPrefix}-option-${profile.id}`}
-              >
-                <div className="flex items-center gap-2">
-                  {isCursorProfile ? (
-                    <Terminal className="h-3.5 w-3.5 text-amber-500" />
-                  ) : (
-                    <IconComponent className="h-3.5 w-3.5 text-primary" />
-                  )}
-                  <div className="flex flex-col">
-                    <span className="text-sm">{profile.name}</span>
-                    <span className="text-[10px] text-muted-foreground">
-                      {getProfileModelDisplay(profile)}
-                      {getProfileThinkingDisplay(profile) &&
-                        ` + ${getProfileThinkingDisplay(profile)}`}
-                    </span>
-                  </div>
-                </div>
-              </SelectItem>
-            );
-          })}
-        </SelectContent>
-      </Select>
-      {selectedProfile && (
-        <p className="text-xs text-muted-foreground">
-          {getProfileModelDisplay(selectedProfile)}
-          {getProfileThinkingDisplay(selectedProfile) &&
-            ` + ${getProfileThinkingDisplay(selectedProfile)}`}
-        </p>
-      )}
-    </div>
-  );
-}

apps/ui/src/components/views/board-view/shared/profile-typeahead.tsx

@@ -1,237 +0,0 @@
-import * as React from 'react';
-import { Check, ChevronsUpDown, UserCircle, Settings2 } from 'lucide-react';
-import { cn } from '@/lib/utils';
-import { Button } from '@/components/ui/button';
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandSeparator,
-} from '@/components/ui/command';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
-import { Badge } from '@/components/ui/badge';
-import type { AIProfile } from '@automaker/types';
-import { CURSOR_MODEL_MAP, profileHasThinking, getCodexModelLabel } from '@automaker/types';
-import { PROVIDER_ICON_COMPONENTS } from '@/components/ui/provider-icon';
-
-/**
- * Get display string for a profile's model configuration
- */
-function getProfileModelDisplay(profile: AIProfile): string {
-  if (profile.provider === 'cursor') {
-    const cursorModel = profile.cursorModel || 'auto';
-    const modelConfig = CURSOR_MODEL_MAP[cursorModel];
-    return modelConfig?.label || cursorModel;
-  }
-  if (profile.provider === 'codex') {
-    return getCodexModelLabel(profile.codexModel || 'codex-gpt-5.2-codex');
-  }
-  if (profile.provider === 'opencode') {
-    // Extract a short label from the opencode model
-    const modelId = profile.opencodeModel || '';
-    if (modelId.includes('/')) {
-      const parts = modelId.split('/');
-      return parts[parts.length - 1].split('.')[0] || modelId;
-    }
-    return modelId;
-  }
-  // Claude
-  return profile.model || 'sonnet';
-}
-
-/**
- * Get display string for a profile's thinking configuration
- */
-function getProfileThinkingDisplay(profile: AIProfile): string | null {
-  if (profile.provider === 'cursor' || profile.provider === 'codex') {
-    return profileHasThinking(profile) ? 'thinking' : null;
-  }
-  // Claude
-  return profile.thinkingLevel && profile.thinkingLevel !== 'none' ? profile.thinkingLevel : null;
-}
-
-interface ProfileTypeaheadProps {
-  profiles: AIProfile[];
-  selectedProfileId?: string;
-  onSelect: (profile: AIProfile) => void;
-  placeholder?: string;
-  className?: string;
-  disabled?: boolean;
-  showManageLink?: boolean;
-  onManageLinkClick?: () => void;
-  testIdPrefix?: string;
-}
-
-export function ProfileTypeahead({
-  profiles,
-  selectedProfileId,
-  onSelect,
-  placeholder = 'Select profile...',
-  className,
-  disabled = false,
-  showManageLink = false,
-  onManageLinkClick,
-  testIdPrefix = 'profile-typeahead',
-}: ProfileTypeaheadProps) {
-  const [open, setOpen] = React.useState(false);
-  const [inputValue, setInputValue] = React.useState('');
-  const [triggerWidth, setTriggerWidth] = React.useState<number>(0);
-  const triggerRef = React.useRef<HTMLButtonElement>(null);
-
-  const selectedProfile = React.useMemo(
-    () => profiles.find((p) => p.id === selectedProfileId),
-    [profiles, selectedProfileId]
-  );
-
-  // Update trigger width when component mounts or value changes
-  React.useEffect(() => {
-    if (triggerRef.current) {
-      const updateWidth = () => {
-        setTriggerWidth(triggerRef.current?.offsetWidth || 0);
-      };
-      updateWidth();
-      const resizeObserver = new ResizeObserver(updateWidth);
-      resizeObserver.observe(triggerRef.current);
-      return () => {
-        resizeObserver.disconnect();
-      };
-    }
-  }, [selectedProfileId]);
-
-  // Filter profiles based on input
-  const filteredProfiles = React.useMemo(() => {
-    if (!inputValue) return profiles;
-    const lower = inputValue.toLowerCase();
-    return profiles.filter(
-      (p) =>
-        p.name.toLowerCase().includes(lower) ||
-        p.description?.toLowerCase().includes(lower) ||
-        p.provider.toLowerCase().includes(lower)
-    );
-  }, [profiles, inputValue]);
-
-  const handleSelect = (profile: AIProfile) => {
-    onSelect(profile);
-    setInputValue('');
-    setOpen(false);
-  };
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button
-          ref={triggerRef}
-          variant="outline"
-          role="combobox"
-          aria-expanded={open}
-          disabled={disabled}
-          className={cn('w-full justify-between h-9', className)}
-          data-testid={`${testIdPrefix}-trigger`}
-        >
-          <span className="flex items-center gap-2 truncate">
-            {selectedProfile ? (
-              <>
-                {(() => {
-                  const ProviderIcon = PROVIDER_ICON_COMPONENTS[selectedProfile.provider];
-                  return ProviderIcon ? (
-                    <ProviderIcon className="w-4 h-4 shrink-0 text-muted-foreground" />
-                  ) : (
-                    <UserCircle className="w-4 h-4 shrink-0 text-muted-foreground" />
-                  );
-                })()}
-                <span className="truncate">{selectedProfile.name}</span>
-              </>
-            ) : (
-              <>
-                <UserCircle className="w-4 h-4 shrink-0 text-muted-foreground" />
-                <span className="text-muted-foreground">{placeholder}</span>
-              </>
-            )}
-          </span>
-          <ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50" />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent
-        className="p-0"
-        style={{ width: Math.max(triggerWidth, 280) }}
-        data-testid={`${testIdPrefix}-content`}
-      >
-        <Command shouldFilter={false}>
-          <CommandInput
-            placeholder="Search profiles..."
-            className="h-9"
-            value={inputValue}
-            onValueChange={setInputValue}
-          />
-          <CommandList className="max-h-[300px]">
-            <CommandEmpty>No profile found.</CommandEmpty>
-            <CommandGroup>
-              {filteredProfiles.map((profile) => {
-                const ProviderIcon = PROVIDER_ICON_COMPONENTS[profile.provider];
-                const isSelected = profile.id === selectedProfileId;
-                const modelDisplay = getProfileModelDisplay(profile);
-                const thinkingDisplay = getProfileThinkingDisplay(profile);
-
-                return (
-                  <CommandItem
-                    key={profile.id}
-                    value={profile.id}
-                    onSelect={() => handleSelect(profile)}
-                    className="flex items-center gap-2 py-2"
-                    data-testid={`${testIdPrefix}-option-${profile.id}`}
-                  >
-                    <div className="flex items-center gap-2 flex-1 min-w-0">
-                      {ProviderIcon ? (
-                        <ProviderIcon className="w-4 h-4 shrink-0 text-muted-foreground" />
-                      ) : (
-                        <UserCircle className="w-4 h-4 shrink-0 text-muted-foreground" />
-                      )}
-                      <div className="flex flex-col min-w-0 flex-1">
-                        <span className="text-sm font-medium truncate">{profile.name}</span>
-                        <span className="text-xs text-muted-foreground truncate">
-                          {modelDisplay}
-                          {thinkingDisplay && (
-                            <span className="text-amber-500"> + {thinkingDisplay}</span>
-                          )}
-                        </span>
-                      </div>
-                    </div>
-                    <div className="flex items-center gap-1 shrink-0">
-                      {profile.isBuiltIn && (
-                        <Badge variant="secondary" className="text-[10px] px-1.5 py-0">
-                          Built-in
-                        </Badge>
-                      )}
-                      <Check className={cn('h-4 w-4', isSelected ? 'opacity-100' : 'opacity-0')} />
-                    </div>
-                  </CommandItem>
-                );
-              })}
-            </CommandGroup>
-            {showManageLink && onManageLinkClick && (
-              <>
-                <CommandSeparator />
-                <CommandGroup>
-                  <CommandItem
-                    onSelect={() => {
-                      setOpen(false);
-                      onManageLinkClick();
-                    }}
-                    className="text-muted-foreground"
-                    data-testid={`${testIdPrefix}-manage-link`}
-                  >
-                    <Settings2 className="w-4 h-4 mr-2" />
-                    Manage AI Profiles
-                  </CommandItem>
-                </CommandGroup>
-              </>
-            )}
-          </CommandList>
-        </Command>
-      </PopoverContent>
-    </Popover>
-  );
-}

apps/ui/src/components/views/board-view/worktree-panel/worktree-panel.tsx

@@ -1,8 +1,7 @@
 import { useEffect, useRef } from 'react';
 import { Button } from '@/components/ui/button';
-import { GitBranch, Plus, RefreshCw, PanelLeftOpen, PanelLeftClose } from 'lucide-react';
+import { GitBranch, Plus, RefreshCw } from 'lucide-react';
 import { cn, pathsEqual } from '@/lib/utils';
-import { useAppStore } from '@/store/app-store';
 import type { WorktreePanelProps, WorktreeInfo } from './types';
 import {
   useWorktrees,
@@ -83,12 +82,6 @@ export function WorktreePanel({
     features,
   });
 
-  // Collapse state from store (synced via API)
-  const isCollapsed = useAppStore((s) => s.worktreePanelCollapsed);
-  const setWorktreePanelCollapsed = useAppStore((s) => s.setWorktreePanelCollapsed);
-
-  const toggleCollapsed = () => setWorktreePanelCollapsed(!isCollapsed);
-
   // Periodic interval check (5 seconds) to detect branch changes on disk
   // Reduced from 1s to 5s to minimize GPU/CPU usage from frequent re-renders
   const intervalRef = useRef<NodeJS.Timeout | null>(null);
@@ -104,18 +97,6 @@ export function WorktreePanel({
     };
   }, [fetchWorktrees]);
 
-  // Get the currently selected worktree for collapsed view
-  const selectedWorktree = worktrees.find((w) => {
-    if (
-      currentWorktree === null ||
-      currentWorktree === undefined ||
-      currentWorktree.path === null
-    ) {
-      return w.isMain;
-    }
-    return pathsEqual(w.path, currentWorktreePath);
-  });
-
   const isWorktreeSelected = (worktree: WorktreeInfo) => {
     return worktree.isMain
       ? currentWorktree === null || currentWorktree === undefined || currentWorktree.path === null
@@ -138,44 +119,8 @@ export function WorktreePanel({
   const mainWorktree = worktrees.find((w) => w.isMain);
   const nonMainWorktrees = worktrees.filter((w) => !w.isMain);
 
-  // Collapsed view - just show current branch and toggle
-  if (isCollapsed) {
-    return (
-      <div className="flex items-center gap-2 px-4 py-1.5 border-b border-border bg-glass/50 backdrop-blur-sm">
-        <Button
-          variant="ghost"
-          size="sm"
-          className="h-6 w-6 p-0 text-muted-foreground hover:text-foreground"
-          onClick={toggleCollapsed}
-          title="Expand worktree panel"
-        >
-          <PanelLeftOpen className="w-4 h-4" />
-        </Button>
-        <GitBranch className="w-4 h-4 text-muted-foreground" />
-        <span className="text-sm text-muted-foreground">Branch:</span>
-        <span className="text-sm font-mono font-medium">{selectedWorktree?.branch ?? 'main'}</span>
-        {selectedWorktree?.hasChanges && (
-          <span className="inline-flex items-center justify-center h-4 min-w-[1rem] px-1 text-[10px] font-medium rounded border bg-amber-500/20 text-amber-600 dark:text-amber-400 border-amber-500/30">
-            {selectedWorktree.changedFilesCount ?? '!'}
-          </span>
-        )}
-      </div>
-    );
-  }
-
-  // Expanded view - full worktree panel
   return (
     <div className="flex items-center gap-2 px-4 py-2 border-b border-border bg-glass/50 backdrop-blur-sm">
-      <Button
-        variant="ghost"
-        size="sm"
-        className="h-6 w-6 p-0 text-muted-foreground hover:text-foreground"
-        onClick={toggleCollapsed}
-        title="Collapse worktree panel"
-      >
-        <PanelLeftClose className="w-4 h-4" />
-      </Button>
-
       <GitBranch className="w-4 h-4 text-muted-foreground" />
       <span className="text-sm text-muted-foreground mr-2">Branch:</span>
 

apps/ui/src/components/views/dashboard-view.tsx

@@ -0,0 +1,885 @@
+import { useState, useCallback } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import { useNavigate } from '@tanstack/react-router';
+import { useAppStore, type ThemeMode } from '@/store/app-store';
+import { useOSDetection } from '@/hooks/use-os-detection';
+import { getElectronAPI, isElectron } from '@/lib/electron';
+import { initializeProject } from '@/lib/project-init';
+import { getHttpApiClient } from '@/lib/http-api-client';
+import { isMac } from '@/lib/utils';
+import { toast } from 'sonner';
+import { Button } from '@/components/ui/button';
+import { NewProjectModal } from '@/components/dialogs/new-project-modal';
+import { WorkspacePickerModal } from '@/components/dialogs/workspace-picker-modal';
+import type { StarterTemplate } from '@/lib/templates';
+import {
+  FolderOpen,
+  Plus,
+  Folder,
+  Star,
+  Clock,
+  Loader2,
+  ChevronDown,
+  MessageSquare,
+  Settings,
+  MoreVertical,
+  Trash2,
+} from 'lucide-react';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+
+const logger = createLogger('DashboardView');
+
+function getOSAbbreviation(os: string): string {
+  switch (os) {
+    case 'mac':
+      return 'M';
+    case 'windows':
+      return 'W';
+    case 'linux':
+      return 'L';
+    default:
+      return '?';
+  }
+}
+
+export function DashboardView() {
+  const navigate = useNavigate();
+  const { os } = useOSDetection();
+  const appVersion = typeof __APP_VERSION__ !== 'undefined' ? __APP_VERSION__ : '0.0.0';
+  const appMode = import.meta.env.VITE_APP_MODE || '?';
+  const versionSuffix = `${getOSAbbreviation(os)}${appMode}`;
+
+  const {
+    projects,
+    trashedProjects,
+    currentProject,
+    upsertAndSetCurrentProject,
+    addProject,
+    setCurrentProject,
+    toggleProjectFavorite,
+    moveProjectToTrash,
+    theme: globalTheme,
+  } = useAppStore();
+
+  const [showNewProjectModal, setShowNewProjectModal] = useState(false);
+  const [showWorkspacePicker, setShowWorkspacePicker] = useState(false);
+  const [isCreating, setIsCreating] = useState(false);
+  const [isOpening, setIsOpening] = useState(false);
+  const [projectToRemove, setProjectToRemove] = useState<{ id: string; name: string } | null>(null);
+
+  // Sort projects: favorites first, then by last opened
+  const sortedProjects = [...projects].sort((a, b) => {
+    // Favorites first
+    if (a.isFavorite && !b.isFavorite) return -1;
+    if (!a.isFavorite && b.isFavorite) return 1;
+    // Then by last opened
+    const dateA = a.lastOpened ? new Date(a.lastOpened).getTime() : 0;
+    const dateB = b.lastOpened ? new Date(b.lastOpened).getTime() : 0;
+    return dateB - dateA;
+  });
+
+  const favoriteProjects = sortedProjects.filter((p) => p.isFavorite);
+  const recentProjects = sortedProjects.filter((p) => !p.isFavorite);
+
+  /**
+   * Initialize project and navigate to board
+   */
+  const initializeAndOpenProject = useCallback(
+    async (path: string, name: string) => {
+      setIsOpening(true);
+      try {
+        const initResult = await initializeProject(path);
+
+        if (!initResult.success) {
+          toast.error('Failed to initialize project', {
+            description: initResult.error || 'Unknown error occurred',
+          });
+          return;
+        }
+
+        const trashedProject = trashedProjects.find((p) => p.path === path);
+        const effectiveTheme =
+          (trashedProject?.theme as ThemeMode | undefined) ||
+          (currentProject?.theme as ThemeMode | undefined) ||
+          globalTheme;
+        upsertAndSetCurrentProject(path, name, effectiveTheme);
+
+        toast.success('Project opened', {
+          description: `Opened ${name}`,
+        });
+
+        navigate({ to: '/board' });
+      } catch (error) {
+        logger.error('[Dashboard] Failed to open project:', error);
+        toast.error('Failed to open project', {
+          description: error instanceof Error ? error.message : 'Unknown error',
+        });
+      } finally {
+        setIsOpening(false);
+      }
+    },
+    [trashedProjects, currentProject, globalTheme, upsertAndSetCurrentProject, navigate]
+  );
+
+  const handleOpenProject = useCallback(async () => {
+    try {
+      const httpClient = getHttpApiClient();
+      const configResult = await httpClient.workspace.getConfig();
+
+      if (configResult.success && configResult.configured) {
+        setShowWorkspacePicker(true);
+      } else {
+        const api = getElectronAPI();
+        const result = await api.openDirectory();
+
+        if (!result.canceled && result.filePaths[0]) {
+          const path = result.filePaths[0];
+          const name = path.split(/[/\\]/).filter(Boolean).pop() || 'Untitled Project';
+          await initializeAndOpenProject(path, name);
+        }
+      }
+    } catch (error) {
+      logger.error('[Dashboard] Failed to check workspace config:', error);
+      const api = getElectronAPI();
+      const result = await api.openDirectory();
+
+      if (!result.canceled && result.filePaths[0]) {
+        const path = result.filePaths[0];
+        const name = path.split(/[/\\]/).filter(Boolean).pop() || 'Untitled Project';
+        await initializeAndOpenProject(path, name);
+      }
+    }
+  }, [initializeAndOpenProject]);
+
+  const handleWorkspaceSelect = useCallback(
+    async (path: string, name: string) => {
+      setShowWorkspacePicker(false);
+      await initializeAndOpenProject(path, name);
+    },
+    [initializeAndOpenProject]
+  );
+
+  const handleProjectClick = useCallback(
+    async (project: { id: string; name: string; path: string }) => {
+      await initializeAndOpenProject(project.path, project.name);
+    },
+    [initializeAndOpenProject]
+  );
+
+  const handleToggleFavorite = useCallback(
+    (e: React.MouseEvent, projectId: string) => {
+      e.stopPropagation();
+      toggleProjectFavorite(projectId);
+    },
+    [toggleProjectFavorite]
+  );
+
+  const handleRemoveProject = useCallback(
+    (e: React.MouseEvent, project: { id: string; name: string }) => {
+      e.stopPropagation();
+      setProjectToRemove(project);
+    },
+    []
+  );
+
+  const handleConfirmRemove = useCallback(() => {
+    if (projectToRemove) {
+      moveProjectToTrash(projectToRemove.id);
+      toast.success('Project removed', {
+        description: `${projectToRemove.name} has been removed from your projects list`,
+      });
+      setProjectToRemove(null);
+    }
+  }, [projectToRemove, moveProjectToTrash]);
+
+  const handleNewProject = () => {
+    setShowNewProjectModal(true);
+  };
+
+  const handleInteractiveMode = () => {
+    navigate({ to: '/interview' });
+  };
+
+  const handleCreateBlankProject = async (projectName: string, parentDir: string) => {
+    setIsCreating(true);
+    try {
+      const api = getElectronAPI();
+      const projectPath = `${parentDir}/${projectName}`;
+
+      const parentExists = await api.exists(parentDir);
+      if (!parentExists) {
+        toast.error('Parent directory does not exist', {
+          description: `Cannot create project in non-existent directory: ${parentDir}`,
+        });
+        return;
+      }
+
+      const parentStat = await api.stat(parentDir);
+      if (parentStat && !parentStat.stats?.isDirectory) {
+        toast.error('Parent path is not a directory', {
+          description: `${parentDir} is not a directory`,
+        });
+        return;
+      }
+
+      const mkdirResult = await api.mkdir(projectPath);
+      if (!mkdirResult.success) {
+        toast.error('Failed to create project directory', {
+          description: mkdirResult.error || 'Unknown error occurred',
+        });
+        return;
+      }
+
+      const initResult = await initializeProject(projectPath);
+      if (!initResult.success) {
+        toast.error('Failed to initialize project', {
+          description: initResult.error || 'Unknown error occurred',
+        });
+        return;
+      }
+
+      await api.writeFile(
+        `${projectPath}/.automaker/app_spec.txt`,
+        `<project_specification>
+  <project_name>${projectName}</project_name>
+
+  <overview>
+    Describe your project here. This file will be analyzed by an AI agent
+    to understand your project structure and tech stack.
+  </overview>
+
+  <technology_stack>
+    <!-- The AI agent will fill this in after analyzing your project -->
+  </technology_stack>
+
+  <core_capabilities>
+    <!-- List core features and capabilities -->
+  </core_capabilities>
+
+  <implemented_features>
+    <!-- The AI agent will populate this based on code analysis -->
+  </implemented_features>
+</project_specification>`
+      );
+
+      const project = {
+        id: `project-${Date.now()}`,
+        name: projectName,
+        path: projectPath,
+        lastOpened: new Date().toISOString(),
+      };
+
+      addProject(project);
+      setCurrentProject(project);
+      setShowNewProjectModal(false);
+
+      toast.success('Project created', {
+        description: `Created ${projectName}`,
+      });
+
+      navigate({ to: '/board' });
+    } catch (error) {
+      logger.error('Failed to create project:', error);
+      toast.error('Failed to create project', {
+        description: error instanceof Error ? error.message : 'Unknown error',
+      });
+    } finally {
+      setIsCreating(false);
+    }
+  };
+
+  const handleCreateFromTemplate = async (
+    template: StarterTemplate,
+    projectName: string,
+    parentDir: string
+  ) => {
+    setIsCreating(true);
+    try {
+      const httpClient = getHttpApiClient();
+      const api = getElectronAPI();
+
+      const cloneResult = await httpClient.templates.clone(
+        template.repoUrl,
+        projectName,
+        parentDir
+      );
+      if (!cloneResult.success || !cloneResult.projectPath) {
+        toast.error('Failed to clone template', {
+          description: cloneResult.error || 'Unknown error occurred',
+        });
+        return;
+      }
+
+      const projectPath = cloneResult.projectPath;
+      const initResult = await initializeProject(projectPath);
+      if (!initResult.success) {
+        toast.error('Failed to initialize project', {
+          description: initResult.error || 'Unknown error occurred',
+        });
+        return;
+      }
+
+      await api.writeFile(
+        `${projectPath}/.automaker/app_spec.txt`,
+        `<project_specification>
+  <project_name>${projectName}</project_name>
+
+  <overview>
+    This project was created from the "${template.name}" starter template.
+    ${template.description}
+  </overview>
+
+  <technology_stack>
+    ${template.techStack.map((tech) => `<technology>${tech}</technology>`).join('\n    ')}
+  </technology_stack>
+
+  <core_capabilities>
+    ${template.features.map((feature) => `<capability>${feature}</capability>`).join('\n    ')}
+  </core_capabilities>
+
+  <implemented_features>
+    <!-- The AI agent will populate this based on code analysis -->
+  </implemented_features>
+</project_specification>`
+      );
+
+      const project = {
+        id: `project-${Date.now()}`,
+        name: projectName,
+        path: projectPath,
+        lastOpened: new Date().toISOString(),
+      };
+
+      addProject(project);
+      setCurrentProject(project);
+      setShowNewProjectModal(false);
+
+      toast.success('Project created from template', {
+        description: `Created ${projectName} from ${template.name}`,
+      });
+
+      navigate({ to: '/board' });
+    } catch (error) {
+      logger.error('Failed to create project from template:', error);
+      toast.error('Failed to create project', {
+        description: error instanceof Error ? error.message : 'Unknown error',
+      });
+    } finally {
+      setIsCreating(false);
+    }
+  };
+
+  const handleCreateFromCustomUrl = async (
+    repoUrl: string,
+    projectName: string,
+    parentDir: string
+  ) => {
+    setIsCreating(true);
+    try {
+      const httpClient = getHttpApiClient();
+      const api = getElectronAPI();
+
+      const cloneResult = await httpClient.templates.clone(repoUrl, projectName, parentDir);
+      if (!cloneResult.success || !cloneResult.projectPath) {
+        toast.error('Failed to clone repository', {
+          description: cloneResult.error || 'Unknown error occurred',
+        });
+        return;
+      }
+
+      const projectPath = cloneResult.projectPath;
+      const initResult = await initializeProject(projectPath);
+      if (!initResult.success) {
+        toast.error('Failed to initialize project', {
+          description: initResult.error || 'Unknown error occurred',
+        });
+        return;
+      }
+
+      await api.writeFile(
+        `${projectPath}/.automaker/app_spec.txt`,
+        `<project_specification>
+  <project_name>${projectName}</project_name>
+
+  <overview>
+    This project was cloned from ${repoUrl}.
+    The AI agent will analyze the project structure.
+  </overview>
+
+  <technology_stack>
+    <!-- The AI agent will fill this in after analyzing your project -->
+  </technology_stack>
+
+  <core_capabilities>
+    <!-- List core features and capabilities -->
+  </core_capabilities>
+
+  <implemented_features>
+    <!-- The AI agent will populate this based on code analysis -->
+  </implemented_features>
+</project_specification>`
+      );
+
+      const project = {
+        id: `project-${Date.now()}`,
+        name: projectName,
+        path: projectPath,
+        lastOpened: new Date().toISOString(),
+      };
+
+      addProject(project);
+      setCurrentProject(project);
+      setShowNewProjectModal(false);
+
+      toast.success('Project created from repository', {
+        description: `Created ${projectName}`,
+      });
+
+      navigate({ to: '/board' });
+    } catch (error) {
+      logger.error('Failed to create project from custom URL:', error);
+      toast.error('Failed to create project', {
+        description: error instanceof Error ? error.message : 'Unknown error',
+      });
+    } finally {
+      setIsCreating(false);
+    }
+  };
+
+  const hasProjects = projects.length > 0;
+
+  return (
+    <div className="flex-1 flex flex-col h-screen content-bg" data-testid="dashboard-view">
+      {/* Header with logo */}
+      <header className="shrink-0 border-b border-border bg-glass backdrop-blur-md">
+        {/* Electron titlebar drag region */}
+        {isElectron() && (
+          <div
+            className={`absolute top-0 left-0 right-0 h-6 titlebar-drag-region z-40 pointer-events-none ${isMac ? 'pl-20' : ''}`}
+            aria-hidden="true"
+          />
+        )}
+        <div className="px-8 py-4 flex items-center justify-between">
+          <div
+            className="flex items-center gap-3 cursor-pointer group titlebar-no-drag"
+            onClick={() => navigate({ to: '/dashboard' })}
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 256 256"
+              role="img"
+              aria-label="Automaker Logo"
+              className="size-10 group-hover:rotate-12 transition-transform duration-300 ease-out"
+            >
+              <defs>
+                <linearGradient
+                  id="bg-dashboard"
+                  x1="0"
+                  y1="0"
+                  x2="256"
+                  y2="256"
+                  gradientUnits="userSpaceOnUse"
+                >
+                  <stop offset="0%" style={{ stopColor: 'var(--brand-400)' }} />
+                  <stop offset="100%" style={{ stopColor: 'var(--brand-600)' }} />
+                </linearGradient>
+                <filter id="iconShadow-dashboard" x="-20%" y="-20%" width="140%" height="140%">
+                  <feDropShadow
+                    dx="0"
+                    dy="4"
+                    stdDeviation="4"
+                    floodColor="#000000"
+                    floodOpacity="0.25"
+                  />
+                </filter>
+              </defs>
+              <rect x="16" y="16" width="224" height="224" rx="56" fill="url(#bg-dashboard)" />
+              <g
+                fill="none"
+                stroke="#FFFFFF"
+                strokeWidth="20"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                filter="url(#iconShadow-dashboard)"
+              >
+                <path d="M92 92 L52 128 L92 164" />
+                <path d="M144 72 L116 184" />
+                <path d="M164 92 L204 128 L164 164" />
+              </g>
+            </svg>
+            <div className="flex flex-col">
+              <span className="font-bold text-foreground text-2xl tracking-tight leading-none">
+                automaker<span className="text-brand-500">.</span>
+              </span>
+              <span className="text-xs text-muted-foreground leading-none font-medium mt-1">
+                v{appVersion} {versionSuffix}
+              </span>
+            </div>
+          </div>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => navigate({ to: '/settings' })}
+            className="titlebar-no-drag"
+          >
+            <Settings className="w-5 h-5" />
+          </Button>
+        </div>
+      </header>
+
+      {/* Main content */}
+      <div className="flex-1 overflow-y-auto p-8">
+        <div className="max-w-6xl mx-auto">
+          {/* No projects - show getting started */}
+          {!hasProjects && (
+            <div className="animate-in fade-in slide-in-from-bottom-4 duration-500">
+              <div className="text-center mb-12">
+                <h2 className="text-3xl font-bold text-foreground mb-3">Welcome to Automaker</h2>
+                <p className="text-lg text-muted-foreground max-w-xl mx-auto">
+                  Your autonomous AI development studio. Get started by creating a new project or
+                  opening an existing one.
+                </p>
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-3xl mx-auto">
+                {/* New Project Card */}
+                <div
+                  className="group relative rounded-xl border border-border bg-card/80 backdrop-blur-sm hover:bg-card hover:border-brand-500/30 hover:shadow-xl hover:shadow-brand-500/5 transition-all duration-300 hover:-translate-y-1"
+                  data-testid="new-project-card"
+                >
+                  <div className="absolute inset-0 rounded-xl bg-linear-to-br from-brand-500/5 via-transparent to-purple-600/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+                  <div className="relative p-6 h-full flex flex-col">
+                    <div className="flex items-start gap-4 flex-1">
+                      <div className="w-12 h-12 rounded-xl bg-linear-to-br from-brand-500 to-brand-600 shadow-lg shadow-brand-500/25 flex items-center justify-center group-hover:scale-105 group-hover:shadow-brand-500/40 transition-all duration-300 shrink-0">
+                        <Plus className="w-6 h-6 text-white" />
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <h3 className="text-lg font-semibold text-foreground mb-1.5">
+                          New Project
+                        </h3>
+                        <p className="text-sm text-muted-foreground leading-relaxed">
+                          Create a new project from scratch with AI-powered development
+                        </p>
+                      </div>
+                    </div>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button
+                          className="w-full mt-5 bg-linear-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-700 text-white border-0 shadow-md shadow-brand-500/20 hover:shadow-brand-500/30 transition-all"
+                          data-testid="create-new-project"
+                        >
+                          <Plus className="w-4 h-4 mr-2" />
+                          Create Project
+                          <ChevronDown className="w-4 h-4 ml-2" />
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end" className="w-56">
+                        <DropdownMenuItem
+                          onClick={handleNewProject}
+                          data-testid="quick-setup-option"
+                        >
+                          <Plus className="w-4 h-4 mr-2" />
+                          Quick Setup
+                        </DropdownMenuItem>
+                        <DropdownMenuItem
+                          onClick={handleInteractiveMode}
+                          data-testid="interactive-mode-option"
+                        >
+                          <MessageSquare className="w-4 h-4 mr-2" />
+                          Interactive Mode
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </div>
+                </div>
+
+                {/* Open Project Card */}
+                <div
+                  className="group relative rounded-xl border border-border bg-card/80 backdrop-blur-sm hover:bg-card hover:border-blue-500/30 hover:shadow-xl hover:shadow-blue-500/5 transition-all duration-300 cursor-pointer hover:-translate-y-1"
+                  onClick={handleOpenProject}
+                  data-testid="open-project-card"
+                >
+                  <div className="absolute inset-0 rounded-xl bg-linear-to-br from-blue-500/5 via-transparent to-cyan-600/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+                  <div className="relative p-6 h-full flex flex-col">
+                    <div className="flex items-start gap-4 flex-1">
+                      <div className="w-12 h-12 rounded-xl bg-muted border border-border flex items-center justify-center group-hover:bg-blue-500/10 group-hover:border-blue-500/30 group-hover:scale-105 transition-all duration-300 shrink-0">
+                        <FolderOpen className="w-6 h-6 text-muted-foreground group-hover:text-blue-500 transition-colors duration-300" />
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <h3 className="text-lg font-semibold text-foreground mb-1.5">
+                          Open Project
+                        </h3>
+                        <p className="text-sm text-muted-foreground leading-relaxed">
+                          Open an existing project folder to continue working
+                        </p>
+                      </div>
+                    </div>
+                    <Button
+                      variant="secondary"
+                      className="w-full mt-5 bg-secondary/80 hover:bg-secondary text-foreground border border-border hover:border-blue-500/30 transition-all"
+                      data-testid="open-existing-project"
+                    >
+                      <FolderOpen className="w-4 h-4 mr-2" />
+                      Browse Folder
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Has projects - show project list */}
+          {hasProjects && (
+            <div className="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
+              {/* Quick actions header */}
+              <div className="flex items-center justify-between">
+                <h2 className="text-2xl font-bold text-foreground">Your Projects</h2>
+                <div className="flex gap-2">
+                  <Button variant="outline" onClick={handleOpenProject}>
+                    <FolderOpen className="w-4 h-4 mr-2" />
+                    Open Folder
+                  </Button>
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button className="bg-linear-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-700 text-white">
+                        <Plus className="w-4 h-4 mr-2" />
+                        New Project
+                        <ChevronDown className="w-4 h-4 ml-2" />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end" className="w-56">
+                      <DropdownMenuItem onClick={handleNewProject}>
+                        <Plus className="w-4 h-4 mr-2" />
+                        Quick Setup
+                      </DropdownMenuItem>
+                      <DropdownMenuItem onClick={handleInteractiveMode}>
+                        <MessageSquare className="w-4 h-4 mr-2" />
+                        Interactive Mode
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </div>
+              </div>
+
+              {/* Favorites section */}
+              {favoriteProjects.length > 0 && (
+                <div>
+                  <div className="flex items-center gap-2.5 mb-4">
+                    <div className="w-8 h-8 rounded-lg bg-yellow-500/10 flex items-center justify-center">
+                      <Star className="w-4 h-4 text-yellow-500 fill-yellow-500" />
+                    </div>
+                    <h3 className="text-lg font-semibold text-foreground">Favorites</h3>
+                  </div>
+                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                    {favoriteProjects.map((project) => (
+                      <div
+                        key={project.id}
+                        className="group relative rounded-xl border border-yellow-500/30 bg-card/60 backdrop-blur-sm hover:bg-card hover:border-yellow-500/50 hover:shadow-lg hover:shadow-yellow-500/5 transition-all duration-300 cursor-pointer hover:-translate-y-0.5"
+                        onClick={() => handleProjectClick(project)}
+                        data-testid={`project-card-${project.id}`}
+                      >
+                        <div className="absolute inset-0 rounded-xl bg-linear-to-br from-yellow-500/5 to-amber-600/5 opacity-0 group-hover:opacity-100 transition-all duration-300" />
+                        <div className="relative p-4">
+                          <div className="flex items-start gap-3">
+                            <div className="w-10 h-10 rounded-lg bg-yellow-500/10 border border-yellow-500/30 flex items-center justify-center group-hover:bg-yellow-500/20 transition-all duration-300 shrink-0">
+                              <Folder className="w-5 h-5 text-yellow-500" />
+                            </div>
+                            <div className="flex-1 min-w-0">
+                              <p className="font-medium text-foreground truncate group-hover:text-yellow-500 transition-colors duration-300">
+                                {project.name}
+                              </p>
+                              <p className="text-xs text-muted-foreground/70 truncate mt-1">
+                                {project.path}
+                              </p>
+                              {project.lastOpened && (
+                                <p className="text-xs text-muted-foreground mt-1.5">
+                                  {new Date(project.lastOpened).toLocaleDateString()}
+                                </p>
+                              )}
+                            </div>
+                            <div className="flex items-center gap-1">
+                              <button
+                                onClick={(e) => handleToggleFavorite(e, project.id)}
+                                className="p-1.5 rounded-lg hover:bg-yellow-500/20 transition-colors"
+                                title="Remove from favorites"
+                              >
+                                <Star className="w-4 h-4 text-yellow-500 fill-yellow-500" />
+                              </button>
+                              <DropdownMenu>
+                                <DropdownMenuTrigger asChild>
+                                  <button
+                                    onClick={(e) => e.stopPropagation()}
+                                    className="p-1.5 rounded-lg hover:bg-muted transition-colors opacity-0 group-hover:opacity-100"
+                                    title="More options"
+                                  >
+                                    <MoreVertical className="w-4 h-4 text-muted-foreground" />
+                                  </button>
+                                </DropdownMenuTrigger>
+                                <DropdownMenuContent align="end">
+                                  <DropdownMenuItem
+                                    onClick={(e) => handleRemoveProject(e, project)}
+                                    className="text-destructive focus:text-destructive"
+                                  >
+                                    <Trash2 className="w-4 h-4 mr-2" />
+                                    Remove from Automaker
+                                  </DropdownMenuItem>
+                                </DropdownMenuContent>
+                              </DropdownMenu>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Recent projects section */}
+              {recentProjects.length > 0 && (
+                <div>
+                  <div className="flex items-center gap-2.5 mb-4">
+                    <div className="w-8 h-8 rounded-lg bg-muted/50 flex items-center justify-center">
+                      <Clock className="w-4 h-4 text-muted-foreground" />
+                    </div>
+                    <h3 className="text-lg font-semibold text-foreground">Recent Projects</h3>
+                  </div>
+                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                    {recentProjects.map((project) => (
+                      <div
+                        key={project.id}
+                        className="group relative rounded-xl border border-border bg-card/60 backdrop-blur-sm hover:bg-card hover:border-brand-500/40 hover:shadow-lg hover:shadow-brand-500/5 transition-all duration-300 cursor-pointer hover:-translate-y-0.5"
+                        onClick={() => handleProjectClick(project)}
+                        data-testid={`project-card-${project.id}`}
+                      >
+                        <div className="absolute inset-0 rounded-xl bg-linear-to-br from-brand-500/0 to-purple-600/0 group-hover:from-brand-500/5 group-hover:to-purple-600/5 transition-all duration-300" />
+                        <div className="relative p-4">
+                          <div className="flex items-start gap-3">
+                            <div className="w-10 h-10 rounded-lg bg-muted/80 border border-border flex items-center justify-center group-hover:bg-brand-500/10 group-hover:border-brand-500/30 transition-all duration-300 shrink-0">
+                              <Folder className="w-5 h-5 text-muted-foreground group-hover:text-brand-500 transition-colors duration-300" />
+                            </div>
+                            <div className="flex-1 min-w-0">
+                              <p className="font-medium text-foreground truncate group-hover:text-brand-500 transition-colors duration-300">
+                                {project.name}
+                              </p>
+                              <p className="text-xs text-muted-foreground/70 truncate mt-1">
+                                {project.path}
+                              </p>
+                              {project.lastOpened && (
+                                <p className="text-xs text-muted-foreground mt-1.5">
+                                  {new Date(project.lastOpened).toLocaleDateString()}
+                                </p>
+                              )}
+                            </div>
+                            <div className="flex items-center gap-1">
+                              <button
+                                onClick={(e) => handleToggleFavorite(e, project.id)}
+                                className="p-1.5 rounded-lg hover:bg-muted transition-colors opacity-0 group-hover:opacity-100"
+                                title="Add to favorites"
+                              >
+                                <Star className="w-4 h-4 text-muted-foreground hover:text-yellow-500" />
+                              </button>
+                              <DropdownMenu>
+                                <DropdownMenuTrigger asChild>
+                                  <button
+                                    onClick={(e) => e.stopPropagation()}
+                                    className="p-1.5 rounded-lg hover:bg-muted transition-colors opacity-0 group-hover:opacity-100"
+                                    title="More options"
+                                  >
+                                    <MoreVertical className="w-4 h-4 text-muted-foreground" />
+                                  </button>
+                                </DropdownMenuTrigger>
+                                <DropdownMenuContent align="end">
+                                  <DropdownMenuItem
+                                    onClick={(e) => handleRemoveProject(e, project)}
+                                    className="text-destructive focus:text-destructive"
+                                  >
+                                    <Trash2 className="w-4 h-4 mr-2" />
+                                    Remove from Automaker
+                                  </DropdownMenuItem>
+                                </DropdownMenuContent>
+                              </DropdownMenu>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Modals */}
+      <NewProjectModal
+        open={showNewProjectModal}
+        onOpenChange={setShowNewProjectModal}
+        onCreateBlankProject={handleCreateBlankProject}
+        onCreateFromTemplate={handleCreateFromTemplate}
+        onCreateFromCustomUrl={handleCreateFromCustomUrl}
+        isCreating={isCreating}
+      />
+
+      <WorkspacePickerModal
+        open={showWorkspacePicker}
+        onOpenChange={setShowWorkspacePicker}
+        onSelect={handleWorkspaceSelect}
+      />
+
+      {/* Remove project confirmation dialog */}
+      <Dialog open={!!projectToRemove} onOpenChange={(open) => !open && setProjectToRemove(null)}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>Remove Project</DialogTitle>
+            <DialogDescription>
+              Are you sure you want to remove <strong>{projectToRemove?.name}</strong> from
+              Automaker?
+            </DialogDescription>
+          </DialogHeader>
+          <div className="py-4">
+            <p className="text-sm text-muted-foreground">
+              This will only remove the project from your Automaker projects list. The project files
+              on your computer will not be deleted.
+            </p>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setProjectToRemove(null)}>
+              Cancel
+            </Button>
+            <Button variant="destructive" onClick={handleConfirmRemove}>
+              <Trash2 className="w-4 h-4 mr-2" />
+              Remove Project
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Loading overlay */}
+      {isOpening && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm"
+          data-testid="project-opening-overlay"
+        >
+          <div className="flex flex-col items-center gap-4 p-8 rounded-2xl bg-card border border-border shadow-2xl">
+            <Loader2 className="w-10 h-10 text-brand-500 animate-spin" />
+            <p className="text-foreground font-medium">Opening project...</p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

apps/ui/src/components/views/github-issues-view.tsx

@@ -26,8 +26,7 @@ export function GitHubIssuesView() {
   const [pendingRevalidateOptions, setPendingRevalidateOptions] =
     useState<ValidateIssueOptions | null>(null);
 
-  const { currentProject, defaultAIProfileId, aiProfiles, getCurrentWorktree, worktreesByProject } =
-    useAppStore();
+  const { currentProject, getCurrentWorktree, worktreesByProject } = useAppStore();
 
   // Model override for validation
   const validationModelOverride = useModelOverride({ phase: 'validationModel' });
@@ -45,12 +44,6 @@ export function GitHubIssuesView() {
       onShowValidationDialogChange: setShowValidationDialog,
     });
 
-  // Get default AI profile for task creation
-  const defaultProfile = useMemo(() => {
-    if (!defaultAIProfileId) return null;
-    return aiProfiles.find((p) => p.id === defaultAIProfileId) ?? null;
-  }, [defaultAIProfileId, aiProfiles]);
-
   // Get current branch from selected worktree
   const currentBranch = useMemo(() => {
     if (!currentProject?.path) return '';
@@ -99,9 +92,6 @@ export function GitHubIssuesView() {
             .filter(Boolean)
             .join('\n');
 
-          // Use profile default model
-          const featureModel = defaultProfile?.model ?? 'opus';
-
           const feature = {
             id: `issue-${issue.number}-${crypto.randomUUID()}`,
             title: issue.title,
@@ -110,8 +100,8 @@ export function GitHubIssuesView() {
             status: 'backlog' as const,
             passes: false,
             priority: getFeaturePriority(validation.estimatedComplexity),
-            model: featureModel,
-            thinkingLevel: defaultProfile?.thinkingLevel ?? 'none',
+            model: 'opus',
+            thinkingLevel: 'none' as const,
             branchName: currentBranch,
             createdAt: new Date().toISOString(),
             updatedAt: new Date().toISOString(),
@@ -129,7 +119,7 @@ export function GitHubIssuesView() {
         toast.error(err instanceof Error ? err.message : 'Failed to create task');
       }
     },
-    [currentProject?.path, defaultProfile, currentBranch]
+    [currentProject?.path, currentBranch]
   );
 
   if (loading) {

apps/ui/src/components/views/graph-view-page.tsx

@@ -0,0 +1,318 @@
+// @ts-nocheck
+import { useState, useCallback, useMemo, useEffect } from 'react';
+import { useAppStore, Feature } from '@/store/app-store';
+import { GraphView } from './graph-view';
+import { EditFeatureDialog, AddFeatureDialog, AgentOutputModal } from './board-view/dialogs';
+import {
+  useBoardFeatures,
+  useBoardActions,
+  useBoardBackground,
+  useBoardPersistence,
+} from './board-view/hooks';
+import { useAutoMode } from '@/hooks/use-auto-mode';
+import { pathsEqual } from '@/lib/utils';
+import { RefreshCw } from 'lucide-react';
+import { getElectronAPI } from '@/lib/electron';
+import { createLogger } from '@automaker/utils/logger';
+
+const logger = createLogger('GraphViewPage');
+
+// Stable empty array to avoid infinite loop in selector
+const EMPTY_WORKTREES: ReturnType<ReturnType<typeof useAppStore.getState>['getWorktrees']> = [];
+
+export function GraphViewPage() {
+  const {
+    currentProject,
+    updateFeature,
+    getCurrentWorktree,
+    getWorktrees,
+    setWorktrees,
+    setCurrentWorktree,
+    defaultSkipTests,
+  } = useAppStore();
+
+  const worktreesByProject = useAppStore((s) => s.worktreesByProject);
+  const worktrees = useMemo(
+    () =>
+      currentProject
+        ? (worktreesByProject[currentProject.path] ?? EMPTY_WORKTREES)
+        : EMPTY_WORKTREES,
+    [currentProject, worktreesByProject]
+  );
+
+  // Load features
+  const {
+    features: hookFeatures,
+    isLoading,
+    persistedCategories,
+    loadFeatures,
+    saveCategory,
+  } = useBoardFeatures({ currentProject });
+
+  // Auto mode hook
+  const autoMode = useAutoMode();
+  const runningAutoTasks = autoMode.runningTasks;
+
+  // Search state
+  const [searchQuery, setSearchQuery] = useState('');
+
+  // Dialog states
+  const [editingFeature, setEditingFeature] = useState<Feature | null>(null);
+  const [showAddDialog, setShowAddDialog] = useState(false);
+  const [spawnParentFeature, setSpawnParentFeature] = useState<Feature | null>(null);
+  const [showOutputModal, setShowOutputModal] = useState(false);
+  const [outputFeature, setOutputFeature] = useState<Feature | null>(null);
+
+  // Worktree refresh key
+  const [worktreeRefreshKey, setWorktreeRefreshKey] = useState(0);
+
+  // Get current worktree info
+  const currentWorktreeInfo = currentProject ? getCurrentWorktree(currentProject.path) : null;
+  const currentWorktreePath = currentWorktreeInfo?.path ?? null;
+
+  // Get the branch for the currently selected worktree
+  const selectedWorktree = useMemo(() => {
+    if (currentWorktreePath === null) {
+      return worktrees.find((w) => w.isMain);
+    } else {
+      return worktrees.find((w) => !w.isMain && pathsEqual(w.path, currentWorktreePath));
+    }
+  }, [worktrees, currentWorktreePath]);
+
+  const currentWorktreeBranch = selectedWorktree?.branch ?? null;
+  const selectedWorktreeBranch =
+    currentWorktreeBranch || worktrees.find((w) => w.isMain)?.branch || 'main';
+
+  // Branch suggestions
+  const [branchSuggestions, setBranchSuggestions] = useState<string[]>([]);
+
+  useEffect(() => {
+    const fetchBranches = async () => {
+      if (!currentProject) {
+        setBranchSuggestions([]);
+        return;
+      }
+
+      try {
+        const api = getElectronAPI();
+        if (!api?.worktree?.listBranches) {
+          setBranchSuggestions([]);
+          return;
+        }
+
+        const result = await api.worktree.listBranches(currentProject.path);
+        if (result.success && result.result?.branches) {
+          const localBranches = result.result.branches
+            .filter((b) => !b.isRemote)
+            .map((b) => b.name);
+          setBranchSuggestions(localBranches);
+        }
+      } catch (error) {
+        logger.error('Error fetching branches:', error);
+        setBranchSuggestions([]);
+      }
+    };
+
+    fetchBranches();
+  }, [currentProject, worktreeRefreshKey]);
+
+  // Branch card counts
+  const branchCardCounts = useMemo(() => {
+    return hookFeatures.reduce(
+      (counts, feature) => {
+        if (feature.status !== 'completed') {
+          const branch = feature.branchName ?? 'main';
+          counts[branch] = (counts[branch] || 0) + 1;
+        }
+        return counts;
+      },
+      {} as Record<string, number>
+    );
+  }, [hookFeatures]);
+
+  // Category suggestions
+  const categorySuggestions = useMemo(() => {
+    const featureCategories = hookFeatures.map((f) => f.category).filter(Boolean);
+    const allCategories = [...featureCategories, ...persistedCategories];
+    return [...new Set(allCategories)].sort();
+  }, [hookFeatures, persistedCategories]);
+
+  // Use persistence hook
+  const { persistFeatureCreate, persistFeatureUpdate, persistFeatureDelete } = useBoardPersistence({
+    currentProject,
+  });
+
+  // Follow-up state (simplified for graph view)
+  const [followUpFeature, setFollowUpFeature] = useState<Feature | null>(null);
+  const [followUpPrompt, setFollowUpPrompt] = useState('');
+  const [followUpImagePaths, setFollowUpImagePaths] = useState<any[]>([]);
+  const [followUpPreviewMap, setFollowUpPreviewMap] = useState<Map<string, string>>(new Map());
+
+  // In-progress features for shortcuts
+  const inProgressFeaturesForShortcuts = useMemo(() => {
+    return hookFeatures.filter((f) => {
+      const isRunning = runningAutoTasks.includes(f.id);
+      return isRunning || f.status === 'in_progress';
+    });
+  }, [hookFeatures, runningAutoTasks]);
+
+  // Board actions hook
+  const {
+    handleAddFeature,
+    handleUpdateFeature,
+    handleDeleteFeature,
+    handleStartImplementation,
+    handleResumeFeature,
+    handleViewOutput,
+    handleForceStopFeature,
+    handleOutputModalNumberKeyPress,
+  } = useBoardActions({
+    currentProject,
+    features: hookFeatures,
+    runningAutoTasks,
+    loadFeatures,
+    persistFeatureCreate,
+    persistFeatureUpdate,
+    persistFeatureDelete,
+    saveCategory,
+    setEditingFeature,
+    setShowOutputModal,
+    setOutputFeature,
+    followUpFeature,
+    followUpPrompt,
+    followUpImagePaths,
+    setFollowUpFeature,
+    setFollowUpPrompt,
+    setFollowUpImagePaths,
+    setFollowUpPreviewMap,
+    setShowFollowUpDialog: () => {},
+    inProgressFeaturesForShortcuts,
+    outputFeature,
+    projectPath: currentProject?.path || null,
+    onWorktreeCreated: () => setWorktreeRefreshKey((k) => k + 1),
+    onWorktreeAutoSelect: (newWorktree) => {
+      if (!currentProject) return;
+      const currentWorktrees = getWorktrees(currentProject.path);
+      const existingWorktree = currentWorktrees.find((w) => w.branch === newWorktree.branch);
+
+      if (!existingWorktree) {
+        const newWorktreeInfo = {
+          path: newWorktree.path,
+          branch: newWorktree.branch,
+          isMain: false,
+          isCurrent: false,
+          hasWorktree: true,
+        };
+        setWorktrees(currentProject.path, [...currentWorktrees, newWorktreeInfo]);
+      }
+      setCurrentWorktree(currentProject.path, newWorktree.path, newWorktree.branch);
+    },
+    currentWorktreeBranch,
+  });
+
+  // Handle add and start feature
+  const handleAddAndStartFeature = useCallback(
+    async (featureData: Parameters<typeof handleAddFeature>[0]) => {
+      const featuresBeforeIds = new Set(useAppStore.getState().features.map((f) => f.id));
+      await handleAddFeature(featureData);
+
+      const latestFeatures = useAppStore.getState().features;
+      const newFeature = latestFeatures.find((f) => !featuresBeforeIds.has(f.id));
+
+      if (newFeature) {
+        await handleStartImplementation(newFeature);
+      }
+    },
+    [handleAddFeature, handleStartImplementation]
+  );
+
+  if (!currentProject) {
+    return (
+      <div className="flex-1 flex items-center justify-center" data-testid="graph-view-no-project">
+        <p className="text-muted-foreground">No project selected</p>
+      </div>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex-1 flex items-center justify-center" data-testid="graph-view-loading">
+        <RefreshCw className="w-6 h-6 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="flex-1 flex flex-col overflow-hidden content-bg relative"
+      data-testid="graph-view-page"
+    >
+      {/* Graph View Content */}
+      <GraphView
+        features={hookFeatures}
+        runningAutoTasks={runningAutoTasks}
+        currentWorktreePath={currentWorktreePath}
+        currentWorktreeBranch={currentWorktreeBranch}
+        projectPath={currentProject?.path || null}
+        searchQuery={searchQuery}
+        onSearchQueryChange={setSearchQuery}
+        onEditFeature={(feature) => setEditingFeature(feature)}
+        onViewOutput={handleViewOutput}
+        onStartTask={handleStartImplementation}
+        onStopTask={handleForceStopFeature}
+        onResumeTask={handleResumeFeature}
+        onUpdateFeature={updateFeature}
+        onSpawnTask={(feature) => {
+          setSpawnParentFeature(feature);
+          setShowAddDialog(true);
+        }}
+        onDeleteTask={(feature) => handleDeleteFeature(feature.id)}
+      />
+
+      {/* Edit Feature Dialog */}
+      <EditFeatureDialog
+        feature={editingFeature}
+        onClose={() => setEditingFeature(null)}
+        onUpdate={handleUpdateFeature}
+        categorySuggestions={categorySuggestions}
+        branchSuggestions={branchSuggestions}
+        branchCardCounts={branchCardCounts}
+        currentBranch={currentWorktreeBranch || undefined}
+        isMaximized={false}
+        allFeatures={hookFeatures}
+      />
+
+      {/* Add Feature Dialog (for spawning) */}
+      <AddFeatureDialog
+        open={showAddDialog}
+        onOpenChange={(open) => {
+          setShowAddDialog(open);
+          if (!open) {
+            setSpawnParentFeature(null);
+          }
+        }}
+        onAdd={handleAddFeature}
+        onAddAndStart={handleAddAndStartFeature}
+        categorySuggestions={categorySuggestions}
+        branchSuggestions={branchSuggestions}
+        branchCardCounts={branchCardCounts}
+        defaultSkipTests={defaultSkipTests}
+        defaultBranch={selectedWorktreeBranch}
+        currentBranch={currentWorktreeBranch || undefined}
+        isMaximized={false}
+        parentFeature={spawnParentFeature}
+        allFeatures={hookFeatures}
+      />
+
+      {/* Agent Output Modal */}
+      <AgentOutputModal
+        open={showOutputModal}
+        onClose={() => setShowOutputModal(false)}
+        featureDescription={outputFeature?.description || ''}
+        featureId={outputFeature?.id || ''}
+        featureStatus={outputFeature?.status}
+        onNumberKeyPress={handleOutputModalNumberKeyPress}
+      />
+    </div>
+  );
+}

apps/ui/src/components/views/graph-view/components/graph-controls.tsx

@@ -31,7 +31,10 @@ export function GraphControls({
   return (
     <Panel position="bottom-left" className="flex flex-col gap-2">
       <TooltipProvider delayDuration={200}>
-        <div className="flex flex-col gap-1 p-1.5 rounded-lg bg-popover/90 backdrop-blur-sm border border-border shadow-lg text-popover-foreground">
+        <div
+          className="flex flex-col gap-1 p-1.5 rounded-lg backdrop-blur-sm border border-border shadow-lg text-popover-foreground"
+          style={{ backgroundColor: 'color-mix(in oklch, var(--popover) 90%, transparent)' }}
+        >
           {/* Zoom controls */}
           <Tooltip>
             <TooltipTrigger asChild>

apps/ui/src/components/views/graph-view/components/graph-filter-controls.tsx

@@ -110,7 +110,10 @@ export function GraphFilterControls({
   return (
     <Panel position="top-left" className="flex items-center gap-2">
       <TooltipProvider delayDuration={200}>
-        <div className="flex items-center gap-2 p-2 rounded-lg bg-popover/90 backdrop-blur-sm border border-border shadow-lg text-popover-foreground">
+        <div
+          className="flex items-center gap-2 p-2 rounded-lg backdrop-blur-sm border border-border shadow-lg text-popover-foreground"
+          style={{ backgroundColor: 'color-mix(in oklch, var(--popover) 90%, transparent)' }}
+        >
           {/* Category Filter Dropdown */}
           <Popover>
             <Tooltip>

apps/ui/src/components/views/graph-view/components/graph-legend.tsx

@@ -44,7 +44,10 @@ const legendItems = [
 export function GraphLegend() {
   return (
     <Panel position="bottom-right" className="pointer-events-none">
-      <div className="flex flex-wrap gap-3 p-2 rounded-lg bg-popover/90 backdrop-blur-sm border border-border shadow-lg pointer-events-auto text-popover-foreground">
+      <div
+        className="flex flex-wrap gap-3 p-2 rounded-lg backdrop-blur-sm border border-border shadow-lg pointer-events-auto text-popover-foreground"
+        style={{ backgroundColor: 'color-mix(in oklch, var(--popover) 90%, transparent)' }}
+      >
         {legendItems.map((item) => {
           const Icon = item.icon;
           return (

apps/ui/src/components/views/graph-view/components/task-node.tsx

@@ -75,6 +75,24 @@ const priorityConfig = {
   3: { label: 'Low', colorClass: 'bg-[var(--status-info)] text-white' },
 };
 
+// Helper function to get border style with opacity (like KanbanCard does)
+function getCardBorderStyle(
+  enabled: boolean,
+  opacity: number,
+  borderColor: string
+): React.CSSProperties {
+  if (!enabled) {
+    return { borderWidth: '0px', borderColor: 'transparent' };
+  }
+  if (opacity !== 100) {
+    return {
+      borderWidth: '2px',
+      borderColor: `color-mix(in oklch, ${borderColor} ${opacity}%, transparent)`,
+    };
+  }
+  return { borderWidth: '2px' };
+}
+
 export const TaskNode = memo(function TaskNode({ data, selected }: TaskNodeProps) {
   // Handle pipeline statuses by treating them like in_progress
   const status = data.status || 'backlog';
@@ -91,6 +109,28 @@ export const TaskNode = memo(function TaskNode({ data, selected }: TaskNodeProps
   // Task is stopped if it's in_progress but not actively running
   const isStopped = data.status === 'in_progress' && !data.isRunning;
 
+  // Background/theme settings with defaults
+  const cardOpacity = data.cardOpacity ?? 100;
+  const glassmorphism = data.cardGlassmorphism ?? true;
+  const cardBorderEnabled = data.cardBorderEnabled ?? true;
+  const cardBorderOpacity = data.cardBorderOpacity ?? 100;
+
+  // Get the border color based on status and error state
+  const borderColor = data.error
+    ? 'var(--status-error)'
+    : config.borderClass.includes('border-border')
+      ? 'var(--border)'
+      : config.borderClass.includes('status-in-progress')
+        ? 'var(--status-in-progress)'
+        : config.borderClass.includes('status-waiting')
+          ? 'var(--status-waiting)'
+          : config.borderClass.includes('status-success')
+            ? 'var(--status-success)'
+            : 'var(--border)';
+
+  // Get computed border style
+  const borderStyle = getCardBorderStyle(cardBorderEnabled, cardBorderOpacity, borderColor);
+
   return (
     <>
       {/* Target handle (left side - receives dependencies) */}
@@ -109,22 +149,26 @@ export const TaskNode = memo(function TaskNode({ data, selected }: TaskNodeProps
 
       <div
         className={cn(
-          'min-w-[240px] max-w-[280px] rounded-xl border-2 bg-card shadow-md',
+          'min-w-[240px] max-w-[280px] rounded-xl shadow-md relative',
           'transition-all duration-300',
-          config.borderClass,
           selected && 'ring-2 ring-brand-500 ring-offset-2 ring-offset-background',
           data.isRunning && 'animate-pulse-subtle',
-          data.error && 'border-[var(--status-error)]',
           // Filter highlight states
           isMatched && 'graph-node-matched',
           isHighlighted && !isMatched && 'graph-node-highlighted',
           isDimmed && 'graph-node-dimmed'
         )}
+        style={borderStyle}
       >
+        {/* Background layer with opacity control - like KanbanCard */}
+        <div
+          className={cn('absolute inset-0 rounded-xl bg-card', glassmorphism && 'backdrop-blur-sm')}
+          style={{ opacity: cardOpacity / 100 }}
+        />
         {/* Header with status and actions */}
         <div
           className={cn(
-            'flex items-center justify-between px-3 py-2 rounded-t-[10px]',
+            'relative flex items-center justify-between px-3 py-2 rounded-t-[10px]',
             config.bgClass
           )}
         >
@@ -301,7 +345,7 @@ export const TaskNode = memo(function TaskNode({ data, selected }: TaskNodeProps
         </div>
 
         {/* Content */}
-        <div className="px-3 py-2">
+        <div className="relative px-3 py-2">
           {/* Category */}
           <span className="text-[10px] text-muted-foreground font-medium uppercase tracking-wide">
             {data.category}

apps/ui/src/components/views/graph-view/graph-canvas.tsx

@@ -15,7 +15,8 @@ import {
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 
-import { Feature } from '@/store/app-store';
+import { Feature, useAppStore } from '@/store/app-store';
+import { themeOptions } from '@/config/theme-options';
 import {
   TaskNode,
   DependencyEdge,
@@ -47,6 +48,13 @@ const edgeTypes: any = {
   dependency: DependencyEdge,
 };
 
+interface BackgroundSettings {
+  cardOpacity: number;
+  cardGlassmorphism: boolean;
+  cardBorderEnabled: boolean;
+  cardBorderOpacity: number;
+}
+
 interface GraphCanvasProps {
   features: Feature[];
   runningAutoTasks: string[];
@@ -56,6 +64,7 @@ interface GraphCanvasProps {
   nodeActionCallbacks?: NodeActionCallbacks;
   onCreateDependency?: (sourceId: string, targetId: string) => Promise<boolean>;
   backgroundStyle?: React.CSSProperties;
+  backgroundSettings?: BackgroundSettings;
   className?: string;
 }
 
@@ -68,11 +77,42 @@ function GraphCanvasInner({
   nodeActionCallbacks,
   onCreateDependency,
   backgroundStyle,
+  backgroundSettings,
   className,
 }: GraphCanvasProps) {
   const [isLocked, setIsLocked] = useState(false);
   const [layoutDirection, setLayoutDirection] = useState<'LR' | 'TB'>('LR');
 
+  // Determine React Flow color mode based on current theme
+  const effectiveTheme = useAppStore((state) => state.getEffectiveTheme());
+  const [systemColorMode, setSystemColorMode] = useState<'dark' | 'light'>(() => {
+    if (typeof window === 'undefined') return 'dark';
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  });
+
+  useEffect(() => {
+    if (effectiveTheme !== 'system') return;
+    if (typeof window === 'undefined') return;
+
+    const mql = window.matchMedia('(prefers-color-scheme: dark)');
+    const update = () => setSystemColorMode(mql.matches ? 'dark' : 'light');
+    update();
+
+    // Safari < 14 fallback
+    if (mql.addEventListener) {
+      mql.addEventListener('change', update);
+      return () => mql.removeEventListener('change', update);
+    }
+    // eslint-disable-next-line deprecation/deprecation
+    mql.addListener(update);
+    // eslint-disable-next-line deprecation/deprecation
+    return () => mql.removeListener(update);
+  }, [effectiveTheme]);
+
+  const themeOption = themeOptions.find((t) => t.value === effectiveTheme);
+  const colorMode =
+    effectiveTheme === 'system' ? systemColorMode : themeOption?.isDark ? 'dark' : 'light';
+
   // Filter state (category, status, and negative toggle are local to graph view)
   const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
   const [selectedStatuses, setSelectedStatuses] = useState<string[]>([]);
@@ -98,6 +138,7 @@ function GraphCanvasInner({
     runningAutoTasks,
     filterResult,
     actionCallbacks: nodeActionCallbacks,
+    backgroundSettings,
   });
 
   // Apply layout
@@ -234,6 +275,7 @@ function GraphCanvasInner({
         isValidConnection={isValidConnection}
         nodeTypes={nodeTypes}
         edgeTypes={edgeTypes}
+        colorMode={colorMode}
         fitView
         fitViewOptions={{ padding: 0.2 }}
         minZoom={0.1}
@@ -256,7 +298,8 @@ function GraphCanvasInner({
           nodeStrokeWidth={3}
           zoomable
           pannable
-          className="!bg-popover/90 !border-border rounded-lg shadow-lg"
+          className="border-border! rounded-lg shadow-lg"
+          style={{ backgroundColor: 'color-mix(in oklch, var(--popover) 90%, transparent)' }}
         />
 
         <GraphControls
@@ -281,7 +324,10 @@ function GraphCanvasInner({
         {/* Empty state when all nodes are filtered out */}
         {filterResult.hasActiveFilter && filterResult.matchedNodeIds.size === 0 && (
           <Panel position="top-center" className="mt-20">
-            <div className="flex flex-col items-center gap-3 p-6 rounded-lg bg-popover/95 backdrop-blur-sm border border-border shadow-lg text-popover-foreground">
+            <div
+              className="flex flex-col items-center gap-3 p-6 rounded-lg backdrop-blur-sm border border-border shadow-lg text-popover-foreground"
+              style={{ backgroundColor: 'color-mix(in oklch, var(--popover) 95%, transparent)' }}
+            >
               <SearchX className="w-10 h-10 text-muted-foreground" />
               <div className="text-center">
                 <p className="text-sm font-medium">No matching tasks</p>

apps/ui/src/components/views/graph-view/graph-view.tsx

@@ -44,7 +44,7 @@ export function GraphView({
   const { currentProject } = useAppStore();
 
   // Use the same background hook as the board view
-  const { backgroundImageStyle } = useBoardBackground({ currentProject });
+  const { backgroundImageStyle, backgroundSettings } = useBoardBackground({ currentProject });
 
   // Filter features by current worktree (same logic as board view)
   const filteredFeatures = useMemo(() => {
@@ -213,6 +213,7 @@ export function GraphView({
         nodeActionCallbacks={nodeActionCallbacks}
         onCreateDependency={handleCreateDependency}
         backgroundStyle={backgroundImageStyle}
+        backgroundSettings={backgroundSettings}
         className="h-full"
       />
     </div>

apps/ui/src/components/views/graph-view/hooks/use-graph-nodes.ts

@@ -18,6 +18,11 @@ export interface TaskNodeData extends Feature {
   isMatched?: boolean;
   isHighlighted?: boolean;
   isDimmed?: boolean;
+  // Background/theme settings
+  cardOpacity?: number;
+  cardGlassmorphism?: boolean;
+  cardBorderEnabled?: boolean;
+  cardBorderOpacity?: number;
   // Action callbacks
   onViewLogs?: () => void;
   onViewDetails?: () => void;
@@ -48,11 +53,19 @@ export interface NodeActionCallbacks {
   onDeleteDependency?: (sourceId: string, targetId: string) => void;
 }
 
+interface BackgroundSettings {
+  cardOpacity: number;
+  cardGlassmorphism: boolean;
+  cardBorderEnabled: boolean;
+  cardBorderOpacity: number;
+}
+
 interface UseGraphNodesProps {
   features: Feature[];
   runningAutoTasks: string[];
   filterResult?: GraphFilterResult;
   actionCallbacks?: NodeActionCallbacks;
+  backgroundSettings?: BackgroundSettings;
 }
 
 /**
@@ -64,6 +77,7 @@ export function useGraphNodes({
   runningAutoTasks,
   filterResult,
   actionCallbacks,
+  backgroundSettings,
 }: UseGraphNodesProps) {
   const { nodes, edges } = useMemo(() => {
     const nodeList: TaskNode[] = [];
@@ -102,6 +116,11 @@ export function useGraphNodes({
           isMatched,
           isHighlighted,
           isDimmed,
+          // Background/theme settings
+          cardOpacity: backgroundSettings?.cardOpacity,
+          cardGlassmorphism: backgroundSettings?.cardGlassmorphism,
+          cardBorderEnabled: backgroundSettings?.cardBorderEnabled,
+          cardBorderOpacity: backgroundSettings?.cardBorderOpacity,
           // Action callbacks (bound to this feature's ID)
           onViewLogs: actionCallbacks?.onViewLogs
             ? () => actionCallbacks.onViewLogs!(feature.id)
@@ -163,7 +182,7 @@ export function useGraphNodes({
     });
 
     return { nodes: nodeList, edges: edgeList };
-  }, [features, runningAutoTasks, filterResult, actionCallbacks]);
+  }, [features, runningAutoTasks, filterResult, actionCallbacks, backgroundSettings]);
 
   return { nodes, edges };
 }

apps/ui/src/components/views/ideation-view/components/ideation-dashboard.tsx

@@ -3,7 +3,7 @@
  * First page users see - shows all ideas ready for accept/reject
  */
 
-import { useState, useMemo } from 'react';
+import { useState, useMemo, useEffect, useCallback } from 'react';
 import { Loader2, AlertCircle, Plus, X, Sparkles, Lightbulb } from 'lucide-react';
 import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
@@ -17,6 +17,7 @@ import type { AnalysisSuggestion } from '@automaker/types';
 
 interface IdeationDashboardProps {
   onGenerateIdeas: () => void;
+  onAcceptAllReady?: (isReady: boolean, count: number, handler: () => Promise<void>) => void;
 }
 
 function SuggestionCard({
@@ -37,14 +38,16 @@ function SuggestionCard({
       <CardContent className="p-4">
         <div className="flex items-start gap-4">
           <div className="flex-1 min-w-0">
-            <div className="flex items-center gap-2 mb-1">
-              <h4 className="font-medium">{suggestion.title}</h4>
-              <Badge variant="outline" className="text-xs">
-                {suggestion.priority}
-              </Badge>
-              <Badge variant="secondary" className="text-xs">
-                {job.prompt.title}
-              </Badge>
+            <div className="flex items-start gap-2 mb-1">
+              <h4 className="font-medium shrink-0">{suggestion.title}</h4>
+              <div className="flex items-center gap-2 flex-wrap">
+                <Badge variant="outline" className="text-xs whitespace-nowrap">
+                  {suggestion.priority}
+                </Badge>
+                <Badge variant="secondary" className="text-xs whitespace-nowrap">
+                  {job.prompt.title}
+                </Badge>
+              </div>
             </div>
             <p className="text-sm text-muted-foreground">{suggestion.description}</p>
             {suggestion.rationale && (
@@ -166,11 +169,12 @@ function TagFilter({
   );
 }
 
-export function IdeationDashboard({ onGenerateIdeas }: IdeationDashboardProps) {
+export function IdeationDashboard({ onGenerateIdeas, onAcceptAllReady }: IdeationDashboardProps) {
   const currentProject = useAppStore((s) => s.currentProject);
   const generationJobs = useIdeationStore((s) => s.generationJobs);
   const removeSuggestionFromJob = useIdeationStore((s) => s.removeSuggestionFromJob);
   const [addingId, setAddingId] = useState<string | null>(null);
+  const [isAcceptingAll, setIsAcceptingAll] = useState(false);
   const [selectedTags, setSelectedTags] = useState<Set<string>>(new Set());
 
   // Get jobs for current project only (memoized to prevent unnecessary re-renders)
@@ -270,6 +274,54 @@ export function IdeationDashboard({ onGenerateIdeas }: IdeationDashboardProps) {
     toast.info('Idea removed');
   };
 
+  // Accept all filtered suggestions
+  const handleAcceptAll = useCallback(async () => {
+    if (!currentProject?.path || filteredSuggestions.length === 0) {
+      return;
+    }
+
+    setIsAcceptingAll(true);
+    const api = getElectronAPI();
+    let successCount = 0;
+    let failCount = 0;
+
+    // Process all filtered suggestions
+    for (const { suggestion, job } of filteredSuggestions) {
+      try {
+        const result = await api.ideation?.addSuggestionToBoard(currentProject.path, suggestion);
+        if (result?.success) {
+          removeSuggestionFromJob(job.id, suggestion.id);
+          successCount++;
+        } else {
+          failCount++;
+        }
+      } catch (error) {
+        console.error('Failed to add suggestion to board:', error);
+        failCount++;
+      }
+    }
+
+    setIsAcceptingAll(false);
+
+    if (successCount > 0 && failCount === 0) {
+      toast.success(`Added ${successCount} idea${successCount > 1 ? 's' : ''} to board`);
+    } else if (successCount > 0 && failCount > 0) {
+      toast.warning(
+        `Added ${successCount} idea${successCount > 1 ? 's' : ''}, ${failCount} failed`
+      );
+    } else {
+      toast.error('Failed to add ideas to board');
+    }
+  }, [currentProject?.path, filteredSuggestions, removeSuggestionFromJob]);
+
+  // Notify parent about accept all readiness
+  useEffect(() => {
+    if (onAcceptAllReady) {
+      const isReady = filteredSuggestions.length > 0 && !isAcceptingAll && !addingId;
+      onAcceptAllReady(isReady, filteredSuggestions.length, handleAcceptAll);
+    }
+  }, [filteredSuggestions.length, isAcceptingAll, addingId, handleAcceptAll, onAcceptAllReady]);
+
   const isEmpty = allSuggestions.length === 0 && activeJobs.length === 0;
 
   return (

apps/ui/src/components/views/ideation-view/index.tsx

@@ -3,7 +3,7 @@
  * Dashboard-first design with Generate Ideas flow
  */
 
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
 import { useIdeationStore } from '@/store/ideation-store';
 import { useAppStore } from '@/store/app-store';
 import { PromptCategoryGrid } from './components/prompt-category-grid';
@@ -11,7 +11,7 @@ import { PromptList } from './components/prompt-list';
 import { IdeationDashboard } from './components/ideation-dashboard';
 import { useGuidedPrompts } from '@/hooks/use-guided-prompts';
 import { Button } from '@/components/ui/button';
-import { ArrowLeft, ChevronRight, Lightbulb } from 'lucide-react';
+import { ArrowLeft, ChevronRight, Lightbulb, CheckCheck, Loader2 } from 'lucide-react';
 import type { IdeaCategory } from '@automaker/types';
 import type { IdeationMode } from '@/store/ideation-store';
 
@@ -67,12 +67,20 @@ function IdeationHeader({
   onNavigate,
   onGenerateIdeas,
   onBack,
+  acceptAllReady,
+  acceptAllCount,
+  onAcceptAll,
+  isAcceptingAll,
 }: {
   currentMode: IdeationMode;
   selectedCategory: IdeaCategory | null;
   onNavigate: (mode: IdeationMode, category?: IdeaCategory | null) => void;
   onGenerateIdeas: () => void;
   onBack: () => void;
+  acceptAllReady: boolean;
+  acceptAllCount: number;
+  onAcceptAll: () => void;
+  isAcceptingAll: boolean;
 }) {
   const { getCategoryById } = useGuidedPrompts();
   const showBackButton = currentMode === 'prompts';
@@ -120,6 +128,21 @@ function IdeationHeader({
       </div>
 
       <div className="flex gap-2 items-center">
+        {currentMode === 'dashboard' && acceptAllReady && (
+          <Button
+            onClick={onAcceptAll}
+            variant="outline"
+            className="gap-2"
+            disabled={isAcceptingAll}
+          >
+            {isAcceptingAll ? (
+              <Loader2 className="w-4 h-4 animate-spin" />
+            ) : (
+              <CheckCheck className="w-4 h-4" />
+            )}
+            Accept All ({acceptAllCount})
+          </Button>
+        )}
         <Button onClick={onGenerateIdeas} className="gap-2">
           <Lightbulb className="w-4 h-4" />
           Generate Ideas
@@ -133,6 +156,32 @@ export function IdeationView() {
   const currentProject = useAppStore((s) => s.currentProject);
   const { currentMode, selectedCategory, setMode, setCategory } = useIdeationStore();
 
+  // Accept all state
+  const [acceptAllReady, setAcceptAllReady] = useState(false);
+  const [acceptAllCount, setAcceptAllCount] = useState(0);
+  const [acceptAllHandler, setAcceptAllHandler] = useState<(() => Promise<void>) | null>(null);
+  const [isAcceptingAll, setIsAcceptingAll] = useState(false);
+
+  const handleAcceptAllReady = useCallback(
+    (isReady: boolean, count: number, handler: () => Promise<void>) => {
+      setAcceptAllReady(isReady);
+      setAcceptAllCount(count);
+      setAcceptAllHandler(() => handler);
+    },
+    []
+  );
+
+  const handleAcceptAll = useCallback(async () => {
+    if (acceptAllHandler) {
+      setIsAcceptingAll(true);
+      try {
+        await acceptAllHandler();
+      } finally {
+        setIsAcceptingAll(false);
+      }
+    }
+  }, [acceptAllHandler]);
+
   const handleNavigate = useCallback(
     (mode: IdeationMode, category?: IdeaCategory | null) => {
       setMode(mode);
@@ -192,10 +241,19 @@ export function IdeationView() {
         onNavigate={handleNavigate}
         onGenerateIdeas={handleGenerateIdeas}
         onBack={handleBackFromPrompts}
+        acceptAllReady={acceptAllReady}
+        acceptAllCount={acceptAllCount}
+        onAcceptAll={handleAcceptAll}
+        isAcceptingAll={isAcceptingAll}
       />
 
       {/* Dashboard - main view */}
-      {currentMode === 'dashboard' && <IdeationDashboard onGenerateIdeas={handleGenerateIdeas} />}
+      {currentMode === 'dashboard' && (
+        <IdeationDashboard
+          onGenerateIdeas={handleGenerateIdeas}
+          onAcceptAllReady={handleAcceptAllReady}
+        />
+      )}
 
       {/* Prompts - category selection */}
       {currentMode === 'prompts' && !selectedCategory && (

apps/ui/src/components/views/memory-view.tsx

@@ -0,0 +1,624 @@
+import { useEffect, useState, useCallback } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import { useAppStore } from '@/store/app-store';
+import { getElectronAPI } from '@/lib/electron';
+import { Button } from '@/components/ui/button';
+import { Card } from '@/components/ui/card';
+import {
+  RefreshCw,
+  FileText,
+  Trash2,
+  Save,
+  Brain,
+  Eye,
+  Pencil,
+  FilePlus,
+  MoreVertical,
+} from 'lucide-react';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { cn } from '@/lib/utils';
+import { Markdown } from '../ui/markdown';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+
+const logger = createLogger('MemoryView');
+
+interface MemoryFile {
+  name: string;
+  content?: string;
+  path: string;
+}
+
+export function MemoryView() {
+  const { currentProject } = useAppStore();
+  const [memoryFiles, setMemoryFiles] = useState<MemoryFile[]>([]);
+  const [selectedFile, setSelectedFile] = useState<MemoryFile | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSaving, setIsSaving] = useState(false);
+  const [hasChanges, setHasChanges] = useState(false);
+  const [editedContent, setEditedContent] = useState('');
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+  const [isRenameDialogOpen, setIsRenameDialogOpen] = useState(false);
+  const [renameFileName, setRenameFileName] = useState('');
+  const [isPreviewMode, setIsPreviewMode] = useState(true);
+
+  // Create Memory file modal state
+  const [isCreateMemoryOpen, setIsCreateMemoryOpen] = useState(false);
+  const [newMemoryName, setNewMemoryName] = useState('');
+  const [newMemoryContent, setNewMemoryContent] = useState('');
+
+  // Get memory directory path
+  const getMemoryPath = useCallback(() => {
+    if (!currentProject) return null;
+    return `${currentProject.path}/.automaker/memory`;
+  }, [currentProject]);
+
+  const isMarkdownFile = (filename: string): boolean => {
+    const ext = filename.toLowerCase().substring(filename.lastIndexOf('.'));
+    return ext === '.md' || ext === '.markdown';
+  };
+
+  // Load memory files
+  const loadMemoryFiles = useCallback(async () => {
+    const memoryPath = getMemoryPath();
+    if (!memoryPath) return;
+
+    setIsLoading(true);
+    try {
+      const api = getElectronAPI();
+
+      // Ensure memory directory exists
+      await api.mkdir(memoryPath);
+
+      // Read directory contents
+      const result = await api.readdir(memoryPath);
+      if (result.success && result.entries) {
+        const files: MemoryFile[] = result.entries
+          .filter((entry) => entry.isFile && isMarkdownFile(entry.name))
+          .map((entry) => ({
+            name: entry.name,
+            path: `${memoryPath}/${entry.name}`,
+          }));
+        setMemoryFiles(files);
+      }
+    } catch (error) {
+      logger.error('Failed to load memory files:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [getMemoryPath]);
+
+  useEffect(() => {
+    loadMemoryFiles();
+  }, [loadMemoryFiles]);
+
+  // Load selected file content
+  const loadFileContent = useCallback(async (file: MemoryFile) => {
+    try {
+      const api = getElectronAPI();
+      const result = await api.readFile(file.path);
+      if (result.success && result.content !== undefined) {
+        setEditedContent(result.content);
+        setSelectedFile({ ...file, content: result.content });
+        setHasChanges(false);
+      }
+    } catch (error) {
+      logger.error('Failed to load file content:', error);
+    }
+  }, []);
+
+  // Select a file
+  const handleSelectFile = (file: MemoryFile) => {
+    if (hasChanges) {
+      // Could add a confirmation dialog here
+    }
+    loadFileContent(file);
+    setIsPreviewMode(true);
+  };
+
+  // Save current file
+  const saveFile = async () => {
+    if (!selectedFile) return;
+
+    setIsSaving(true);
+    try {
+      const api = getElectronAPI();
+      await api.writeFile(selectedFile.path, editedContent);
+      setSelectedFile({ ...selectedFile, content: editedContent });
+      setHasChanges(false);
+    } catch (error) {
+      logger.error('Failed to save file:', error);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  // Handle content change
+  const handleContentChange = (value: string) => {
+    setEditedContent(value);
+    setHasChanges(true);
+  };
+
+  // Handle create memory file
+  const handleCreateMemory = async () => {
+    const memoryPath = getMemoryPath();
+    if (!memoryPath || !newMemoryName.trim()) return;
+
+    try {
+      const api = getElectronAPI();
+      let filename = newMemoryName.trim();
+
+      // Add .md extension if not provided
+      if (!filename.includes('.')) {
+        filename += '.md';
+      }
+
+      const filePath = `${memoryPath}/${filename}`;
+
+      // Write memory file
+      await api.writeFile(filePath, newMemoryContent);
+
+      // Reload files
+      await loadMemoryFiles();
+
+      // Reset and close modal
+      setIsCreateMemoryOpen(false);
+      setNewMemoryName('');
+      setNewMemoryContent('');
+    } catch (error) {
+      logger.error('Failed to create memory file:', error);
+      setIsCreateMemoryOpen(false);
+      setNewMemoryName('');
+      setNewMemoryContent('');
+    }
+  };
+
+  // Delete selected file
+  const handleDeleteFile = async () => {
+    if (!selectedFile) return;
+
+    try {
+      const api = getElectronAPI();
+      await api.deleteFile(selectedFile.path);
+
+      setIsDeleteDialogOpen(false);
+      setSelectedFile(null);
+      setEditedContent('');
+      setHasChanges(false);
+      await loadMemoryFiles();
+    } catch (error) {
+      logger.error('Failed to delete file:', error);
+    }
+  };
+
+  // Rename selected file
+  const handleRenameFile = async () => {
+    const memoryPath = getMemoryPath();
+    if (!selectedFile || !memoryPath || !renameFileName.trim()) return;
+
+    let newName = renameFileName.trim();
+    // Add .md extension if not provided
+    if (!newName.includes('.')) {
+      newName += '.md';
+    }
+
+    if (newName === selectedFile.name) {
+      setIsRenameDialogOpen(false);
+      return;
+    }
+
+    try {
+      const api = getElectronAPI();
+      const newPath = `${memoryPath}/${newName}`;
+
+      // Check if file with new name already exists
+      const exists = await api.exists(newPath);
+      if (exists) {
+        logger.error('A file with this name already exists');
+        return;
+      }
+
+      // Read current file content
+      const result = await api.readFile(selectedFile.path);
+      if (!result.success || result.content === undefined) {
+        logger.error('Failed to read file for rename');
+        return;
+      }
+
+      // Write to new path
+      await api.writeFile(newPath, result.content);
+
+      // Delete old file
+      await api.deleteFile(selectedFile.path);
+
+      setIsRenameDialogOpen(false);
+      setRenameFileName('');
+
+      // Reload files and select the renamed file
+      await loadMemoryFiles();
+
+      // Update selected file with new name and path
+      const renamedFile: MemoryFile = {
+        name: newName,
+        path: newPath,
+        content: result.content,
+      };
+      setSelectedFile(renamedFile);
+    } catch (error) {
+      logger.error('Failed to rename file:', error);
+    }
+  };
+
+  // Delete file from list (used by dropdown)
+  const handleDeleteFromList = async (file: MemoryFile) => {
+    try {
+      const api = getElectronAPI();
+      await api.deleteFile(file.path);
+
+      // Clear selection if this was the selected file
+      if (selectedFile?.path === file.path) {
+        setSelectedFile(null);
+        setEditedContent('');
+        setHasChanges(false);
+      }
+
+      await loadMemoryFiles();
+    } catch (error) {
+      logger.error('Failed to delete file:', error);
+    }
+  };
+
+  if (!currentProject) {
+    return (
+      <div className="flex-1 flex items-center justify-center" data-testid="memory-view-no-project">
+        <p className="text-muted-foreground">No project selected</p>
+      </div>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex-1 flex items-center justify-center" data-testid="memory-view-loading">
+        <RefreshCw className="w-6 h-6 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex-1 flex flex-col overflow-hidden content-bg" data-testid="memory-view">
+      {/* Header */}
+      <div className="flex items-center justify-between p-4 border-b border-border bg-glass backdrop-blur-md">
+        <div className="flex items-center gap-3">
+          <Brain className="w-5 h-5 text-muted-foreground" />
+          <div>
+            <h1 className="text-xl font-bold">Memory Layer</h1>
+            <p className="text-sm text-muted-foreground">
+              View and edit AI memory files for this project
+            </p>
+          </div>
+        </div>
+        <div className="flex gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={loadMemoryFiles}
+            data-testid="refresh-memory-button"
+          >
+            <RefreshCw className="w-4 h-4 mr-2" />
+            Refresh
+          </Button>
+          <Button
+            size="sm"
+            onClick={() => setIsCreateMemoryOpen(true)}
+            data-testid="create-memory-button"
+          >
+            <FilePlus className="w-4 h-4 mr-2" />
+            Create Memory File
+          </Button>
+        </div>
+      </div>
+
+      {/* Main content area with file list and editor */}
+      <div className="flex-1 flex overflow-hidden">
+        {/* Left Panel - File List */}
+        <div className="w-64 border-r border-border flex flex-col overflow-hidden">
+          <div className="p-3 border-b border-border">
+            <h2 className="text-sm font-semibold text-muted-foreground">
+              Memory Files ({memoryFiles.length})
+            </h2>
+          </div>
+          <div className="flex-1 overflow-y-auto p-2" data-testid="memory-file-list">
+            {memoryFiles.length === 0 ? (
+              <div className="flex flex-col items-center justify-center h-full text-center p-4">
+                <Brain className="w-8 h-8 text-muted-foreground mb-2" />
+                <p className="text-sm text-muted-foreground">
+                  No memory files yet.
+                  <br />
+                  Create a memory file to get started.
+                </p>
+              </div>
+            ) : (
+              <div className="space-y-1">
+                {memoryFiles.map((file) => (
+                  <div
+                    key={file.path}
+                    onClick={() => handleSelectFile(file)}
+                    className={cn(
+                      'group w-full flex items-center gap-2 px-3 py-2 rounded-lg transition-colors cursor-pointer',
+                      selectedFile?.path === file.path
+                        ? 'bg-primary/20 text-foreground border border-primary/30'
+                        : 'text-muted-foreground hover:bg-accent hover:text-foreground'
+                    )}
+                    data-testid={`memory-file-${file.name}`}
+                  >
+                    <FileText className="w-4 h-4 flex-shrink-0" />
+                    <div className="min-w-0 flex-1">
+                      <span className="truncate text-sm block">{file.name}</span>
+                    </div>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <button
+                          onClick={(e) => e.stopPropagation()}
+                          className="opacity-0 group-hover:opacity-100 p-1 hover:bg-accent rounded transition-opacity"
+                          data-testid={`memory-file-menu-${file.name}`}
+                        >
+                          <MoreVertical className="w-4 h-4" />
+                        </button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end">
+                        <DropdownMenuItem
+                          onClick={() => {
+                            setRenameFileName(file.name);
+                            setSelectedFile(file);
+                            setIsRenameDialogOpen(true);
+                          }}
+                          data-testid={`rename-memory-file-${file.name}`}
+                        >
+                          <Pencil className="w-4 h-4 mr-2" />
+                          Rename
+                        </DropdownMenuItem>
+                        <DropdownMenuItem
+                          onClick={() => handleDeleteFromList(file)}
+                          className="text-red-500 focus:text-red-500"
+                          data-testid={`delete-memory-file-${file.name}`}
+                        >
+                          <Trash2 className="w-4 h-4 mr-2" />
+                          Delete
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Right Panel - Editor/Preview */}
+        <div className="flex-1 flex flex-col overflow-hidden">
+          {selectedFile ? (
+            <>
+              {/* File toolbar */}
+              <div className="flex items-center justify-between p-3 border-b border-border bg-card">
+                <div className="flex items-center gap-2 min-w-0">
+                  <FileText className="w-4 h-4 text-muted-foreground flex-shrink-0" />
+                  <span className="text-sm font-medium truncate">{selectedFile.name}</span>
+                </div>
+                <div className="flex gap-2">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => setIsPreviewMode(!isPreviewMode)}
+                    data-testid="toggle-preview-mode"
+                  >
+                    {isPreviewMode ? (
+                      <>
+                        <Pencil className="w-4 h-4 mr-2" />
+                        Edit
+                      </>
+                    ) : (
+                      <>
+                        <Eye className="w-4 h-4 mr-2" />
+                        Preview
+                      </>
+                    )}
+                  </Button>
+                  <Button
+                    size="sm"
+                    onClick={saveFile}
+                    disabled={!hasChanges || isSaving}
+                    data-testid="save-memory-file"
+                  >
+                    <Save className="w-4 h-4 mr-2" />
+                    {isSaving ? 'Saving...' : hasChanges ? 'Save' : 'Saved'}
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => setIsDeleteDialogOpen(true)}
+                    className="text-red-500 hover:text-red-400 hover:border-red-500/50"
+                    data-testid="delete-memory-file"
+                  >
+                    <Trash2 className="w-4 h-4" />
+                  </Button>
+                </div>
+              </div>
+
+              {/* Content area */}
+              <div className="flex-1 overflow-hidden p-4">
+                {isPreviewMode ? (
+                  <Card className="h-full overflow-auto p-4" data-testid="markdown-preview">
+                    <Markdown>{editedContent}</Markdown>
+                  </Card>
+                ) : (
+                  <Card className="h-full overflow-hidden">
+                    <textarea
+                      className="w-full h-full p-4 font-mono text-sm bg-transparent resize-none focus:outline-none"
+                      value={editedContent}
+                      onChange={(e) => handleContentChange(e.target.value)}
+                      placeholder="Enter memory content here..."
+                      spellCheck={false}
+                      data-testid="memory-editor"
+                    />
+                  </Card>
+                )}
+              </div>
+            </>
+          ) : (
+            <div className="flex-1 flex items-center justify-center">
+              <div className="text-center">
+                <Brain className="w-12 h-12 text-muted-foreground mx-auto mb-3" />
+                <p className="text-foreground-secondary">Select a file to view or edit</p>
+                <p className="text-muted-foreground text-sm mt-1">
+                  Memory files help AI agents learn from past interactions
+                </p>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Create Memory Dialog */}
+      <Dialog open={isCreateMemoryOpen} onOpenChange={setIsCreateMemoryOpen}>
+        <DialogContent
+          data-testid="create-memory-dialog"
+          className="w-[60vw] max-w-[60vw] max-h-[80vh] flex flex-col"
+        >
+          <DialogHeader>
+            <DialogTitle>Create Memory File</DialogTitle>
+            <DialogDescription>
+              Create a new memory file to store learnings and patterns for AI agents.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4 py-4 flex-1 overflow-auto">
+            <div className="space-y-2">
+              <Label htmlFor="memory-filename">File Name</Label>
+              <Input
+                id="memory-filename"
+                value={newMemoryName}
+                onChange={(e) => setNewMemoryName(e.target.value)}
+                placeholder="my-learnings.md"
+                data-testid="new-memory-name"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="memory-content">Content</Label>
+              <textarea
+                id="memory-content"
+                value={newMemoryContent}
+                onChange={(e) => setNewMemoryContent(e.target.value)}
+                placeholder="Enter your memory content here..."
+                className="w-full h-60 p-3 font-mono text-sm bg-background border border-border rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent"
+                spellCheck={false}
+                data-testid="new-memory-content"
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setIsCreateMemoryOpen(false);
+                setNewMemoryName('');
+                setNewMemoryContent('');
+              }}
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={handleCreateMemory}
+              disabled={!newMemoryName.trim()}
+              data-testid="confirm-create-memory"
+            >
+              Create
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Delete Confirmation Dialog */}
+      <Dialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
+        <DialogContent data-testid="delete-memory-dialog">
+          <DialogHeader>
+            <DialogTitle>Delete Memory File</DialogTitle>
+            <DialogDescription>
+              Are you sure you want to delete "{selectedFile?.name}"? This action cannot be undone.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsDeleteDialogOpen(false)}>
+              Cancel
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={handleDeleteFile}
+              className="bg-red-600 hover:bg-red-700"
+              data-testid="confirm-delete-file"
+            >
+              Delete
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Rename Dialog */}
+      <Dialog open={isRenameDialogOpen} onOpenChange={setIsRenameDialogOpen}>
+        <DialogContent data-testid="rename-memory-dialog">
+          <DialogHeader>
+            <DialogTitle>Rename Memory File</DialogTitle>
+            <DialogDescription>Enter a new name for "{selectedFile?.name}".</DialogDescription>
+          </DialogHeader>
+          <div className="py-4">
+            <div className="space-y-2">
+              <Label htmlFor="rename-filename">File Name</Label>
+              <Input
+                id="rename-filename"
+                value={renameFileName}
+                onChange={(e) => setRenameFileName(e.target.value)}
+                placeholder="Enter new filename"
+                data-testid="rename-file-input"
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' && renameFileName.trim()) {
+                    handleRenameFile();
+                  }
+                }}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setIsRenameDialogOpen(false);
+                setRenameFileName('');
+              }}
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={handleRenameFile}
+              disabled={!renameFileName.trim() || renameFileName === selectedFile?.name}
+              data-testid="confirm-rename-file"
+            >
+              Rename
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

apps/ui/src/components/views/profiles-view.tsx

@@ -1,275 +0,0 @@
-import { useState, useMemo, useCallback } from 'react';
-import { useAppStore, AIProfile } from '@/store/app-store';
-import {
-  useKeyboardShortcuts,
-  useKeyboardShortcutsConfig,
-  KeyboardShortcut,
-} from '@/hooks/use-keyboard-shortcuts';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
-import { Sparkles } from 'lucide-react';
-import { toast } from 'sonner';
-import { DeleteConfirmDialog } from '@/components/ui/delete-confirm-dialog';
-import {
-  DndContext,
-  DragEndEvent,
-  PointerSensor,
-  useSensor,
-  useSensors,
-  closestCenter,
-} from '@dnd-kit/core';
-import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
-import { SortableProfileCard, ProfileForm, ProfilesHeader } from './profiles-view/components';
-
-export function ProfilesView() {
-  const {
-    aiProfiles,
-    addAIProfile,
-    updateAIProfile,
-    removeAIProfile,
-    reorderAIProfiles,
-    resetAIProfiles,
-  } = useAppStore();
-  const shortcuts = useKeyboardShortcutsConfig();
-
-  const [showAddDialog, setShowAddDialog] = useState(false);
-  const [editingProfile, setEditingProfile] = useState<AIProfile | null>(null);
-  const [profileToDelete, setProfileToDelete] = useState<AIProfile | null>(null);
-
-  // Sensors for drag-and-drop
-  const sensors = useSensors(
-    useSensor(PointerSensor, {
-      activationConstraint: {
-        distance: 5,
-      },
-    })
-  );
-
-  // Separate built-in and custom profiles
-  const builtInProfiles = useMemo(() => aiProfiles.filter((p) => p.isBuiltIn), [aiProfiles]);
-  const customProfiles = useMemo(() => aiProfiles.filter((p) => !p.isBuiltIn), [aiProfiles]);
-
-  const handleDragEnd = useCallback(
-    (event: DragEndEvent) => {
-      const { active, over } = event;
-
-      if (over && active.id !== over.id) {
-        const oldIndex = aiProfiles.findIndex((p) => p.id === active.id);
-        const newIndex = aiProfiles.findIndex((p) => p.id === over.id);
-
-        if (oldIndex !== -1 && newIndex !== -1) {
-          reorderAIProfiles(oldIndex, newIndex);
-        }
-      }
-    },
-    [aiProfiles, reorderAIProfiles]
-  );
-
-  const handleAddProfile = (profile: Omit<AIProfile, 'id'>) => {
-    addAIProfile(profile);
-    setShowAddDialog(false);
-    toast.success('Profile created', {
-      description: `Created "${profile.name}" profile`,
-    });
-  };
-
-  const handleUpdateProfile = (profile: Omit<AIProfile, 'id'>) => {
-    if (editingProfile) {
-      updateAIProfile(editingProfile.id, profile);
-      setEditingProfile(null);
-      toast.success('Profile updated', {
-        description: `Updated "${profile.name}" profile`,
-      });
-    }
-  };
-
-  const confirmDeleteProfile = () => {
-    if (!profileToDelete) return;
-
-    removeAIProfile(profileToDelete.id);
-    toast.success('Profile deleted', {
-      description: `Deleted "${profileToDelete.name}" profile`,
-    });
-    setProfileToDelete(null);
-  };
-
-  const handleResetProfiles = () => {
-    resetAIProfiles();
-    toast.success('Profiles refreshed', {
-      description: 'Default profiles have been updated to the latest version',
-    });
-  };
-
-  // Build keyboard shortcuts for profiles view
-  const profilesShortcuts: KeyboardShortcut[] = useMemo(() => {
-    const shortcutsList: KeyboardShortcut[] = [];
-
-    // Add profile shortcut - when in profiles view
-    shortcutsList.push({
-      key: shortcuts.addProfile,
-      action: () => setShowAddDialog(true),
-      description: 'Create new profile',
-    });
-
-    return shortcutsList;
-  }, [shortcuts]);
-
-  // Register keyboard shortcuts for profiles view
-  useKeyboardShortcuts(profilesShortcuts);
-
-  return (
-    <div className="flex-1 flex flex-col overflow-hidden content-bg" data-testid="profiles-view">
-      {/* Header Section */}
-      <ProfilesHeader
-        onResetProfiles={handleResetProfiles}
-        onAddProfile={() => setShowAddDialog(true)}
-        addProfileHotkey={shortcuts.addProfile}
-      />
-
-      {/* Content */}
-      <div className="flex-1 overflow-y-auto p-8">
-        <div className="max-w-4xl mx-auto space-y-8">
-          {/* Custom Profiles Section */}
-          <div>
-            <div className="flex items-center gap-2 mb-4">
-              <h2 className="text-lg font-semibold text-foreground">Custom Profiles</h2>
-              <span className="text-xs px-2 py-0.5 rounded-full bg-primary/10 text-primary">
-                {customProfiles.length}
-              </span>
-            </div>
-            {customProfiles.length === 0 ? (
-              <div
-                className="group rounded-xl border border-dashed border-border p-8 text-center transition-all duration-300 hover:border-primary hover:bg-primary/5 cursor-pointer"
-                onClick={() => setShowAddDialog(true)}
-              >
-                <Sparkles className="w-10 h-10 text-muted-foreground mx-auto mb-3 opacity-50 transition-all duration-300 group-hover:text-primary group-hover:opacity-100 group-hover:scale-110 group-hover:rotate-12" />
-                <p className="text-muted-foreground transition-colors duration-300 group-hover:text-foreground">
-                  No custom profiles yet. Create one to get started!
-                </p>
-              </div>
-            ) : (
-              <DndContext
-                sensors={sensors}
-                collisionDetection={closestCenter}
-                onDragEnd={handleDragEnd}
-              >
-                <SortableContext
-                  items={customProfiles.map((p) => p.id)}
-                  strategy={verticalListSortingStrategy}
-                >
-                  <div className="space-y-3">
-                    {customProfiles.map((profile) => (
-                      <SortableProfileCard
-                        key={profile.id}
-                        profile={profile}
-                        onEdit={() => setEditingProfile(profile)}
-                        onDelete={() => setProfileToDelete(profile)}
-                      />
-                    ))}
-                  </div>
-                </SortableContext>
-              </DndContext>
-            )}
-          </div>
-
-          {/* Built-in Profiles Section */}
-          <div>
-            <div className="flex items-center gap-2 mb-4">
-              <h2 className="text-lg font-semibold text-foreground">Built-in Profiles</h2>
-              <span className="text-xs px-2 py-0.5 rounded-full bg-muted text-muted-foreground">
-                {builtInProfiles.length}
-              </span>
-            </div>
-            <p className="text-sm text-muted-foreground mb-4">
-              Pre-configured profiles for common use cases. These cannot be edited or deleted.
-            </p>
-            <DndContext
-              sensors={sensors}
-              collisionDetection={closestCenter}
-              onDragEnd={handleDragEnd}
-            >
-              <SortableContext
-                items={builtInProfiles.map((p) => p.id)}
-                strategy={verticalListSortingStrategy}
-              >
-                <div className="space-y-3">
-                  {builtInProfiles.map((profile) => (
-                    <SortableProfileCard
-                      key={profile.id}
-                      profile={profile}
-                      onEdit={() => {}}
-                      onDelete={() => {}}
-                    />
-                  ))}
-                </div>
-              </SortableContext>
-            </DndContext>
-          </div>
-        </div>
-      </div>
-
-      {/* Add Profile Dialog */}
-      <Dialog open={showAddDialog} onOpenChange={setShowAddDialog}>
-        <DialogContent
-          data-testid="add-profile-dialog"
-          className="flex flex-col max-h-[calc(100vh-4rem)]"
-        >
-          <DialogHeader className="shrink-0">
-            <DialogTitle>Create New Profile</DialogTitle>
-            <DialogDescription>Define a reusable model configuration preset.</DialogDescription>
-          </DialogHeader>
-          <ProfileForm
-            profile={{}}
-            onSave={handleAddProfile}
-            onCancel={() => setShowAddDialog(false)}
-            isEditing={false}
-            hotkeyActive={showAddDialog}
-          />
-        </DialogContent>
-      </Dialog>
-
-      {/* Edit Profile Dialog */}
-      <Dialog open={!!editingProfile} onOpenChange={() => setEditingProfile(null)}>
-        <DialogContent
-          data-testid="edit-profile-dialog"
-          className="flex flex-col max-h-[calc(100vh-4rem)]"
-        >
-          <DialogHeader className="shrink-0">
-            <DialogTitle>Edit Profile</DialogTitle>
-            <DialogDescription>Modify your profile settings.</DialogDescription>
-          </DialogHeader>
-          {editingProfile && (
-            <ProfileForm
-              profile={editingProfile}
-              onSave={handleUpdateProfile}
-              onCancel={() => setEditingProfile(null)}
-              isEditing={true}
-              hotkeyActive={!!editingProfile}
-            />
-          )}
-        </DialogContent>
-      </Dialog>
-
-      {/* Delete Confirmation Dialog */}
-      <DeleteConfirmDialog
-        open={!!profileToDelete}
-        onOpenChange={(open) => !open && setProfileToDelete(null)}
-        onConfirm={confirmDeleteProfile}
-        title="Delete Profile"
-        description={
-          profileToDelete
-            ? `Are you sure you want to delete "${profileToDelete.name}"? This action cannot be undone.`
-            : ''
-        }
-        confirmText="Delete Profile"
-        testId="delete-profile-confirm-dialog"
-        confirmTestId="confirm-delete-profile-button"
-      />
-    </div>
-  );
-}

apps/ui/src/components/views/profiles-view/components/index.ts

@@ -1,3 +0,0 @@
-export { SortableProfileCard } from './sortable-profile-card';
-export { ProfileForm } from './profile-form';
-export { ProfilesHeader } from './profiles-header';

apps/ui/src/components/views/profiles-view/components/profile-form.tsx

@@ -1,560 +0,0 @@
-import { useState, useEffect } from 'react';
-import { Button } from '@/components/ui/button';
-import { HotkeyButton } from '@/components/ui/hotkey-button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Textarea } from '@/components/ui/textarea';
-import { Badge } from '@/components/ui/badge';
-import { cn, modelSupportsThinking } from '@/lib/utils';
-import { DialogFooter } from '@/components/ui/dialog';
-import { Brain } from 'lucide-react';
-import { AnthropicIcon, CursorIcon, OpenAIIcon, OpenCodeIcon } from '@/components/ui/provider-icon';
-import { toast } from 'sonner';
-import type {
-  AIProfile,
-  ModelAlias,
-  ThinkingLevel,
-  ModelProvider,
-  CursorModelId,
-  CodexModelId,
-  OpencodeModelId,
-} from '@automaker/types';
-import {
-  CURSOR_MODEL_MAP,
-  cursorModelHasThinking,
-  CODEX_MODEL_MAP,
-  OPENCODE_MODELS,
-  DEFAULT_OPENCODE_MODEL,
-} from '@automaker/types';
-import { useAppStore } from '@/store/app-store';
-import { CLAUDE_MODELS, THINKING_LEVELS, ICON_OPTIONS } from '../constants';
-
-interface ProfileFormProps {
-  profile: Partial<AIProfile>;
-  onSave: (profile: Omit<AIProfile, 'id'>) => void;
-  onCancel: () => void;
-  isEditing: boolean;
-  hotkeyActive: boolean;
-}
-
-export function ProfileForm({
-  profile,
-  onSave,
-  onCancel,
-  isEditing,
-  hotkeyActive,
-}: ProfileFormProps) {
-  const { enabledCursorModels } = useAppStore();
-
-  const [formData, setFormData] = useState({
-    name: profile.name || '',
-    description: profile.description || '',
-    provider: (profile.provider || 'claude') as ModelProvider,
-    // Claude-specific
-    model: profile.model || ('sonnet' as ModelAlias),
-    thinkingLevel: profile.thinkingLevel || ('none' as ThinkingLevel),
-    // Cursor-specific
-    cursorModel: profile.cursorModel || ('auto' as CursorModelId),
-    // Codex-specific - use a valid CodexModelId from CODEX_MODEL_MAP
-    codexModel: profile.codexModel || (CODEX_MODEL_MAP.gpt52Codex as CodexModelId),
-    // OpenCode-specific
-    opencodeModel: profile.opencodeModel || (DEFAULT_OPENCODE_MODEL as OpencodeModelId),
-    icon: profile.icon || 'Brain',
-  });
-
-  // Sync formData with profile prop when it changes
-  useEffect(() => {
-    setFormData({
-      name: profile.name || '',
-      description: profile.description || '',
-      provider: (profile.provider || 'claude') as ModelProvider,
-      // Claude-specific
-      model: profile.model || ('sonnet' as ModelAlias),
-      thinkingLevel: profile.thinkingLevel || ('none' as ThinkingLevel),
-      // Cursor-specific
-      cursorModel: profile.cursorModel || ('auto' as CursorModelId),
-      // Codex-specific - use a valid CodexModelId from CODEX_MODEL_MAP
-      codexModel: profile.codexModel || (CODEX_MODEL_MAP.gpt52Codex as CodexModelId),
-      // OpenCode-specific
-      opencodeModel: profile.opencodeModel || (DEFAULT_OPENCODE_MODEL as OpencodeModelId),
-      icon: profile.icon || 'Brain',
-    });
-  }, [profile]);
-
-  const supportsThinking = formData.provider === 'claude' && modelSupportsThinking(formData.model);
-
-  const handleProviderChange = (provider: ModelProvider) => {
-    setFormData({
-      ...formData,
-      provider,
-      // Only reset Claude fields when switching TO Claude; preserve otherwise
-      model: provider === 'claude' ? 'sonnet' : formData.model,
-      thinkingLevel: provider === 'claude' ? 'none' : formData.thinkingLevel,
-      // Reset cursor/codex/opencode models when switching to that provider
-      cursorModel: provider === 'cursor' ? 'auto' : formData.cursorModel,
-      codexModel:
-        provider === 'codex' ? (CODEX_MODEL_MAP.gpt52Codex as CodexModelId) : formData.codexModel,
-      opencodeModel:
-        provider === 'opencode'
-          ? (DEFAULT_OPENCODE_MODEL as OpencodeModelId)
-          : formData.opencodeModel,
-    });
-  };
-
-  const handleModelChange = (model: ModelAlias) => {
-    setFormData({
-      ...formData,
-      model,
-    });
-  };
-
-  const handleCursorModelChange = (cursorModel: CursorModelId) => {
-    setFormData({
-      ...formData,
-      cursorModel,
-    });
-  };
-
-  const handleCodexModelChange = (codexModel: CodexModelId) => {
-    setFormData({
-      ...formData,
-      codexModel,
-    });
-  };
-
-  const handleOpencodeModelChange = (opencodeModel: OpencodeModelId) => {
-    setFormData({
-      ...formData,
-      opencodeModel,
-    });
-  };
-
-  const handleSubmit = () => {
-    if (!formData.name.trim()) {
-      toast.error('Please enter a profile name');
-      return;
-    }
-
-    // Ensure model is always set for Claude profiles
-    const validModels: ModelAlias[] = ['haiku', 'sonnet', 'opus'];
-    const finalModel =
-      formData.provider === 'claude'
-        ? validModels.includes(formData.model)
-          ? formData.model
-          : 'sonnet'
-        : undefined;
-
-    const baseProfile = {
-      name: formData.name.trim(),
-      description: formData.description.trim(),
-      provider: formData.provider,
-      isBuiltIn: false,
-      icon: formData.icon,
-    };
-
-    if (formData.provider === 'cursor') {
-      onSave({
-        ...baseProfile,
-        cursorModel: formData.cursorModel,
-      });
-    } else if (formData.provider === 'codex') {
-      onSave({
-        ...baseProfile,
-        codexModel: formData.codexModel,
-      });
-    } else if (formData.provider === 'opencode') {
-      onSave({
-        ...baseProfile,
-        opencodeModel: formData.opencodeModel,
-      });
-    } else {
-      onSave({
-        ...baseProfile,
-        model: finalModel as ModelAlias,
-        thinkingLevel: supportsThinking ? formData.thinkingLevel : 'none',
-      });
-    }
-  };
-
-  return (
-    <>
-      <div className="overflow-y-auto flex-1 min-h-0 space-y-4 pr-3 -mr-3 pl-1">
-        {/* Name */}
-        <div className="mt-2 space-y-2">
-          <Label htmlFor="profile-name">Profile Name</Label>
-          <Input
-            id="profile-name"
-            value={formData.name}
-            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-            placeholder="e.g., Heavy Task, Quick Fix"
-            data-testid="profile-name-input"
-          />
-        </div>
-
-        {/* Description */}
-        <div className="space-y-2">
-          <Label htmlFor="profile-description">Description</Label>
-          <Textarea
-            id="profile-description"
-            value={formData.description}
-            onChange={(e) => setFormData({ ...formData, description: e.target.value })}
-            placeholder="Describe when to use this profile..."
-            rows={2}
-            data-testid="profile-description-input"
-          />
-        </div>
-
-        {/* Icon Selection */}
-        <div className="space-y-2">
-          <Label>Icon</Label>
-          <div className="flex gap-2 flex-wrap">
-            {ICON_OPTIONS.map(({ name, icon: Icon }) => (
-              <button
-                key={name}
-                type="button"
-                onClick={() => setFormData({ ...formData, icon: name })}
-                className={cn(
-                  'w-10 h-10 rounded-lg flex items-center justify-center border transition-colors',
-                  formData.icon === name
-                    ? 'bg-primary text-primary-foreground border-primary'
-                    : 'bg-background hover:bg-accent border-border'
-                )}
-                data-testid={`icon-select-${name}`}
-              >
-                <Icon className="w-5 h-5" />
-              </button>
-            ))}
-          </div>
-        </div>
-
-        {/* Provider Selection */}
-        <div className="space-y-2">
-          <Label>AI Provider</Label>
-          <div className="grid grid-cols-4 gap-2">
-            <button
-              type="button"
-              onClick={() => handleProviderChange('claude')}
-              className={cn(
-                'px-3 py-2 rounded-md border text-sm font-medium transition-colors flex items-center justify-center gap-2',
-                formData.provider === 'claude'
-                  ? 'bg-primary text-primary-foreground border-primary'
-                  : 'bg-background hover:bg-accent border-border'
-              )}
-              data-testid="provider-select-claude"
-            >
-              <AnthropicIcon className="w-4 h-4" />
-              Claude
-            </button>
-            <button
-              type="button"
-              onClick={() => handleProviderChange('cursor')}
-              className={cn(
-                'px-3 py-2 rounded-md border text-sm font-medium transition-colors flex items-center justify-center gap-2',
-                formData.provider === 'cursor'
-                  ? 'bg-primary text-primary-foreground border-primary'
-                  : 'bg-background hover:bg-accent border-border'
-              )}
-              data-testid="provider-select-cursor"
-            >
-              <CursorIcon className="w-4 h-4" />
-              Cursor
-            </button>
-            <button
-              type="button"
-              onClick={() => handleProviderChange('codex')}
-              className={cn(
-                'px-3 py-2 rounded-md border text-sm font-medium transition-colors flex items-center justify-center gap-2',
-                formData.provider === 'codex'
-                  ? 'bg-primary text-primary-foreground border-primary'
-                  : 'bg-background hover:bg-accent border-border'
-              )}
-              data-testid="provider-select-codex"
-            >
-              <OpenAIIcon className="w-4 h-4" />
-              Codex
-            </button>
-            <button
-              type="button"
-              onClick={() => handleProviderChange('opencode')}
-              className={cn(
-                'px-3 py-2 rounded-md border text-sm font-medium transition-colors flex items-center justify-center gap-2',
-                formData.provider === 'opencode'
-                  ? 'bg-primary text-primary-foreground border-primary'
-                  : 'bg-background hover:bg-accent border-border'
-              )}
-              data-testid="provider-select-opencode"
-            >
-              <OpenCodeIcon className="w-4 h-4" />
-              OpenCode
-            </button>
-          </div>
-        </div>
-
-        {/* Claude Model Selection */}
-        {formData.provider === 'claude' && (
-          <div className="space-y-2">
-            <Label className="flex items-center gap-2">
-              <Brain className="w-4 h-4 text-primary" />
-              Model
-            </Label>
-            <div className="flex gap-2 flex-wrap">
-              {CLAUDE_MODELS.map(({ id, label }) => (
-                <button
-                  key={id}
-                  type="button"
-                  onClick={() => handleModelChange(id)}
-                  className={cn(
-                    'flex-1 min-w-[100px] px-3 py-2 rounded-md border text-sm font-medium transition-colors',
-                    formData.model === id
-                      ? 'bg-primary text-primary-foreground border-primary'
-                      : 'bg-background hover:bg-accent border-border'
-                  )}
-                  data-testid={`model-select-${id}`}
-                >
-                  {label.replace('Claude ', '')}
-                </button>
-              ))}
-            </div>
-          </div>
-        )}
-
-        {/* Cursor Model Selection */}
-        {formData.provider === 'cursor' && (
-          <div className="space-y-2">
-            <Label className="flex items-center gap-2">
-              <CursorIcon className="w-4 h-4 text-primary" />
-              Cursor Model
-            </Label>
-            <div className="flex flex-col gap-2">
-              {enabledCursorModels.length === 0 ? (
-                <div className="text-sm text-muted-foreground p-3 border border-dashed rounded-md text-center">
-                  No Cursor models enabled. Enable models in Settings → AI Providers.
-                </div>
-              ) : (
-                Object.entries(CURSOR_MODEL_MAP)
-                  .filter(([id]) => enabledCursorModels.includes(id as CursorModelId))
-                  .map(([id, config]) => (
-                    <button
-                      key={id}
-                      type="button"
-                      onClick={() => handleCursorModelChange(id as CursorModelId)}
-                      className={cn(
-                        'w-full px-3 py-2 rounded-md border text-sm font-medium transition-colors flex items-center justify-between',
-                        formData.cursorModel === id
-                          ? 'bg-primary text-primary-foreground border-primary'
-                          : 'bg-background hover:bg-accent border-border'
-                      )}
-                      data-testid={`cursor-model-select-${id}`}
-                    >
-                      <span>{config.label}</span>
-                      <div className="flex gap-1">
-                        {config.hasThinking && (
-                          <Badge
-                            variant="outline"
-                            className={cn(
-                              'text-xs',
-                              formData.cursorModel === id
-                                ? 'border-primary-foreground/50 text-primary-foreground'
-                                : 'border-amber-500/50 text-amber-600 dark:text-amber-400'
-                            )}
-                          >
-                            Thinking
-                          </Badge>
-                        )}
-                        <Badge
-                          variant="secondary"
-                          className={cn(
-                            'text-xs',
-                            formData.cursorModel === id && 'bg-primary-foreground/20'
-                          )}
-                        >
-                          Tier
-                        </Badge>
-                      </div>
-                    </button>
-                  ))
-              )}
-            </div>
-            {formData.cursorModel && cursorModelHasThinking(formData.cursorModel) && (
-              <p className="text-xs text-muted-foreground">
-                This model has built-in extended thinking capabilities.
-              </p>
-            )}
-          </div>
-        )}
-
-        {/* Codex Model Selection */}
-        {formData.provider === 'codex' && (
-          <div className="space-y-2">
-            <Label className="flex items-center gap-2">
-              <OpenAIIcon className="w-4 h-4 text-primary" />
-              Codex Model
-            </Label>
-            <div className="flex flex-col gap-2">
-              {Object.entries(CODEX_MODEL_MAP).map(([_, modelId]) => {
-                const modelConfig = {
-                  label: modelId,
-                  badge: 'Standard' as const,
-                  hasReasoning: false,
-                };
-
-                return (
-                  <button
-                    key={modelId}
-                    type="button"
-                    onClick={() => handleCodexModelChange(modelId)}
-                    className={cn(
-                      'w-full px-3 py-2 rounded-md border text-sm font-medium transition-colors flex items-center justify-between',
-                      formData.codexModel === modelId
-                        ? 'bg-primary text-primary-foreground border-primary'
-                        : 'bg-background hover:bg-accent border-border'
-                    )}
-                    data-testid={`codex-model-select-${modelId}`}
-                  >
-                    <span>{modelConfig.label}</span>
-                    <div className="flex gap-1">
-                      {modelConfig.hasReasoning && (
-                        <Badge
-                          variant="outline"
-                          className={cn(
-                            'text-xs',
-                            formData.codexModel === modelId
-                              ? 'border-primary-foreground/50 text-primary-foreground'
-                              : 'border-amber-500/50 text-amber-600 dark:text-amber-400'
-                          )}
-                        >
-                          Reasoning
-                        </Badge>
-                      )}
-                      <Badge
-                        variant="outline"
-                        className={cn(
-                          'text-xs',
-                          formData.codexModel === modelId
-                            ? 'border-primary-foreground/50 text-primary-foreground'
-                            : 'border-muted-foreground/50 text-muted-foreground'
-                        )}
-                      >
-                        {modelConfig.badge}
-                      </Badge>
-                    </div>
-                  </button>
-                );
-              })}
-            </div>
-          </div>
-        )}
-
-        {/* OpenCode Model Selection */}
-        {formData.provider === 'opencode' && (
-          <div className="space-y-2">
-            <Label className="flex items-center gap-2">
-              <OpenCodeIcon className="w-4 h-4 text-primary" />
-              OpenCode Model
-            </Label>
-            <div className="flex flex-col gap-2 max-h-[300px] overflow-y-auto">
-              {OPENCODE_MODELS.map((model) => (
-                <button
-                  key={model.id}
-                  type="button"
-                  onClick={() => handleOpencodeModelChange(model.id)}
-                  className={cn(
-                    'w-full px-3 py-2 rounded-md border text-sm font-medium transition-colors flex items-center justify-between',
-                    formData.opencodeModel === model.id
-                      ? 'bg-primary text-primary-foreground border-primary'
-                      : 'bg-background hover:bg-accent border-border'
-                  )}
-                  data-testid={`opencode-model-select-${model.id}`}
-                >
-                  <div className="flex flex-col items-start gap-0.5">
-                    <span>{model.label}</span>
-                    <span
-                      className={cn(
-                        'text-xs',
-                        formData.opencodeModel === model.id
-                          ? 'text-primary-foreground/70'
-                          : 'text-muted-foreground'
-                      )}
-                    >
-                      {model.description}
-                    </span>
-                  </div>
-                  <Badge
-                    variant="outline"
-                    className={cn(
-                      'text-xs capitalize shrink-0',
-                      formData.opencodeModel === model.id
-                        ? 'border-primary-foreground/50 text-primary-foreground'
-                        : model.tier === 'free'
-                          ? 'border-green-500/50 text-green-600 dark:text-green-400'
-                          : model.tier === 'premium'
-                            ? 'border-amber-500/50 text-amber-600 dark:text-amber-400'
-                            : 'border-muted-foreground/50 text-muted-foreground'
-                    )}
-                  >
-                    {model.tier}
-                  </Badge>
-                </button>
-              ))}
-            </div>
-          </div>
-        )}
-
-        {/* Claude Thinking Level */}
-        {formData.provider === 'claude' && supportsThinking && (
-          <div className="space-y-2">
-            <Label className="flex items-center gap-2">
-              <Brain className="w-4 h-4 text-amber-500" />
-              Thinking Level
-            </Label>
-            <div className="flex gap-2 flex-wrap">
-              {THINKING_LEVELS.map(({ id, label }) => (
-                <button
-                  key={id}
-                  type="button"
-                  onClick={() => {
-                    setFormData({ ...formData, thinkingLevel: id });
-                    if (id === 'ultrathink') {
-                      toast.warning('Ultrathink uses extensive reasoning', {
-                        description:
-                          'Best for complex architecture, migrations, or deep debugging (~$0.48/task).',
-                        duration: 4000,
-                      });
-                    }
-                  }}
-                  className={cn(
-                    'flex-1 min-w-[70px] px-3 py-2 rounded-md border text-sm font-medium transition-colors',
-                    formData.thinkingLevel === id
-                      ? 'bg-amber-500 text-white border-amber-400'
-                      : 'bg-background hover:bg-accent border-border'
-                  )}
-                  data-testid={`thinking-select-${id}`}
-                >
-                  {label}
-                </button>
-              ))}
-            </div>
-            <p className="text-xs text-muted-foreground">
-              Higher levels give more time to reason through complex problems.
-            </p>
-          </div>
-        )}
-      </div>
-
-      {/* Actions */}
-      <DialogFooter className="pt-4 border-t border-border mt-4 shrink-0">
-        <Button variant="ghost" onClick={onCancel}>
-          Cancel
-        </Button>
-        <HotkeyButton
-          onClick={handleSubmit}
-          hotkey={{ key: 'Enter', cmdCtrl: true }}
-          hotkeyActive={hotkeyActive}
-          data-testid="save-profile-button"
-        >
-          {isEditing ? 'Save Changes' : 'Create Profile'}
-        </HotkeyButton>
-      </DialogFooter>
-    </>
-  );
-}

apps/ui/src/components/views/profiles-view/components/profiles-header.tsx

@@ -1,55 +0,0 @@
-import { Button } from '@/components/ui/button';
-import { HotkeyButton } from '@/components/ui/hotkey-button';
-import { UserCircle, Plus, RefreshCw } from 'lucide-react';
-
-interface ProfilesHeaderProps {
-  onResetProfiles: () => void;
-  onAddProfile: () => void;
-  addProfileHotkey: string;
-}
-
-export function ProfilesHeader({
-  onResetProfiles,
-  onAddProfile,
-  addProfileHotkey,
-}: ProfilesHeaderProps) {
-  return (
-    <div className="shrink-0 border-b border-border bg-glass backdrop-blur-md">
-      <div className="px-8 py-6">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-3">
-            <div className="w-10 h-10 rounded-xl bg-linear-to-br from-brand-500 to-brand-600 shadow-lg shadow-brand-500/20 flex items-center justify-center">
-              <UserCircle className="w-5 h-5 text-primary-foreground" />
-            </div>
-            <div>
-              <h1 className="text-2xl font-bold text-foreground">AI Profiles</h1>
-              <p className="text-sm text-muted-foreground">
-                Create and manage model configuration presets
-              </p>
-            </div>
-          </div>
-          <div className="flex items-center gap-2">
-            <Button
-              variant="outline"
-              onClick={onResetProfiles}
-              data-testid="refresh-profiles-button"
-              className="gap-2"
-            >
-              <RefreshCw className="w-4 h-4" />
-              Refresh Defaults
-            </Button>
-            <HotkeyButton
-              onClick={onAddProfile}
-              hotkey={addProfileHotkey}
-              hotkeyActive={false}
-              data-testid="add-profile-button"
-            >
-              <Plus className="w-4 h-4 mr-2" />
-              New Profile
-            </HotkeyButton>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

apps/ui/src/components/views/profiles-view/components/sortable-profile-card.tsx

@@ -1,142 +0,0 @@
-import { Button } from '@/components/ui/button';
-import { cn } from '@/lib/utils';
-import { GripVertical, Lock, Pencil, Trash2 } from 'lucide-react';
-import { useSortable } from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
-import type { AIProfile } from '@automaker/types';
-import { CURSOR_MODEL_MAP, profileHasThinking, getCodexModelLabel } from '@automaker/types';
-import { PROFILE_ICONS } from '../constants';
-import { AnthropicIcon, CursorIcon, OpenAIIcon } from '@/components/ui/provider-icon';
-
-interface SortableProfileCardProps {
-  profile: AIProfile;
-  onEdit: () => void;
-  onDelete: () => void;
-}
-
-export function SortableProfileCard({ profile, onEdit, onDelete }: SortableProfileCardProps) {
-  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
-    id: profile.id,
-  });
-
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-    opacity: isDragging ? 0.5 : 1,
-  };
-
-  const getDefaultIcon = () => {
-    if (profile.provider === 'cursor') return CursorIcon;
-    if (profile.provider === 'codex') return OpenAIIcon;
-    return AnthropicIcon;
-  };
-
-  const IconComponent = profile.icon ? PROFILE_ICONS[profile.icon] : getDefaultIcon();
-
-  return (
-    <div
-      ref={setNodeRef}
-      style={style}
-      className={cn(
-        'group relative flex items-start gap-4 p-4 rounded-xl border bg-card transition-all',
-        isDragging && 'shadow-lg',
-        profile.isBuiltIn
-          ? 'border-border/50'
-          : 'border-border hover:border-primary/50 hover:shadow-sm'
-      )}
-      data-testid={`profile-card-${profile.id}`}
-    >
-      {/* Drag Handle */}
-      <button
-        {...attributes}
-        {...listeners}
-        className="p-1 rounded hover:bg-accent cursor-grab active:cursor-grabbing flex-shrink-0 mt-1"
-        data-testid={`profile-drag-handle-${profile.id}`}
-        onClick={(e) => e.stopPropagation()}
-        aria-label={`Reorder ${profile.name} profile`}
-      >
-        <GripVertical className="h-4 w-4 text-muted-foreground" />
-      </button>
-
-      {/* Icon */}
-      <div className="flex-shrink-0 w-10 h-10 rounded-lg flex items-center justify-center bg-primary/10">
-        {IconComponent && <IconComponent className="w-5 h-5 text-primary" />}
-      </div>
-
-      {/* Content */}
-      <div className="flex-1 min-w-0">
-        <div className="flex items-center gap-2">
-          <h3 className="font-semibold text-foreground">{profile.name}</h3>
-          {profile.isBuiltIn && (
-            <span className="flex items-center gap-1 text-[10px] px-1.5 py-0.5 rounded-full bg-muted text-muted-foreground">
-              <Lock className="w-2.5 h-2.5" />
-              Built-in
-            </span>
-          )}
-        </div>
-        <p className="text-sm text-muted-foreground mt-0.5 line-clamp-2">{profile.description}</p>
-        <div className="flex items-center gap-2 mt-2 flex-wrap">
-          {/* Provider badge */}
-          <span className="text-xs px-2 py-0.5 rounded-full border border-border text-muted-foreground bg-muted/50 flex items-center gap-1">
-            {profile.provider === 'cursor' ? (
-              <CursorIcon className="w-3 h-3" />
-            ) : profile.provider === 'codex' ? (
-              <OpenAIIcon className="w-3 h-3" />
-            ) : (
-              <AnthropicIcon className="w-3 h-3" />
-            )}
-            {profile.provider === 'cursor'
-              ? 'Cursor'
-              : profile.provider === 'codex'
-                ? 'Codex'
-                : 'Claude'}
-          </span>
-
-          {/* Model badge */}
-          <span className="text-xs px-2 py-0.5 rounded-full border border-primary/30 text-primary bg-primary/10">
-            {profile.provider === 'cursor'
-              ? CURSOR_MODEL_MAP[profile.cursorModel || 'auto']?.label ||
-                profile.cursorModel ||
-                'auto'
-              : profile.provider === 'codex'
-                ? getCodexModelLabel(profile.codexModel || 'codex-gpt-5.2-codex')
-                : profile.model || 'sonnet'}
-          </span>
-
-          {/* Thinking badge - works for both providers */}
-          {profileHasThinking(profile) && (
-            <span className="text-xs px-2 py-0.5 rounded-full border border-amber-500/30 text-amber-600 dark:text-amber-400 bg-amber-500/10">
-              {profile.provider === 'cursor' ? 'Thinking' : profile.thinkingLevel}
-            </span>
-          )}
-        </div>
-      </div>
-
-      {/* Actions */}
-      {!profile.isBuiltIn && (
-        <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={onEdit}
-            className="h-8 w-8 p-0"
-            data-testid={`edit-profile-${profile.id}`}
-            aria-label={`Edit ${profile.name} profile`}
-          >
-            <Pencil className="w-4 h-4" />
-          </Button>
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={onDelete}
-            className="h-8 w-8 p-0 text-destructive hover:text-destructive"
-            data-testid={`delete-profile-${profile.id}`}
-            aria-label={`Delete ${profile.name} profile`}
-          >
-            <Trash2 className="w-4 h-4" />
-          </Button>
-        </div>
-      )}
-    </div>
-  );
-}