chore: release v0.10.0

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

.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,12 @@ 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
+data/

apps/server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@automaker/server",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "Backend server for Automaker - provides API for both web and Electron modes",
   "author": "AutoMaker Team",
   "license": "SEE LICENSE IN LICENSE",

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
@@ -208,7 +217,7 @@ app.use('/api/sessions', createSessionsRoutes(agentService));
 app.use('/api/features', createFeaturesRoutes(featureLoader));
 app.use('/api/auto-mode', createAutoModeRoutes(autoModeService));
 app.use('/api/enhance-prompt', createEnhancePromptRoutes(settingsService));
-app.use('/api/worktree', createWorktreeRoutes());
+app.use('/api/worktree', createWorktreeRoutes(events));
 app.use('/api/git', createGitRoutes());
 app.use('/api/suggestions', createSuggestionsRoutes(events, settingsService));
 app.use('/api/models', createModelsRoutes());
@@ -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/lib/worktree-metadata.ts

@@ -21,6 +21,12 @@ export interface WorktreeMetadata {
   branch: string;
   createdAt: string;
   pr?: WorktreePRInfo;
+  /** Whether the init script has been executed for this worktree */
+  initScriptRan?: boolean;
+  /** Status of the init script execution */
+  initScriptStatus?: 'running' | 'success' | 'failed';
+  /** Error message if init script failed */
+  initScriptError?: string;
 }
 
 /**

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/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/backlog-plan/routes/apply.ts

@@ -12,11 +12,22 @@ const featureLoader = new FeatureLoader();
 export function createApplyHandler() {
   return async (req: Request, res: Response): Promise<void> => {
     try {
-      const { projectPath, plan } = req.body as {
+      const {
+        projectPath,
+        plan,
+        branchName: rawBranchName,
+      } = req.body as {
         projectPath: string;
         plan: BacklogPlanResult;
+        branchName?: string;
       };
 
+      // Validate branchName: must be undefined or a non-empty trimmed string
+      const branchName =
+        typeof rawBranchName === 'string' && rawBranchName.trim().length > 0
+          ? rawBranchName.trim()
+          : undefined;
+
       if (!projectPath) {
         res.status(400).json({ success: false, error: 'projectPath required' });
         return;
@@ -82,6 +93,7 @@ export function createApplyHandler() {
             dependencies: change.feature.dependencies,
             priority: change.feature.priority,
             status: 'backlog',
+            branchName,
           });
 
           appliedChanges.push(`added:${newFeature.id}`);

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

@@ -12,6 +12,7 @@ import { resolveModelString } from '@automaker/model-resolver';
 import {
   CLAUDE_MODEL_MAP,
   isCursorModel,
+  isOpencodeModel,
   stripProviderPrefix,
   ThinkingLevel,
   getThinkingTokenBudget,
@@ -91,13 +92,13 @@ async function extractTextFromStream(
 }
 
 /**
- * Execute enhancement using Cursor provider
+ * Execute enhancement using a provider (Cursor, OpenCode, etc.)
  *
  * @param prompt - The enhancement prompt
- * @param model - The Cursor model to use
+ * @param model - The model to use
  * @returns The enhanced text
  */
