Merge main into massive-terminal-upgrade

Resolves merge conflicts:
- apps/server/src/routes/terminal/common.ts: Keep randomBytes import, use @automaker/utils for createLogger
- apps/ui/eslint.config.mjs: Use main's explicit globals list with XMLHttpRequest and MediaQueryListEvent additions
- apps/ui/src/components/views/terminal-view.tsx: Keep our terminal improvements (killAllSessions, beforeunload, better error handling)
- apps/ui/src/config/terminal-themes.ts: Keep our search highlight colors for all themes
- apps/ui/src/store/app-store.ts: Keep our terminal settings persistence improvements (merge function)

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

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

apps/ui/tests/utils/components/toasts.ts

@@ -1,5 +1,4 @@
-import { Page, Locator } from "@playwright/test";
-import { waitForElement } from "../core/waiting";
+import { Page, Locator } from '@playwright/test';
 
 /**
  * Wait for a toast notification with specific text to appear
@@ -12,7 +11,7 @@ export async function waitForToast(
   const toast = page.locator(`[data-sonner-toast]:has-text("${text}")`).first();
   await toast.waitFor({
     timeout: options?.timeout ?? 5000,
-    state: "visible",
+    state: 'visible',
   });
   return toast;
 }
@@ -32,19 +31,21 @@ export async function waitForErrorToast(
 
   if (titleText) {
     // First try specific error type, then fallback to any toast with text
-    const errorToast = page.locator(
-      `[data-sonner-toast][data-type="error"]:has-text("${titleText}"), [data-sonner-toast]:has-text("${titleText}")`
-    ).first();
+    const errorToast = page
+      .locator(
+        `[data-sonner-toast][data-type="error"]:has-text("${titleText}"), [data-sonner-toast]:has-text("${titleText}")`
+      )
+      .first();
     await errorToast.waitFor({
       timeout,
-      state: "visible",
+      state: 'visible',
     });
     return errorToast;
   } else {
     const errorToast = page.locator('[data-sonner-toast][data-type="error"]').first();
     await errorToast.waitFor({
       timeout,
-      state: "visible",
+      state: 'visible',
     });
     return errorToast;
   }
@@ -53,10 +54,7 @@ export async function waitForErrorToast(
 /**
  * Check if an error toast is visible
  */
