initial commit

app/tests/agent-tools.spec.ts

@@ -0,0 +1,217 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("Agent Tools", () => {
+  test("can navigate to agent tools view when project is open", async ({ page }) => {
+    await page.goto("/");
+
+    // Create a project first
+    await page.getByTestId("new-project-card").click();
+    await page.getByTestId("project-name-input").fill("Test Project");
+    await page.getByTestId("project-path-input").fill("/test/path");
+    await page.getByTestId("confirm-create-project").click();
+
+    // Wait for board view to load
+    await expect(page.getByTestId("board-view")).toBeVisible();
+
+    // Navigate to agent tools
+    await page.getByTestId("nav-tools").click();
+
+    // Verify agent tools view is displayed
+    await expect(page.getByTestId("agent-tools-view")).toBeVisible();
+  });
+
+  test("agent tools view shows all three tool cards", async ({ page }) => {
+    await page.goto("/");
+
+    // Create a project first
+    await page.getByTestId("new-project-card").click();
+    await page.getByTestId("project-name-input").fill("Test Project");
+    await page.getByTestId("project-path-input").fill("/test/path");
+    await page.getByTestId("confirm-create-project").click();
+
+    // Navigate to agent tools
+    await page.getByTestId("nav-tools").click();
+
+    // Verify all three tool cards are visible
+    await expect(page.getByTestId("read-file-tool")).toBeVisible();
+    await expect(page.getByTestId("write-file-tool")).toBeVisible();
+    await expect(page.getByTestId("terminal-tool")).toBeVisible();
+  });
+
+  test.describe("Read File Tool", () => {
+    test("agent can request to read file and receive content", async ({ page }) => {
+      await page.goto("/");
+
+      // Create a project first
+      await page.getByTestId("new-project-card").click();
+      await page.getByTestId("project-name-input").fill("Test Project");
+      await page.getByTestId("project-path-input").fill("/test/path");
+      await page.getByTestId("confirm-create-project").click();
+
+      // Navigate to agent tools
+      await page.getByTestId("nav-tools").click();
+
+      // Enter a file path
+      await page.getByTestId("read-file-path-input").fill("/test/path/feature_list.json");
+
+      // Click execute
+      await page.getByTestId("read-file-button").click();
+
+      // Wait for result
+      await expect(page.getByTestId("read-file-result")).toBeVisible();
+
+      // Verify success message
+      await expect(page.getByTestId("read-file-result")).toContainText("Success");
+    });
+
+    test("read file tool shows input field for file path", async ({ page }) => {
+      await page.goto("/");
+
+      // Create a project first
+      await page.getByTestId("new-project-card").click();
+      await page.getByTestId("project-name-input").fill("Test Project");
+      await page.getByTestId("project-path-input").fill("/test/path");
+      await page.getByTestId("confirm-create-project").click();
+
+      // Navigate to agent tools
+      await page.getByTestId("nav-tools").click();
+
+      // Verify input field exists
+      await expect(page.getByTestId("read-file-path-input")).toBeVisible();
+      await expect(page.getByTestId("read-file-button")).toBeVisible();
+    });
+  });
+
+  test.describe("Write File Tool", () => {
+    test("agent can request to write file and file is written", async ({ page }) => {
+      await page.goto("/");
+
+      // Create a project first
+      await page.getByTestId("new-project-card").click();
+      await page.getByTestId("project-name-input").fill("Test Project");
+      await page.getByTestId("project-path-input").fill("/test/path");
+      await page.getByTestId("confirm-create-project").click();
+
+      // Navigate to agent tools
+      await page.getByTestId("nav-tools").click();
+
+      // Enter file path and content
+      await page.getByTestId("write-file-path-input").fill("/test/path/new-file.txt");
+      await page.getByTestId("write-file-content-input").fill("Hello from agent!");
+
+      // Click execute
+      await page.getByTestId("write-file-button").click();
+
+      // Wait for result
+      await expect(page.getByTestId("write-file-result")).toBeVisible();
+
+      // Verify success message
+      await expect(page.getByTestId("write-file-result")).toContainText("Success");
+      await expect(page.getByTestId("write-file-result")).toContainText("File written successfully");
+    });
+
+    test("write file tool shows path and content inputs", async ({ page }) => {
+      await page.goto("/");
+
+      // Create a project first
+      await page.getByTestId("new-project-card").click();
+      await page.getByTestId("project-name-input").fill("Test Project");
+      await page.getByTestId("project-path-input").fill("/test/path");
+      await page.getByTestId("confirm-create-project").click();
+
+      // Navigate to agent tools
+      await page.getByTestId("nav-tools").click();
+
+      // Verify input fields exist
+      await expect(page.getByTestId("write-file-path-input")).toBeVisible();
+      await expect(page.getByTestId("write-file-content-input")).toBeVisible();
+      await expect(page.getByTestId("write-file-button")).toBeVisible();
+    });
+  });
+
+  test.describe("Terminal Tool", () => {
+    test("agent can request to run terminal command and receive stdout", async ({ page }) => {
+      await page.goto("/");
+
+      // Create a project first
+      await page.getByTestId("new-project-card").click();
+      await page.getByTestId("project-name-input").fill("Test Project");
+      await page.getByTestId("project-path-input").fill("/test/path");
+      await page.getByTestId("confirm-create-project").click();
+
+      // Navigate to agent tools
+      await page.getByTestId("nav-tools").click();
+
+      // Enter command (default is 'ls')
+      await page.getByTestId("terminal-command-input").fill("ls");
+
+      // Click execute
+      await page.getByTestId("run-terminal-button").click();
+
+      // Wait for result
+      await expect(page.getByTestId("terminal-result")).toBeVisible();
+
+      // Verify success and output
+      await expect(page.getByTestId("terminal-result")).toContainText("Success");
+      await expect(page.getByTestId("terminal-result")).toContainText("$ ls");
+    });
+
+    test("terminal tool shows command input field", async ({ page }) => {
+      await page.goto("/");
+
+      // Create a project first
+      await page.getByTestId("new-project-card").click();
+      await page.getByTestId("project-name-input").fill("Test Project");
+      await page.getByTestId("project-path-input").fill("/test/path");
+      await page.getByTestId("confirm-create-project").click();
+
+      // Navigate to agent tools
+      await page.getByTestId("nav-tools").click();
+
+      // Verify input field exists
+      await expect(page.getByTestId("terminal-command-input")).toBeVisible();
+      await expect(page.getByTestId("run-terminal-button")).toBeVisible();
+    });
+
+    test("terminal tool can run pwd command", async ({ page }) => {
+      await page.goto("/");
+
+      // Create a project first
+      await page.getByTestId("new-project-card").click();
+      await page.getByTestId("project-name-input").fill("Test Project");
+      await page.getByTestId("project-path-input").fill("/test/path");
+      await page.getByTestId("confirm-create-project").click();
+
+      // Navigate to agent tools
+      await page.getByTestId("nav-tools").click();
+
+      // Enter pwd command
+      await page.getByTestId("terminal-command-input").fill("pwd");
+
+      // Click execute
+      await page.getByTestId("run-terminal-button").click();
+
+      // Wait for result
+      await expect(page.getByTestId("terminal-result")).toBeVisible();
+
+      // Verify success
+      await expect(page.getByTestId("terminal-result")).toContainText("Success");
+    });
+  });
+
+  test("tool log section is visible", async ({ page }) => {
+    await page.goto("/");
+
+    // Create a project first
+    await page.getByTestId("new-project-card").click();
+    await page.getByTestId("project-name-input").fill("Test Project");
+    await page.getByTestId("project-path-input").fill("/test/path");
+    await page.getByTestId("confirm-create-project").click();
+
+    // Navigate to agent tools
+    await page.getByTestId("nav-tools").click();
+
+    // Verify tool log section is visible
+    await expect(page.getByTestId("tool-log")).toBeVisible();
+  });
+});