-async function executeWithCursor(prompt: string, model: string): Promise<string> {
+async function executeWithProvider(prompt: string, model: string): Promise<string> {
   const provider = ProviderFactory.getProviderForModel(model);
   // Strip provider prefix - providers expect bare model IDs
   const bareModel = stripProviderPrefix(model);
@@ -110,7 +111,11 @@ async function executeWithCursor(prompt: string, model: string): Promise<string>
     cwd: process.cwd(), // Enhancement doesn't need a specific working directory
     readOnly: true, // Prompt enhancement only generates text, doesn't write files
   })) {
-    if (msg.type === 'assistant' && msg.message?.content) {
+    if (msg.type === 'error') {
+      // Throw error with the message from the provider
+      const errorMessage = msg.error || 'Provider returned an error';
+      throw new Error(errorMessage);
+    } else if (msg.type === 'assistant' && msg.message?.content) {
       for (const block of msg.message.content) {
         if (block.type === 'text' && block.text) {
           responseText += block.text;
@@ -188,6 +193,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];
 
@@ -211,7 +217,14 @@ export function createEnhanceHandler(
 
         // Cursor doesn't have a separate system prompt concept, so combine them
         const combinedPrompt = `${systemPrompt}\n\n${userPrompt}`;
-        enhancedText = await executeWithCursor(combinedPrompt, resolvedModel);
+        enhancedText = await executeWithProvider(combinedPrompt, resolvedModel);
+      } else if (isOpencodeModel(resolvedModel)) {
+        // Use OpenCode provider for OpenCode models (static and dynamic)
+        logger.info(`Using OpenCode provider for model: ${resolvedModel}`);
+
+        // OpenCode CLI handles the system prompt, so combine them
+        const combinedPrompt = `${systemPrompt}\n\n${userPrompt}`;
+        enhancedText = await executeWithProvider(combinedPrompt, resolvedModel);
       } else {
         // Use Claude SDK for Claude models
         logger.info(`Using Claude provider for model: ${resolvedModel}`);

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

@@ -10,14 +10,21 @@ import { getErrorMessage, logError } from '../common.js';
 export function createUpdateHandler(featureLoader: FeatureLoader) {
   return async (req: Request, res: Response): Promise<void> => {
     try {
-      const { projectPath, featureId, updates, descriptionHistorySource, enhancementMode } =
-        req.body as {
-          projectPath: string;
-          featureId: string;
-          updates: Partial<Feature>;
-          descriptionHistorySource?: 'enhance' | 'edit';
-          enhancementMode?: 'improve' | 'technical' | 'simplify' | 'acceptance';
-        };
+      const {
+        projectPath,
+        featureId,
+        updates,
+        descriptionHistorySource,
+        enhancementMode,
+        preEnhancementDescription,
+      } = req.body as {
+        projectPath: string;
+        featureId: string;
+        updates: Partial<Feature>;
+        descriptionHistorySource?: 'enhance' | 'edit';
+        enhancementMode?: 'improve' | 'technical' | 'simplify' | 'acceptance' | 'ux-reviewer';
+        preEnhancementDescription?: string;
+      };
 
       if (!projectPath || !featureId || !updates) {
         res.status(400).json({
@@ -32,7 +39,8 @@ export function createUpdateHandler(featureLoader: FeatureLoader) {
         featureId,
         updates,
         descriptionHistorySource,
-        enhancementMode
+        enhancementMode,
+        preEnhancementDescription
       );
       res.json({ success: true, feature: updated });
     } catch (error) {

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

@@ -24,6 +24,12 @@ import { createDeauthCursorHandler } from './routes/deauth-cursor.js';
 import { createAuthOpencodeHandler } from './routes/auth-opencode.js';
 import { createDeauthOpencodeHandler } from './routes/deauth-opencode.js';
 import { createOpencodeStatusHandler } from './routes/opencode-status.js';
+import {
+  createGetOpencodeModelsHandler,
+  createRefreshOpencodeModelsHandler,
+  createGetOpencodeProvidersHandler,
+  createClearOpencodeCacheHandler,
+} from './routes/opencode-models.js';
 import {
   createGetCursorConfigHandler,
   createSetCursorDefaultModelHandler,
@@ -65,6 +71,12 @@ export function createSetupRoutes(): Router {
   router.get('/opencode-status', createOpencodeStatusHandler());
   router.post('/auth-opencode', createAuthOpencodeHandler());
   router.post('/deauth-opencode', createDeauthOpencodeHandler());
+
+  // OpenCode Dynamic Model Discovery routes
+  router.get('/opencode/models', createGetOpencodeModelsHandler());
+  router.post('/opencode/models/refresh', createRefreshOpencodeModelsHandler());
+  router.get('/opencode/providers', createGetOpencodeProvidersHandler());
+  router.post('/opencode/cache/clear', createClearOpencodeCacheHandler());
   router.get('/cursor-config', createGetCursorConfigHandler());
   router.post('/cursor-config/default-model', createSetCursorDefaultModelHandler());
   router.post('/cursor-config/models', createSetCursorModelsHandler());

apps/server/src/routes/setup/routes/opencode-models.ts

@@ -0,0 +1,189 @@
+/**
+ * OpenCode Dynamic Models API Routes
+ *
+ * Provides endpoints for:
+ * - GET /api/setup/opencode/models - Get available models (cached or refreshed)
+ * - POST /api/setup/opencode/models/refresh - Force refresh models from CLI
+ * - GET /api/setup/opencode/providers - Get authenticated providers
+ */
+
+import type { Request, Response } from 'express';
+import {
+  OpencodeProvider,
+  type OpenCodeProviderInfo,
+} from '../../../providers/opencode-provider.js';
+import { getErrorMessage, logError } from '../common.js';
+import type { ModelDefinition } from '@automaker/types';
+import { createLogger } from '@automaker/utils';
+
+const logger = createLogger('OpenCodeModelsRoute');
+
+// Singleton provider instance for caching
+let providerInstance: OpencodeProvider | null = null;
+
+function getProvider(): OpencodeProvider {
+  if (!providerInstance) {
+    providerInstance = new OpencodeProvider();
+  }
+  return providerInstance;
+}
+
+/**
+ * Response type for models endpoint
+ */
+interface ModelsResponse {
+  success: boolean;
+  models?: ModelDefinition[];
+  count?: number;
+  cached?: boolean;
+  error?: string;
+}
+
+/**
+ * Response type for providers endpoint
+ */
+interface ProvidersResponse {
+  success: boolean;
+  providers?: OpenCodeProviderInfo[];
+  authenticated?: OpenCodeProviderInfo[];
+  error?: string;
+}
+
+/**
+ * Creates handler for GET /api/setup/opencode/models
+ *
+ * Returns currently available models (from cache if available).
+ * Query params:
+ * - refresh=true: Force refresh from CLI before returning
+ *
+ * Note: If cache is empty, this will trigger a refresh to get dynamic models.
+ */
+export function createGetOpencodeModelsHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const provider = getProvider();
+      const forceRefresh = req.query.refresh === 'true';
+
+      let models: ModelDefinition[];
+      let cached = true;
+
+      if (forceRefresh) {
+        models = await provider.refreshModels();
+        cached = false;
+      } else {
+        // Check if we have cached models
+        const cachedModels = provider.getAvailableModels();
+
+        // If cache only has default models (provider.hasCachedModels() would be false),
+        // trigger a refresh to get dynamic models
+        if (!provider.hasCachedModels()) {
+          models = await provider.refreshModels();
+          cached = false;
+        } else {
+          models = cachedModels;
+        }
+      }
+
+      const response: ModelsResponse = {
+        success: true,
+        models,
+        count: models.length,
+        cached,
+      };
+
+      res.json(response);
+    } catch (error) {
+      logError(error, 'Get OpenCode models failed');
+      res.status(500).json({
+        success: false,
+        error: getErrorMessage(error),
+      } as ModelsResponse);
+    }
+  };
+}
+
+/**
+ * Creates handler for POST /api/setup/opencode/models/refresh
+ *
+ * Forces a refresh of models from the OpenCode CLI.
+ */
+export function createRefreshOpencodeModelsHandler() {
+  return async (_req: Request, res: Response): Promise<void> => {
+    try {
+      const provider = getProvider();
+      const models = await provider.refreshModels();
+
+      const response: ModelsResponse = {
+        success: true,
+        models,
+        count: models.length,
+        cached: false,
+      };
+
+      res.json(response);
+    } catch (error) {
+      logError(error, 'Refresh OpenCode models failed');
+      res.status(500).json({
+        success: false,
+        error: getErrorMessage(error),
+      } as ModelsResponse);
+    }
+  };
+}
+
+/**
+ * Creates handler for GET /api/setup/opencode/providers
+ *
+ * Returns authenticated providers from OpenCode CLI.
+ * This calls `opencode auth list` to get provider status.
+ */
+export function createGetOpencodeProvidersHandler() {
+  return async (_req: Request, res: Response): Promise<void> => {
+    try {
+      const provider = getProvider();
+      const providers = await provider.fetchAuthenticatedProviders();
+
+      // Filter to only authenticated providers
+      const authenticated = providers.filter((p) => p.authenticated);
+
+      const response: ProvidersResponse = {
+        success: true,
+        providers,
+        authenticated,
+      };
+
+      res.json(response);
+    } catch (error) {
+      logError(error, 'Get OpenCode providers failed');
+      res.status(500).json({
+        success: false,
+        error: getErrorMessage(error),
+      } as ProvidersResponse);
+    }
+  };
+}
+
+/**
+ * Creates handler for POST /api/setup/opencode/cache/clear
+ *
+ * Clears the model cache, forcing a fresh fetch on next access.
+ */
+export function createClearOpencodeCacheHandler() {
+  return async (_req: Request, res: Response): Promise<void> => {
+    try {
+      const provider = getProvider();
+      provider.clearModelCache();
+
+      res.json({
+        success: true,
+        message: 'OpenCode model cache cleared',
+      });
+    } catch (error) {
+      logError(error, 'Clear OpenCode cache failed');
+      res.status(500).json({
+        success: false,
+        error: getErrorMessage(error),
+      });
+    }
+  };
+}

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

@@ -3,15 +3,51 @@
  */
 
 import { createLogger } from '@automaker/utils';
+import { spawnProcess } from '@automaker/platform';
 import { exec } from 'child_process';
 import { promisify } from 'util';
-import path from 'path';
 import { getErrorMessage as getErrorMessageShared, createLogError } from '../common.js';
-import { FeatureLoader } from '../../services/feature-loader.js';
 
 const logger = createLogger('Worktree');
 export const execAsync = promisify(exec);
-const featureLoader = new FeatureLoader();
+
+// ============================================================================
+// Secure Command Execution
+// ============================================================================
+
+/**
+ * Execute git command with array arguments to prevent command injection.
+ * Uses spawnProcess from @automaker/platform for secure, cross-platform execution.
+ *
+ * @param args - Array of git command arguments (e.g., ['worktree', 'add', path])
+ * @param cwd - Working directory to execute the command in
+ * @returns Promise resolving to stdout output
+ * @throws Error with stderr message if command fails
+ *
+ * @example
+ * ```typescript
+ * // Safe: no injection possible
+ * await execGitCommand(['branch', '-D', branchName], projectPath);
+ *
+ * // Instead of unsafe:
+ * // await execAsync(`git branch -D ${branchName}`, { cwd });
+ * ```
+ */
+export async function execGitCommand(args: string[], cwd: string): Promise<string> {
+  const result = await spawnProcess({
+    command: 'git',
+    args,
+    cwd,
+  });
+
+  // spawnProcess returns { stdout, stderr, exitCode }
+  if (result.exitCode === 0) {
+    return result.stdout;
+  } else {
+    const errorMessage = result.stderr || `Git command failed with code ${result.exitCode}`;
+    throw new Error(errorMessage);
+  }
+}
 
 // ============================================================================
 // Constants
@@ -99,18 +135,6 @@ export function normalizePath(p: string): string {
   return p.replace(/\\/g, '/');
 }
 
-/**
- * Check if a path is a git repo
- */
-export async function isGitRepo(repoPath: string): Promise<boolean> {
-  try {
-    await execAsync('git rev-parse --is-inside-work-tree', { cwd: repoPath });
-    return true;
-  } catch {
-    return false;
-  }
-}
-
 /**
  * Check if a git repository has at least one commit (i.e., HEAD exists)
  * Returns false for freshly initialized repos with no commits

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

@@ -3,6 +3,7 @@
  */
 
 import { Router } from 'express';
+import type { EventEmitter } from '../../lib/events.js';
 import { validatePathParams } from '../../middleware/validate-paths.js';
 import { requireValidWorktree, requireValidProject, requireGitRepoOnly } from './middleware.js';
 import { createInfoHandler } from './routes/info.js';
@@ -24,14 +25,22 @@ import { createSwitchBranchHandler } from './routes/switch-branch.js';
 import {
   createOpenInEditorHandler,
   createGetDefaultEditorHandler,
+  createGetAvailableEditorsHandler,
+  createRefreshEditorsHandler,
 } from './routes/open-in-editor.js';
 import { createInitGitHandler } from './routes/init-git.js';
 import { createMigrateHandler } from './routes/migrate.js';
 import { createStartDevHandler } from './routes/start-dev.js';
 import { createStopDevHandler } from './routes/stop-dev.js';
 import { createListDevServersHandler } from './routes/list-dev-servers.js';
+import {
+  createGetInitScriptHandler,
+  createPutInitScriptHandler,
+  createDeleteInitScriptHandler,
+  createRunInitScriptHandler,
+} from './routes/init-script.js';
 
-export function createWorktreeRoutes(): Router {
+export function createWorktreeRoutes(events: EventEmitter): Router {
   const router = Router();
 
   router.post('/info', validatePathParams('projectPath'), createInfoHandler());
@@ -45,7 +54,7 @@ export function createWorktreeRoutes(): Router {
     requireValidProject,
     createMergeHandler()
   );
-  router.post('/create', validatePathParams('projectPath'), createCreateHandler());
+  router.post('/create', validatePathParams('projectPath'), createCreateHandler(events));
   router.post('/delete', validatePathParams('projectPath', 'worktreePath'), createDeleteHandler());
   router.post('/create-pr', createCreatePRHandler());
   router.post('/pr-info', createPRInfoHandler());
@@ -77,6 +86,8 @@ export function createWorktreeRoutes(): Router {
   router.post('/switch-branch', requireValidWorktree, createSwitchBranchHandler());
   router.post('/open-in-editor', validatePathParams('worktreePath'), createOpenInEditorHandler());
   router.get('/default-editor', createGetDefaultEditorHandler());
+  router.get('/available-editors', createGetAvailableEditorsHandler());
+  router.post('/refresh-editors', createRefreshEditorsHandler());
   router.post('/init-git', validatePathParams('projectPath'), createInitGitHandler());
   router.post('/migrate', createMigrateHandler());
   router.post(
@@ -87,5 +98,15 @@ export function createWorktreeRoutes(): Router {
   router.post('/stop-dev', createStopDevHandler());
   router.post('/list-dev-servers', createListDevServersHandler());
 
+  // Init script routes
+  router.get('/init-script', createGetInitScriptHandler());
+  router.put('/init-script', validatePathParams('projectPath'), createPutInitScriptHandler());
+  router.delete('/init-script', validatePathParams('projectPath'), createDeleteInitScriptHandler());
+  router.post(
+    '/run-init-script',
+    validatePathParams('projectPath', 'worktreePath'),
+    createRunInitScriptHandler(events)
+  );
+
   return router;
 }

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

@@ -3,7 +3,8 @@
  */
 
 import type { Request, Response, NextFunction } from 'express';
-import { isGitRepo, hasCommits } from './common.js';
+import { isGitRepo } from '@automaker/git-utils';
+import { hasCommits } from './common.js';
 
 interface ValidationOptions {
   /** Check if the path is a git repository (default: true) */

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

@@ -12,15 +12,19 @@ import { exec } from 'child_process';
 import { promisify } from 'util';
 import path from 'path';
 import * as secureFs from '../../../lib/secure-fs.js';
+import type { EventEmitter } from '../../../lib/events.js';
+import { isGitRepo } from '@automaker/git-utils';
 import {
-  isGitRepo,
   getErrorMessage,
   logError,
   normalizePath,
   ensureInitialCommit,
+  isValidBranchName,
+  execGitCommand,
 } from '../common.js';
 import { trackBranch } from './branch-tracking.js';
 import { createLogger } from '@automaker/utils';
+import { runInitScript } from '../../../services/init-script-service.js';
 
 const logger = createLogger('Worktree');
 
@@ -77,7 +81,7 @@ async function findExistingWorktreeForBranch(
   }
 }
 
-export function createCreateHandler() {
+export function createCreateHandler(events: EventEmitter) {
   return async (req: Request, res: Response): Promise<void> => {
     try {
       const { projectPath, branchName, baseBranch } = req.body as {
@@ -94,6 +98,26 @@ export function createCreateHandler() {
         return;
       }
 
+      // Validate branch name to prevent command injection
+      if (!isValidBranchName(branchName)) {
+        res.status(400).json({
+          success: false,
+          error:
+            'Invalid branch name. Branch names must contain only letters, numbers, dots, hyphens, underscores, and forward slashes.',
+        });
+        return;
+      }
+
+      // Validate base branch if provided
+      if (baseBranch && !isValidBranchName(baseBranch) && baseBranch !== 'HEAD') {
+        res.status(400).json({
+          success: false,
+          error:
+            'Invalid base branch name. Branch names must contain only letters, numbers, dots, hyphens, underscores, and forward slashes.',
+        });
+        return;
+      }
+
       if (!(await isGitRepo(projectPath))) {
         res.status(400).json({
           success: false,
@@ -143,30 +167,28 @@ export function createCreateHandler() {
       // Create worktrees directory if it doesn't exist
       await secureFs.mkdir(worktreesDir, { recursive: true });
 
-      // Check if branch exists
+      // Check if branch exists (using array arguments to prevent injection)
       let branchExists = false;
       try {
-        await execAsync(`git rev-parse --verify ${branchName}`, {
-          cwd: projectPath,
-        });
+        await execGitCommand(['rev-parse', '--verify', branchName], projectPath);
         branchExists = true;
       } catch {
         // Branch doesn't exist
       }
 
-      // Create worktree
-      let createCmd: string;
+      // Create worktree (using array arguments to prevent injection)
       if (branchExists) {
         // Use existing branch
-        createCmd = `git worktree add "${worktreePath}" ${branchName}`;
+        await execGitCommand(['worktree', 'add', worktreePath, branchName], projectPath);
       } else {
         // Create new branch from base or HEAD
         const base = baseBranch || 'HEAD';
-        createCmd = `git worktree add -b ${branchName} "${worktreePath}" ${base}`;
+        await execGitCommand(
+          ['worktree', 'add', '-b', branchName, worktreePath, base],
+          projectPath
+        );
       }
 
-      await execAsync(createCmd, { cwd: projectPath });
-
       // Note: We intentionally do NOT symlink .automaker to worktrees
       // Features and config are always accessed from the main project path
       // This avoids symlink loop issues when activating worktrees
@@ -177,6 +199,8 @@ export function createCreateHandler() {
       // Resolve to absolute path for cross-platform compatibility
       // normalizePath converts to forward slashes for API consistency
       const absoluteWorktreePath = path.resolve(worktreePath);
+
+      // Respond immediately (non-blocking)
       res.json({
         success: true,
         worktree: {
@@ -185,6 +209,17 @@ export function createCreateHandler() {
           isNew: !branchExists,
         },
       });
+
+      // Trigger init script asynchronously after response
+      // runInitScript internally checks if script exists and hasn't already run
+      runInitScript({
+        projectPath,
+        worktreePath: absoluteWorktreePath,
+        branch: branchName,
+        emitter: events,
+      }).catch((err) => {
+        logger.error(`Init script failed for ${branchName}:`, err);
+      });
     } catch (error) {
       logError(error, 'Create worktree failed');
       res.status(500).json({ success: false, error: getErrorMessage(error) });

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

@@ -6,9 +6,11 @@ import type { Request, Response } from 'express';
 import { exec } from 'child_process';
 import { promisify } from 'util';
 import { isGitRepo } from '@automaker/git-utils';
-import { getErrorMessage, logError } from '../common.js';
+import { getErrorMessage, logError, isValidBranchName, execGitCommand } from '../common.js';
+import { createLogger } from '@automaker/utils';
 
 const execAsync = promisify(exec);
+const logger = createLogger('Worktree');
 
 export function createDeleteHandler() {
   return async (req: Request, res: Response): Promise<void> => {
@@ -46,22 +48,28 @@ export function createDeleteHandler() {
         // Could not get branch name
       }
 
-      // Remove the worktree
+      // Remove the worktree (using array arguments to prevent injection)
       try {
-        await execAsync(`git worktree remove "${worktreePath}" --force`, {
-          cwd: projectPath,
-        });
+        await execGitCommand(['worktree', 'remove', worktreePath, '--force'], projectPath);
       } catch (error) {
         // Try with prune if remove fails
-        await execAsync('git worktree prune', { cwd: projectPath });
+        await execGitCommand(['worktree', 'prune'], projectPath);
       }
 
       // Optionally delete the branch
+      let branchDeleted = false;
       if (deleteBranch && branchName && branchName !== 'main' && branchName !== 'master') {
-        try {
-          await execAsync(`git branch -D ${branchName}`, { cwd: projectPath });
-        } catch {
-          // Branch deletion failed, not critical
+        // Validate branch name to prevent command injection
+        if (!isValidBranchName(branchName)) {
+          logger.warn(`Invalid branch name detected, skipping deletion: ${branchName}`);
+        } else {
+          try {
+            await execGitCommand(['branch', '-D', branchName], projectPath);
+            branchDeleted = true;
+          } catch {
+            // Branch deletion failed, not critical
+            logger.warn(`Failed to delete branch: ${branchName}`);
+          }
         }
       }
 
@@ -69,7 +77,8 @@ export function createDeleteHandler() {
         success: true,
         deleted: {
           worktreePath,
-          branch: deleteBranch ? branchName : null,
+          branch: branchDeleted ? branchName : null,
+          branchDeleted,
         },
       });
     } catch (error) {

apps/server/src/routes/worktree/routes/init-script.ts

@@ -0,0 +1,280 @@
+/**
+ * Init Script routes - Read/write/run the worktree-init.sh file
+ *
+ * POST /init-script - Read the init script content
+ * PUT /init-script - Write content to the init script file
+ * DELETE /init-script - Delete the init script file
+ * POST /run-init-script - Run the init script for a worktree
+ */
+
+import type { Request, Response } from 'express';
+import path from 'path';
+import * as secureFs from '../../../lib/secure-fs.js';
+import { getErrorMessage, logError, isValidBranchName } from '../common.js';
+import { createLogger } from '@automaker/utils';
+import type { EventEmitter } from '../../../lib/events.js';
+import { forceRunInitScript } from '../../../services/init-script-service.js';
+
+const logger = createLogger('InitScript');
+
+/** Fixed path for init script within .automaker directory */
+const INIT_SCRIPT_FILENAME = 'worktree-init.sh';
+
+/** Maximum allowed size for init scripts (1MB) */
+const MAX_SCRIPT_SIZE_BYTES = 1024 * 1024;
+
+/**
+ * Get the full path to the init script for a project
+ */
+function getInitScriptPath(projectPath: string): string {
+  return path.join(projectPath, '.automaker', INIT_SCRIPT_FILENAME);
+}
+
+/**
+ * GET /init-script - Read the init script content
+ */
+export function createGetInitScriptHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const rawProjectPath = req.query.projectPath;
+
+      // Validate projectPath is a non-empty string (not an array or undefined)
+      if (!rawProjectPath || typeof rawProjectPath !== 'string') {
+        res.status(400).json({
+          success: false,
+          error: 'projectPath query parameter is required',
+        });
+        return;
+      }
+
+      const projectPath = rawProjectPath.trim();
+      if (!projectPath) {
+        res.status(400).json({
+          success: false,
+          error: 'projectPath cannot be empty',
+        });
+        return;
+      }
+
+      const scriptPath = getInitScriptPath(projectPath);
+
+      try {
+        const content = await secureFs.readFile(scriptPath, 'utf-8');
+        res.json({
+          success: true,
+          exists: true,
+          content: content as string,
+          path: scriptPath,
+        });
+      } catch {
+        // File doesn't exist
+        res.json({
+          success: true,
+          exists: false,
+          content: '',
+          path: scriptPath,
+        });
+      }
+    } catch (error) {
+      logError(error, 'Read init script failed');
+      res.status(500).json({
+        success: false,
+        error: getErrorMessage(error),
+      });
+    }
+  };
+}
+
+/**
+ * PUT /init-script - Write content to the init script file
+ */
+export function createPutInitScriptHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, content } = req.body as {
+        projectPath: string;
+        content: string;
+      };
+
+      if (!projectPath) {
+        res.status(400).json({
+          success: false,
+          error: 'projectPath is required',
+        });
+        return;
+      }
+
+      if (typeof content !== 'string') {
+        res.status(400).json({
+          success: false,
+          error: 'content must be a string',
+        });
+        return;
+      }
+
+      // Validate script size to prevent disk exhaustion
+      const sizeBytes = Buffer.byteLength(content, 'utf-8');
+      if (sizeBytes > MAX_SCRIPT_SIZE_BYTES) {
+        res.status(400).json({
+          success: false,
+          error: `Script size (${Math.round(sizeBytes / 1024)}KB) exceeds maximum allowed size (${Math.round(MAX_SCRIPT_SIZE_BYTES / 1024)}KB)`,
+        });
+        return;
+      }
+
+      // Log warning if potentially dangerous patterns are detected (non-blocking)
+      const dangerousPatterns = [
+        /rm\s+-rf\s+\/(?!\s*\$)/i, // rm -rf / (not followed by variable)
+        /curl\s+.*\|\s*(?:bash|sh)/i, // curl | bash
+        /wget\s+.*\|\s*(?:bash|sh)/i, // wget | sh
+      ];
+
+      for (const pattern of dangerousPatterns) {
+        if (pattern.test(content)) {
+          logger.warn(
+            `Init script contains potentially dangerous pattern: ${pattern.source}. User responsibility to verify script safety.`
+          );
+        }
+      }
+
+      const scriptPath = getInitScriptPath(projectPath);
+      const automakerDir = path.dirname(scriptPath);
+
+      // Ensure .automaker directory exists
+      await secureFs.mkdir(automakerDir, { recursive: true });
+
+      // Write the script content
+      await secureFs.writeFile(scriptPath, content, 'utf-8');
+
+      logger.info(`Wrote init script to ${scriptPath}`);
+
+      res.json({
+        success: true,
+        path: scriptPath,
+      });
+    } catch (error) {
+      logError(error, 'Write init script failed');
+      res.status(500).json({
+        success: false,
+        error: getErrorMessage(error),
+      });
+    }
+  };
+}
+
+/**
+ * DELETE /init-script - Delete the init script file
+ */
+export function createDeleteInitScriptHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath } = req.body as { projectPath: string };
+
+      if (!projectPath) {
+        res.status(400).json({
+          success: false,
+          error: 'projectPath is required',
+        });
+        return;
+      }
+
+      const scriptPath = getInitScriptPath(projectPath);
+
+      await secureFs.rm(scriptPath, { force: true });
+      logger.info(`Deleted init script at ${scriptPath}`);
+      res.json({
+        success: true,
+      });
+    } catch (error) {
+      logError(error, 'Delete init script failed');
+      res.status(500).json({
+        success: false,
+        error: getErrorMessage(error),
+      });
+    }
+  };
+}
+
+/**
+ * POST /run-init-script - Run (or re-run) the init script for a worktree
+ */
+export function createRunInitScriptHandler(events: EventEmitter) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, worktreePath, branch } = req.body as {
+        projectPath: string;
+        worktreePath: string;
+        branch: string;
+      };
+
+      if (!projectPath) {
+        res.status(400).json({
+          success: false,
+          error: 'projectPath is required',
+        });
+        return;
+      }
+
+      if (!worktreePath) {
+        res.status(400).json({
+          success: false,
+          error: 'worktreePath is required',
+        });
+        return;
+      }
+
+      if (!branch) {
+        res.status(400).json({
+          success: false,
+          error: 'branch is required',
+        });
+        return;
+      }
+
+      // Validate branch name to prevent injection via environment variables
+      if (!isValidBranchName(branch)) {
+        res.status(400).json({
+          success: false,
+          error:
+            'Invalid branch name. Branch names must contain only letters, numbers, dots, hyphens, underscores, and forward slashes.',
+        });
+        return;
+      }
+
+      const scriptPath = getInitScriptPath(projectPath);
+
+      // Check if script exists
+      try {
+        await secureFs.access(scriptPath);
+      } catch {
+        res.status(404).json({
+          success: false,
+          error: 'No init script found. Create one in Settings > Worktrees.',
+        });
+        return;
+      }
+
+      logger.info(`Running init script for branch "${branch}" (forced)`);
+
+      // Run the script asynchronously (non-blocking)
+      forceRunInitScript({
+        projectPath,
+        worktreePath,
+        branch,
+        emitter: events,
+      });
+
+      // Return immediately - progress will be streamed via WebSocket events
+      res.json({
+        success: true,
+        message: 'Init script started',
+      });
+    } catch (error) {
+      logError(error, 'Run init script failed');
+      res.status(500).json({
+        success: false,
+        error: getErrorMessage(error),
+      });
+    }
+  };
+}

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/routes/worktree/routes/open-in-editor.ts

@@ -1,78 +1,40 @@
 /**
  * POST /open-in-editor endpoint - Open a worktree directory in the default code editor
  * GET /default-editor endpoint - Get the name of the default code editor
+ * POST /refresh-editors endpoint - Clear editor cache and re-detect available editors
+ *
+ * This module uses @automaker/platform for cross-platform editor detection and launching.
  */
 
 import type { Request, Response } from 'express';
-import { exec } from 'child_process';
-import { promisify } from 'util';
+import { isAbsolute } from 'path';
+import {
+  clearEditorCache,
+  detectAllEditors,
+  detectDefaultEditor,
+  openInEditor,
+  openInFileManager,
+} from '@automaker/platform';
+import { createLogger } from '@automaker/utils';
 import { getErrorMessage, logError } from '../common.js';
 
-const execAsync = promisify(exec);
+const logger = createLogger('open-in-editor');
 
-// Editor detection with caching
-interface EditorInfo {
-  name: string;
-  command: string;
-}
-
-let cachedEditor: EditorInfo | null = null;
-
-/**
- * Detect which code editor is available on the system
- */
-async function detectDefaultEditor(): Promise<EditorInfo> {
-  // Return cached result if available
-  if (cachedEditor) {
-    return cachedEditor;
-  }
-
-  // Try Cursor first (if user has Cursor, they probably prefer it)
-  try {
-    await execAsync('which cursor || where cursor');
-    cachedEditor = { name: 'Cursor', command: 'cursor' };
-    return cachedEditor;
-  } catch {
-    // Cursor not found
-  }
-
-  // Try VS Code
-  try {
-    await execAsync('which code || where code');
-    cachedEditor = { name: 'VS Code', command: 'code' };
-    return cachedEditor;
-  } catch {
-    // VS Code not found
-  }
-
-  // Try Zed
-  try {
-    await execAsync('which zed || where zed');
-    cachedEditor = { name: 'Zed', command: 'zed' };
-    return cachedEditor;
-  } catch {
-    // Zed not found
-  }
-
-  // Try Sublime Text
-  try {
-    await execAsync('which subl || where subl');
-    cachedEditor = { name: 'Sublime Text', command: 'subl' };
-    return cachedEditor;
-  } catch {
-    // Sublime not found
-  }
-
-  // Fallback to file manager
-  const platform = process.platform;
-  if (platform === 'darwin') {
-    cachedEditor = { name: 'Finder', command: 'open' };
-  } else if (platform === 'win32') {
-    cachedEditor = { name: 'Explorer', command: 'explorer' };
-  } else {
-    cachedEditor = { name: 'File Manager', command: 'xdg-open' };
-  }
-  return cachedEditor;
+export function createGetAvailableEditorsHandler() {
+  return async (_req: Request, res: Response): Promise<void> => {
+    try {
+      const editors = await detectAllEditors();
+      res.json({
+        success: true,
+        result: {
+          editors,
+        },
+      });
+    } catch (error) {
+      logError(error, 'Get available editors failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
 }
 
 export function createGetDefaultEditorHandler() {
@@ -93,11 +55,41 @@ export function createGetDefaultEditorHandler() {
   };
 }
 
+/**
+ * Handler to refresh the editor cache and re-detect available editors
+ * Useful when the user has installed/uninstalled editors
+ */
+export function createRefreshEditorsHandler() {
+  return async (_req: Request, res: Response): Promise<void> => {
+    try {
+      // Clear the cache
+      clearEditorCache();
+
+      // Re-detect editors (this will repopulate the cache)
+      const editors = await detectAllEditors();
+
+      logger.info(`Editor cache refreshed, found ${editors.length} editors`);
+
+      res.json({
+        success: true,
+        result: {
+          editors,
+          message: `Found ${editors.length} available editors`,
+        },
+      });
+    } catch (error) {
+      logError(error, 'Refresh editors failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
+
 export function createOpenInEditorHandler() {
   return async (req: Request, res: Response): Promise<void> => {
     try {
-      const { worktreePath } = req.body as {
+      const { worktreePath, editorCommand } = req.body as {
         worktreePath: string;
+        editorCommand?: string;
       };
 
       if (!worktreePath) {
@@ -108,42 +100,44 @@ export function createOpenInEditorHandler() {
         return;
       }
 
-      const editor = await detectDefaultEditor();
+      // Security: Validate that worktreePath is an absolute path
+      if (!isAbsolute(worktreePath)) {
+        res.status(400).json({
+          success: false,
+          error: 'worktreePath must be an absolute path',
+        });
+        return;
+      }
 
       try {
-        await execAsync(`${editor.command} "${worktreePath}"`);
+        // Use the platform utility to open in editor
+        const result = await openInEditor(worktreePath, editorCommand);
         res.json({
           success: true,
           result: {
-            message: `Opened ${worktreePath} in ${editor.name}`,
-            editorName: editor.name,
+            message: `Opened ${worktreePath} in ${result.editorName}`,
+            editorName: result.editorName,
           },
         });
       } catch (editorError) {
-        // If the detected editor fails, try opening in default file manager as fallback
-        const platform = process.platform;
-        let openCommand: string;
-        let fallbackName: string;
+        // If the specified editor fails, try opening in default file manager as fallback
+        logger.warn(
+          `Failed to open in editor, falling back to file manager: ${getErrorMessage(editorError)}`
+        );
 
-        if (platform === 'darwin') {
-          openCommand = `open "${worktreePath}"`;
-          fallbackName = 'Finder';
-        } else if (platform === 'win32') {
-          openCommand = `explorer "${worktreePath}"`;
-          fallbackName = 'Explorer';
-        } else {
-          openCommand = `xdg-open "${worktreePath}"`;
-          fallbackName = 'File Manager';
+        try {
+          const result = await openInFileManager(worktreePath);
+          res.json({
+            success: true,
+            result: {
+              message: `Opened ${worktreePath} in ${result.editorName}`,
+              editorName: result.editorName,
+            },
+          });
+        } catch (fallbackError) {
+          // Both editor and file manager failed
+          throw fallbackError;
         }
-
-        await execAsync(openCommand);
-        res.json({
-          success: true,
-          result: {
-            message: `Opened ${worktreePath} in ${fallbackName}`,
-            editorName: fallbackName,
-          },
-        });
       }
     } catch (error) {
       logError(error, 'Open in editor failed');

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

@@ -308,13 +308,15 @@ export class FeatureLoader {
    * @param updates - Partial feature updates
    * @param descriptionHistorySource - Source of description change ('enhance' or 'edit')
    * @param enhancementMode - Enhancement mode if source is 'enhance'
+   * @param preEnhancementDescription - Description before enhancement (for restoring original)
    */
   async update(
     projectPath: string,
     featureId: string,
     updates: Partial<Feature>,
     descriptionHistorySource?: 'enhance' | 'edit',
-    enhancementMode?: 'improve' | 'technical' | 'simplify' | 'acceptance'
+    enhancementMode?: 'improve' | 'technical' | 'simplify' | 'acceptance' | 'ux-reviewer',
+    preEnhancementDescription?: string
   ): Promise<Feature> {
     const feature = await this.get(projectPath, featureId);
     if (!feature) {
@@ -338,9 +340,31 @@ export class FeatureLoader {
       updates.description !== feature.description &&
       updates.description.trim()
     ) {
+      const timestamp = new Date().toISOString();
+
+      // If this is an enhancement and we have the pre-enhancement description,
+      // add the original text to history first (so user can restore to it)
+      if (
+        descriptionHistorySource === 'enhance' &&
+        preEnhancementDescription &&
+        preEnhancementDescription.trim()
+      ) {
+        // Check if this pre-enhancement text is different from the last history entry
+        const lastEntry = updatedHistory[updatedHistory.length - 1];
+        if (!lastEntry || lastEntry.description !== preEnhancementDescription) {
+          const preEnhanceEntry: DescriptionHistoryEntry = {
+            description: preEnhancementDescription,
+            timestamp,
+            source: updatedHistory.length === 0 ? 'initial' : 'edit',
+          };
+          updatedHistory = [...updatedHistory, preEnhanceEntry];
+        }
+      }
+
+      // Add the new/enhanced description to history
       const historyEntry: DescriptionHistoryEntry = {
         description: updates.description,
-        timestamp: new Date().toISOString(),
+        timestamp,
         source: descriptionHistorySource || 'edit',
         ...(descriptionHistorySource === 'enhance' && enhancementMode ? { enhancementMode } : {}),
       };

apps/server/src/services/init-script-service.ts

@@ -0,0 +1,360 @@
+/**
+ * Init Script Service - Executes worktree initialization scripts
+ *
+ * Runs the .automaker/worktree-init.sh script after worktree creation.
+ * Uses Git Bash on Windows for cross-platform shell script compatibility.
+ */
+
+import { spawn } from 'child_process';
+import path from 'path';
+import { createLogger } from '@automaker/utils';
+import { systemPathExists, getShellPaths, findGitBashPath } from '@automaker/platform';
+import { findCommand } from '../lib/cli-detection.js';
+import type { EventEmitter } from '../lib/events.js';
+import { readWorktreeMetadata, writeWorktreeMetadata } from '../lib/worktree-metadata.js';
+import * as secureFs from '../lib/secure-fs.js';
+
+const logger = createLogger('InitScript');
+
+export interface InitScriptOptions {
+  /** Absolute path to the project root */
+  projectPath: string;
+  /** Absolute path to the worktree directory */
+  worktreePath: string;
+  /** Branch name for this worktree */
+  branch: string;
+  /** Event emitter for streaming output */
+  emitter: EventEmitter;
+}
+
+interface ShellCommand {
+  shell: string;
+  args: string[];
+}
+
+/**
+ * Init Script Service
+ *
+ * Handles execution of worktree initialization scripts with cross-platform
+ * shell detection and proper streaming of output via WebSocket events.
+ */
+export class InitScriptService {
+  private cachedShellCommand: ShellCommand | null | undefined = undefined;
+
+  /**
+   * Get the path to the init script for a project
+   */
+  getInitScriptPath(projectPath: string): string {
+    return path.join(projectPath, '.automaker', 'worktree-init.sh');
+  }
+
+  /**
+   * Check if the init script has already been run for a worktree
+   */
+  async hasInitScriptRun(projectPath: string, branch: string): Promise<boolean> {
+    const metadata = await readWorktreeMetadata(projectPath, branch);
+    return metadata?.initScriptRan === true;
+  }
+
+  /**
+   * Find the appropriate shell for running scripts
+   * Uses findGitBashPath() on Windows to avoid WSL bash, then falls back to PATH
+   */
+  async findShellCommand(): Promise<ShellCommand | null> {
+    // Return cached result if available
+    if (this.cachedShellCommand !== undefined) {
+      return this.cachedShellCommand;
+    }
+
+    if (process.platform === 'win32') {
+      // On Windows, prioritize Git Bash over WSL bash (C:\Windows\System32\bash.exe)
+      // WSL bash may not be properly configured and causes ENOENT errors
+
+      // First try known Git Bash installation paths
+      const gitBashPath = await findGitBashPath();
+      if (gitBashPath) {
+        logger.debug(`Found Git Bash at: ${gitBashPath}`);
+        this.cachedShellCommand = { shell: gitBashPath, args: [] };
+        return this.cachedShellCommand;
+      }
+
+      // Fall back to finding bash in PATH, but skip WSL bash
+      const bashInPath = await findCommand(['bash']);
+      if (bashInPath && !bashInPath.toLowerCase().includes('system32')) {
+        logger.debug(`Found bash in PATH at: ${bashInPath}`);
+        this.cachedShellCommand = { shell: bashInPath, args: [] };
+        return this.cachedShellCommand;
+      }
+
+      logger.warn('Git Bash not found. WSL bash was skipped to avoid compatibility issues.');
+      this.cachedShellCommand = null;
+      return null;
+    }
+
+    // Unix-like systems: use getShellPaths() and check existence
+    const shellPaths = getShellPaths();
+    const posixShells = shellPaths.filter(
+      (p) => p.includes('bash') || p === '/bin/sh' || p === '/usr/bin/sh'
+    );
+
+    for (const shellPath of posixShells) {
+      try {
+        if (systemPathExists(shellPath)) {
+          this.cachedShellCommand = { shell: shellPath, args: [] };
+          return this.cachedShellCommand;
+        }
+      } catch {
+        // Path not allowed or doesn't exist, continue
+      }
+    }
+
+    // Ultimate fallback
+    if (systemPathExists('/bin/sh')) {
+      this.cachedShellCommand = { shell: '/bin/sh', args: [] };
+      return this.cachedShellCommand;
+    }
+
+    this.cachedShellCommand = null;
+    return null;
+  }
+
+  /**
+   * Run the worktree initialization script
+   * Non-blocking - returns immediately after spawning
+   */
+  async runInitScript(options: InitScriptOptions): Promise<void> {
+    const { projectPath, worktreePath, branch, emitter } = options;
+
+    const scriptPath = this.getInitScriptPath(projectPath);
+
+    // Check if script exists using secureFs (respects ALLOWED_ROOT_DIRECTORY)
+    try {
+      await secureFs.access(scriptPath);
+    } catch {
+      logger.debug(`No init script found at ${scriptPath}`);
+      return;
+    }
+
+    // Check if already run
+    if (await this.hasInitScriptRun(projectPath, branch)) {
+      logger.info(`Init script already ran for branch "${branch}", skipping`);
+      return;
+    }
+
+    // Get shell command
+    const shellCmd = await this.findShellCommand();
+    if (!shellCmd) {
+      const error =
+        process.platform === 'win32'
+          ? 'Git Bash not found. Please install Git for Windows to run init scripts.'
+          : 'No shell found (/bin/bash or /bin/sh)';
+      logger.error(error);
+
+      // Update metadata with error, preserving existing metadata
+      const existingMetadata = await readWorktreeMetadata(projectPath, branch);
+      await writeWorktreeMetadata(projectPath, branch, {
+        branch,
+        createdAt: existingMetadata?.createdAt || new Date().toISOString(),
+        pr: existingMetadata?.pr,
+        initScriptRan: true,
+        initScriptStatus: 'failed',
+        initScriptError: error,
+      });
+
+      emitter.emit('worktree:init-completed', {
+        projectPath,
+        worktreePath,
+        branch,
+        success: false,
+        error,
+      });
+      return;
+    }
+
+    logger.info(`Running init script for branch "${branch}" in ${worktreePath}`);
+    logger.debug(`Using shell: ${shellCmd.shell}`);
+
+    // Update metadata to mark as running
+    const existingMetadata = await readWorktreeMetadata(projectPath, branch);
+    await writeWorktreeMetadata(projectPath, branch, {
+      branch,
+      createdAt: existingMetadata?.createdAt || new Date().toISOString(),
+      pr: existingMetadata?.pr,
+      initScriptRan: false,
+      initScriptStatus: 'running',
+    });
+
+    // Emit started event
+    emitter.emit('worktree:init-started', {
+      projectPath,
+      worktreePath,
+      branch,
+    });
+
+    // Build safe environment - only pass necessary variables, not all of process.env
+    // This prevents exposure of sensitive credentials like ANTHROPIC_API_KEY
+    const safeEnv: Record<string, string> = {
+      // Automaker-specific variables
+      AUTOMAKER_PROJECT_PATH: projectPath,
+      AUTOMAKER_WORKTREE_PATH: worktreePath,
+      AUTOMAKER_BRANCH: branch,
+
+      // Essential system variables
+      PATH: process.env.PATH || '',
+      HOME: process.env.HOME || '',
+      USER: process.env.USER || '',
+      TMPDIR: process.env.TMPDIR || process.env.TEMP || process.env.TMP || '/tmp',
+
+      // Shell and locale
+      SHELL: process.env.SHELL || '',
+      LANG: process.env.LANG || 'en_US.UTF-8',
+      LC_ALL: process.env.LC_ALL || '',
+
+      // Force color output even though we're not a TTY
+      FORCE_COLOR: '1',
+      npm_config_color: 'always',
+      CLICOLOR_FORCE: '1',
+
+      // Git configuration
+      GIT_TERMINAL_PROMPT: '0',
+    };
+
+    // Platform-specific additions
+    if (process.platform === 'win32') {
+      safeEnv.USERPROFILE = process.env.USERPROFILE || '';
+      safeEnv.APPDATA = process.env.APPDATA || '';
+      safeEnv.LOCALAPPDATA = process.env.LOCALAPPDATA || '';
+      safeEnv.SystemRoot = process.env.SystemRoot || 'C:\\Windows';
+      safeEnv.TEMP = process.env.TEMP || '';
+    }
+
+    // Spawn the script with safe environment
+    const child = spawn(shellCmd.shell, [...shellCmd.args, scriptPath], {
+      cwd: worktreePath,
+      env: safeEnv,
+      stdio: ['ignore', 'pipe', 'pipe'],
+    });
+
+    // Stream stdout
+    child.stdout?.on('data', (data: Buffer) => {
+      const content = data.toString();
+      emitter.emit('worktree:init-output', {
+        projectPath,
+        branch,
+        type: 'stdout',
+        content,
+      });
+    });
+
+    // Stream stderr
+    child.stderr?.on('data', (data: Buffer) => {
+      const content = data.toString();
+      emitter.emit('worktree:init-output', {
+        projectPath,
+        branch,
+        type: 'stderr',
+        content,
+      });
+    });
+
+    // Handle completion
+    child.on('exit', async (code) => {
+      const success = code === 0;
+      const status = success ? 'success' : 'failed';
+
+      logger.info(`Init script for branch "${branch}" ${status} with exit code ${code}`);
+
+      // Update metadata
+      const metadata = await readWorktreeMetadata(projectPath, branch);
+      await writeWorktreeMetadata(projectPath, branch, {
+        branch,
+        createdAt: metadata?.createdAt || new Date().toISOString(),
+        pr: metadata?.pr,
+        initScriptRan: true,
+        initScriptStatus: status,
+        initScriptError: success ? undefined : `Exit code: ${code}`,
+      });
+
+      // Emit completion event
+      emitter.emit('worktree:init-completed', {
+        projectPath,
+        worktreePath,
+        branch,
+        success,
+        exitCode: code,
+      });
+    });
+
+    child.on('error', async (error) => {
+      logger.error(`Init script error for branch "${branch}":`, error);
+
+      // Update metadata
+      const metadata = await readWorktreeMetadata(projectPath, branch);
+      await writeWorktreeMetadata(projectPath, branch, {
+        branch,
+        createdAt: metadata?.createdAt || new Date().toISOString(),
+        pr: metadata?.pr,
+        initScriptRan: true,
+        initScriptStatus: 'failed',
+        initScriptError: error.message,
+      });
+
+      // Emit completion with error
+      emitter.emit('worktree:init-completed', {
+        projectPath,
+        worktreePath,
+        branch,
+        success: false,
+        error: error.message,
+      });
+    });
+  }
+
+  /**
+   * Force re-run the worktree initialization script
+   * Ignores the initScriptRan flag - useful for testing or re-setup
+   */
+  async forceRunInitScript(options: InitScriptOptions): Promise<void> {
+    const { projectPath, branch } = options;
+
+    // Reset the initScriptRan flag so the script will run
+    const metadata = await readWorktreeMetadata(projectPath, branch);
+    if (metadata) {
+      await writeWorktreeMetadata(projectPath, branch, {
+        ...metadata,
+        initScriptRan: false,
+        initScriptStatus: undefined,
+        initScriptError: undefined,
+      });
+    }
+
+    // Now run the script
+    await this.runInitScript(options);
+  }
+}
+
+// Singleton instance for convenience
+let initScriptService: InitScriptService | null = null;
+
+/**
+ * Get the singleton InitScriptService instance
+ */
+export function getInitScriptService(): InitScriptService {
+  if (!initScriptService) {
+    initScriptService = new InitScriptService();
+  }
+  return initScriptService;
+}
+
+// Export convenience functions that use the singleton
+export const getInitScriptPath = (projectPath: string) =>
+  getInitScriptService().getInitScriptPath(projectPath);
+
+export const hasInitScriptRun = (projectPath: string, branch: string) =>
+  getInitScriptService().hasInitScriptRun(projectPath, branch);
+
+export const runInitScript = (options: InitScriptOptions) =>
+  getInitScriptService().runInitScript(options);
+
+export const forceRunInitScript = (options: InitScriptOptions) =>
+  getInitScriptService().forceRunInitScript(options);

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/lib/enhancement-prompts.test.ts

@@ -17,6 +17,14 @@ import {
   type EnhancementMode,
 } from '@/lib/enhancement-prompts.js';
 
+const ENHANCEMENT_MODES: EnhancementMode[] = [
+  'improve',
+  'technical',
+  'simplify',
+  'acceptance',
+  'ux-reviewer',
+];
+
 describe('enhancement-prompts.ts', () => {
   describe('System Prompt Constants', () => {
     it('should have non-empty improve system prompt', () => {
@@ -184,8 +192,7 @@ describe('enhancement-prompts.ts', () => {
     });
 
     it('should work with all enhancement modes', () => {
-      const modes: EnhancementMode[] = ['improve', 'technical', 'simplify', 'acceptance'];
-      modes.forEach((mode) => {
+      ENHANCEMENT_MODES.forEach((mode) => {
         const prompt = buildUserPrompt(mode, testText);
         expect(prompt).toContain(testText);
         expect(prompt.length).toBeGreaterThan(100);
@@ -205,6 +212,7 @@ describe('enhancement-prompts.ts', () => {
       expect(isValidEnhancementMode('technical')).toBe(true);
       expect(isValidEnhancementMode('simplify')).toBe(true);
       expect(isValidEnhancementMode('acceptance')).toBe(true);
+      expect(isValidEnhancementMode('ux-reviewer')).toBe(true);
     });
 
     it('should return false for invalid modes', () => {
@@ -216,13 +224,12 @@ describe('enhancement-prompts.ts', () => {
   });
 
   describe('getAvailableEnhancementModes', () => {
-    it('should return all four enhancement modes', () => {
+    it('should return all enhancement modes', () => {
       const modes = getAvailableEnhancementModes();
-      expect(modes).toHaveLength(4);
-      expect(modes).toContain('improve');
-      expect(modes).toContain('technical');
-      expect(modes).toContain('simplify');
-      expect(modes).toContain('acceptance');
+      expect(modes).toHaveLength(ENHANCEMENT_MODES.length);
+      ENHANCEMENT_MODES.forEach((mode) => {
+        expect(modes).toContain(mode);
+      });
     });
 
     it('should return an array', () => {

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

@@ -3,7 +3,7 @@ import {
   OpencodeProvider,
   resetToolUseIdCounter,
 } from '../../../src/providers/opencode-provider.js';
-import type { ProviderMessage } from '@automaker/types';
+import type { ProviderMessage, ModelDefinition } from '@automaker/types';
 import { collectAsyncGenerator } from '../../utils/helpers.js';
 import { spawnJSONLProcess, getOpenCodeAuthIndicators } from '@automaker/platform';
 
@@ -51,63 +51,38 @@ describe('opencode-provider.ts', () => {
   });
 
   describe('getAvailableModels', () => {
-    it('should return 10 models', () => {
+    it('should return 5 models', () => {
       const models = provider.getAvailableModels();
-      expect(models).toHaveLength(10);
+      expect(models).toHaveLength(5);
     });
 
-    it('should include Claude Sonnet 4.5 (Bedrock) as default', () => {
-      const models = provider.getAvailableModels();
-      const sonnet = models.find(
-        (m) => m.id === 'amazon-bedrock/anthropic.claude-sonnet-4-5-20250929-v1:0'
-      );
-
-      expect(sonnet).toBeDefined();
-      expect(sonnet?.name).toBe('Claude Sonnet 4.5 (Bedrock)');
-      expect(sonnet?.provider).toBe('opencode');
-      expect(sonnet?.default).toBe(true);
-      expect(sonnet?.modelString).toBe('amazon-bedrock/anthropic.claude-sonnet-4-5-20250929-v1:0');
-    });
-
-    it('should include Claude Opus 4.5 (Bedrock)', () => {
-      const models = provider.getAvailableModels();
-      const opus = models.find(
-        (m) => m.id === 'amazon-bedrock/anthropic.claude-opus-4-5-20251101-v1:0'
-      );
-
-      expect(opus).toBeDefined();
-      expect(opus?.name).toBe('Claude Opus 4.5 (Bedrock)');
-      expect(opus?.modelString).toBe('amazon-bedrock/anthropic.claude-opus-4-5-20251101-v1:0');
-    });
-
-    it('should include Claude Haiku 4.5 (Bedrock)', () => {
-      const models = provider.getAvailableModels();
-      const haiku = models.find(
-        (m) => m.id === 'amazon-bedrock/anthropic.claude-haiku-4-5-20251001-v1:0'
-      );
-
-      expect(haiku).toBeDefined();
-      expect(haiku?.name).toBe('Claude Haiku 4.5 (Bedrock)');
-      expect(haiku?.tier).toBe('standard');
-    });
-
-    it('should include free tier Big Pickle model', () => {
+    it('should include Big Pickle as default', () => {
       const models = provider.getAvailableModels();
       const bigPickle = models.find((m) => m.id === 'opencode/big-pickle');
 
       expect(bigPickle).toBeDefined();
       expect(bigPickle?.name).toBe('Big Pickle (Free)');
+      expect(bigPickle?.provider).toBe('opencode');
+      expect(bigPickle?.default).toBe(true);
       expect(bigPickle?.modelString).toBe('opencode/big-pickle');
-      expect(bigPickle?.tier).toBe('basic');
     });
 
-    it('should include DeepSeek R1 (Bedrock)', () => {
+    it('should include free tier GLM model', () => {
       const models = provider.getAvailableModels();
-      const deepseek = models.find((m) => m.id === 'amazon-bedrock/deepseek.r1-v1:0');
+      const glm = models.find((m) => m.id === 'opencode/glm-4.7-free');
 
-      expect(deepseek).toBeDefined();
-      expect(deepseek?.name).toBe('DeepSeek R1 (Bedrock)');
-      expect(deepseek?.tier).toBe('premium');
+      expect(glm).toBeDefined();
+      expect(glm?.name).toBe('GLM 4.7 Free');
+      expect(glm?.tier).toBe('basic');
+    });
+
+    it('should include free tier MiniMax model', () => {
+      const models = provider.getAvailableModels();
+      const minimax = models.find((m) => m.id === 'opencode/minimax-m2.1-free');
+
+      expect(minimax).toBeDefined();
+      expect(minimax?.name).toBe('MiniMax M2.1 Free');
+      expect(minimax?.tier).toBe('basic');
     });
 
     it('should have all models support tools', () => {
@@ -128,6 +103,24 @@ describe('opencode-provider.ts', () => {
     });
   });
 
+  describe('parseModelsOutput', () => {
+    it('should parse nested provider model IDs', () => {
+      const output = ['openrouter/anthropic/claude-3.5-sonnet', 'openai/gpt-4o'].join('\n');
+
+      const parseModelsOutput = (
+        provider as unknown as { parseModelsOutput: (output: string) => ModelDefinition[] }
+      ).parseModelsOutput.bind(provider);
+      const models = parseModelsOutput(output);
+
+      expect(models).toHaveLength(2);
+      const openrouterModel = models.find((model) => model.id.startsWith('openrouter/'));
+
+      expect(openrouterModel).toBeDefined();
+      expect(openrouterModel?.provider).toBe('openrouter');
+      expect(openrouterModel?.modelString).toBe('openrouter/anthropic/claude-3.5-sonnet');
+    });
+  });
+
   describe('supportsFeature', () => {
     it("should support 'tools' feature", () => {
       expect(provider.supportsFeature('tools')).toBe(true);
@@ -168,41 +161,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 +203,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 +229,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 +257,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 +271,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 +283,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 +317,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 +332,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 +373,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 +389,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 +412,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 +426,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 +442,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 +464,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 +484,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 +501,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 +514,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 +583,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 +607,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 +618,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 +719,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 +729,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 +745,7 @@ describe('opencode-provider.ts', () => {
       const results = await collectAsyncGenerator<ProviderMessage>(
         mockedProvider.executeQuery({
           prompt: 'Test',
+          model: 'opencode/big-pickle',
           cwd: '/test',
         })
       );
@@ -1039,10 +1038,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 +1067,7 @@ describe('opencode-provider.ts', () => {
       const results = await collectAsyncGenerator<ProviderMessage>(
         mockedProvider.executeQuery({
           prompt: 'Test',
+          model: 'opencode/big-pickle',
           cwd: '/tmp',
         })
       );
@@ -1069,12 +1081,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 +1098,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 +1115,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 +1146,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 +1162,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 +1178,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 +1192,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);
@@ -1203,7 +1236,7 @@ describe('opencode-provider.ts', () => {
       const defaultModels = models.filter((m) => m.default === true);
 
       expect(defaultModels).toHaveLength(1);
-      expect(defaultModels[0].id).toBe('amazon-bedrock/anthropic.claude-sonnet-4-5-20250929-v1:0');
+      expect(defaultModels[0].id).toBe('opencode/big-pickle');
     });
 
     it('should have valid tier values for all models', () => {
@@ -1231,13 +1264,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 +1279,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/server/tests/unit/routes/app-spec/common.test.ts

@@ -5,59 +5,61 @@ import {
   getSpecRegenerationStatus,
 } from '@/routes/app-spec/common.js';
 
+const TEST_PROJECT_PATH = '/tmp/automaker-test-project';
+
 describe('app-spec/common.ts', () => {
   beforeEach(() => {
     // Reset state before each test
-    setRunningState(false, null);
+    setRunningState(TEST_PROJECT_PATH, false, null);
   });
 
   describe('setRunningState', () => {
     it('should set isRunning to true when running is true', () => {
-      setRunningState(true);
-      expect(getSpecRegenerationStatus().isRunning).toBe(true);
+      setRunningState(TEST_PROJECT_PATH, true);
+      expect(getSpecRegenerationStatus(TEST_PROJECT_PATH).isRunning).toBe(true);
     });
 
     it('should set isRunning to false when running is false', () => {
-      setRunningState(true);
-      setRunningState(false);
-      expect(getSpecRegenerationStatus().isRunning).toBe(false);
+      setRunningState(TEST_PROJECT_PATH, true);
+      setRunningState(TEST_PROJECT_PATH, false);
+      expect(getSpecRegenerationStatus(TEST_PROJECT_PATH).isRunning).toBe(false);
     });
 
     it('should set currentAbortController when provided', () => {
       const controller = new AbortController();
-      setRunningState(true, controller);
-      expect(getSpecRegenerationStatus().currentAbortController).toBe(controller);
+      setRunningState(TEST_PROJECT_PATH, true, controller);
+      expect(getSpecRegenerationStatus(TEST_PROJECT_PATH).currentAbortController).toBe(controller);
     });
 
     it('should set currentAbortController to null when not provided', () => {
       const controller = new AbortController();
-      setRunningState(true, controller);
-      setRunningState(false);
-      expect(getSpecRegenerationStatus().currentAbortController).toBe(null);
+      setRunningState(TEST_PROJECT_PATH, true, controller);
+      setRunningState(TEST_PROJECT_PATH, false);
+      expect(getSpecRegenerationStatus(TEST_PROJECT_PATH).currentAbortController).toBe(null);
     });
 
-    it('should set currentAbortController to null when explicitly passed null', () => {
+    it('should keep currentAbortController when explicitly passed null while running', () => {
       const controller = new AbortController();
-      setRunningState(true, controller);
-      setRunningState(true, null);
-      expect(getSpecRegenerationStatus().currentAbortController).toBe(null);
+      setRunningState(TEST_PROJECT_PATH, true, controller);
+      setRunningState(TEST_PROJECT_PATH, true, null);
+      expect(getSpecRegenerationStatus(TEST_PROJECT_PATH).currentAbortController).toBe(controller);
     });
 
     it('should update state multiple times correctly', () => {
       const controller1 = new AbortController();
       const controller2 = new AbortController();
 
-      setRunningState(true, controller1);
-      expect(getSpecRegenerationStatus().isRunning).toBe(true);
-      expect(getSpecRegenerationStatus().currentAbortController).toBe(controller1);
+      setRunningState(TEST_PROJECT_PATH, true, controller1);
+      expect(getSpecRegenerationStatus(TEST_PROJECT_PATH).isRunning).toBe(true);
+      expect(getSpecRegenerationStatus(TEST_PROJECT_PATH).currentAbortController).toBe(controller1);
 
-      setRunningState(true, controller2);
-      expect(getSpecRegenerationStatus().isRunning).toBe(true);
-      expect(getSpecRegenerationStatus().currentAbortController).toBe(controller2);
+      setRunningState(TEST_PROJECT_PATH, true, controller2);
+      expect(getSpecRegenerationStatus(TEST_PROJECT_PATH).isRunning).toBe(true);
+      expect(getSpecRegenerationStatus(TEST_PROJECT_PATH).currentAbortController).toBe(controller2);
 
-      setRunningState(false, null);
-      expect(getSpecRegenerationStatus().isRunning).toBe(false);
-      expect(getSpecRegenerationStatus().currentAbortController).toBe(null);
+      setRunningState(TEST_PROJECT_PATH, false, null);
+      expect(getSpecRegenerationStatus(TEST_PROJECT_PATH).isRunning).toBe(false);
+      expect(getSpecRegenerationStatus(TEST_PROJECT_PATH).currentAbortController).toBe(null);
     });
   });
 

apps/server/tests/unit/services/dev-server-service.test.ts

@@ -8,6 +8,7 @@ import fs from 'fs/promises';
 vi.mock('child_process', () => ({
   spawn: vi.fn(),
   execSync: vi.fn(),
+  execFile: vi.fn(),
 }));
 
 // Mock secure-fs

apps/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@automaker/ui",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "An autonomous AI development studio that helps you build software faster using AI-powered agents",
   "homepage": "https://github.com/AutoMaker-Org/automaker",
   "repository": {
@@ -42,6 +42,8 @@
     "@automaker/dependency-resolver": "1.0.0",
     "@automaker/types": "1.0.0",
     "@codemirror/lang-xml": "6.1.0",
+    "@codemirror/language": "^6.12.1",
+    "@codemirror/legacy-modes": "^6.5.2",
     "@codemirror/theme-one-dark": "6.1.3",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",

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/icons/editor-icons.tsx

@@ -0,0 +1,220 @@
+import type { ComponentType, ComponentProps } from 'react';
+import { FolderOpen } from 'lucide-react';
+
+type IconProps = ComponentProps<'svg'>;
+type IconComponent = ComponentType<IconProps>;
+
+const ANTIGRAVITY_COMMANDS = ['antigravity', 'agy'] as const;
+const [PRIMARY_ANTIGRAVITY_COMMAND, LEGACY_ANTIGRAVITY_COMMAND] = ANTIGRAVITY_COMMANDS;
+
+/**
+ * Cursor editor logo icon - from LobeHub icons
+ */
+export function CursorIcon(props: IconProps) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M22.106 5.68L12.5.135a.998.998 0 00-.998 0L1.893 5.68a.84.84 0 00-.419.726v11.186c0 .3.16.577.42.727l9.607 5.547a.999.999 0 00.998 0l9.608-5.547a.84.84 0 00.42-.727V6.407a.84.84 0 00-.42-.726zm-.603 1.176L12.228 22.92c-.063.108-.228.064-.228-.061V12.34a.59.59 0 00-.295-.51l-9.11-5.26c-.107-.062-.063-.228.062-.228h18.55c.264 0 .428.286.296.514z" />
+    </svg>
+  );
+}
+
+/**
+ * VS Code editor logo icon
+ */
+export function VSCodeIcon(props: IconProps) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M23.15 2.587L18.21.21a1.494 1.494 0 0 0-1.705.29l-9.46 8.63-4.12-3.128a.999.999 0 0 0-1.276.057L.327 7.261A1 1 0 0 0 .326 8.74L3.899 12 .326 15.26a1 1 0 0 0 .001 1.479L1.65 17.94a.999.999 0 0 0 1.276.057l4.12-3.128 9.46 8.63a1.492 1.492 0 0 0 1.704.29l4.942-2.377A1.5 1.5 0 0 0 24 20.06V3.939a1.5 1.5 0 0 0-.85-1.352zm-5.146 14.861L10.826 12l7.178-5.448v10.896z" />
+    </svg>
+  );
+}
+
+/**
+ * VS Code Insiders editor logo icon (same as VS Code)
+ */
+export function VSCodeInsidersIcon(props: IconProps) {
+  return <VSCodeIcon {...props} />;
+}
+
+/**
+ * Kiro editor logo icon (VS Code fork)
+ */
+export function KiroIcon(props: IconProps) {
+  return (
+    <svg viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M6.594.016A7.006 7.006 0 0 0 .742 3.875a6.996 6.996 0 0 0-.726 2.793C.004 6.878 0 9.93.004 16.227c.004 8.699.008 9.265.031 9.476.113.93.324 1.652.707 2.422a6.918 6.918 0 0 0 3.172 3.148c.75.372 1.508.59 2.398.692.227.027.77.027 9.688.027 8.945 0 9.457 0 9.688-.027.917-.106 1.66-.32 2.437-.707a6.918 6.918 0 0 0 3.148-3.172c.372-.75.59-1.508.692-2.398.027-.227.027-.77.027-9.665 0-9.976.004-9.53-.07-10.03a6.993 6.993 0 0 0-3.024-4.798 6.427 6.427 0 0 0-.757-.445 7.06 7.06 0 0 0-2.774-.734c-.328-.02-18.437-.02-18.773 0Zm10.789 5.406a7.556 7.556 0 0 1 6.008 3.805c.148.257.406.796.52 1.085.394 1 .632 2.157.769 3.75.035.38.05 1.965.023 2.407-.125 2.168-.625 4.183-1.515 6.078a9.77 9.77 0 0 1-.801 1.437c-.93 1.305-2.32 2.332-3.48 2.57-.895.184-1.602-.1-2.048-.827a3.42 3.42 0 0 1-.25-.528c-.035-.097-.062-.129-.086-.09-.003.008-.09.075-.191.153-.95.722-2.02 1.175-3.059 1.293-.273.03-.859.023-1.085-.016-.715-.121-1.286-.441-1.649-.93a2.563 2.563 0 0 1-.328-.632c-.117-.36-.156-.813-.117-1.227.054-.55.226-1.184.484-1.766a.48.48 0 0 0 .043-.117 2.11 2.11 0 0 0-.137.055c-.363.16-.898.305-1.308.351-.844.098-1.426-.14-1.715-.699-.106-.203-.149-.39-.16-.676-.008-.261.008-.43.066-.656.059-.23.121-.367.403-.89.382-.72.492-.946.636-1.348.328-.899.48-1.723.688-3.754.148-1.469.254-2.14.433-2.766.028-.09.078-.277.114-.414.796-3.074 3.113-5.183 6.148-5.601.129-.016.309-.04.399-.047.238-.016.96-.02 1.195 0Zm0 0" />
+      <path d="M16.754 11.336a.815.815 0 0 0-.375.219c-.176.18-.293.441-.356.804-.039.235-.058.602-.039.868.028.406.082.64.204.894.128.262.304.426.546.496.106.031.383.031.5 0 .422-.113.703-.531.801-1.191a4.822 4.822 0 0 0-.012-.95c-.062-.378-.183-.675-.359-.863a.808.808 0 0 0-.648-.293.804.804 0 0 0-.262.016ZM20.375 11.328a1.01 1.01 0 0 0-.363.188c-.164.144-.293.402-.364.718-.05.23-.07.426-.07.743 0 .32.02.511.07.742.11.496.352.808.688.898.121.031.379.031.5 0 .402-.105.68-.5.781-1.11.035-.198.047-.648.024-.87-.063-.63-.293-1.059-.649-1.23a1.513 1.513 0 0 0-.219-.079 1.362 1.362 0 0 0-.398 0Zm0 0" />
+    </svg>
+  );
+}
+
+/**
+ * Zed editor logo icon (from Simple Icons)
+ */
+export function ZedIcon(props: IconProps) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M2.25 1.5a.75.75 0 0 0-.75.75v16.5H0V2.25A2.25 2.25 0 0 1 2.25 0h20.095c1.002 0 1.504 1.212.795 1.92L10.764 14.298h3.486V12.75h1.5v1.922a1.125 1.125 0 0 1-1.125 1.125H9.264l-2.578 2.578h11.689V9h1.5v9.375a1.5 1.5 0 0 1-1.5 1.5H5.185L2.562 22.5H21.75a.75.75 0 0 0 .75-.75V5.25H24v16.5A2.25 2.25 0 0 1 21.75 24H1.655C.653 24 .151 22.788.86 22.08L13.19 9.75H9.75v1.5h-1.5V9.375A1.125 1.125 0 0 1 9.375 8.25h5.314l2.625-2.625H5.625V15h-1.5V5.625a1.5 1.5 0 0 1 1.5-1.5h13.19L21.438 1.5z" />
+    </svg>
+  );
+}
+
+/**
+ * Sublime Text editor logo icon
+ */
+export function SublimeTextIcon(props: IconProps) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M20.953.004a.397.397 0 0 0-.18.045L3.473 8.63a.397.397 0 0 0-.033.69l4.873 3.33-5.26 2.882a.397.397 0 0 0-.006.692l17.3 9.73a.397.397 0 0 0 .593-.344V15.094a.397.397 0 0 0-.203-.346l-4.917-2.763 5.233-2.725a.397.397 0 0 0 .207-.348V.397a.397.397 0 0 0-.307-.393z" />
+    </svg>
+  );
+}
+
+/**
+ * macOS Finder icon
+ */
+export function FinderIcon(props: IconProps) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M2.5 3A2.5 2.5 0 0 0 0 5.5v13A2.5 2.5 0 0 0 2.5 21h19a2.5 2.5 0 0 0 2.5-2.5v-13A2.5 2.5 0 0 0 21.5 3h-19zM7 8.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm10 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm-9 6c0-.276.336-.5.75-.5h6.5c.414 0 .75.224.75.5v1c0 .828-1.343 2.5-4 2.5s-4-1.672-4-2.5v-1z" />
+    </svg>
+  );
+}
+
+/**
+ * Windsurf editor logo icon (by Codeium) - from LobeHub icons
+ */
+export function WindsurfIcon(props: IconProps) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M23.78 5.004h-.228a2.187 2.187 0 00-2.18 2.196v4.912c0 .98-.804 1.775-1.76 1.775a1.818 1.818 0 01-1.472-.773L13.168 5.95a2.197 2.197 0 00-1.81-.95c-1.134 0-2.154.972-2.154 2.173v4.94c0 .98-.797 1.775-1.76 1.775-.57 0-1.136-.289-1.472-.773L.408 5.098C.282 4.918 0 5.007 0 5.228v4.284c0 .216.066.426.188.604l5.475 7.889c.324.466.8.812 1.351.938 1.377.316 2.645-.754 2.645-2.117V11.89c0-.98.787-1.775 1.76-1.775h.002c.586 0 1.135.288 1.472.773l4.972 7.163a2.15 2.15 0 001.81.95c1.158 0 2.151-.973 2.151-2.173v-4.939c0-.98.787-1.775 1.76-1.775h.194c.122 0 .22-.1.22-.222V5.225a.221.221 0 00-.22-.222z"
+      />
+    </svg>
+  );
+}
+
+/**
+ * Trae editor logo icon (by ByteDance) - from LobeHub icons
+ */
+export function TraeIcon(props: IconProps) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M24 20.541H3.428v-3.426H0V3.4h24V20.54zM3.428 17.115h17.144V6.827H3.428v10.288zm8.573-5.196l-2.425 2.424-2.424-2.424 2.424-2.424 2.425 2.424zm6.857-.001l-2.424 2.423-2.425-2.423 2.425-2.425 2.424 2.425z" />
+    </svg>
+  );
+}
+
+/**
+ * JetBrains Rider logo icon
+ */
+export function RiderIcon(props: IconProps) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M0 0v24h24V0zm7.031 3.113A4.063 4.063 0 0 1 9.72 4.14a3.23 3.23 0 0 1 .84 2.28A3.16 3.16 0 0 1 8.4 9.54l2.46 3.6H8.28L6.12 9.9H4.38v3.24H2.16V3.12c1.61-.004 3.281.009 4.871-.007zm5.509.007h3.96c3.18 0 5.34 2.16 5.34 5.04 0 2.82-2.16 5.04-5.34 5.04h-3.96zm4.069 1.976c-.607.01-1.235.004-1.849.004v6.06h1.74a2.882 2.882 0 0 0 3.06-3 2.897 2.897 0 0 0-2.951-3.064zM4.319 5.1v2.88H6.6c1.08 0 1.68-.6 1.68-1.44 0-.96-.66-1.44-1.74-1.44zM2.16 19.5h9V21h-9Z" />
+    </svg>
+  );
+}
+
+/**
+ * JetBrains WebStorm logo icon
+ */
+export function WebStormIcon(props: IconProps) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M0 0v24h24V0H0zm17.889 2.889c1.444 0 2.667.444 3.667 1.278l-1.111 1.667c-.889-.611-1.722-1-2.556-1s-1.278.389-1.278.889v.056c0 .667.444.889 2.111 1.333 2 .556 3.111 1.278 3.111 3v.056c0 2-1.5 3.111-3.611 3.111-1.5-.056-3-.611-4.167-1.667l1.278-1.556c.889.722 1.833 1.222 2.944 1.222.889 0 1.389-.333 1.389-.944v-.056c0-.556-.333-.833-2-1.278-2-.5-3.222-1.056-3.222-3.056v-.056c0-1.833 1.444-3 3.444-3zm-16.111.222h2.278l1.5 5.778 1.722-5.778h1.667l1.667 5.778 1.5-5.778h2.333l-2.833 9.944H9.723L8.112 7.277l-1.667 5.778H4.612L1.779 3.111zm.5 16.389h9V21h-9v-1.5z" />
+    </svg>
+  );
+}
+
+/**
+ * Xcode logo icon
+ */
+export function XcodeIcon(props: IconProps) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M19.06 5.3327c.4517-.1936.7744-.2581 1.097-.1936.5163.1291.7744.5163.968.7098.1936.3872.9034.7744 1.2261.8389.2581.0645.7098-.6453 1.0325-1.2906.3227-.5808.5163-1.3552.4517-1.5488-.0645-.1936-.968-.5808-1.1616-.5808-.1291 0-.3872.1291-.8389.0645-.4517-.0645-.9034-.5808-1.1616-.968-.4517-.6453-1.097-1.0325-1.6778-1.3552-.6453-.3227-1.3552-.5163-2.065-.6453-1.0325-.2581-2.065-.4517-3.0975-.3227-.5808.0645-1.2906.1291-1.8069.3227-.0645 0-.1936.1936-.0645.1936s.5808.0645.5808.0645-.5807.1292-.5807.2583c0 .1291.0645.1291.1291.1291.0645 0 1.4842-.0645 2.065 0 .6453.1291 1.3552.4517 1.8069 1.2261.7744 1.4197.4517 2.7749.2581 3.2266-.968 2.1295-8.6472 15.2294-9.0344 16.1328-.3873.9034-.5163 1.4842.5807 2.065s1.6778.3227 2.0005-.0645c.3872-.5163 7.0339-17.1654 9.2925-18.2624zm-3.6138 8.7117h1.5488c1.0325 0 1.2261.5163 1.2261.7098.0645.5163-.1936 1.1616-1.2261 1.1616h-.968l.7744 1.2906c.4517.7744.2581 1.1616 0 1.4197-.3872.3872-1.2261.3872-1.6778-.4517l-.9034-1.5488c-.6453 1.4197-1.2906 2.9684-2.065 4.7753h4.0009c1.9359 0 3.5492-1.6133 3.5492-3.5492V6.5588c-.0645-.1291-.1936-.0645-.2581 0-.3872.4517-1.4842 2.0004-4.001 7.4856zm-9.8087 8.0019h-.3227c-2.3231 0-4.1945-1.8714-4.1945-4.1945V7.0105c0-2.3231 1.8714-4.1945 4.1945-4.1945h9.3571c-.1936-.1936-.968-.5163-1.7423-.4517-.3227 0-.968.1291-1.3552-.1291-.3872-.3227-.3227-.5163-.9034-.5163H4.9277c-2.6458 0-4.7753 2.1295-4.7753 4.7753v11.7447c0 2.6458 2.1295 4.7753 4.4527 4.7108.6452 0 .8388-.5162 1.0324-.9034zM20.4152 6.9459v10.9058c0 2.3231-1.8714 4.1945-4.1945 4.1945H11.897s-.3872 1.0325.8389 1.0325h3.8719c2.6458 0 4.7753-2.1295 4.7753-4.7753V8.8173c.0646-.9034-.7098-1.4842-.9679-1.8714zm-18.5851.0646v10.8413c0 1.9359 1.6133 3.5492 3.5492 3.5492h.5808c0-.0645.7744-1.4197 2.4522-4.2591.1936-.3872.4517-.7744.7098-1.2261H4.4114c-.5808 0-.9034-.3872-.968-.7098-.1291-.5163.1936-1.1616.9034-1.1616h2.3877l3.033-5.2916s-.7098-1.2906-.9034-1.6133c-.2582-.4517-.1291-.9034.129-1.1615.3872-.3872 1.0325-.5808 1.6778.4517l.2581.3872.2581-.3872c.5808-.8389.968-.7744 1.2906-.7098.5163.1291.8389.7098.3872 1.6133L8.864 14.0444h1.3552c.4517-.7744.9034-1.5488 1.3552-2.3877-.0645-.3227-.1291-.7098-.0645-1.0325.0645-.5163.3227-.968.6453-1.3552l.3872.6453c1.2261-2.1295 2.1295-3.9364 2.3877-4.6463.1291-.3872.3227-1.1616.1291-1.8069H5.3794c-2.0005.0001-3.5493 1.6134-3.5493 3.5494zM4.605 17.7872c0-.0645.7744-1.4197.7744-1.4197 1.2261-.3227 1.8069.4517 1.8714.5163 0 0-.8389 1.4842-1.097 1.7423s-.5808.3227-.9034.2581c-.5164-.129-.839-.6453-.6454-1.097z" />
+    </svg>
+  );
+}
+
+/**
+ * Android Studio logo icon
+ */
+export function AndroidStudioIcon(props: IconProps) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M19.2693 10.3368c-.3321 0-.6026.2705-.6026.6031v9.8324h-1.7379l-3.3355-6.9396c.476-.5387.6797-1.286.5243-2.0009a2.2862 2.2862 0 0 0-1.2893-1.6248v-.8124c.0121-.2871-.1426-.5787-.4043-.7407-.1391-.0825-.2884-.1234-.4402-.1234a.8478.8478 0 0 0-.4318.1182c-.2701.1671-.4248.4587-.4123.7662l-.0003.721c-1.0149.3668-1.6619 1.4153-1.4867 2.5197a2.282 2.282 0 0 0 .5916 1.2103l-3.2096 6.9064H4.0928c-1.0949-.007-1.9797-.8948-1.9832-1.9896V5.016c-.0055 1.1024.8836 2.0006 1.9859 2.0062a2.024 2.024 0 0 0 .1326-.0037h14.7453s2.5343-.2189 2.8619 1.5392c-.2491.0287-.4449.2321-.4449.4889 0 .7115-.5791 1.2901-1.3028 1.2901h-.8183zM17.222 22.5366c.2347.4837.0329 1.066-.4507 1.3007-.1296.0629-.2666.0895-.4018.0927a.9738.9738 0 0 1-.3194-.0455c-.024-.0078-.046-.0209-.0694-.0305a.9701.9701 0 0 1-.2277-.1321c-.0247-.0192-.0495-.038-.0724-.0598-.0825-.0783-.1574-.1672-.21-.2757l-1.2554-2.6143-1.5585-3.2452a.7725.7725 0 0 0-.6995-.4443h-.0024a.792.792 0 0 0-.7083.4443l-1.5109 3.2452-1.2321 2.6464a.9722.9722 0 0 1-.7985.5795c-.0626.0053-.1238-.0024-.185-.0087-.0344-.0036-.069-.0053-.1025-.0124-.0489-.0103-.0954-.0278-.142-.0452-.0301-.0113-.0613-.0197-.0901-.0339-.0496-.0244-.0948-.0565-.1397-.0889-.0217-.0156-.0457-.0275-.0662-.045a.9862.9862 0 0 1-.1695-.1844.9788.9788 0 0 1-.0708-.9852l.8469-1.8223 3.2676-7.0314a1.7964 1.7964 0 0 1-.7072-1.1637c-.1555-.9799.5129-1.9003 1.4928-2.0559V9.3946a.3542.3542 0 0 1 .1674-.3155.3468.3468 0 0 1 .3541 0 .354.354 0 0 1 .1674.3155v1.159l.0129.0064a1.8028 1.8028 0 0 1 1.2878 1.378 1.7835 1.7835 0 0 1-.6439 1.7836l3.3889 7.0507.8481 1.7643zM12.9841 12.306c.0042-.6081-.4854-1.1044-1.0935-1.1085a1.1204 1.1204 0 0 0-.7856.3219 1.101 1.101 0 0 0-.323.7716c-.0042.6081.4854 1.1044 1.0935 1.1085h.0077c.6046 0 1.0967-.488 1.1009-1.0935zm-1.027 5.2768c-.1119.0005-.2121.0632-.2571.1553l-1.4127 3.0342h3.3733l-1.4564-3.0328a.274.274 0 0 0-.2471-.1567zm8.1432-6.7459l-.0129-.0001h-.8177a.103.103 0 0 0-.103.103v12.9103a.103.103 0 0 0 .0966.103h.8435c.9861-.0035 1.7836-.804 1.7836-1.79V9.0468c0 .9887-.8014 1.7901-1.7901 1.7901zM2.6098 5.0161v.019c.0039.816.6719 1.483 1.4874 1.4869a12.061 12.061 0 0 1 .1309-.0034h1.1286c.1972-1.315.7607-2.525 1.638-3.4859H4.0993c-.9266.0031-1.6971.6401-1.9191 1.4975.2417.0355.4296.235.4296.4859zm6.3381-2.8977L7.9112.3284a.219.219 0 0 1 0-.2189A.2384.2384 0 0 1 8.098 0a.219.219 0 0 1 .1867.1094l1.0496 1.8158a6.4907 6.4907 0 0 1 5.3186 0L15.696.1094a.2189.2189 0 0 1 .3734.2189l-1.0302 1.79c1.6671.9125 2.7974 2.5439 3.0975 4.4018l-12.286-.0014c.3004-1.8572 1.4305-3.488 3.0972-4.4003zm5.3774 2.6202a.515.515 0 0 0 .5271.5028.515.515 0 0 0 .5151-.5151.5213.5213 0 0 0-.8885-.367.5151.5151 0 0 0-.1537.3793zm-5.7178-.0067a.5151.5151 0 0 0 .5207.5095.5086.5086 0 0 0 .367-.1481.5215.5215 0 1 0-.734-.7341.515.515 0 0 0-.1537.3727z" />
+    </svg>
+  );
+}
+
+/**
+ * Google Antigravity IDE logo icon - stylized "A" arch shape
+ */
+export function AntigravityIcon(props: IconProps) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12 1C11 1 9.5 3 8 7c-1.5 4-3 8.5-4 11.5-.5 1.5-.3 2.8.5 3.3.8.5 2 .2 3-.8.8-.8 1.3-2 1.8-3.2.3-.8.8-1.3 1.5-1.3h2.4c.7 0 1.2.5 1.5 1.3.5 1.2 1 2.4 1.8 3.2 1 1 2.2 1.3 3 .8.8-.5 1-1.8.5-3.3-1-3-2.5-7.5-4-11.5C14.5 3 13 1 12 1zm0 5c.8 2 2 5.5 3 8.5H9c1-3 2.2-6.5 3-8.5z"
+      />
+    </svg>
+  );
+}
+
+/**
+ * Get the appropriate icon component for an editor command
+ */
+export function getEditorIcon(command: string): IconComponent {
+  // Handle direct CLI commands
+  const cliIcons: Record<string, IconComponent> = {
+    cursor: CursorIcon,
+    code: VSCodeIcon,
+    'code-insiders': VSCodeInsidersIcon,
+    kido: KiroIcon,
+    zed: ZedIcon,
+    subl: SublimeTextIcon,
+    windsurf: WindsurfIcon,
+    trae: TraeIcon,
+    rider: RiderIcon,
+    webstorm: WebStormIcon,
+    xed: XcodeIcon,
+    studio: AndroidStudioIcon,
+    [PRIMARY_ANTIGRAVITY_COMMAND]: AntigravityIcon,
+    [LEGACY_ANTIGRAVITY_COMMAND]: AntigravityIcon,
+    open: FinderIcon,
+    explorer: FolderOpen,
+    'xdg-open': FolderOpen,
+  };
+
+  // Check direct match first
+  if (cliIcons[command]) {
+    return cliIcons[command];
+  }
+
+  // Handle 'open' commands (macOS) - both 'open -a AppName' and 'open "/path/to/App.app"'
+  if (command.startsWith('open')) {
+    const cmdLower = command.toLowerCase();
+    if (cmdLower.includes('cursor')) return CursorIcon;
+    if (cmdLower.includes('visual studio code - insiders')) return VSCodeInsidersIcon;
+    if (cmdLower.includes('visual studio code')) return VSCodeIcon;
+    if (cmdLower.includes('kiro')) return KiroIcon;
+    if (cmdLower.includes('zed')) return ZedIcon;
+    if (cmdLower.includes('sublime')) return SublimeTextIcon;
+    if (cmdLower.includes('windsurf')) return WindsurfIcon;
+    if (cmdLower.includes('trae')) return TraeIcon;
+    if (cmdLower.includes('rider')) return RiderIcon;
+    if (cmdLower.includes('webstorm')) return WebStormIcon;
+    if (cmdLower.includes('xcode')) return XcodeIcon;
+    if (cmdLower.includes('android studio')) return AndroidStudioIcon;
+    if (cmdLower.includes('antigravity')) return AntigravityIcon;
+    // If just 'open' without app name, it's Finder
+    if (command === 'open') return FinderIcon;
+  }
+
+  return FolderOpen;
+}

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
@@ -255,121 +257,122 @@ export function Sidebar() {
   };
 
   return (
-    <aside
-      className={cn(
-        'flex-shrink-0 flex flex-col z-30 relative',
-        // Glass morphism background with gradient
-        'bg-gradient-to-b from-sidebar/95 via-sidebar/85 to-sidebar/90 backdrop-blur-2xl',
-        // Premium border with subtle glow
-        'border-r border-border/60 shadow-[1px_0_20px_-5px_rgba(0,0,0,0.1)]',
-        // Smooth width transition
-        'transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]',
-        sidebarOpen ? 'w-16 lg:w-72' : 'w-16'
+    <>
+      {/* Mobile overlay backdrop */}
+      {sidebarOpen && (
+        <div
+          className="fixed inset-0 bg-black/50 z-40 lg:hidden"
+          onClick={toggleSidebar}
+          aria-hidden="true"
+        />
       )}
-      data-testid="sidebar"
-    >
-      <CollapseToggleButton
-        sidebarOpen={sidebarOpen}
-        toggleSidebar={toggleSidebar}
-        shortcut={shortcuts.toggleSidebar}
-      />
-
-      <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 }}
-          />
+      <aside
+        className={cn(
+          'flex-shrink-0 flex flex-col z-50 relative',
+          // Glass morphism background with gradient
+          'bg-gradient-to-b from-sidebar/95 via-sidebar/85 to-sidebar/90 backdrop-blur-2xl',
+          // Premium border with subtle glow
+          'border-r border-border/60 shadow-[1px_0_20px_-5px_rgba(0,0,0,0.1)]',
+          // Smooth width transition
+          'transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]',
+          // Mobile: hidden when closed, full width overlay when open
+          // Desktop: always visible, toggle between narrow and wide
+          sidebarOpen ? 'fixed lg:relative left-0 top-0 h-full w-72' : 'hidden lg:flex w-16'
         )}
-
-        <ProjectSelectorWithOptions
+        data-testid="sidebar"
+      >
+        <CollapseToggleButton
           sidebarOpen={sidebarOpen}
-          isProjectPickerOpen={isProjectPickerOpen}
-          setIsProjectPickerOpen={setIsProjectPickerOpen}
-          setShowDeleteProjectDialog={setShowDeleteProjectDialog}
+          toggleSidebar={toggleSidebar}
+          shortcut={shortcuts.toggleSidebar}
         />
 
-        <SidebarNavigation
-          currentProject={currentProject}
+        <div className="flex-1 flex flex-col overflow-hidden">
+          <SidebarHeader sidebarOpen={sidebarOpen} navigate={navigate} />
+
+          <ProjectSelectorWithOptions
+            sidebarOpen={sidebarOpen}
+            isProjectPickerOpen={isProjectPickerOpen}
+            setIsProjectPickerOpen={setIsProjectPickerOpen}
+            setShowDeleteProjectDialog={setShowDeleteProjectDialog}
+          />
+
+          <SidebarNavigation
+            currentProject={currentProject}
+            sidebarOpen={sidebarOpen}
+            navSections={navSections}
+            isActiveRoute={isActiveRoute}
+            navigate={navigate}
+          />
+        </div>
+
+        <SidebarFooter
           sidebarOpen={sidebarOpen}
-          navSections={navSections}
           isActiveRoute={isActiveRoute}
           navigate={navigate}
+          hideWiki={hideWiki}
+          hideRunningAgents={hideRunningAgents}
+          runningAgentsCount={runningAgentsCount}
+          shortcuts={{ settings: shortcuts.settings }}
+        />
+        <TrashDialog
+          open={showTrashDialog}
+          onOpenChange={setShowTrashDialog}
+          trashedProjects={trashedProjects}
+          activeTrashId={activeTrashId}
+          handleRestoreProject={handleRestoreProject}
+          handleDeleteProjectFromDisk={handleDeleteProjectFromDisk}
+          deleteTrashedProject={deleteTrashedProject}
+          handleEmptyTrash={handleEmptyTrash}
+          isEmptyingTrash={isEmptyingTrash}
         />
-      </div>
 
-      <SidebarFooter
-        sidebarOpen={sidebarOpen}
-        isActiveRoute={isActiveRoute}
-        navigate={navigate}
-        hideWiki={hideWiki}
-        hideRunningAgents={hideRunningAgents}
-        runningAgentsCount={runningAgentsCount}
-        shortcuts={{ settings: shortcuts.settings }}
-      />
-      <TrashDialog
-        open={showTrashDialog}
-        onOpenChange={setShowTrashDialog}
-        trashedProjects={trashedProjects}
-        activeTrashId={activeTrashId}
-        handleRestoreProject={handleRestoreProject}
-        handleDeleteProjectFromDisk={handleDeleteProjectFromDisk}
-        deleteTrashedProject={deleteTrashedProject}
-        handleEmptyTrash={handleEmptyTrash}
-        isEmptyingTrash={isEmptyingTrash}
-      />
+        {/* New Project Setup Dialog */}
+        <CreateSpecDialog
+          open={showSetupDialog}
+          onOpenChange={setShowSetupDialog}
+          projectOverview={projectOverview}
+          onProjectOverviewChange={setProjectOverview}
+          generateFeatures={generateFeatures}
+          onGenerateFeaturesChange={setGenerateFeatures}
+          analyzeProject={analyzeProject}
+          onAnalyzeProjectChange={setAnalyzeProject}
+          featureCount={featureCount}
+          onFeatureCountChange={setFeatureCount}
+          onCreateSpec={handleCreateInitialSpec}
+          onSkip={handleSkipSetup}
+          isCreatingSpec={isCreatingSpec}
+          showSkipButton={true}
+          title="Set Up Your Project"
+          description="We didn't find an app_spec.txt file. Let us help you generate your app_spec.txt to help describe your project for our system. We'll analyze your project's tech stack and create a comprehensive specification."
+        />
 
-      {/* New Project Setup Dialog */}
-      <CreateSpecDialog
-        open={showSetupDialog}
-        onOpenChange={setShowSetupDialog}
-        projectOverview={projectOverview}
-        onProjectOverviewChange={setProjectOverview}
-        generateFeatures={generateFeatures}
-        onGenerateFeaturesChange={setGenerateFeatures}
-        analyzeProject={analyzeProject}
-        onAnalyzeProjectChange={setAnalyzeProject}
-        featureCount={featureCount}
-        onFeatureCountChange={setFeatureCount}
-        onCreateSpec={handleCreateInitialSpec}
-        onSkip={handleSkipSetup}
-        isCreatingSpec={isCreatingSpec}
-        showSkipButton={true}
-        title="Set Up Your Project"
-        description="We didn't find an app_spec.txt file. Let us help you generate your app_spec.txt to help describe your project for our system. We'll analyze your project's tech stack and create a comprehensive specification."
-      />
+        <OnboardingDialog
+          open={showOnboardingDialog}
+          onOpenChange={setShowOnboardingDialog}
+          newProjectName={newProjectName}
+          onSkip={handleOnboardingSkip}
+          onGenerateSpec={handleOnboardingGenerateSpec}
+        />
 
-      <OnboardingDialog
-        open={showOnboardingDialog}
-        onOpenChange={setShowOnboardingDialog}
-        newProjectName={newProjectName}
-        onSkip={handleOnboardingSkip}
-        onGenerateSpec={handleOnboardingGenerateSpec}
-      />
+        {/* Delete Project Confirmation Dialog */}
+        <DeleteProjectDialog
+          open={showDeleteProjectDialog}
+          onOpenChange={setShowDeleteProjectDialog}
+          project={currentProject}
+          onConfirm={moveProjectToTrash}
+        />
 
-      {/* Delete Project Confirmation Dialog */}
-      <DeleteProjectDialog
-        open={showDeleteProjectDialog}
-        onOpenChange={setShowDeleteProjectDialog}
-        project={currentProject}
-        onConfirm={moveProjectToTrash}
-      />
-
-      {/* New Project Modal */}
-      <NewProjectModal
-        open={showNewProjectModal}
-        onOpenChange={setShowNewProjectModal}
-        onCreateBlankProject={handleCreateBlankProject}
-        onCreateFromTemplate={handleCreateFromTemplate}
-        onCreateFromCustomUrl={handleCreateFromCustomUrl}
-        isCreating={isCreatingProject}
-      />
-    </aside>
+        {/* New Project Modal */}
+        <NewProjectModal
+          open={showNewProjectModal}
+          onOpenChange={setShowNewProjectModal}
+          onCreateBlankProject={handleCreateBlankProject}
+          onCreateFromTemplate={handleCreateFromTemplate}
+          onCreateFromCustomUrl={handleCreateFromCustomUrl}
+          isCreating={isCreatingProject}
+        />
+      </aside>
+    </>
   );
 }

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

@@ -32,14 +32,14 @@ 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 */}
+      {/* Collapsed logo - only shown when sidebar is closed */}
       <div
         className={cn(
           'relative flex flex-col items-center justify-center rounded-lg gap-0.5',
-          sidebarOpen ? 'flex lg:hidden' : 'flex'
+          sidebarOpen ? 'hidden' : 'flex'
         )}
       >
         <svg
@@ -90,16 +90,16 @@ export function AutomakerLogo({ sidebarOpen, navigate }: AutomakerLogoProps) {
         </span>
       </div>
 
-      {/* Expanded logo - only shown when sidebar is open on large screens */}
+      {/* Expanded logo - shown when sidebar is open */}
       {sidebarOpen && (
-        <div className="hidden lg:flex flex-col">
+        <div className="flex flex-col">
           <div className="flex items-center gap-1">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 256 256"
               role="img"
               aria-label="automaker"
-              className="h-[36.8px] w-[36.8px] group-hover:rotate-12 transition-transform duration-300 ease-out"
+              className="h-8 w-8 lg:h-[36.8px] lg:w-[36.8px] shrink-0 group-hover:rotate-12 transition-transform duration-300 ease-out"
             >
               <defs>
                 <linearGradient
@@ -137,11 +137,11 @@ export function AutomakerLogo({ sidebarOpen, navigate }: AutomakerLogoProps) {
                 <path d="M164 92 L204 128 L164 164" />
               </g>
             </svg>
-            <span className="font-bold text-foreground text-[1.7rem] tracking-tight leading-none translate-y-[-2px]">
+            <span className="font-bold text-foreground text-xl lg:text-[1.7rem] tracking-tight leading-none translate-y-[-2px]">
               automaker<span className="text-brand-500">.</span>
             </span>
           </div>
-          <span className="text-[0.625rem] text-muted-foreground leading-none font-medium ml-[38.8px]">
+          <span className="text-[0.625rem] text-muted-foreground leading-none font-medium ml-9 lg:ml-[38.8px]">
             v{appVersion} {versionSuffix}
           </span>
         </div>

apps/ui/src/components/layout/sidebar/components/collapse-toggle-button.tsx

@@ -17,7 +17,9 @@ export function CollapseToggleButton({
     <button
       onClick={toggleSidebar}
       className={cn(
-        'hidden lg:flex absolute top-[68px] -right-3 z-9999',
+        // Show on desktop always, show on mobile only when sidebar is open
+        sidebarOpen ? 'flex' : 'hidden lg:flex',
+        'absolute top-[68px] -right-3 z-9999',
         'group/toggle items-center justify-center w-7 h-7 rounded-full',
         // Glass morphism button
         'bg-card/95 backdrop-blur-sm border border-border/80',

apps/ui/src/components/layout/sidebar/components/project-selector-with-options.tsx

@@ -117,7 +117,7 @@ export function ProjectSelectorWithOptions({
             </div>
             <div className="flex items-center gap-1.5">
               <span
-                className="hidden lg:flex items-center justify-center min-w-5 h-5 px-1.5 text-[10px] font-mono rounded-md bg-muted text-muted-foreground"
+                className="hidden sm:flex items-center justify-center min-w-5 h-5 px-1.5 text-[10px] font-mono rounded-md bg-muted text-muted-foreground"
                 data-testid="project-picker-shortcut"
               >
                 {formatShortcut(shortcuts.projectPicker, true)}
@@ -219,7 +219,7 @@ export function ProjectSelectorWithOptions({
           <DropdownMenuTrigger asChild>
             <button
               className={cn(
-                'hidden lg:flex items-center justify-center w-[42px] h-[42px] rounded-lg',
+                'flex items-center justify-center w-[42px] h-[42px] rounded-lg',
                 'text-muted-foreground hover:text-foreground',
                 'bg-transparent hover:bg-accent/60',
                 'border border-border/50 hover:border-border',

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

@@ -72,7 +72,7 @@ export function SidebarFooter({
             <span
               className={cn(
                 'ml-3 font-medium text-sm flex-1 text-left',
-                sidebarOpen ? 'hidden lg:block' : 'hidden'
+                sidebarOpen ? 'block' : 'hidden'
               )}
             >
               Wiki
@@ -148,7 +148,7 @@ export function SidebarFooter({
             <span
               className={cn(
                 'ml-3 font-medium text-sm flex-1 text-left',
-                sidebarOpen ? 'hidden lg:block' : 'hidden'
+                sidebarOpen ? 'block' : 'hidden'
               )}
             >
               Running Agents
@@ -157,7 +157,7 @@ export function SidebarFooter({
             {sidebarOpen && runningAgentsCount > 0 && (
               <span
                 className={cn(
-                  'hidden lg:flex items-center justify-center',
+                  'flex items-center justify-center',
                   'min-w-6 h-6 px-1.5 text-xs font-semibold rounded-full',
                   'bg-brand-500 text-white shadow-sm',
                   'animate-in fade-in zoom-in duration-200',
@@ -227,7 +227,7 @@ export function SidebarFooter({
           <span
             className={cn(
               'ml-3 font-medium text-sm flex-1 text-left',
-              sidebarOpen ? 'hidden lg:block' : 'hidden'
+              sidebarOpen ? 'block' : 'hidden'
             )}
           >
             Settings
@@ -235,7 +235,7 @@ export function SidebarFooter({
           {sidebarOpen && (
             <span
               className={cn(
-                'hidden lg:flex items-center justify-center min-w-5 h-5 px-1.5 text-[10px] font-mono rounded-md transition-all duration-200',
+                'hidden sm:flex items-center justify-center min-w-5 h-5 px-1.5 text-[10px] font-mono rounded-md transition-all duration-200',
                 isActiveRoute('settings')
                   ? 'bg-brand-500/20 text-brand-400'
                   : 'bg-muted text-muted-foreground group-hover:bg-accent'

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

@@ -20,9 +20,9 @@ export function SidebarHeader({ sidebarOpen, navigate }: SidebarHeaderProps) {
           // Background gradient for depth
           'bg-gradient-to-b from-transparent to-background/5',
           'flex items-center',
-          sidebarOpen ? 'px-3 lg:px-5 justify-start' : 'px-3 justify-center',
-          // Add left padding on macOS to avoid overlapping with traffic light buttons (only when expanded)
-          isMac && sidebarOpen && 'pt-4 pl-20',
+          sidebarOpen ? 'px-4 lg:px-5 justify-start' : 'px-3 justify-center',
+          // Add padding on macOS to avoid overlapping with traffic light buttons
+          isMac && sidebarOpen && 'pt-4',
           // Smaller top padding on macOS when collapsed
           isMac && !sidebarOpen && 'pt-4'
         )}

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';
@@ -34,7 +35,7 @@ export function SidebarNavigation({
           <div key={sectionIdx} className={sectionIdx > 0 && sidebarOpen ? 'mt-6' : ''}>
             {/* Section Label */}
             {section.label && sidebarOpen && (
-              <div className="hidden lg:block px-3 mb-2">
+              <div className="px-3 mb-2">
                 <span className="text-[10px] font-semibold text-muted-foreground/70 uppercase tracking-widest">
                   {section.label}
                 </span>
@@ -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
@@ -105,7 +115,7 @@ export function SidebarNavigation({
                     <span
                       className={cn(
                         'ml-3 font-medium text-sm flex-1 text-left',
-                        sidebarOpen ? 'hidden lg:block' : 'hidden'
+                        sidebarOpen ? 'block' : 'hidden'
                       )}
                     >
                       {item.label}
@@ -114,7 +124,7 @@ export function SidebarNavigation({
                     {item.count !== undefined && item.count > 0 && sidebarOpen && (
                       <span
                         className={cn(
-                          'hidden lg:flex items-center justify-center',
+                          'flex items-center justify-center',
                           'min-w-5 h-5 px-1.5 text-[10px] font-bold rounded-full',
                           'bg-primary text-primary-foreground shadow-sm',
                           'animate-in fade-in zoom-in duration-200'
@@ -127,7 +137,7 @@ export function SidebarNavigation({
                     {item.shortcut && sidebarOpen && !item.count && (
                       <span
                         className={cn(
-                          'hidden lg:flex items-center justify-center min-w-5 h-5 px-1.5 text-[10px] font-mono rounded-md transition-all duration-200',
+                          'hidden sm:flex items-center justify-center min-w-5 h-5 px-1.5 text-[10px] font-mono rounded-md transition-all duration-200',
                           isActive
                             ? 'bg-brand-500/20 text-brand-400'
                             : 'bg-muted text-muted-foreground group-hover:bg-accent'

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,13 +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';
@@ -28,8 +27,8 @@ interface UseNavigationProps {
     spec: string;
     context: string;
     memory: string;
-    profiles: string;
     board: string;
+    graph: string;
     agent: string;
     terminal: string;
     settings: string;
@@ -40,7 +39,6 @@ interface UseNavigationProps {
   hideSpecEditor: boolean;
   hideContext: boolean;
   hideTerminal: boolean;
-  hideAiProfiles: boolean;
   currentProject: Project | null;
   projects: Project[];
   projectHistory: string[];
@@ -52,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({
@@ -59,7 +59,6 @@ export function useNavigation({
   hideSpecEditor,
   hideContext,
   hideTerminal,
-  hideAiProfiles,
   currentProject,
   projects,
   projectHistory,
@@ -70,6 +69,7 @@ export function useNavigation({
   cyclePrevProject,
   cycleNextProject,
   unviewedValidationsCount,
+  isSpecGenerating,
 }: UseNavigationProps) {
   // Track if current project has a GitHub remote
   const [hasGitHubRemote, setHasGitHubRemote] = useState(false);
@@ -109,6 +109,7 @@ export function useNavigation({
         label: 'Spec Editor',
         icon: FileText,
         shortcut: shortcuts.spec,
+        isLoading: isSpecGenerating,
       },
       {
         id: 'context',
@@ -122,12 +123,6 @@ export function useNavigation({
         icon: Brain,
         shortcut: shortcuts.memory,
       },
-      {
-        id: 'profiles',
-        label: 'AI Profiles',
-        icon: UserCircle,
-        shortcut: shortcuts.profiles,
-      },
     ];
 
     // Filter out hidden items
@@ -138,9 +133,6 @@ export function useNavigation({
       if (item.id === 'context' && hideContext) {
         return false;
       }
-      if (item.id === 'profiles' && hideAiProfiles) {
-        return false;
-      }
       return true;
     });
 
@@ -152,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',
@@ -209,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/ui/ansi-output.tsx

@@ -0,0 +1,276 @@
+import { useMemo } from 'react';
+import { cn } from '@/lib/utils';
+
+interface AnsiOutputProps {
+  text: string;
+  className?: string;
+}
+
+// ANSI color codes to CSS color mappings
+const ANSI_COLORS: Record<number, string> = {
+  // Standard colors
+  30: '#6b7280', // Black (use gray for visibility on dark bg)
+  31: '#ef4444', // Red
+  32: '#22c55e', // Green
+  33: '#eab308', // Yellow
+  34: '#3b82f6', // Blue
+  35: '#a855f7', // Magenta
+  36: '#06b6d4', // Cyan
+  37: '#d1d5db', // White
+  // Bright colors
+  90: '#9ca3af', // Bright Black (Gray)
+  91: '#f87171', // Bright Red
+  92: '#4ade80', // Bright Green
+  93: '#facc15', // Bright Yellow
+  94: '#60a5fa', // Bright Blue
+  95: '#c084fc', // Bright Magenta
+  96: '#22d3ee', // Bright Cyan
+  97: '#ffffff', // Bright White
+};
+
+const ANSI_BG_COLORS: Record<number, string> = {
+  40: 'transparent',
+  41: '#ef4444',
+  42: '#22c55e',
+  43: '#eab308',
+  44: '#3b82f6',
+  45: '#a855f7',
+  46: '#06b6d4',
+  47: '#f3f4f6',
+  // Bright backgrounds
+  100: '#374151',
+  101: '#f87171',
+  102: '#4ade80',
+  103: '#facc15',
+  104: '#60a5fa',
+  105: '#c084fc',
+  106: '#22d3ee',
+  107: '#ffffff',
+};
+
+interface TextSegment {
+  text: string;
+  style: {
+    color?: string;
+    backgroundColor?: string;
+    fontWeight?: string;
+    fontStyle?: string;
+    textDecoration?: string;
+  };
+}
+
+/**
+ * Strip hyperlink escape sequences (OSC 8)
+ * Format: ESC]8;;url ESC\ text ESC]8;; ESC\
+ */
+function stripHyperlinks(text: string): string {
+  // Remove OSC 8 hyperlink sequences
+  // eslint-disable-next-line no-control-regex
+  return text.replace(/\x1b\]8;;[^\x07\x1b]*(?:\x07|\x1b\\)/g, '');
+}
+
+/**
+ * Strip other OSC sequences (title, etc.)
+ */
+function stripOtherOSC(text: string): string {
+  // Remove OSC sequences (ESC ] ... BEL or ESC ] ... ST)
+  // eslint-disable-next-line no-control-regex
+  return text.replace(/\x1b\][^\x07\x1b]*(?:\x07|\x1b\\)/g, '');
+}
+
+function parseAnsi(text: string): TextSegment[] {
+  // Pre-process: strip hyperlinks and other OSC sequences
+  let processedText = stripHyperlinks(text);
+  processedText = stripOtherOSC(processedText);
+
+  const segments: TextSegment[] = [];
+
+  // Match ANSI escape sequences: ESC[...m (SGR - Select Graphic Rendition)
+  // Also handle ESC[K (erase line) and other CSI sequences by stripping them
+  // The ESC character can be \x1b, \033, \u001b
+  // eslint-disable-next-line no-control-regex
+  const ansiRegex = /\x1b\[([0-9;]*)([a-zA-Z])/g;
+
+  let currentStyle: TextSegment['style'] = {};
+  let lastIndex = 0;
+  let match;
+
+  while ((match = ansiRegex.exec(processedText)) !== null) {
+    // Add text before this escape sequence
+    if (match.index > lastIndex) {
+      const content = processedText.slice(lastIndex, match.index);
+      if (content) {
+        segments.push({ text: content, style: { ...currentStyle } });
+      }
+    }
+
+    const params = match[1];
+    const command = match[2];
+
+    // Only process 'm' command (SGR - graphics/color)
+    // Ignore other commands like K (erase), H (cursor), J (clear), etc.
+    if (command === 'm') {
+      // Parse the escape sequence codes
+      const codes = params ? params.split(';').map((c) => parseInt(c, 10) || 0) : [0];
+
+      for (let i = 0; i < codes.length; i++) {
+        const code = codes[i];
+
+        if (code === 0) {
+          // Reset all attributes
+          currentStyle = {};
+        } else if (code === 1) {
+          // Bold
+          currentStyle.fontWeight = 'bold';
+        } else if (code === 2) {
+          // Dim/faint
+          currentStyle.color = 'var(--muted-foreground)';
+        } else if (code === 3) {
+          // Italic
+          currentStyle.fontStyle = 'italic';
+        } else if (code === 4) {
+          // Underline
+          currentStyle.textDecoration = 'underline';
+        } else if (code === 22) {
+          // Normal intensity (not bold, not dim)
+          currentStyle.fontWeight = undefined;
+        } else if (code === 23) {
+          // Not italic
+          currentStyle.fontStyle = undefined;
+        } else if (code === 24) {
+          // Not underlined
+          currentStyle.textDecoration = undefined;
+        } else if (code === 38) {
+          // Extended foreground color
+          if (codes[i + 1] === 5 && codes[i + 2] !== undefined) {
+            // 256 color mode: 38;5;n
+            const colorIndex = codes[i + 2];
+            currentStyle.color = get256Color(colorIndex);
+            i += 2;
+          } else if (codes[i + 1] === 2 && codes[i + 4] !== undefined) {
+            // RGB mode: 38;2;r;g;b
+            const r = codes[i + 2];
+            const g = codes[i + 3];
+            const b = codes[i + 4];
+            currentStyle.color = `rgb(${r}, ${g}, ${b})`;
+            i += 4;
+          }
+        } else if (code === 48) {
+          // Extended background color
+          if (codes[i + 1] === 5 && codes[i + 2] !== undefined) {
+            // 256 color mode: 48;5;n
+            const colorIndex = codes[i + 2];
+            currentStyle.backgroundColor = get256Color(colorIndex);
+            i += 2;
+          } else if (codes[i + 1] === 2 && codes[i + 4] !== undefined) {
+            // RGB mode: 48;2;r;g;b
+            const r = codes[i + 2];
+            const g = codes[i + 3];
+            const b = codes[i + 4];
+            currentStyle.backgroundColor = `rgb(${r}, ${g}, ${b})`;
+            i += 4;
+          }
+        } else if (ANSI_COLORS[code]) {
+          // Standard foreground color (30-37, 90-97)
+          currentStyle.color = ANSI_COLORS[code];
+        } else if (ANSI_BG_COLORS[code]) {
+          // Standard background color (40-47, 100-107)
+          currentStyle.backgroundColor = ANSI_BG_COLORS[code];
+        } else if (code === 39) {
+          // Default foreground
+          currentStyle.color = undefined;
+        } else if (code === 49) {
+          // Default background
+          currentStyle.backgroundColor = undefined;
+        }
+      }
+    }
+
+    lastIndex = match.index + match[0].length;
+  }
+
+  // Add remaining text after last escape sequence
+  if (lastIndex < processedText.length) {
+    const content = processedText.slice(lastIndex);
+    if (content) {
+      segments.push({ text: content, style: { ...currentStyle } });
+    }
+  }
+
+  // If no segments were created (no ANSI codes), return the whole text
+  if (segments.length === 0 && processedText) {
+    segments.push({ text: processedText, style: {} });
+  }
+
+  return segments;
+}
+
+/**
+ * Convert 256-color palette index to CSS color
+ */
+function get256Color(index: number): string {
+  // 0-15: Standard colors
+  if (index < 16) {
+    const standardColors = [
+      '#000000',
+      '#cd0000',
+      '#00cd00',
+      '#cdcd00',
+      '#0000ee',
+      '#cd00cd',
+      '#00cdcd',
+      '#e5e5e5',
+      '#7f7f7f',
+      '#ff0000',
+      '#00ff00',
+      '#ffff00',
+      '#5c5cff',
+      '#ff00ff',
+      '#00ffff',
+      '#ffffff',
+    ];
+    return standardColors[index];
+  }
+
+  // 16-231: 6x6x6 color cube
+  if (index < 232) {
+    const n = index - 16;
+    const b = n % 6;
+    const g = Math.floor(n / 6) % 6;
+    const r = Math.floor(n / 36);
+    const toHex = (v: number) => (v === 0 ? 0 : 55 + v * 40);
+    return `rgb(${toHex(r)}, ${toHex(g)}, ${toHex(b)})`;
+  }
+
+  // 232-255: Grayscale
+  const gray = 8 + (index - 232) * 10;
+  return `rgb(${gray}, ${gray}, ${gray})`;
+}
+
+export function AnsiOutput({ text, className }: AnsiOutputProps) {
+  const segments = useMemo(() => parseAnsi(text), [text]);
+
+  return (
+    <pre
+      className={cn(
+        'font-mono text-xs whitespace-pre-wrap break-words text-muted-foreground',
+        className
+      )}
+    >
+      {segments.map((segment, index) => (
+        <span
+          key={index}
+          style={{
+            color: segment.style.color,
+            backgroundColor: segment.style.backgroundColor,
+            fontWeight: segment.style.fontWeight,
+            fontStyle: segment.style.fontStyle,
+            textDecoration: segment.style.textDecoration,
+          }}
+        >
+          {segment.text}
+        </span>
+      ))}
+    </pre>
+  );
+}

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

@@ -84,12 +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',
@@ -103,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',
@@ -113,12 +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',
@@ -132,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';
@@ -7,9 +6,19 @@ import { getProviderFromModel } from '@/lib/utils';
 const PROVIDER_ICON_KEYS = {
   anthropic: 'anthropic',
   openai: 'openai',
+  openrouter: 'openrouter',
   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 +26,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 +35,24 @@ 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',
+  },
+  openrouter: {
+    viewBox: '0 0 24 24',
+    // OpenRouter logo from Simple Icons
+    path: 'M16.778 1.844v1.919q-.569-.026-1.138-.032-.708-.008-1.415.037c-1.93.126-4.023.728-6.149 2.237-2.911 2.066-2.731 1.95-4.14 2.75-.396.223-1.342.574-2.185.798-.841.225-1.753.333-1.751.333v4.229s.768.108 1.61.333c.842.224 1.789.575 2.185.799 1.41.798 1.228.683 4.14 2.75 2.126 1.509 4.22 2.11 6.148 2.236.88.058 1.716.041 2.555.005v1.918l7.222-4.168-7.222-4.17v2.176c-.86.038-1.611.065-2.278.021-1.364-.09-2.417-.357-3.979-1.465-2.244-1.593-2.866-2.027-3.68-2.508.889-.518 1.449-.906 3.822-2.59 1.56-1.109 2.614-1.377 3.978-1.466.667-.044 1.418-.017 2.278.02v2.176L24 6.014Z',
+    fill: '#94A3B8',
   },
   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 +64,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 +141,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>
   );
 }
@@ -85,6 +158,10 @@ export function OpenAIIcon(props: Omit<ProviderIconProps, 'provider'>) {
   return <ProviderIcon provider={PROVIDER_ICON_KEYS.openai} {...props} />;
 }
 
+export function OpenRouterIcon(props: Omit<ProviderIconProps, 'provider'>) {
+  return <ProviderIcon provider={PROVIDER_ICON_KEYS.openrouter} {...props} />;
+}
+
 export function CursorIcon(props: Omit<ProviderIconProps, 'provider'>) {
   return <ProviderIcon provider={PROVIDER_ICON_KEYS.cursor} {...props} />;
 }
@@ -97,8 +174,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 +392,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 +406,123 @@ 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('openrouter/')) {
+    return 'openrouter';
+  }
+
+  // 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 dynamic OpenCode provider models (provider/model format)
+  // e.g., zai-coding-plan/glm-4.5, github-copilot/gpt-4o, google/gemini-2.5-pro
+  // Only handle strings with exactly one slash (not URLs or paths)
+  if (!modelStr.includes('://')) {
+    const slashIndex = modelStr.indexOf('/');
+    if (slashIndex !== -1 && slashIndex === modelStr.lastIndexOf('/')) {
+      const providerName = modelStr.slice(0, slashIndex);
+      const modelName = modelStr.slice(slashIndex + 1);
+
+      // Skip if either part is empty
+      if (providerName && modelName) {
+        // Check model name for known patterns
+        if (modelName.includes('glm')) {
+          return 'glm';
+        }
+        if (
+          modelName.includes('claude') ||
+          modelName.includes('sonnet') ||
+          modelName.includes('opus')
+        ) {
+          return 'anthropic';
+        }
+        if (modelName.includes('gpt') || modelName.includes('o1') || modelName.includes('o3')) {
+          return 'openai';
+        }
+        if (modelName.includes('gemini')) {
+          return 'gemini';
+        }
+        if (modelName.includes('grok')) {
+          return 'grok';
+        }
+        if (modelName.includes('deepseek')) {
+          return 'deepseek';
+        }
+        if (modelName.includes('llama')) {
+          return 'meta';
+        }
+        if (modelName.includes('qwen')) {
+          return 'qwen';
+        }
+        if (modelName.includes('mistral')) {
+          return 'mistral';
+        }
+        // Check provider name for hints
+        if (providerName.includes('google')) {
+          return 'gemini';
+        }
+        if (providerName.includes('anthropic')) {
+          return 'anthropic';
+        }
+        if (providerName.includes('openai')) {
+          return 'openai';
+        }
+        if (providerName.includes('openrouter')) {
+          return 'openrouter';
+        }
+        if (providerName.includes('xai')) {
+          return 'grok';
+        }
+        // Default for unknown dynamic 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 +544,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';
 }
 
@@ -152,9 +556,19 @@ export function getProviderIconForModel(
   const iconMap: Record<ProviderIconKey, ComponentType<{ className?: string }>> = {
     anthropic: AnthropicIcon,
     openai: OpenAIIcon,
+    openrouter: OpenRouterIcon,
     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/ui/shell-syntax-editor.tsx

@@ -0,0 +1,142 @@
+import CodeMirror from '@uiw/react-codemirror';
+import { StreamLanguage } from '@codemirror/language';
+import { shell } from '@codemirror/legacy-modes/mode/shell';
+import { EditorView } from '@codemirror/view';
+import { Extension } from '@codemirror/state';
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { tags as t } from '@lezer/highlight';
+import { cn } from '@/lib/utils';
+
+interface ShellSyntaxEditorProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  className?: string;
+  minHeight?: string;
+  maxHeight?: string;
+  'data-testid'?: string;
+}
+
+// Syntax highlighting using CSS variables for theme compatibility
+const syntaxColors = HighlightStyle.define([
+  // Keywords (if, then, else, fi, for, while, do, done, case, esac, etc.)
+  { tag: t.keyword, color: 'var(--chart-4, oklch(0.7 0.15 280))' },
+
+  // Strings (single and double quoted)
+  { tag: t.string, color: 'var(--chart-1, oklch(0.646 0.222 41.116))' },
+
+  // Comments
+  { tag: t.comment, color: 'var(--muted-foreground)', fontStyle: 'italic' },
+
+  // Variables ($VAR, ${VAR})
+  { tag: t.variableName, color: 'var(--chart-2, oklch(0.6 0.118 184.704))' },
+
+  // Operators
+  { tag: t.operator, color: 'var(--muted-foreground)' },
+
+  // Numbers
+  { tag: t.number, color: 'var(--chart-3, oklch(0.7 0.15 150))' },
+
+  // Function names / commands
+  { tag: t.function(t.variableName), color: 'var(--primary)' },
+  { tag: t.attributeName, color: 'var(--chart-5, oklch(0.65 0.2 30))' },
+
+  // Default text
+  { tag: t.content, color: 'var(--foreground)' },
+]);
+
+// Editor theme using CSS variables
+const editorTheme = EditorView.theme({
+  '&': {
+    height: '100%',
+    fontSize: '0.875rem',
+    fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
+    backgroundColor: 'transparent',
+    color: 'var(--foreground)',
+  },
+  '.cm-scroller': {
+    overflow: 'auto',
+    fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
+  },
+  '.cm-content': {
+    padding: '0.75rem',
+    minHeight: '100%',
+    caretColor: 'var(--primary)',
+  },
+  '.cm-cursor, .cm-dropCursor': {
+    borderLeftColor: 'var(--primary)',
+  },
+  '&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
+    backgroundColor: 'oklch(0.55 0.25 265 / 0.3)',
+  },
+  '.cm-activeLine': {
+    backgroundColor: 'var(--accent)',
+    opacity: '0.3',
+  },
+  '.cm-line': {
+    padding: '0 0.25rem',
+  },
+  '&.cm-focused': {
+    outline: 'none',
+  },
+  '.cm-gutters': {
+    backgroundColor: 'transparent',
+    color: 'var(--muted-foreground)',
+    border: 'none',
+    paddingRight: '0.5rem',
+  },
+  '.cm-lineNumbers .cm-gutterElement': {
+    minWidth: '2rem',
+    textAlign: 'right',
+    paddingRight: '0.5rem',
+  },
+  '.cm-placeholder': {
+    color: 'var(--muted-foreground)',
+    fontStyle: 'italic',
+  },
+});
+
+// Combine all extensions
+const extensions: Extension[] = [
+  StreamLanguage.define(shell),
+  syntaxHighlighting(syntaxColors),
+  editorTheme,
+];
+
+export function ShellSyntaxEditor({
+  value,
+  onChange,
+  placeholder,
+  className,
+  minHeight = '200px',
+  maxHeight,
+  'data-testid': testId,
+}: ShellSyntaxEditorProps) {
+  return (
+    <div
+      className={cn('w-full rounded-lg border border-border bg-muted/30', className)}
+      style={{ minHeight }}
+      data-testid={testId}
+    >
+      <CodeMirror
+        value={value}
+        onChange={onChange}
+        extensions={extensions}
+        theme="none"
+        placeholder={placeholder}
+        height={maxHeight}
+        minHeight={minHeight}
+        className="[&_.cm-editor]:min-h-[inherit]"
+        basicSetup={{
+          lineNumbers: true,
+          foldGutter: false,
+          highlightActiveLine: true,
+          highlightSelectionMatches: true,
+          autocompletion: false,
+          bracketMatching: true,
+          indentOnInput: true,
+        }}
+      />
+    </div>
+  );
+}

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,
@@ -61,6 +75,8 @@ import {
 } from './board-view/hooks';
 import { SelectionActionBar } from './board-view/components';
 import { MassEditDialog } from './board-view/dialogs';
+import { InitScriptIndicator } from './board-view/init-script-indicator';
+import { useInitScriptEvents } from '@/hooks/use-init-script-events';
 
 // 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,
@@ -91,12 +101,22 @@ export function BoardView() {
     useWorktrees,
     enableDependencyBlocking,
     skipVerificationInAutoMode,
+    planUseSelectedWorktreeBranch,
+    addFeatureUseSelectedWorktreeBranch,
     isPrimaryWorktreeBranch,
     getPrimaryWorktreeBranch,
     setPipelineConfig,
   } = 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);
+  // Subscribe to showInitScriptIndicatorByProject to trigger re-renders when it changes
+  const showInitScriptIndicatorByProject = useAppStore(
+    (state) => state.showInitScriptIndicatorByProject
+  );
+  const getShowInitScriptIndicator = useAppStore((state) => state.getShowInitScriptIndicator);
+  const getDefaultDeleteBranch = useAppStore((state) => state.getDefaultDeleteBranch);
   const shortcuts = useKeyboardShortcutsConfig();
   const {
     features: hookFeatures,
@@ -151,12 +171,14 @@ export function BoardView() {
     followUpPrompt,
     followUpImagePaths,
     followUpPreviewMap,
+    followUpPromptHistory,
     setShowFollowUpDialog,
     setFollowUpFeature,
     setFollowUpPrompt,
     setFollowUpImagePaths,
     setFollowUpPreviewMap,
     handleFollowUpDialogChange,
+    addToPromptHistory,
   } = useFollowUpState();
 
   // Selection mode hook for mass editing
@@ -240,6 +262,9 @@ export function BoardView() {
   // Window state hook for compact dialog mode
   const { isMaximized } = useWindowState();
 
+  // Init script events hook - subscribe to worktree init script events
+  useInitScriptEvents(currentProject?.path ?? null);
+
   // Keyboard shortcuts hook will be initialized after actions hook
 
   // Prevent hydration issues
@@ -248,7 +273,7 @@ export function BoardView() {
   }, []);
 
   const sensors = useSensors(
-    useSensor(PointerSensor, {
+    useSensor(DialogAwarePointerSensor, {
       activationConstraint: {
         distance: 8,
       },
@@ -495,6 +520,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));
@@ -1140,7 +1204,7 @@ export function BoardView() {
     >
       {/* Header */}
       <BoardHeader
-        projectName={currentProject.name}
+        projectPath={currentProject.path}
         maxConcurrency={maxConcurrency}
         runningAgentsCount={runningAutoTasks.length}
         onConcurrencyChange={setMaxConcurrency}
@@ -1152,134 +1216,95 @@ 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}
       />
 
-      {/* 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}
+          isDragging={activeFeature !== null}
+          onAiSuggest={() => setShowPlanDialog(true)}
+        />
       </div>
 
       {/* Selection Action Bar */}
@@ -1288,6 +1313,7 @@ export function BoardView() {
           selectedCount={selectedCount}
           totalCount={allSelectableFeatureIds.length}
           onEdit={() => setShowMassEditDialog(true)}
+          onDelete={handleBulkDelete}
           onClear={clearSelection}
           onSelectAll={() => selectAll(allSelectableFeatureIds)}
         />
@@ -1299,8 +1325,6 @@ export function BoardView() {
         onClose={() => setShowMassEditDialog(false)}
         selectedFeatures={selectedFeatures}
         onApply={handleBulkUpdate}
-        showProfilesOnly={showProfilesOnly}
-        aiProfiles={aiProfiles}
       />
 
       {/* Board Background Modal */}
@@ -1348,10 +1372,16 @@ export function BoardView() {
         defaultBranch={selectedWorktreeBranch}
         currentBranch={currentWorktreeBranch || undefined}
         isMaximized={isMaximized}
-        showProfilesOnly={showProfilesOnly}
-        aiProfiles={aiProfiles}
         parentFeature={spawnParentFeature}
         allFeatures={hookFeatures}
+        // When setting is enabled and a non-main worktree is selected, pass its branch to default to 'custom' work mode
+        selectedNonMainWorktreeBranch={
+          addFeatureUseSelectedWorktreeBranch && currentWorktreePath !== null
+            ? currentWorktreeBranch || undefined
+            : undefined
+        }
+        // When the worktree setting is disabled, force 'current' branch mode
+        forceCurrentBranchMode={!addFeatureUseSelectedWorktreeBranch}
       />
 
       {/* Edit Feature Dialog */}
@@ -1364,8 +1394,6 @@ export function BoardView() {
         branchCardCounts={branchCardCounts}
         currentBranch={currentWorktreeBranch || undefined}
         isMaximized={isMaximized}
-        showProfilesOnly={showProfilesOnly}
-        aiProfiles={aiProfiles}
         allFeatures={hookFeatures}
       />
 
@@ -1419,6 +1447,8 @@ export function BoardView() {
         onPreviewMapChange={setFollowUpPreviewMap}
         onSend={handleSendFollowUp}
         isMaximized={isMaximized}
+        promptHistory={followUpPromptHistory}
+        onHistoryAdd={addToPromptHistory}
       />
 
       {/* Backlog Plan Dialog */}
@@ -1431,6 +1461,7 @@ export function BoardView() {
         setPendingPlanResult={setPendingBacklogPlan}
         isGeneratingPlan={isGeneratingPlan}
         setIsGeneratingPlan={setIsGeneratingPlan}
+        currentBranch={planUseSelectedWorktreeBranch ? selectedWorktreeBranch : undefined}
       />
 
       {/* Plan Approval Dialog */}
@@ -1498,6 +1529,7 @@ export function BoardView() {
             ? hookFeatures.filter((f) => f.branchName === selectedWorktreeForAction.branch).length
             : 0
         }
+        defaultDeleteBranch={getDefaultDeleteBranch(currentProject.path)}
         onDeleted={(deletedWorktree, _deletedBranch) => {
           // Reset features that were assigned to the deleted worktree (by branch)
           hookFeatures.forEach((feature) => {
@@ -1565,6 +1597,11 @@ export function BoardView() {
           setSelectedWorktreeForAction(null);
         }}
       />
+
+      {/* Init Script Indicator - floating overlay for worktree init script status */}
+      {getShowInitScriptIndicator(currentProject.path) && (
+        <InitScriptIndicator projectPath={currentProject.path} />
+      )}
     </div>
   );
 }

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

@@ -1,18 +1,12 @@
 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 } 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;
 }
 
 export function BoardControls({
@@ -20,61 +14,12 @@ export function BoardControls({
   onShowBoardBackground,
   onShowCompletedModal,
   completedCount,
-  kanbanCardDetailLevel,
-  onDetailLevelChange,
-  boardViewMode,
-  onBoardViewModeChange,
 }: 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"
-        >
-          <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"
-              >
-                <Columns3 className="w-4 h-4" />
-              </button>
-            </TooltipTrigger>
-            <TooltipContent>
-              <p>Kanban Board View</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>
-
+      <div className="flex items-center gap-2">
         {/* Board Background Button */}
         <Tooltip>
           <TooltipTrigger asChild>
@@ -115,70 +60,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 { WorktreeSettingsDialog } from './dialogs/worktree-settings-dialog';
+import { PlanSettingsDialog } from './dialogs/plan-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;
 }
 
 // Shared styles for header control containers
@@ -29,24 +40,64 @@ 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,
 }: BoardHeaderProps) {
   const [showAutoModeSettings, setShowAutoModeSettings] = useState(false);
+  const [showWorktreeSettings, setShowWorktreeSettings] = useState(false);
+  const [showPlanSettings, setShowPlanSettings] = useState(false);
   const apiKeys = useAppStore((state) => state.apiKeys);
   const claudeAuthStatus = useSetupStore((state) => state.claudeAuthStatus);
   const skipVerificationInAutoMode = useAppStore((state) => state.skipVerificationInAutoMode);
   const setSkipVerificationInAutoMode = useAppStore((state) => state.setSkipVerificationInAutoMode);
+  const planUseSelectedWorktreeBranch = useAppStore((state) => state.planUseSelectedWorktreeBranch);
+  const setPlanUseSelectedWorktreeBranch = useAppStore(
+    (state) => state.setPlanUseSelectedWorktreeBranch
+  );
+  const addFeatureUseSelectedWorktreeBranch = useAppStore(
+    (state) => state.addFeatureUseSelectedWorktreeBranch
+  );
+  const setAddFeatureUseSelectedWorktreeBranch = useAppStore(
+    (state) => state.setAddFeatureUseSelectedWorktreeBranch
+  );
   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 +114,100 @@ 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}
+        />
       </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"
+            <button
+              onClick={() => setShowWorktreeSettings(true)}
+              className="p-1 rounded hover:bg-accent/50 transition-colors"
+              title="Worktree Settings"
+              data-testid="worktree-settings-button"
             >
-              {runningAgentsCount} / {maxConcurrency}
-            </span>
+              <Settings2 className="w-4 h-4 text-muted-foreground" />
+            </button>
           </div>
         )}
 
+        {/* Worktree Settings Dialog */}
+        <WorktreeSettingsDialog
+          open={showWorktreeSettings}
+          onOpenChange={setShowWorktreeSettings}
+          addFeatureUseSelectedWorktreeBranch={addFeatureUseSelectedWorktreeBranch}
+          onAddFeatureUseSelectedWorktreeBranchChange={setAddFeatureUseSelectedWorktreeBranch}
+        />
+
+        {/* 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">
@@ -125,26 +239,33 @@ export function BoardHeader({
           onSkipVerificationChange={setSkipVerificationInAutoMode}
         />
 
-        <Button
-          size="sm"
-          variant="outline"
-          onClick={onOpenPlanDialog}
-          data-testid="plan-backlog-button"
-        >
-          <Wand2 className="w-4 h-4 mr-2" />
-          Plan
-        </Button>
+        {/* Plan Button with Settings */}
+        <div className={controlContainerClass} data-testid="plan-button-container">
+          <button
+            onClick={onOpenPlanDialog}
+            className="flex items-center gap-1.5 hover:text-foreground transition-colors"
+            data-testid="plan-backlog-button"
+          >
+            <Wand2 className="w-4 h-4 text-muted-foreground" />
+            <span className="text-sm font-medium">Plan</span>
+          </button>
+          <button
+            onClick={() => setShowPlanSettings(true)}
+            className="p-1 rounded hover:bg-accent/50 transition-colors"
+            title="Plan Settings"
+            data-testid="plan-settings-button"
+          >
+            <Settings2 className="w-4 h-4 text-muted-foreground" />
+          </button>
+        </div>
 
-        <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>
+        {/* Plan Settings Dialog */}
+        <PlanSettingsDialog
+          open={showPlanSettings}
+          onOpenChange={setShowPlanSettings}
+          planUseSelectedWorktreeBranch={planUseSelectedWorktreeBranch}
+          onPlanUseSelectedWorktreeBranchChange={setPlanUseSelectedWorktreeBranch}
+        />
       </div>
     </div>
   );

apps/ui/src/components/views/board-view/components/empty-state-card.tsx

@@ -0,0 +1,120 @@
+import { memo } from 'react';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { Kbd } from '@/components/ui/kbd';
+import { formatShortcut } from '@/store/app-store';
+import { getEmptyStateConfig, type EmptyStateConfig } from '../constants';
+import { Lightbulb, Play, Clock, CheckCircle2, Sparkles, Wand2 } from 'lucide-react';
+
+const ICON_MAP = {
+  lightbulb: Lightbulb,
+  play: Play,
+  clock: Clock,
+  check: CheckCircle2,
+  sparkles: Sparkles,
+} as const;
+
+interface EmptyStateCardProps {
+  columnId: string;
+  columnTitle?: string;
+  /** Keyboard shortcut for adding features (from settings) */
+  addFeatureShortcut?: string;
+  /** Whether the column is empty due to active filters */
+  isFilteredEmpty?: boolean;
+  /** Whether we're in read-only mode (hide actions) */
+  isReadOnly?: boolean;
+  /** Called when user clicks "Use AI Suggestions" */
+  onAiSuggest?: () => void;
+  /** Card opacity (matches board settings) */
+  opacity?: number;
+  /** Enable glassmorphism effect */
+  glassmorphism?: boolean;
+  /** Custom config override for pipeline steps */
+  customConfig?: Partial<EmptyStateConfig>;
+}
+
+export const EmptyStateCard = memo(function EmptyStateCard({
+  columnId,
+  addFeatureShortcut,
+  isFilteredEmpty = false,
+  isReadOnly = false,
+  onAiSuggest,
+  customConfig,
+}: EmptyStateCardProps) {
+  // Get base config and merge with custom overrides
+  const baseConfig = getEmptyStateConfig(columnId);
+  const config: EmptyStateConfig = { ...baseConfig, ...customConfig };
+
+  const IconComponent = ICON_MAP[config.icon];
+  const showActions = !isReadOnly && !isFilteredEmpty;
+  const showShortcut = columnId === 'backlog' && addFeatureShortcut && showActions;
+
+  // Action button handler
+  const handlePrimaryAction = () => {
+    if (!config.primaryAction) return;
+    if (config.primaryAction.actionType === 'ai-suggest') {
+      onAiSuggest?.();
+    }
+  };
+
+  return (
+    <div
+      className={cn(
+        'w-full h-full min-h-[200px] flex-1',
+        'flex flex-col items-center justify-center',
+        'text-center px-4',
+        'transition-all duration-300 ease-out',
+        'animate-in fade-in duration-300',
+        'group'
+      )}
+      data-testid={`empty-state-card-${columnId}`}
+    >
+      {/* Icon */}
+      <div className="mb-3 text-muted-foreground/30">
+        <IconComponent className="w-8 h-8" />
+      </div>
+
+      {/* Title */}
+      <h4 className="font-medium text-sm text-muted-foreground/50 mb-1">
+        {isFilteredEmpty ? 'No Matching Items' : config.title}
+      </h4>
+
+      {/* Description */}
+      <p className="text-xs text-muted-foreground/40 leading-relaxed max-w-[180px]">
+        {isFilteredEmpty ? 'No features match your current filters.' : config.description}
+      </p>
+
+      {/* Keyboard shortcut hint for backlog */}
+      {showShortcut && (
+        <div className="flex items-center gap-1.5 mt-3 text-muted-foreground/40">
+          <span className="text-xs">Press</span>
+          <Kbd className="bg-muted/30 border-0 px-1.5 py-0.5 text-[10px] text-muted-foreground/50">
+            {formatShortcut(addFeatureShortcut, true)}
+          </Kbd>
+          <span className="text-xs">to add</span>
+        </div>
+      )}
+
+      {/* AI Suggest action for backlog */}
+      {showActions && config.primaryAction && config.primaryAction.actionType === 'ai-suggest' && (
+        <Button
+          variant="ghost"
+          size="sm"
+          className="mt-4 h-7 text-xs text-muted-foreground/50 hover:text-muted-foreground/70"
+          onClick={handlePrimaryAction}
+          data-testid={`empty-state-primary-action-${columnId}`}
+        >
+          <Wand2 className="w-3 h-3 mr-1.5" />
+          {config.primaryAction.label}
+        </Button>
+      )}
+
+      {/* Filtered empty state hint */}
+      {isFilteredEmpty && (
+        <p className="text-[10px] mt-2 text-muted-foreground/30 italic">
+          Clear filters to see all items
+        </p>
+      )}
+    </div>
+  );
+});

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 { EmptyStateCard } from './empty-state-card';

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,
@@ -79,12 +82,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

@@ -3,6 +3,69 @@ import type { PipelineConfig, FeatureStatusWithPipeline } from '@automaker/types
 
 export type ColumnId = Feature['status'];
 
+/**
+ * Empty state configuration for each column type
+ */
+export interface EmptyStateConfig {
+  title: string;
+  description: string;
+  icon: 'lightbulb' | 'play' | 'clock' | 'check' | 'sparkles';
+  shortcutKey?: string; // Keyboard shortcut label (e.g., 'N', 'A')
+  shortcutHint?: string; // Human-readable shortcut hint
+  primaryAction?: {
+    label: string;
+    actionType: 'ai-suggest' | 'none';
+  };
+}
+
+/**
+ * Default empty state configurations per column type
+ */
+export const EMPTY_STATE_CONFIGS: Record<string, EmptyStateConfig> = {
+  backlog: {
+    title: 'Ready for Ideas',
+    description:
+      'Add your first feature idea to get started using the button below, or let AI help generate ideas.',
+    icon: 'lightbulb',
+    shortcutHint: 'Press',
+    primaryAction: {
+      label: 'Use AI Suggestions',
+      actionType: 'none',
+    },
+  },
+  in_progress: {
+    title: 'Nothing in Progress',
+    description: 'Drag a feature from the backlog here or click implement to start working on it.',
+    icon: 'play',
+  },
+  waiting_approval: {
+    title: 'No Items Awaiting Approval',
+    description: 'Features will appear here after implementation is complete and need your review.',
+    icon: 'clock',
+  },
+  verified: {
+    title: 'No Verified Features',
+    description: 'Approved features will appear here. They can then be completed and archived.',
+    icon: 'check',
+  },
+  // Pipeline step default configuration
+  pipeline_default: {
+    title: 'Pipeline Step Empty',
+    description: 'Features will flow through this step during the automated pipeline process.',
+    icon: 'sparkles',
+  },
+};
+
+/**
+ * Get empty state config for a column, with fallback for pipeline columns
+ */
+export function getEmptyStateConfig(columnId: string): EmptyStateConfig {
+  if (columnId.startsWith('pipeline_')) {
+    return EMPTY_STATE_CONFIGS.pipeline_default;
+  }
+  return EMPTY_STATE_CONFIGS[columnId] || EMPTY_STATE_CONFIGS.default;
+}
+
 export interface Column {
   id: FeatureStatusWithPipeline;
   title: string;

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

@@ -21,46 +21,33 @@ import {
   FeatureTextFilePath as DescriptionTextFilePath,
   ImagePreviewMap,
 } from '@/components/ui/description-image-dropzone';
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
-import { Sparkles, ChevronDown, ChevronRight, Play, Cpu, FolderKanban } from 'lucide-react';
+import { Play, Cpu, FolderKanban } from 'lucide-react';
 import { toast } from 'sonner';
 import { cn } from '@/lib/utils';
-import { getElectronAPI } from '@/lib/electron';
 import { modelSupportsThinking } from '@/lib/utils';
 import {
   useAppStore,
   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,
+  EnhanceWithAI,
+  EnhancementHistoryButton,
+  type BaseHistoryEntry,
 } from '../shared';
 import type { WorkMode } from '../shared';
 import { PhaseModelSelector } from '@/components/views/settings-view/model-defaults/phase-model-selector';
-import { ModelOverrideTrigger, useModelOverride } from '@/components/shared';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  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,
@@ -69,6 +56,32 @@ import {
 
 const logger = createLogger('AddFeatureDialog');
 
+/**
+ * Determines the default work mode based on global settings and current worktree selection.
+ *
+ * Priority:
+ * 1. If forceCurrentBranchMode is true, always defaults to 'current' (work on current branch)
+ * 2. If a non-main worktree is selected in the board header, defaults to 'custom' (use that branch)
+ * 3. If useWorktrees global setting is enabled, defaults to 'auto' (automatic worktree creation)
+ * 4. Otherwise, defaults to 'current' (work on current branch without isolation)
+ */
+const getDefaultWorkMode = (
+  useWorktrees: boolean,
+  selectedNonMainWorktreeBranch?: string,
+  forceCurrentBranchMode?: boolean
+): WorkMode => {
+  // If force current branch mode is enabled (worktree setting is off), always use 'current'
+  if (forceCurrentBranchMode) {
+    return 'current';
+  }
+  // If a non-main worktree is selected, default to 'custom' mode with that branch
+  if (selectedNonMainWorktreeBranch) {
+    return 'custom';
+  }
+  // Otherwise, respect the global worktree setting
+  return useWorktrees ? 'auto' : 'current';
+};
+
 type FeatureData = {
   title: string;
   category: string;
@@ -100,10 +113,25 @@ interface AddFeatureDialogProps {
   defaultBranch?: string;
   currentBranch?: string;
   isMaximized: boolean;
-  showProfilesOnly: boolean;
-  aiProfiles: AIProfile[];
   parentFeature?: Feature | null;
   allFeatures?: Feature[];
+  /**
+   * When a non-main worktree is selected in the board header, this will be set to that worktree's branch.
+   * When set, the dialog will default to 'custom' work mode with this branch pre-filled.
+   */
+  selectedNonMainWorktreeBranch?: string;
+  /**
+   * When true, forces the dialog to default to 'current' work mode (work on current branch).
+   * This is used when the "Use selected worktree branch" setting is disabled.
+   */
+  forceCurrentBranchMode?: boolean;
+}
+
+/**
+ * A single entry in the description history
+ */
+interface DescriptionHistoryEntry extends BaseHistoryEntry {
+  description: string;
 }
 
 export function AddFeatureDialog({
@@ -118,13 +146,12 @@ export function AddFeatureDialog({
   defaultBranch = 'main',
   currentBranch,
   isMaximized,
-  showProfilesOnly,
-  aiProfiles,
   parentFeature = null,
   allFeatures = [],
+  selectedNonMainWorktreeBranch,
+  forceCurrentBranchMode,
 }: AddFeatureDialogProps) {
   const isSpawnMode = !!parentFeature;
-  const navigate = useNavigate();
   const [workMode, setWorkMode] = useState<WorkMode>('current');
 
   // Form state
@@ -139,7 +166,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)
@@ -152,21 +178,16 @@ export function AddFeatureDialog({
   // UI state
   const [previewMap, setPreviewMap] = useState<ImagePreviewMap>(() => new Map());
   const [descriptionError, setDescriptionError] = useState(false);
-  const [isEnhancing, setIsEnhancing] = useState(false);
-  const [enhancementMode, setEnhancementMode] = useState<
-    'improve' | 'technical' | 'simplify' | 'acceptance'
-  >('improve');
-  const [enhanceOpen, setEnhanceOpen] = useState(false);
+
+  // Description history state
+  const [descriptionHistory, setDescriptionHistory] = useState<DescriptionHistoryEntry[]>([]);
 
   // Spawn mode state
   const [ancestors, setAncestors] = useState<AncestorContext[]>([]);
   const [selectedAncestorIds, setSelectedAncestorIds] = useState<Set<string>>(new Set());
 
   // Get defaults from store
-  const { defaultPlanningMode, defaultRequirePlanApproval, defaultAIProfileId } = useAppStore();
-
-  // Enhancement model override
-  const enhancementOverride = useModelOverride({ phase: 'enhancementModel' });
+  const { defaultPlanningMode, defaultRequirePlanApproval, useWorktrees } = useAppStore();
 
   // Track previous open state to detect when dialog opens
   const wasOpenRef = useRef(false);
@@ -177,24 +198,19 @@ export function AddFeatureDialog({
     wasOpenRef.current = open;
 
     if (justOpened) {
-      const defaultProfile = defaultAIProfileId
-        ? aiProfiles.find((p) => p.id === defaultAIProfileId)
-        : null;
-
       setSkipTests(defaultSkipTests);
-      setBranchName(defaultBranch || '');
-      setWorkMode('current');
+      // When a non-main worktree is selected, use its branch name for custom mode
+      // Otherwise, use the default branch
+      setBranchName(selectedNonMainWorktreeBranch || defaultBranch || '');
+      setWorkMode(
+        getDefaultWorkMode(useWorktrees, selectedNonMainWorktreeBranch, forceCurrentBranchMode)
+      );
       setPlanningMode(defaultPlanningMode);
       setRequirePlanApproval(defaultRequirePlanApproval);
+      setModelEntry({ model: 'opus' });
 
-      // Set model from default profile or fallback
-      if (defaultProfile) {
-        setSelectedProfileId(defaultProfile.id);
-        applyProfileToModel(defaultProfile);
-      } else {
-        setSelectedProfileId(undefined);
-        setModelEntry({ model: 'opus' });
-      }
+      // Initialize description history (empty for new feature)
+      setDescriptionHistory([]);
 
       // Initialize ancestors for spawn mode
       if (parentFeature) {
@@ -212,41 +228,15 @@ export function AddFeatureDialog({
     defaultBranch,
     defaultPlanningMode,
     defaultRequirePlanApproval,
-    defaultAIProfileId,
-    aiProfiles,
+    useWorktrees,
+    selectedNonMainWorktreeBranch,
+    forceCurrentBranchMode,
     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 => {
@@ -325,16 +315,18 @@ export function AddFeatureDialog({
     setImagePaths([]);
     setTextFilePaths([]);
     setSkipTests(defaultSkipTests);
-    setBranchName('');
+    // When a non-main worktree is selected, use its branch name for custom mode
+    setBranchName(selectedNonMainWorktreeBranch || '');
     setPriority(2);
-    setSelectedProfileId(undefined);
     setModelEntry({ model: 'opus' });
-    setWorkMode('current');
+    setWorkMode(
+      getDefaultWorkMode(useWorktrees, selectedNonMainWorktreeBranch, forceCurrentBranchMode)
+    );
     setPlanningMode(defaultPlanningMode);
     setRequirePlanApproval(defaultRequirePlanApproval);
     setPreviewMap(new Map());
     setDescriptionError(false);
-    setEnhanceOpen(false);
+    setDescriptionHistory([]);
     onOpenChange(false);
   };
 
@@ -357,33 +349,6 @@ export function AddFeatureDialog({
     }
   };
 
-  const handleEnhanceDescription = async () => {
-    if (!description.trim() || isEnhancing) return;
-
-    setIsEnhancing(true);
-    try {
-      const api = getElectronAPI();
-      const result = await api.enhancePrompt?.enhance(
-        description,
-        enhancementMode,
-        enhancementOverride.effectiveModel,
-        enhancementOverride.effectiveModelEntry.thinkingLevel
-      );
-
-      if (result?.success && result.enhancedText) {
-        setDescription(result.enhancedText);
-        toast.success('Description enhanced!');
-      } else {
-        toast.error(result?.error || 'Failed to enhance description');
-      }
-    } catch (error) {
-      logger.error('Enhancement failed:', error);
-      toast.error('Failed to enhance description');
-    } finally {
-      setIsEnhancing(false);
-    }
-  };
-
   // Shared card styling
   const cardClass = 'rounded-lg border border-border/50 bg-muted/30 p-4 space-y-3';
   const sectionHeaderClass = 'flex items-center gap-2 text-sm font-medium text-foreground';
@@ -435,7 +400,18 @@ export function AddFeatureDialog({
           {/* Task Details Section */}
           <div className={cardClass}>
             <div className="space-y-2">
-              <Label htmlFor="description">Description</Label>
+              <div className="flex items-center justify-between">
+                <Label htmlFor="description">Description</Label>
+                {/* Version History Button */}
+                <EnhancementHistoryButton
+                  history={descriptionHistory}
+                  currentValue={description}
+                  onRestore={setDescription}
+                  valueAccessor={(entry) => entry.description}
+                  title="Version History"
+                  restoreMessage="Description restored from history"
+                />
+              </div>
               <DescriptionImageDropZone
                 value={description}
                 onChange={(value) => {
@@ -464,71 +440,35 @@ export function AddFeatureDialog({
               />
             </div>
 
-            {/* Collapsible Enhancement Section */}
-            <Collapsible open={enhanceOpen} onOpenChange={setEnhanceOpen}>
-              <CollapsibleTrigger asChild>
-                <button className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors w-full py-1">
-                  {enhanceOpen ? (
-                    <ChevronDown className="w-4 h-4" />
-                  ) : (
-                    <ChevronRight className="w-4 h-4" />
-                  )}
-                  <Sparkles className="w-4 h-4" />
-                  <span>Enhance with AI</span>
-                </button>
-              </CollapsibleTrigger>
-              <CollapsibleContent className="pt-3">
-                <div className="flex flex-wrap items-center gap-2 pl-6">
-                  <DropdownMenu>
-                    <DropdownMenuTrigger asChild>
-                      <Button variant="outline" size="sm" className="h-8 text-xs">
-                        {enhancementMode === 'improve' && 'Improve Clarity'}
-                        {enhancementMode === 'technical' && 'Add Technical Details'}
-                        {enhancementMode === 'simplify' && 'Simplify'}
-                        {enhancementMode === 'acceptance' && 'Add Acceptance Criteria'}
-                        <ChevronDown className="w-3 h-3 ml-1" />
-                      </Button>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent align="start">
-                      <DropdownMenuItem onClick={() => setEnhancementMode('improve')}>
-                        Improve Clarity
-                      </DropdownMenuItem>
-                      <DropdownMenuItem onClick={() => setEnhancementMode('technical')}>
-                        Add Technical Details
-                      </DropdownMenuItem>
-                      <DropdownMenuItem onClick={() => setEnhancementMode('simplify')}>
-                        Simplify
-                      </DropdownMenuItem>
-                      <DropdownMenuItem onClick={() => setEnhancementMode('acceptance')}>
-                        Add Acceptance Criteria
-                      </DropdownMenuItem>
-                    </DropdownMenuContent>
-                  </DropdownMenu>
-
-                  <Button
-                    type="button"
-                    variant="default"
-                    size="sm"
-                    className="h-8 text-xs"
-                    onClick={handleEnhanceDescription}
-                    disabled={!description.trim() || isEnhancing}
-                    loading={isEnhancing}
-                  >
-                    <Sparkles className="w-3 h-3 mr-1" />
-                    Enhance
-                  </Button>
-
-                  <ModelOverrideTrigger
-                    currentModelEntry={enhancementOverride.effectiveModelEntry}
-                    onModelChange={enhancementOverride.setOverride}
-                    phase="enhancementModel"
-                    isOverridden={enhancementOverride.isOverridden}
-                    size="sm"
-                    variant="icon"
-                  />
-                </div>
-              </CollapsibleContent>
-            </Collapsible>
+            {/* Enhancement Section */}
+            <EnhanceWithAI
+              value={description}
+              onChange={setDescription}
+              onHistoryAdd={({ mode, originalText, enhancedText }) => {
+                const timestamp = new Date().toISOString();
+                setDescriptionHistory((prev) => {
+                  const newHistory = [...prev];
+                  // Add original text first (so user can restore to pre-enhancement state)
+                  // Only add if it's different from the last entry to avoid duplicates
+                  const lastEntry = prev[prev.length - 1];
+                  if (!lastEntry || lastEntry.description !== originalText) {
+                    newHistory.push({
+                      description: originalText,
+                      timestamp,
+                      source: prev.length === 0 ? 'initial' : 'edit',
+                    });
+                  }
+                  // Add enhanced text
+                  newHistory.push({
+                    description: enhancedText,
+                    timestamp,
+                    source: 'enhance',
+                    enhancementMode: mode,
+                  });
+                  return newHistory;
+                });
+              }}
+            />
           </div>
 
           {/* AI & Execution Section */}
@@ -538,50 +478,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 +543,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/backlog-plan-dialog.tsx

@@ -63,6 +63,8 @@ interface BacklogPlanDialogProps {
   setPendingPlanResult: (result: BacklogPlanResult | null) => void;
   isGeneratingPlan: boolean;
   setIsGeneratingPlan: (generating: boolean) => void;
+  // Branch to use for created features (defaults to 'main' when applying)
+  currentBranch?: string;
 }
 
 type DialogMode = 'input' | 'review' | 'applying';
@@ -76,6 +78,7 @@ export function BacklogPlanDialog({
   setPendingPlanResult,
   isGeneratingPlan,
   setIsGeneratingPlan,
+  currentBranch,
 }: BacklogPlanDialogProps) {
   const [mode, setMode] = useState<DialogMode>('input');
   const [prompt, setPrompt] = useState('');
@@ -167,7 +170,11 @@ export function BacklogPlanDialog({
         }) || [],
     };
 
-    const result = await api.backlogPlan.apply(projectPath, filteredPlanResult);
+    const result = await api.backlogPlan.apply(
+      projectPath,
+      filteredPlanResult,
+      currentBranch ?? 'main'
+    );
     if (result.success) {
       toast.success(`Applied ${result.appliedChanges?.length || 0} changes`);
       setPendingPlanResult(null);
@@ -184,6 +191,7 @@ export function BacklogPlanDialog({
     setPendingPlanResult,
     onPlanApplied,
     onClose,
+    currentBranch,
   ]);
 
   const handleDiscard = useCallback(() => {

apps/ui/src/components/views/board-view/dialogs/create-worktree-dialog.tsx

@@ -10,10 +10,73 @@ import {
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
-import { GitBranch, Loader2 } from 'lucide-react';
+import { GitBranch, Loader2, AlertCircle } from 'lucide-react';
 import { getElectronAPI } from '@/lib/electron';
 import { toast } from 'sonner';
 
+/**
+ * Parse git/worktree error messages and return user-friendly versions
+ */
+function parseWorktreeError(error: string): { title: string; description?: string } {
+  const errorLower = error.toLowerCase();
+
+  // Worktree already exists
+  if (errorLower.includes('already exists') && errorLower.includes('worktree')) {
+    return {
+      title: 'A worktree with this name already exists',
+      description: 'Try a different branch name or delete the existing worktree first.',
+    };
+  }
+
+  // Branch already checked out in another worktree
+  if (
+    errorLower.includes('already checked out') ||
+    errorLower.includes('is already used by worktree')
+  ) {
+    return {
+      title: 'This branch is already in use',
+      description: 'The branch is checked out in another worktree. Use a different branch name.',
+    };
+  }
+
+  // Branch name conflicts with existing branch
+  if (errorLower.includes('already exists') && errorLower.includes('branch')) {
+    return {
+      title: 'A branch with this name already exists',
+      description: 'The worktree will use the existing branch, or try a different name.',
+    };
+  }
+
+  // Not a git repository
+  if (errorLower.includes('not a git repository')) {
+    return {
+      title: 'Not a git repository',
+      description: 'Initialize git in this project first with "git init".',
+    };
+  }
+
+  // Lock file exists (another git operation in progress)
+  if (errorLower.includes('.lock') || errorLower.includes('lock file')) {
+    return {
+      title: 'Another git operation is in progress',
+      description: 'Wait for it to complete or remove stale lock files.',
+    };
+  }
+
+  // Permission denied
+  if (errorLower.includes('permission denied') || errorLower.includes('access denied')) {
+    return {
+      title: 'Permission denied',
+      description: 'Check file permissions for the project directory.',
+    };
+  }
+
+  // Default: return original error but cleaned up
+  return {
+    title: error.replace(/^(fatal|error):\s*/i, '').split('\n')[0],
+  };
+}
+
 interface CreatedWorktreeInfo {
   path: string;
   branch: string;
@@ -34,20 +97,21 @@ export function CreateWorktreeDialog({
 }: CreateWorktreeDialogProps) {
   const [branchName, setBranchName] = useState('');
   const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
+  const [error, setError] = useState<{ title: string; description?: string } | null>(null);
 
   const handleCreate = async () => {
     if (!branchName.trim()) {
-      setError('Branch name is required');
+      setError({ title: 'Branch name is required' });
       return;
     }
 
     // Validate branch name (git-compatible)
     const validBranchRegex = /^[a-zA-Z0-9._/-]+$/;
     if (!validBranchRegex.test(branchName)) {
-      setError(
-        'Invalid branch name. Use only letters, numbers, dots, underscores, hyphens, and slashes.'
-      );
+      setError({
+        title: 'Invalid branch name',
+        description: 'Use only letters, numbers, dots, underscores, hyphens, and slashes.',
+      });
       return;
     }
 
@@ -57,7 +121,7 @@ export function CreateWorktreeDialog({
     try {
       const api = getElectronAPI();
       if (!api?.worktree?.create) {
-        setError('Worktree API not available');
+        setError({ title: 'Worktree API not available' });
         return;
       }
       const result = await api.worktree.create(projectPath, branchName);
@@ -70,10 +134,12 @@ export function CreateWorktreeDialog({
         onOpenChange(false);
         setBranchName('');
       } else {
-        setError(result.error || 'Failed to create worktree');
+        setError(parseWorktreeError(result.error || 'Failed to create worktree'));
       }
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to create worktree');
+      setError(
+        parseWorktreeError(err instanceof Error ? err.message : 'Failed to create worktree')
+      );
     } finally {
       setIsLoading(false);
     }
@@ -114,7 +180,17 @@ export function CreateWorktreeDialog({
               className="font-mono text-sm"
               autoFocus
             />
-            {error && <p className="text-sm text-destructive">{error}</p>}
+            {error && (
+              <div className="flex items-start gap-2 p-3 rounded-md bg-destructive/10 border border-destructive/20">
+                <AlertCircle className="w-4 h-4 text-destructive mt-0.5 flex-shrink-0" />
+                <div className="space-y-1">
+                  <p className="text-sm font-medium text-destructive">{error.title}</p>
+                  {error.description && (
+                    <p className="text-xs text-destructive/80">{error.description}</p>
+                  )}
+                </div>
+              </div>
+            )}
           </div>
 
           <div className="text-xs text-muted-foreground space-y-1">

apps/ui/src/components/views/board-view/dialogs/delete-worktree-dialog.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import {
   Dialog,
   DialogContent,
@@ -30,6 +30,8 @@ interface DeleteWorktreeDialogProps {
   onDeleted: (deletedWorktree: WorktreeInfo, deletedBranch: boolean) => void;
   /** Number of features assigned to this worktree's branch */
   affectedFeatureCount?: number;
+  /** Default value for the "delete branch" checkbox */
+  defaultDeleteBranch?: boolean;
 }
 
 export function DeleteWorktreeDialog({
@@ -39,10 +41,18 @@ export function DeleteWorktreeDialog({
   worktree,
   onDeleted,
   affectedFeatureCount = 0,
+  defaultDeleteBranch = false,
 }: DeleteWorktreeDialogProps) {
-  const [deleteBranch, setDeleteBranch] = useState(false);
+  const [deleteBranch, setDeleteBranch] = useState(defaultDeleteBranch);
   const [isLoading, setIsLoading] = useState(false);
 
+  // Reset deleteBranch to default when dialog opens
+  useEffect(() => {
+    if (open) {
+      setDeleteBranch(defaultDeleteBranch);
+    }
+  }, [open, defaultDeleteBranch]);
+
   const handleDelete = async () => {
     if (!worktree) return;
 

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

@@ -21,53 +21,25 @@ import {
   FeatureTextFilePath as DescriptionTextFilePath,
   ImagePreviewMap,
 } from '@/components/ui/description-image-dropzone';
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
-import {
-  Sparkles,
-  ChevronDown,
-  ChevronRight,
-  GitBranch,
-  History,
-  Cpu,
-  FolderKanban,
-} from 'lucide-react';
+import { GitBranch, Cpu, FolderKanban } from 'lucide-react';
 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,
+  EnhanceWithAI,
+  EnhancementHistoryButton,
+  type EnhancementMode,
 } from '../shared';
 import type { WorkMode } from '../shared';
 import { PhaseModelSelector } from '@/components/views/settings-view/model-defaults/phase-model-selector';
-import { ModelOverrideTrigger, useModelOverride } from '@/components/shared';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  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 +64,14 @@ interface EditFeatureDialogProps {
       requirePlanApproval: boolean;
     },
     descriptionHistorySource?: 'enhance' | 'edit',
-    enhancementMode?: 'improve' | 'technical' | 'simplify' | 'acceptance'
+    enhancementMode?: EnhancementMode,
+    preEnhancementDescription?: string
   ) => 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 +84,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>(() => {
@@ -128,11 +96,6 @@ export function EditFeatureDialog({
   const [editFeaturePreviewMap, setEditFeaturePreviewMap] = useState<ImagePreviewMap>(
     () => new Map()
   );
-  const [isEnhancing, setIsEnhancing] = useState(false);
-  const [enhancementMode, setEnhancementMode] = useState<
-    'improve' | 'technical' | 'simplify' | 'acceptance'
-  >('improve');
-  const [enhanceOpen, setEnhanceOpen] = useState(false);
   const [showDependencyTree, setShowDependencyTree] = useState(false);
   const [planningMode, setPlanningMode] = useState<PlanningMode>(feature?.planningMode ?? 'skip');
   const [requirePlanApproval, setRequirePlanApproval] = useState(
@@ -140,7 +103,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',
@@ -152,15 +114,16 @@ export function EditFeatureDialog({
 
   // Track the source of description changes for history
   const [descriptionChangeSource, setDescriptionChangeSource] = useState<
-    { source: 'enhance'; mode: 'improve' | 'technical' | 'simplify' | 'acceptance' } | 'edit' | null
+    { source: 'enhance'; mode: EnhancementMode } | 'edit' | null
   >(null);
   // Track the original description when the dialog opened for comparison
   const [originalDescription, setOriginalDescription] = useState(feature?.description ?? '');
-  // Track if history dropdown is open
-  const [showHistory, setShowHistory] = useState(false);
-
-  // Enhancement model override
-  const enhancementOverride = useModelOverride({ phase: 'enhancementModel' });
+  // Track the description before enhancement (so it can be restored)
+  const [preEnhancementDescription, setPreEnhancementDescription] = useState<string | null>(null);
+  // Local history state for real-time display (combines persisted + session history)
+  const [localHistory, setLocalHistory] = useState<DescriptionHistoryEntry[]>(
+    feature?.descriptionHistory ?? []
+  );
 
   useEffect(() => {
     setEditingFeature(feature);
@@ -172,51 +135,24 @@ export function EditFeatureDialog({
       // Reset history tracking state
       setOriginalDescription(feature.description ?? '');
       setDescriptionChangeSource(null);
-      setShowHistory(false);
-      setEnhanceOpen(false);
+      setPreEnhancementDescription(null);
+      setLocalHistory(feature.descriptionHistory ?? []);
       // Reset model entry
       setModelEntry({
         model: (feature.model as ModelAlias) || 'opus',
         thinkingLevel: feature.thinkingLevel || 'none',
         reasoningEffort: feature.reasoningEffort || 'none',
       });
-      setSelectedProfileId(undefined);
     } else {
       setEditFeaturePreviewMap(new Map());
       setDescriptionChangeSource(null);
-      setShowHistory(false);
+      setPreEnhancementDescription(null);
+      setLocalHistory([]);
     }
   }, [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 = () => {
@@ -273,7 +209,13 @@ export function EditFeatureDialog({
       }
     }
 
-    onUpdate(editingFeature.id, updates, historySource, historyEnhancementMode);
+    onUpdate(
+      editingFeature.id,
+      updates,
+      historySource,
+      historyEnhancementMode,
+      preEnhancementDescription ?? undefined
+    );
     setEditFeaturePreviewMap(new Map());
     onClose();
   };
@@ -284,36 +226,6 @@ export function EditFeatureDialog({
     }
   };
 
-  const handleEnhanceDescription = async () => {
-    if (!editingFeature?.description.trim() || isEnhancing) return;
-
-    setIsEnhancing(true);
-    try {
-      const api = getElectronAPI();
-      const result = await api.enhancePrompt?.enhance(
-        editingFeature.description,
-        enhancementMode,
-        enhancementOverride.effectiveModel, // API accepts string, extract from PhaseModelEntry
-        enhancementOverride.effectiveModelEntry.thinkingLevel // Pass thinking level
-      );
-
-      if (result?.success && result.enhancedText) {
-        const enhancedText = result.enhancedText;
-        setEditingFeature((prev) => (prev ? { ...prev, description: enhancedText } : prev));
-        // Track that this change was from enhancement
-        setDescriptionChangeSource({ source: 'enhance', mode: enhancementMode });
-        toast.success('Description enhanced!');
-      } else {
-        toast.error(result?.error || 'Failed to enhance description');
-      }
-    } catch (error) {
-      logger.error('Enhancement failed:', error);
-      toast.error('Failed to enhance description');
-    } finally {
-      setIsEnhancing(false);
-    }
-  };
-
   if (!editingFeature) {
     return null;
   }
@@ -351,85 +263,18 @@ export function EditFeatureDialog({
             <div className="space-y-2">
               <div className="flex items-center justify-between">
                 <Label htmlFor="edit-description">Description</Label>
-                {/* Version History Button */}
-                {feature?.descriptionHistory && feature.descriptionHistory.length > 0 && (
-                  <Popover open={showHistory} onOpenChange={setShowHistory}>
-                    <PopoverTrigger asChild>
-                      <Button
-                        type="button"
-                        variant="ghost"
-                        size="sm"
-                        className="h-7 gap-1.5 text-xs text-muted-foreground"
-                      >
-                        <History className="w-3.5 h-3.5" />
-                        History ({feature.descriptionHistory.length})
-                      </Button>
-                    </PopoverTrigger>
-                    <PopoverContent className="w-80 p-0" align="end">
-                      <div className="p-3 border-b">
-                        <h4 className="font-medium text-sm">Version History</h4>
-                        <p className="text-xs text-muted-foreground mt-1">
-                          Click a version to restore it
-                        </p>
-                      </div>
-                      <div className="max-h-64 overflow-y-auto p-2 space-y-1">
-                        {[...(feature.descriptionHistory || [])]
-                          .reverse()
-                          .map((entry: DescriptionHistoryEntry, index: number) => {
-                            const isCurrentVersion =
-                              entry.description === editingFeature.description;
-                            const date = new Date(entry.timestamp);
-                            const formattedDate = date.toLocaleDateString(undefined, {
-                              month: 'short',
-                              day: 'numeric',
-                              hour: '2-digit',
-                              minute: '2-digit',
-                            });
-                            const sourceLabel =
-                              entry.source === 'initial'
-                                ? 'Original'
-                                : entry.source === 'enhance'
-                                  ? `Enhanced (${entry.enhancementMode || 'improve'})`
-                                  : 'Edited';
-
-                            return (
-                              <button
-                                key={`${entry.timestamp}-${index}`}
-                                onClick={() => {
-                                  setEditingFeature((prev) =>
-                                    prev ? { ...prev, description: entry.description } : prev
-                                  );
-                                  // Mark as edit since user is restoring from history
-                                  setDescriptionChangeSource('edit');
-                                  setShowHistory(false);
-                                  toast.success('Description restored from history');
-                                }}
-                                className={`w-full text-left p-2 rounded-md hover:bg-muted transition-colors ${
-                                  isCurrentVersion ? 'bg-muted/50 border border-primary/20' : ''
-                                }`}
-                              >
-                                <div className="flex items-center justify-between gap-2">
-                                  <span className="text-xs font-medium">{sourceLabel}</span>
-                                  <span className="text-xs text-muted-foreground">
-                                    {formattedDate}
-                                  </span>
-                                </div>
-                                <p className="text-xs text-muted-foreground mt-1 line-clamp-2">
-                                  {entry.description.slice(0, 100)}
-                                  {entry.description.length > 100 ? '...' : ''}
-                                </p>
-                                {isCurrentVersion && (
-                                  <span className="text-xs text-primary font-medium mt-1 block">
-                                    Current version
-                                  </span>
-                                )}
-                              </button>
-                            );
-                          })}
-                      </div>
-                    </PopoverContent>
-                  </Popover>
-                )}
+                {/* Version History Button - uses local history for real-time updates */}
+                <EnhancementHistoryButton
+                  history={localHistory}
+                  currentValue={editingFeature.description}
+                  onRestore={(description) => {
+                    setEditingFeature((prev) => (prev ? { ...prev, description } : prev));
+                    setDescriptionChangeSource('edit');
+                  }}
+                  valueAccessor={(entry) => entry.description}
+                  title="Version History"
+                  restoreMessage="Description restored from history"
+                />
               </div>
               <DescriptionImageDropZone
                 value={editingFeature.description}
@@ -480,71 +325,40 @@ export function EditFeatureDialog({
               />
             </div>
 
-            {/* Collapsible Enhancement Section */}
-            <Collapsible open={enhanceOpen} onOpenChange={setEnhanceOpen}>
-              <CollapsibleTrigger asChild>
-                <button className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors w-full py-1">
-                  {enhanceOpen ? (
-                    <ChevronDown className="w-4 h-4" />
-                  ) : (
-                    <ChevronRight className="w-4 h-4" />
-                  )}
-                  <Sparkles className="w-4 h-4" />
-                  <span>Enhance with AI</span>
-                </button>
-              </CollapsibleTrigger>
-              <CollapsibleContent className="pt-3">
-                <div className="flex flex-wrap items-center gap-2 pl-6">
-                  <DropdownMenu>
-                    <DropdownMenuTrigger asChild>
-                      <Button variant="outline" size="sm" className="h-8 text-xs">
-                        {enhancementMode === 'improve' && 'Improve Clarity'}
-                        {enhancementMode === 'technical' && 'Add Technical Details'}
-                        {enhancementMode === 'simplify' && 'Simplify'}
-                        {enhancementMode === 'acceptance' && 'Add Acceptance Criteria'}
-                        <ChevronDown className="w-3 h-3 ml-1" />
-                      </Button>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent align="start">
-                      <DropdownMenuItem onClick={() => setEnhancementMode('improve')}>
-                        Improve Clarity
-                      </DropdownMenuItem>
-                      <DropdownMenuItem onClick={() => setEnhancementMode('technical')}>
-                        Add Technical Details
-                      </DropdownMenuItem>
-                      <DropdownMenuItem onClick={() => setEnhancementMode('simplify')}>
-                        Simplify
-                      </DropdownMenuItem>
-                      <DropdownMenuItem onClick={() => setEnhancementMode('acceptance')}>
-                        Add Acceptance Criteria
-                      </DropdownMenuItem>
-                    </DropdownMenuContent>
-                  </DropdownMenu>
+            {/* Enhancement Section */}
+            <EnhanceWithAI
+              value={editingFeature.description}
+              onChange={(enhanced) =>
+                setEditingFeature((prev) => (prev ? { ...prev, description: enhanced } : prev))
+              }
+              onHistoryAdd={({ mode, originalText, enhancedText }) => {
+                setDescriptionChangeSource({ source: 'enhance', mode });
+                setPreEnhancementDescription(originalText);
 
-                  <Button
-                    type="button"
-                    variant="default"
-                    size="sm"
-                    className="h-8 text-xs"
-                    onClick={handleEnhanceDescription}
-                    disabled={!editingFeature.description.trim() || isEnhancing}
-                    loading={isEnhancing}
-                  >
-                    <Sparkles className="w-3 h-3 mr-1" />
-                    Enhance
-                  </Button>
-
-                  <ModelOverrideTrigger
-                    currentModelEntry={enhancementOverride.effectiveModelEntry}
-                    onModelChange={enhancementOverride.setOverride}
-                    phase="enhancementModel"
-                    isOverridden={enhancementOverride.isOverridden}
-                    size="sm"
-                    variant="icon"
-                  />
-                </div>
-              </CollapsibleContent>
-            </Collapsible>
+                // Update local history for real-time display
+                const timestamp = new Date().toISOString();
+                setLocalHistory((prev) => {
+                  const newHistory = [...prev];
+                  // Add original text first (so user can restore to pre-enhancement state)
+                  const lastEntry = prev[prev.length - 1];
+                  if (!lastEntry || lastEntry.description !== originalText) {
+                    newHistory.push({
+                      description: originalText,
+                      timestamp,
+                      source: prev.length === 0 ? 'initial' : 'edit',
+                    });
+                  }
+                  // Add enhanced text
+                  newHistory.push({
+                    description: enhancedText,
+                    timestamp,
+                    source: 'enhance',
+                    enhancementMode: mode,
+                  });
+                  return newHistory;
+                });
+              }}
+            />
           </div>
 
           {/* AI & Execution Section */}
@@ -554,50 +368,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 +435,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/follow-up-dialog.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { createLogger } from '@automaker/utils/logger';
 import {
   Dialog,
   DialogContent,
@@ -17,6 +18,21 @@ import {
 } from '@/components/ui/description-image-dropzone';
 import { MessageSquare } from 'lucide-react';
 import { Feature } from '@/store/app-store';
+import {
+  EnhanceWithAI,
+  EnhancementHistoryButton,
+  type EnhancementMode,
+  type BaseHistoryEntry,
+} from '../shared';
+
+const logger = createLogger('FollowUpDialog');
+
+/**
+ * A single entry in the follow-up prompt history
+ */
+export interface FollowUpHistoryEntry extends BaseHistoryEntry {
+  prompt: string;
+}
 
 interface FollowUpDialogProps {
   open: boolean;
@@ -30,6 +46,10 @@ interface FollowUpDialogProps {
   onPreviewMapChange: (map: ImagePreviewMap) => void;
   onSend: () => void;
   isMaximized: boolean;
+  /** History of prompt versions for restoration */
+  promptHistory?: FollowUpHistoryEntry[];
+  /** Callback to add a new entry to prompt history */
+  onHistoryAdd?: (entry: FollowUpHistoryEntry) => void;
 }
 
 export function FollowUpDialog({
@@ -44,9 +64,11 @@ export function FollowUpDialog({
   onPreviewMapChange,
   onSend,
   isMaximized,
+  promptHistory = [],
+  onHistoryAdd,
 }: FollowUpDialogProps) {
-  const handleClose = (open: boolean) => {
-    if (!open) {
+  const handleClose = (openState: boolean) => {
+    if (!openState) {
       onOpenChange(false);
     }
   };
@@ -77,7 +99,18 @@ export function FollowUpDialog({
         </DialogHeader>
         <div className="space-y-4 py-4 overflow-y-auto flex-1 min-h-0">
           <div className="space-y-2">
-            <Label htmlFor="follow-up-prompt">Instructions</Label>
+            <div className="flex items-center justify-between">
+              <Label htmlFor="follow-up-prompt">Instructions</Label>
+              {/* Version History Button */}
+              <EnhancementHistoryButton
+                history={promptHistory}
+                currentValue={prompt}
+                onRestore={onPromptChange}
+                valueAccessor={(entry) => entry.prompt}
+                title="Prompt History"
+                restoreMessage="Prompt restored from history"
+              />
+            </div>
             <DescriptionImageDropZone
               value={prompt}
               onChange={onPromptChange}
@@ -88,6 +121,33 @@ export function FollowUpDialog({
               onPreviewMapChange={onPreviewMapChange}
             />
           </div>
+
+          {/* Enhancement Section */}
+          <EnhanceWithAI
+            value={prompt}
+            onChange={onPromptChange}
+            onHistoryAdd={({ mode, originalText, enhancedText }) => {
+              const timestamp = new Date().toISOString();
+              // Add original text first (so user can restore to pre-enhancement state)
+              // Only add if it's different from the last history entry
+              const lastEntry = promptHistory[promptHistory.length - 1];
+              if (!lastEntry || lastEntry.prompt !== originalText) {
+                onHistoryAdd?.({
+                  prompt: originalText,
+                  timestamp,
+                  source: promptHistory.length === 0 ? 'initial' : 'edit',
+                });
+              }
+              // Add enhanced text
+              onHistoryAdd?.({
+                prompt: enhancedText,
+                timestamp,
+                source: 'enhance',
+                enhancementMode: mode,
+              });
+            }}
+          />
+
           <p className="text-xs text-muted-foreground">
             The agent will continue from where it left off, using the existing context. You can
             attach screenshots to help explain the issue.

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

@@ -5,6 +5,6 @@ export { CompletedFeaturesModal } from './completed-features-modal';
 export { ArchiveAllVerifiedDialog } from './archive-all-verified-dialog';
 export { DeleteCompletedFeatureDialog } from './delete-completed-feature-dialog';
 export { EditFeatureDialog } from './edit-feature-dialog';
-export { FollowUpDialog } from './follow-up-dialog';
+export { FollowUpDialog, type FollowUpHistoryEntry } from './follow-up-dialog';
 export { PlanApprovalDialog } from './plan-approval-dialog';
 export { MassEditDialog } from './mass-edit-dialog';

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/dialogs/plan-settings-dialog.tsx

@@ -0,0 +1,67 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { GitBranch, Settings2 } from 'lucide-react';
+
+interface PlanSettingsDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  planUseSelectedWorktreeBranch: boolean;
+  onPlanUseSelectedWorktreeBranchChange: (value: boolean) => void;
+}
+
+export function PlanSettingsDialog({
+  open,
+  onOpenChange,
+  planUseSelectedWorktreeBranch,
+  onPlanUseSelectedWorktreeBranchChange,
+}: PlanSettingsDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md" data-testid="plan-settings-dialog">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Settings2 className="w-5 h-5" />
+            Plan Settings
+          </DialogTitle>
+          <DialogDescription>
+            Configure how the Plan feature creates and organizes new features.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 py-4">
+          {/* Use Selected Worktree Branch Setting */}
+          <div className="flex items-start space-x-3 p-3 rounded-lg bg-secondary/50">
+            <div className="flex-1 space-y-1">
+              <div className="flex items-center justify-between">
+                <Label
+                  htmlFor="plan-worktree-branch-toggle"
+                  className="text-sm font-medium cursor-pointer flex items-center gap-2"
+                >
+                  <GitBranch className="w-4 h-4 text-brand-500" />
+                  Use selected worktree branch
+                </Label>
+                <Switch
+                  id="plan-worktree-branch-toggle"
+                  checked={planUseSelectedWorktreeBranch}
+                  onCheckedChange={onPlanUseSelectedWorktreeBranchChange}
+                  data-testid="plan-worktree-branch-toggle"
+                />
+              </div>
+              <p className="text-xs text-muted-foreground leading-relaxed">
+                When enabled, features created via the Plan dialog will be assigned to the currently
+                selected worktree branch. When disabled, features will be added to the main branch.
+              </p>
+            </div>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,67 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { GitBranch, Settings2 } from 'lucide-react';
+
+interface WorktreeSettingsDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  addFeatureUseSelectedWorktreeBranch: boolean;
+  onAddFeatureUseSelectedWorktreeBranchChange: (value: boolean) => void;
+}
+
+export function WorktreeSettingsDialog({
+  open,
+  onOpenChange,
+  addFeatureUseSelectedWorktreeBranch,
+  onAddFeatureUseSelectedWorktreeBranchChange,
+}: WorktreeSettingsDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md" data-testid="worktree-settings-dialog">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Settings2 className="w-5 h-5" />
+            Worktree Settings
+          </DialogTitle>
+          <DialogDescription>
+            Configure how worktrees affect feature creation and organization.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 py-4">
+          {/* Use Selected Worktree Branch Setting */}
+          <div className="flex items-start space-x-3 p-3 rounded-lg bg-secondary/50">
+            <div className="flex-1 space-y-1">
+              <div className="flex items-center justify-between">
+                <Label
+                  htmlFor="worktree-branch-toggle"
+                  className="text-sm font-medium cursor-pointer flex items-center gap-2"
+                >
+                  <GitBranch className="w-4 h-4 text-brand-500" />
+                  Use selected worktree branch
+                </Label>
+                <Switch
+                  id="worktree-branch-toggle"
+                  checked={addFeatureUseSelectedWorktreeBranch}
+                  onCheckedChange={onAddFeatureUseSelectedWorktreeBranchChange}
+                  data-testid="worktree-branch-toggle"
+                />
+              </div>
+              <p className="text-xs text-muted-foreground leading-relaxed">
+                When enabled, the Add Feature dialog will default to custom branch mode with the
+                currently selected worktree branch pre-filled.
+              </p>
+            </div>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

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

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-persistence.ts

@@ -19,7 +19,8 @@ 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',
+      preEnhancementDescription?: string
     ) => {
       if (!currentProject) return;
 
@@ -35,7 +36,8 @@ export function useBoardPersistence({ currentProject }: UseBoardPersistenceProps
           featureId,
           updates,
           descriptionHistorySource,
-          enhancementMode
+          enhancementMode,
+          preEnhancementDescription
         );
         if (result.success && result.feature) {
           updateFeature(result.feature.id, result.feature);

apps/ui/src/components/views/board-view/hooks/use-follow-up-state.ts

@@ -4,13 +4,18 @@ import {
   FeatureImagePath as DescriptionImagePath,
   ImagePreviewMap,
 } from '@/components/ui/description-image-dropzone';
+import type { FollowUpHistoryEntry } from '../dialogs/follow-up-dialog';
 
+/**
+ * Custom hook for managing follow-up dialog state including prompt history
+ */
 export function useFollowUpState() {
   const [showFollowUpDialog, setShowFollowUpDialog] = useState(false);
   const [followUpFeature, setFollowUpFeature] = useState<Feature | null>(null);
   const [followUpPrompt, setFollowUpPrompt] = useState('');
   const [followUpImagePaths, setFollowUpImagePaths] = useState<DescriptionImagePath[]>([]);
   const [followUpPreviewMap, setFollowUpPreviewMap] = useState<ImagePreviewMap>(() => new Map());
+  const [followUpPromptHistory, setFollowUpPromptHistory] = useState<FollowUpHistoryEntry[]>([]);
 
   const resetFollowUpState = useCallback(() => {
     setShowFollowUpDialog(false);
@@ -18,6 +23,7 @@ export function useFollowUpState() {
     setFollowUpPrompt('');
     setFollowUpImagePaths([]);
     setFollowUpPreviewMap(new Map());
+    setFollowUpPromptHistory([]);
   }, []);
 
   const handleFollowUpDialogChange = useCallback(
@@ -31,6 +37,13 @@ export function useFollowUpState() {
     [resetFollowUpState]
   );
 
+  /**
+   * Adds a new entry to the prompt history
+   */
+  const addToPromptHistory = useCallback((entry: FollowUpHistoryEntry) => {
+    setFollowUpPromptHistory((prev) => [...prev, entry]);
+  }, []);
+
   return {
     // State
     showFollowUpDialog,
@@ -38,14 +51,17 @@ export function useFollowUpState() {
     followUpPrompt,
     followUpImagePaths,
     followUpPreviewMap,
+    followUpPromptHistory,
     // Setters
     setShowFollowUpDialog,
     setFollowUpFeature,
     setFollowUpPrompt,
     setFollowUpImagePaths,
     setFollowUpPreviewMap,
+    setFollowUpPromptHistory,
     // Helpers
     resetFollowUpState,
     handleFollowUpDialogChange,
+    addToPromptHistory,
   };
 }

apps/ui/src/components/views/board-view/init-script-indicator.tsx

@@ -0,0 +1,209 @@
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { Terminal, Check, X, Loader2, ChevronDown, ChevronUp } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { useAppStore, type InitScriptState } from '@/store/app-store';
+import { AnsiOutput } from '@/components/ui/ansi-output';
+
+interface InitScriptIndicatorProps {
+  projectPath: string;
+}
+
+interface SingleIndicatorProps {
+  stateKey: string;
+  state: InitScriptState;
+  onDismiss: (key: string) => void;
+  isOnlyOne: boolean; // Whether this is the only indicator shown
+  autoDismiss: boolean; // Whether to auto-dismiss after completion
+}
+
+function SingleIndicator({
+  stateKey,
+  state,
+  onDismiss,
+  isOnlyOne,
+  autoDismiss,
+}: SingleIndicatorProps) {
+  const [showLogs, setShowLogs] = useState(false);
+  const logsEndRef = useRef<HTMLDivElement>(null);
+
+  const { status, output, branch, error } = state;
+
+  // Auto-scroll to bottom when new output arrives
+  useEffect(() => {
+    if (showLogs && logsEndRef.current) {
+      logsEndRef.current.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [output, showLogs]);
+
+  // Auto-expand logs when script starts (only if it's the only one or running)
+  useEffect(() => {
+    if (status === 'running' && isOnlyOne) {
+      setShowLogs(true);
+    }
+  }, [status, isOnlyOne]);
+
+  // Auto-dismiss after completion (5 seconds)
+  useEffect(() => {
+    if (autoDismiss && (status === 'success' || status === 'failed')) {
+      const timer = setTimeout(() => {
+        onDismiss(stateKey);
+      }, 5000);
+      return () => clearTimeout(timer);
+    }
+  }, [status, autoDismiss, stateKey, onDismiss]);
+
+  if (status === 'idle') return null;
+
+  return (
+    <div
+      className={cn(
+        'bg-card border border-border rounded-lg shadow-lg',
+        'min-w-[350px] max-w-[500px]',
+        'animate-in slide-in-from-right-5 duration-200'
+      )}
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between p-3 border-b border-border/50">
+        <div className="flex items-center gap-2">
+          {status === 'running' && <Loader2 className="w-4 h-4 animate-spin text-blue-500" />}
+          {status === 'success' && <Check className="w-4 h-4 text-green-500" />}
+          {status === 'failed' && <X className="w-4 h-4 text-red-500" />}
+          <span className="font-medium text-sm">
+            Init Script{' '}
+            {status === 'running' ? 'Running' : status === 'success' ? 'Completed' : 'Failed'}
+          </span>
+        </div>
+        <div className="flex items-center gap-1">
+          <button
+            onClick={() => setShowLogs(!showLogs)}
+            className="p-1 hover:bg-accent rounded transition-colors"
+            title={showLogs ? 'Hide logs' : 'Show logs'}
+          >
+            {showLogs ? (
+              <ChevronDown className="w-4 h-4 text-muted-foreground" />
+            ) : (
+              <ChevronUp className="w-4 h-4 text-muted-foreground" />
+            )}
+          </button>
+          {status !== 'running' && (
+            <button
+              onClick={() => onDismiss(stateKey)}
+              className="p-1 hover:bg-accent rounded transition-colors"
+              title="Dismiss"
+            >
+              <X className="w-4 h-4 text-muted-foreground" />
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Branch info */}
+      <div className="px-3 py-2 text-xs text-muted-foreground flex items-center gap-2">
+        <Terminal className="w-3.5 h-3.5" />
+        <span>Branch: {branch}</span>
+      </div>
+
+      {/* Logs (collapsible) */}
+      {showLogs && (
+        <div className="border-t border-border/50">
+          <div className="p-3 max-h-[300px] overflow-y-auto">
+            {output.length > 0 ? (
+              <AnsiOutput text={output.join('')} />
+            ) : (
+              <div className="text-xs text-muted-foreground/60 text-center py-2">
+                {status === 'running' ? 'Waiting for output...' : 'No output'}
+              </div>
+            )}
+            {error && <div className="mt-2 text-red-500 text-xs font-medium">Error: {error}</div>}
+            <div ref={logsEndRef} />
+          </div>
+        </div>
+      )}
+
+      {/* Status bar for completed states */}
+      {status !== 'running' && (
+        <div
+          className={cn(
+            'px-3 py-2 text-xs',
+            status === 'success' ? 'bg-green-500/10 text-green-600' : 'bg-red-500/10 text-red-600'
+          )}
+        >
+          {status === 'success'
+            ? 'Initialization completed successfully'
+            : 'Initialization failed - worktree is still usable'}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function InitScriptIndicator({ projectPath }: InitScriptIndicatorProps) {
+  const getInitScriptStatesForProject = useAppStore((s) => s.getInitScriptStatesForProject);
+  const clearInitScriptState = useAppStore((s) => s.clearInitScriptState);
+  const getAutoDismissInitScriptIndicator = useAppStore((s) => s.getAutoDismissInitScriptIndicator);
+  const [dismissedKeys, setDismissedKeys] = useState<Set<string>>(new Set());
+
+  // Get auto-dismiss setting
+  const autoDismiss = getAutoDismissInitScriptIndicator(projectPath);
+
+  // Get all init script states for this project
+  const allStates = getInitScriptStatesForProject(projectPath);
+
+  // Filter out dismissed and idle states
+  const activeStates = allStates.filter(
+    ({ key, state }) => !dismissedKeys.has(key) && state.status !== 'idle'
+  );
+
+  // Reset dismissed keys when a new script starts for a branch
+  useEffect(() => {
+    const runningKeys = allStates
+      .filter(({ state }) => state.status === 'running')
+      .map(({ key }) => key);
+
+    if (runningKeys.length > 0) {
+      setDismissedKeys((prev) => {
+        const newSet = new Set(prev);
+        runningKeys.forEach((key) => newSet.delete(key));
+        return newSet;
+      });
+    }
+  }, [allStates]);
+
+  const handleDismiss = useCallback(
+    (key: string) => {
+      setDismissedKeys((prev) => new Set(prev).add(key));
+      // Extract branch from key (format: "projectPath::branch")
+      const branch = key.split('::')[1];
+      if (branch) {
+        // Clear state after a delay to allow for future scripts
+        setTimeout(() => {
+          clearInitScriptState(projectPath, branch);
+        }, 100);
+      }
+    },
+    [projectPath, clearInitScriptState]
+  );
+
+  if (activeStates.length === 0) return null;
+
+  return (
+    <div
+      className={cn(
+        'fixed bottom-4 right-4 z-50 flex flex-col gap-2',
+        'max-h-[calc(100vh-120px)] overflow-y-auto',
+        'scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent'
+      )}
+    >
+      {activeStates.map(({ key, state }) => (
+        <SingleIndicator
+          key={key}
+          stateKey={key}
+          state={state}
+          onDismiss={handleDismiss}
+          isOnlyOne={activeStates.length === 1}
+          autoDismiss={autoDismiss}
+        />
+      ))}
+    </div>
+  );
+}

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

@@ -2,9 +2,9 @@ import { useMemo } from 'react';
 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 { KanbanColumn, KanbanCard, EmptyStateCard } from './components';
+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
@@ -50,6 +51,12 @@ interface KanbanBoardProps {
   selectedFeatureIds?: Set<string>;
   onToggleFeatureSelection?: (featureId: string) => void;
   onToggleSelectionMode?: () => void;
+  // Empty state action props
+  onAiSuggest?: () => void;
+  /** Whether currently dragging (hides empty states during drag) */
+  isDragging?: boolean;
+  /** Whether the board is in read-only mode */
+  isReadOnly?: boolean;
 }
 
 export function KanbanBoard({
@@ -78,22 +85,30 @@ export function KanbanBoard({
   featuresWithContext,
   runningAutoTasks,
   onArchiveAllVerified,
+  onAddFeature,
   pipelineConfig,
   onOpenPipelineSettings,
   isSelectionMode = false,
   selectedFeatureIds = new Set(),
   onToggleFeatureSelection,
   onToggleSelectionMode,
+  onAiSuggest,
+  isDragging = false,
+  isReadOnly = false,
 }: KanbanBoardProps) {
   // 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 +142,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"
@@ -171,11 +198,48 @@ 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)}
                   strategy={verticalListSortingStrategy}
                 >
+                  {/* Empty state card when column has no features */}
+                  {columnFeatures.length === 0 && !isDragging && (
+                    <EmptyStateCard
+                      columnId={column.id}
+                      columnTitle={column.title}
+                      addFeatureShortcut={addFeatureShortcut}
+                      isReadOnly={isReadOnly}
+                      onAiSuggest={column.id === 'backlog' ? onAiSuggest : undefined}
+                      opacity={backgroundSettings.cardOpacity}
+                      glassmorphism={backgroundSettings.cardGlassmorphism}
+                      customConfig={
+                        column.isPipelineStep
+                          ? {
+                              title: `${column.title} Empty`,
+                              description: `Features will appear here during the ${column.title.toLowerCase()} phase of the pipeline.`,
+                            }
+                          : undefined
+                      }
+                    />
+                  )}
                   {columnFeatures.map((feature, index) => {
                     // Calculate shortcut key for in-progress cards (first 10 get 1-9, 0)
                     let shortcutKey: string | undefined;

apps/ui/src/components/views/board-view/shared/enhancement/enhance-with-ai.tsx

@@ -0,0 +1,152 @@
+import { useState } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import { Button } from '@/components/ui/button';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Sparkles, ChevronDown, ChevronRight } from 'lucide-react';
+import { toast } from 'sonner';
+import { getElectronAPI } from '@/lib/electron';
+import { ModelOverrideTrigger, useModelOverride } from '@/components/shared';
+import { EnhancementMode, ENHANCEMENT_MODE_LABELS } from './enhancement-constants';
+
+const logger = createLogger('EnhanceWithAI');
+
+interface EnhanceWithAIProps {
+  /** Current text value to enhance */
+  value: string;
+  /** Callback when text is enhanced */
+  onChange: (enhancedText: string) => void;
+  /** Optional callback to track enhancement in history */
+  onHistoryAdd?: (entry: {
+    mode: EnhancementMode;
+    originalText: string;
+    enhancedText: string;
+  }) => void;
+  /** Disable the enhancement feature */
+  disabled?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+/**
+ * Reusable "Enhance with AI" component
+ *
+ * Provides AI-powered text enhancement with multiple modes:
+ * - Improve Clarity
+ * - Add Technical Details
+ * - Simplify
+ * - Add Acceptance Criteria
+ * - User Experience
+ *
+ * Used in Add Feature, Edit Feature, and Follow-Up dialogs.
+ */
+export function EnhanceWithAI({
+  value,
+  onChange,
+  onHistoryAdd,
+  disabled = false,
+  className,
+}: EnhanceWithAIProps) {
+  const [isEnhancing, setIsEnhancing] = useState(false);
+  const [enhancementMode, setEnhancementMode] = useState<EnhancementMode>('improve');
+  const [enhanceOpen, setEnhanceOpen] = useState(false);
+
+  // Enhancement model override
+  const enhancementOverride = useModelOverride({ phase: 'enhancementModel' });
+
+  const handleEnhance = async () => {
+    if (!value.trim() || isEnhancing || disabled) return;
+
+    setIsEnhancing(true);
+    try {
+      const api = getElectronAPI();
+      const result = await api.enhancePrompt?.enhance(
+        value,
+        enhancementMode,
+        enhancementOverride.effectiveModel,
+        enhancementOverride.effectiveModelEntry.thinkingLevel
+      );
+
+      if (result?.success && result.enhancedText) {
+        const originalText = value;
+        const enhancedText = result.enhancedText;
+        onChange(enhancedText);
+
+        // Track in history if callback provided (includes original for restoration)
+        onHistoryAdd?.({ mode: enhancementMode, originalText, enhancedText });
+
+        toast.success('Enhanced successfully!');
+      } else {
+        toast.error(result?.error || 'Failed to enhance');
+      }
+    } catch (error) {
+      logger.error('Enhancement failed:', error);
+      toast.error('Failed to enhance');
+    } finally {
+      setIsEnhancing(false);
+    }
+  };
+
+  return (
+    <Collapsible open={enhanceOpen} onOpenChange={setEnhanceOpen} className={className}>
+      <CollapsibleTrigger asChild>
+        <button
+          className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors w-full py-1"
+          disabled={disabled}
+        >
+          {enhanceOpen ? <ChevronDown className="w-4 h-4" /> : <ChevronRight className="w-4 h-4" />}
+          <Sparkles className="w-4 h-4" />
+          <span>Enhance with AI</span>
+        </button>
+      </CollapsibleTrigger>
+      <CollapsibleContent className="pt-3">
+        <div className="flex flex-wrap items-center gap-2 pl-6">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline" size="sm" className="h-8 text-xs" disabled={disabled}>
+                {ENHANCEMENT_MODE_LABELS[enhancementMode]}
+                <ChevronDown className="w-3 h-3 ml-1" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start">
+              {(Object.entries(ENHANCEMENT_MODE_LABELS) as [EnhancementMode, string][]).map(
+                ([mode, label]) => (
+                  <DropdownMenuItem key={mode} onClick={() => setEnhancementMode(mode)}>
+                    {label}
+                  </DropdownMenuItem>
+                )
+              )}
+            </DropdownMenuContent>
+          </DropdownMenu>
+
+          <Button
+            type="button"
+            variant="default"
+            size="sm"
+            className="h-8 text-xs"
+            onClick={handleEnhance}
+            disabled={!value.trim() || isEnhancing || disabled}
+            loading={isEnhancing}
+          >
+            <Sparkles className="w-3 h-3 mr-1" />
+            Enhance
+          </Button>
+
+          <ModelOverrideTrigger
+            currentModelEntry={enhancementOverride.effectiveModelEntry}
+            onModelChange={enhancementOverride.setOverride}
+            phase="enhancementModel"
+            isOverridden={enhancementOverride.isOverridden}
+            size="sm"
+            variant="icon"
+          />
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}