-export async function isErrorToastVisible(
-  page: Page,
-  titleText?: string
-): Promise<boolean> {
+export async function isErrorToastVisible(page: Page, titleText?: string): Promise<boolean> {
   const toastSelector = titleText
     ? `[data-sonner-toast][data-type="error"]:has-text("${titleText}")`
     : '[data-sonner-toast][data-type="error"]';
@@ -81,7 +79,7 @@ export async function waitForSuccessToast(
   const toast = page.locator(toastSelector).first();
   await toast.waitFor({
     timeout: options?.timeout ?? 5000,
-    state: "visible",
+    state: 'visible',
   });
   return toast;
 }

apps/ui/tests/utils/git/worktree.ts

@@ -3,12 +3,12 @@
  * Provides helpers for creating test git repos and managing worktrees
  */
 
-import * as fs from "fs";
-import * as path from "path";
-import { exec } from "child_process";
-import { promisify } from "util";
-import { Page } from "@playwright/test";
-import { sanitizeBranchName, TIMEOUTS } from "../core/constants";
+import * as fs from 'fs';
+import * as path from 'path';
+import { exec } from 'child_process';
+import { promisify } from 'util';
+import { Page } from '@playwright/test';
+import { sanitizeBranchName, TIMEOUTS } from '../core/constants';
 
 const execAsync = promisify(exec);
 
@@ -40,8 +40,8 @@ export interface FeatureData {
  */
 function getWorkspaceRoot(): string {
   const cwd = process.cwd();
-  if (cwd.includes("apps/ui")) {
-    return path.resolve(cwd, "../..");
+  if (cwd.includes('apps/ui')) {
+    return path.resolve(cwd, '../..');
   }
   return cwd;
 }
@@ -49,9 +49,9 @@ function getWorkspaceRoot(): string {
 /**
  * Create a unique temp directory path for tests
  */
-export function createTempDirPath(prefix: string = "temp-worktree-tests"): string {
+export function createTempDirPath(prefix: string = 'temp-worktree-tests'): string {
   const uniqueId = `${process.pid}-${Math.random().toString(36).substring(2, 9)}`;
-  return path.join(getWorkspaceRoot(), "test", `${prefix}-${uniqueId}`);
+  return path.join(getWorkspaceRoot(), 'test', `${prefix}-${uniqueId}`);
 }
 
 /**
@@ -59,7 +59,7 @@ export function createTempDirPath(prefix: string = "temp-worktree-tests"): strin
  */
 export function getWorktreePath(projectPath: string, branchName: string): string {
   const sanitizedName = sanitizeBranchName(branchName);
-  return path.join(projectPath, ".worktrees", sanitizedName);
+  return path.join(projectPath, '.worktrees', sanitizedName);
 }
 
 // ============================================================================
@@ -79,25 +79,25 @@ export async function createTestGitRepo(tempDir: string): Promise<TestRepo> {
   fs.mkdirSync(tmpDir, { recursive: true });
 
   // Initialize git repo
-  await execAsync("git init", { cwd: tmpDir });
+  await execAsync('git init', { cwd: tmpDir });
   await execAsync('git config user.email "test@example.com"', { cwd: tmpDir });
   await execAsync('git config user.name "Test User"', { cwd: tmpDir });
 
   // Create initial commit
-  fs.writeFileSync(path.join(tmpDir, "README.md"), "# Test Project\n");
-  await execAsync("git add .", { cwd: tmpDir });
+  fs.writeFileSync(path.join(tmpDir, 'README.md'), '# Test Project\n');
+  await execAsync('git add .', { cwd: tmpDir });
   await execAsync('git commit -m "Initial commit"', { cwd: tmpDir });
 
   // Create main branch explicitly
-  await execAsync("git branch -M main", { cwd: tmpDir });
+  await execAsync('git branch -M main', { cwd: tmpDir });
 
   // Create .automaker directories
-  const automakerDir = path.join(tmpDir, ".automaker");
-  const featuresDir = path.join(automakerDir, "features");
+  const automakerDir = path.join(tmpDir, '.automaker');
+  const featuresDir = path.join(automakerDir, 'features');
   fs.mkdirSync(featuresDir, { recursive: true });
 
   // Create empty categories.json to avoid ENOENT errors in tests
-  fs.writeFileSync(path.join(automakerDir, "categories.json"), "[]");
+  fs.writeFileSync(path.join(automakerDir, 'categories.json'), '[]');
 
   return {
     path: tmpDir,
@@ -113,16 +113,16 @@ export async function createTestGitRepo(tempDir: string): Promise<TestRepo> {
 export async function cleanupTestRepo(repoPath: string): Promise<void> {
   try {
     // Remove all worktrees first
-    const { stdout } = await execAsync("git worktree list --porcelain", {
+    const { stdout } = await execAsync('git worktree list --porcelain', {
       cwd: repoPath,
-    }).catch(() => ({ stdout: "" }));
+    }).catch(() => ({ stdout: '' }));
 
     const worktrees = stdout
-      .split("\n\n")
+      .split('\n\n')
       .slice(1) // Skip main worktree
       .map((block) => {
-        const pathLine = block.split("\n").find((line) => line.startsWith("worktree "));
-        return pathLine ? pathLine.replace("worktree ", "") : null;
+        const pathLine = block.split('\n').find((line) => line.startsWith('worktree '));
+        return pathLine ? pathLine.replace('worktree ', '') : null;
       })
       .filter(Boolean);
 
@@ -139,7 +139,7 @@ export async function cleanupTestRepo(repoPath: string): Promise<void> {
     // Remove the repository
     fs.rmSync(repoPath, { recursive: true, force: true });
   } catch (error) {
-    console.error("Failed to cleanup test repo:", error);
+    console.error('Failed to cleanup test repo:', error);
   }
 }
 
@@ -171,18 +171,18 @@ export async function gitExec(
  */
 export async function listWorktrees(repoPath: string): Promise<string[]> {
   try {
-    const { stdout } = await execAsync("git worktree list --porcelain", {
+    const { stdout } = await execAsync('git worktree list --porcelain', {
       cwd: repoPath,
     });
 
     return stdout
-      .split("\n\n")
+      .split('\n\n')
       .slice(1) // Skip main worktree
       .map((block) => {
-        const pathLine = block.split("\n").find((line) => line.startsWith("worktree "));
+        const pathLine = block.split('\n').find((line) => line.startsWith('worktree '));
         if (!pathLine) return null;
         // Normalize path separators to OS native (git on Windows returns forward slashes)
-        const worktreePath = pathLine.replace("worktree ", "");
+        const worktreePath = pathLine.replace('worktree ', '');
         return path.normalize(worktreePath);
       })
       .filter(Boolean) as string[];
@@ -195,10 +195,10 @@ export async function listWorktrees(repoPath: string): Promise<string[]> {
  * Get list of git branches
  */
 export async function listBranches(repoPath: string): Promise<string[]> {
-  const { stdout } = await execAsync("git branch --list", { cwd: repoPath });
+  const { stdout } = await execAsync('git branch --list', { cwd: repoPath });
   return stdout
-    .split("\n")
-    .map((line) => line.trim().replace(/^[*+]\s*/, ""))
+    .split('\n')
+    .map((line) => line.trim().replace(/^[*+]\s*/, ''))
     .filter(Boolean);
 }
 
@@ -206,7 +206,7 @@ export async function listBranches(repoPath: string): Promise<string[]> {
  * Get the current branch name
  */
 export async function getCurrentBranch(repoPath: string): Promise<string> {
-  const { stdout } = await execAsync("git rev-parse --abbrev-ref HEAD", { cwd: repoPath });
+  const { stdout } = await execAsync('git rev-parse --abbrev-ref HEAD', { cwd: repoPath });
   return stdout.trim();
 }
 
@@ -233,7 +233,7 @@ export async function createWorktreeDirectly(
   worktreePath?: string
 ): Promise<string> {
   const sanitizedName = sanitizeBranchName(branchName);
-  const targetPath = worktreePath || path.join(repoPath, ".worktrees", sanitizedName);
+  const targetPath = worktreePath || path.join(repoPath, '.worktrees', sanitizedName);
 
   await execAsync(`git worktree add "${targetPath}" -b ${branchName}`, { cwd: repoPath });
   return targetPath;
@@ -257,7 +257,7 @@ export async function commitFile(
  * Get the latest commit message
  */
 export async function getLatestCommitMessage(repoPath: string): Promise<string> {
-  const { stdout } = await execAsync("git log --oneline -1", { cwd: repoPath });
+  const { stdout } = await execAsync('git log --oneline -1', { cwd: repoPath });
   return stdout.trim();
 }
 
@@ -268,32 +268,36 @@ export async function getLatestCommitMessage(repoPath: string): Promise<string>
 /**
  * Create a feature file in the test repo
  */
-export function createTestFeature(repoPath: string, featureId: string, featureData: FeatureData): void {
-  const featuresDir = path.join(repoPath, ".automaker", "features");
+export function createTestFeature(
+  repoPath: string,
+  featureId: string,
+  featureData: FeatureData
+): void {
+  const featuresDir = path.join(repoPath, '.automaker', 'features');
   const featureDir = path.join(featuresDir, featureId);
 
   fs.mkdirSync(featureDir, { recursive: true });
-  fs.writeFileSync(path.join(featureDir, "feature.json"), JSON.stringify(featureData, null, 2));
+  fs.writeFileSync(path.join(featureDir, 'feature.json'), JSON.stringify(featureData, null, 2));
 }
 
 /**
  * Read a feature file from the test repo
  */
 export function readTestFeature(repoPath: string, featureId: string): FeatureData | null {
-  const featureFilePath = path.join(repoPath, ".automaker", "features", featureId, "feature.json");
+  const featureFilePath = path.join(repoPath, '.automaker', 'features', featureId, 'feature.json');
 
   if (!fs.existsSync(featureFilePath)) {
     return null;
   }
 
-  return JSON.parse(fs.readFileSync(featureFilePath, "utf-8"));
+  return JSON.parse(fs.readFileSync(featureFilePath, 'utf-8'));
 }
 
 /**
  * List all feature directories in the test repo
  */
 export function listTestFeatures(repoPath: string): string[] {
-  const featuresDir = path.join(repoPath, ".automaker", "features");
+  const featuresDir = path.join(repoPath, '.automaker', 'features');
 
   if (!fs.existsSync(featuresDir)) {
     return [];
@@ -312,8 +316,8 @@ export function listTestFeatures(repoPath: string): string[] {
 export async function setupProjectWithPath(page: Page, projectPath: string): Promise<void> {
   await page.addInitScript((pathArg: string) => {
     const mockProject = {
-      id: "test-project-worktree",
-      name: "Worktree Test Project",
+      id: 'test-project-worktree',
+      name: 'Worktree Test Project',
       path: pathArg,
       lastOpened: new Date().toISOString(),
     };
@@ -322,36 +326,36 @@ export async function setupProjectWithPath(page: Page, projectPath: string): Pro
       state: {
         projects: [mockProject],
         currentProject: mockProject,
-        currentView: "board",
-        theme: "dark",
+        currentView: 'board',
+        theme: 'dark',
         sidebarOpen: true,
-        apiKeys: { anthropic: "", google: "" },
+        apiKeys: { anthropic: '', google: '' },
         chatSessions: [],
         chatHistoryOpen: false,
         maxConcurrency: 3,
         aiProfiles: [],
         useWorktrees: true, // Enable worktree feature for tests
         currentWorktreeByProject: {
-          [pathArg]: { path: null, branch: "main" }, // Initialize to main branch
+          [pathArg]: { path: null, branch: 'main' }, // Initialize to main branch
         },
         worktreesByProject: {},
       },
       version: 2, // Must match app-store.ts persist version
     };
 
-    localStorage.setItem("automaker-storage", JSON.stringify(mockState));
+    localStorage.setItem('automaker-storage', JSON.stringify(mockState));
 
     // Mark setup as complete to skip the setup wizard
     const setupState = {
       state: {
         isFirstRun: false,
         setupComplete: true,
-        currentStep: "complete",
+        currentStep: 'complete',
         skipClaudeSetup: false,
       },
       version: 2, // Must match app-store.ts persist version
     };
-    localStorage.setItem("automaker-setup", JSON.stringify(setupState));
+    localStorage.setItem('automaker-setup', JSON.stringify(setupState));
   }, projectPath);
 }
 
@@ -359,11 +363,14 @@ export async function setupProjectWithPath(page: Page, projectPath: string): Pro
  * Set up localStorage with a project pointing to a test repo with worktrees DISABLED
  * Use this to test scenarios where the worktree feature flag is off
  */
-export async function setupProjectWithPathNoWorktrees(page: Page, projectPath: string): Promise<void> {
+export async function setupProjectWithPathNoWorktrees(
+  page: Page,
+  projectPath: string
+): Promise<void> {
   await page.addInitScript((pathArg: string) => {
     const mockProject = {
-      id: "test-project-no-worktree",
-      name: "Test Project (No Worktrees)",
+      id: 'test-project-no-worktree',
+      name: 'Test Project (No Worktrees)',
       path: pathArg,
       lastOpened: new Date().toISOString(),
     };
@@ -372,10 +379,10 @@ export async function setupProjectWithPathNoWorktrees(page: Page, projectPath: s
       state: {
         projects: [mockProject],
         currentProject: mockProject,
-        currentView: "board",
-        theme: "dark",
+        currentView: 'board',
+        theme: 'dark',
         sidebarOpen: true,
-        apiKeys: { anthropic: "", google: "" },
+        apiKeys: { anthropic: '', google: '' },
         chatSessions: [],
         chatHistoryOpen: false,
         maxConcurrency: 3,
@@ -387,19 +394,19 @@ export async function setupProjectWithPathNoWorktrees(page: Page, projectPath: s
       version: 2, // Must match app-store.ts persist version
     };
 
-    localStorage.setItem("automaker-storage", JSON.stringify(mockState));
+    localStorage.setItem('automaker-storage', JSON.stringify(mockState));
 
     // Mark setup as complete to skip the setup wizard
     const setupState = {
       state: {
         isFirstRun: false,
         setupComplete: true,
-        currentStep: "complete",
+        currentStep: 'complete',
         skipClaudeSetup: false,
       },
       version: 2, // Must match app-store.ts persist version
     };
-    localStorage.setItem("automaker-setup", JSON.stringify(setupState));
+    localStorage.setItem('automaker-setup', JSON.stringify(setupState));
   }, projectPath);
 }
 
@@ -408,11 +415,14 @@ export async function setupProjectWithPathNoWorktrees(page: Page, projectPath: s
  * The currentWorktreeByProject points to a worktree path that no longer exists
  * This simulates the scenario where a user previously selected a worktree that was later deleted
  */
-export async function setupProjectWithStaleWorktree(page: Page, projectPath: string): Promise<void> {
+export async function setupProjectWithStaleWorktree(
+  page: Page,
+  projectPath: string
+): Promise<void> {
   await page.addInitScript((pathArg: string) => {
     const mockProject = {
-      id: "test-project-stale-worktree",
-      name: "Stale Worktree Test Project",
+      id: 'test-project-stale-worktree',
+      name: 'Stale Worktree Test Project',
       path: pathArg,
       lastOpened: new Date().toISOString(),
     };
@@ -421,10 +431,10 @@ export async function setupProjectWithStaleWorktree(page: Page, projectPath: str
       state: {
         projects: [mockProject],
         currentProject: mockProject,
-        currentView: "board",
-        theme: "dark",
+        currentView: 'board',
+        theme: 'dark',
         sidebarOpen: true,
-        apiKeys: { anthropic: "", google: "" },
+        apiKeys: { anthropic: '', google: '' },
         chatSessions: [],
         chatHistoryOpen: false,
         maxConcurrency: 3,
@@ -432,26 +442,26 @@ export async function setupProjectWithStaleWorktree(page: Page, projectPath: str
         useWorktrees: true, // Enable worktree feature for tests
         currentWorktreeByProject: {
           // This is STALE data - pointing to a worktree path that doesn't exist
-          [pathArg]: { path: "/non/existent/worktree/path", branch: "feature/deleted-branch" },
+          [pathArg]: { path: '/non/existent/worktree/path', branch: 'feature/deleted-branch' },
         },
         worktreesByProject: {},
       },
       version: 2, // Must match app-store.ts persist version
     };
 
-    localStorage.setItem("automaker-storage", JSON.stringify(mockState));
+    localStorage.setItem('automaker-storage', JSON.stringify(mockState));
 
     // Mark setup as complete to skip the setup wizard
     const setupState = {
       state: {
         isFirstRun: false,
         setupComplete: true,
-        currentStep: "complete",
+        currentStep: 'complete',
         skipClaudeSetup: false,
       },
       version: 2, // Must match app-store.ts persist version
     };
-    localStorage.setItem("automaker-setup", JSON.stringify(setupState));
+    localStorage.setItem('automaker-setup', JSON.stringify(setupState));
   }, projectPath);
 }
 
@@ -477,8 +487,6 @@ export async function waitForBoardView(page: Page): Promise<void> {
   await page.waitForFunction(
     () => {
       const boardView = document.querySelector('[data-testid="board-view"]');
-      const noProject = document.querySelector('[data-testid="board-view-no-project"]');
-      const loading = document.querySelector('[data-testid="board-view-loading"]');
       // Return true only when board-view is visible (store hydrated with project)
       return boardView !== null;
     },
@@ -490,8 +498,10 @@ export async function waitForBoardView(page: Page): Promise<void> {
  * Wait for the worktree selector to be visible
  */
 export async function waitForWorktreeSelector(page: Page): Promise<void> {
-  await page.waitForSelector('[data-testid="worktree-selector"]', { timeout: TIMEOUTS.medium }).catch(() => {
-    // Fallback: wait for "Branch:" text
-    return page.getByText("Branch:").waitFor({ timeout: TIMEOUTS.medium });
-  });
+  await page
+    .waitForSelector('[data-testid="worktree-selector"]', { timeout: TIMEOUTS.medium })
+    .catch(() => {
+      // Fallback: wait for "Branch:" text
+      return page.getByText('Branch:').waitFor({ timeout: TIMEOUTS.medium });
+    });
 }

apps/ui/tests/utils/navigation/views.ts

@@ -1,6 +1,6 @@
-import { Page } from "@playwright/test";
-import { clickElement } from "../core/interactions";
-import { waitForElement } from "../core/waiting";
+import { Page } from '@playwright/test';
+import { clickElement } from '../core/interactions';
+import { waitForElement } from '../core/waiting';
 
 /**
  * Navigate to the board/kanban view
@@ -8,11 +8,11 @@ import { waitForElement } from "../core/waiting";
  */
 export async function navigateToBoard(page: Page): Promise<void> {
   // Navigate directly to /board route
-  await page.goto("/board");
-  await page.waitForLoadState("networkidle");
+  await page.goto('/board');
+  await page.waitForLoadState('networkidle');
 
   // Wait for the board view to be visible
-  await waitForElement(page, "board-view", { timeout: 10000 });
+  await waitForElement(page, 'board-view', { timeout: 10000 });
 }
 
 /**
@@ -21,11 +21,11 @@ export async function navigateToBoard(page: Page): Promise<void> {
  */
 export async function navigateToContext(page: Page): Promise<void> {
   // Navigate directly to /context route
-  await page.goto("/context");
-  await page.waitForLoadState("networkidle");
+  await page.goto('/context');
+  await page.waitForLoadState('networkidle');
 
   // Wait for the context view to be visible
-  await waitForElement(page, "context-view", { timeout: 10000 });
+  await waitForElement(page, 'context-view', { timeout: 10000 });
 }
 
 /**
@@ -34,11 +34,28 @@ export async function navigateToContext(page: Page): Promise<void> {
  */
 export async function navigateToSpec(page: Page): Promise<void> {
   // Navigate directly to /spec route
-  await page.goto("/spec");
-  await page.waitForLoadState("networkidle");
+  await page.goto('/spec');
+  await page.waitForLoadState('networkidle');
 
-  // Wait for the spec view to be visible
-  await waitForElement(page, "spec-view", { timeout: 10000 });
+  // Wait for loading state to complete first (if present)
+  const loadingElement = page.locator('[data-testid="spec-view-loading"]');
+  try {
+    const loadingVisible = await loadingElement.isVisible({ timeout: 2000 });
+    if (loadingVisible) {
+      // Wait for loading to disappear (spec view or empty state will appear)
+      await loadingElement.waitFor({ state: 'hidden', timeout: 10000 });
+    }
+  } catch {
+    // Loading element not found or already hidden, continue
+  }
+
+  // Wait for either the main spec view or empty state to be visible
+  // The spec-view element appears when loading is complete and spec exists
+  // The spec-view-empty element appears when loading is complete and spec doesn't exist
+  await Promise.race([
+    waitForElement(page, 'spec-view', { timeout: 10000 }).catch(() => null),
+    waitForElement(page, 'spec-view-empty', { timeout: 10000 }).catch(() => null),
+  ]);
 }
 
 /**
@@ -47,11 +64,11 @@ export async function navigateToSpec(page: Page): Promise<void> {
  */
 export async function navigateToAgent(page: Page): Promise<void> {
   // Navigate directly to /agent route
-  await page.goto("/agent");
-  await page.waitForLoadState("networkidle");
+  await page.goto('/agent');
+  await page.waitForLoadState('networkidle');
 
   // Wait for the agent view to be visible
-  await waitForElement(page, "agent-view", { timeout: 10000 });
+  await waitForElement(page, 'agent-view', { timeout: 10000 });
 }
 
 /**
@@ -60,11 +77,11 @@ export async function navigateToAgent(page: Page): Promise<void> {
  */
 export async function navigateToSettings(page: Page): Promise<void> {
   // Navigate directly to /settings route
-  await page.goto("/settings");
-  await page.waitForLoadState("networkidle");
+  await page.goto('/settings');
+  await page.waitForLoadState('networkidle');
 
   // Wait for the settings view to be visible
-  await waitForElement(page, "settings-view", { timeout: 10000 });
+  await waitForElement(page, 'settings-view', { timeout: 10000 });
 }
 
 /**
@@ -73,31 +90,27 @@ export async function navigateToSettings(page: Page): Promise<void> {
  */
 export async function navigateToSetup(page: Page): Promise<void> {
   // Dynamic import to avoid circular dependency
-  const { setupFirstRun } = await import("../project/setup");
+  const { setupFirstRun } = await import('../project/setup');
   await setupFirstRun(page);
-  await page.goto("/");
-  await page.waitForLoadState("networkidle");
-  await waitForElement(page, "setup-view", { timeout: 10000 });
+  await page.goto('/');
+  await page.waitForLoadState('networkidle');
+  await waitForElement(page, 'setup-view', { timeout: 10000 });
 }
 
 /**
  * Navigate to the welcome view (clear project selection)
  */
 export async function navigateToWelcome(page: Page): Promise<void> {
-  await page.goto("/");
-  await page.waitForLoadState("networkidle");
-  await waitForElement(page, "welcome-view", { timeout: 10000 });
+  await page.goto('/');
+  await page.waitForLoadState('networkidle');
+  await waitForElement(page, 'welcome-view', { timeout: 10000 });
 }
 
 /**
  * Navigate to a specific view using the sidebar navigation
  */
-export async function navigateToView(
-  page: Page,
-  viewId: string
-): Promise<void> {
-  const navSelector =
-    viewId === "settings" ? "settings-button" : `nav-${viewId}`;
+export async function navigateToView(page: Page, viewId: string): Promise<void> {
+  const navSelector = viewId === 'settings' ? 'settings-button' : `nav-${viewId}`;
   await clickElement(page, navSelector);
   await page.waitForTimeout(100);
 }
@@ -108,7 +121,7 @@ export async function navigateToView(
 export async function getCurrentView(page: Page): Promise<string | null> {
   // Get the current view from zustand store via localStorage
   const storage = await page.evaluate(() => {
-    const item = localStorage.getItem("automaker-storage");
+    const item = localStorage.getItem('automaker-storage');
     return item ? JSON.parse(item) : null;
   });
 

apps/ui/tests/utils/views/board.ts

@@ -1,32 +1,23 @@
-import { Page, Locator } from "@playwright/test";
+import { Page, Locator } from '@playwright/test';
 
 /**
  * Get a kanban card by feature ID
  */
-export async function getKanbanCard(
-  page: Page,
-  featureId: string
-): Promise<Locator> {
+export async function getKanbanCard(page: Page, featureId: string): Promise<Locator> {
   return page.locator(`[data-testid="kanban-card-${featureId}"]`);
 }
 
 /**
  * Get a kanban column by its ID
  */
-export async function getKanbanColumn(
-  page: Page,
-  columnId: string
-): Promise<Locator> {
+export async function getKanbanColumn(page: Page, columnId: string): Promise<Locator> {
   return page.locator(`[data-testid="kanban-column-${columnId}"]`);
 }
 
 /**
  * Get the width of a kanban column
  */
-export async function getKanbanColumnWidth(
-  page: Page,
-  columnId: string
-): Promise<number> {
+export async function getKanbanColumnWidth(page: Page, columnId: string): Promise<number> {
   const column = page.locator(`[data-testid="kanban-column-${columnId}"]`);
   const box = await column.boundingBox();
   return box?.width ?? 0;
@@ -35,19 +26,16 @@ export async function getKanbanColumnWidth(
 /**
  * Check if a kanban column has CSS columns (masonry) layout
  */
-export async function hasKanbanColumnMasonryLayout(
-  page: Page,
-  columnId: string
-): Promise<boolean> {
+export async function hasKanbanColumnMasonryLayout(page: Page, columnId: string): Promise<boolean> {
   const column = page.locator(`[data-testid="kanban-column-${columnId}"]`);
-  const contentDiv = column.locator("> div").nth(1); // Second child is the content area
+  const contentDiv = column.locator('> div').nth(1); // Second child is the content area
 
   const columnCount = await contentDiv.evaluate((el) => {
     const style = window.getComputedStyle(el);
     return style.columnCount;
   });
 
-  return columnCount === "2";
+  return columnCount === '2';
 }
 
 /**
@@ -58,11 +46,8 @@ export async function dragKanbanCard(
   featureId: string,
   targetColumnId: string
 ): Promise<void> {
-  const card = page.locator(`[data-testid="kanban-card-${featureId}"]`);
   const dragHandle = page.locator(`[data-testid="drag-handle-${featureId}"]`);
-  const targetColumn = page.locator(
-    `[data-testid="kanban-column-${targetColumnId}"]`
-  );
+  const targetColumn = page.locator(`[data-testid="kanban-column-${targetColumnId}"]`);
 
   // Perform drag and drop
   await dragHandle.dragTo(targetColumn);
@@ -71,15 +56,10 @@ export async function dragKanbanCard(
 /**
  * Click the view output button on a kanban card
  */
-export async function clickViewOutput(
-  page: Page,
-  featureId: string
-): Promise<void> {
+export async function clickViewOutput(page: Page, featureId: string): Promise<void> {
   // Try the running version first, then the in-progress version
   const runningBtn = page.locator(`[data-testid="view-output-${featureId}"]`);
-  const inProgressBtn = page.locator(
-    `[data-testid="view-output-inprogress-${featureId}"]`
-  );
+  const inProgressBtn = page.locator(`[data-testid="view-output-inprogress-${featureId}"]`);
 
   if (await runningBtn.isVisible()) {
     await runningBtn.click();
@@ -104,10 +84,7 @@ export async function isDragHandleVisibleForFeature(
 /**
  * Get the drag handle element for a specific feature card
  */
-export async function getDragHandleForFeature(
-  page: Page,
-  featureId: string
-): Promise<Locator> {
+export async function getDragHandleForFeature(page: Page, featureId: string): Promise<Locator> {
   return page.locator(`[data-testid="drag-handle-${featureId}"]`);
 }
 
@@ -134,9 +111,7 @@ export async function fillAddFeatureDialog(
   options?: { branch?: string; category?: string }
 ): Promise<void> {
   // Fill description (using the dropzone textarea)
-  const descriptionInput = page
-    .locator('[data-testid="add-feature-dialog"] textarea')
-    .first();
+  const descriptionInput = page.locator('[data-testid="add-feature-dialog"] textarea').first();
   await descriptionInput.fill(description);
 
   // Fill branch if provided (it's a combobox autocomplete)
@@ -145,36 +120,34 @@ export async function fillAddFeatureDialog(
     const otherBranchRadio = page
       .locator('[data-testid="feature-radio-group"]')
       .locator('[id="feature-other"]');
-    await otherBranchRadio.waitFor({ state: "visible", timeout: 5000 });
+    await otherBranchRadio.waitFor({ state: 'visible', timeout: 5000 });
     await otherBranchRadio.click();
     // Wait for the branch input to appear
     await page.waitForTimeout(300);
 
     // Now click on the branch input (autocomplete)
     const branchInput = page.locator('[data-testid="feature-input"]');
-    await branchInput.waitFor({ state: "visible", timeout: 5000 });
+    await branchInput.waitFor({ state: 'visible', timeout: 5000 });
     await branchInput.click();
     // Wait for the popover to open
     await page.waitForTimeout(300);
     // Type in the command input
-    const commandInput = page.locator("[cmdk-input]");
+    const commandInput = page.locator('[cmdk-input]');
     await commandInput.fill(options.branch);
     // Press Enter to select/create the branch
-    await commandInput.press("Enter");
+    await commandInput.press('Enter');
     // Wait for popover to close
     await page.waitForTimeout(200);
   }
 
   // Fill category if provided (it's also a combobox autocomplete)
   if (options?.category) {
-    const categoryButton = page.locator(
-      '[data-testid="feature-category-input"]'
-    );
+    const categoryButton = page.locator('[data-testid="feature-category-input"]');
     await categoryButton.click();
     await page.waitForTimeout(300);
-    const commandInput = page.locator("[cmdk-input]");
+    const commandInput = page.locator('[cmdk-input]');
     await commandInput.fill(options.category);
-    await commandInput.press("Enter");
+    await commandInput.press('Enter');
     await page.waitForTimeout(200);
   }
 }
@@ -185,10 +158,9 @@ export async function fillAddFeatureDialog(
 export async function confirmAddFeature(page: Page): Promise<void> {
   await page.click('[data-testid="confirm-add-feature"]');
   // Wait for dialog to close
-  await page.waitForFunction(
-    () => !document.querySelector('[data-testid="add-feature-dialog"]'),
-    { timeout: 5000 }
-  );
+  await page.waitForFunction(() => !document.querySelector('[data-testid="add-feature-dialog"]'), {
+    timeout: 5000,
+  });
 }
 
 /**
@@ -218,12 +190,9 @@ export async function getWorktreeSelector(page: Page): Promise<Locator> {
 /**
  * Click on a branch button in the worktree selector
  */
-export async function selectWorktreeBranch(
-  page: Page,
-  branchName: string
-): Promise<void> {
-  const branchButton = page.getByRole("button", {
-    name: new RegExp(branchName, "i"),
+export async function selectWorktreeBranch(page: Page, branchName: string): Promise<void> {
+  const branchButton = page.getByRole('button', {
+    name: new RegExp(branchName, 'i'),
   });
   await branchButton.click();
   await page.waitForTimeout(500); // Wait for UI to update
@@ -232,9 +201,7 @@ export async function selectWorktreeBranch(
 /**
  * Get the currently selected branch in the worktree selector
  */
-export async function getSelectedWorktreeBranch(
-  page: Page
-): Promise<string | null> {
+export async function getSelectedWorktreeBranch(page: Page): Promise<string | null> {
   // The main branch button has aria-pressed="true" when selected
   const selectedButton = page.locator(
     '[data-testid="worktree-selector"] button[aria-pressed="true"]'
@@ -246,12 +213,9 @@ export async function getSelectedWorktreeBranch(
 /**
  * Check if a branch button is visible in the worktree selector
  */
-export async function isWorktreeBranchVisible(
-  page: Page,
-  branchName: string
-): Promise<boolean> {
-  const branchButton = page.getByRole("button", {
-    name: new RegExp(branchName, "i"),
+export async function isWorktreeBranchVisible(page: Page, branchName: string): Promise<boolean> {
+  const branchButton = page.getByRole('button', {
+    name: new RegExp(branchName, 'i'),
   });
   return await branchButton.isVisible().catch(() => false);
 }

apps/ui/tests/utils/views/context.ts

@@ -1,8 +1,8 @@
-import { Page, Locator } from "@playwright/test";
-import { clickElement, fillInput } from "../core/interactions";
-import { waitForElement, waitForElementHidden } from "../core/waiting";
-import { getByTestId } from "../core/elements";
-import { expect } from "@playwright/test";
+import { Page, Locator } from '@playwright/test';
+import { clickElement, fillInput } from '../core/interactions';
+import { waitForElement, waitForElementHidden } from '../core/waiting';
+import { getByTestId } from '../core/elements';
+import { expect } from '@playwright/test';
 
 /**
  * Get the context file list element
@@ -14,10 +14,7 @@ export async function getContextFileList(page: Page): Promise<Locator> {
 /**
  * Click on a context file in the list
  */
-export async function clickContextFile(
-  page: Page,
-  fileName: string
-): Promise<void> {
+export async function clickContextFile(page: Page, fileName: string): Promise<void> {
   const fileButton = page.locator(`[data-testid="context-file-${fileName}"]`);
   await fileButton.click();
 }
@@ -33,18 +30,15 @@ export async function getContextEditor(page: Page): Promise<Locator> {
  * Get the context editor content
  */
 export async function getContextEditorContent(page: Page): Promise<string> {
-  const editor = await getByTestId(page, "context-editor");
+  const editor = await getByTestId(page, 'context-editor');
   return await editor.inputValue();
 }
 
 /**
  * Set the context editor content
  */
-export async function setContextEditorContent(
-  page: Page,
-  content: string
-): Promise<void> {
-  const editor = await getByTestId(page, "context-editor");
+export async function setContextEditorContent(page: Page, content: string): Promise<void> {
+  const editor = await getByTestId(page, 'context-editor');
   await editor.fill(content);
 }
 
@@ -52,8 +46,8 @@ export async function setContextEditorContent(
  * Open the add context file dialog
  */
 export async function openAddContextFileDialog(page: Page): Promise<void> {
-  await clickElement(page, "add-context-file");
-  await waitForElement(page, "add-context-dialog");
+  await clickElement(page, 'add-context-file');
+  await waitForElement(page, 'add-context-dialog');
 }
 
 /**
@@ -65,11 +59,11 @@ export async function createContextFile(
   content: string
 ): Promise<void> {
   await openAddContextFileDialog(page);
-  await clickElement(page, "add-text-type");
-  await fillInput(page, "new-file-name", filename);
-  await fillInput(page, "new-file-content", content);
-  await clickElement(page, "confirm-add-file");
-  await waitForElementHidden(page, "add-context-dialog");
+  await clickElement(page, 'add-text-type');
+  await fillInput(page, 'new-file-name', filename);
+  await fillInput(page, 'new-file-content', content);
+  await clickElement(page, 'confirm-add-file');
+  await waitForElementHidden(page, 'add-context-dialog');
 }
 
 /**
@@ -81,34 +75,32 @@ export async function createContextImage(
   imagePath: string
 ): Promise<void> {
   await openAddContextFileDialog(page);
-  await clickElement(page, "add-image-type");
-  await fillInput(page, "new-file-name", filename);
+  await clickElement(page, 'add-image-type');
+  await fillInput(page, 'new-file-name', filename);
   await page.setInputFiles('[data-testid="image-upload-input"]', imagePath);
-  await clickElement(page, "confirm-add-file");
-  await waitForElementHidden(page, "add-context-dialog");
+  await clickElement(page, 'confirm-add-file');
+  await waitForElementHidden(page, 'add-context-dialog');
 }
 
 /**
  * Delete a context file via the UI (must be selected first)
  */
 export async function deleteSelectedContextFile(page: Page): Promise<void> {
-  await clickElement(page, "delete-context-file");
-  await waitForElement(page, "delete-context-dialog");
-  await clickElement(page, "confirm-delete-file");
-  await waitForElementHidden(page, "delete-context-dialog");
+  await clickElement(page, 'delete-context-file');
+  await waitForElement(page, 'delete-context-dialog');
+  await clickElement(page, 'confirm-delete-file');
+  await waitForElementHidden(page, 'delete-context-dialog');
 }
 
 /**
  * Save the current context file
  */
 export async function saveContextFile(page: Page): Promise<void> {
-  await clickElement(page, "save-context-file");
+  await clickElement(page, 'save-context-file');
   // Wait for save to complete (button shows "Saved")
   await page.waitForFunction(
     () =>
-      document
-        .querySelector('[data-testid="save-context-file"]')
-        ?.textContent?.includes("Saved"),
+      document.querySelector('[data-testid="save-context-file"]')?.textContent?.includes('Saved'),
     { timeout: 5000 }
   );
 }
@@ -117,7 +109,7 @@ export async function saveContextFile(page: Page): Promise<void> {
  * Toggle markdown preview mode
  */
 export async function toggleContextPreviewMode(page: Page): Promise<void> {
-  await clickElement(page, "toggle-preview-mode");
+  await clickElement(page, 'toggle-preview-mode');
 }
 
 /**
@@ -128,8 +120,8 @@ export async function waitForContextFile(
   filename: string,
   timeout: number = 10000
 ): Promise<void> {
-  const locator = await getByTestId(page, `context-file-${filename}`);
-  await locator.waitFor({ state: "visible", timeout });
+  const locator = page.locator(`[data-testid="context-file-${filename}"]`);
+  await locator.waitFor({ state: 'visible', timeout });
 }
 
 /**
@@ -142,13 +134,13 @@ export async function selectContextFile(
   timeout: number = 10000
 ): Promise<void> {
   const fileButton = await getByTestId(page, `context-file-${filename}`);
-  await fileButton.waitFor({ state: "visible", timeout });
+  await fileButton.waitFor({ state: 'visible', timeout });
 
   // Use JavaScript click to ensure React onClick handler fires
   await fileButton.evaluate((el) => (el as HTMLButtonElement).click());
 
   // Wait for the file to be selected (toolbar with delete button becomes visible)
-  const deleteButton = await getByTestId(page, "delete-context-file");
+  const deleteButton = await getByTestId(page, 'delete-context-file');
   await expect(deleteButton).toBeVisible({
     timeout,
   });
@@ -173,11 +165,11 @@ export async function switchToEditMode(page: Page): Promise<void> {
   // First wait for content to load
   await waitForFileContentToLoad(page);
 
-  const markdownPreview = await getByTestId(page, "markdown-preview");
+  const markdownPreview = await getByTestId(page, 'markdown-preview');
   const isPreview = await markdownPreview.isVisible().catch(() => false);
 
   if (isPreview) {
-    await clickElement(page, "toggle-preview-mode");
+    await clickElement(page, 'toggle-preview-mode');
     await page.waitForSelector('[data-testid="context-editor"]', {
       timeout: 5000,
     });

apps/ui/tests/utils/views/setup.ts

@@ -1,20 +1,19 @@
-import { Page, Locator } from "@playwright/test";
-import { getByTestId } from "../core/elements";
-import { waitForElement } from "../core/waiting";
-import { setupFirstRun } from "../project/setup";
+import { Page, Locator } from '@playwright/test';
+import { getByTestId } from '../core/elements';
+import { waitForElement } from '../core/waiting';
 
 /**
  * Wait for setup view to be visible
  */
 export async function waitForSetupView(page: Page): Promise<Locator> {
-  return waitForElement(page, "setup-view", { timeout: 10000 });
+  return waitForElement(page, 'setup-view', { timeout: 10000 });
 }
 
 /**
  * Click "Get Started" button on setup welcome step
  */
 export async function clickSetupGetStarted(page: Page): Promise<void> {
-  const button = await getByTestId(page, "setup-start-button");
+  const button = await getByTestId(page, 'setup-start-button');
   await button.click();
 }
 
@@ -22,7 +21,7 @@ export async function clickSetupGetStarted(page: Page): Promise<void> {
  * Click continue on Claude setup step
  */
 export async function clickClaudeContinue(page: Page): Promise<void> {
-  const button = await getByTestId(page, "claude-next-button");
+  const button = await getByTestId(page, 'claude-next-button');
   await button.click();
 }
 
@@ -30,46 +29,40 @@ export async function clickClaudeContinue(page: Page): Promise<void> {
  * Click finish on setup complete step
  */
 export async function clickSetupFinish(page: Page): Promise<void> {
-  const button = await getByTestId(page, "setup-finish-button");
+  const button = await getByTestId(page, 'setup-finish-button');
   await button.click();
 }
 
 /**
  * Enter Anthropic API key in setup
  */
-export async function enterAnthropicApiKey(
-  page: Page,
-  apiKey: string
-): Promise<void> {
+export async function enterAnthropicApiKey(page: Page, apiKey: string): Promise<void> {
   // Click "Use Anthropic API Key Instead" button
-  const useApiKeyButton = await getByTestId(page, "use-api-key-button");
+  const useApiKeyButton = await getByTestId(page, 'use-api-key-button');
   await useApiKeyButton.click();
 
   // Enter the API key
-  const input = await getByTestId(page, "anthropic-api-key-input");
+  const input = await getByTestId(page, 'anthropic-api-key-input');
   await input.fill(apiKey);
 
   // Click save button
-  const saveButton = await getByTestId(page, "save-anthropic-key-button");
+  const saveButton = await getByTestId(page, 'save-anthropic-key-button');
   await saveButton.click();
 }
 
 /**
  * Enter OpenAI API key in setup
  */
-export async function enterOpenAIApiKey(
-  page: Page,
-  apiKey: string
-): Promise<void> {
+export async function enterOpenAIApiKey(page: Page, apiKey: string): Promise<void> {
   // Click "Enter OpenAI API Key" button
-  const useApiKeyButton = await getByTestId(page, "use-openai-key-button");
+  const useApiKeyButton = await getByTestId(page, 'use-openai-key-button');
   await useApiKeyButton.click();
 
   // Enter the API key
-  const input = await getByTestId(page, "openai-api-key-input");
+  const input = await getByTestId(page, 'openai-api-key-input');
   await input.fill(apiKey);
 
   // Click save button
-  const saveButton = await getByTestId(page, "save-openai-key-button");
+  const saveButton = await getByTestId(page, 'save-openai-key-button');
   await saveButton.click();
 }

apps/ui/tests/utils/views/spec-editor.ts

@@ -1,6 +1,6 @@
-import { Page, Locator } from "@playwright/test";
-import { clickElement } from "../core/interactions";
-import { navigateToSpec } from "../navigation/views";
+import { Page, Locator } from '@playwright/test';
+import { clickElement } from '../core/interactions';
+import { navigateToSpec } from '../navigation/views';
 
 /**
  * Get the spec editor element
@@ -20,10 +20,7 @@ export async function getSpecEditorContent(page: Page): Promise<string> {
 /**
  * Set the spec editor content
  */
-export async function setSpecEditorContent(
-  page: Page,
-  content: string
-): Promise<void> {
+export async function setSpecEditorContent(page: Page, content: string): Promise<void> {
   const editor = await getSpecEditor(page);
   await editor.fill(content);
 }
@@ -32,14 +29,14 @@ export async function setSpecEditorContent(
  * Click the save spec button
  */
 export async function clickSaveSpec(page: Page): Promise<void> {
-  await clickElement(page, "save-spec");
+  await clickElement(page, 'save-spec');
 }
 
 /**
  * Click the reload spec button
  */
 export async function clickReloadSpec(page: Page): Promise<void> {
-  await clickElement(page, "reload-spec");
+  await clickElement(page, 'reload-spec');
 }
 
 /**
@@ -47,7 +44,7 @@ export async function clickReloadSpec(page: Page): Promise<void> {
  */
 export async function getDisplayedSpecPath(page: Page): Promise<string | null> {
   const specView = page.locator('[data-testid="spec-view"]');
-  const pathElement = specView.locator("p.text-muted-foreground").first();
+  const pathElement = specView.locator('p.text-muted-foreground').first();
   return await pathElement.textContent();
 }
 
@@ -60,13 +57,17 @@ export async function navigateToSpecEditor(page: Page): Promise<void> {
 
 /**
  * Get the CodeMirror editor content
+ * Waits for CodeMirror to be ready and returns the content
  */
 export async function getEditorContent(page: Page): Promise<string> {
   // CodeMirror uses a contenteditable div with class .cm-content
-  const content = await page
-    .locator('[data-testid="spec-editor"] .cm-content')
-    .textContent();
-  return content || "";
+  // Wait for it to be visible and then read its textContent
+  const contentElement = page.locator('[data-testid="spec-editor"] .cm-content');
+  await contentElement.waitFor({ state: 'visible', timeout: 10000 });
+
+  // Read the content - CodeMirror should have updated its DOM by now
+  const content = await contentElement.textContent();
+  return content || '';
 }
 
 /**
@@ -81,14 +82,14 @@ export async function setEditorContent(page: Page, content: string): Promise<voi
   await page.waitForTimeout(200);
 
   // Select all content (Cmd+A on Mac, Ctrl+A on others)
-  const isMac = process.platform === "darwin";
-  await page.keyboard.press(isMac ? "Meta+a" : "Control+a");
+  const isMac = process.platform === 'darwin';
+  await page.keyboard.press(isMac ? 'Meta+a' : 'Control+a');
 
   // Wait for selection
   await page.waitForTimeout(100);
 
   // Delete the selected content first
-  await page.keyboard.press("Backspace");
+  await page.keyboard.press('Backspace');
 
   // Wait for deletion
   await page.waitForTimeout(100);
@@ -111,7 +112,7 @@ export async function clickSaveButton(page: Page): Promise<void> {
   await page.waitForFunction(
     () => {
       const btn = document.querySelector('[data-testid="save-spec"]');
-      return btn?.textContent?.includes("Saved");
+      return btn?.textContent?.includes('Saved');
     },
     { timeout: 5000 }
   );