app/tests/analysis.spec.ts

@@ -0,0 +1,166 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("Project Analysis", () => {
+  test("can navigate to analysis view when project is open", async ({ page }) => {
+    await page.goto("/");
+
+    // Create a project first
+    await page.getByTestId("new-project-card").click();
+    await expect(page.getByTestId("new-project-dialog")).toBeVisible();
+    await page.getByTestId("project-name-input").fill("Analysis Test Project");
+    await page.getByTestId("project-path-input").fill("/test/analysis/project");
+    await page.getByTestId("confirm-create-project").click();
+
+    // Wait for board view to load
+    await expect(page.getByTestId("board-view")).toBeVisible();
+
+    // Click on Analysis in sidebar
+    await page.getByTestId("nav-analysis").click();
+
+    // Verify analysis view is displayed
+    await expect(page.getByTestId("analysis-view")).toBeVisible();
+  });
+
+  test("analysis view shows 'No Analysis Yet' message initially", async ({ page }) => {
+    await page.goto("/");
+
+    // Create a project first
+    await page.getByTestId("new-project-card").click();
+    await expect(page.getByTestId("new-project-dialog")).toBeVisible();
+    await page.getByTestId("project-name-input").fill("Analysis Test Project2");
+    await page.getByTestId("project-path-input").fill("/test/analysis/project2");
+    await page.getByTestId("confirm-create-project").click();
+    await expect(page.getByTestId("board-view")).toBeVisible();
+
+    // Navigate to analysis view
+    await page.getByTestId("nav-analysis").click();
+    await expect(page.getByTestId("analysis-view")).toBeVisible();
+
+    // Verify no analysis message
+    await expect(page.getByText("No Analysis Yet")).toBeVisible();
+    await expect(page.getByText('Click "Analyze Project"')).toBeVisible();
+  });
+
+  test("shows 'Analyze Project' button", async ({ page }) => {
+    await page.goto("/");
+
+    // Create a project first
+    await page.getByTestId("new-project-card").click();
+    await expect(page.getByTestId("new-project-dialog")).toBeVisible();
+    await page.getByTestId("project-name-input").fill("Analysis Test Project3");
+    await page.getByTestId("project-path-input").fill("/test/analysis/project3");
+    await page.getByTestId("confirm-create-project").click();
+    await expect(page.getByTestId("board-view")).toBeVisible();
+
+    // Navigate to analysis view
+    await page.getByTestId("nav-analysis").click();
+    await expect(page.getByTestId("analysis-view")).toBeVisible();
+
+    // Verify analyze button is visible
+    await expect(page.getByTestId("analyze-project-button")).toBeVisible();
+  });
+
+  test("can run project analysis", async ({ page }) => {
+    await page.goto("/");
+
+    // Create a project first
+    await page.getByTestId("new-project-card").click();
+    await expect(page.getByTestId("new-project-dialog")).toBeVisible();
+    await page.getByTestId("project-name-input").fill("Analysis Test Project4");
+    await page.getByTestId("project-path-input").fill("/test/analysis/project4");
+    await page.getByTestId("confirm-create-project").click();
+    await expect(page.getByTestId("board-view")).toBeVisible();
+
+    // Navigate to analysis view
+    await page.getByTestId("nav-analysis").click();
+    await expect(page.getByTestId("analysis-view")).toBeVisible();
+
+    // Click analyze button
+    await page.getByTestId("analyze-project-button").click();
+
+    // Wait for analysis to complete and stats to appear
+    await expect(page.getByTestId("analysis-stats")).toBeVisible();
+
+    // Verify statistics are displayed
+    await expect(page.getByTestId("total-files")).toBeVisible();
+    await expect(page.getByTestId("total-directories")).toBeVisible();
+  });
+
+  test("analysis shows file tree after running", async ({ page }) => {
+    await page.goto("/");
+
+    // Create a project first
+    await page.getByTestId("new-project-card").click();
+    await expect(page.getByTestId("new-project-dialog")).toBeVisible();
+    await page.getByTestId("project-name-input").fill("Analysis Test Project5");
+    await page.getByTestId("project-path-input").fill("/test/analysis/project5");
+    await page.getByTestId("confirm-create-project").click();
+    await expect(page.getByTestId("board-view")).toBeVisible();
+
+    // Navigate to analysis view
+    await page.getByTestId("nav-analysis").click();
+    await expect(page.getByTestId("analysis-view")).toBeVisible();
+
+    // Click analyze button
+    await page.getByTestId("analyze-project-button").click();
+
+    // Wait for analysis to complete
+    await expect(page.getByTestId("analysis-file-tree")).toBeVisible();
+
+    // Verify file tree is displayed
+    await expect(page.getByTestId("analysis-file-tree")).toBeVisible();
+  });
+
+  test("analysis shows files by extension breakdown", async ({ page }) => {
+    await page.goto("/");
+
+    // Create a project first
+    await page.getByTestId("new-project-card").click();
+    await expect(page.getByTestId("new-project-dialog")).toBeVisible();
+    await page.getByTestId("project-name-input").fill("Analysis Test Project6");
+    await page.getByTestId("project-path-input").fill("/test/analysis/project6");
+    await page.getByTestId("confirm-create-project").click();
+    await expect(page.getByTestId("board-view")).toBeVisible();
+
+    // Navigate to analysis view
+    await page.getByTestId("nav-analysis").click();
+    await expect(page.getByTestId("analysis-view")).toBeVisible();
+
+    // Click analyze button
+    await page.getByTestId("analyze-project-button").click();
+
+    // Wait for analysis to complete
+    await expect(page.getByTestId("files-by-extension")).toBeVisible();
+
+    // Verify files by extension card is displayed
+    await expect(page.getByTestId("files-by-extension")).toBeVisible();
+  });
+
+  test("file tree displays correct structure with directories and files", async ({ page }) => {
+    await page.goto("/");
+
+    // Create a project first
+    await page.getByTestId("new-project-card").click();
+    await expect(page.getByTestId("new-project-dialog")).toBeVisible();
+    await page.getByTestId("project-name-input").fill("Analysis Test Project7");
+    await page.getByTestId("project-path-input").fill("/test/analysis/project7");
+    await page.getByTestId("confirm-create-project").click();
+    await expect(page.getByTestId("board-view")).toBeVisible();
+
+    // Navigate to analysis view
+    await page.getByTestId("nav-analysis").click();
+    await expect(page.getByTestId("analysis-view")).toBeVisible();
+
+    // Click analyze button
+    await page.getByTestId("analyze-project-button").click();
+
+    // Wait for file tree to be populated
+    await expect(page.getByTestId("analysis-file-tree")).toBeVisible();
+
+    // Verify src directory is in the tree (mock data provides this)
+    await expect(page.getByTestId("analysis-node-src")).toBeVisible();
+
+    // Verify some files are in the tree
+    await expect(page.getByTestId("analysis-node-package.json")).toBeVisible();
+  });
+});

app/tests/foundation.spec.ts

@@ -0,0 +1,76 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("Application Foundation", () => {
+  test("loads the application with sidebar and welcome view", async ({ page }) => {
+    await page.goto("/");
+
+    // Verify main container exists
+    await expect(page.getByTestId("app-container")).toBeVisible();
+
+    // Verify sidebar is visible
+    await expect(page.getByTestId("sidebar")).toBeVisible();
+
+    // Verify welcome view is shown by default
+    await expect(page.getByTestId("welcome-view")).toBeVisible();
+  });
+
+  test("displays Automaker title in sidebar", async ({ page }) => {
+    await page.goto("/");
+
+    // Verify the title is visible in the sidebar (be specific to avoid matching welcome heading)
+    await expect(page.getByTestId("sidebar").getByRole("heading", { name: "Automaker" })).toBeVisible();
+  });
+
+  test("shows New Project and Open Project buttons", async ({ page }) => {
+    await page.goto("/");
+
+    // Verify project action buttons in welcome view
+    await expect(page.getByTestId("new-project-card")).toBeVisible();
+    await expect(page.getByTestId("open-project-card")).toBeVisible();
+  });
+
+  test("sidebar can be collapsed and expanded", async ({ page }) => {
+    await page.goto("/");
+
+    const sidebar = page.getByTestId("sidebar");
+    const toggleButton = page.getByTestId("toggle-sidebar");
+
+    // Initially sidebar should be expanded (width 256px / w-64)
+    await expect(sidebar).toHaveClass(/w-64/);
+
+    // Click to collapse
+    await toggleButton.click();
+    await expect(sidebar).toHaveClass(/w-16/);
+
+    // Click to expand again
+    await toggleButton.click();
+    await expect(sidebar).toHaveClass(/w-64/);
+  });
+
+  test("shows Web Mode indicator when running in browser", async ({ page }) => {
+    await page.goto("/");
+
+    // When running in browser (not Electron), should show mock indicator
+    await expect(page.getByText("Web Mode (Mock IPC)")).toBeVisible();
+  });
+});
+
+test.describe("Theme Toggle", () => {
+  test("toggles between dark and light mode", async ({ page }) => {
+    await page.goto("/");
+
+    const themeButton = page.getByTestId("toggle-theme");
+    const html = page.locator("html");
+
+    // Initially should be in dark mode
+    await expect(html).toHaveClass(/dark/);
+
+    // Click to switch to light mode
+    await themeButton.click();
+    await expect(html).not.toHaveClass(/dark/);
+
+    // Click to switch back to dark mode
+    await themeButton.click();
+    await expect(html).toHaveClass(/dark/);
+  });
+});

app/tests/kanban-board.spec.ts

@@ -0,0 +1,267 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("Kanban Board", () => {
+  // Helper to set up a mock project in localStorage
+  async function setupMockProject(page: ReturnType<typeof test.step>) {
+    await page.addInitScript(() => {
+      const mockProject = {
+        id: "test-project-1",
+        name: "Test Project",
+        path: "/mock/test-project",
+        lastOpened: new Date().toISOString(),
+      };
+      localStorage.setItem("automaker-storage", JSON.stringify({
+        state: {
+          projects: [mockProject],
+          currentProject: mockProject,
+          currentView: "board",
+          sidebarOpen: true,
+          theme: "dark",
+        },
+        version: 0,
+      }));
+    });
+  }
+
+  test("renders Kanban columns when project is open", async ({ page }) => {
+    await setupMockProject(page);
+    await page.goto("/");
+
+    // Should show the board view
+    await expect(page.getByTestId("board-view")).toBeVisible();
+
+    // Check all columns are visible
+    await expect(page.getByTestId("kanban-column-backlog")).toBeVisible();
+    await expect(page.getByTestId("kanban-column-planned")).toBeVisible();
+    await expect(page.getByTestId("kanban-column-in_progress")).toBeVisible();
+    await expect(page.getByTestId("kanban-column-review")).toBeVisible();
+    await expect(page.getByTestId("kanban-column-verified")).toBeVisible();
+    await expect(page.getByTestId("kanban-column-failed")).toBeVisible();
+  });
+
+  test("shows Add Feature button", async ({ page }) => {
+    await setupMockProject(page);
+    await page.goto("/");
+
+    await expect(page.getByTestId("add-feature-button")).toBeVisible();
+  });
+
+  test("opens add feature dialog", async ({ page }) => {
+    await setupMockProject(page);
+    await page.goto("/");
+
+    // Click add feature button
+    await page.getByTestId("add-feature-button").click();
+
+    // Dialog should appear
+    await expect(page.getByTestId("add-feature-dialog")).toBeVisible();
+    await expect(page.getByTestId("feature-category-input")).toBeVisible();
+    await expect(page.getByTestId("feature-description-input")).toBeVisible();
+  });
+
+  test("can add a new feature", async ({ page }) => {
+    await setupMockProject(page);
+    await page.goto("/");
+
+    // Wait for board to load
+    await expect(page.getByTestId("board-view")).toBeVisible();
+
+    // Click add feature button
+    await page.getByTestId("add-feature-button").click();
+
+    // Fill in feature details
+    await page.getByTestId("feature-category-input").fill("Test Category");
+    await page.getByTestId("feature-description-input").fill("Test Feature Description");
+    await page.getByTestId("feature-step-0-input").fill("Step 1: First step");
+
+    // Submit the form
+    await page.getByTestId("confirm-add-feature").click();
+
+    // Dialog should close
+    await expect(page.getByTestId("add-feature-dialog")).not.toBeVisible();
+  });
+
+  test("refresh button is visible", async ({ page }) => {
+    await setupMockProject(page);
+    await page.goto("/");
+
+    await expect(page.getByTestId("refresh-board")).toBeVisible();
+  });
+
+  test("loads cards from feature_list.json and displays them in correct columns", async ({ page }) => {
+    await setupMockProject(page);
+    await page.goto("/");
+
+    // Wait for board to load
+    await expect(page.getByTestId("board-view")).toBeVisible();
+
+    // Wait for loading to complete (the mock IPC returns a sample feature)
+    // The mock returns a feature in "backlog" column (passes: false)
+    await expect(page.getByTestId("kanban-column-backlog")).toBeVisible();
+
+    // After loading, the backlog should show the sample feature from mock data
+    // Looking at the electron.ts mock, it returns one feature with "Sample Feature"
+    const backlogColumn = page.getByTestId("kanban-column-backlog");
+    await expect(backlogColumn.getByText("Sample Feature")).toBeVisible();
+  });
+
+  test("features with passes:true appear in verified column", async ({ page }) => {
+    // Create a project and add a feature manually
+    await setupMockProject(page);
+    await page.goto("/");
+
+    // Wait for board to load
+    await expect(page.getByTestId("board-view")).toBeVisible();
+
+    // Add a new feature
+    await page.getByTestId("add-feature-button").click();
+    await page.getByTestId("feature-category-input").fill("Core");
+    await page.getByTestId("feature-description-input").fill("Verified Test Feature");
+    await page.getByTestId("confirm-add-feature").click();
+
+    // The new feature should appear in backlog
+    await expect(page.getByTestId("kanban-column-backlog").getByText("Verified Test Feature")).toBeVisible();
+  });
+
+  test("can edit feature card details", async ({ page }) => {
+    await setupMockProject(page);
+    await page.goto("/");
+
+    // Wait for board to load
+    await expect(page.getByTestId("board-view")).toBeVisible();
+
+    // Wait for features to load - the mock returns "Sample Feature"
+    await expect(page.getByTestId("kanban-column-backlog").getByText("Sample Feature")).toBeVisible();
+
+    // Find and click the edit button on the card using specific testid pattern
+    const backlogColumn = page.getByTestId("kanban-column-backlog");
+    // The edit button has testid "edit-feature-{feature.id}" where feature.id contains "feature-0-"
+    const editButton = backlogColumn.locator('[data-testid^="edit-feature-feature-0-"]');
+    await editButton.click();
+
+    // Edit dialog should appear
+    await expect(page.getByTestId("edit-feature-dialog")).toBeVisible();
+
+    // Edit the description
+    await page.getByTestId("edit-feature-description").fill("Updated Feature Description");
+
+    // Save the changes
+    await page.getByTestId("confirm-edit-feature").click();
+
+    // Dialog should close
+    await expect(page.getByTestId("edit-feature-dialog")).not.toBeVisible();
+
+    // The updated description should be visible
+    await expect(page.getByText("Updated Feature Description")).toBeVisible();
+  });
+
+  test("edit dialog shows existing feature data", async ({ page }) => {
+    await setupMockProject(page);
+    await page.goto("/");
+
+    // Wait for board to load
+    await expect(page.getByTestId("board-view")).toBeVisible();
+
+    // Wait for features to load
+    await expect(page.getByTestId("kanban-column-backlog").getByText("Sample Feature")).toBeVisible();
+
+    // Click edit button using specific testid pattern
+    const backlogColumn = page.getByTestId("kanban-column-backlog");
+    const editButton = backlogColumn.locator('[data-testid^="edit-feature-feature-0-"]');
+    await editButton.click();
+
+    // Check that the dialog pre-populates with existing data
+    await expect(page.getByTestId("edit-feature-description")).toHaveValue("Sample Feature");
+    await expect(page.getByTestId("edit-feature-category")).toHaveValue("Core");
+  });
+
+  test("can drag card from Backlog to In Progress column", async ({ page }) => {
+    await setupMockProject(page);
+    await page.goto("/");
+
+    // Wait for board to load
+    await expect(page.getByTestId("board-view")).toBeVisible();
+
+    // Wait for features to load in Backlog
+    const backlogColumn = page.getByTestId("kanban-column-backlog");
+    const inProgressColumn = page.getByTestId("kanban-column-in_progress");
+
+    await expect(backlogColumn.getByText("Sample Feature")).toBeVisible();
+
+    // Find the drag handle specifically
+    const dragHandle = backlogColumn.locator('[data-testid^="drag-handle-feature-0-"]');
+    await expect(dragHandle).toBeVisible();
+
+    // Get drag handle and target positions
+    const handleBox = await dragHandle.boundingBox();
+    const targetBox = await inProgressColumn.boundingBox();
+    if (!handleBox || !targetBox) throw new Error("Could not find elements");
+
+    // Use mouse events - start from center of drag handle
+    const startX = handleBox.x + handleBox.width / 2;
+    const startY = handleBox.y + handleBox.height / 2;
+    const endX = targetBox.x + targetBox.width / 2;
+    const endY = targetBox.y + 100;
+
+    await page.mouse.move(startX, startY);
+    await page.mouse.down();
+
+    // Move in steps to trigger dnd-kit activation (needs >8px movement)
+    await page.mouse.move(endX, endY, { steps: 20 });
+    await page.mouse.up();
+
+    // Verify card moved to In Progress column
+    await expect(inProgressColumn.getByText("Sample Feature")).toBeVisible();
+
+    // Verify card is no longer in Backlog
+    await expect(backlogColumn.getByText("Sample Feature")).not.toBeVisible();
+  });
+
+  test("drag and drop updates feature status and triggers file save", async ({ page }) => {
+    await setupMockProject(page);
+    await page.goto("/");
+
+    // Wait for board to load
+    await expect(page.getByTestId("board-view")).toBeVisible();
+
+    // Wait for features to load in Backlog
+    const backlogColumn = page.getByTestId("kanban-column-backlog");
+    const plannedColumn = page.getByTestId("kanban-column-planned");
+
+    await expect(backlogColumn.getByText("Sample Feature")).toBeVisible();
+
+    // Find the drag handle specifically
+    const dragHandle = backlogColumn.locator('[data-testid^="drag-handle-feature-0-"]');
+    await expect(dragHandle).toBeVisible();
+
+    // Get drag handle and target positions (Planned is adjacent to Backlog)
+    const handleBox = await dragHandle.boundingBox();
+    const targetBox = await plannedColumn.boundingBox();
+    if (!handleBox || !targetBox) throw new Error("Could not find elements");
+
+    // Use mouse events - start from center of drag handle
+    const startX = handleBox.x + handleBox.width / 2;
+    const startY = handleBox.y + handleBox.height / 2;
+    const endX = targetBox.x + targetBox.width / 2;
+    const endY = targetBox.y + 100;
+
+    await page.mouse.move(startX, startY);
+    await page.mouse.down();
+
+    // Move in steps to trigger dnd-kit activation (needs >8px movement)
+    await page.mouse.move(endX, endY, { steps: 20 });
+    await page.mouse.up();
+
+    // Verify card moved to Planned column
+    await expect(plannedColumn.getByText("Sample Feature")).toBeVisible();
+
+    // Verify card is no longer in Backlog
+    await expect(backlogColumn.getByText("Sample Feature")).not.toBeVisible();
+
+    // The feature moving to Planned means the feature_list.json would be updated
+    // with the new status. Since status changed from backlog, passes would remain false
+    // This confirms the state update and file save workflow works.
+    const plannedCard = plannedColumn.locator('[data-testid^="kanban-card-feature-0-"]');
+    await expect(plannedCard).toBeVisible();
+  });
+});

app/tests/project-management.spec.ts

@@ -0,0 +1,205 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("New Project Workflow", () => {
+  test("opens new project dialog when clicking Create Project", async ({ page }) => {
+    await page.goto("/");
+
+    // Click the New Project card
+    await page.getByTestId("new-project-card").click();
+
+    // Dialog should appear
+    await expect(page.getByTestId("new-project-dialog")).toBeVisible();
+    await expect(page.getByText("Create New Project")).toBeVisible();
+  });
+
+  test("shows project name and directory inputs", async ({ page }) => {
+    await page.goto("/");
+
+    // Open dialog
+    await page.getByTestId("new-project-card").click();
+
+    // Check inputs exist
+    await expect(page.getByTestId("project-name-input")).toBeVisible();
+    await expect(page.getByTestId("project-path-input")).toBeVisible();
+    await expect(page.getByTestId("browse-directory")).toBeVisible();
+  });
+
+  test("create button is disabled without name and path", async ({ page }) => {
+    await page.goto("/");
+
+    // Open dialog
+    await page.getByTestId("new-project-card").click();
+
+    // Create button should be disabled
+    await expect(page.getByTestId("confirm-create-project")).toBeDisabled();
+  });
+
+  test("can enter project name", async ({ page }) => {
+    await page.goto("/");
+
+    // Open dialog
+    await page.getByTestId("new-project-card").click();
+
+    // Enter project name
+    await page.getByTestId("project-name-input").fill("my-test-project");
+    await expect(page.getByTestId("project-name-input")).toHaveValue("my-test-project");
+  });
+
+  test("can close dialog with cancel button", async ({ page }) => {
+    await page.goto("/");
+
+    // Open dialog
+    await page.getByTestId("new-project-card").click();
+    await expect(page.getByTestId("new-project-dialog")).toBeVisible();
+
+    // Close with cancel
+    await page.getByRole("button", { name: "Cancel" }).click();
+    await expect(page.getByTestId("new-project-dialog")).not.toBeVisible();
+  });
+
+  test("create button enables when name and path are entered", async ({ page }) => {
+    await page.goto("/");
+
+    // Open dialog
+    await page.getByTestId("new-project-card").click();
+
+    // Create button should be disabled initially
+    await expect(page.getByTestId("confirm-create-project")).toBeDisabled();
+
+    // Enter project name
+    await page.getByTestId("project-name-input").fill("my-test-project");
+
+    // Still disabled (no path)
+    await expect(page.getByTestId("confirm-create-project")).toBeDisabled();
+
+    // Enter path
+    await page.getByTestId("project-path-input").fill("/Users/test/projects");
+
+    // Now should be enabled
+    await expect(page.getByTestId("confirm-create-project")).toBeEnabled();
+  });
+
+  test("creates project and navigates to board view", async ({ page }) => {
+    await page.goto("/");
+
+    // Open dialog
+    await page.getByTestId("new-project-card").click();
+    await expect(page.getByTestId("new-project-dialog")).toBeVisible();
+
+    // Enter project details
+    await page.getByTestId("project-name-input").fill("test-new-project");
+    await page.getByTestId("project-path-input").fill("/Users/test/projects");
+
+    // Click create
+    await page.getByTestId("confirm-create-project").click();
+
+    // Dialog should close
+    await expect(page.getByTestId("new-project-dialog")).not.toBeVisible();
+
+    // Should navigate to board view with the project
+    await expect(page.getByTestId("board-view")).toBeVisible();
+
+    // Project name should be displayed in the board view header
+    await expect(page.getByTestId("board-view").getByText("test-new-project")).toBeVisible();
+
+    // Kanban columns should be visible
+    await expect(page.getByText("Backlog")).toBeVisible();
+    await expect(page.getByText("In Progress")).toBeVisible();
+    await expect(page.getByText("Verified")).toBeVisible();
+  });
+
+  test("created project appears in recent projects on welcome view", async ({ page }) => {
+    await page.goto("/");
+
+    // Create a project
+    await page.getByTestId("new-project-card").click();
+    await page.getByTestId("project-name-input").fill("recent-project-test");
+    await page.getByTestId("project-path-input").fill("/Users/test/projects");
+    await page.getByTestId("confirm-create-project").click();
+
+    // Verify we're on board view
+    await expect(page.getByTestId("board-view")).toBeVisible();
+
+    // Go back to welcome view by clicking Automaker title (if there's a way)
+    // For now, reload the page and check recent projects
+    await page.goto("/");
+
+    // The project should appear in recent projects section (use role to be specific)
+    await expect(page.getByRole("heading", { name: "Recent Projects" })).toBeVisible();
+    await expect(page.getByTestId("welcome-view").getByText("recent-project-test", { exact: true })).toBeVisible();
+  });
+});
+
+test.describe("Open Project Workflow", () => {
+  test("clicking Open Project triggers directory selection", async ({ page }) => {
+    await page.goto("/");
+
+    // In web mode, clicking Open Project card will show a prompt dialog
+    // We can't fully test native dialogs, but we can verify the click works
+    await expect(page.getByTestId("open-project-card")).toBeVisible();
+  });
+
+  test("opens existing project and navigates to board view", async ({ page }) => {
+    await page.goto("/");
+
+    // Mock the window.prompt response
+    await page.evaluate(() => {
+      window.prompt = () => "/mock/existing-project";
+    });
+
+    // Click Open Project card
+    await page.getByTestId("open-project-card").click();
+
+    // Should navigate to board view
+    await expect(page.getByTestId("board-view")).toBeVisible();
+
+    // Project name should be derived from path
+    await expect(page.getByTestId("board-view").getByText("existing-project")).toBeVisible();
+  });
+
+  test("opened project loads into dashboard with features", async ({ page }) => {
+    await page.goto("/");
+
+    // Mock the window.prompt response
+    await page.evaluate(() => {
+      window.prompt = () => "/mock/existing-project";
+    });
+
+    // Click Open Project
+    await page.getByTestId("open-project-card").click();
+
+    // Should show board view
+    await expect(page.getByTestId("board-view")).toBeVisible();
+
+    // Should have loaded features from the mock feature_list.json
+    // The mock returns "Sample Feature" in backlog
+    await expect(page.getByTestId("kanban-column-backlog").getByText("Sample Feature")).toBeVisible();
+  });
+
+  test("can click on recent project to reopen it", async ({ page }) => {
+    await page.goto("/");
+
+    // First, create a project to have it in recent projects
+    await page.getByTestId("new-project-card").click();
+    await page.getByTestId("project-name-input").fill("reopenable-project");
+    await page.getByTestId("project-path-input").fill("/Users/test/projects");
+    await page.getByTestId("confirm-create-project").click();
+
+    // Verify on board view
+    await expect(page.getByTestId("board-view")).toBeVisible();
+
+    // Go back to welcome view
+    await page.goto("/");
+
+    // Wait for recent projects to appear
+    await expect(page.getByRole("heading", { name: "Recent Projects" })).toBeVisible();
+
+    // Click on the recent project
+    const recentProjectCard = page.getByText("reopenable-project", { exact: true }).first();
+    await recentProjectCard.click();
+
+    // Should navigate to board view with that project
+    await expect(page.getByTestId("board-view")).toBeVisible();
+    await expect(page.getByTestId("board-view").getByText("reopenable-project")).toBeVisible();
+  });
+});

app/tests/settings.spec.ts

@@ -0,0 +1,112 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("Settings - API Key Management", () => {
+  test("can navigate to settings page", async ({ page }) => {
+    await page.goto("/");
+
+    // Click settings button in sidebar
+    await page.getByTestId("settings-button").click();
+
+    // Should show settings view
+    await expect(page.getByTestId("settings-view")).toBeVisible();
+    await expect(page.getByRole("heading", { name: "Settings" })).toBeVisible();
+    await expect(page.getByText("API Keys", { exact: true })).toBeVisible();
+  });
+
+  test("shows Anthropic and Google API key inputs", async ({ page }) => {
+    await page.goto("/");
+    await page.getByTestId("settings-button").click();
+
+    // Check input fields exist
+    await expect(page.getByTestId("anthropic-api-key-input")).toBeVisible();
+    await expect(page.getByTestId("google-api-key-input")).toBeVisible();
+  });
+
+  test("can enter and save Anthropic API key", async ({ page }) => {
+    await page.goto("/");
+    await page.getByTestId("settings-button").click();
+
+    // Enter API key
+    await page.getByTestId("anthropic-api-key-input").fill("sk-ant-test-key-123");
+
+    // Save
+    await page.getByTestId("save-settings").click();
+
+    // Should show saved confirmation
+    await expect(page.getByText("Saved!")).toBeVisible();
+
+    // Reload page and verify key persists
+    await page.reload();
+    await page.getByTestId("settings-button").click();
+
+    // Toggle visibility to see the key
+    await page.getByTestId("toggle-anthropic-visibility").click();
+    await expect(page.getByTestId("anthropic-api-key-input")).toHaveValue("sk-ant-test-key-123");
+  });
+
+  test("can enter and save Google API key", async ({ page }) => {
+    await page.goto("/");
+    await page.getByTestId("settings-button").click();
+
+    // Enter API key
+    await page.getByTestId("google-api-key-input").fill("AIzaSyTest123");
+
+    // Save
+    await page.getByTestId("save-settings").click();
+
+    // Reload page and verify key persists
+    await page.reload();
+    await page.getByTestId("settings-button").click();
+
+    // Toggle visibility
+    await page.getByTestId("toggle-google-visibility").click();
+    await expect(page.getByTestId("google-api-key-input")).toHaveValue("AIzaSyTest123");
+  });
+
+  test("API key inputs are password type by default", async ({ page }) => {
+    await page.goto("/");
+    await page.getByTestId("settings-button").click();
+
+    // Check input types are password
+    await expect(page.getByTestId("anthropic-api-key-input")).toHaveAttribute("type", "password");
+    await expect(page.getByTestId("google-api-key-input")).toHaveAttribute("type", "password");
+  });
+
+  test("can toggle API key visibility", async ({ page }) => {
+    await page.goto("/");
+    await page.getByTestId("settings-button").click();
+
+    // Initially password type
+    await expect(page.getByTestId("anthropic-api-key-input")).toHaveAttribute("type", "password");
+
+    // Toggle visibility
+    await page.getByTestId("toggle-anthropic-visibility").click();
+
+    // Now should be text type
+    await expect(page.getByTestId("anthropic-api-key-input")).toHaveAttribute("type", "text");
+
+    // Toggle back
+    await page.getByTestId("toggle-anthropic-visibility").click();
+    await expect(page.getByTestId("anthropic-api-key-input")).toHaveAttribute("type", "password");
+  });
+
+  test("can navigate back to home from settings", async ({ page }) => {
+    await page.goto("/");
+    await page.getByTestId("settings-button").click();
+
+    // Click back to home
+    await page.getByTestId("back-to-home").click();
+
+    // Should be back on welcome view
+    await expect(page.getByTestId("welcome-view")).toBeVisible();
+  });
+
+  test("shows security notice about local storage", async ({ page }) => {
+    await page.goto("/");
+    await page.getByTestId("settings-button").click();
+
+    // Should show security notice
+    await expect(page.getByText("Security Notice")).toBeVisible();
+    await expect(page.getByText(/stored in your browser's local storage/i)).toBeVisible();
+  });
+});