IDK

Implement planning/speckits rebase

.github/scripts/upload-to-r2.js

@@ -5,6 +5,8 @@ const {
 } = require("@aws-sdk/client-s3");
 const fs = require("fs");
 const path = require("path");
+const https = require("https");
+const { pipeline } = require("stream/promises");
 
 const s3Client = new S3Client({
   region: "auto",
@@ -18,6 +20,7 @@ const s3Client = new S3Client({
 const BUCKET = process.env.R2_BUCKET_NAME;
 const PUBLIC_URL = process.env.R2_PUBLIC_URL;
 const VERSION = process.env.RELEASE_VERSION;
+const RELEASE_TAG = process.env.RELEASE_TAG || `v${VERSION}`;
 const GITHUB_REPO = process.env.GITHUB_REPOSITORY;
 
 async function fetchExistingReleases() {
@@ -62,8 +65,230 @@ function findArtifacts(dir, pattern) {
   return files.filter((f) => pattern.test(f)).map((f) => path.join(dir, f));
 }
 
+async function checkUrlAccessible(url, maxRetries = 10, initialDelay = 1000) {
+  for (let attempt = 0; attempt < maxRetries; attempt++) {
+    try {
+      const result = await new Promise((resolve, reject) => {
+        const request = https.get(url, { timeout: 10000 }, (response) => {
+          const statusCode = response.statusCode;
+
+          // Follow redirects
+          if (
+            statusCode === 302 ||
+            statusCode === 301 ||
+            statusCode === 307 ||
+            statusCode === 308
+          ) {
+            const redirectUrl = response.headers.location;
+            response.destroy();
+            if (!redirectUrl) {
+              resolve({
+                accessible: false,
+                statusCode,
+                error: "Redirect without location header",
+              });
+              return;
+            }
+            // Follow the redirect URL
+            return https
+              .get(redirectUrl, { timeout: 10000 }, (redirectResponse) => {
+                const redirectStatus = redirectResponse.statusCode;
+                const contentType =
+                  redirectResponse.headers["content-type"] || "";
+                // Check if it's actually a file (zip/tar.gz) and not HTML
+                const isFile =
+                  contentType.includes("application/zip") ||
+                  contentType.includes("application/gzip") ||
+                  contentType.includes("application/x-gzip") ||
+                  contentType.includes("application/x-tar") ||
+                  redirectUrl.includes(".zip") ||
+                  redirectUrl.includes(".tar.gz");
+                const isGood =
+                  redirectStatus >= 200 && redirectStatus < 300 && isFile;
+                redirectResponse.destroy();
+                resolve({
+                  accessible: isGood,
+                  statusCode: redirectStatus,
+                  finalUrl: redirectUrl,
+                  contentType,
+                });
+              })
+              .on("error", (error) => {
+                resolve({
+                  accessible: false,
+                  statusCode,
+                  error: error.message,
+                });
+              })
+              .on("timeout", function () {
+                this.destroy();
+                resolve({
+                  accessible: false,
+                  statusCode,
+                  error: "Timeout following redirect",
+                });
+              });
+          }
+
+          // Check if status is good (200-299 range) and it's actually a file
+          const contentType = response.headers["content-type"] || "";
+          const isFile =
+            contentType.includes("application/zip") ||
+            contentType.includes("application/gzip") ||
+            contentType.includes("application/x-gzip") ||
+            contentType.includes("application/x-tar") ||
+            url.includes(".zip") ||
+            url.includes(".tar.gz");
+          const isGood = statusCode >= 200 && statusCode < 300 && isFile;
+          response.destroy();
+          resolve({ accessible: isGood, statusCode, contentType });
+        });
+
+        request.on("error", (error) => {
+          resolve({
+            accessible: false,
+            statusCode: null,
+            error: error.message,
+          });
+        });
+
+        request.on("timeout", () => {
+          request.destroy();
+          resolve({
+            accessible: false,
+            statusCode: null,
+            error: "Request timeout",
+          });
+        });
+      });
+
+      if (result.accessible) {
+        if (attempt > 0) {
+          console.log(
+            `✓ URL ${url} is now accessible after ${attempt} retries (status: ${result.statusCode})`
+          );
+        } else {
+          console.log(
+            `✓ URL ${url} is accessible (status: ${result.statusCode})`
+          );
+        }
+        return result.finalUrl || url; // Return the final URL (after redirects) if available
+      } else {
+        const errorMsg = result.error ? ` - ${result.error}` : "";
+        const statusMsg = result.statusCode
+          ? ` (status: ${result.statusCode})`
+          : "";
+        const contentTypeMsg = result.contentType
+          ? ` [content-type: ${result.contentType}]`
+          : "";
+        console.log(
+          `✗ URL ${url} not accessible${statusMsg}${contentTypeMsg}${errorMsg}`
+        );
+      }
+    } catch (error) {
+      console.log(`✗ URL ${url} check failed: ${error.message}`);
+    }
+
+    if (attempt < maxRetries - 1) {
+      const delay = initialDelay * Math.pow(2, attempt);
+      console.log(
+        `  Retrying in ${delay}ms... (attempt ${attempt + 1}/${maxRetries})`
+      );
+      await new Promise((resolve) => setTimeout(resolve, delay));
+    }
+  }
+
+  throw new Error(`URL ${url} is not accessible after ${maxRetries} attempts`);
+}
+
+async function downloadFromGitHub(url, outputPath) {
+  return new Promise((resolve, reject) => {
+    const request = https.get(url, { timeout: 30000 }, (response) => {
+      const statusCode = response.statusCode;
+
+      // Follow redirects (all redirect types)
+      if (
+        statusCode === 301 ||
+        statusCode === 302 ||
+        statusCode === 307 ||
+        statusCode === 308
+      ) {
+        const redirectUrl = response.headers.location;
+        response.destroy();
+        if (!redirectUrl) {
+          reject(new Error(`Redirect without location header for ${url}`));
+          return;
+        }
+        // Resolve relative redirects
+        const finalRedirectUrl = redirectUrl.startsWith("http")
+          ? redirectUrl
+          : new URL(redirectUrl, url).href;
+        console.log(`  Following redirect: ${finalRedirectUrl}`);
+        return downloadFromGitHub(finalRedirectUrl, outputPath)
+          .then(resolve)
+          .catch(reject);
+      }
+
+      if (statusCode !== 200) {
+        response.destroy();
+        reject(
+          new Error(
+            `Failed to download ${url}: ${statusCode} ${response.statusMessage}`
+          )
+        );
+        return;
+      }
+
+      const fileStream = fs.createWriteStream(outputPath);
+      response.pipe(fileStream);
+      fileStream.on("finish", () => {
+        fileStream.close();
+        resolve();
+      });
+      fileStream.on("error", (error) => {
+        response.destroy();
+        reject(error);
+      });
+    });
+
+    request.on("error", reject);
+    request.on("timeout", () => {
+      request.destroy();
+      reject(new Error(`Request timeout for ${url}`));
+    });
+  });
+}
+
 async function main() {
   const artifactsDir = "artifacts";
+  const tempDir = path.join(artifactsDir, "temp");
+
+  // Create temp directory for downloaded GitHub archives
+  if (!fs.existsSync(tempDir)) {
+    fs.mkdirSync(tempDir, { recursive: true });
+  }
+
+  // Download source archives from GitHub
+  const githubZipUrl = `https://github.com/${GITHUB_REPO}/archive/refs/tags/${RELEASE_TAG}.zip`;
+  const githubTarGzUrl = `https://github.com/${GITHUB_REPO}/archive/refs/tags/${RELEASE_TAG}.tar.gz`;
+
+  const sourceZipPath = path.join(tempDir, `automaker-${VERSION}.zip`);
+  const sourceTarGzPath = path.join(tempDir, `automaker-${VERSION}.tar.gz`);
+
+  console.log(`Waiting for source archives to be available on GitHub...`);
+  console.log(`  ZIP: ${githubZipUrl}`);
+  console.log(`  TAR.GZ: ${githubTarGzUrl}`);
+
+  // Wait for archives to be accessible with exponential backoff
+  // This returns the final URL after following redirects
+  const finalZipUrl = await checkUrlAccessible(githubZipUrl);
+  const finalTarGzUrl = await checkUrlAccessible(githubTarGzUrl);
+
+  console.log(`Downloading source archives from GitHub...`);
+  await downloadFromGitHub(finalZipUrl, sourceZipPath);
+  await downloadFromGitHub(finalTarGzUrl, sourceTarGzPath);
+
+  console.log(`Downloaded source archives successfully`);
 
   // Find all artifacts
   const artifacts = {
@@ -77,6 +302,8 @@ async function main() {
       path.join(artifactsDir, "linux-builds"),
       /\.AppImage$/
     ),
+    sourceZip: [sourceZipPath],
+    sourceTarGz: [sourceTarGzPath],
   };
 
   console.log("Found artifacts:");
@@ -97,6 +324,8 @@ async function main() {
     macos: "application/x-apple-diskimage",
     macosArm: "application/x-apple-diskimage",
     linux: "application/x-executable",
+    sourceZip: "application/zip",
+    sourceTarGz: "application/gzip",
   };
 
   for (const [platform, files] of Object.entries(artifacts)) {
@@ -115,7 +344,12 @@ async function main() {
       url: `${PUBLIC_URL}/releases/${VERSION}/${filename}`,
       filename,
       size,
-      arch: platform === "macosArm" ? "arm64" : "x64",
+      arch:
+        platform === "macosArm"
+          ? "arm64"
+          : platform === "sourceZip" || platform === "sourceTarGz"
+          ? "source"
+          : "x64",
     };
   }
 
@@ -126,7 +360,7 @@ async function main() {
     version: VERSION,
     date: new Date().toISOString(),
     assets,
-    githubReleaseUrl: `https://github.com/${GITHUB_REPO}/releases/tag/${VERSION}`,
+    githubReleaseUrl: `https://github.com/${GITHUB_REPO}/releases/tag/${RELEASE_TAG}`,
   };
 
   // Remove existing entry for this version if re-running

.github/workflows/e2e-tests.yml

@@ -0,0 +1,96 @@
+name: E2E Tests
+
+on:
+  pull_request:
+    branches:
+      - "*"
+  push:
+    branches:
+      - main
+      - master
+
+jobs:
+  e2e:
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "22"
+          cache: "npm"
+          cache-dependency-path: package-lock.json
+
+      - name: Configure Git for HTTPS
+        # Convert SSH URLs to HTTPS for git dependencies (e.g., @electron/node-gyp)
+        # This is needed because SSH authentication isn't available in CI
+        run: git config --global url."https://github.com/".insteadOf "git@github.com:"
+
+      - name: Install dependencies
+        # Use npm install instead of npm ci to correctly resolve platform-specific
+        # optional dependencies (e.g., @tailwindcss/oxide, lightningcss binaries)
+        run: npm install
+
+      - name: Install Linux native bindings
+        # Workaround for npm optional dependencies bug (npm/cli#4828)
+        # Explicitly install Linux bindings needed for build tools
+        run: |
+          npm install --no-save --force \
+            @rollup/rollup-linux-x64-gnu@4.53.3 \
+            @tailwindcss/oxide-linux-x64-gnu@4.1.17
+
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps chromium
+        working-directory: apps/app
+
+      - name: Build server
+        run: npm run build --workspace=apps/server
+
+      - name: Start backend server
+        run: npm run start --workspace=apps/server &
+        env:
+          PORT: 3008
+          NODE_ENV: test
+
+      - name: Wait for backend server
+        run: |
+          echo "Waiting for backend server to be ready..."
+          for i in {1..30}; do
+            if curl -s http://localhost:3008/api/health > /dev/null 2>&1; then
+              echo "Backend server is ready!"
+              exit 0
+            fi
+            echo "Waiting... ($i/30)"
+            sleep 1
+          done
+          echo "Backend server failed to start!"
+          exit 1
+
+      - name: Run E2E tests
+        # Playwright automatically starts the Next.js frontend via webServer config
+        # (see apps/app/playwright.config.ts) - no need to start it manually
+        run: npm run test --workspace=apps/app
+        env:
+          CI: true
+          NEXT_PUBLIC_SERVER_URL: http://localhost:3008
+          NEXT_PUBLIC_SKIP_SETUP: "true"
+
+      - name: Upload Playwright report
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: apps/app/playwright-report/
+          retention-days: 7
+
+      - name: Upload test results
+        uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: test-results
+          path: apps/app/test-results/
+          retention-days: 7

.github/workflows/pr-check.yml

@@ -20,14 +20,30 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: "20"
+          node-version: "22"
           cache: "npm"
           cache-dependency-path: package-lock.json
 
+      - name: Check for SSH URLs in lockfile
+        run: npm run lint:lockfile
+
+      - name: Configure Git for HTTPS
+        # Convert SSH URLs to HTTPS for git dependencies (e.g., @electron/node-gyp)
+        # This is needed because SSH authentication isn't available in CI
+        run: git config --global url."https://github.com/".insteadOf "git@github.com:"
+
       - name: Install dependencies
         # Use npm install instead of npm ci to correctly resolve platform-specific
         # optional dependencies (e.g., @tailwindcss/oxide, lightningcss binaries)
         run: npm install
 
+      - name: Install Linux native bindings
+        # Workaround for npm optional dependencies bug (npm/cli#4828)
+        # Explicitly install Linux bindings needed for build tools
+        run: |
+          npm install --no-save --force \
+            @rollup/rollup-linux-x64-gnu@4.53.3 \
+            @tailwindcss/oxide-linux-x64-gnu@4.1.17
+
       - name: Run build:electron
         run: npm run build:electron

.github/workflows/release.yml

@@ -39,15 +39,44 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: "20"
+          node-version: "22"
           cache: "npm"
           cache-dependency-path: package-lock.json
 
+      - name: Configure Git for HTTPS
+        # Convert SSH URLs to HTTPS for git dependencies (e.g., @electron/node-gyp)
+        # This is needed because SSH authentication isn't available in CI
+        run: git config --global url."https://github.com/".insteadOf "git@github.com:"
+
       - name: Install dependencies
         # Use npm install instead of npm ci to correctly resolve platform-specific
         # optional dependencies (e.g., @tailwindcss/oxide, lightningcss binaries)
         run: npm install
 
+      - name: Install Linux native bindings
+        # Workaround for npm optional dependencies bug (npm/cli#4828)
+        # Only needed on Linux - macOS and Windows get their bindings automatically
+        if: matrix.os == 'ubuntu-latest'
+        run: |
+          npm install --no-save --force \
+            @rollup/rollup-linux-x64-gnu@4.53.3 \
+            @tailwindcss/oxide-linux-x64-gnu@4.1.17
+
+      - name: Extract and set version
+        id: version
+        shell: bash
+        run: |
+          VERSION_TAG="${{ github.event.inputs.version || github.ref_name }}"
+          # Remove 'v' prefix if present (e.g., v1.0.0 -> 1.0.0)
+          VERSION="${VERSION_TAG#v}"
+          echo "version=$VERSION" >> $GITHUB_OUTPUT
+          echo "Extracted version: $VERSION from tag: $VERSION_TAG"
+          # Update the app's package.json version
+          cd apps/app
+          npm version $VERSION --no-git-tag-version
+          cd ../..
+          echo "Updated apps/app/package.json to version $VERSION"
+
       - name: Build Electron App (macOS)
         if: matrix.os == 'macos-latest'
         env:
@@ -127,6 +156,17 @@ jobs:
       - name: Install AWS SDK
         run: npm install @aws-sdk/client-s3
 
+      - name: Extract version
+        id: version
+        shell: bash
+        run: |
+          VERSION_TAG="${{ github.event.inputs.version || github.ref_name }}"
+          # Remove 'v' prefix if present (e.g., v1.0.0 -> 1.0.0)
+          VERSION="${VERSION_TAG#v}"
+          echo "version=$VERSION" >> $GITHUB_OUTPUT
+          echo "version_tag=$VERSION_TAG" >> $GITHUB_OUTPUT
+          echo "Extracted version: $VERSION from tag: $VERSION_TAG"
+
       - name: Upload to R2 and update releases.json
         env:
           R2_ENDPOINT: ${{ secrets.R2_ENDPOINT }}
@@ -134,6 +174,7 @@ jobs:
           R2_SECRET_ACCESS_KEY: ${{ secrets.R2_SECRET_ACCESS_KEY }}
           R2_BUCKET_NAME: ${{ secrets.R2_BUCKET_NAME }}
           R2_PUBLIC_URL: ${{ secrets.R2_PUBLIC_URL }}
-          RELEASE_VERSION: ${{ github.event.inputs.version || github.ref_name }}
+          RELEASE_VERSION: ${{ steps.version.outputs.version }}
+          RELEASE_TAG: ${{ steps.version.outputs.version_tag }}
           GITHUB_REPOSITORY: ${{ github.repository }}
         run: node .github/scripts/upload-to-r2.js

.github/workflows/test.yml

@@ -0,0 +1,58 @@
+name: Test Suite
+
+on:
+  pull_request:
+    branches:
+      - "*"
+  push:
+    branches:
+      - main
+      - master
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "22"
+          cache: "npm"
+          cache-dependency-path: package-lock.json
+
+      - name: Configure Git for HTTPS
+        # Convert SSH URLs to HTTPS for git dependencies (e.g., @electron/node-gyp)
+        # This is needed because SSH authentication isn't available in CI
+        run: git config --global url."https://github.com/".insteadOf "git@github.com:"
+
+      - name: Install dependencies
+        # Use npm install instead of npm ci to correctly resolve platform-specific
+        # optional dependencies (e.g., @tailwindcss/oxide, lightningcss binaries)
+        run: npm install
+
+      - name: Install Linux native bindings
+        # Workaround for npm optional dependencies bug (npm/cli#4828)
+        # Explicitly install Linux bindings needed for build tools
+        run: |
+          npm install --no-save --force \
+            @rollup/rollup-linux-x64-gnu@4.53.3 \
+            @tailwindcss/oxide-linux-x64-gnu@4.1.17
+
+      - name: Run server tests with coverage
+        run: npm run test:server:coverage
+        env:
+          NODE_ENV: test
+
+      # - name: Upload coverage reports
+      #   uses: codecov/codecov-action@v4
+      #   if: always()
+      #   with:
+      #     files: ./apps/server/coverage/coverage-final.json
+      #     flags: server
+      #     name: server-coverage
+      #   env:
+      #     CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}

.gitignore

@@ -6,8 +6,75 @@ node_modules/
 
 # Build outputs
 dist/
+build/
+out/
 .next/
+.turbo/
+
+# Automaker
 .automaker/images/
 .automaker/
 /.automaker/*
 /.automaker/
+
+.worktrees/
+
+/logs
+# Logs
+logs/
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# OS-specific files
+.DS_Store
+.DS_Store?
+._*
+Thumbs.db
+ehthumbs.db
+Desktop.ini
+
+# IDE/Editor configs
+.vscode/
+.idea/
+*.sublime-workspace
+*.sublime-project
+
+# Editor backup/temp files
+*~
+*.bak
+*.backup
+*.orig
+*.swp
+*.swo
+*.tmp
+*.temp
+
+# Local settings (user-specific)
+*.local.json
+
+# Application state/backup
+backup.json
+
+# Test artifacts
+test-results/
+coverage/
+.nyc_output/
+*.lcov
+playwright-report/
+blob-report/
+
+# Environment files (keep .example)
+.env
+.env.local
+.env.*.local
+!.env.example
+!.env.local.example
+
+# TypeScript
+*.tsbuildinfo
+
+# Misc
+*.pem

.npmrc

@@ -8,3 +8,9 @@
 #
 # In CI/CD: Use "npm install" instead of "npm ci" to allow npm to resolve
 # the correct platform-specific binaries at install time.
+
+# Include bindings for all platforms in package-lock.json to support CI/CD
+# This ensures Linux, macOS, and Windows bindings are all present
+# NOTE: Only enable when regenerating package-lock.json, then comment out to keep installs fast
+# supportedArchitectures.os=linux,darwin,win32
+# supportedArchitectures.cpu=x64,arm64

DISCLAIMER.md

@@ -19,9 +19,11 @@ While we have made efforts to review this codebase for security vulnerabilities
 ## Recommendations
 
 ### 1. Review the Code First
+
 Before running Automaker, we strongly recommend reviewing the source code yourself to understand what operations it performs and ensure you are comfortable with its behavior.
 
 ### 2. Use Sandboxing (Highly Recommended)
+
 **We do not recommend running Automaker directly on your local computer** due to the risk of AI agents having access to your entire file system. Instead, consider:
 
 - **Docker**: Run Automaker in a Docker container to isolate it from your host system
@@ -29,20 +31,25 @@ Before running Automaker, we strongly recommend reviewing the source code yourse
 - **Cloud Development Environment**: Use a cloud-based development environment that provides isolation
 
 ### 3. Limit Access
+
 If you must run locally:
+
 - Create a dedicated user account with limited permissions
 - Only grant access to specific project directories
 - Avoid running with administrator/root privileges
 - Keep sensitive files and credentials outside of project directories
 
 ### 4. Monitor Activity
+
 - Review the agent's actions in the output logs
 - Pay attention to file modifications and command executions
 - Stop the agent immediately if you notice unexpected behavior
 
-## No Warranty
+## No Warranty & Limitation of Liability
 
-This software is provided "as is", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose, and noninfringement. In no event shall the authors or copyright holders be liable for any claim, damages, or other liability, whether in an action of contract, tort, or otherwise, arising from, out of, or in connection with the software or the use or other dealings in the software.
+THE SOFTWARE UTILIZES ARTIFICIAL INTELLIGENCE TO GENERATE CODE, EXECUTE COMMANDS, AND INTERACT WITH YOUR FILE SYSTEM. YOU ACKNOWLEDGE THAT AI SYSTEMS CAN BE UNPREDICTABLE, MAY GENERATE INCORRECT, INSECURE, OR DESTRUCTIVE CODE, AND MAY TAKE ACTIONS THAT COULD DAMAGE YOUR SYSTEM, FILES, OR HARDWARE.
+
+This software is provided "as is", without warranty of any kind, express or implied. In no event shall the authors or copyright holders be liable for any claim, damages, or other liability, including but not limited to hardware damage, data loss, financial loss, or business interruption, whether in an action of contract, tort, or otherwise, arising from, out of, or in connection with the software or the use or other dealings in the software.
 
 ## Acknowledgment
 

LICENSE

@@ -1,208 +1,141 @@
-GNU AFFERO GENERAL PUBLIC LICENSE
-Version 3, 19 November 2007
+AUTOMAKER LICENSE AGREEMENT
 
-Copyright © 2007 Free Software Foundation, Inc. <https://fsf.org/>
-Everyone is permitted to copy and distribute verbatim copies of this license document, but changing it is not allowed.
+This License Agreement ("Agreement") is entered into between you ("Licensee") and the copyright holders of Automaker ("Licensor"). By using, copying, modifying, downloading, cloning, or distributing the Software (as defined below), you agree to be bound by the terms of this Agreement.
 
-Preamble
-The GNU Affero General Public License is a free, copyleft license for software and other kinds of works, specifically designed to ensure cooperation with the community in the case of network server software.
+1. DEFINITIONS
 
-The licenses for most software and other practical works are designed to take away your freedom to share and change the works. By contrast, our General Public Licenses are intended to guarantee your freedom to share and change all versions of a program--to make sure it remains free software for all its users.
+"Software" means the Automaker software, including all source code, object code, documentation, and related materials.
 
-When we speak of free software, we are referring to freedom, not price. Our General Public Licenses are designed to make sure that you have the freedom to distribute copies of free software (and charge for them if you wish), that you receive source code or can get it if you want it, that you can change the software or use pieces of it in new free programs, and that you know you can do these things.
+"Generated Files" means files created by the Software during normal operation to store internal state, configuration, or working data, including but not limited to app_spec.txt, feature.json, and similar files generated by the Software. Generated Files are not considered part of the Software for the purposes of this license and are not subject to the restrictions herein.
 
-Developers that use our General Public Licenses protect your rights with two steps: (1) assert copyright on the software, and (2) offer you this License which gives you legal permission to copy, distribute and/or modify the software.
+"Derivative Work" means any work that is based on, derived from, or incorporates the Software or any substantial portion of it, including but not limited to modifications, forks, adaptations, translations, or any altered version of the Software.
 
-A secondary benefit of defending all users' freedom is that improvements made in alternate versions of the program, if they receive widespread use, become available for other developers to incorporate. Many developers of free software are heartened and encouraged by the resulting cooperation. However, in the case of software used on network servers, this result may fail to come about. The GNU General Public License permits making a modified version and letting the public access it on a server without ever releasing its source code to the public.
+"Monetization" means any activity that generates revenue, income, or commercial benefit from the Software itself or any Derivative Work, including but not limited to:
 
-The GNU Affero General Public License is designed specifically to ensure that, in such cases, the modified source code becomes available to the community. It requires the operator of a network server to provide the source code of the modified version running there to the users of that server. Therefore, public use of a modified version, on a publicly accessible server, gives the public access to the source code of the modified version.
+- Reselling, redistributing, or sublicensing the Software, any Derivative Work, or any substantial portion thereof
+- Including the Software, any Derivative Work, or substantial portions thereof in a product or service that you sell or distribute
+- Offering the Software, any Derivative Work, or substantial portions thereof as a standalone product or service for sale
+- Hosting the Software or any Derivative Work as a service (whether free or paid) for use by others, including cloud hosting, Software-as-a-Service (SaaS), or any other form of hosted access for third parties
+- Extracting, reselling, redistributing, or sublicensing any prompts, context, or other instructional content bundled within the Software
+- Creating, distributing, or selling modified versions, forks, or Derivative Works of the Software
 
-An older license, called the Affero General Public License and published by Affero, was designed to accomplish similar goals. This is a different license, not a version of the Affero GPL, but Affero has released a new version of the Affero GPL which permits relicensing under this license.
+Monetization does NOT include:
 
-The precise terms and conditions for copying, distribution and modification follow.
+- Using the Software internally within your organization, regardless of whether your organization is for-profit
+- Using the Software to build products or services that generate revenue, as long as you are not reselling or redistributing the Software itself
+- Using the Software to provide services for which fees are charged, as long as the Software itself is not being resold or redistributed
+- Hosting the Software anywhere for personal use by a single developer, as long as the Software is not made accessible to others
 
-TERMS AND CONDITIONS 0. Definitions.
-"This License" refers to version 3 of the GNU Affero General Public License.
+"Core Contributors" means the following individuals who are granted perpetual, royalty-free licenses:
 
-"Copyright" also means copyright-like laws that apply to other kinds of works, such as semiconductor masks.
+- Cody Seibert (webdevcody)
+- SuperComboGamer (SCG)
+- Kacper Lachowicz (Shironex, Shirone)
+- Ben Scott (trueheads)
 
-"The Program" refers to any copyrightable work licensed under this License. Each licensee is addressed as "you". "Licensees" and "recipients" may be individuals or organizations.
+2. GRANT OF LICENSE
 
-To "modify" a work means to copy from or adapt all or part of the work in a fashion requiring copyright permission, other than the making of an exact copy. The resulting work is called a "modified version" of the earlier work or a work "based on" the earlier work.
+Subject to the terms and conditions of this Agreement, Licensor hereby grants to Licensee a non-exclusive, non-transferable license to use, copy, modify, and distribute the Software, provided that:
 
-A "covered work" means either the unmodified Program or a work based on the Program.
+a) Licensee may freely clone, install, and use the Software locally or within an organization for the purpose of building, developing, and maintaining other products, software, or services. There are no restrictions on the products you build _using_ the Software.
 
-To "propagate" a work means to do anything with it that, without permission, would make you directly or secondarily liable for infringement under applicable copyright law, except executing it on a computer or modifying a private copy. Propagation includes copying, distribution (with or without modification), making available to the public, and in some countries other activities as well.
+b) Licensee may run the Software on personal or organizational infrastructure for internal use.
 
-To "convey" a work means any kind of propagation that enables other parties to make or receive copies. Mere interaction with a user through a computer network, with no transfer of a copy, is not conveying.
+c) Core Contributors are each individually granted a perpetual, worldwide, royalty-free, non-exclusive license to use, copy, modify, distribute, and sublicense the Software for any purpose, including Monetization, without payment of any fees or royalties. Each Core Contributor may exercise these rights independently and does not require permission, consent, or approval from any other Core Contributor to Monetize the Software in any way they see fit.
 
-An interactive user interface displays "Appropriate Legal Notices" to the extent that it includes a convenient and prominently visible feature that (1) displays an appropriate copyright notice, and (2) tells the user that there is no warranty for the work (except to the extent that warranties are provided), that licensees may convey the work under this License, and how to view a copy of this License. If the interface presents a list of user commands or options, such as a menu, a prominent item in the list meets this criterion.
+d) Commercial licenses for the Software may be discussed and issued to external parties or companies seeking to use the Software for financial gain or Monetization purposes. Core Contributors already have full rights under section 2(c) and do not require commercial licenses. Any commercial license issued to external parties shall require a unanimous vote by all Core Contributors and shall be granted in writing and signed by all Core Contributors.
 
-1. Source Code.
-   The "source code" for a work means the preferred form of the work for making modifications to it. "Object code" means any non-source form of a work.
+e) The list of individuals defined as "Core Contributors" in Section 1 shall be amended to reflect any revocation or reinstatement of status made under this section.
 
-A "Standard Interface" means an interface that either is an official standard defined by a recognized standards body, or, in the case of interfaces specified for a particular programming language, one that is widely used among developers working in that language.
+3. RESTRICTIONS
 
-The "System Libraries" of an executable work include anything, other than the work as a whole, that (a) is included in the normal form of packaging a Major Component, but which is not part of that Major Component, and (b) serves only to enable use of the work with that Major Component, or to implement a Standard Interface for which an implementation is available to the public in source code form. A "Major Component", in this context, means a major essential component (kernel, window system, and so on) of the specific operating system (if any) on which the executable work runs, or a compiler used to produce the work, or an object code interpreter used to run it.
+Licensee may NOT:
 
-The "Corresponding Source" for a work in object code form means all the source code needed to generate, install, and (for an executable work) run the object code and to modify the work, including scripts to control those activities. However, it does not include the work's System Libraries, or general-purpose tools or generally available free programs which are used unmodified in performing those activities but which are not part of the work. For example, Corresponding Source includes interface definition files associated with source files for the work, and the source code for shared libraries and dynamically linked subprograms that the work is specifically designed to require, such as by intimate data communication or control flow between those subprograms and other parts of the work.
+- Engage in any Monetization of the Software or any Derivative Work without explicit written permission from all Core Contributors
+- Resell, redistribute, or sublicense the Software, any Derivative Work, or any substantial portion thereof
+- Create, distribute, or sell modified versions, forks, or Derivative Works of the Software for any commercial purpose
+- Include the Software, any Derivative Work, or substantial portions thereof in a product or service that you sell or distribute
+- Offer the Software, any Derivative Work, or substantial portions thereof as a standalone product or service for sale
+- Extract, resell, redistribute, or sublicense any prompts, context, or other instructional content bundled within the Software
+- Host the Software or any Derivative Work as a service (whether free or paid) for use by others (except Core Contributors)
+- Remove or alter any copyright notices or license terms
+- Use the Software in any manner that violates applicable laws or regulations
 
-The Corresponding Source need not include anything that users can regenerate automatically from other parts of the Corresponding Source.
+Licensee MAY:
 
-The Corresponding Source for a work in source code form is that same work.
+- Use the Software internally within their organization (commercial or non-profit)
+- Use the Software to build other commercial products (products that do NOT contain the Software or Derivative Works)
+- Modify the Software for internal use within their organization (commercial or non-profit)
 
-2. Basic Permissions.
-   All rights granted under this License are granted for the term of copyright on the Program, and are irrevocable provided the stated conditions are met. This License explicitly affirms your unlimited permission to run the unmodified Program. The output from running a covered work is covered by this License only if the output, given its content, constitutes a covered work. This License acknowledges your rights of fair use or other equivalent, as provided by copyright law.
+4. CORE CONTRIBUTOR STATUS MANAGEMENT
 
-You may make, run and propagate covered works that you do not convey, without conditions so long as your license otherwise remains in force. You may convey covered works to others for the sole purpose of having them make modifications exclusively for you, or provide you with facilities for running those works, provided that you comply with the terms of this License in conveying all material for which you do not control copyright. Those thus making or running the covered works for you must do so exclusively on your behalf, under your direction and control, on terms that prohibit them from making any copies of your copyrighted material outside their relationship with you.
+a) Core Contributor status may be revoked indefinitely by the remaining Core Contributors if:
 
-Conveying under any other circumstances is permitted solely under the conditions stated below. Sublicensing is not allowed; section 10 makes it unnecessary.
+- A Core Contributor cannot be reached for a period of one (1) month through reasonable means of communication (including but not limited to email, Discord, GitHub, or other project communication channels)
+- AND the Core Contributor has not contributed to the project during that one-month period. For purposes of this section, "contributed" means at least one of the following activities:
+  - Discussing the Software through project communication channels
+  - Committing code changes to the project repository
+  - Submitting bug fixes or patches
+  - Participating in project-related discussions or decision-making
 
-3. Protecting Users' Legal Rights From Anti-Circumvention Law.
-   No covered work shall be deemed part of an effective technological measure under any applicable law fulfilling obligations under article 11 of the WIPO copyright treaty adopted on 20 December 1996, or similar laws prohibiting or restricting circumvention of such measures.
+b) Revocation of Core Contributor status requires a unanimous vote by all other Core Contributors (excluding the Core Contributor whose status is being considered for revocation).
 
-When you convey a covered work, you waive any legal power to forbid circumvention of technological measures to the extent such circumvention is effected by exercising rights under this License with respect to the covered work, and you disclaim any intention to limit operation or modification of the work as a means of enforcing, against the work's users, your or third parties' legal rights to forbid circumvention of technological measures.
+c) Upon revocation of Core Contributor status, the individual shall no longer be considered a Core Contributor and shall lose the rights granted under section 2(c) of this Agreement. However, any Contributions made prior to revocation shall remain subject to the terms of section 5 (CONTRIBUTIONS AND RIGHTS ASSIGNMENT).
 
-4. Conveying Verbatim Copies.
-   You may convey verbatim copies of the Program's source code as you receive it, in any medium, provided that you conspicuously and appropriately publish on each copy an appropriate copyright notice; keep intact all notices stating that this License and any non-permissive terms added in accord with section 7 apply to the code; keep intact all notices of the absence of any warranty; and give all recipients a copy of this License along with the Program.
+d) A revoked Core Contributor may be reinstated to Core Contributor status with a unanimous vote by all current Core Contributors. Upon reinstatement, the individual shall regain all rights granted under section 2(c) of this Agreement.
 
-You may charge any price or no price for each copy that you convey, and you may offer support or warranty protection for a fee.
+5. CONTRIBUTIONS AND RIGHTS ASSIGNMENT
 
-5. Conveying Modified Source Versions.
-   You may convey a work based on the Program, or the modifications to produce it from the Program, in the form of source code under the terms of section 4, provided that you also meet all of these conditions:
+By submitting, pushing, or contributing any code, documentation, pull requests, issues, or other materials ("Contributions") to the Automaker project, you agree to the following terms without reservation:
 
-a) The work must carry prominent notices stating that you modified it, and giving a relevant date.
-b) The work must carry prominent notices stating that it is released under this License and any conditions added under section 7. This requirement modifies the requirement in section 4 to "keep intact all notices".
-c) You must license the entire work, as a whole, under this License to anyone who comes into possession of a copy. This License will therefore apply, along with any applicable section 7 additional terms, to the whole of the work, and all its parts, regardless of how they are packaged. This License gives no permission to license the work in any other way, but it does not invalidate such permission if you have separately received it.
-d) If the work has interactive user interfaces, each must display Appropriate Legal Notices; however, if the Program has interactive interfaces that do not display Appropriate Legal Notices, your work need not make them do so.
-A compilation of a covered work with other separate and independent works, which are not by their nature extensions of the covered work, and which are not combined with it such as to form a larger program, in or on a volume of a storage or distribution medium, is called an "aggregate" if the compilation and its resulting copyright are not used to limit the access or legal rights of the compilation's users beyond what the individual works permit. Inclusion of a covered work in an aggregate does not cause this License to apply to the other parts of the aggregate.
+a) **Full Ownership Transfer & Rights Grant:** You hereby assign to the Core Contributors all right, title, and interest in and to your Contributions, including all copyrights, patents, and other intellectual property rights. If such assignment is not effective under applicable law, you grant the Core Contributors an unrestricted, perpetual, worldwide, non-exclusive, royalty-free, fully paid-up, irrevocable, sublicensable, and transferable license to use, reproduce, modify, adapt, publish, translate, create derivative works from, distribute, perform, display, and otherwise exploit your Contributions in any manner they see fit, including for any commercial purpose or Monetization.
 
-6. Conveying Non-Source Forms.
-   You may convey a covered work in object code form under the terms of sections 4 and 5, provided that you also convey the machine-readable Corresponding Source under the terms of this License, in one of these ways:
+b) **No Take-Backs:** You understand and agree that this grant of rights is irrevocable ("no take-backs"). You cannot revoke, rescind, or terminate this grant of rights once your Contribution has been submitted.
 
-a) Convey the object code in, or embodied in, a physical product (including a physical distribution medium), accompanied by the Corresponding Source fixed on a durable physical medium customarily used for software interchange.
-b) Convey the object code in, or embodied in, a physical product (including a physical distribution medium), accompanied by a written offer, valid for at least three years and valid for as long as you offer spare parts or customer support for that product model, to give anyone who possesses the object code either (1) a copy of the Corresponding Source for all the software in the product that is covered by this License, on a durable physical medium customarily used for software interchange, for a price no more than your reasonable cost of physically performing this conveying of source, or (2) access to copy the Corresponding Source from a network server at no charge.
-c) Convey individual copies of the object code with a copy of the written offer to provide the Corresponding Source. This alternative is allowed only occasionally and noncommercially, and only if you received the object code with such an offer, in accord with subsection 6b.
-d) Convey the object code by offering access from a designated place (gratis or for a charge), and offer equivalent access to the Corresponding Source in the same way through the same place at no further charge. You need not require recipients to copy the Corresponding Source along with the object code. If the place to copy the object code is a network server, the Corresponding Source may be on a different server (operated by you or a third party) that supports equivalent copying facilities, provided you maintain clear directions next to the object code saying where to find the Corresponding Source. Regardless of what server hosts the Corresponding Source, you remain obligated to ensure that it is available for as long as needed to satisfy these requirements.
-e) Convey the object code using peer-to-peer transmission, provided you inform other peers where the object code and Corresponding Source of the work are being offered to the general public at no charge under subsection 6d.
-A separable portion of the object code, whose source code is excluded from the Corresponding Source as a System Library, need not be included in conveying the object code work.
+c) **Waiver of Moral Rights:** You waive any "moral rights" or other rights with respect to attribution of authorship or integrity of materials regarding your Contributions that you may have under any applicable law.
 
-A "User Product" is either (1) a "consumer product", which means any tangible personal property which is normally used for personal, family, or household purposes, or (2) anything designed or sold for incorporation into a dwelling. In determining whether a product is a consumer product, doubtful cases shall be resolved in favor of coverage. For a particular product received by a particular user, "normally used" refers to a typical or common use of that class of product, regardless of the status of the particular user or of the way in which the particular user actually uses, or expects or is expected to use, the product. A product is a consumer product regardless of whether the product has substantial commercial, industrial or non-consumer uses, unless such uses represent the only significant mode of use of the product.
+d) **Right to Contribute:** You represent and warrant that you are the original author of the Contributions, or that you have sufficient rights to grant the rights conveyed by this section, and that your Contributions do not infringe upon the rights of any third party.
 
-"Installation Information" for a User Product means any methods, procedures, authorization keys, or other information required to install and execute modified versions of a covered work in that User Product from a modified version of its Corresponding Source. The information must suffice to ensure that the continued functioning of the modified object code is in no case prevented or interfered with solely because modification has been made.
+6. TERMINATION
 
-If you convey an object code work under this section in, or with, or specifically for use in, a User Product, and the conveying occurs as part of a transaction in which the right of possession and use of the User Product is transferred to the recipient in perpetuity or for a fixed term (regardless of how the transaction is characterized), the Corresponding Source conveyed under this section must be accompanied by the Installation Information. But this requirement does not apply if neither you nor any third party retains the ability to install modified object code on the User Product (for example, the work has been installed in ROM).
+This license will terminate automatically if Licensee breaches any term of this Agreement. Upon termination, Licensee must immediately cease all use of the Software and destroy all copies in their possession.
 
-The requirement to provide Installation Information does not include a requirement to continue to provide support service, warranty, or updates for a work that has been modified or installed by the recipient, or for the User Product in which it has been modified or installed. Access to a network may be denied when the modification itself materially and adversely affects the operation of the network or violates the rules and protocols for communication across the network.
+7. HIGH RISK DISCLAIMER AND LIMITATION OF LIABILITY
 
-Corresponding Source conveyed, and Installation Information provided, in accord with this section must be in a format that is publicly documented (and with an implementation available to the public in source code form), and must require no special password or key for unpacking, reading or copying.
+a) **AI RISKS:** THE SOFTWARE UTILIZES ARTIFICIAL INTELLIGENCE TO GENERATE CODE, EXECUTE COMMANDS, AND INTERACT WITH YOUR FILE SYSTEM. YOU ACKNOWLEDGE THAT AI SYSTEMS CAN BE UNPREDICTABLE, MAY GENERATE INCORRECT, INSECURE, OR DESTRUCTIVE CODE, AND MAY TAKE ACTIONS THAT COULD DAMAGE YOUR SYSTEM, FILES, OR HARDWARE.
 
-7. Additional Terms.
-   "Additional permissions" are terms that supplement the terms of this License by making exceptions from one or more of its conditions. Additional permissions that are applicable to the entire Program shall be treated as though they were included in this License, to the extent that they are valid under applicable law. If additional permissions apply only to part of the Program, that part may be used separately under those permissions, but the entire Program remains governed by this License without regard to the additional permissions.
+b) **USE AT YOUR OWN RISK:** YOU AGREE THAT YOUR USE OF THE SOFTWARE IS SOLELY AT YOUR OWN RISK. THE CORE CONTRIBUTORS AND LICENSOR DO NOT GUARANTEE THAT THE SOFTWARE OR ANY CODE GENERATED BY IT WILL BE SAFE, BUG-FREE, OR FUNCTIONAL.
 
-When you convey a copy of a covered work, you may at your option remove any additional permissions from that copy, or from any part of it. (Additional permissions may be written to require their own removal in certain cases when you modify the work.) You may place additional permissions on material, added by you to a covered work, for which you have or can give appropriate copyright permission.
+c) **NO WARRANTY:** THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, AND NONINFRINGEMENT.
 
-Notwithstanding any other provision of this License, for material you add to a covered work, you may (if authorized by the copyright holders of that material) supplement the terms of this License with terms:
+d) **LIMITATION OF LIABILITY:** IN NO EVENT SHALL THE CORE CONTRIBUTORS, LICENSORS, OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES, OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT, OR OTHERWISE, ARISING FROM, OUT OF, OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE, INCLUDING BUT NOT LIMITED TO:
 
-a) Disclaiming warranty or limiting liability differently from the terms of sections 15 and 16 of this License; or
-b) Requiring preservation of specified reasonable legal notices or author attributions in that material or in the Appropriate Legal Notices displayed by works containing it; or
-c) Prohibiting misrepresentation of the origin of that material, or requiring that modified versions of such material be marked in reasonable ways as different from the original version; or
-d) Limiting the use for publicity purposes of names of licensors or authors of the material; or
-e) Declining to grant rights under trademark law for use of some trade names, trademarks, or service marks; or
-f) Requiring indemnification of licensors and authors of that material by anyone who conveys the material (or modified versions of it) with contractual assumptions of liability to the recipient, for any liability that these contractual assumptions directly impose on those licensors and authors.
-All other non-permissive additional terms are considered "further restrictions" within the meaning of section 10. If the Program as you received it, or any part of it, contains a notice stating that it is governed by this License along with a term that is a further restriction, you may remove that term. If a license document contains a further restriction but permits relicensing or conveying under this License, you may add to a covered work material governed by the terms of that license document, provided that the further restriction does not survive such relicensing or conveying.
+- DAMAGE TO HARDWARE OR COMPUTER SYSTEMS
+- DATA LOSS OR CORRUPTION
+- GENERATION OF BAD, VULNERABLE, OR MALICIOUS CODE
+- FINANCIAL LOSSES
+- BUSINESS INTERRUPTION
 
-If you add terms to a covered work in accord with this section, you must place, in the relevant source files, a statement of the additional terms that apply to those files, or a notice indicating where to find the applicable terms.
+8. LICENSE AMENDMENTS
 
-Additional terms, permissive or non-permissive, may be stated in the form of a separately written license, or stated as exceptions; the above requirements apply either way.
+Any amendment, modification, or update to this License Agreement must be agreed upon unanimously by all Core Contributors. No changes to this Agreement shall be effective unless all Core Contributors have provided their written consent or approval through a unanimous vote.
 
-8. Termination.
-   You may not propagate or modify a covered work except as expressly provided under this License. Any attempt otherwise to propagate or modify it is void, and will automatically terminate your rights under this License (including any patent licenses granted under the third paragraph of section 11).
+9. CONTACT
 
-However, if you cease all violation of this License, then your license from a particular copyright holder is reinstated (a) provisionally, unless and until the copyright holder explicitly and finally terminates your license, and (b) permanently, if the copyright holder fails to notify you of the violation by some reasonable means prior to 60 days after the cessation.
+For inquiries regarding this license or permissions for Monetization, please contact the Core Contributors through the official project channels:
 
-Moreover, your license from a particular copyright holder is reinstated permanently if the copyright holder notifies you of the violation by some reasonable means, this is the first time you have received notice of violation of this License (for any work) from that copyright holder, and you cure the violation prior to 30 days after your receipt of the notice.
+- Agentic Jumpstart Discord: https://discord.gg/JUDWZDN3VT
+- Website: https://automaker.app
+- Email: automakerapp@gmail.com
 
-Termination of your rights under this section does not terminate the licenses of parties who have received copies or rights from you under this License. If your rights have been terminated and not permanently reinstated, you do not qualify to receive new licenses for the same material under section 10.
+Any permission for Monetization requires the unanimous written consent of all Core Contributors.
 
-9. Acceptance Not Required for Having Copies.
-   You are not required to accept this License in order to receive or run a copy of the Program. Ancillary propagation of a covered work occurring solely as a consequence of using peer-to-peer transmission to receive a copy likewise does not require acceptance. However, nothing other than this License grants you permission to propagate or modify any covered work. These actions infringe copyright if you do not accept this License. Therefore, by modifying or propagating a covered work, you indicate your acceptance of this License to do so.
+10. GOVERNING LAW
 
-10. Automatic Licensing of Downstream Recipients.
-    Each time you convey a covered work, the recipient automatically receives a license from the original licensors, to run, modify and propagate that work, subject to this License. You are not responsible for enforcing compliance by third parties with this License.
+This Agreement shall be governed by and construed in accordance with the laws of the State of Tennessee, USA, without regard to conflict of law principles.
 
-An "entity transaction" is a transaction transferring control of an organization, or substantially all assets of one, or subdividing an organization, or merging organizations. If propagation of a covered work results from an entity transaction, each party to that transaction who receives a copy of the work also receives whatever licenses to the work the party's predecessor in interest had or could give under the previous paragraph, plus a right to possession of the Corresponding Source of the work from the predecessor in interest, if the predecessor has it or can get it with reasonable efforts.
+By using the Software, you acknowledge that you have read this Agreement, understand it, and agree to be bound by its terms and conditions.
 
-You may not impose any further restrictions on the exercise of the rights granted or affirmed under this License. For example, you may not impose a license fee, royalty, or other charge for exercise of rights granted under this License, and you may not initiate litigation (including a cross-claim or counterclaim in a lawsuit) alleging that any patent claim is infringed by making, using, selling, offering for sale, or importing the Program or any portion of it.
+---
 
-11. Patents.
-    A "contributor" is a copyright holder who authorizes use under this License of the Program or a work on which the Program is based. The work thus licensed is called the contributor's "contributor version".
-
-A contributor's "essential patent claims" are all patent claims owned or controlled by the contributor, whether already acquired or hereafter acquired, that would be infringed by some manner, permitted by this License, of making, using, or selling its contributor version, but do not include claims that would be infringed only as a consequence of further modification of the contributor version. For purposes of this definition, "control" includes the right to grant patent sublicenses in a manner consistent with the requirements of this License.
-
-Each contributor grants you a non-exclusive, worldwide, royalty-free patent license under the contributor's essential patent claims, to make, use, sell, offer for sale, import and otherwise run, modify and propagate the contents of its contributor version.
-
-In the following three paragraphs, a "patent license" is any express agreement or commitment, however denominated, not to enforce a patent (such as an express permission to practice a patent or covenant not to sue for patent infringement). To "grant" such a patent license to a party means to make such an agreement or commitment not to enforce a patent against the party.
-
-If you convey a covered work, knowingly relying on a patent license, and the Corresponding Source of the work is not available for anyone to copy, free of charge and under the terms of this License, through a publicly available network server or other readily accessible means, then you must either (1) cause the Corresponding Source to be so available, or (2) arrange to deprive yourself of the benefit of the patent license for this particular work, or (3) arrange, in a manner consistent with the requirements of this License, to extend the patent license to downstream recipients. "Knowingly relying" means you have actual knowledge that, but for the patent license, your conveying the covered work in a country, or your recipient's use of the covered work in a country, would infringe one or more identifiable patents in that country that you have reason to believe are valid.
-
-If, pursuant to or in connection with a single transaction or arrangement, you convey, or propagate by procuring conveyance of, a covered work, and grant a patent license to some of the parties receiving the covered work authorizing them to use, propagate, modify or convey a specific copy of the covered work, then the patent license you grant is automatically extended to all recipients of the covered work and works based on it.
-
-A patent license is "discriminatory" if it does not include within the scope of its coverage, prohibits the exercise of, or is conditioned on the non-exercise of one or more of the rights that are specifically granted under this License. You may not convey a covered work if you are a party to an arrangement with a third party that is in the business of distributing software, under which you make payment to the third party based on the extent of your activity of conveying the work, and under which the third party grants, to any of the parties who would receive the covered work from you, a discriminatory patent license (a) in connection with copies of the covered work conveyed by you (or copies made from those copies), or (b) primarily for and in connection with specific products or compilations that contain the covered work, unless you entered into that arrangement, or that patent license was granted, prior to 28 March 2007.
-
-Nothing in this License shall be construed as excluding or limiting any implied license or other defenses to infringement that may otherwise be available to you under applicable patent law.
-
-12. No Surrender of Others' Freedom.
-    If conditions are imposed on you (whether by court order, agreement or otherwise) that contradict the conditions of this License, they do not excuse you from the conditions of this License. If you cannot convey a covered work so as to satisfy simultaneously your obligations under this License and any other pertinent obligations, then as a consequence you may not convey it at all. For example, if you agree to terms that obligate you to collect a royalty for further conveying from those to whom you convey the Program, the only way you could satisfy both those terms and this License would be to refrain entirely from conveying the Program.
-
-13. Remote Network Interaction; Use with the GNU General Public License.
-    Notwithstanding any other provision of this License, if you modify the Program, your modified version must prominently offer all users interacting with it remotely through a computer network (if your version supports such interaction) an opportunity to receive the Corresponding Source of your version by providing access to the Corresponding Source from a network server at no charge, through some standard or customary means of facilitating copying of software. This Corresponding Source shall include the Corresponding Source for any work covered by version 3 of the GNU General Public License that is incorporated pursuant to the following paragraph.
-
-Notwithstanding any other provision of this License, you have permission to link or combine any covered work with a work licensed under version 3 of the GNU General Public License into a single combined work, and to convey the resulting work. The terms of this License will continue to apply to the part which is the covered work, but the work with which it is combined will remain governed by version 3 of the GNU General Public License.
-
-14. Revised Versions of this License.
-    The Free Software Foundation may publish revised and/or new versions of the GNU Affero General Public License from time to time. Such new versions will be similar in spirit to the present version, but may differ in detail to address new problems or concerns.
-
-Each version is given a distinguishing version number. If the Program specifies that a certain numbered version of the GNU Affero General Public License "or any later version" applies to it, you have the option of following the terms and conditions either of that numbered version or of any later version published by the Free Software Foundation. If the Program does not specify a version number of the GNU Affero General Public License, you may choose any version ever published by the Free Software Foundation.
-
-If the Program specifies that a proxy can decide which future versions of the GNU Affero General Public License can be used, that proxy's public statement of acceptance of a version permanently authorizes you to choose that version for the Program.
-
-Later license versions may give you additional or different permissions. However, no additional obligations are imposed on any author or copyright holder as a result of your choosing to follow a later version.
-
-15. Disclaimer of Warranty.
-    THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
-
-16. Limitation of Liability.
-    IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.
-
-17. Interpretation of Sections 15 and 16.
-    If the disclaimer of warranty and limitation of liability provided above cannot be given local legal effect according to their terms, reviewing courts shall apply local law that most closely approximates an absolute waiver of all civil liability in connection with the Program, unless a warranty or assumption of liability accompanies a copy of the Program in return for a fee.
-
-END OF TERMS AND CONDITIONS
-
-How to Apply These Terms to Your New Programs
-If you develop a new program, and you want it to be of the greatest possible use to the public, the best way to achieve this is to make it free software which everyone can redistribute and change under these terms.
-
-To do so, attach the following notices to the program. It is safest to attach them to the start of each source file to most effectively state the exclusion of warranty; and each file should have at least the "copyright" line and a pointer to where the full notice is found.
-
-    <one line to give the program's name and a brief idea of what it does.>
-    Copyright (C) <year>  <name of author>
-
-    This program is free software: you can redistribute it and/or modify
-    it under the terms of the GNU Affero General Public License as
-    published by the Free Software Foundation, either version 3 of the
-    License, or (at your option) any later version.
-
-    This program is distributed in the hope that it will be useful,
-    but WITHOUT ANY WARRANTY; without even the implied warranty of
-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-    GNU Affero General Public License for more details.
-
-    You should have received a copy of the GNU Affero General Public License
-    along with this program.  If not, see <https://www.gnu.org/licenses/>.
-
-Also add information on how to contact you by electronic and paper mail.
-
-If your software can interact with users remotely through a computer network, you should also make sure that it provides a way for users to get its source. For example, if your program is a web application, its interface could display a "Source" link that leads users to an archive of the code. There are many ways you could offer source, and different solutions will be better for different programs; see section 13 for the specific requirements.
-
-You should also get your employer (if you work as a programmer) or school, if any, to sign a "copyright disclaimer" for the program, if necessary. For more information on this, and how to apply and follow the GNU AGPL, see <https://www.gnu.org/licenses/>.
+Copyright (c) 2025 Automaker Core Contributors

README.md

@@ -1,6 +1,71 @@
+<p align="center">
+  <img src="apps/app/public/readme_logo.png" alt="Automaker Logo" height="80" />
+</p>
+
+> **[!TIP]**
+>
+> **Learn more about Agentic Coding!**
+>
+> Automaker itself was built by a group of engineers using AI and agentic coding techniques to build features faster than ever. By leveraging tools like Cursor IDE and Claude Code CLI, the team orchestrated AI agents to implement complex functionality in days instead of weeks.
+>
+> **Learn how:** Master these same techniques and workflows in the [Agentic Jumpstart course](https://agenticjumpstart.com/?utm=automaker).
+
 # Automaker
 
-Automaker is an autonomous AI development studio that helps you build software faster using AI-powered agents. It provides a visual Kanban board interface to manage features, automatically assigns AI agents to implement them, and tracks progress through an intuitive workflow from backlog to verified completion.
+**Stop typing code. Start directing AI agents.**
+
+<details open>
+<summary><h2>Table of Contents</h2></summary>
+
+- [What Makes Automaker Different?](#what-makes-automaker-different)
+  - [The Workflow](#the-workflow)
+  - [Powered by Claude Code](#powered-by-claude-code)
+  - [Why This Matters](#why-this-matters)
+- [Security Disclaimer](#security-disclaimer)
+- [Community & Support](#community--support)
+- [Getting Started](#getting-started)
+  - [Prerequisites](#prerequisites)
+  - [Quick Start](#quick-start)
+- [How to Run](#how-to-run)
+  - [Development Mode](#development-mode)
+    - [Electron Desktop App (Recommended)](#electron-desktop-app-recommended)
+    - [Web Browser Mode](#web-browser-mode)
+  - [Building for Production](#building-for-production)
+  - [Running Production Build](#running-production-build)
+  - [Testing](#testing)
+  - [Linting](#linting)
+  - [Authentication Options](#authentication-options)
+  - [Persistent Setup (Optional)](#persistent-setup-optional)
+- [Features](#features)
+- [Tech Stack](#tech-stack)
+- [Learn More](#learn-more)
+- [License](#license)
+
+</details>
+
+Automaker is an autonomous AI development studio that transforms how you build software. Instead of manually writing every line of code, you describe features on a Kanban board and watch as AI agents powered by Claude Code automatically implement them.
+
+![Automaker UI](https://i.imgur.com/jdwKydM.png)
+
+## What Makes Automaker Different?
+
+Traditional development tools help you write code. Automaker helps you **orchestrate AI agents** to build entire features autonomously. Think of it as having a team of AI developers working for you—you define what needs to be built, and Automaker handles the implementation.
+
+### The Workflow
+
+1. **Add Features** - Describe features you want built (with text, images, or screenshots)
+2. **Move to "In Progress"** - Automaker automatically assigns an AI agent to implement the feature
+3. **Watch It Build** - See real-time progress as the agent writes code, runs tests, and makes changes
+4. **Review & Verify** - Review the changes, run tests, and approve when ready
+5. **Ship Faster** - Build entire applications in days, not weeks
+
+### Powered by Claude Code
+
+Automaker leverages the [Claude Agent SDK](https://docs.anthropic.com/en/docs/claude-code) to give AI agents full access to your codebase. Agents can read files, write code, execute commands, run tests, and make git commits—all while working in isolated git worktrees to keep your main branch safe.
+
+### Why This Matters
+
+The future of software development is **agentic coding**—where developers become architects directing AI agents rather than manual coders. Automaker puts this future in your hands today, letting you experience what it's like to build software 10x faster with AI agents handling the implementation while you focus on architecture and business logic.
 
 ---
 
@@ -18,6 +83,22 @@ Automaker is an autonomous AI development studio that helps you build software f
 
 ---
 
+## Community & Support
+
+Join the **Agentic Jumpstart** to connect with other builders exploring **agentic coding** and autonomous development workflows.
+
+In the Discord, you can:
+- 💬 Discuss agentic coding patterns and best practices
+- 🧠 Share ideas for AI-driven development workflows
+- 🛠️ Get help setting up or extending Automaker
+- 🚀 Show off projects built with AI agents
+- 🤝 Collaborate with other developers and contributors
+
+👉 **Join the Discord:**  
+https://discord.gg/jjem7aEDKU
+
+---
+
 ## Getting Started
 
 ### Prerequisites
@@ -30,26 +111,28 @@ Automaker is an autonomous AI development studio that helps you build software f
 
 ```bash
 # 1. Clone the repo
-git clone git@github.com:AutoMaker-Org/automaker.git
+git clone https://github.com/AutoMaker-Org/automaker.git
 cd automaker
 
 # 2. Install dependencies
 npm install
 
-# 3. Get your Claude Code OAuth token
-claude setup-token
-# ⚠️ This prints your token - don't share your screen!
-
-# 4. Set the token and run
-export CLAUDE_CODE_OAUTH_TOKEN="sk-ant-oat01-..."
-npm run dev:electron
+# 3. Run Automaker (pick your mode)
+npm run dev
+# Then choose your run mode when prompted, or use specific commands below
 ```
 
 ## How to Run
 
-### Development Modes
+### Development Mode
 
-Automaker can be run in several modes:
+Start Automaker in development mode:
+
+```bash
+npm run dev
+```
+
+This will prompt you to choose your run mode, or you can specify a mode directly:
 
 #### Electron Desktop App (Recommended)
 
@@ -72,8 +155,6 @@ npm run dev:electron:wsl:gpu
 ```bash
 # Run in web browser (http://localhost:3007)
 npm run dev:web
-# or
-npm run dev
 ```
 
 ### Building for Production
@@ -114,21 +195,17 @@ npm run lint
 
 Automaker supports multiple authentication methods (in order of priority):
 
-| Method               | Environment Variable      | Description                                               |
-| -------------------- | ------------------------- | --------------------------------------------------------- |
-| OAuth Token (env)    | `CLAUDE_CODE_OAUTH_TOKEN` | From `claude setup-token` - uses your Claude subscription |
-| OAuth Token (stored) | —                         | Stored in app credentials file                            |
-| API Key (stored)     | —                         | Anthropic API key stored in app                           |
-| API Key (env)        | `ANTHROPIC_API_KEY`       | Pay-per-use API key                                       |
-
-**Recommended:** Use `CLAUDE_CODE_OAUTH_TOKEN` if you have a Claude subscription.
+| Method           | Environment Variable | Description                     |
+| ---------------- | -------------------- | ------------------------------- |
+| API Key (env)    | `ANTHROPIC_API_KEY`  | Anthropic API key               |
+| API Key (stored) | —                    | Anthropic API key stored in app |
 
 ### Persistent Setup (Optional)
 
 Add to your `~/.bashrc` or `~/.zshrc`:
 
 ```bash
-export CLAUDE_CODE_OAUTH_TOKEN="YOUR_TOKEN_HERE"
+export ANTHROPIC_API_KEY="YOUR_API_KEY_HERE"
 ```
 
 Then restart your terminal or run `source ~/.bashrc`.
@@ -170,4 +247,27 @@ To learn more about Next.js, take a look at the following resources:
 
 ## License
 
-See [LICENSE](../LICENSE) for details.
+This project is licensed under the **Automaker License Agreement**. See [LICENSE](LICENSE) for the full text.
+
+**Summary of Terms:**
+
+- **Allowed:**
+
+  - **Build Anything:** You can clone and use Automaker locally or in your organization to build ANY product (commercial or free).
+  - **Internal Use:** You can use it internally within your company (commercial or non-profit) without restriction.
+  - **Modify:** You can modify the code for internal use within your organization (commercial or non-profit).
+
+- **Restricted (The "No Monetization of the Tool" Rule):**
+
+  - **No Resale:** You cannot resell Automaker itself.
+  - **No SaaS:** You cannot host Automaker as a service for others.
+  - **No Monetizing Mods:** You cannot distribute modified versions of Automaker for money.
+
+- **Liability:**
+
+  - **Use at Own Risk:** This tool uses AI. We are **NOT** responsible if it breaks your computer, deletes your files, or generates bad code. You assume all risk.
+
+- **Contributing:**
+  - By contributing to this repository, you grant the Core Contributors full, irrevocable rights to your code (copyright assignment).
+
+**Core Contributors** (Cody Seibert (webdevcody), SuperComboGamer (SCG), Kacper Lachowicz (Shironex, Shirone), and Ben Scott (trueheads)) are granted perpetual, royalty-free licenses for any use, including monetization.

REFACTORING_CANDIDATES.md

@@ -0,0 +1,310 @@
+# Large Files - Refactoring Candidates
+
+This document tracks files in the AutoMaker codebase that exceed 3000 lines or are significantly large (1000+ lines) and should be considered for refactoring into smaller, more maintainable components.
+
+**Last Updated:** 2025-12-15
+**Total Large Files:** 8
+**Combined Size:** 15,027 lines
+
+---
+
+## 🔴 CRITICAL - Over 3000 Lines
+
+### 1. board-view.tsx - 3,325 lines
+**Path:** `apps/app/src/components/views/board-view.tsx`
+**Type:** React Component (TSX)
+**Priority:** VERY HIGH
+
+**Description:**
+Main Kanban board view component that serves as the centerpiece of the application.
+
+**Current Responsibilities:**
+- Feature/task card management and drag-and-drop operations using @dnd-kit
+- Adding, editing, and deleting features
+- Running autonomous agents to implement features
+- Displaying feature status across multiple columns (Backlog, In Progress, Waiting Approval, Verified)
+- Model/AI profile selection for feature implementation
+- Advanced options configuration (thinking level, model selection, skip tests)
+- Search/filtering functionality for cards
+- Output modal for viewing agent results
+- Feature suggestions dialog
+- Board background customization
+- Integration with Electron APIs for IPC communication
+- Keyboard shortcuts support
+- 40+ state variables for managing UI state
+
+**Refactoring Recommendations:**
+Extract into smaller components:
+- `AddFeatureDialog.tsx` - Feature creation dialog with image upload
+- `EditFeatureDialog.tsx` - Feature editing dialog
+- `AgentOutputModal.tsx` - Already exists, verify separation
+- `FeatureSuggestionsDialog.tsx` - Already exists, verify separation
+- `BoardHeader.tsx` - Header with controls and search
+- `BoardSearchBar.tsx` - Search and filter functionality
+- `ConcurrencyControl.tsx` - Concurrency slider component
+- `BoardActions.tsx` - Action buttons (add feature, auto mode, etc.)
+- `DragDropContext.tsx` - Wrap drag-and-drop logic
+- Custom hooks:
+  - `useBoardFeatures.ts` - Feature loading and management
+  - `useBoardDragDrop.ts` - Drag and drop handlers
+  - `useBoardActions.ts` - Feature action handlers (run, verify, delete, etc.)
+  - `useBoardKeyboardShortcuts.ts` - Keyboard shortcut logic
+
+---
+
+## 🟡 HIGH PRIORITY - 2000+ Lines
+
+### 2. sidebar.tsx - 2,396 lines
+**Path:** `apps/app/src/components/layout/sidebar.tsx`
+**Type:** React Component (TSX)
+**Priority:** HIGH
+
+**Description:**
+Main navigation sidebar with comprehensive project management.
+
+**Current Responsibilities:**
+- Project folder navigation and selection
+- View mode switching (Board, Agent, Settings, etc.)
+- Project operations (create, delete, rename)
+- Theme and appearance controls
+- Terminal, Wiki, and other view launchers
+- Drag-and-drop project reordering
+- Settings and configuration access
+
+**Refactoring Recommendations:**
+Split into focused components:
+- `ProjectSelector.tsx` - Project list and selection
+- `NavigationTabs.tsx` - View mode tabs
+- `ProjectActions.tsx` - Create, delete, rename operations
+- `SettingsMenu.tsx` - Settings dropdown
+- `ThemeSelector.tsx` - Theme controls
+- `ViewLaunchers.tsx` - Terminal, Wiki launchers
+- Custom hooks:
+  - `useProjectManagement.ts` - Project CRUD operations
+  - `useSidebarState.ts` - Sidebar state management
+
+---
+
+### 3. electron.ts - 2,356 lines
+**Path:** `apps/app/src/lib/electron.ts`
+**Type:** TypeScript Utility/API Bridge
+**Priority:** HIGH
+
+**Description:**
+Electron IPC bridge and type definitions for frontend-backend communication.
+
+**Current Responsibilities:**
+- File system operations (read, write, directory listing)
+- Project management APIs
+- Feature management APIs
+- Terminal/shell execution
+- Auto mode and agent execution APIs
+- Worktree management
+- Provider status APIs
+- Event handling and subscriptions
+
+**Refactoring Recommendations:**
+Modularize into domain-specific API modules:
+- `api/file-system-api.ts` - File operations
+- `api/project-api.ts` - Project CRUD
+- `api/feature-api.ts` - Feature management
+- `api/execution-api.ts` - Auto mode and agent execution
+- `api/provider-api.ts` - Provider status and management
+- `api/worktree-api.ts` - Git worktree operations
+- `api/terminal-api.ts` - Terminal/shell APIs
+- `types/electron-types.ts` - Shared type definitions
+- `electron.ts` - Main export aggregator
+
+---
+
+### 4. app-store.ts - 2,174 lines
+**Path:** `apps/app/src/store/app-store.ts`
+**Type:** TypeScript State Management (Zustand Store)
+**Priority:** HIGH
+
+**Description:**
+Centralized application state store using Zustand.
+
+**Current Responsibilities:**
+- Global app state types and interfaces
+- Project and feature management state
+- Theme and appearance settings
+- API keys configuration
+- Keyboard shortcuts configuration
+- Terminal themes configuration
+- Auto mode settings
+- All store mutations and selectors
+
+**Refactoring Recommendations:**
+Split into domain-specific stores:
+- `stores/projects-store.ts` - Project state and actions
+- `stores/features-store.ts` - Feature state and actions
+- `stores/ui-store.ts` - UI state (theme, sidebar, modals)
+- `stores/settings-store.ts` - User settings and preferences
+- `stores/execution-store.ts` - Auto mode and running tasks
+- `stores/provider-store.ts` - Provider configuration
+- `types/store-types.ts` - Shared type definitions
+- `app-store.ts` - Main store aggregator with combined selectors
+
+---
+
+## 🟢 MEDIUM PRIORITY - 1000-2000 Lines
+
+### 5. auto-mode-service.ts - 1,232 lines
+**Path:** `apps/server/src/services/auto-mode-service.ts`
+**Type:** TypeScript Service (Backend)
+**Priority:** MEDIUM-HIGH
+
+**Description:**
+Core autonomous feature implementation service.
+
+**Current Responsibilities:**
+- Worktree creation and management
+- Feature execution with Claude Agent SDK
+- Concurrent execution with concurrency limits
+- Progress streaming via events
+- Verification and merge workflows
+- Provider management
+- Error handling and classification
+
+**Refactoring Recommendations:**
+Extract into service modules:
+- `services/worktree-manager.ts` - Worktree operations
+- `services/feature-executor.ts` - Feature execution logic
+- `services/concurrency-manager.ts` - Concurrency control
+- `services/verification-service.ts` - Verification workflows
+- `utils/error-classifier.ts` - Error handling utilities
+
+---
+
+### 6. spec-view.tsx - 1,230 lines
+**Path:** `apps/app/src/components/views/spec-view.tsx`
+**Type:** React Component (TSX)
+**Priority:** MEDIUM
+
+**Description:**
+Specification editor view component for feature specification management.
+
+**Refactoring Recommendations:**
+Extract editor components and hooks:
+- `SpecEditor.tsx` - Main editor component
+- `SpecToolbar.tsx` - Editor toolbar
+- `SpecSidebar.tsx` - Spec navigation sidebar
+- `useSpecEditor.ts` - Editor state management
+
+---
+
+### 7. kanban-card.tsx - 1,180 lines
+**Path:** `apps/app/src/components/views/kanban-card.tsx`
+**Type:** React Component (TSX)
+**Priority:** MEDIUM
+
+**Description:**
+Individual Kanban card component with rich feature display and interaction.
+
+**Refactoring Recommendations:**
+Split into smaller card components:
+- `KanbanCardHeader.tsx` - Card title and metadata
+- `KanbanCardBody.tsx` - Card content
+- `KanbanCardActions.tsx` - Action buttons
+- `KanbanCardStatus.tsx` - Status indicators
+- `useKanbanCard.ts` - Card interaction logic
+
+---
+
+### 8. analysis-view.tsx - 1,134 lines
+**Path:** `apps/app/src/components/views/analysis-view.tsx`
+**Type:** React Component (TSX)
+**Priority:** MEDIUM
+
+**Description:**
+Analysis view component for displaying and managing feature analysis data.
+
+**Refactoring Recommendations:**
+Extract visualization and data components:
+- `AnalysisChart.tsx` - Chart/graph components
+- `AnalysisTable.tsx` - Data table
+- `AnalysisFilters.tsx` - Filter controls
+- `useAnalysisData.ts` - Data fetching and processing
+
+---
+
+## Refactoring Strategy
+
+### Phase 1: Critical (Immediate)
+1. **board-view.tsx** - Break into dialogs, header, and custom hooks
+   - Extract all dialogs first (AddFeature, EditFeature)
+   - Move to custom hooks for business logic
+   - Split remaining UI into smaller components
+
+### Phase 2: High Priority (Next Sprint)
+2. **sidebar.tsx** - Componentize navigation and project management
+3. **electron.ts** - Modularize into API domains
+4. **app-store.ts** - Split into domain stores
+
+### Phase 3: Medium Priority (Future)
+5. **auto-mode-service.ts** - Extract service modules
+6. **spec-view.tsx** - Break into editor components
+7. **kanban-card.tsx** - Split card into sub-components
+8. **analysis-view.tsx** - Extract visualization components
+
+---
+
+## General Refactoring Guidelines
+
+### When Refactoring Large Components:
+
+1. **Extract Dialogs/Modals First**
+   - Move dialog components to separate files
+   - Keep dialog state management in parent initially
+   - Later extract to custom hooks if complex
+
+2. **Create Custom Hooks for Business Logic**
+   - Move data fetching to `useFetch*` hooks
+   - Move complex state logic to `use*State` hooks
+   - Move side effects to `use*Effect` hooks
+
+3. **Split UI into Presentational Components**
+   - Header/toolbar components
+   - Content area components
+   - Footer/action components
+
+4. **Move Utils and Helpers**
+   - Extract pure functions to utility files
+   - Move constants to separate constant files
+   - Create type files for shared interfaces
+
+### When Refactoring Large Files:
+
+1. **Identify Domains/Concerns**
+   - Group related functionality
+   - Find natural boundaries
+
+2. **Extract Gradually**
+   - Start with least coupled code
+   - Work towards core functionality
+   - Test after each extraction
+
+3. **Maintain Type Safety**
+   - Export types from extracted modules
+   - Use shared type files for common interfaces
+   - Ensure no type errors after refactoring
+
+---
+
+## Progress Tracking
+
+- [ ] board-view.tsx (3,325 lines)
+- [ ] sidebar.tsx (2,396 lines)
+- [ ] electron.ts (2,356 lines)
+- [ ] app-store.ts (2,174 lines)
+- [ ] auto-mode-service.ts (1,232 lines)
+- [ ] spec-view.tsx (1,230 lines)
+- [ ] kanban-card.tsx (1,180 lines)
+- [ ] analysis-view.tsx (1,134 lines)
+
+**Target:** All files under 500 lines, most under 300 lines
+
+---
+
+*Generated: 2025-12-15*

apps/app/.gitignore

@@ -48,3 +48,4 @@ next-env.d.ts
 
 # Electron
 /dist/
+/server-bundle/

apps/app/README.md

@@ -1,123 +0,0 @@
-# Automaker
-
-Automaker is an autonomous AI development studio that helps you build software faster using AI-powered agents. It provides a visual Kanban board interface to manage features, automatically assigns AI agents to implement them, and tracks progress through an intuitive workflow from backlog to verified completion.
-
----
-
-> **[!CAUTION]**
->
-> ## Security Disclaimer
->
-> **This software uses AI-powered tooling that has access to your operating system and can read, modify, and delete files. Use at your own risk.**
->
-> We have reviewed this codebase for security vulnerabilities, but you assume all risk when running this software. You should review the code yourself before running it.
->
-> **We do not recommend running Automaker directly on your local computer** due to the risk of AI agents having access to your entire file system. Please sandbox this application using Docker or a virtual machine.
->
-> **[Read the full disclaimer](../DISCLAIMER.md)**
-
----
-
-## Getting Started
-
-**Step 1:** Clone this repository:
-
-```bash
-git clone git@github.com:AutoMaker-Org/automaker.git
-cd automaker
-```
-
-**Step 2:** Install dependencies:
-
-```bash
-npm install
-```
-
-### Windows notes (in-app Claude auth)
-
-- Node.js 22.x
-- Prebuilt PTY is bundled; Visual Studio build tools are not required for Claude auth.
-- If you prefer the external terminal flow, set `CLAUDE_AUTH_DISABLE_PTY=1`.
-- If you later add native modules beyond the prebuilt PTY, you may still need VS Build Tools + Python to rebuild those.
-
-**Step 3:** Run the Claude Code setup token command:
-
-```bash
-claude setup-token
-```
-
-> **⚠️ Warning:** This command will print your token to your terminal. Be careful if you're streaming or sharing your screen, as the token will be visible to anyone watching.
-
-**Step 4:** Export the Claude Code OAuth token in your shell:
-
-```bash
-export CLAUDE_CODE_OAUTH_TOKEN="your-token-here"
-```
-
-**Step 5:** Start the development server:
-
-```bash
-npm run dev:electron
-```
-
-This will start both the Next.js development server and the Electron application.
-
-### Auth smoke test (Windows)
-
-1. Ensure dependencies are installed (prebuilt pty is included).
-2. Run `npm run dev:electron` and open the Setup modal.
-3. Click Start on Claude auth; watch the embedded terminal stream logs.
-4. Successful runs show “Token captured automatically.”; otherwise copy/paste the token from the log.
-5. Optional: `node --test tests/claude-cli-detector.test.js` to verify token parsing.
-
-**Step 6:** MOST IMPORTANT: Run the Following after all is setup
-
-```bash
-echo "W"
-echo "W"
-echo "W"
-echo "W"
-echo "W"
-echo "W"
-echo "W"
-echo "W"
-```
-
-## Features
-
-- 📋 **Kanban Board** - Visual drag-and-drop board to manage features through backlog, in progress, waiting approval, and verified stages
-- 🤖 **AI Agent Integration** - Automatic AI agent assignment to implement features when moved to "In Progress"
-- 🧠 **Multi-Model Support** - Choose from multiple AI models including Claude Opus, Sonnet, and more
-- 💭 **Extended Thinking** - Enable extended thinking modes for complex problem-solving
-- 📡 **Real-time Agent Output** - View live agent output, logs, and file diffs as features are being implemented
-- 🔍 **Project Analysis** - AI-powered project structure analysis to understand your codebase
-- 📁 **Context Management** - Add context files to help AI agents understand your project better
-- 💡 **Feature Suggestions** - AI-generated feature suggestions based on your project
-- 🖼️ **Image Support** - Attach images and screenshots to feature descriptions
-- ⚡ **Concurrent Processing** - Configure concurrency to process multiple features simultaneously
-- 🧪 **Test Integration** - Automatic test running and verification for implemented features
-- 🔀 **Git Integration** - View git diffs and track changes made by AI agents
-- 👤 **AI Profiles** - Create and manage different AI agent profiles for various tasks
-- 💬 **Chat History** - Keep track of conversations and interactions with AI agents
-- ⌨️ **Keyboard Shortcuts** - Efficient navigation and actions via keyboard shortcuts
-- 🎨 **Dark/Light Theme** - Beautiful UI with theme support
-- 🖥️ **Cross-Platform** - Desktop application built with Electron for Windows, macOS, and Linux
-
-## Tech Stack
-
-- [Next.js](https://nextjs.org) - React framework
-- [Electron](https://www.electronjs.org/) - Desktop application framework
-- [Tailwind CSS](https://tailwindcss.com/) - Styling
-- [Zustand](https://zustand-demo.pmnd.rs/) - State management
-- [dnd-kit](https://dndkit.com/) - Drag and drop functionality
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-## License
-
-See [LICENSE](../LICENSE) for details.

apps/app/electron/main.js

@@ -7,21 +7,115 @@
 
 const path = require("path");
 const { spawn } = require("child_process");
-
-// Load environment variables from .env file
-require("dotenv").config({ path: path.join(__dirname, "../.env") });
-
+const fs = require("fs");
+const http = require("http");
 const { app, BrowserWindow, ipcMain, dialog, shell } = require("electron");
 
+// Load environment variables from .env file (development only)
+if (!app.isPackaged) {
+  try {
+    require("dotenv").config({ path: path.join(__dirname, "../.env") });
+  } catch (error) {
+    console.warn("[Electron] dotenv not available:", error.message);
+  }
+}
+
 let mainWindow = null;
 let serverProcess = null;
+let staticServer = null;
 const SERVER_PORT = 3008;
+const STATIC_PORT = 3007;
 
-// Get icon path - works in both dev and production
+// Get icon path - works in both dev and production, cross-platform
 function getIconPath() {
-  return app.isPackaged
-    ? path.join(process.resourcesPath, "app", "public", "logo.png")
-    : path.join(__dirname, "../public/logo.png");
+  // Different icon formats for different platforms
+  let iconFile;
+  if (process.platform === "win32") {
+    iconFile = "icon.ico";
+  } else if (process.platform === "darwin") {
+    iconFile = "logo_larger.png";
+  } else {
+    // Linux
+    iconFile = "logo_larger.png";
+  }
+
+  const iconPath = path.join(__dirname, "../public", iconFile);
+
+  // Verify the icon exists
+  if (!fs.existsSync(iconPath)) {
+    console.warn(`[Electron] Icon not found at: ${iconPath}`);
+    return null;
+  }
+
+  return iconPath;
+}
+
+/**
+ * Start static file server for production builds
+ */
+async function startStaticServer() {
+  const staticPath = path.join(__dirname, "../out");
+
+  staticServer = http.createServer((request, response) => {
+    // Parse the URL and remove query string
+    let filePath = path.join(staticPath, request.url.split("?")[0]);
+
+    // Default to index.html for directory requests
+    if (filePath.endsWith("/")) {
+      filePath = path.join(filePath, "index.html");
+    } else if (!path.extname(filePath)) {
+      filePath += ".html";
+    }
+
+    // Check if file exists
+    fs.stat(filePath, (err, stats) => {
+      if (err || !stats.isFile()) {
+        // Try index.html for SPA fallback
+        filePath = path.join(staticPath, "index.html");
+      }
+
+      // Read and serve the file
+      fs.readFile(filePath, (error, content) => {
+        if (error) {
+          response.writeHead(500);
+          response.end("Server Error");
+          return;
+        }
+
+        // Set content type based on file extension
+        const ext = path.extname(filePath);
+        const contentTypes = {
+          ".html": "text/html",
+          ".js": "application/javascript",
+          ".css": "text/css",
+          ".json": "application/json",
+          ".png": "image/png",
+          ".jpg": "image/jpeg",
+          ".gif": "image/gif",
+          ".svg": "image/svg+xml",
+          ".ico": "image/x-icon",
+          ".woff": "font/woff",
+          ".woff2": "font/woff2",
+          ".ttf": "font/ttf",
+          ".eot": "application/vnd.ms-fontobject",
+        };
+
+        response.writeHead(200, { "Content-Type": contentTypes[ext] || "application/octet-stream" });
+        response.end(content);
+      });
+    });
+  });
+
+  return new Promise((resolve, reject) => {
+    staticServer.listen(STATIC_PORT, (err) => {
+      if (err) {
+        reject(err);
+      } else {
+        console.log(`[Electron] Static server running at http://localhost:${STATIC_PORT}`);
+        resolve();
+      }
+    });
+  });
 }
 
 /**
@@ -30,21 +124,85 @@ function getIconPath() {
 async function startServer() {
   const isDev = !app.isPackaged;
 
-  // Server entry point
-  const serverPath = isDev
-    ? path.join(__dirname, "../../server/dist/index.js")
-    : path.join(process.resourcesPath, "server", "index.js");
+  // Server entry point - use tsx in dev, compiled version in production
+  let command, args, serverPath;
+  if (isDev) {
+    // In development, use tsx to run TypeScript directly
+    // Use node from PATH (process.execPath in Electron points to Electron, not Node.js)
+    // spawn() resolves "node" from PATH on all platforms (Windows, Linux, macOS)
+    command = "node";
+    serverPath = path.join(__dirname, "../../server/src/index.ts");
+
+    // Find tsx CLI - check server node_modules first, then root
+    const serverNodeModules = path.join(
+      __dirname,
+      "../../server/node_modules/tsx"
+    );
+    const rootNodeModules = path.join(__dirname, "../../../node_modules/tsx");
+
+    let tsxCliPath;
+    if (fs.existsSync(path.join(serverNodeModules, "dist/cli.mjs"))) {
+      tsxCliPath = path.join(serverNodeModules, "dist/cli.mjs");
+    } else if (fs.existsSync(path.join(rootNodeModules, "dist/cli.mjs"))) {
+      tsxCliPath = path.join(rootNodeModules, "dist/cli.mjs");
+    } else {
+      // Last resort: try require.resolve
+      try {
+        tsxCliPath = require.resolve("tsx/cli.mjs", {
+          paths: [path.join(__dirname, "../../server")],
+        });
+      } catch {
+        throw new Error(
+          "Could not find tsx. Please run 'npm install' in the server directory."
+        );
+      }
+    }
+
+    args = [tsxCliPath, "watch", serverPath];
+  } else {
+    // In production, use compiled JavaScript
+    command = "node";
+    serverPath = path.join(process.resourcesPath, "server", "index.js");
+    args = [serverPath];
+
+    // Verify server files exist
+    if (!fs.existsSync(serverPath)) {
+      throw new Error(`Server not found at: ${serverPath}`);
+    }
+  }
 
   // Set environment variables for server
+  const serverNodeModules = app.isPackaged
+    ? path.join(process.resourcesPath, "server", "node_modules")
+    : path.join(__dirname, "../../server/node_modules");
+
+  // Set default workspace directory to user's Documents/Automaker
+  const defaultWorkspaceDir = path.join(app.getPath("documents"), "Automaker");
+
+  // Ensure workspace directory exists
+  if (!fs.existsSync(defaultWorkspaceDir)) {
+    try {
+      fs.mkdirSync(defaultWorkspaceDir, { recursive: true });
+      console.log("[Electron] Created workspace directory:", defaultWorkspaceDir);
+    } catch (error) {
+      console.error("[Electron] Failed to create workspace directory:", error);
+    }
+  }
+
   const env = {
     ...process.env,
     PORT: SERVER_PORT.toString(),
     DATA_DIR: app.getPath("userData"),
+    NODE_PATH: serverNodeModules,
+    WORKSPACE_DIR: process.env.WORKSPACE_DIR || defaultWorkspaceDir,
   };
 
   console.log("[Electron] Starting backend server...");
+  console.log("[Electron] Server path:", serverPath);
+  console.log("[Electron] NODE_PATH:", serverNodeModules);
 
-  serverProcess = spawn("node", [serverPath], {
+  serverProcess = spawn(command, args, {
+    cwd: path.dirname(serverPath),
     env,
     stdio: ["ignore", "pipe", "pipe"],
   });
@@ -62,6 +220,11 @@ async function startServer() {
     serverProcess = null;
   });
 
+  serverProcess.on("error", (err) => {
+    console.error(`[Server] Failed to start server process:`, err);
+    serverProcess = null;
+  });
+
   // Wait for server to be ready
   await waitForServer();
 }
@@ -75,13 +238,16 @@ async function waitForServer(maxAttempts = 30) {
   for (let i = 0; i < maxAttempts; i++) {
     try {
       await new Promise((resolve, reject) => {
-        const req = http.get(`http://localhost:${SERVER_PORT}/api/health`, (res) => {
-          if (res.statusCode === 200) {
-            resolve();
-          } else {
-            reject(new Error(`Status: ${res.statusCode}`));
+        const req = http.get(
+          `http://localhost:${SERVER_PORT}/api/health`,
+          (res) => {
+            if (res.statusCode === 200) {
+              resolve();
+            } else {
+              reject(new Error(`Status: ${res.statusCode}`));
+            }
           }
-        });
+        );
         req.on("error", reject);
         req.setTimeout(1000, () => {
           req.destroy();
@@ -102,12 +268,12 @@ async function waitForServer(maxAttempts = 30) {
  * Create the main window
  */
 function createWindow() {
-  mainWindow = new BrowserWindow({
+  const iconPath = getIconPath();
+  const windowOptions = {
     width: 1400,
     height: 900,
     minWidth: 1024,
     minHeight: 700,
-    icon: getIconPath(),
     webPreferences: {
       preload: path.join(__dirname, "preload.js"),
       contextIsolation: true,
@@ -115,17 +281,20 @@ function createWindow() {
     },
     titleBarStyle: "hiddenInset",
     backgroundColor: "#0a0a0a",
-  });
+  };
 
-  // Load Next.js dev server in development or production build
+  // Only set icon if it exists
+  if (iconPath) {
+    windowOptions.icon = iconPath;
+  }
+
+  mainWindow = new BrowserWindow(windowOptions);
+
+  // Load Next.js dev server in development or static server in production
   const isDev = !app.isPackaged;
-  if (isDev) {
-    mainWindow.loadURL("http://localhost:3007");
-    if (process.env.OPEN_DEVTOOLS === "true") {
-      mainWindow.webContents.openDevTools();
-    }
-  } else {
-    mainWindow.loadFile(path.join(__dirname, "../.next/server/app/index.html"));
+  mainWindow.loadURL(`http://localhost:${STATIC_PORT}`);
+  if (isDev && process.env.OPEN_DEVTOOLS === "true") {
+    mainWindow.webContents.openDevTools();
   }
 
   mainWindow.on("closed", () => {
@@ -143,10 +312,22 @@ function createWindow() {
 app.whenReady().then(async () => {
   // Set app icon (dock icon on macOS)
   if (process.platform === "darwin" && app.dock) {
-    app.dock.setIcon(getIconPath());
+    const iconPath = getIconPath();
+    if (iconPath) {
+      try {
+        app.dock.setIcon(iconPath);
+      } catch (error) {
+        console.warn("[Electron] Failed to set dock icon:", error.message);
+      }
+    }
   }
 
   try {
+    // Start static file server in production
+    if (app.isPackaged) {
+      await startStaticServer();
+    }
+
     // Start backend server
     await startServer();
 
@@ -177,6 +358,13 @@ app.on("before-quit", () => {
     serverProcess.kill();
     serverProcess = null;
   }
+
+  // Close static server
+  if (staticServer) {
+    console.log("[Electron] Stopping static server...");
+    staticServer.close();
+    staticServer = null;
+  }
 });
 
 // ============================================

apps/app/next.config.ts

@@ -1,9 +1,7 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  env: {
-    CLAUDE_CODE_OAUTH_TOKEN: process.env.CLAUDE_CODE_OAUTH_TOKEN || "",
-  },
+  output: "export",
 };
 
 export default nextConfig;

apps/app/package.json

@@ -20,38 +20,52 @@
     "dev:electron": "concurrently \"next dev -p 3007\" \"wait-on http://localhost:3007 && electron .\"",
     "dev:electron:debug": "concurrently \"next dev -p 3007\" \"wait-on http://localhost:3007 && OPEN_DEVTOOLS=true electron .\"",
     "build": "next build",
-    "build:electron": "next build && electron-builder",
+    "build:electron": "node scripts/prepare-server.js && next build && electron-builder",
+    "build:electron:win": "node scripts/prepare-server.js && next build && electron-builder --win",
+    "build:electron:mac": "node scripts/prepare-server.js && next build && electron-builder --mac",
+    "build:electron:linux": "node scripts/prepare-server.js && next build && electron-builder --linux",
+    "postinstall": "electron-builder install-app-deps",
     "start": "next start",
     "lint": "eslint",
+    "pretest": "node scripts/setup-e2e-fixtures.js",
     "test": "playwright test",
     "test:headed": "playwright test --headed",
     "dev:electron:wsl": "concurrently \"next dev -p 3007\" \"wait-on http://localhost:3007 && electron . --no-sandbox --disable-gpu\"",
     "dev:electron:wsl:gpu": "concurrently \"next dev -p 3007\" \"wait-on http://localhost:3007 && MESA_D3D12_DEFAULT_ADAPTER_NAME=NVIDIA electron . --no-sandbox --disable-gpu-sandbox\""
   },
   "dependencies": {
+    "@codemirror/lang-xml": "^6.1.0",
+    "@codemirror/theme-one-dark": "^6.1.3",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
+    "@lezer/highlight": "^1.2.3",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-slider": "^1.3.6",
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@tanstack/react-query": "^5.90.12",
+    "@uiw/react-codemirror": "^4.25.4",
+    "@xterm/addon-fit": "^0.10.0",
+    "@xterm/addon-webgl": "^0.18.0",
+    "@xterm/xterm": "^5.5.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "dotenv": "^17.2.3",
     "geist": "^1.5.1",
     "lucide-react": "^0.556.0",
-    "next": "16.0.7",
+    "next": "^16.0.10",
     "react": "19.2.0",
     "react-dom": "19.2.0",
     "react-markdown": "^10.1.0",
+    "react-resizable-panels": "^3.0.6",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.4.0",
     "zustand": "^5.0.9"
@@ -75,31 +89,44 @@
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "concurrently": "^9.2.1",
-    "electron": "^39.2.6",
+    "electron": "39.2.7",
     "electron-builder": "^26.0.12",
     "eslint": "^9",
     "eslint-config-next": "16.0.7",
     "tailwindcss": "^4",
     "tw-animate-css": "^1.4.0",
-    "typescript": "^5",
+    "typescript": "5.9.3",
     "wait-on": "^9.0.3"
   },
   "build": {
     "appId": "com.automaker.app",
     "productName": "Automaker",
     "artifactName": "${productName}-${version}-${arch}.${ext}",
+    "afterPack": "./scripts/rebuild-server-natives.js",
     "directories": {
       "output": "dist"
     },
     "files": [
       "electron/**/*",
-      ".next/**/*",
+      "out/**/*",
       "public/**/*",
       "!node_modules/**/*"
     ],
     "extraResources": [
       {
-        "from": ".env",
+        "from": "server-bundle/dist",
+        "to": "server"
+      },
+      {
+        "from": "server-bundle/node_modules",
+        "to": "server/node_modules"
+      },
+      {
+        "from": "server-bundle/package.json",
+        "to": "server/package.json"
+      },
+      {
+        "from": "../../.env",
         "to": ".env",
         "filter": [
           "**/*"
@@ -135,7 +162,7 @@
           ]
         }
       ],
-      "icon": "public/logo_larger.png"
+      "icon": "public/icon.ico"
     },
     "linux": {
       "target": [

apps/app/playwright.config.ts

@@ -1,7 +1,9 @@
 import { defineConfig, devices } from "@playwright/test";
 
 const port = process.env.TEST_PORT || 3007;
+const serverPort = process.env.TEST_SERVER_PORT || 3008;
 const reuseServer = process.env.TEST_REUSE_SERVER === "true";
+const mockAgent = process.env.CI === "true" || process.env.AUTOMAKER_MOCK_AGENT === "true";
 
 export default defineConfig({
   testDir: "./tests",
@@ -25,11 +27,33 @@ export default defineConfig({
   ...(reuseServer
     ? {}
     : {
-        webServer: {
-          command: `npx next dev -p ${port}`,
-          url: `http://localhost:${port}`,
-          reuseExistingServer: !process.env.CI,
-          timeout: 120000,
-        },
+        webServer: [
+          // Backend server - runs with mock agent enabled in CI
+          {
+            command: `cd ../server && npm run dev`,
+            url: `http://localhost:${serverPort}/api/health`,
+            reuseExistingServer: true,
+            timeout: 60000,
+            env: {
+              ...process.env,
+              PORT: String(serverPort),
+              // Enable mock agent in CI to avoid real API calls
+              AUTOMAKER_MOCK_AGENT: mockAgent ? "true" : "false",
+              // Allow access to test directories and common project paths
+              ALLOWED_PROJECT_DIRS: "/Users,/home,/tmp,/var/folders",
+            },
+          },
+          // Frontend Next.js server
+          {
+            command: `npx next dev -p ${port}`,
+            url: `http://localhost:${port}`,
+            reuseExistingServer: true,
+            timeout: 120000,
+            env: {
+              ...process.env,
+              NEXT_PUBLIC_SKIP_SETUP: "true",
+            },
+          },
+        ],
       }),
 });

apps/app/playwright.config.ts.bak

@@ -1,30 +0,0 @@
-import { defineConfig, devices } from "@playwright/test";
-
-const port = process.env.TEST_PORT || 3007;
-
-export default defineConfig({
-  testDir: "./tests",
-  fullyParallel: true,
-  forbidOnly: !!process.env.CI,
-  retries: process.env.CI ? 2 : 0,
-  workers: process.env.CI ? 1 : undefined,
-  reporter: "html",
-  timeout: 10000,
-  use: {
-    baseURL: `http://localhost:${port}`,
-    trace: "on-first-retry",
-    screenshot: "only-on-failure",
-  },
-  projects: [
-    {
-      name: "chromium",
-      use: { ...devices["Desktop Chrome"] },
-    },
-  ],
-  webServer: {
-    command: `npx next dev -p ${port}`,
-    url: `http://localhost:${port}`,
-    reuseExistingServer: true,
-    timeout: 60000,
-  },
-});

apps/app/public/automaker.svg

@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256" role="img" aria-label="Code icon">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="256" y2="256" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#6B5BFF"></stop>
+      <stop offset="100%" stop-color="#2EC7FF"></stop>
+    </linearGradient>
+
+    <filter id="iconShadow" x="-20%" y="-20%" width="140%" height="140%">
+      <feDropShadow dx="0" dy="4" stdDeviation="4" flood-color="#000000" flood-opacity="0.25"></feDropShadow>
+    </filter>
+  </defs>
+
+  <!-- Rounded square background -->
+  <rect x="16" y="16" width="224" height="224" rx="56" fill="url(#bg)"></rect>
+
+  <!-- </> icon (slightly reduced overall size) -->
+  <g fill="none" stroke="#FFFFFF" stroke-width="20" stroke-linecap="round" stroke-linejoin="round" filter="url(#iconShadow)">
+    <!-- Left bracket < -->
+    <path d="M92 92 L52 128 L92 164"></path>
+
+    <!-- Slash / -->
+    <path d="M144 72 L116 184"></path>
+
+    <!-- Right bracket > -->
+    <path d="M164 92 L204 128 L164 164"></path>
+  </g>
+</svg>

apps/app/scripts/prepare-server.js

@@ -0,0 +1,81 @@
+#!/usr/bin/env node
+
+/**
+ * This script prepares the server for bundling with Electron.
+ * It copies the server dist and installs production dependencies
+ * in a way that works with npm workspaces.
+ */
+
+import { execSync } from 'child_process';
+import { cpSync, existsSync, mkdirSync, rmSync, writeFileSync, readFileSync } from 'fs';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const APP_DIR = join(__dirname, '..');
+const SERVER_DIR = join(APP_DIR, '..', 'server');
+const BUNDLE_DIR = join(APP_DIR, 'server-bundle');
+
+console.log('🔧 Preparing server for Electron bundling...\n');
+
+// Step 1: Clean up previous bundle
+if (existsSync(BUNDLE_DIR)) {
+  console.log('🗑️  Cleaning previous server-bundle...');
+  rmSync(BUNDLE_DIR, { recursive: true });
+}
+mkdirSync(BUNDLE_DIR, { recursive: true });
+
+// Step 2: Build the server TypeScript
+console.log('📦 Building server TypeScript...');
+execSync('npm run build', { cwd: SERVER_DIR, stdio: 'inherit' });
+
+// Step 3: Copy server dist
+console.log('📋 Copying server dist...');
+cpSync(join(SERVER_DIR, 'dist'), join(BUNDLE_DIR, 'dist'), { recursive: true });
+
+// Step 4: Create a minimal package.json for the server
+console.log('📝 Creating server package.json...');
+const serverPkg = JSON.parse(readFileSync(join(SERVER_DIR, 'package.json'), 'utf-8'));
+
+const bundlePkg = {
+  name: '@automaker/server-bundle',
+  version: serverPkg.version,
+  type: 'module',
+  main: 'dist/index.js',
+  dependencies: serverPkg.dependencies
+};
+
+writeFileSync(
+  join(BUNDLE_DIR, 'package.json'),
+  JSON.stringify(bundlePkg, null, 2)
+);
+
+// Step 5: Install production dependencies
+console.log('📥 Installing server production dependencies...');
+execSync('npm install --omit=dev', {
+  cwd: BUNDLE_DIR,
+  stdio: 'inherit',
+  env: {
+    ...process.env,
+    // Prevent npm from using workspace resolution
+    npm_config_workspace: ''
+  }
+});
+
+// Step 6: Rebuild native modules for current architecture
+// This is critical for modules like node-pty that have native bindings
+console.log('🔨 Rebuilding native modules for current architecture...');
+try {
+  execSync('npm rebuild', {
+    cwd: BUNDLE_DIR,
+    stdio: 'inherit'
+  });
+  console.log('✅ Native modules rebuilt successfully');
+} catch (error) {
+  console.warn('⚠️  Warning: Failed to rebuild native modules. Terminal functionality may not work.');
+  console.warn('   Error:', error.message);
+}
+
+console.log('\n✅ Server prepared for bundling at:', BUNDLE_DIR);

apps/app/scripts/rebuild-server-natives.js

@@ -0,0 +1,66 @@
+#!/usr/bin/env node
+
+/**
+ * Electron-builder afterPack hook
+ * Rebuilds native modules in the server bundle for the target architecture
+ */
+
+const { exec } = require('child_process');
+const { promisify } = require('util');
+const path = require('path');
+
+const execAsync = promisify(exec);
+
+exports.default = async function(context) {
+  const { appOutDir, electronPlatformName, arch, packager } = context;
+  const electronVersion = packager.config.electronVersion;
+
+  // Convert arch to string if it's a number (electron-builder sometimes passes indices)
+  const archNames = ['ia32', 'x64', 'armv7l', 'arm64', 'universal'];
+  const archStr = typeof arch === 'number' ? archNames[arch] : arch;
+
+  console.log(`\n🔨 Rebuilding server native modules for ${electronPlatformName}-${archStr}...`);
+
+  // Path to server node_modules in the packaged app
+  let serverNodeModulesPath;
+  if (electronPlatformName === 'darwin') {
+    serverNodeModulesPath = path.join(
+      appOutDir,
+      `${packager.appInfo.productName}.app`,
+      'Contents',
+      'Resources',
+      'server',
+      'node_modules'
+    );
+  } else if (electronPlatformName === 'win32') {
+    serverNodeModulesPath = path.join(
+      appOutDir,
+      'resources',
+      'server',
+      'node_modules'
+    );
+  } else {
+    serverNodeModulesPath = path.join(
+      appOutDir,
+      'resources',
+      'server',
+      'node_modules'
+    );
+  }
+
+  try {
+    // Rebuild native modules for the target architecture
+    const rebuildCmd = `npx --yes @electron/rebuild --version=${electronVersion} --arch=${archStr} --force --module-dir="${serverNodeModulesPath}/.."`;
+
+    console.log(`   Command: ${rebuildCmd}`);
+
+    const { stdout, stderr } = await execAsync(rebuildCmd);
+    if (stdout) console.log(stdout);
+    if (stderr) console.error(stderr);
+
+    console.log(`✅ Server native modules rebuilt successfully for ${archStr}\n`);
+  } catch (error) {
+    console.error(`❌ Failed to rebuild server native modules:`, error.message);
+    // Don't fail the build, just warn
+  }
+};

apps/app/scripts/setup-e2e-fixtures.js

@@ -0,0 +1,49 @@
+#!/usr/bin/env node
+
+/**
+ * Setup script for E2E test fixtures
+ * Creates the necessary test fixture directories and files before running Playwright tests
+ */
+
+import * as fs from "fs";
+import * as path from "path";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Resolve workspace root (apps/app/scripts -> workspace root)
+const WORKSPACE_ROOT = path.resolve(__dirname, "../../..");
+const FIXTURE_PATH = path.join(WORKSPACE_ROOT, "test/fixtures/projectA");
+const SPEC_FILE_PATH = path.join(FIXTURE_PATH, ".automaker/app_spec.txt");
+
+const SPEC_CONTENT = `<app_spec>
+  <name>Test Project A</name>
+  <description>A test fixture project for Playwright testing</description>
+  <tech_stack>
+    <item>TypeScript</item>
+    <item>React</item>
+  </tech_stack>
+</app_spec>
+`;
+
+function setupFixtures() {
+  console.log("Setting up E2E test fixtures...");
+  console.log(`Workspace root: ${WORKSPACE_ROOT}`);
+  console.log(`Fixture path: ${FIXTURE_PATH}`);
+
+  // Create fixture directory
+  const specDir = path.dirname(SPEC_FILE_PATH);
+  if (!fs.existsSync(specDir)) {
+    fs.mkdirSync(specDir, { recursive: true });
+    console.log(`Created directory: ${specDir}`);
+  }
+
+  // Create app_spec.txt
+  fs.writeFileSync(SPEC_FILE_PATH, SPEC_CONTENT);
+  console.log(`Created fixture file: ${SPEC_FILE_PATH}`);
+
+  console.log("E2E test fixtures setup complete!");
+}
+
+setupFixtures();

apps/app/src/app/api/chat/route.ts

@@ -1,172 +0,0 @@
-import {
-  query,
-  Options,
-  SDKAssistantMessage,
-} from "@anthropic-ai/claude-agent-sdk";
-import { NextRequest, NextResponse } from "next/server";
-import path from "path";
-
-const systemPrompt = `You are an AI assistant helping users build software. You are part of the Automaker application,
-which is designed to help developers plan, design, and implement software projects autonomously.
-
-Your role is to:
-- Help users define their project requirements and specifications
-- Ask clarifying questions to better understand their needs
-- Suggest technical approaches and architectures
-- Guide them through the development process
-- Be conversational and helpful
-- Write, edit, and modify code files as requested
-- Execute commands and tests
-- Search and analyze the codebase
-
-When discussing projects, help users think through:
-- Core functionality and features
-- Technical stack choices
-- Data models and architecture
-- User experience considerations
-- Testing strategies
-
-You have full access to the codebase and can:
-- Read files to understand existing code
-- Write new files
-- Edit existing files
-- Run bash commands
-- Search for code patterns
-- Execute tests and builds`;
-
-export async function POST(request: NextRequest) {
-  try {
-    const { messages, workingDirectory } = await request.json();
-
-    console.log(
-      "[API] CLAUDE_CODE_OAUTH_TOKEN present:",
-      !!process.env.CLAUDE_CODE_OAUTH_TOKEN
-    );
-
-    if (!process.env.CLAUDE_CODE_OAUTH_TOKEN) {
-      return NextResponse.json(
-        { error: "CLAUDE_CODE_OAUTH_TOKEN not configured" },
-        { status: 500 }
-      );
-    }
-
-    // Get the last user message
-    const lastMessage = messages[messages.length - 1];
-
-    // Determine working directory - default to parent of app directory
-    const cwd = workingDirectory || path.resolve(process.cwd(), "..");
-
-    console.log("[API] Working directory:", cwd);
-
-    // Create query with options that enable code modification
-    const options: Options = {
-      // model: "claude-sonnet-4-20250514",
-      model: "claude-opus-4-5-20251101",
-      systemPrompt,
-      maxTurns: 20,
-      cwd,
-      // Enable all core tools for code modification
-      allowedTools: [
-        "Read",
-        "Write",
-        "Edit",
-        "Glob",
-        "Grep",
-        "Bash",
-        "WebSearch",
-        "WebFetch",
-      ],
-      // Auto-accept file edits within the working directory
-      permissionMode: "acceptEdits",
-      // Enable sandbox for safer bash execution
-      sandbox: {
-        enabled: true,
-        autoAllowBashIfSandboxed: true,
-      },
-    };
-
-    // Convert message history to SDK format to preserve conversation context
-    // Include both user and assistant messages for full context
-    const sessionId = `api-session-${Date.now()}`;
-    const conversationMessages = messages.map(
-      (msg: { role: string; content: string }) => {
-        if (msg.role === "user") {
-          return {
-            type: "user" as const,
-            message: {
-              role: "user" as const,
-              content: msg.content,
-            },
-            parent_tool_use_id: null,
-            session_id: sessionId,
-          };
-        } else {
-          // Assistant message
-          return {
-            type: "assistant" as const,
-            message: {
-              role: "assistant" as const,
-              content: [
-                {
-                  type: "text" as const,
-                  text: msg.content,
-                },
-              ],
-            },
-            session_id: sessionId,
-          };
-        }
-      }
-    );
-
-    // Execute query with full conversation context
-    const queryResult = query({
-      prompt:
-        conversationMessages.length > 0
-          ? conversationMessages
-          : lastMessage.content,
-      options,
-    });
-
-    let responseText = "";
-    const toolUses: Array<{ name: string; input: unknown }> = [];
-
-    // Collect the response from the async generator
-    for await (const msg of queryResult) {
-      if (msg.type === "assistant") {
-        const assistantMsg = msg as SDKAssistantMessage;
-        if (assistantMsg.message.content) {
-          for (const block of assistantMsg.message.content) {
-            if (block.type === "text") {
-              responseText += block.text;
-            } else if (block.type === "tool_use") {
-              // Track tool usage for transparency
-              toolUses.push({
-                name: block.name,
-                input: block.input,
-              });
-            }
-          }
-        }
-      } else if (msg.type === "result") {
-        if (msg.subtype === "success") {
-          if (msg.result) {
-            responseText = msg.result;
-          }
-        }
-      }
-    }
-
-    return NextResponse.json({
-      content: responseText || "Sorry, I couldn't generate a response.",
-      toolUses: toolUses.length > 0 ? toolUses : undefined,
-    });
-  } catch (error: unknown) {
-    console.error("Claude API error:", error);
-    const errorMessage =
-      error instanceof Error
-        ? error.message
-        : "Failed to get response from Claude";
-    return NextResponse.json({ error: errorMessage }, { status: 500 });
-  }
-}

apps/app/src/app/api/claude/test/route.ts

@@ -11,7 +11,7 @@ export async function POST(request: NextRequest) {
     const { apiKey } = await request.json();
 
     // Use provided API key or fall back to environment variable
-    const effectiveApiKey = apiKey || process.env.ANTHROPIC_API_KEY || process.env.CLAUDE_CODE_OAUTH_TOKEN;
+    const effectiveApiKey = apiKey || process.env.ANTHROPIC_API_KEY;
 
     if (!effectiveApiKey) {
       return NextResponse.json(

apps/app/src/app/layout.tsx

@@ -1,8 +1,24 @@
 import type { Metadata } from "next";
 import { GeistSans } from "geist/font/sans";
 import { GeistMono } from "geist/font/mono";
+import { Inter, JetBrains_Mono } from "next/font/google";
 import { Toaster } from "sonner";
 import "./globals.css";
+
+// Inter font for clean theme
+const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-inter",
+  display: "swap",
+});
+
+// JetBrains Mono for clean theme
+const jetbrainsMono = JetBrains_Mono({
+  subsets: ["latin"],
+  variable: "--font-jetbrains-mono",
+  display: "swap",
+});
+
 export const metadata: Metadata = {
   title: "Automaker - Autonomous AI Development Studio",
   description: "Build software autonomously with intelligent orchestration",
@@ -16,7 +32,7 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <body
-        className={`${GeistSans.variable} ${GeistMono.variable} antialiased`}
+        className={`${GeistSans.variable} ${GeistMono.variable} ${inter.variable} ${jetbrainsMono.variable} antialiased`}
       >
         {children}
         <Toaster richColors position="bottom-right" />

apps/app/src/app/page.tsx

@@ -12,6 +12,8 @@ import { ContextView } from "@/components/views/context-view";
 import { ProfilesView } from "@/components/views/profiles-view";
 import { SetupView } from "@/components/views/setup-view";
 import { RunningAgentsView } from "@/components/views/running-agents-view";
+import { TerminalView } from "@/components/views/terminal-view";
+import { WikiView } from "@/components/views/wiki-view";
 import { useAppStore } from "@/store/app-store";
 import { useSetupStore } from "@/store/setup-store";
 import { getElectronAPI, isElectron } from "@/lib/electron";
@@ -131,10 +133,10 @@ function HomeContent() {
   // Apply theme class to document (uses effective theme - preview, project-specific, or global)
   useEffect(() => {
     const root = document.documentElement;
-    root.classList.remove(
+    const themeClasses = [
       "dark",
-      "retro",
       "light",
+      "retro",
       "dracula",
       "nord",
       "monokai",
@@ -144,43 +146,23 @@ function HomeContent() {
       "catppuccin",
       "onedark",
       "synthwave",
-      "red"
-    );
+      "red",
+      "cream",
+      "sunset",
+      "gray",
+      "clean",
+    ];
 
-    if (effectiveTheme === "dark") {
-      root.classList.add("dark");
-    } else if (effectiveTheme === "retro") {
-      root.classList.add("retro");
-    } else if (effectiveTheme === "dracula") {
-      root.classList.add("dracula");
-    } else if (effectiveTheme === "nord") {
-      root.classList.add("nord");
-    } else if (effectiveTheme === "monokai") {
-      root.classList.add("monokai");
-    } else if (effectiveTheme === "tokyonight") {
-      root.classList.add("tokyonight");
-    } else if (effectiveTheme === "solarized") {
-      root.classList.add("solarized");
-    } else if (effectiveTheme === "gruvbox") {
-      root.classList.add("gruvbox");
-    } else if (effectiveTheme === "catppuccin") {
-      root.classList.add("catppuccin");
-    } else if (effectiveTheme === "onedark") {
-      root.classList.add("onedark");
-    } else if (effectiveTheme === "synthwave") {
-      root.classList.add("synthwave");
-    } else if (effectiveTheme === "red") {
-      root.classList.add("red");
-    } else if (effectiveTheme === "light") {
-      root.classList.add("light");
+    // Remove all theme classes
+    root.classList.remove(...themeClasses);
+
+    // Apply the effective theme
+    if (themeClasses.includes(effectiveTheme)) {
+      root.classList.add(effectiveTheme);
     } else if (effectiveTheme === "system") {
-      // System theme
+      // System theme - detect OS preference
       const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-      if (isDark) {
-        root.classList.add("dark");
-      } else {
-        root.classList.add("light");
-      }
+      root.classList.add(isDark ? "dark" : "light");
     }
   }, [effectiveTheme, previewTheme, currentProject, theme]);
 
@@ -206,6 +188,10 @@ function HomeContent() {
         return <ProfilesView />;
       case "running-agents":
         return <RunningAgentsView />;
+      case "terminal":
+        return <TerminalView />;
+      case "wiki":
+        return <WikiView />;
       default:
         return <WelcomeView />;
     }
@@ -216,12 +202,6 @@ function HomeContent() {
     return (
       <main className="h-screen overflow-hidden" data-testid="app-container">
         <SetupView />
-        {/* Environment indicator */}
-        {isMounted && !isElectron() && (
-          <div className="fixed bottom-4 right-4 px-3 py-1.5 bg-blue-500/10 text-blue-500 text-xs rounded-full border border-blue-500/20 pointer-events-none">
-            Web Mode
-          </div>
-        )}
       </main>
     );
   }
@@ -236,13 +216,6 @@ function HomeContent() {
         {renderView()}
       </div>
 
-      {/* Environment indicator - only show after mount to prevent hydration issues */}
-      {isMounted && !isElectron() && (
-        <div className="fixed bottom-4 right-4 px-3 py-1.5 bg-blue-500/10 text-blue-500 text-xs rounded-full border border-blue-500/20 pointer-events-none">
-          Web Mode
-        </div>
-      )}
-
       {/* Hidden streamer panel - opens with "\" key, pushes content */}
       <div
         className={`fixed top-0 right-0 h-full w-[250px] bg-background border-l border-border transition-transform duration-300 ${

apps/app/src/components/delete-all-archived-sessions-dialog.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Trash2 } from "lucide-react";
+
+interface DeleteAllArchivedSessionsDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  archivedCount: number;
+  onConfirm: () => void;
+}
+
+export function DeleteAllArchivedSessionsDialog({
+  open,
+  onOpenChange,
+  archivedCount,
+  onConfirm,
+}: DeleteAllArchivedSessionsDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent data-testid="delete-all-archived-sessions-dialog">
+        <DialogHeader>
+          <DialogTitle>Delete All Archived Sessions</DialogTitle>
+          <DialogDescription>
+            Are you sure you want to delete all archived sessions? This action
+            cannot be undone.
+            {archivedCount > 0 && (
+              <span className="block mt-2 text-yellow-500">
+                {archivedCount} session(s) will be deleted.
+              </span>
+            )}
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button variant="ghost" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button
+            variant="destructive"
+            onClick={onConfirm}
+            data-testid="confirm-delete-all-archived-sessions"
+          >
+            <Trash2 className="w-4 h-4 mr-2" />
+            Delete All
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/app/src/components/dialogs/file-browser-dialog.tsx

@@ -1,7 +1,17 @@
 "use client";
 
-import { useState, useEffect } from "react";
-import { FolderOpen, Folder, ChevronRight, Home, ArrowLeft, HardDrive } from "lucide-react";
+import { useState, useEffect, useRef, useCallback } from "react";
+import {
+  FolderOpen,
+  Folder,
+  ChevronRight,
+  Home,
+  ArrowLeft,
+  HardDrive,
+  CornerDownLeft,
+  Clock,
+  X,
+} from "lucide-react";
 import {
   Dialog,
   DialogContent,
@@ -11,6 +21,7 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
 
 interface DirectoryEntry {
   name: string;
@@ -24,6 +35,7 @@ interface BrowseResult {
   directories: DirectoryEntry[];
   drives?: string[];
   error?: string;
+  warning?: string;
 }
 
 interface FileBrowserDialogProps {
@@ -32,6 +44,45 @@ interface FileBrowserDialogProps {
   onSelect: (path: string) => void;
   title?: string;
   description?: string;
+  initialPath?: string;
+}
+
+const RECENT_FOLDERS_KEY = "file-browser-recent-folders";
+const MAX_RECENT_FOLDERS = 5;
+
+function getRecentFolders(): string[] {
+  if (typeof window === "undefined") return [];
+  try {
+    const stored = localStorage.getItem(RECENT_FOLDERS_KEY);
+    return stored ? JSON.parse(stored) : [];
+  } catch {
+    return [];
+  }
+}
+
+function addRecentFolder(path: string): void {
+  if (typeof window === "undefined") return;
+  try {
+    const recent = getRecentFolders();
+    // Remove if already exists, then add to front
+    const filtered = recent.filter((p) => p !== path);
+    const updated = [path, ...filtered].slice(0, MAX_RECENT_FOLDERS);
+    localStorage.setItem(RECENT_FOLDERS_KEY, JSON.stringify(updated));
+  } catch {
+    // Ignore localStorage errors
+  }
+}
+
+function removeRecentFolder(path: string): string[] {
+  if (typeof window === "undefined") return [];
+  try {
+    const recent = getRecentFolders();
+    const updated = recent.filter((p) => p !== path);
+    localStorage.setItem(RECENT_FOLDERS_KEY, JSON.stringify(updated));
+    return updated;
+  } catch {
+    return [];
+  }
 }
 
 export function FileBrowserDialog({
@@ -39,22 +90,46 @@ export function FileBrowserDialog({
   onOpenChange,
   onSelect,
   title = "Select Project Directory",
-  description = "Navigate to your project folder",
+  description = "Navigate to your project folder or paste a path directly",
+  initialPath,
 }: FileBrowserDialogProps) {
   const [currentPath, setCurrentPath] = useState<string>("");
+  const [pathInput, setPathInput] = useState<string>("");
   const [parentPath, setParentPath] = useState<string | null>(null);
   const [directories, setDirectories] = useState<DirectoryEntry[]>([]);
   const [drives, setDrives] = useState<string[]>([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
+  const [warning, setWarning] = useState("");
+  const [recentFolders, setRecentFolders] = useState<string[]>([]);
+  const pathInputRef = useRef<HTMLInputElement>(null);
+
+  // Load recent folders when dialog opens
+  useEffect(() => {
+    if (open) {
+      setRecentFolders(getRecentFolders());
+    }
+  }, [open]);
+
+  const handleRemoveRecent = useCallback((e: React.MouseEvent, path: string) => {
+    e.stopPropagation();
+    const updated = removeRecentFolder(path);
+    setRecentFolders(updated);
+  }, []);
+
+  const handleSelectRecent = useCallback((path: string) => {
+    browseDirectory(path);
+  }, []);
 
   const browseDirectory = async (dirPath?: string) => {
     setLoading(true);
     setError("");
+    setWarning("");
 
     try {
       // Get server URL from environment or default
-      const serverUrl = process.env.NEXT_PUBLIC_SERVER_URL || "http://localhost:3008";
+      const serverUrl =
+        process.env.NEXT_PUBLIC_SERVER_URL || "http://localhost:3008";
 
       const response = await fetch(`${serverUrl}/api/fs/browse`, {
         method: "POST",
@@ -66,26 +141,42 @@ export function FileBrowserDialog({
 
       if (result.success) {
         setCurrentPath(result.currentPath);
+        setPathInput(result.currentPath);
         setParentPath(result.parentPath);
         setDirectories(result.directories);
         setDrives(result.drives || []);
+        setWarning(result.warning || "");
       } else {
         setError(result.error || "Failed to browse directory");
       }
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to load directories");
+      setError(
+        err instanceof Error ? err.message : "Failed to load directories"
+      );
     } finally {
       setLoading(false);
     }
   };
 
-  // Load home directory on mount
+  // Reset current path when dialog closes
   useEffect(() => {
-    if (open && !currentPath) {
-      browseDirectory();
+    if (!open) {
+      setCurrentPath("");
+      setPathInput("");
+      setParentPath(null);
+      setDirectories([]);
+      setError("");
+      setWarning("");
     }
   }, [open]);
 
+  // Load initial path or home directory when dialog opens
+  useEffect(() => {
+    if (open && !currentPath) {
+      browseDirectory(initialPath);
+    }
+  }, [open, initialPath]);
+
   const handleSelectDirectory = (dir: DirectoryEntry) => {
     browseDirectory(dir.path);
   };
@@ -104,41 +195,119 @@ export function FileBrowserDialog({
     browseDirectory(drivePath);
   };
 
+  const handleGoToPath = () => {
+    const trimmedPath = pathInput.trim();
+    if (trimmedPath) {
+      browseDirectory(trimmedPath);
+    }
+  };
+
+  const handlePathInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      handleGoToPath();
+    }
+  };
+
   const handleSelect = () => {
     if (currentPath) {
+      addRecentFolder(currentPath);
       onSelect(currentPath);
       onOpenChange(false);
     }
   };
 
+  // Helper to get folder name from path
+  const getFolderName = (path: string) => {
+    const parts = path.split(/[/\\]/).filter(Boolean);
+    return parts[parts.length - 1] || path;
+  };
+
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="bg-popover border-border max-w-2xl max-h-[80vh]">
-        <DialogHeader>
-          <DialogTitle className="flex items-center gap-2">
-            <FolderOpen className="w-5 h-5 text-brand-500" />
+      <DialogContent className="bg-popover border-border max-w-3xl max-h-[85vh] overflow-hidden flex flex-col p-4">
+        <DialogHeader className="pb-1">
+          <DialogTitle className="flex items-center gap-2 text-base">
+            <FolderOpen className="w-4 h-4 text-brand-500" />
             {title}
           </DialogTitle>
-          <DialogDescription className="text-muted-foreground">
+          <DialogDescription className="text-muted-foreground text-xs">
             {description}
           </DialogDescription>
         </DialogHeader>
 
-        <div className="flex flex-col gap-3 min-h-[400px]">
+        <div className="flex flex-col gap-2 min-h-[350px] flex-1 overflow-hidden py-1">
+          {/* Direct path input */}
+          <div className="flex items-center gap-1.5">
+            <Input
+              ref={pathInputRef}
+              type="text"
+              placeholder="Paste or type a full path (e.g., /home/user/projects/myapp)"
+              value={pathInput}
+              onChange={(e) => setPathInput(e.target.value)}
+              onKeyDown={handlePathInputKeyDown}
+              className="flex-1 font-mono text-xs h-8"
+              data-testid="path-input"
+              disabled={loading}
+            />
+            <Button
+              variant="secondary"
+              size="sm"
+              onClick={handleGoToPath}
+              disabled={loading || !pathInput.trim()}
+              data-testid="go-to-path-button"
+              className="h-8 px-2"
+            >
+              <CornerDownLeft className="w-3.5 h-3.5 mr-1" />
+              Go
+            </Button>
+          </div>
+
+          {/* Recent folders */}
+          {recentFolders.length > 0 && (
+            <div className="flex flex-wrap gap-1.5 p-2 rounded-md bg-sidebar-accent/10 border border-sidebar-border">
+              <div className="flex items-center gap-1 text-xs text-muted-foreground mr-1">
+                <Clock className="w-3 h-3" />
+                <span>Recent:</span>
+              </div>
+              {recentFolders.map((folder) => (
+                <button
+                  key={folder}
+                  onClick={() => handleSelectRecent(folder)}
+                  className="group flex items-center gap-1 h-6 px-2 text-xs bg-sidebar-accent/20 hover:bg-sidebar-accent/40 rounded border border-sidebar-border transition-colors"
+                  disabled={loading}
+                  title={folder}
+                >
+                  <Folder className="w-3 h-3 text-brand-500 shrink-0" />
+                  <span className="truncate max-w-[120px]">{getFolderName(folder)}</span>
+                  <button
+                    onClick={(e) => handleRemoveRecent(e, folder)}
+                    className="ml-0.5 opacity-0 group-hover:opacity-100 hover:text-destructive transition-opacity"
+                    title="Remove from recent"
+                  >
+                    <X className="w-3 h-3" />
+                  </button>
+                </button>
+              ))}
+            </div>
+          )}
+
           {/* Drives selector (Windows only) */}
           {drives.length > 0 && (
-            <div className="flex flex-wrap gap-2 p-3 rounded-lg bg-sidebar-accent/10 border border-sidebar-border">
-              <div className="flex items-center gap-1 text-xs text-muted-foreground mr-2">
+            <div className="flex flex-wrap gap-1.5 p-2 rounded-md bg-sidebar-accent/10 border border-sidebar-border">
+              <div className="flex items-center gap-1 text-xs text-muted-foreground mr-1">
                 <HardDrive className="w-3 h-3" />
                 <span>Drives:</span>
               </div>
               {drives.map((drive) => (
                 <Button
                   key={drive}
-                  variant={currentPath.startsWith(drive) ? "default" : "outline"}
+                  variant={
+                    currentPath.startsWith(drive) ? "default" : "outline"
+                  }
                   size="sm"
                   onClick={() => handleSelectDrive(drive)}
-                  className="h-7 px-3 text-xs"
+                  className="h-6 px-2 text-xs"
                   disabled={loading}
                 >
                   {drive.replace("\\", "")}
@@ -148,49 +317,59 @@ export function FileBrowserDialog({
           )}
 
           {/* Current path breadcrumb */}
-          <div className="flex items-center gap-2 p-3 rounded-lg bg-sidebar-accent/10 border border-sidebar-border">
+          <div className="flex items-center gap-1.5 p-2 rounded-md bg-sidebar-accent/10 border border-sidebar-border">
             <Button
               variant="ghost"
               size="sm"
               onClick={handleGoHome}
-              className="h-7 px-2"
+              className="h-6 px-1.5"
               disabled={loading}
             >
-              <Home className="w-4 h-4" />
+              <Home className="w-3.5 h-3.5" />
             </Button>
             {parentPath && (
               <Button
                 variant="ghost"
                 size="sm"
                 onClick={handleGoToParent}
-                className="h-7 px-2"
+                className="h-6 px-1.5"
                 disabled={loading}
               >
-                <ArrowLeft className="w-4 h-4" />
+                <ArrowLeft className="w-3.5 h-3.5" />
               </Button>
             )}
-            <div className="flex-1 font-mono text-sm truncate text-muted-foreground">
+            <div className="flex-1 font-mono text-xs truncate text-muted-foreground">
               {currentPath || "Loading..."}
             </div>
           </div>
 
           {/* Directory list */}
-          <div className="flex-1 overflow-y-auto border border-sidebar-border rounded-lg">
+          <div className="flex-1 overflow-y-auto border border-sidebar-border rounded-md">
             {loading && (
-              <div className="flex items-center justify-center h-full p-8">
-                <div className="text-sm text-muted-foreground">Loading directories...</div>
+              <div className="flex items-center justify-center h-full p-4">
+                <div className="text-xs text-muted-foreground">
+                  Loading directories...
+                </div>
               </div>
             )}
 
             {error && (
-              <div className="flex items-center justify-center h-full p-8">
-                <div className="text-sm text-destructive">{error}</div>
+              <div className="flex items-center justify-center h-full p-4">
+                <div className="text-xs text-destructive">{error}</div>
               </div>
             )}
 
-            {!loading && !error && directories.length === 0 && (
-              <div className="flex items-center justify-center h-full p-8">
-                <div className="text-sm text-muted-foreground">No subdirectories found</div>
+            {warning && (
+              <div className="p-2 bg-yellow-500/10 border border-yellow-500/30 rounded-md mb-1">
+                <div className="text-xs text-yellow-500">{warning}</div>
+              </div>
+            )}
+
+            {!loading && !error && !warning && directories.length === 0 && (
+              <div className="flex items-center justify-center h-full p-4">
+                <div className="text-xs text-muted-foreground">
+                  No subdirectories found
+                </div>
               </div>
             )}
 
@@ -200,28 +379,29 @@ export function FileBrowserDialog({
                   <button
                     key={dir.path}
                     onClick={() => handleSelectDirectory(dir)}
-                    className="w-full flex items-center gap-3 p-3 hover:bg-sidebar-accent/10 transition-colors text-left group"
+                    className="w-full flex items-center gap-2 px-2 py-1.5 hover:bg-sidebar-accent/10 transition-colors text-left group"
                   >
-                    <Folder className="w-5 h-5 text-brand-500 shrink-0" />
-                    <span className="flex-1 truncate text-sm">{dir.name}</span>
-                    <ChevronRight className="w-4 h-4 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity shrink-0" />
+                    <Folder className="w-4 h-4 text-brand-500 shrink-0" />
+                    <span className="flex-1 truncate text-xs">{dir.name}</span>
+                    <ChevronRight className="w-3.5 h-3.5 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity shrink-0" />
                   </button>
                 ))}
               </div>
             )}
           </div>
 
-          <div className="text-xs text-muted-foreground">
-            Click on a folder to navigate. Select the current folder or navigate to a subfolder.
+          <div className="text-[10px] text-muted-foreground">
+            Paste a full path above, or click on folders to navigate. Press
+            Enter or click Go to jump to a path.
           </div>
         </div>
 
-        <DialogFooter className="gap-2 sm:gap-0">
-          <Button variant="ghost" onClick={() => onOpenChange(false)}>
+        <DialogFooter className="border-t border-border pt-3 gap-2 mt-1">
+          <Button variant="ghost" size="sm" onClick={() => onOpenChange(false)}>
             Cancel
           </Button>
-          <Button onClick={handleSelect} disabled={!currentPath || loading}>
-            <FolderOpen className="w-4 h-4 mr-2" />
+          <Button size="sm" onClick={handleSelect} disabled={!currentPath || loading}>
+            <FolderOpen className="w-3.5 h-3.5 mr-1.5" />
             Select Current Folder
           </Button>
         </DialogFooter>

apps/app/src/components/layout/project-setup-dialog.tsx

@@ -0,0 +1,167 @@
+"use client";
+
+import { Sparkles, Clock } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { cn } from "@/lib/utils";
+
+// Feature count options
+export type FeatureCount = 20 | 50 | 100;
+const FEATURE_COUNT_OPTIONS: {
+  value: FeatureCount;
+  label: string;
+  warning?: string;
+}[] = [
+  { value: 20, label: "20" },
+  { value: 50, label: "50", warning: "May take up to 5 minutes" },
+  { value: 100, label: "100", warning: "May take up to 5 minutes" },
+];
+
+interface ProjectSetupDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  projectOverview: string;
+  onProjectOverviewChange: (value: string) => void;
+  generateFeatures: boolean;
+  onGenerateFeaturesChange: (value: boolean) => void;
+  featureCount: FeatureCount;
+  onFeatureCountChange: (value: FeatureCount) => void;
+  onCreateSpec: () => void;
+  onSkip: () => void;
+  isCreatingSpec: boolean;
+}
+
+export function ProjectSetupDialog({
+  open,
+  onOpenChange,
+  projectOverview,
+  onProjectOverviewChange,
+  generateFeatures,
+  onGenerateFeaturesChange,
+  featureCount,
+  onFeatureCountChange,
+  onCreateSpec,
+  onSkip,
+  isCreatingSpec,
+}: ProjectSetupDialogProps) {
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(open) => {
+        onOpenChange(open);
+        if (!open && !isCreatingSpec) {
+          onSkip();
+        }
+      }}
+    >
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>Set Up Your Project</DialogTitle>
+          <DialogDescription className="text-muted-foreground">
+            We didn&apos;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&apos;ll analyze your project&apos;s tech stack and create a
+            comprehensive specification.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 py-4">
+          <div className="space-y-2">
+            <label className="text-sm font-medium">Project Overview</label>
+            <p className="text-xs text-muted-foreground">
+              Describe what your project does and what features you want to
+              build. Be as detailed as you want - this will help us create a
+              better specification.
+            </p>
+            <textarea
+              className="w-full h-48 p-3 rounded-md border border-border bg-background font-mono text-sm resize-none focus:outline-none focus:ring-2 focus:ring-ring"
+              value={projectOverview}
+              onChange={(e) => onProjectOverviewChange(e.target.value)}
+              placeholder="e.g., A project management tool that allows teams to track tasks, manage sprints, and visualize progress through kanban boards. It should support user authentication, real-time updates, and file attachments..."
+              autoFocus
+            />
+          </div>
+
+          <div className="flex items-start space-x-3 pt-2">
+            <Checkbox
+              id="sidebar-generate-features"
+              checked={generateFeatures}
+              onCheckedChange={(checked) =>
+                onGenerateFeaturesChange(checked === true)
+              }
+            />
+            <div className="space-y-1">
+              <label
+                htmlFor="sidebar-generate-features"
+                className="text-sm font-medium cursor-pointer"
+              >
+                Generate feature list
+              </label>
+              <p className="text-xs text-muted-foreground">
+                Automatically create features in the features folder from the
+                implementation roadmap after the spec is generated.
+              </p>
+            </div>
+          </div>
+
+          {/* Feature Count Selection - only shown when generateFeatures is enabled */}
+          {generateFeatures && (
+            <div className="space-y-2 pt-2 pl-7">
+              <label className="text-sm font-medium">Number of Features</label>
+              <div className="flex gap-2">
+                {FEATURE_COUNT_OPTIONS.map((option) => (
+                  <Button
+                    key={option.value}
+                    type="button"
+                    variant={
+                      featureCount === option.value ? "default" : "outline"
+                    }
+                    size="sm"
+                    onClick={() => onFeatureCountChange(option.value)}
+                    className={cn(
+                      "flex-1 transition-all",
+                      featureCount === option.value
+                        ? "bg-primary hover:bg-primary/90 text-primary-foreground"
+                        : "bg-muted/30 hover:bg-muted/50 border-border"
+                    )}
+                    data-testid={`feature-count-${option.value}`}
+                  >
+                    {option.label}
+                  </Button>
+                ))}
+              </div>
+              {FEATURE_COUNT_OPTIONS.find((o) => o.value === featureCount)
+                ?.warning && (
+                <p className="text-xs text-amber-500 flex items-center gap-1">
+                  <Clock className="w-3 h-3" />
+                  {
+                    FEATURE_COUNT_OPTIONS.find((o) => o.value === featureCount)
+                      ?.warning
+                  }
+                </p>
+              )}
+            </div>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button variant="ghost" onClick={onSkip}>
+            Skip for now
+          </Button>
+          <Button onClick={onCreateSpec} disabled={!projectOverview.trim()}>
+            <Sparkles className="w-4 h-4 mr-2" />
+            Generate Spec
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/app/src/components/new-project-modal.tsx

@@ -31,6 +31,8 @@ import { getHttpApiClient } from "@/lib/http-api-client";
 import { cn } from "@/lib/utils";
 import { useFileBrowser } from "@/contexts/file-browser-context";
 
+const LAST_PROJECT_DIR_KEY = "automaker:lastProjectDir";
+
 interface ValidationErrors {
   projectName?: boolean;
   workspaceDir?: boolean;
@@ -41,7 +43,10 @@ interface ValidationErrors {
 interface NewProjectModalProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
-  onCreateBlankProject: (projectName: string, parentDir: string) => Promise<void>;
+  onCreateBlankProject: (
+    projectName: string,
+    parentDir: string
+  ) => Promise<void>;
   onCreateFromTemplate: (
     template: StarterTemplate,
     projectName: string,
@@ -67,7 +72,8 @@ export function NewProjectModal({
   const [projectName, setProjectName] = useState("");
   const [workspaceDir, setWorkspaceDir] = useState<string>("");
   const [isLoadingWorkspace, setIsLoadingWorkspace] = useState(false);
-  const [selectedTemplate, setSelectedTemplate] = useState<StarterTemplate | null>(null);
+  const [selectedTemplate, setSelectedTemplate] =
+    useState<StarterTemplate | null>(null);
   const [useCustomUrl, setUseCustomUrl] = useState(false);
   const [customUrl, setCustomUrl] = useState("");
   const [errors, setErrors] = useState<ValidationErrors>({});
@@ -76,9 +82,18 @@ export function NewProjectModal({
   // Fetch workspace directory when modal opens
   useEffect(() => {
     if (open) {
+      // First, check localStorage for last used directory
+      const lastUsedDir = localStorage.getItem(LAST_PROJECT_DIR_KEY);
+      if (lastUsedDir) {
+        setWorkspaceDir(lastUsedDir);
+        return;
+      }
+
+      // Fall back to server config if no saved directory
       setIsLoadingWorkspace(true);
       const httpClient = getHttpApiClient();
-      httpClient.workspace.getConfig()
+      httpClient.workspace
+        .getConfig()
         .then((result) => {
           if (result.success && result.workspaceDir) {
             setWorkspaceDir(result.workspaceDir);
@@ -113,7 +128,10 @@ export function NewProjectModal({
   }, [projectName, errors.projectName]);
 
   useEffect(() => {
-    if ((selectedTemplate || (useCustomUrl && customUrl)) && errors.templateSelection) {
+    if (
+      (selectedTemplate || (useCustomUrl && customUrl)) &&
+      errors.templateSelection
+    ) {
       setErrors((prev) => ({ ...prev, templateSelection: false }));
     }
   }, [selectedTemplate, useCustomUrl, customUrl, errors.templateSelection]);
@@ -187,10 +205,14 @@ export function NewProjectModal({
   const handleBrowseDirectory = async () => {
     const selectedPath = await openFileBrowser({
       title: "Select Base Project Directory",
-      description: "Choose the parent directory where your project will be created",
+      description:
+        "Choose the parent directory where your project will be created",
+      initialPath: workspaceDir || undefined,
     });
     if (selectedPath) {
       setWorkspaceDir(selectedPath);
+      // Save to localStorage for next time
+      localStorage.setItem(LAST_PROJECT_DIR_KEY, selectedPath);
       // Clear any workspace error when a valid directory is selected
       if (errors.workspaceDir) {
         setErrors((prev) => ({ ...prev, workspaceDir: false }));
@@ -198,7 +220,17 @@ export function NewProjectModal({
     }
   };
 
-  const projectPath = workspaceDir && projectName ? `${workspaceDir}/${projectName}` : "";
+  // Use platform-specific path separator
+  const pathSep =
+    typeof window !== "undefined" && (window as any).electronAPI
+      ? navigator.platform.indexOf("Win") !== -1
+        ? "\\"
+        : "/"
+      : "/";
+  const projectPath =
+    workspaceDir && projectName
+      ? `${workspaceDir}${pathSep}${projectName}`
+      : "";
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
@@ -207,7 +239,9 @@ export function NewProjectModal({
         data-testid="new-project-modal"
       >
         <DialogHeader className="pb-2">
-          <DialogTitle className="text-foreground">Create New Project</DialogTitle>
+          <DialogTitle className="text-foreground">
+            Create New Project
+          </DialogTitle>
           <DialogDescription className="text-muted-foreground">
             Start with a blank project or choose from a starter template.
           </DialogDescription>
@@ -216,8 +250,15 @@ export function NewProjectModal({
         {/* Project Name Input - Always visible at top */}
         <div className="space-y-3 pb-4 border-b border-border">
           <div className="space-y-2">
-            <Label htmlFor="project-name" className={cn("text-foreground", errors.projectName && "text-red-500")}>
-              Project Name {errors.projectName && <span className="text-red-500">*</span>}
+            <Label
+              htmlFor="project-name"
+              className={cn(
+                "text-foreground",
+                errors.projectName && "text-red-500"
+              )}
+            >
+              Project Name{" "}
+              {errors.projectName && <span className="text-red-500">*</span>}
             </Label>
             <Input
               id="project-name"
@@ -239,16 +280,23 @@ export function NewProjectModal({
           </div>
 
           {/* Workspace Directory Display */}
-          <div className={cn(
-            "flex items-center gap-2 text-sm",
-            errors.workspaceDir ? "text-red-500" : "text-muted-foreground"
-          )}>
+          <div
+            className={cn(
+              "flex items-center gap-2 text-sm",
+              errors.workspaceDir ? "text-red-500" : "text-muted-foreground"
+            )}
+          >
             <Folder className="w-4 h-4 shrink-0" />
             <span className="flex-1 min-w-0">
               {isLoadingWorkspace ? (
                 "Loading workspace..."
               ) : workspaceDir ? (
-                <>Will be created at: <code className="text-xs bg-muted px-1.5 py-0.5 rounded truncate">{projectPath || "..."}</code></>
+                <>
+                  Will be created at:{" "}
+                  <code className="text-xs bg-muted px-1.5 py-0.5 rounded truncate">
+                    {projectPath || workspaceDir}
+                  </code>
+                </>
               ) : (
                 <span className="text-red-500">No workspace configured</span>
               )}
@@ -299,14 +347,18 @@ export function NewProjectModal({
               <div className="space-y-4">
                 {/* Error message for template selection */}
                 {errors.templateSelection && (
-                  <p className="text-sm text-red-500">Please select a template or enter a custom GitHub URL</p>
+                  <p className="text-sm text-red-500">
+                    Please select a template or enter a custom GitHub URL
+                  </p>
                 )}
 
                 {/* Preset Templates */}
-                <div className={cn(
-                  "space-y-3 rounded-lg p-1 -m-1",
-                  errors.templateSelection && "ring-2 ring-red-500/50"
-                )}>
+                <div
+                  className={cn(
+                    "space-y-3 rounded-lg p-1 -m-1",
+                    errors.templateSelection && "ring-2 ring-red-500/50"
+                  )}
+                >
                   {starterTemplates.map((template) => (
                     <div
                       key={template.id}
@@ -325,9 +377,10 @@ export function NewProjectModal({
                             <h4 className="font-medium text-foreground">
                               {template.name}
                             </h4>
-                            {selectedTemplate?.id === template.id && !useCustomUrl && (
-                              <Check className="w-4 h-4 text-brand-500" />
-                            )}
+                            {selectedTemplate?.id === template.id &&
+                              !useCustomUrl && (
+                                <Check className="w-4 h-4 text-brand-500" />
+                              )}
                           </div>
                           <p className="text-sm text-muted-foreground mb-3">
                             {template.description}
@@ -388,15 +441,22 @@ export function NewProjectModal({
                   >
                     <div className="flex items-center gap-2 mb-2">
                       <Link className="w-4 h-4 text-muted-foreground" />
-                      <h4 className="font-medium text-foreground">Custom GitHub URL</h4>
-                      {useCustomUrl && <Check className="w-4 h-4 text-brand-500" />}
+                      <h4 className="font-medium text-foreground">
+                        Custom GitHub URL
+                      </h4>
+                      {useCustomUrl && (
+                        <Check className="w-4 h-4 text-brand-500" />
+                      )}
                     </div>
                     <p className="text-sm text-muted-foreground mb-3">
                       Clone any public GitHub repository as a starting point.
                     </p>
 
                     {useCustomUrl && (
-                      <div onClick={(e) => e.stopPropagation()} className="space-y-1">
+                      <div
+                        onClick={(e) => e.stopPropagation()}
+                        className="space-y-1"
+                      >
                         <Input
                           placeholder="https://github.com/username/repository"
                           value={customUrl}
@@ -410,7 +470,9 @@ export function NewProjectModal({
                           data-testid="custom-url-input"
                         />
                         {errors.customUrl && (
-                          <p className="text-xs text-red-500">GitHub URL is required</p>
+                          <p className="text-xs text-red-500">
+                            GitHub URL is required
+                          </p>
                         )}
                       </div>
                     )}

apps/app/src/components/session-manager.tsx

@@ -27,6 +27,7 @@ import type { SessionListItem } from "@/types/electron";
 import { useKeyboardShortcutsConfig } from "@/hooks/use-keyboard-shortcuts";
 import { getElectronAPI } from "@/lib/electron";
 import { DeleteSessionDialog } from "@/components/delete-session-dialog";
+import { DeleteAllArchivedSessionsDialog } from "@/components/delete-all-archived-sessions-dialog";
 
 // Random session name generator
 const adjectives = [
@@ -116,6 +117,7 @@ export function SessionManager({
   );
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
   const [sessionToDelete, setSessionToDelete] = useState<SessionListItem | null>(null);
+  const [isDeleteAllArchivedDialogOpen, setIsDeleteAllArchivedDialogOpen] = useState(false);
 
   // Check running state for all sessions
   const checkRunningSessions = async (sessionList: SessionListItem[]) => {
@@ -314,13 +316,27 @@ export function SessionManager({
     setSessionToDelete(null);
   };
 
+  // Delete all archived sessions
+  const handleDeleteAllArchivedSessions = async () => {
+    const api = getElectronAPI();
+    if (!api?.sessions) return;
+
+    // Delete each archived session
+    for (const session of archivedSessions) {
+      await api.sessions.delete(session.id);
+    }
+
+    await loadSessions();
+    setIsDeleteAllArchivedDialogOpen(false);
+  };
+
   const activeSessions = sessions.filter((s) => !s.isArchived);
   const archivedSessions = sessions.filter((s) => s.isArchived);
   const displayedSessions =
     activeTab === "active" ? activeSessions : archivedSessions;
 
   return (
-    <Card className="h-full flex flex-col">
+    <Card className="h-full flex flex-col rounded-none">
       <CardHeader className="pb-3">
         <div className="flex items-center justify-between mb-4">
           <CardTitle>Agent Sessions</CardTitle>
@@ -402,6 +418,22 @@ export function SessionManager({
           </div>
         )}
 
+        {/* Delete All Archived button - shown at the top of archived sessions */}
+        {activeTab === "archived" && archivedSessions.length > 0 && (
+          <div className="pb-2 border-b mb-2">
+            <Button
+              variant="destructive"
+              size="sm"
+              className="w-full"
+              onClick={() => setIsDeleteAllArchivedDialogOpen(true)}
+              data-testid="delete-all-archived-sessions-button"
+            >
+              <Trash2 className="w-4 h-4 mr-2" />
+              Delete All Archived Sessions
+            </Button>
+          </div>
+        )}
+
         {/* Session list */}
         {displayedSessions.map((session) => (
           <div
@@ -574,6 +606,14 @@ export function SessionManager({
         session={sessionToDelete}
         onConfirm={confirmDeleteSession}
       />
+
+      {/* Delete All Archived Sessions Confirmation Dialog */}
+      <DeleteAllArchivedSessionsDialog
+        open={isDeleteAllArchivedDialogOpen}
+        onOpenChange={setIsDeleteAllArchivedDialogOpen}
+        archivedCount={archivedSessions.length}
+        onConfirm={handleDeleteAllArchivedSessions}
+      />
     </Card>
   );
 }

apps/app/src/components/ui/accordion.tsx

@@ -0,0 +1,243 @@
+"use client";
+
+import * as React from "react";
+import { ChevronDown } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+type AccordionType = "single" | "multiple";
+
+interface AccordionContextValue {
+  type: AccordionType;
+  value: string | string[];
+  onValueChange: (value: string) => void;
+  collapsible?: boolean;
+}
+
+const AccordionContext = React.createContext<AccordionContextValue | null>(
+  null
+);
+
+interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
+  type?: "single" | "multiple";
+  value?: string | string[];
+  defaultValue?: string | string[];
+  onValueChange?: (value: string | string[]) => void;
+  collapsible?: boolean;
+}
+
+const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(
+  (
+    {
+      type = "single",
+      value,
+      defaultValue,
+      onValueChange,
+      collapsible = false,
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const [internalValue, setInternalValue] = React.useState<string | string[]>(
+      () => {
+        if (value !== undefined) return value;
+        if (defaultValue !== undefined) return defaultValue;
+        return type === "single" ? "" : [];
+      }
+    );
+
+    const currentValue = value !== undefined ? value : internalValue;
+
+    const handleValueChange = React.useCallback(
+      (itemValue: string) => {
+        let newValue: string | string[];
+
+        if (type === "single") {
+          if (currentValue === itemValue && collapsible) {
+            newValue = "";
+          } else if (currentValue === itemValue && !collapsible) {
+            return;
+          } else {
+            newValue = itemValue;
+          }
+        } else {
+          const currentArray = Array.isArray(currentValue)
+            ? currentValue
+            : [currentValue].filter(Boolean);
+          if (currentArray.includes(itemValue)) {
+            newValue = currentArray.filter((v) => v !== itemValue);
+          } else {
+            newValue = [...currentArray, itemValue];
+          }
+        }
+
+        if (value === undefined) {
+          setInternalValue(newValue);
+        }
+        onValueChange?.(newValue);
+      },
+      [type, currentValue, collapsible, value, onValueChange]
+    );
+
+    const contextValue = React.useMemo(
+      () => ({
+        type,
+        value: currentValue,
+        onValueChange: handleValueChange,
+        collapsible,
+      }),
+      [type, currentValue, handleValueChange, collapsible]
+    );
+
+    return (
+      <AccordionContext.Provider value={contextValue}>
+        <div
+          ref={ref}
+          data-slot="accordion"
+          className={cn("w-full", className)}
+          {...props}
+        >
+          {children}
+        </div>
+      </AccordionContext.Provider>
+    );
+  }
+);
+Accordion.displayName = "Accordion";
+
+interface AccordionItemContextValue {
+  value: string;
+  isOpen: boolean;
+}
+
+const AccordionItemContext =
+  React.createContext<AccordionItemContextValue | null>(null);
+
+interface AccordionItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  value: string;
+}
+
+const AccordionItem = React.forwardRef<HTMLDivElement, AccordionItemProps>(
+  ({ className, value, children, ...props }, ref) => {
+    const accordionContext = React.useContext(AccordionContext);
+
+    if (!accordionContext) {
+      throw new Error("AccordionItem must be used within an Accordion");
+    }
+
+    const isOpen = Array.isArray(accordionContext.value)
+      ? accordionContext.value.includes(value)
+      : accordionContext.value === value;
+
+    const contextValue = React.useMemo(
+      () => ({ value, isOpen }),
+      [value, isOpen]
+    );
+
+    return (
+      <AccordionItemContext.Provider value={contextValue}>
+        <div
+          ref={ref}
+          data-slot="accordion-item"
+          data-state={isOpen ? "open" : "closed"}
+          className={cn("border-b border-border", className)}
+          {...props}
+        >
+          {children}
+        </div>
+      </AccordionItemContext.Provider>
+    );
+  }
+);
+AccordionItem.displayName = "AccordionItem";
+
+interface AccordionTriggerProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {}
+
+const AccordionTrigger = React.forwardRef<
+  HTMLButtonElement,
+  AccordionTriggerProps
+>(({ className, children, ...props }, ref) => {
+  const accordionContext = React.useContext(AccordionContext);
+  const itemContext = React.useContext(AccordionItemContext);
+
+  if (!accordionContext || !itemContext) {
+    throw new Error("AccordionTrigger must be used within an AccordionItem");
+  }
+
+  const { onValueChange } = accordionContext;
+  const { value, isOpen } = itemContext;
+
+  return (
+    <div data-slot="accordion-header" className="flex">
+      <button
+        ref={ref}
+        type="button"
+        data-slot="accordion-trigger"
+        data-state={isOpen ? "open" : "closed"}
+        aria-expanded={isOpen}
+        onClick={() => onValueChange(value)}
+        className={cn(
+          "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+      </button>
+    </div>
+  );
+});
+AccordionTrigger.displayName = "AccordionTrigger";
+
+interface AccordionContentProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+const AccordionContent = React.forwardRef<HTMLDivElement, AccordionContentProps>(
+  ({ className, children, ...props }, ref) => {
+    const itemContext = React.useContext(AccordionItemContext);
+    const contentRef = React.useRef<HTMLDivElement>(null);
+    const [height, setHeight] = React.useState<number | undefined>(undefined);
+
+    if (!itemContext) {
+      throw new Error("AccordionContent must be used within an AccordionItem");
+    }
+
+    const { isOpen } = itemContext;
+
+    React.useEffect(() => {
+      if (contentRef.current) {
+        const resizeObserver = new ResizeObserver((entries) => {
+          for (const entry of entries) {
+            setHeight(entry.contentRect.height);
+          }
+        });
+        resizeObserver.observe(contentRef.current);
+        return () => resizeObserver.disconnect();
+      }
+    }, []);
+
+    return (
+      <div
+        data-slot="accordion-content"
+        data-state={isOpen ? "open" : "closed"}
+        className="overflow-hidden text-sm transition-all duration-200 ease-out"
+        style={{
+          height: isOpen ? (height !== undefined ? `${height}px` : "auto") : 0,
+          opacity: isOpen ? 1 : 0,
+        }}
+        {...props}
+      >
+        <div ref={contentRef}>
+          <div ref={ref} className={cn("pb-4 pt-0", className)}>
+            {children}
+          </div>
+        </div>
+      </div>
+    );
+  }
+);
+AccordionContent.displayName = "AccordionContent";
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

apps/app/src/components/ui/autocomplete.tsx

@@ -0,0 +1,223 @@
+"use client";
+
+import * as React from "react";
+import { Check, ChevronsUpDown, LucideIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+
+export interface AutocompleteOption {
+  value: string;
+  label?: string;
+  badge?: string;
+  isDefault?: boolean;
+}
+
+interface AutocompleteProps {
+  value: string;
+  onChange: (value: string) => void;
+  options: (string | AutocompleteOption)[];
+  placeholder?: string;
+  searchPlaceholder?: string;
+  emptyMessage?: string;
+  className?: string;
+  disabled?: boolean;
+  icon?: LucideIcon;
+  allowCreate?: boolean;
+  createLabel?: (value: string) => string;
+  "data-testid"?: string;
+  itemTestIdPrefix?: string;
+}
+
+function normalizeOption(opt: string | AutocompleteOption): AutocompleteOption {
+  if (typeof opt === "string") {
+    return { value: opt, label: opt };
+  }
+  return { ...opt, label: opt.label ?? opt.value };
+}
+
+export function Autocomplete({
+  value,
+  onChange,
+  options,
+  placeholder = "Select an option...",
+  searchPlaceholder = "Search...",
+  emptyMessage = "No results found.",
+  className,
+  disabled = false,
+  icon: Icon,
+  allowCreate = false,
+  createLabel = (v) => `Create "${v}"`,
+  "data-testid": testId,
+  itemTestIdPrefix = "option",
+}: AutocompleteProps) {
+  const [open, setOpen] = React.useState(false);
+  const [inputValue, setInputValue] = React.useState("");
+  const [triggerWidth, setTriggerWidth] = React.useState<number>(0);
+  const triggerRef = React.useRef<HTMLButtonElement>(null);
+
+  const normalizedOptions = React.useMemo(
+    () => options.map(normalizeOption),
+    [options]
+  );
+
+  // Update trigger width when component mounts or value changes
+  React.useEffect(() => {
+    if (triggerRef.current) {
+      const updateWidth = () => {
+        setTriggerWidth(triggerRef.current?.offsetWidth || 0);
+      };
+
+      updateWidth();
+
+      const resizeObserver = new ResizeObserver(updateWidth);
+      resizeObserver.observe(triggerRef.current);
+
+      return () => {
+        resizeObserver.disconnect();
+      };
+    }
+  }, [value]);
+
+  // Filter options based on input
+  const filteredOptions = React.useMemo(() => {
+    if (!inputValue) return normalizedOptions;
+    const lower = inputValue.toLowerCase();
+    return normalizedOptions.filter(
+      (opt) =>
+        opt.value.toLowerCase().includes(lower) ||
+        opt.label?.toLowerCase().includes(lower)
+    );
+  }, [normalizedOptions, inputValue]);
+
+  // Check if user typed a new value that doesn't exist
+  const isNewValue =
+    allowCreate &&
+    inputValue.trim() &&
+    !normalizedOptions.some(
+      (opt) => opt.value.toLowerCase() === inputValue.toLowerCase()
+    );
+
+  // Get display value
+  const displayValue = React.useMemo(() => {
+    if (!value) return null;
+    const found = normalizedOptions.find((opt) => opt.value === value);
+    return found?.label ?? value;
+  }, [value, normalizedOptions]);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          ref={triggerRef}
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          disabled={disabled}
+          className={cn(
+            "w-full justify-between",
+            Icon && "font-mono text-sm",
+            className
+          )}
+          data-testid={testId}
+        >
+          <span className="flex items-center gap-2 truncate">
+            {Icon && (
+              <Icon className="w-4 h-4 shrink-0 text-muted-foreground" />
+            )}
+            {displayValue || placeholder}
+          </span>
+          <ChevronsUpDown className="opacity-50 shrink-0" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        className="p-0"
+        style={{
+          width: Math.max(triggerWidth, 200),
+        }}
+        data-testid={testId ? `${testId}-list` : undefined}
+      >
+        <Command shouldFilter={false}>
+          <CommandInput
+            placeholder={searchPlaceholder}
+            className="h-9"
+            value={inputValue}
+            onValueChange={setInputValue}
+          />
+          <CommandList>
+            <CommandEmpty>
+              {isNewValue ? (
+                <div className="py-2 px-3 text-sm">
+                  Press enter to create{" "}
+                  <code className="bg-muted px-1 rounded">{inputValue}</code>
+                </div>
+              ) : (
+                emptyMessage
+              )}
+            </CommandEmpty>
+            <CommandGroup>
+              {/* Show "Create new" option if typing a new value */}
+              {isNewValue && (
+                <CommandItem
+                  value={inputValue}
+                  onSelect={() => {
+                    onChange(inputValue);
+                    setInputValue("");
+                    setOpen(false);
+                  }}
+                  className="text-[var(--status-success)]"
+                  data-testid={`${itemTestIdPrefix}-create-new`}
+                >
+                  {Icon && <Icon className="w-4 h-4 mr-2" />}
+                  {createLabel(inputValue)}
+                  <span className="ml-auto text-xs text-muted-foreground">
+                    (new)
+                  </span>
+                </CommandItem>
+              )}
+              {filteredOptions.map((option) => (
+                <CommandItem
+                  key={option.value}
+                  value={option.value}
+                  onSelect={(currentValue) => {
+                    onChange(currentValue === value ? "" : currentValue);
+                    setInputValue("");
+                    setOpen(false);
+                  }}
+                  data-testid={`${itemTestIdPrefix}-${option.value.toLowerCase().replace(/[\s/\\]+/g, "-")}`}
+                >
+                  {Icon && <Icon className="w-4 h-4 mr-2" />}
+                  {option.label}
+                  <Check
+                    className={cn(
+                      "ml-auto",
+                      value === option.value ? "opacity-100" : "opacity-0"
+                    )}
+                  />
+                  {option.badge && (
+                    <span className="ml-2 text-xs text-muted-foreground">
+                      ({option.badge})
+                    </span>
+                  )}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}

apps/app/src/components/ui/badge.tsx

@@ -4,21 +4,42 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 shadow-sm",
   {
     variants: {
       variant: {
         default:
-          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/90",
         secondary:
           "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
         destructive:
-          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-        outline: "text-foreground",
+          "border-transparent bg-destructive text-white hover:bg-destructive/90",
+        outline:
+          "text-foreground border-border bg-background/50 backdrop-blur-sm",
+        // Semantic status variants using CSS variables
+        success:
+          "border-transparent bg-[var(--status-success-bg)] text-[var(--status-success)] border border-[var(--status-success)]/30",
+        warning:
+          "border-transparent bg-[var(--status-warning-bg)] text-[var(--status-warning)] border border-[var(--status-warning)]/30",
+        error:
+          "border-transparent bg-[var(--status-error-bg)] text-[var(--status-error)] border border-[var(--status-error)]/30",
+        info:
+          "border-transparent bg-[var(--status-info-bg)] text-[var(--status-info)] border border-[var(--status-info)]/30",
+        // Muted variants for subtle indication
+        muted:
+          "border-border/50 bg-muted/50 text-muted-foreground",
+        brand:
+          "border-transparent bg-brand-500/15 text-brand-500 border border-brand-500/30",
+      },
+      size: {
+        default: "px-2.5 py-0.5 text-xs",
+        sm: "px-2 py-0.5 text-[10px]",
+        lg: "px-3 py-1 text-sm",
       },
     },
     defaultVariants: {
       variant: "default",
+      size: "default",
     },
   }
 );
@@ -27,9 +48,9 @@ export interface BadgeProps
   extends React.HTMLAttributes<HTMLDivElement>,
     VariantProps<typeof badgeVariants> {}
 
-function Badge({ className, variant, ...props }: BadgeProps) {
+function Badge({ className, variant, size, ...props }: BadgeProps) {
   return (
-    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+    <div className={cn(badgeVariants({ variant, size }), className)} {...props} />
   );
 }
 

apps/app/src/components/ui/branch-autocomplete.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import * as React from "react";
+import { GitBranch } from "lucide-react";
+import { Autocomplete, AutocompleteOption } from "@/components/ui/autocomplete";
+
+interface BranchAutocompleteProps {
+  value: string;
+  onChange: (value: string) => void;
+  branches: string[];
+  placeholder?: string;
+  className?: string;
+  disabled?: boolean;
+  "data-testid"?: string;
+}
+
+export function BranchAutocomplete({
+  value,
+  onChange,
+  branches,
+  placeholder = "Select a branch...",
+  className,
+  disabled = false,
+  "data-testid": testId,
+}: BranchAutocompleteProps) {
+  // Always include "main" at the top of suggestions
+  const branchOptions: AutocompleteOption[] = React.useMemo(() => {
+    const branchSet = new Set(["main", ...branches]);
+    return Array.from(branchSet).map((branch) => ({
+      value: branch,
+      label: branch,
+      badge: branch === "main" ? "default" : undefined,
+    }));
+  }, [branches]);
+
+  return (
+    <Autocomplete
+      value={value}
+      onChange={onChange}
+      options={branchOptions}
+      placeholder={placeholder}
+      searchPlaceholder="Search or type new branch..."
+      emptyMessage="No branches found."
+      className={className}
+      disabled={disabled}
+      icon={GitBranch}
+      allowCreate
+      createLabel={(v) => `Create "${v}"`}
+      data-testid={testId}
+      itemTestIdPrefix="branch-option"
+    />
+  );
+}

apps/app/src/components/ui/button.tsx

@@ -1,24 +1,26 @@
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
+import { Loader2 } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all cursor-pointer disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all duration-200 cursor-pointer disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive active:scale-[0.98]",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        default:
+          "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 hover:shadow-md hover:shadow-primary/25",
         destructive:
-          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+          "bg-destructive text-white shadow-sm hover:bg-destructive/90 hover:shadow-md hover:shadow-destructive/25 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
         outline:
           "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
         secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
         ghost:
           "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline",
+        link: "text-primary underline-offset-4 hover:underline active:scale-100",
         "animated-outline":
           "relative overflow-hidden rounded-xl hover:bg-transparent shadow-none",
       },
@@ -38,17 +40,32 @@ const buttonVariants = cva(
   }
 );
 
+// Loading spinner component
+function ButtonSpinner({ className }: { className?: string }) {
+  return (
+    <Loader2
+      className={cn("size-4 animate-spin", className)}
+      aria-hidden="true"
+    />
+  );
+}
+
 function Button({
   className,
   variant,
   size,
   asChild = false,
+  loading = false,
+  disabled,
   children,
   ...props
 }: React.ComponentProps<"button"> &
   VariantProps<typeof buttonVariants> & {
     asChild?: boolean;
+    loading?: boolean;
   }) {
+  const isDisabled = disabled || loading;
+
   // Special handling for animated-outline variant
   if (variant === "animated-outline" && !asChild) {
     return (
@@ -59,20 +76,22 @@ function Button({
           className
         )}
         data-slot="button"
+        disabled={isDisabled}
         {...props}
       >
-        {/* Animated rotating gradient border */}
-        <span className="absolute inset-[-1000%] animate-[spin_2s_linear_infinite] animated-outline-gradient" />
+        {/* Animated rotating gradient border - smoother animation */}
+        <span className="absolute inset-[-1000%] animate-[spin_3s_linear_infinite] animated-outline-gradient opacity-75 transition-opacity duration-300 group-hover:opacity-100" />
 
         {/* Inner content container */}
         <span
           className={cn(
-            "animated-outline-inner inline-flex h-full w-full cursor-pointer items-center justify-center gap-2 rounded-[10px] px-4 py-1 text-sm font-medium backdrop-blur-3xl transition-all",
+            "animated-outline-inner inline-flex h-full w-full cursor-pointer items-center justify-center gap-2 rounded-[10px] px-4 py-1 text-sm font-medium backdrop-blur-3xl transition-all duration-200",
             size === "sm" && "px-3 text-xs gap-1.5",
             size === "lg" && "px-8",
             size === "icon" && "p-0 gap-0"
           )}
         >
+          {loading && <ButtonSpinner />}
           {children}
         </span>
       </button>
@@ -85,8 +104,10 @@ function Button({
     <Comp
       data-slot="button"
       className={cn(buttonVariants({ variant, size, className }))}
+      disabled={isDisabled}
       {...props}
     >
+      {loading && <ButtonSpinner />}
       {children}
     </Comp>
   );

apps/app/src/components/ui/card.tsx

@@ -2,12 +2,20 @@ import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
-function Card({ className, ...props }: React.ComponentProps<"div">) {
+interface CardProps extends React.ComponentProps<"div"> {
+  gradient?: boolean;
+}
+
+function Card({ className, gradient = false, ...props }: CardProps) {
   return (
     <div
       data-slot="card"
       className={cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border border-white/10 backdrop-blur-sm py-6 shadow-sm",
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border border-white/10 backdrop-blur-md py-6",
+        // Premium layered shadow
+        "shadow-[0_1px_2px_rgba(0,0,0,0.05),0_4px_6px_rgba(0,0,0,0.05),0_10px_20px_rgba(0,0,0,0.04)]",
+        // Gradient border option
+        gradient && "relative before:absolute before:inset-0 before:rounded-xl before:p-[1px] before:bg-gradient-to-br before:from-white/20 before:to-transparent before:pointer-events-none before:-z-10",
         className
       )}
       {...props}
@@ -20,7 +28,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card-header"
       className={cn(
-        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
         className
       )}
       {...props}
@@ -32,7 +40,7 @@ function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-title"
-      className={cn("leading-none font-semibold", className)}
+      className={cn("leading-none font-semibold tracking-tight", className)}
       {...props}
     />
   );
@@ -42,7 +50,7 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-description"
-      className={cn("text-muted-foreground text-sm", className)}
+      className={cn("text-muted-foreground text-sm leading-relaxed", className)}
       {...props}
     />
   );
@@ -75,7 +83,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-footer"
-      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      className={cn("flex items-center gap-3 px-6 [.border-t]:pt-6", className)}
       {...props}
     />
   );

apps/app/src/components/ui/category-autocomplete.tsx

@@ -1,23 +1,7 @@
 "use client";
 
 import * as React from "react";
-import { Check, ChevronsUpDown } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-import { Button } from "@/components/ui/button";
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "@/components/ui/command";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
+import { Autocomplete } from "@/components/ui/autocomplete";
 
 interface CategoryAutocompleteProps {
   value: string;
@@ -38,54 +22,18 @@ export function CategoryAutocomplete({
   disabled = false,
   "data-testid": testId,
 }: CategoryAutocompleteProps) {
-  const [open, setOpen] = React.useState(false);
-
   return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button
-          variant="outline"
-          role="combobox"
-          aria-expanded={open}
-          disabled={disabled}
-          className={cn("w-full justify-between", className)}
-          data-testid={testId}
-        >
-          {value
-            ? suggestions.find((s) => s === value) ?? value
-            : placeholder}
-          <ChevronsUpDown className="opacity-50" />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-[200px] p-0">
-        <Command>
-          <CommandInput placeholder="Search category..." className="h-9" />
-          <CommandList>
-            <CommandEmpty>No category found.</CommandEmpty>
-            <CommandGroup>
-              {suggestions.map((suggestion) => (
-                <CommandItem
-                  key={suggestion}
-                  value={suggestion}
-                  onSelect={(currentValue) => {
-                    onChange(currentValue === value ? "" : currentValue);
-                    setOpen(false);
-                  }}
-                  data-testid={`category-option-${suggestion.toLowerCase().replace(/\s+/g, "-")}`}
-                >
-                  {suggestion}
-                  <Check
-                    className={cn(
-                      "ml-auto",
-                      value === suggestion ? "opacity-100" : "opacity-0"
-                    )}
-                  />
-                </CommandItem>
-              ))}
-            </CommandGroup>
-          </CommandList>
-        </Command>
-      </PopoverContent>
-    </Popover>
+    <Autocomplete
+      value={value}
+      onChange={onChange}
+      options={suggestions}
+      placeholder={placeholder}
+      searchPlaceholder="Search category..."
+      emptyMessage="No category found."
+      className={className}
+      disabled={disabled}
+      data-testid={testId}
+      itemTestIdPrefix="category-option"
+    />
   );
 }

apps/app/src/components/ui/checkbox.tsx

@@ -6,25 +6,51 @@ import { Check } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 
-const Checkbox = React.forwardRef<
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <CheckboxPrimitive.Root
-    ref={ref}
-    className={cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground hover:border-primary/80",
-      className
-    )}
-    {...props}
-  >
-    <CheckboxPrimitive.Indicator
-      className={cn("flex items-center justify-center text-current")}
+interface CheckboxProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "checked" | "defaultChecked"> {
+  checked?: boolean | "indeterminate";
+  defaultChecked?: boolean | "indeterminate";
+  onCheckedChange?: (checked: boolean) => void;
+  required?: boolean;
+}
+
+const CheckboxRoot = CheckboxPrimitive.Root as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> & {
+    children?: React.ReactNode;
+    className?: string;
+  } & React.RefAttributes<HTMLButtonElement>
+>;
+
+const CheckboxIndicator = CheckboxPrimitive.Indicator as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Indicator> & {
+    children?: React.ReactNode;
+    className?: string;
+  } & React.RefAttributes<HTMLSpanElement>
+>;
+
+const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
+  ({ className, onCheckedChange, children: _children, ...props }, ref) => (
+    <CheckboxRoot
+      ref={ref}
+      className={cn(
+        "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground hover:border-primary/80",
+        className
+      )}
+      onCheckedChange={(checked) => {
+        // Handle indeterminate state by treating it as false for consumers expecting boolean
+        if (onCheckedChange) {
+          onCheckedChange(checked === true);
+        }
+      }}
+      {...props}
     >
-      <Check className="h-4 w-4" />
-    </CheckboxPrimitive.Indicator>
-  </CheckboxPrimitive.Root>
-));
+      <CheckboxIndicator
+        className={cn("flex items-center justify-center text-current")}
+      >
+        <Check className="h-4 w-4" />
+      </CheckboxIndicator>
+    </CheckboxRoot>
+  )
+);
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
 export { Checkbox };

apps/app/src/components/ui/description-image-dropzone.tsx

@@ -268,6 +268,52 @@ export function DescriptionImageDropZone({
     [images, onImagesChange]
   );
 
+  // Handle paste events to detect and process images from clipboard
+  // Works across all OS (Windows, Linux, macOS)
+  const handlePaste = useCallback(
+    (e: React.ClipboardEvent) => {
+      if (disabled || isProcessing) return;
+
+      const clipboardItems = e.clipboardData?.items;
+      if (!clipboardItems) return;
+
+      const imageFiles: File[] = [];
+
+      // Iterate through clipboard items to find images
+      for (let i = 0; i < clipboardItems.length; i++) {
+        const item = clipboardItems[i];
+
+        // Check if the item is an image
+        if (item.type.startsWith("image/")) {
+          const file = item.getAsFile();
+          if (file) {
+            // Generate a filename for pasted images since they don't have one
+            const extension = item.type.split("/")[1] || "png";
+            const timestamp = new Date().toISOString().replace(/[:.]/g, "-");
+            const renamedFile = new File(
+              [file],
+              `pasted-image-${timestamp}.${extension}`,
+              { type: file.type }
+            );
+            imageFiles.push(renamedFile);
+          }
+        }
+      }
+
+      // If we found images, process them and prevent default paste behavior
+      if (imageFiles.length > 0) {
+        e.preventDefault();
+
+        // Create a FileList-like object from the array
+        const dataTransfer = new DataTransfer();
+        imageFiles.forEach((file) => dataTransfer.items.add(file));
+        processFiles(dataTransfer.files);
+      }
+      // If no images found, let the default paste behavior happen (paste text)
+    },
+    [disabled, isProcessing, processFiles]
+  );
+
   return (
     <div className={cn("relative", className)}>
       {/* Hidden file input */}
@@ -313,6 +359,7 @@ export function DescriptionImageDropZone({
           placeholder={placeholder}
           value={value}
           onChange={(e) => onChange(e.target.value)}
+          onPaste={handlePaste}
           disabled={disabled}
           autoFocus={autoFocus}
           aria-invalid={error}
@@ -326,7 +373,7 @@ export function DescriptionImageDropZone({
 
       {/* Hint text */}
       <p className="text-xs text-muted-foreground mt-1">
-        Drag and drop images here or{" "}
+        Paste, drag and drop images, or{" "}
         <button
           type="button"
           onClick={handleBrowseClick}

apps/app/src/components/ui/dialog.tsx

@@ -6,6 +6,36 @@ import { XIcon } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 
+// Type-safe wrappers for Radix UI primitives (React 19 compatibility)
+const DialogContentPrimitive = DialogPrimitive.Content as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+    children?: React.ReactNode;
+    className?: string;
+  } & React.RefAttributes<HTMLDivElement>
+>;
+
+const DialogClosePrimitive = DialogPrimitive.Close as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close> & {
+    children?: React.ReactNode;
+    className?: string;
+  } & React.RefAttributes<HTMLButtonElement>
+>;
+
+const DialogTitlePrimitive = DialogPrimitive.Title as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> & {
+    children?: React.ReactNode;
+    className?: string;
+  } & React.RefAttributes<HTMLHeadingElement>
+>;
+
+const DialogDescriptionPrimitive = DialogPrimitive.Description as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description> & {
+    children?: React.ReactNode;
+    className?: string;
+    title?: string;
+  } & React.RefAttributes<HTMLParagraphElement>
+>;
+
 function Dialog({
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Root>) {
@@ -30,15 +60,26 @@ function DialogClose({
   return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
 }
 
+const DialogOverlayPrimitive = DialogPrimitive.Overlay as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> & {
+    className?: string;
+  } & React.RefAttributes<HTMLDivElement>
+>;
+
 function DialogOverlay({
   className,
   ...props
-}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+}: React.ComponentProps<typeof DialogPrimitive.Overlay> & {
+  className?: string;
+}) {
   return (
-    <DialogPrimitive.Overlay
+    <DialogOverlayPrimitive
       data-slot="dialog-overlay"
       className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        "fixed inset-0 z-50 bg-black/60 backdrop-blur-sm",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out",
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "duration-200",
         className
       )}
       {...props}
@@ -63,10 +104,20 @@ function DialogContent({
   return (
     <DialogPortal data-slot="dialog-portal">
       <DialogOverlay />
-      <DialogPrimitive.Content
+      <DialogContentPrimitive
         data-slot="dialog-content"
         className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 flex flex-col w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] rounded-lg border shadow-lg duration-200 max-h-[calc(100vh-4rem)]",
+          "fixed top-[50%] left-[50%] z-50 translate-x-[-50%] translate-y-[-50%]",
+          "flex flex-col w-full max-w-[calc(100%-2rem)] max-h-[calc(100vh-4rem)]",
+          "bg-card border border-border rounded-xl shadow-2xl",
+          // Premium shadow
+          "shadow-[0_25px_50px_-12px_rgba(0,0,0,0.25)]",
+          // Animations - smoother with scale
+          "data-[state=open]:animate-in data-[state=closed]:animate-out",
+          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+          "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+          "data-[state=closed]:slide-out-to-top-[2%] data-[state=open]:slide-in-from-top-[2%]",
+          "duration-200",
           compact
             ? "max-w-4xl p-4"
             : !hasCustomMaxWidth
@@ -78,18 +129,23 @@ function DialogContent({
       >
         {children}
         {showCloseButton && (
-          <DialogPrimitive.Close
+          <DialogClosePrimitive
             data-slot="dialog-close"
             className={cn(
-              "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute rounded-xs opacity-70 transition-opacity cursor-pointer hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-              compact ? "top-2 right-3" : "top-3 right-5"
+              "absolute rounded-lg opacity-60 transition-all duration-200 cursor-pointer",
+              "hover:opacity-100 hover:bg-muted",
+              "focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-none",
+              "disabled:pointer-events-none disabled:cursor-not-allowed",
+              "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4",
+              "p-1.5",
+              compact ? "top-2 right-3" : "top-4 right-4"
             )}
           >
             <XIcon />
             <span className="sr-only">Close</span>
-          </DialogPrimitive.Close>
+          </DialogClosePrimitive>
         )}
-      </DialogPrimitive.Content>
+      </DialogContentPrimitive>
     </DialogPortal>
   );
 }
@@ -109,7 +165,7 @@ function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="dialog-footer"
       className={cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end mt-6",
         className
       )}
       {...props}
@@ -119,27 +175,42 @@ function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
 
 function DialogTitle({
   className,
+  children,
   ...props
-}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+}: React.ComponentProps<typeof DialogPrimitive.Title> & {
+  children?: React.ReactNode;
+  className?: string;
+}) {
   return (
-    <DialogPrimitive.Title
+    <DialogTitlePrimitive
       data-slot="dialog-title"
-      className={cn("text-lg leading-none font-semibold", className)}
+      className={cn("text-lg leading-none font-semibold tracking-tight", className)}
       {...props}
-    />
+    >
+      {children}
+    </DialogTitlePrimitive>
   );
 }
 
 function DialogDescription({
   className,
+  children,
+  title,
   ...props
-}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+}: React.ComponentProps<typeof DialogPrimitive.Description> & {
+  children?: React.ReactNode;
+  className?: string;
+  title?: string;
+}) {
   return (
-    <DialogPrimitive.Description
+    <DialogDescriptionPrimitive
       data-slot="dialog-description"
-      className={cn("text-muted-foreground text-sm", className)}
+      className={cn("text-muted-foreground text-sm leading-relaxed", className)}
+      title={title}
       {...props}
-    />
+    >
+      {children}
+    </DialogDescriptionPrimitive>
   );
 }
 

apps/app/src/components/ui/dropdown-menu.tsx

@@ -6,9 +6,83 @@ import { Check, ChevronRight, Circle } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
+// Type-safe wrappers for Radix UI primitives (React 19 compatibility)
+const DropdownMenuTriggerPrimitive = DropdownMenuPrimitive.Trigger as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger> & {
+    children?: React.ReactNode;
+    asChild?: boolean;
+  } & React.RefAttributes<HTMLButtonElement>
+>;
+
+const DropdownMenuSubTriggerPrimitive = DropdownMenuPrimitive.SubTrigger as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    children?: React.ReactNode;
+    className?: string;
+  } & React.RefAttributes<HTMLDivElement>
+>;
+
+const DropdownMenuRadioGroupPrimitive = DropdownMenuPrimitive.RadioGroup as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioGroup> & {
+    children?: React.ReactNode;
+  } & React.RefAttributes<HTMLDivElement>
+>;
+
+const DropdownMenuItemPrimitive = DropdownMenuPrimitive.Item as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    children?: React.ReactNode;
+    className?: string;
+  } & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>
+>;
+
+const DropdownMenuRadioItemPrimitive = DropdownMenuPrimitive.RadioItem as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> & {
+    children?: React.ReactNode;
+    className?: string;
+  } & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>
+>;
+
+const DropdownMenuLabelPrimitive = DropdownMenuPrimitive.Label as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    children?: React.ReactNode;
+    className?: string;
+  } & React.RefAttributes<HTMLDivElement>
+>;
+
+const DropdownMenuCheckboxItemPrimitive = DropdownMenuPrimitive.CheckboxItem as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem> & {
+    children?: React.ReactNode;
+    className?: string;
+  } & React.RefAttributes<HTMLDivElement>
+>;
+
+const DropdownMenuItemIndicatorPrimitive = DropdownMenuPrimitive.ItemIndicator as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.ItemIndicator> & {
+    children?: React.ReactNode;
+  } & React.RefAttributes<HTMLSpanElement>
+>;
+
+const DropdownMenuSeparatorPrimitive = DropdownMenuPrimitive.Separator as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator> & {
+    className?: string;
+  } & React.RefAttributes<HTMLDivElement>
+>;
+
 const DropdownMenu = DropdownMenuPrimitive.Root
 
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+function DropdownMenuTrigger({
+  children,
+  asChild,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger> & {
+  children?: React.ReactNode;
+  asChild?: boolean;
+}) {
+  return (
+    <DropdownMenuTriggerPrimitive asChild={asChild} {...props}>
+      {children}
+    </DropdownMenuTriggerPrimitive>
+  )
+}
 
 const DropdownMenuGroup = DropdownMenuPrimitive.Group
 
@@ -16,15 +90,26 @@ const DropdownMenuPortal = DropdownMenuPrimitive.Portal
 
 const DropdownMenuSub = DropdownMenuPrimitive.Sub
 
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+function DropdownMenuRadioGroup({
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup> & { children?: React.ReactNode }) {
+  return (
+    <DropdownMenuRadioGroupPrimitive {...props}>
+      {children}
+    </DropdownMenuRadioGroupPrimitive>
+  )
+}
 
 const DropdownMenuSubTrigger = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
     inset?: boolean
+    children?: React.ReactNode
+    className?: string
   }
 >(({ className, inset, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubTrigger
+  <DropdownMenuSubTriggerPrimitive
     ref={ref}
     className={cn(
       "flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent hover:bg-accent",
@@ -35,28 +120,34 @@ const DropdownMenuSubTrigger = React.forwardRef<
   >
     {children}
     <ChevronRight className="ml-auto h-4 w-4" />
-  </DropdownMenuPrimitive.SubTrigger>
+  </DropdownMenuSubTriggerPrimitive>
 ))
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName
 
 const DropdownMenuSubContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent> & {
+    className?: string;
+  }
 >(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    )}
-    {...props}
-  />
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.SubContent
+      ref={ref}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
 ))
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName
 
 const DropdownMenuContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & {
+    className?: string;
+  }
 >(({ className, sideOffset = 4, ...props }, ref) => (
   <DropdownMenuPrimitive.Portal>
     <DropdownMenuPrimitive.Content
@@ -76,9 +167,10 @@ const DropdownMenuItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
     inset?: boolean
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Item
+    children?: React.ReactNode
+  } & React.HTMLAttributes<HTMLDivElement>
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuItemPrimitive
     ref={ref}
     className={cn(
       "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed hover:bg-accent",
@@ -86,15 +178,20 @@ const DropdownMenuItem = React.forwardRef<
       className
     )}
     {...props}
-  />
+  >
+    {children}
+  </DropdownMenuItemPrimitive>
 ))
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
 
 const DropdownMenuCheckboxItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem> & {
+    className?: string;
+    children?: React.ReactNode;
+  }
 >(({ className, children, checked, ...props }, ref) => (
-  <DropdownMenuPrimitive.CheckboxItem
+  <DropdownMenuCheckboxItemPrimitive
     ref={ref}
     className={cn(
       "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed hover:bg-accent",
@@ -104,21 +201,23 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     {...props}
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
+      <DropdownMenuItemIndicatorPrimitive>
         <Check className="h-4 w-4" />
-      </DropdownMenuPrimitive.ItemIndicator>
+      </DropdownMenuItemIndicatorPrimitive>
     </span>
     {children}
-  </DropdownMenuPrimitive.CheckboxItem>
+  </DropdownMenuCheckboxItemPrimitive>
 ))
 DropdownMenuCheckboxItem.displayName =
   DropdownMenuPrimitive.CheckboxItem.displayName
 
 const DropdownMenuRadioItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> & {
+    children?: React.ReactNode
+  } & React.HTMLAttributes<HTMLDivElement>
 >(({ className, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.RadioItem
+  <DropdownMenuRadioItemPrimitive
     ref={ref}
     className={cn(
       "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed hover:bg-accent",
@@ -127,12 +226,12 @@ const DropdownMenuRadioItem = React.forwardRef<
     {...props}
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
+      <DropdownMenuItemIndicatorPrimitive>
         <Circle className="h-2 w-2 fill-current" />
-      </DropdownMenuPrimitive.ItemIndicator>
+      </DropdownMenuItemIndicatorPrimitive>
     </span>
     {children}
-  </DropdownMenuPrimitive.RadioItem>
+  </DropdownMenuRadioItemPrimitive>
 ))
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
 
@@ -140,9 +239,11 @@ const DropdownMenuLabel = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Label>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
     inset?: boolean
+    children?: React.ReactNode
+    className?: string
   }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Label
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuLabelPrimitive
     ref={ref}
     className={cn(
       "px-2 py-1.5 text-sm font-semibold",
@@ -150,15 +251,19 @@ const DropdownMenuLabel = React.forwardRef<
       className
     )}
     {...props}
-  />
+  >
+    {children}
+  </DropdownMenuLabelPrimitive>
 ))
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
 
 const DropdownMenuSeparator = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator> & {
+    className?: string;
+  }
 >(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.Separator
+  <DropdownMenuSeparatorPrimitive
     ref={ref}
     className={cn("-mx-1 my-1 h-px bg-muted", className)}
     {...props}

apps/app/src/components/ui/git-diff-panel.tsx

@@ -620,6 +620,41 @@ export function GitDiffPanel({
                     onToggle={() => toggleFile(fileDiff.filePath)}
                   />
                 ))}
+                {/* Fallback for files that have no diff content (shouldn't happen after fix, but safety net) */}
+                {files.length > 0 && parsedDiffs.length === 0 && (
+                  <div className="space-y-2">
+                    {files.map((file) => (
+                      <div
+                        key={file.path}
+                        className="border border-border rounded-lg overflow-hidden"
+                      >
+                        <div className="w-full px-3 py-2 flex items-center gap-2 text-left bg-card">
+                          {getFileIcon(file.status)}
+                          <span className="flex-1 text-sm font-mono truncate text-foreground">
+                            {file.path}
+                          </span>
+                          <span
+                            className={cn(
+                              "text-xs px-1.5 py-0.5 rounded border font-medium",
+                              getStatusBadgeColor(file.status)
+                            )}
+                          >
+                            {getStatusDisplayName(file.status)}
+                          </span>
+                        </div>
+                        <div className="px-4 py-3 text-sm text-muted-foreground bg-background border-t border-border">
+                          {file.status === "?" ? (
+                            <span>New file - content preview not available</span>
+                          ) : file.status === "D" ? (
+                            <span>File deleted</span>
+                          ) : (
+                            <span>Diff content not available</span>
+                          )}
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                )}
               </div>
             </div>
           )}

apps/app/src/components/ui/image-drop-zone.tsx

@@ -244,14 +244,16 @@ export function ImageDropZone({
                   <p className="text-xs font-medium text-foreground truncate">
                     {image.filename}
                   </p>
-                  <p className="text-xs text-muted-foreground">
-                    {formatFileSize(image.size)}
-                  </p>
+                  {image.size !== undefined && (
+                    <p className="text-xs text-muted-foreground">
+                      {formatFileSize(image.size)}
+                    </p>
+                  )}
                 </div>
                 {/* Remove button */}
-                {!disabled && (
+                {!disabled && image.id && (
                   <button
-                    onClick={() => removeImage(image.id)}
+                    onClick={() => removeImage(image.id!)}
                     className="opacity-0 group-hover:opacity-100 transition-opacity p-1 rounded-full hover:bg-destructive hover:text-destructive-foreground text-muted-foreground"
                   >
                     <X className="h-3 w-3" />

apps/app/src/components/ui/input.tsx

@@ -2,20 +2,64 @@ import * as React from "react"
 
 import { cn } from "@/lib/utils"
 
-function Input({ className, type, ...props }: React.ComponentProps<"input">) {
-  return (
+interface InputProps extends React.ComponentProps<"input"> {
+  startAddon?: React.ReactNode;
+  endAddon?: React.ReactNode;
+}
+
+function Input({ className, type, startAddon, endAddon, ...props }: InputProps) {
+  const hasAddons = startAddon || endAddon;
+
+  const inputElement = (
     <input
       type={type}
       data-slot="input"
       className={cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground bg-input border-input h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "file:text-foreground placeholder:text-muted-foreground/60 selection:bg-primary selection:text-primary-foreground bg-input border-border h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base shadow-xs outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        // Inner shadow for depth
+        "shadow-[inset_0_1px_2px_rgba(0,0,0,0.05)]",
+        // Animated focus ring
+        "transition-[color,box-shadow,border-color] duration-200 ease-out",
         "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
         "aria-invalid:ring-destructive/20 aria-invalid:border-destructive",
+        // Adjust padding for addons
+        startAddon && "pl-0",
+        endAddon && "pr-0",
+        hasAddons && "border-0 shadow-none focus-visible:ring-0",
         className
       )}
       {...props}
     />
-  )
+  );
+
+  if (!hasAddons) {
+    return inputElement;
+  }
+
+  return (
+    <div
+      className={cn(
+        "flex items-center h-9 w-full rounded-md border border-border bg-input shadow-xs",
+        "shadow-[inset_0_1px_2px_rgba(0,0,0,0.05)]",
+        "transition-[box-shadow,border-color] duration-200 ease-out",
+        "focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]",
+        "has-[input:disabled]:opacity-50 has-[input:disabled]:cursor-not-allowed",
+        "has-[input[aria-invalid]]:ring-destructive/20 has-[input[aria-invalid]]:border-destructive"
+      )}
+    >
+      {startAddon && (
+        <span className="flex items-center justify-center px-3 text-muted-foreground text-sm">
+          {startAddon}
+        </span>
+      )}
+      {inputElement}
+      {endAddon && (
+        <span className="flex items-center justify-center px-3 text-muted-foreground text-sm">
+          {endAddon}
+        </span>
+      )}
+    </div>
+  );
 }
 
 export { Input }

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

@@ -90,6 +90,7 @@ const SHORTCUT_LABELS: Record<keyof KeyboardShortcuts, string> = {
   context: "Context",
   settings: "Settings",
   profiles: "AI Profiles",
+  terminal: "Terminal",
   toggleSidebar: "Toggle Sidebar",
   addFeature: "Add Feature",
   addContextFile: "Add Context File",
@@ -100,6 +101,9 @@ const SHORTCUT_LABELS: Record<keyof KeyboardShortcuts, string> = {
   cyclePrevProject: "Prev Project",
   cycleNextProject: "Next Project",
   addProfile: "Add Profile",
+  splitTerminalRight: "Split Right",
+  splitTerminalDown: "Split Down",
+  closeTerminal: "Close Terminal",
 };
 
 // Categorize shortcuts for color coding
@@ -110,6 +114,7 @@ const SHORTCUT_CATEGORIES: Record<keyof KeyboardShortcuts, "navigation" | "ui" |
   context: "navigation",
   settings: "navigation",
   profiles: "navigation",
+  terminal: "navigation",
   toggleSidebar: "ui",
   addFeature: "action",
   addContextFile: "action",
@@ -120,6 +125,9 @@ const SHORTCUT_CATEGORIES: Record<keyof KeyboardShortcuts, "navigation" | "ui" |
   cyclePrevProject: "action",
   cycleNextProject: "action",
   addProfile: "action",
+  splitTerminalRight: "action",
+  splitTerminalDown: "action",
+  closeTerminal: "action",
 };
 
 // Category colors
@@ -153,11 +161,18 @@ interface KeyboardMapProps {
 export function KeyboardMap({ onKeySelect, selectedKey, className }: KeyboardMapProps) {
   const { keyboardShortcuts } = useAppStore();
 
+  // Merge with defaults to ensure new shortcuts are always shown
+  const mergedShortcuts = React.useMemo(() => ({
+    ...DEFAULT_KEYBOARD_SHORTCUTS,
+    ...keyboardShortcuts,
+  }), [keyboardShortcuts]);
+
   // Create a reverse map: base key -> list of shortcut names (including info about modifiers)
   const keyToShortcuts = React.useMemo(() => {
     const map: Record<string, Array<{ name: keyof KeyboardShortcuts; hasModifiers: boolean }>> = {};
-    (Object.entries(keyboardShortcuts) as [keyof KeyboardShortcuts, string][]).forEach(
+    (Object.entries(mergedShortcuts) as [keyof KeyboardShortcuts, string][]).forEach(
       ([shortcutName, shortcutStr]) => {
+        if (!shortcutStr) return; // Skip undefined shortcuts
         const parsed = parseShortcut(shortcutStr);
         const normalizedKey = parsed.key.toUpperCase();
         const hasModifiers = !!(parsed.shift || parsed.cmdCtrl || parsed.alt);
@@ -168,7 +183,7 @@ export function KeyboardMap({ onKeySelect, selectedKey, className }: KeyboardMap
       }
     );
     return map;
-  }, [keyboardShortcuts]);
+  }, [mergedShortcuts]);
 
   const renderKey = (keyDef: { key: string; label: string; width: number }) => {
     const normalizedKey = keyDef.key.toUpperCase();
@@ -177,7 +192,7 @@ export function KeyboardMap({ onKeySelect, selectedKey, className }: KeyboardMap
     const isBound = shortcuts.length > 0;
     const isSelected = selectedKey?.toUpperCase() === normalizedKey;
     const isModified = shortcuts.some(
-      (s) => keyboardShortcuts[s] !== DEFAULT_KEYBOARD_SHORTCUTS[s]
+      (s) => mergedShortcuts[s] !== DEFAULT_KEYBOARD_SHORTCUTS[s]
     );
 
     // Get category for coloring (use first shortcut's category if multiple)
@@ -223,7 +238,7 @@ export function KeyboardMap({ onKeySelect, selectedKey, className }: KeyboardMap
         >
           {isBound && shortcuts.length > 0
             ? (shortcuts.length === 1
-                ? SHORTCUT_LABELS[shortcuts[0]].split(" ")[0]
+                ? (SHORTCUT_LABELS[shortcuts[0]]?.split(" ")[0] ?? shortcuts[0])
                 : `${shortcuts.length}x`)
             : "\u00A0" // Non-breaking space to maintain height
           }
@@ -242,21 +257,23 @@ export function KeyboardMap({ onKeySelect, selectedKey, className }: KeyboardMap
           <TooltipContent side="top" className="max-w-xs">
             <div className="space-y-1">
               {shortcuts.map((shortcut) => {
-                const shortcutStr = keyboardShortcuts[shortcut];
+                const shortcutStr = mergedShortcuts[shortcut];
                 const displayShortcut = formatShortcut(shortcutStr, true);
                 return (
                   <div key={shortcut} className="flex items-center gap-2">
                     <span
                       className={cn(
                         "w-2 h-2 rounded-full",
-                        CATEGORY_COLORS[SHORTCUT_CATEGORIES[shortcut]].bg.replace("/20", "")
+                        SHORTCUT_CATEGORIES[shortcut] && CATEGORY_COLORS[SHORTCUT_CATEGORIES[shortcut]]
+                          ? CATEGORY_COLORS[SHORTCUT_CATEGORIES[shortcut]].bg.replace("/20", "")
+                          : "bg-muted-foreground"
                       )}
                     />
-                    <span className="text-sm">{SHORTCUT_LABELS[shortcut]}</span>
+                    <span className="text-sm">{SHORTCUT_LABELS[shortcut] ?? shortcut}</span>
                     <kbd className="text-xs font-mono bg-sidebar-accent/30 px-1 rounded">
                       {displayShortcut}
                     </kbd>
-                    {keyboardShortcuts[shortcut] !== DEFAULT_KEYBOARD_SHORTCUTS[shortcut] && (
+                    {mergedShortcuts[shortcut] !== DEFAULT_KEYBOARD_SHORTCUTS[shortcut] && (
                       <span className="text-xs text-yellow-400">(custom)</span>
                     )}
                   </div>
@@ -343,6 +360,12 @@ export function ShortcutReferencePanel({ editable = false }: ShortcutReferencePa
   const [modifiers, setModifiers] = React.useState({ shift: false, cmdCtrl: false, alt: false });
   const [shortcutError, setShortcutError] = React.useState<string | null>(null);
 
+  // Merge with defaults to ensure new shortcuts are always shown
+  const mergedShortcuts = React.useMemo(() => ({
+    ...DEFAULT_KEYBOARD_SHORTCUTS,
+    ...keyboardShortcuts,
+  }), [keyboardShortcuts]);
+
   const groupedShortcuts = React.useMemo(() => {
     const groups: Record<string, Array<{ key: keyof KeyboardShortcuts; label: string; value: string }>> = {
       navigation: [],
@@ -354,14 +377,14 @@ export function ShortcutReferencePanel({ editable = false }: ShortcutReferencePa
       ([shortcut, category]) => {
         groups[category].push({
           key: shortcut,
-          label: SHORTCUT_LABELS[shortcut],
-          value: keyboardShortcuts[shortcut],
+          label: SHORTCUT_LABELS[shortcut] ?? shortcut,
+          value: mergedShortcuts[shortcut],
         });
       }
     );
 
     return groups;
-  }, [keyboardShortcuts]);
+  }, [mergedShortcuts]);
 
   // Build the full shortcut string from key + modifiers
   const buildShortcutString = React.useCallback((key: string, mods: typeof modifiers) => {
@@ -375,14 +398,14 @@ export function ShortcutReferencePanel({ editable = false }: ShortcutReferencePa
 
   // Check for conflicts with other shortcuts
   const checkConflict = React.useCallback((shortcutStr: string, currentKey: keyof KeyboardShortcuts) => {
-    const conflict = Object.entries(keyboardShortcuts).find(
-      ([k, v]) => k !== currentKey && v.toUpperCase() === shortcutStr.toUpperCase()
+    const conflict = Object.entries(mergedShortcuts).find(
+      ([k, v]) => k !== currentKey && v?.toUpperCase() === shortcutStr.toUpperCase()
     );
-    return conflict ? SHORTCUT_LABELS[conflict[0] as keyof KeyboardShortcuts] : null;
-  }, [keyboardShortcuts]);
+    return conflict ? (SHORTCUT_LABELS[conflict[0] as keyof KeyboardShortcuts] ?? conflict[0]) : null;
+  }, [mergedShortcuts]);
 
   const handleStartEdit = (key: keyof KeyboardShortcuts) => {
-    const currentValue = keyboardShortcuts[key];
+    const currentValue = mergedShortcuts[key];
     const parsed = parseShortcut(currentValue);
     setEditingShortcut(key);
     setKeyValue(parsed.key);
@@ -485,7 +508,7 @@ export function ShortcutReferencePanel({ editable = false }: ShortcutReferencePa
             </h4>
             <div className="grid grid-cols-2 gap-2">
               {shortcuts.map(({ key, label, value }) => {
-                const isModified = keyboardShortcuts[key] !== DEFAULT_KEYBOARD_SHORTCUTS[key];
+                const isModified = mergedShortcuts[key] !== DEFAULT_KEYBOARD_SHORTCUTS[key];
                 const isEditing = editingShortcut === key;
 
                 return (

apps/app/src/components/ui/log-viewer.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useMemo } from "react";
+import { useState, useMemo, useEffect, useRef } from "react";
 import {
   ChevronDown,
   ChevronRight,
@@ -14,13 +14,26 @@ import {
   Info,
   FileOutput,
   Brain,
+  Eye,
+  Pencil,
+  Terminal,
+  Search,
+  ListTodo,
+  Layers,
+  X,
+  Filter,
+  Circle,
+  Play,
+  Loader2,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import {
   parseLogOutput,
   getLogTypeColors,
+  shouldCollapseByDefault,
   type LogEntry,
   type LogEntryType,
+  type ToolCategory,
 } from "@/lib/log-parser";
 
 interface LogViewerProps {
@@ -53,6 +66,160 @@ const getLogIcon = (type: LogEntryType) => {
   }
 };
 
+/**
+ * Returns a tool-specific icon based on the tool category
+ */
+const getToolCategoryIcon = (category: ToolCategory | undefined) => {
+  switch (category) {
+    case "read":
+      return <Eye className="w-4 h-4" />;
+    case "edit":
+      return <Pencil className="w-4 h-4" />;
+    case "write":
+      return <FileOutput className="w-4 h-4" />;
+    case "bash":
+      return <Terminal className="w-4 h-4" />;
+    case "search":
+      return <Search className="w-4 h-4" />;
+    case "todo":
+      return <ListTodo className="w-4 h-4" />;
+    case "task":
+      return <Layers className="w-4 h-4" />;
+    default:
+      return <Wrench className="w-4 h-4" />;
+  }
+};
+
+/**
+ * Returns color classes for a tool category
+ */
+const getToolCategoryColor = (category: ToolCategory | undefined): string => {
+  switch (category) {
+    case "read":
+      return "text-blue-400 bg-blue-500/10 border-blue-500/30";
+    case "edit":
+      return "text-amber-400 bg-amber-500/10 border-amber-500/30";
+    case "write":
+      return "text-emerald-400 bg-emerald-500/10 border-emerald-500/30";
+    case "bash":
+      return "text-purple-400 bg-purple-500/10 border-purple-500/30";
+    case "search":
+      return "text-cyan-400 bg-cyan-500/10 border-cyan-500/30";
+    case "todo":
+      return "text-green-400 bg-green-500/10 border-green-500/30";
+    case "task":
+      return "text-indigo-400 bg-indigo-500/10 border-indigo-500/30";
+    default:
+      return "text-zinc-400 bg-zinc-500/10 border-zinc-500/30";
+  }
+};
+
+/**
+ * Interface for parsed todo items from TodoWrite tool
+ */
+interface TodoItem {
+  content: string;
+  status: "pending" | "in_progress" | "completed";
+  activeForm?: string;
+}
+
+/**
+ * Parses TodoWrite JSON content and extracts todo items
+ */
+function parseTodoContent(content: string): TodoItem[] | null {
+  try {
+    // Find the JSON object in the content
+    const jsonMatch = content.match(/\{[\s\S]*"todos"[\s\S]*\}/);
+    if (!jsonMatch) return null;
+
+    const parsed = JSON.parse(jsonMatch[0]) as { todos?: TodoItem[] };
+    if (!parsed.todos || !Array.isArray(parsed.todos)) return null;
+
+    return parsed.todos;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Renders a list of todo items with status icons and colors
+ */
+function TodoListRenderer({ todos }: { todos: TodoItem[] }) {
+  const getStatusIcon = (status: TodoItem["status"]) => {
+    switch (status) {
+      case "completed":
+        return <CheckCircle2 className="w-4 h-4 text-emerald-400" />;
+      case "in_progress":
+        return <Loader2 className="w-4 h-4 text-amber-400 animate-spin" />;
+      case "pending":
+        return <Circle className="w-4 h-4 text-zinc-500" />;
+      default:
+        return <Circle className="w-4 h-4 text-zinc-500" />;
+    }
+  };
+
+  const getStatusColor = (status: TodoItem["status"]) => {
+    switch (status) {
+      case "completed":
+        return "text-emerald-300 line-through opacity-70";
+      case "in_progress":
+        return "text-amber-300";
+      case "pending":
+        return "text-zinc-400";
+      default:
+        return "text-zinc-400";
+    }
+  };
+
+  const getStatusBadge = (status: TodoItem["status"]) => {
+    switch (status) {
+      case "completed":
+        return (
+          <span className="text-[10px] px-1.5 py-0.5 rounded bg-emerald-500/20 text-emerald-400 ml-auto">
+            Done
+          </span>
+        );
+      case "in_progress":
+        return (
+          <span className="text-[10px] px-1.5 py-0.5 rounded bg-amber-500/20 text-amber-400 ml-auto">
+            In Progress
+          </span>
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className="space-y-1">
+      {todos.map((todo, index) => (
+        <div
+          key={index}
+          className={cn(
+            "flex items-start gap-2 p-2 rounded-md transition-colors",
+            todo.status === "in_progress" && "bg-amber-500/5 border border-amber-500/20",
+            todo.status === "completed" && "bg-emerald-500/5",
+            todo.status === "pending" && "bg-zinc-800/30"
+          )}
+        >
+          <div className="mt-0.5 flex-shrink-0">{getStatusIcon(todo.status)}</div>
+          <div className="flex-1 min-w-0">
+            <p className={cn("text-sm", getStatusColor(todo.status))}>
+              {todo.content}
+            </p>
+            {todo.status === "in_progress" && todo.activeForm && (
+              <p className="text-xs text-amber-400/70 mt-0.5 italic">
+                {todo.activeForm}
+              </p>
+            )}
+          </div>
+          {getStatusBadge(todo.status)}
+        </div>
+      ))}
+    </div>
+  );
+}
+
 interface LogEntryItemProps {
   entry: LogEntry;
   isExpanded: boolean;
@@ -63,9 +230,54 @@ function LogEntryItem({ entry, isExpanded, onToggle }: LogEntryItemProps) {
   const colors = getLogTypeColors(entry.type);
   const hasContent = entry.content.length > 100;
 
+  // For tool_call entries, use tool-specific styling
+  const isToolCall = entry.type === "tool_call";
+  const toolCategory = entry.metadata?.toolCategory;
+  const toolCategoryColors = isToolCall ? getToolCategoryColor(toolCategory) : "";
+
+  // Check if this is a TodoWrite entry and parse the todos
+  const isTodoWrite = entry.metadata?.toolName === "TodoWrite";
+  const parsedTodos = useMemo(() => {
+    if (!isTodoWrite) return null;
+    return parseTodoContent(entry.content);
+  }, [isTodoWrite, entry.content]);
+
+  // Get the appropriate icon based on entry type and tool category
+  const icon = isToolCall ? getToolCategoryIcon(toolCategory) : getLogIcon(entry.type);
+
+  // Get collapsed preview text - prefer smart summary for tool calls
+  const collapsedPreview = useMemo(() => {
+    if (isExpanded) return "";
+
+    // Use smart summary if available
+    if (entry.metadata?.summary) {
+      return entry.metadata.summary;
+    }
+
+    // Fallback to truncated content
+    return entry.content.slice(0, 80) + (entry.content.length > 80 ? "..." : "");
+  }, [isExpanded, entry.metadata?.summary, entry.content]);
+
   // Format content - detect and highlight JSON
   const formattedContent = useMemo(() => {
-    const content = entry.content;
+    let content = entry.content;
+
+    // For tool_call entries, remove redundant "Tool: X" and "Input:" prefixes
+    // since we already show the tool name in the header badge
+    if (isToolCall) {
+      // Remove "🔧 Tool: ToolName\n" or "Tool: ToolName\n" prefix
+      content = content.replace(/^(?:🔧\s*)?Tool:\s*\w+\s*\n?/i, "");
+      // Remove standalone "Input:" label (keep the JSON that follows)
+      content = content.replace(/^Input:\s*\n?/i, "");
+      content = content.trim();
+    }
+
+    // For summary entries, remove the <summary> and </summary> tags
+    if (entry.title === "Summary") {
+      content = content.replace(/^<summary>\s*/i, "");
+      content = content.replace(/\s*<\/summary>\s*$/i, "");
+      content = content.trim();
+    }
 
     // Try to find and format JSON blocks
     const jsonRegex = /(\{[\s\S]*?\}|\[[\s\S]*?\])/g;
@@ -103,14 +315,20 @@ function LogEntryItem({ entry, isExpanded, onToggle }: LogEntryItemProps) {
     }
 
     return parts.length > 0 ? parts : [{ type: "text" as const, content }];
-  }, [entry.content]);
+  }, [entry.content, entry.title, isToolCall]);
+
+  // Get colors - use tool category colors for tool_call entries
+  const colorParts = toolCategoryColors.split(" ");
+  const textColor = isToolCall ? (colorParts[0] || "text-zinc-400") : colors.text;
+  const bgColor = isToolCall ? (colorParts[1] || "bg-zinc-500/10") : colors.bg;
+  const borderColor = isToolCall ? (colorParts[2] || "border-zinc-500/30") : colors.border;
 
   return (
     <div
       className={cn(
         "rounded-lg border-l-4 transition-all duration-200",
-        colors.bg,
-        colors.border,
+        bgColor,
+        borderColor,
         "hover:brightness-110"
       )}
       data-testid={`log-entry-${entry.type}`}
@@ -130,14 +348,14 @@ function LogEntryItem({ entry, isExpanded, onToggle }: LogEntryItemProps) {
           <span className="w-4 flex-shrink-0" />
         )}
 
-        <span className={cn("flex-shrink-0", colors.icon)}>
-          {getLogIcon(entry.type)}
+        <span className={cn("flex-shrink-0", isToolCall ? toolCategoryColors.split(" ")[0] : colors.icon)}>
+          {icon}
         </span>
 
         <span
           className={cn(
             "text-xs font-medium px-2 py-0.5 rounded-full flex-shrink-0",
-            colors.badge
+            isToolCall ? toolCategoryColors : colors.badge
           )}
           data-testid="log-entry-badge"
         >
@@ -145,9 +363,7 @@ function LogEntryItem({ entry, isExpanded, onToggle }: LogEntryItemProps) {
         </span>
 
         <span className="text-xs text-zinc-400 truncate flex-1 ml-2">
-          {!isExpanded &&
-            entry.content.slice(0, 80) +
-              (entry.content.length > 80 ? "..." : "")}
+          {collapsedPreview}
         </span>
       </button>
 
@@ -156,36 +372,140 @@ function LogEntryItem({ entry, isExpanded, onToggle }: LogEntryItemProps) {
           className="px-4 pb-3 pt-1"
           data-testid={`log-entry-content-${entry.id}`}
         >
-          <div className="font-mono text-xs space-y-1">
-            {formattedContent.map((part, index) => (
-              <div key={index}>
-                {part.type === "json" ? (
-                  <pre className="bg-zinc-900/50 rounded p-2 overflow-x-auto text-xs text-primary">
-                    {part.content}
-                  </pre>
-                ) : (
-                  <pre
-                    className={cn(
-                      "whitespace-pre-wrap break-words",
-                      colors.text
-                    )}
-                  >
-                    {part.content}
-                  </pre>
-                )}
-              </div>
-            ))}
-          </div>
+          {/* Render TodoWrite entries with special formatting */}
+          {parsedTodos ? (
+            <TodoListRenderer todos={parsedTodos} />
+          ) : (
+            <div className="font-mono text-xs space-y-1">
+              {formattedContent.map((part, index) => (
+                <div key={index}>
+                  {part.type === "json" ? (
+                    <pre className="bg-zinc-900/50 rounded p-2 overflow-x-auto text-xs text-primary">
+                      {part.content}
+                    </pre>
+                  ) : (
+                    <pre
+                      className={cn(
+                        "whitespace-pre-wrap break-words",
+                        textColor
+                      )}
+                    >
+                      {part.content}
+                    </pre>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
         </div>
       )}
     </div>
   );
 }
 
+interface ToolCategoryStats {
+  read: number;
+  edit: number;
+  write: number;
+  bash: number;
+  search: number;
+  todo: number;
+  task: number;
+  other: number;
+}
+
 export function LogViewer({ output, className }: LogViewerProps) {
   const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
+  const [searchQuery, setSearchQuery] = useState("");
+  const [hiddenTypes, setHiddenTypes] = useState<Set<LogEntryType>>(new Set());
+  const [hiddenCategories, setHiddenCategories] = useState<Set<ToolCategory>>(new Set());
 
-  const entries = useMemo(() => parseLogOutput(output), [output]);
+  // Parse entries and compute initial expanded state together
+  const { entries, initialExpandedIds } = useMemo(() => {
+    const parsedEntries = parseLogOutput(output);
+    const toExpand: string[] = [];
+
+    parsedEntries.forEach((entry) => {
+      // If entry should NOT collapse by default, mark it for expansion
+      if (!shouldCollapseByDefault(entry)) {
+        toExpand.push(entry.id);
+      }
+    });
+
+    return {
+      entries: parsedEntries,
+      initialExpandedIds: new Set(toExpand),
+    };
+  }, [output]);
+
+  // Merge initial expanded IDs with user-toggled ones
+  // Use a ref to track if we've applied initial state
+  const appliedInitialRef = useRef<Set<string>>(new Set());
+
+  // Apply initial expanded state for new entries
+  const effectiveExpandedIds = useMemo(() => {
+    const result = new Set(expandedIds);
+    initialExpandedIds.forEach((id) => {
+      if (!appliedInitialRef.current.has(id)) {
+        appliedInitialRef.current.add(id);
+        result.add(id);
+      }
+    });
+    return result;
+  }, [expandedIds, initialExpandedIds]);
+
+  // Calculate stats for tool categories
+  const stats = useMemo(() => {
+    const toolCalls = entries.filter((e) => e.type === "tool_call");
+    const byCategory: ToolCategoryStats = {
+      read: 0,
+      edit: 0,
+      write: 0,
+      bash: 0,
+      search: 0,
+      todo: 0,
+      task: 0,
+      other: 0,
+    };
+
+    toolCalls.forEach((tc) => {
+      const cat = tc.metadata?.toolCategory || "other";
+      byCategory[cat]++;
+    });
+
+    return {
+      total: toolCalls.length,
+      byCategory,
+      errors: entries.filter((e) => e.type === "error").length,
+    };
+  }, [entries]);
+
+  // Filter entries based on search and hidden types/categories
+  const filteredEntries = useMemo(() => {
+    return entries.filter((entry) => {
+      // Filter by hidden types
+      if (hiddenTypes.has(entry.type)) return false;
+
+      // Filter by hidden tool categories (for tool_call entries)
+      if (entry.type === "tool_call" && entry.metadata?.toolCategory) {
+        if (hiddenCategories.has(entry.metadata.toolCategory)) return false;
+      }
+
+      // Filter by search query
+      if (searchQuery) {
+        const query = searchQuery.toLowerCase();
+        return (
+          entry.content.toLowerCase().includes(query) ||
+          entry.title.toLowerCase().includes(query) ||
+          entry.metadata?.toolName?.toLowerCase().includes(query) ||
+          entry.metadata?.summary?.toLowerCase().includes(query) ||
+          entry.metadata?.filePath?.toLowerCase().includes(query)
+        );
+      }
+
+      return true;
+    });
+  }, [entries, hiddenTypes, hiddenCategories, searchQuery]);
 
   const toggleEntry = (id: string) => {
     setExpandedIds((prev) => {
@@ -200,13 +520,45 @@ export function LogViewer({ output, className }: LogViewerProps) {
   };
 
   const expandAll = () => {
-    setExpandedIds(new Set(entries.map((e) => e.id)));
+    setExpandedIds(new Set(filteredEntries.map((e) => e.id)));
   };
 
   const collapseAll = () => {
     setExpandedIds(new Set());
   };
 
+  const toggleTypeFilter = (type: LogEntryType) => {
+    setHiddenTypes((prev) => {
+      const next = new Set(prev);
+      if (next.has(type)) {
+        next.delete(type);
+      } else {
+        next.add(type);
+      }
+      return next;
+    });
+  };
+
+  const toggleCategoryFilter = (category: ToolCategory) => {
+    setHiddenCategories((prev) => {
+      const next = new Set(prev);
+      if (next.has(category)) {
+        next.delete(category);
+      } else {
+        next.add(category);
+      }
+      return next;
+    });
+  };
+
+  const clearFilters = () => {
+    setSearchQuery("");
+    setHiddenTypes(new Set());
+    setHiddenCategories(new Set());
+  };
+
+  const hasActiveFilters = searchQuery || hiddenTypes.size > 0 || hiddenCategories.size > 0;
+
   if (entries.length === 0) {
     return (
       <div className="flex items-center justify-center p-8 text-muted-foreground">
@@ -229,28 +581,123 @@ export function LogViewer({ output, className }: LogViewerProps) {
     return acc;
   }, {} as Record<string, number>);
 
+  // Tool categories to display in stats bar
+  const toolCategoryLabels: { key: ToolCategory; label: string }[] = [
+    { key: "read", label: "Read" },
+    { key: "edit", label: "Edit" },
+    { key: "write", label: "Write" },
+    { key: "bash", label: "Bash" },
+    { key: "search", label: "Search" },
+    { key: "todo", label: "Todo" },
+    { key: "task", label: "Task" },
+    { key: "other", label: "Other" },
+  ];
+
   return (
-    <div className={cn("flex flex-col gap-2", className)}>
-      {/* Header with controls */}
+    <div className={cn("flex flex-col", className)}>
+      {/* Sticky header with search, stats, and filters */}
+      {/* Use -top-4 to compensate for parent's p-4 padding, pt-4 to restore visual spacing */}
+      <div className="sticky -top-4 z-10 bg-zinc-950/95 backdrop-blur-sm pt-4 pb-2 space-y-2 -mx-4 px-4">
+        {/* Search bar */}
+        <div className="flex items-center gap-2 px-1" data-testid="log-search-bar">
+        <div className="relative flex-1">
+          <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-4 h-4 text-zinc-500" />
+          <input
+            type="text"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            placeholder="Search logs..."
+            className="w-full pl-8 pr-8 py-1.5 text-xs bg-zinc-900/50 border border-zinc-700/50 rounded-md text-zinc-200 placeholder:text-zinc-500 focus:outline-none focus:border-zinc-600"
+            data-testid="log-search-input"
+          />
+          {searchQuery && (
+            <button
+              onClick={() => setSearchQuery("")}
+              className="absolute right-2 top-1/2 -translate-y-1/2 text-zinc-500 hover:text-zinc-300"
+              data-testid="log-search-clear"
+            >
+              <X className="w-3 h-3" />
+            </button>
+          )}
+        </div>
+        {hasActiveFilters && (
+          <button
+            onClick={clearFilters}
+            className="text-xs text-zinc-400 hover:text-zinc-200 px-2 py-1 rounded hover:bg-zinc-800/50 transition-colors flex items-center gap-1"
+            data-testid="log-clear-filters"
+          >
+            <X className="w-3 h-3" />
+            Clear Filters
+          </button>
+        )}
+      </div>
+
+      {/* Tool category stats bar */}
+      {stats.total > 0 && (
+        <div className="flex items-center gap-1 px-1 flex-wrap" data-testid="log-stats-bar">
+          <span className="text-xs text-zinc-500 mr-1">
+            <Wrench className="w-3 h-3 inline mr-1" />
+            {stats.total} tools:
+          </span>
+          {toolCategoryLabels.map(({ key, label }) => {
+            const count = stats.byCategory[key];
+            if (count === 0) return null;
+            const isHidden = hiddenCategories.has(key);
+            const colorClasses = getToolCategoryColor(key);
+            return (
+              <button
+                key={key}
+                onClick={() => toggleCategoryFilter(key)}
+                className={cn(
+                  "text-xs px-2 py-0.5 rounded-full border transition-all flex items-center gap-1",
+                  colorClasses,
+                  isHidden && "opacity-40 line-through"
+                )}
+                title={isHidden ? `Show ${label} tools` : `Hide ${label} tools`}
+                data-testid={`log-category-filter-${key}`}
+              >
+                {getToolCategoryIcon(key)}
+                <span>{count}</span>
+              </button>
+            );
+          })}
+          {stats.errors > 0 && (
+            <span className="text-xs px-2 py-0.5 rounded-full bg-red-500/10 text-red-400 border border-red-500/30 flex items-center gap-1">
+              <AlertCircle className="w-3 h-3" />
+              {stats.errors}
+            </span>
+          )}
+        </div>
+      )}
+
+      {/* Header with type filters and controls */}
       <div className="flex items-center justify-between px-1" data-testid="log-viewer-header">
-        <div className="flex items-center gap-2 flex-wrap">
+        <div className="flex items-center gap-1 flex-wrap">
+          <Filter className="w-3 h-3 text-zinc-500 mr-1" />
           {Object.entries(typeCounts).map(([type, count]) => {
             const colors = getLogTypeColors(type as LogEntryType);
+            const isHidden = hiddenTypes.has(type as LogEntryType);
             return (
-              <span
+              <button
                 key={type}
+                onClick={() => toggleTypeFilter(type as LogEntryType)}
                 className={cn(
-                  "text-xs px-2 py-0.5 rounded-full",
-                  colors.badge
+                  "text-xs px-2 py-0.5 rounded-full transition-all",
+                  colors.badge,
+                  isHidden && "opacity-40 line-through"
                 )}
-                data-testid={`log-type-count-${type}`}
+                title={isHidden ? `Show ${type}` : `Hide ${type}`}
+                data-testid={`log-type-filter-${type}`}
               >
                 {type}: {count}
-              </span>
+              </button>
             );
           })}
         </div>
         <div className="flex items-center gap-1">
+          <span className="text-xs text-zinc-500">
+            {filteredEntries.length}/{entries.length}
+          </span>
           <button
             onClick={expandAll}
             className="text-xs text-zinc-400 hover:text-zinc-200 px-2 py-1 rounded hover:bg-zinc-800/50 transition-colors"
@@ -267,17 +714,32 @@ export function LogViewer({ output, className }: LogViewerProps) {
           </button>
         </div>
       </div>
+      </div>
 
       {/* Log entries */}
-      <div className="space-y-2" data-testid="log-entries-container">
-        {entries.map((entry) => (
-          <LogEntryItem
-            key={entry.id}
-            entry={entry}
-            isExpanded={expandedIds.has(entry.id)}
-            onToggle={() => toggleEntry(entry.id)}
-          />
-        ))}
+      <div className="space-y-2 mt-2" data-testid="log-entries-container">
+        {filteredEntries.length === 0 ? (
+          <div className="text-center py-4 text-zinc-500 text-sm">
+            No entries match your filters.
+            {hasActiveFilters && (
+              <button
+                onClick={clearFilters}
+                className="ml-2 text-primary hover:underline"
+              >
+                Clear filters
+              </button>
+            )}
+          </div>
+        ) : (
+          filteredEntries.map((entry) => (
+            <LogEntryItem
+              key={entry.id}
+              entry={entry}
+              isExpanded={effectiveExpandedIds.has(entry.id)}
+              onToggle={() => toggleEntry(entry.id)}
+            />
+          ))
+        )}
       </div>
     </div>
   );

apps/app/src/components/ui/popover.tsx

@@ -5,6 +5,20 @@ import * as PopoverPrimitive from "@radix-ui/react-popover"
 
 import { cn } from "@/lib/utils"
 
+// Type-safe wrappers for Radix UI primitives (React 19 compatibility)
+const PopoverTriggerPrimitive = PopoverPrimitive.Trigger as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger> & {
+    children?: React.ReactNode;
+    asChild?: boolean;
+  } & React.RefAttributes<HTMLButtonElement>
+>;
+
+const PopoverContentPrimitive = PopoverPrimitive.Content as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {
+    className?: string;
+  } & React.RefAttributes<HTMLDivElement>
+>;
+
 function Popover({
   ...props
 }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
@@ -12,9 +26,18 @@ function Popover({
 }
 
 function PopoverTrigger({
+  children,
+  asChild,
   ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
-  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger> & {
+  children?: React.ReactNode;
+  asChild?: boolean;
+}) {
+  return (
+    <PopoverTriggerPrimitive data-slot="popover-trigger" asChild={asChild} {...props}>
+      {children}
+    </PopoverTriggerPrimitive>
+  )
 }
 
 function PopoverContent({
@@ -22,10 +45,12 @@ function PopoverContent({
   align = "center",
   sideOffset = 4,
   ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+}: React.ComponentProps<typeof PopoverPrimitive.Content> & {
+  className?: string;
+}) {
   return (
     <PopoverPrimitive.Portal>
-      <PopoverPrimitive.Content
+      <PopoverContentPrimitive
         data-slot="popover-content"
         align={align}
         sideOffset={sideOffset}

apps/app/src/components/ui/select.tsx

@@ -0,0 +1,160 @@
+"use client";
+
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+};

apps/app/src/components/ui/sheet.tsx

@@ -1,39 +1,43 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as SheetPrimitive from "@radix-ui/react-dialog"
-import { XIcon } from "lucide-react"
+import * as React from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
-  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
 }
 
 function SheetTrigger({
   ...props
 }: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
-  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
 }
 
 function SheetClose({
   ...props
 }: React.ComponentProps<typeof SheetPrimitive.Close>) {
-  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
 }
 
 function SheetPortal({
   ...props
 }: React.ComponentProps<typeof SheetPrimitive.Portal>) {
-  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
 }
 
-function SheetOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+interface SheetOverlayProps extends React.HTMLAttributes<HTMLDivElement> {
+  forceMount?: true;
+}
+
+const SheetOverlay = ({ className, ...props }: SheetOverlayProps) => {
+  const Overlay = SheetPrimitive.Overlay as React.ComponentType<
+    SheetOverlayProps & { "data-slot": string }
+  >;
   return (
-    <SheetPrimitive.Overlay
+    <Overlay
       data-slot="sheet-overlay"
       className={cn(
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
@@ -41,21 +45,35 @@ function SheetOverlay({
       )}
       {...props}
     />
-  )
+  );
+};
+
+interface SheetContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  side?: "top" | "right" | "bottom" | "left";
+  forceMount?: true;
+  onEscapeKeyDown?: (event: KeyboardEvent) => void;
+  onPointerDownOutside?: (event: PointerEvent) => void;
+  onInteractOutside?: (event: Event) => void;
 }
 
-function SheetContent({
+const SheetContent = ({
   className,
   children,
   side = "right",
   ...props
-}: React.ComponentProps<typeof SheetPrimitive.Content> & {
-  side?: "top" | "right" | "bottom" | "left"
-}) {
+}: SheetContentProps) => {
+  const Content = SheetPrimitive.Content as React.ComponentType<
+    SheetContentProps & { "data-slot": string }
+  >;
+  const Close = SheetPrimitive.Close as React.ComponentType<{
+    className: string;
+    children: React.ReactNode;
+  }>;
+
   return (
     <SheetPortal>
       <SheetOverlay />
-      <SheetPrimitive.Content
+      <Content
         data-slot="sheet-content"
         className={cn(
           "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
@@ -72,14 +90,14 @@ function SheetContent({
         {...props}
       >
         {children}
-        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+        <Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
           <XIcon className="size-4" />
           <span className="sr-only">Close</span>
-        </SheetPrimitive.Close>
-      </SheetPrimitive.Content>
+        </Close>
+      </Content>
     </SheetPortal>
-  )
-}
+  );
+};
 
 function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
@@ -88,7 +106,7 @@ function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("flex flex-col gap-1.5 p-4", className)}
       {...props}
     />
-  )
+  );
 }
 
 function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
@@ -98,34 +116,39 @@ function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("mt-auto flex flex-col gap-2 p-4", className)}
       {...props}
     />
-  )
+  );
 }
 
-function SheetTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+interface SheetTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {}
+
+const SheetTitle = ({ className, ...props }: SheetTitleProps) => {
+  const Title = SheetPrimitive.Title as React.ComponentType<
+    SheetTitleProps & { "data-slot": string }
+  >;
   return (
-    <SheetPrimitive.Title
+    <Title
       data-slot="sheet-title"
       className={cn("text-foreground font-semibold", className)}
       {...props}
     />
-  )
-}
+  );
+};
 
-function SheetDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+interface SheetDescriptionProps
+  extends React.HTMLAttributes<HTMLParagraphElement> {}
+
+const SheetDescription = ({ className, ...props }: SheetDescriptionProps) => {
+  const Description = SheetPrimitive.Description as React.ComponentType<
+    SheetDescriptionProps & { "data-slot": string }
+  >;
   return (
-    <SheetPrimitive.Description
+    <Description
       data-slot="sheet-description"
       className={cn("text-muted-foreground text-sm", className)}
       {...props}
     />
-  )
-}
+  );
+};
 
 export {
   Sheet,
@@ -136,4 +159,4 @@ export {
   SheetFooter,
   SheetTitle,
   SheetDescription,
-}
+};

apps/app/src/components/ui/slider.tsx

@@ -4,24 +4,65 @@ import * as React from "react";
 import * as SliderPrimitive from "@radix-ui/react-slider";
 import { cn } from "@/lib/utils";
 
-const Slider = React.forwardRef<
-  React.ComponentRef<typeof SliderPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <SliderPrimitive.Root
-    ref={ref}
-    className={cn(
-      "relative flex w-full touch-none select-none items-center",
-      className
-    )}
-    {...props}
-  >
-    <SliderPrimitive.Track className="slider-track relative h-1.5 w-full grow overflow-hidden rounded-full bg-muted cursor-pointer">
-      <SliderPrimitive.Range className="slider-range absolute h-full bg-primary" />
-    </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb className="slider-thumb block h-4 w-4 rounded-full border border-border bg-card shadow transition-colors cursor-grab active:cursor-grabbing focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed hover:bg-accent" />
-  </SliderPrimitive.Root>
-));
+// Type-safe wrappers for Radix UI primitives (React 19 compatibility)
+const SliderRootPrimitive = SliderPrimitive.Root as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> & {
+    children?: React.ReactNode;
+    className?: string;
+  } & React.RefAttributes<HTMLSpanElement>
+>;
+
+const SliderTrackPrimitive = SliderPrimitive.Track as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Track> & {
+    children?: React.ReactNode;
+    className?: string;
+  } & React.RefAttributes<HTMLSpanElement>
+>;
+
+const SliderRangePrimitive = SliderPrimitive.Range as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Range> & {
+    className?: string;
+  } & React.RefAttributes<HTMLSpanElement>
+>;
+
+const SliderThumbPrimitive = SliderPrimitive.Thumb as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Thumb> & {
+    className?: string;
+  } & React.RefAttributes<HTMLSpanElement>
+>;
+
+interface SliderProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "defaultValue" | "dir"> {
+  value?: number[];
+  defaultValue?: number[];
+  onValueChange?: (value: number[]) => void;
+  onValueCommit?: (value: number[]) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  disabled?: boolean;
+  orientation?: "horizontal" | "vertical";
+  dir?: "ltr" | "rtl";
+  inverted?: boolean;
+  minStepsBetweenThumbs?: number;
+}
+
+const Slider = React.forwardRef<HTMLSpanElement, SliderProps>(
+  ({ className, ...props }, ref) => (
+    <SliderRootPrimitive
+      ref={ref}
+      className={cn(
+        "relative flex w-full touch-none select-none items-center",
+        className
+      )}
+      {...props}
+    >
+      <SliderTrackPrimitive className="slider-track relative h-1.5 w-full grow overflow-hidden rounded-full bg-muted cursor-pointer">
+        <SliderRangePrimitive className="slider-range absolute h-full bg-primary" />
+      </SliderTrackPrimitive>
+      <SliderThumbPrimitive className="slider-thumb block h-4 w-4 rounded-full border border-border bg-card shadow transition-colors cursor-grab active:cursor-grabbing focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed hover:bg-accent" />
+    </SliderRootPrimitive>
+  )
+);
 Slider.displayName = SliderPrimitive.Root.displayName;
 
 export { Slider };

apps/app/src/components/ui/tabs.tsx

@@ -5,41 +5,86 @@ import * as TabsPrimitive from "@radix-ui/react-tabs"
 
 import { cn } from "@/lib/utils"
 
+// Type-safe wrappers for Radix UI primitives (React 19 compatibility)
+const TabsRootPrimitive = TabsPrimitive.Root as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {
+    children?: React.ReactNode;
+    className?: string;
+  } & React.RefAttributes<HTMLDivElement>
+>;
+
+const TabsListPrimitive = TabsPrimitive.List as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {
+    children?: React.ReactNode;
+    className?: string;
+  } & React.RefAttributes<HTMLDivElement>
+>;
+
+const TabsTriggerPrimitive = TabsPrimitive.Trigger as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {
+    children?: React.ReactNode;
+    className?: string;
+  } & React.RefAttributes<HTMLButtonElement>
+>;
+
+const TabsContentPrimitive = TabsPrimitive.Content as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content> & {
+    children?: React.ReactNode;
+    className?: string;
+  } & React.RefAttributes<HTMLDivElement>
+>;
+
 function Tabs({
   className,
+  children,
   ...props
-}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+}: React.ComponentProps<typeof TabsPrimitive.Root> & {
+  children?: React.ReactNode;
+  className?: string;
+}) {
   return (
-    <TabsPrimitive.Root
+    <TabsRootPrimitive
       data-slot="tabs"
       className={cn("flex flex-col gap-2", className)}
       {...props}
-    />
+    >
+      {children}
+    </TabsRootPrimitive>
   )
 }
 
 function TabsList({
   className,
+  children,
   ...props
-}: React.ComponentProps<typeof TabsPrimitive.List>) {
+}: React.ComponentProps<typeof TabsPrimitive.List> & {
+  children?: React.ReactNode;
+  className?: string;
+}) {
   return (
-    <TabsPrimitive.List
+    <TabsListPrimitive
       data-slot="tabs-list"
       className={cn(
         "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px] border border-border",
         className
       )}
       {...props}
-    />
+    >
+      {children}
+    </TabsListPrimitive>
   )
 }
 
 function TabsTrigger({
   className,
+  children,
   ...props
-}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+}: React.ComponentProps<typeof TabsPrimitive.Trigger> & {
+  children?: React.ReactNode;
+  className?: string;
+}) {
   return (
-    <TabsPrimitive.Trigger
+    <TabsTriggerPrimitive
       data-slot="tabs-trigger"
       className={cn(
         "inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all duration-200 cursor-pointer",
@@ -51,20 +96,28 @@ function TabsTrigger({
         className
       )}
       {...props}
-    />
+    >
+      {children}
+    </TabsTriggerPrimitive>
   )
 }
 
 function TabsContent({
   className,
+  children,
   ...props
-}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+}: React.ComponentProps<typeof TabsPrimitive.Content> & {
+  children?: React.ReactNode;
+  className?: string;
+}) {
   return (
-    <TabsPrimitive.Content
+    <TabsContentPrimitive
       data-slot="tabs-content"
       className={cn("flex-1 outline-none", className)}
       {...props}
-    />
+    >
+      {children}
+    </TabsContentPrimitive>
   )
 }
 

apps/app/src/components/ui/task-progress-panel.tsx

@@ -0,0 +1,274 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { cn } from "@/lib/utils";
+import { Check, Loader2, Circle, ChevronDown, ChevronRight, FileCode } from "lucide-react";
+import { getElectronAPI } from "@/lib/electron";
+import type { AutoModeEvent } from "@/types/electron";
+import { Badge } from "@/components/ui/badge";
+
+interface TaskInfo {
+  id: string;
+  description: string;
+  status: "pending" | "in_progress" | "completed";
+  filePath?: string;
+  phase?: string;
+}
+
+interface TaskProgressPanelProps {
+  featureId: string;
+  projectPath?: string;
+  className?: string;
+}
+
+export function TaskProgressPanel({ featureId, projectPath, className }: TaskProgressPanelProps) {
+  const [tasks, setTasks] = useState<TaskInfo[]>([]);
+  const [isExpanded, setIsExpanded] = useState(true);
+  const [isLoading, setIsLoading] = useState(true);
+  const [currentTaskId, setCurrentTaskId] = useState<string | null>(null);
+
+  // Load initial tasks from feature's planSpec
+  const loadInitialTasks = useCallback(async () => {
+    if (!projectPath) {
+      setIsLoading(false);
+      return;
+    }
+
+    try {
+      const api = getElectronAPI();
+      if (!api?.features) {
+        setIsLoading(false);
+        return;
+      }
+
+      const result = await api.features.get(projectPath, featureId);
+      if (result.success && result.feature?.planSpec?.tasks) {
+        const planTasks = result.feature.planSpec.tasks;
+        const currentId = result.feature.planSpec.currentTaskId;
+        const completedCount = result.feature.planSpec.tasksCompleted || 0;
+
+        // Convert planSpec tasks to TaskInfo with proper status
+        const initialTasks: TaskInfo[] = planTasks.map((t: any, index: number) => ({
+          id: t.id,
+          description: t.description,
+          filePath: t.filePath,
+          phase: t.phase,
+          status: index < completedCount
+            ? "completed" as const
+            : t.id === currentId
+              ? "in_progress" as const
+              : "pending" as const,
+        }));
+
+        setTasks(initialTasks);
+        setCurrentTaskId(currentId || null);
+      }
+    } catch (error) {
+      console.error("Failed to load initial tasks:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [featureId, projectPath]);
+
+  // Load initial state on mount
+  useEffect(() => {
+    loadInitialTasks();
+  }, [loadInitialTasks]);
+
+  // Listen to task events for real-time updates
+  useEffect(() => {
+    const api = getElectronAPI();
+    if (!api?.autoMode) return;
+
+    const unsubscribe = api.autoMode.onEvent((event: AutoModeEvent) => {
+      // Only handle events for this feature
+      if (!("featureId" in event) || event.featureId !== featureId) return;
+
+      switch (event.type) {
+        case "auto_mode_task_started":
+          if ("taskId" in event && "taskDescription" in event) {
+            const taskEvent = event as Extract<AutoModeEvent, { type: "auto_mode_task_started" }>;
+            setCurrentTaskId(taskEvent.taskId);
+
+            setTasks((prev) => {
+              // Check if task already exists
+              const existingIndex = prev.findIndex((t) => t.id === taskEvent.taskId);
+              
+              if (existingIndex !== -1) {
+                // Update status to in_progress and mark previous as completed
+                return prev.map((t, idx) => {
+                   if (t.id === taskEvent.taskId) {
+                     return { ...t, status: "in_progress" as const };
+                   }
+                   // If we are moving to a task that is further down the list, assume previous ones are completed
+                   // This is a heuristic, but usually correct for sequential execution
+                   if (idx < existingIndex && t.status !== "completed") {
+                     return { ...t, status: "completed" as const };
+                   }
+                   return t;
+                });
+              }
+              
+              // Add new task if it doesn't exist (fallback)
+              return [
+                ...prev,
+                {
+                  id: taskEvent.taskId,
+                  description: taskEvent.taskDescription,
+                  status: "in_progress" as const,
+                },
+              ];
+            });
+          }
+          break;
+
+        case "auto_mode_task_complete":
+          if ("taskId" in event) {
+            const taskEvent = event as Extract<AutoModeEvent, { type: "auto_mode_task_complete" }>;
+            setTasks((prev) =>
+              prev.map((t) =>
+                t.id === taskEvent.taskId ? { ...t, status: "completed" as const } : t
+              )
+            );
+            setCurrentTaskId(null);
+          }
+          break;
+      }
+    });
+
+    return unsubscribe;
+  }, [featureId]);
+
+  const completedCount = tasks.filter((t) => t.status === "completed").length;
+  const totalCount = tasks.length;
+  const progressPercent = totalCount > 0 ? Math.round((completedCount / totalCount) * 100) : 0;
+
+  if (isLoading || tasks.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className={cn("group rounded-xl border bg-card/50 shadow-sm overflow-hidden transition-all duration-200", className)}>
+      <button
+        onClick={() => setIsExpanded(!isExpanded)}
+        className="w-full flex items-center justify-between p-4 bg-muted/10 hover:bg-muted/20 transition-colors"
+      >
+        <div className="flex items-center gap-3">
+          <div className={cn(
+            "flex h-8 w-8 items-center justify-center rounded-lg border shadow-sm transition-colors",
+            isExpanded ? "bg-background border-border" : "bg-muted border-transparent"
+          )}>
+            {isExpanded ? (
+               <ChevronDown className="h-4 w-4 text-foreground/70" />
+            ) : (
+               <ChevronRight className="h-4 w-4 text-muted-foreground" />
+            )}
+          </div>
+          <div className="flex flex-col items-start gap-0.5">
+            <h3 className="font-semibold text-sm tracking-tight">Execution Plan</h3>
+            <span className="text-[10px] text-muted-foreground uppercase tracking-wider font-medium">
+              {completedCount} of {totalCount} tasks completed
+            </span>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-3">
+          {/* Circular Progress (Mini) */}
+          <div className="relative h-8 w-8 flex items-center justify-center">
+             <svg className="h-full w-full -rotate-90 text-muted/20" viewBox="0 0 24 24">
+                <circle className="text-muted/20" cx="12" cy="12" r="10" strokeWidth="3" fill="none" stroke="currentColor" />
+                <circle 
+                   className="text-primary transition-all duration-500 ease-in-out" 
+                   cx="12" cy="12" r="10" strokeWidth="3" fill="none" stroke="currentColor"
+                   strokeDasharray={63}
+                   strokeDashoffset={63 - (63 * progressPercent) / 100}
+                   strokeLinecap="round"
+                />
+             </svg>
+             <span className="absolute text-[9px] font-bold">{progressPercent}%</span>
+          </div>
+        </div>
+      </button>
+
+      <div className={cn(
+          "grid transition-all duration-300 ease-in-out",
+          isExpanded ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
+        )}>
+        <div className="overflow-hidden">
+          <div className="p-5 pt-2 relative max-h-[300px] overflow-y-auto scrollbar-visible">
+            {/* Vertical Connector Line */}
+            <div className="absolute left-[2.35rem] top-4 bottom-8 w-px bg-gradient-to-b from-border/80 via-border/40 to-transparent" />
+            
+            <div className="space-y-5">
+              {tasks.map((task, index) => {
+                const isActive = task.status === "in_progress";
+                const isCompleted = task.status === "completed";
+                const isPending = task.status === "pending";
+
+                return (
+                  <div 
+                    key={task.id} 
+                    className={cn(
+                      "relative flex gap-4 group/item transition-all duration-300",
+                      isPending && "opacity-60 hover:opacity-100"
+                    )}
+                  >
+                    {/* Icon Status */}
+                    <div className={cn(
+                      "relative z-10 flex h-7 w-7 items-center justify-center rounded-full border shadow-sm transition-all duration-300",
+                      isCompleted && "bg-green-500/10 border-green-500/20 text-green-600 dark:text-green-400",
+                      isActive && "bg-primary border-primary text-primary-foreground ring-4 ring-primary/10 scale-110",
+                      isPending && "bg-muted border-border text-muted-foreground"
+                    )}>
+                      {isCompleted && <Check className="h-3.5 w-3.5" />}
+                      {isActive && <Loader2 className="h-3.5 w-3.5 animate-spin" />}
+                      {isPending && <Circle className="h-2 w-2 fill-current opacity-50" />}
+                    </div>
+
+                    {/* Task Content */}
+                    <div className={cn(
+                      "flex-1 pt-1 min-w-0 transition-all",
+                      isActive && "translate-x-1"
+                    )}>
+                      <div className="flex flex-col gap-1.5">
+                        <div className="flex items-center justify-between gap-4">
+                           <p className={cn(
+                             "text-sm font-medium leading-none truncate pr-4",
+                             isCompleted && "text-muted-foreground line-through decoration-border/60",
+                             isActive && "text-primary font-semibold"
+                           )}>
+                             {task.description}
+                           </p>
+                           {isActive && (
+                              <Badge variant="outline" className="h-5 px-1.5 text-[10px] bg-primary/5 text-primary border-primary/20 animate-pulse">
+                                Active
+                              </Badge>
+                           )}
+                        </div>
+                        
+                        {(task.filePath || isActive) && (
+                          <div className="flex items-center gap-2 text-xs text-muted-foreground font-mono">
+                            {task.filePath ? (
+                              <>
+                                <FileCode className="h-3 w-3 opacity-70" />
+                                <span className="truncate opacity-80 hover:opacity-100 transition-opacity">
+                                  {task.filePath}
+                                </span>
+                              </>
+                            ) : (
+                               <span className="h-3 block" /> /* Spacer */
+                            )}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/app/src/components/ui/textarea.tsx

@@ -7,7 +7,11 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
     <textarea
       data-slot="textarea"
       className={cn(
-        "placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input min-h-[80px] w-full min-w-0 rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm resize-none",
+        "placeholder:text-muted-foreground/60 selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-border min-h-[80px] w-full min-w-0 rounded-md border bg-transparent px-3 py-2 text-base outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm resize-none",
+        // Inner shadow for depth
+        "shadow-[inset_0_1px_2px_rgba(0,0,0,0.05)]",
+        // Animated focus ring
+        "transition-[color,box-shadow,border-color] duration-200 ease-out",
         "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
         className

apps/app/src/components/ui/tooltip.tsx

@@ -5,22 +5,61 @@ import * as TooltipPrimitive from "@radix-ui/react-tooltip"
 
 import { cn } from "@/lib/utils"
 
+// Type-safe wrappers for Radix UI primitives (React 19 compatibility)
+const TooltipTriggerPrimitive = TooltipPrimitive.Trigger as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger> & {
+    children?: React.ReactNode;
+    asChild?: boolean;
+  } & React.RefAttributes<HTMLButtonElement>
+>;
+
+const TooltipContentPrimitive = TooltipPrimitive.Content as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {
+    className?: string;
+  } & React.RefAttributes<HTMLDivElement>
+>;
+
 const TooltipProvider = TooltipPrimitive.Provider
 
 const Tooltip = TooltipPrimitive.Root
 
-const TooltipTrigger = TooltipPrimitive.Trigger
+function TooltipTrigger({
+  children,
+  asChild,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger> & {
+  children?: React.ReactNode;
+  asChild?: boolean;
+}) {
+  return (
+    <TooltipTriggerPrimitive asChild={asChild} {...props}>
+      {children}
+    </TooltipTriggerPrimitive>
+  )
+}
 
 const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {
+    className?: string;
+  }
+>(({ className, sideOffset = 6, ...props }, ref) => (
   <TooltipPrimitive.Portal>
-    <TooltipPrimitive.Content
+    <TooltipContentPrimitive
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 overflow-hidden rounded-lg border border-border bg-popover px-3 py-1.5 text-xs font-medium text-popover-foreground",
+        // Premium shadow
+        "shadow-lg shadow-black/10",
+        // Faster, snappier animations
+        "animate-in fade-in-0 zoom-in-95 duration-150",
+        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:duration-100",
+        // Slide from edge
+        "data-[side=bottom]:slide-in-from-top-1",
+        "data-[side=left]:slide-in-from-right-1",
+        "data-[side=right]:slide-in-from-left-1",
+        "data-[side=top]:slide-in-from-bottom-1",
         className
       )}
       {...props}

apps/app/src/components/ui/xml-syntax-editor.tsx

@@ -1,6 +1,11 @@
 "use client";
 
-import { useRef, useCallback, useMemo } from "react";
+import CodeMirror from "@uiw/react-codemirror";
+import { xml } from "@codemirror/lang-xml";
+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 XmlSyntaxEditorProps {
@@ -11,199 +16,78 @@ interface XmlSyntaxEditorProps {
   "data-testid"?: string;
 }
 
-// Tokenize XML content into parts for highlighting
-interface Token {
-  type:
-    | "tag-bracket"
-    | "tag-name"
-    | "attribute-name"
-    | "attribute-equals"
-    | "attribute-value"
-    | "text"
-    | "comment"
-    | "cdata"
-    | "doctype";
-  value: string;
-}
+// Syntax highlighting that uses CSS variables from the app's theme system
+// This automatically adapts to any theme (dark, light, dracula, nord, etc.)
+const syntaxColors = HighlightStyle.define([
+  // XML tags - use primary color
+  { tag: t.tagName, color: "var(--primary)" },
+  { tag: t.angleBracket, color: "var(--muted-foreground)" },
 
-function tokenizeXml(text: string): Token[] {
-  const tokens: Token[] = [];
-  let i = 0;
+  // Attributes
+  { tag: t.attributeName, color: "var(--chart-2, oklch(0.6 0.118 184.704))" },
+  { tag: t.attributeValue, color: "var(--chart-1, oklch(0.646 0.222 41.116))" },
 
-  while (i < text.length) {
-    // Comment: <!-- ... -->
-    if (text.slice(i, i + 4) === "<!--") {
-      const end = text.indexOf("-->", i + 4);
-      if (end !== -1) {
-        tokens.push({ type: "comment", value: text.slice(i, end + 3) });
-        i = end + 3;
-        continue;
-      }
-    }
+  // Strings and content
+  { tag: t.string, color: "var(--chart-1, oklch(0.646 0.222 41.116))" },
+  { tag: t.content, color: "var(--foreground)" },
 
-    // CDATA: <![CDATA[ ... ]]>
-    if (text.slice(i, i + 9) === "<![CDATA[") {
-      const end = text.indexOf("]]>", i + 9);
-      if (end !== -1) {
-        tokens.push({ type: "cdata", value: text.slice(i, end + 3) });
-        i = end + 3;
-        continue;
-      }
-    }
+  // Comments
+  { tag: t.comment, color: "var(--muted-foreground)", fontStyle: "italic" },
 
-    // DOCTYPE: <!DOCTYPE ... >
-    if (text.slice(i, i + 9).toUpperCase() === "<!DOCTYPE") {
-      const end = text.indexOf(">", i + 9);
-      if (end !== -1) {
-        tokens.push({ type: "doctype", value: text.slice(i, end + 1) });
-        i = end + 1;
-        continue;
-      }
-    }
+  // Special
+  { tag: t.processingInstruction, color: "var(--muted-foreground)" },
+  { tag: t.documentMeta, color: "var(--muted-foreground)" },
+]);
 
-    // Tag: < ... >
-    if (text[i] === "<") {
-      // Find the end of the tag
-      let tagEnd = i + 1;
-      let inString: string | null = null;
+// Editor theme using CSS variables
+const editorTheme = EditorView.theme({
+  "&": {
+    height: "100%",
+    fontSize: "0.875rem",
+    fontFamily: "ui-monospace, monospace",
+    backgroundColor: "transparent",
+    color: "var(--foreground)",
+  },
+  ".cm-scroller": {
+    overflow: "auto",
+    fontFamily: "ui-monospace, monospace",
+  },
+  ".cm-content": {
+    padding: "1rem",
+    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: "transparent",
+  },
+  ".cm-line": {
+    padding: "0",
+  },
+  "&.cm-focused": {
+    outline: "none",
+  },
+  ".cm-gutters": {
+    display: "none",
+  },
+  ".cm-placeholder": {
+    color: "var(--muted-foreground)",
+    fontStyle: "italic",
+  },
+});
 
-      while (tagEnd < text.length) {
-        const char = text[tagEnd];
-
-        if (inString) {
-          if (char === inString && text[tagEnd - 1] !== "\\") {
-            inString = null;
-          }
-        } else {
-          if (char === '"' || char === "'") {
-            inString = char;
-          } else if (char === ">") {
-            tagEnd++;
-            break;
-          }
-        }
-        tagEnd++;
-      }
-
-      const tagContent = text.slice(i, tagEnd);
-      const tagTokens = tokenizeTag(tagContent);
-      tokens.push(...tagTokens);
-      i = tagEnd;
-      continue;
-    }
-
-    // Text content between tags
-    const nextTag = text.indexOf("<", i);
-    if (nextTag === -1) {
-      tokens.push({ type: "text", value: text.slice(i) });
-      break;
-    } else if (nextTag > i) {
-      tokens.push({ type: "text", value: text.slice(i, nextTag) });
-      i = nextTag;
-    }
-  }
-
-  return tokens;
-}
-
-function tokenizeTag(tag: string): Token[] {
-  const tokens: Token[] = [];
-  let i = 0;
-
-  // Opening bracket (< or </ or <?)
-  if (tag.startsWith("</")) {
-    tokens.push({ type: "tag-bracket", value: "</" });
-    i = 2;
-  } else if (tag.startsWith("<?")) {
-    tokens.push({ type: "tag-bracket", value: "<?" });
-    i = 2;
-  } else {
-    tokens.push({ type: "tag-bracket", value: "<" });
-    i = 1;
-  }
-
-  // Skip whitespace
-  while (i < tag.length && /\s/.test(tag[i])) {
-    tokens.push({ type: "text", value: tag[i] });
-    i++;
-  }
-
-  // Tag name
-  let tagName = "";
-  while (i < tag.length && /[a-zA-Z0-9_:-]/.test(tag[i])) {
-    tagName += tag[i];
-    i++;
-  }
-  if (tagName) {
-    tokens.push({ type: "tag-name", value: tagName });
-  }
-
-  // Attributes and closing
-  while (i < tag.length) {
-    // Skip whitespace
-    if (/\s/.test(tag[i])) {
-      let ws = "";
-      while (i < tag.length && /\s/.test(tag[i])) {
-        ws += tag[i];
-        i++;
-      }
-      tokens.push({ type: "text", value: ws });
-      continue;
-    }
-
-    // Closing bracket
-    if (tag[i] === ">" || tag.slice(i, i + 2) === "/>" || tag.slice(i, i + 2) === "?>") {
-      tokens.push({ type: "tag-bracket", value: tag.slice(i) });
-      break;
-    }
-
-    // Attribute name
-    let attrName = "";
-    while (i < tag.length && /[a-zA-Z0-9_:-]/.test(tag[i])) {
-      attrName += tag[i];
-      i++;
-    }
-    if (attrName) {
-      tokens.push({ type: "attribute-name", value: attrName });
-    }
-
-    // Skip whitespace around =
-    while (i < tag.length && /\s/.test(tag[i])) {
-      tokens.push({ type: "text", value: tag[i] });
-      i++;
-    }
-
-    // Equals sign
-    if (tag[i] === "=") {
-      tokens.push({ type: "attribute-equals", value: "=" });
-      i++;
-    }
-
-    // Skip whitespace after =
-    while (i < tag.length && /\s/.test(tag[i])) {
-      tokens.push({ type: "text", value: tag[i] });
-      i++;
-    }
-
-    // Attribute value
-    if (tag[i] === '"' || tag[i] === "'") {
-      const quote = tag[i];
-      let value = quote;
-      i++;
-      while (i < tag.length && tag[i] !== quote) {
-        value += tag[i];
-        i++;
-      }
-      if (i < tag.length) {
-        value += tag[i];
-        i++;
-      }
-      tokens.push({ type: "attribute-value", value });
-    }
-  }
-
-  return tokens;
-}
+// Combine all extensions
+const extensions: Extension[] = [
+  xml(),
+  syntaxHighlighting(syntaxColors),
+  editorTheme,
+];
 
 export function XmlSyntaxEditor({
   value,
@@ -212,78 +96,24 @@ export function XmlSyntaxEditor({
   className,
   "data-testid": testId,
 }: XmlSyntaxEditorProps) {
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-  const highlightRef = useRef<HTMLDivElement>(null);
-
-  // Sync scroll between textarea and highlight layer
-  const handleScroll = useCallback(() => {
-    if (textareaRef.current && highlightRef.current) {
-      highlightRef.current.scrollTop = textareaRef.current.scrollTop;
-      highlightRef.current.scrollLeft = textareaRef.current.scrollLeft;
-    }
-  }, []);
-
-  // Handle tab key for indentation
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-      if (e.key === "Tab") {
-        e.preventDefault();
-        const textarea = e.currentTarget;
-        const start = textarea.selectionStart;
-        const end = textarea.selectionEnd;
-        const newValue =
-          value.substring(0, start) + "  " + value.substring(end);
-        onChange(newValue);
-        // Reset cursor position after state update
-        requestAnimationFrame(() => {
-          textarea.selectionStart = textarea.selectionEnd = start + 2;
-        });
-      }
-    },
-    [value, onChange]
-  );
-
-  // Memoize the highlighted content
-  const highlightedContent = useMemo(() => {
-    const tokens = tokenizeXml(value);
-
-    return tokens.map((token, index) => {
-      const className = `xml-${token.type}`;
-      // React handles escaping automatically, just render the raw value
-      return (
-        <span key={index} className={className}>
-          {token.value}
-        </span>
-      );
-    });
-  }, [value]);
-
   return (
-    <div className={cn("relative w-full h-full xml-editor", className)}>
-      {/* Syntax highlighted layer (read-only, behind textarea) */}
-      <div
-        ref={highlightRef}
-        className="absolute inset-0 overflow-auto pointer-events-none font-mono text-sm p-4 whitespace-pre-wrap break-words"
-        aria-hidden="true"
-      >
-        {value ? (
-          <code className="xml-highlight">{highlightedContent}</code>
-        ) : (
-          <span className="text-muted-foreground opacity-50">{placeholder}</span>
-        )}
-      </div>
-
-      {/* Actual textarea (transparent text, handles input) */}
-      <textarea
-        ref={textareaRef}
+    <div className={cn("w-full h-full", className)} data-testid={testId}>
+      <CodeMirror
         value={value}
-        onChange={(e) => onChange(e.target.value)}
-        onScroll={handleScroll}
-        onKeyDown={handleKeyDown}
-        placeholder=""
-        spellCheck={false}
-        className="absolute inset-0 w-full h-full font-mono text-sm p-4 bg-transparent resize-none focus:outline-none text-transparent caret-foreground selection:bg-primary/30"
-        data-testid={testId}
+        onChange={onChange}
+        extensions={extensions}
+        theme="none"
+        placeholder={placeholder}
+        className="h-full [&_.cm-editor]:h-full"
+        basicSetup={{
+          lineNumbers: false,
+          foldGutter: false,
+          highlightActiveLine: false,
+          highlightSelectionMatches: true,
+          autocompletion: true,
+          bracketMatching: true,
+          indentOnInput: true,
+        }}
       />
     </div>
   );

apps/app/src/components/views/agent-view.tsx

@@ -1,8 +1,7 @@
 "use client";
 
 import { useState, useCallback, useRef, useEffect, useMemo } from "react";
-import { useAppStore } from "@/store/app-store";
-import { Card, CardContent } from "@/components/ui/card";
+import { useAppStore, type AgentModel } from "@/store/app-store";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { ImageDropZone } from "@/components/ui/image-drop-zone";
@@ -18,6 +17,8 @@ import {
   PanelLeft,
   Paperclip,
   X,
+  ImageIcon,
+  ChevronDown,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { useElectronAgent } from "@/hooks/use-electron-agent";
@@ -29,9 +30,17 @@ import {
   useKeyboardShortcutsConfig,
   KeyboardShortcut,
 } from "@/hooks/use-keyboard-shortcuts";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { CLAUDE_MODELS } from "@/components/views/board-view/shared/model-constants";
 
 export function AgentView() {
-  const { currentProject, setLastSelectedSession, getLastSelectedSession } = useAppStore();
+  const { currentProject, setLastSelectedSession, getLastSelectedSession } =
+    useAppStore();
   const shortcuts = useKeyboardShortcutsConfig();
   const [input, setInput] = useState("");
   const [selectedImages, setSelectedImages] = useState<ImageAttachment[]>([]);
@@ -40,6 +49,7 @@ export function AgentView() {
   const [currentSessionId, setCurrentSessionId] = useState<string | null>(null);
   const [showSessionManager, setShowSessionManager] = useState(true);
   const [isDragOver, setIsDragOver] = useState(false);
+  const [selectedModel, setSelectedModel] = useState<AgentModel>("sonnet");
 
   // Track if initial session has been loaded
   const initialSessionLoadedRef = useRef(false);
@@ -65,6 +75,7 @@ export function AgentView() {
   } = useElectronAgent({
     sessionId: currentSessionId || "",
     workingDirectory: currentProject?.path,
+    model: selectedModel,
     onToolUse: (toolName) => {
       setCurrentTool(toolName);
       setTimeout(() => setCurrentTool(null), 2000);
@@ -72,13 +83,16 @@ export function AgentView() {
   });
 
   // Handle session selection with persistence
-  const handleSelectSession = useCallback((sessionId: string | null) => {
-    setCurrentSessionId(sessionId);
-    // Persist the selection for this project
-    if (currentProject?.path) {
-      setLastSelectedSession(currentProject.path, sessionId);
-    }
-  }, [currentProject?.path, setLastSelectedSession]);
+  const handleSelectSession = useCallback(
+    (sessionId: string | null) => {
+      setCurrentSessionId(sessionId);
+      // Persist the selection for this project
+      if (currentProject?.path) {
+        setLastSelectedSession(currentProject.path, sessionId);
+      }
+    },
+    [currentProject?.path, setLastSelectedSession]
+  );
 
   // Restore last selected session when switching to Agent view or when project changes
   useEffect(() => {
@@ -95,7 +109,10 @@ export function AgentView() {
 
     const lastSessionId = getLastSelectedSession(currentProject.path);
     if (lastSessionId) {
-      console.log("[AgentView] Restoring last selected session:", lastSessionId);
+      console.log(
+        "[AgentView] Restoring last selected session:",
+        lastSessionId
+      );
       setCurrentSessionId(lastSessionId);
     }
   }, [currentProject?.path, getLastSelectedSession]);
@@ -222,11 +239,6 @@ export function AgentView() {
       e.stopPropagation();
       if (isProcessing || !isConnected) return;
 
-      console.log(
-        "[agent-view] Drag enter types:",
-        Array.from(e.dataTransfer.types)
-      );
-
       // Check if dragged items contain files
       if (e.dataTransfer.types.includes("Files")) {
         setIsDragOver(true);
@@ -262,39 +274,21 @@ export function AgentView() {
 
       if (isProcessing || !isConnected) return;
 
-      console.log("[agent-view] Drop event:", {
-        filesCount: e.dataTransfer.files.length,
-        itemsCount: e.dataTransfer.items.length,
-        types: Array.from(e.dataTransfer.types),
-      });
-
       // Check if we have files
       const files = e.dataTransfer.files;
       if (files && files.length > 0) {
-        console.log("[agent-view] Processing files from dataTransfer.files");
         processDroppedFiles(files);
         return;
       }
 
       // Handle file paths (from screenshots or other sources)
-      // This is common on macOS when dragging screenshots
       const items = e.dataTransfer.items;
       if (items && items.length > 0) {
-        console.log("[agent-view] Processing items");
         for (let i = 0; i < items.length; i++) {
           const item = items[i];
-          console.log(`[agent-view] Item ${i}:`, {
-            kind: item.kind,
-            type: item.type,
-          });
           if (item.kind === "file") {
             const file = item.getAsFile();
             if (file) {
-              console.log("[agent-view] Got file from item:", {
-                name: file.name,
-                type: file.type,
-                size: file.size,
-              });
               const dataTransfer = new DataTransfer();
               dataTransfer.items.add(file);
               processDroppedFiles(dataTransfer.files);
@@ -315,10 +309,6 @@ export function AgentView() {
 
         for (let i = 0; i < items.length; i++) {
           const item = items[i];
-          console.log("[agent-view] Paste item:", {
-            kind: item.kind,
-            type: item.type,
-          });
 
           if (item.kind === "file") {
             const file = item.getAsFile();
@@ -330,10 +320,6 @@ export function AgentView() {
         }
 
         if (files.length > 0) {
-          console.log(
-            "[agent-view] Processing pasted image files:",
-            files.length
-          );
           const dataTransfer = new DataTransfer();
           files.forEach((file) => dataTransfer.items.add(file));
           await processDroppedFiles(dataTransfer.files);
@@ -442,13 +428,17 @@ export function AgentView() {
   if (!currentProject) {
     return (
       <div
-        className="flex-1 flex items-center justify-center"
+        className="flex-1 flex items-center justify-center bg-background"
         data-testid="agent-view-no-project"
       >
-        <div className="text-center">
-          <Sparkles className="w-12 h-12 text-muted-foreground mx-auto mb-4" />
-          <h2 className="text-xl font-semibold mb-2">No Project Selected</h2>
-          <p className="text-muted-foreground">
+        <div className="text-center max-w-md">
+          <div className="w-16 h-16 rounded-2xl bg-primary/10 flex items-center justify-center mx-auto mb-6">
+            <Sparkles className="w-8 h-8 text-primary" />
+          </div>
+          <h2 className="text-xl font-semibold mb-3 text-foreground">
+            No Project Selected
+          </h2>
+          <p className="text-muted-foreground leading-relaxed">
             Open or create a project to start working with the AI agent.
           </p>
         </div>
@@ -472,12 +462,12 @@ export function AgentView() {
 
   return (
     <div
-      className="flex-1 flex overflow-hidden content-bg"
+      className="flex-1 flex overflow-hidden bg-background"
       data-testid="agent-view"
     >
       {/* Session Manager Sidebar */}
       {showSessionManager && currentProject && (
-        <div className="w-80 border-r flex-shrink-0">
+        <div className="w-80 border-r border-border flex-shrink-0 bg-card/50">
           <SessionManager
             currentSessionId={currentSessionId}
             onSelectSession={handleSelectSession}
@@ -491,13 +481,13 @@ export function AgentView() {
       {/* Chat Area */}
       <div className="flex-1 flex flex-col overflow-hidden">
         {/* Header */}
-        <div className="flex items-center justify-between p-4 border-b border-border bg-glass backdrop-blur-md">
-          <div className="flex items-center gap-3">
+        <div className="flex items-center justify-between px-6 py-4 border-b border-border bg-card/50 backdrop-blur-sm">
+          <div className="flex items-center gap-4">
             <Button
               variant="ghost"
               size="sm"
               onClick={() => setShowSessionManager(!showSessionManager)}
-              className="h-8 w-8 p-0"
+              className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
             >
               {showSessionManager ? (
                 <PanelLeftClose className="w-4 h-4" />
@@ -505,26 +495,69 @@ export function AgentView() {
                 <PanelLeft className="w-4 h-4" />
               )}
             </Button>
-            <Bot className="w-5 h-5 text-primary" />
+            <div className="w-9 h-9 rounded-xl bg-primary/10 flex items-center justify-center">
+              <Bot className="w-5 h-5 text-primary" />
+            </div>
             <div>
-              <h1 className="text-xl font-bold">AI Agent</h1>
+              <h1 className="text-lg font-semibold text-foreground">
+                AI Agent
+              </h1>
               <p className="text-sm text-muted-foreground">
                 {currentProject.name}
-                {currentSessionId && !isConnected && " · Connecting..."}
+                {currentSessionId && !isConnected && " - Connecting..."}
               </p>
             </div>
           </div>
 
           {/* Status indicators & actions */}
-          <div className="flex items-center gap-2">
+          <div className="flex items-center gap-3">
+            {/* Model Selector */}
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="h-8 gap-1.5 text-xs font-medium"
+                  disabled={isProcessing}
+                  data-testid="model-selector"
+                >
+                  <Bot className="w-3.5 h-3.5" />
+                  {CLAUDE_MODELS.find((m) => m.id === selectedModel)?.label.replace("Claude ", "") || "Sonnet"}
+                  <ChevronDown className="w-3 h-3 opacity-50" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="w-48">
+                {CLAUDE_MODELS.map((model) => (
+                  <DropdownMenuItem
+                    key={model.id}
+                    onClick={() => setSelectedModel(model.id)}
+                    className={cn(
+                      "cursor-pointer",
+                      selectedModel === model.id && "bg-accent"
+                    )}
+                    data-testid={`model-option-${model.id}`}
+                  >
+                    <div className="flex flex-col">
+                      <span className="font-medium">{model.label}</span>
+                      <span className="text-xs text-muted-foreground">
+                        {model.description}
+                      </span>
+                    </div>
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+
             {currentTool && (
-              <div className="flex items-center gap-1 text-xs text-muted-foreground bg-muted px-2 py-1 rounded">
-                <Wrench className="w-3 h-3" />
-                <span>{currentTool}</span>
+              <div className="flex items-center gap-2 text-xs text-muted-foreground bg-muted/50 px-3 py-1.5 rounded-full border border-border">
+                <Wrench className="w-3 h-3 text-primary" />
+                <span className="font-medium">{currentTool}</span>
               </div>
             )}
             {agentError && (
-              <span className="text-xs text-destructive">{agentError}</span>
+              <span className="text-xs text-destructive font-medium">
+                {agentError}
+              </span>
             )}
             {currentSessionId && messages.length > 0 && (
               <Button
@@ -532,8 +565,9 @@ export function AgentView() {
                 size="sm"
                 onClick={handleClearChat}
                 disabled={isProcessing}
+                className="text-muted-foreground hover:text-foreground"
               >
-                <Trash2 className="w-4 h-4 mr-1" />
+                <Trash2 className="w-4 h-4 mr-2" />
                 Clear
               </Button>
             )}
@@ -543,22 +577,25 @@ export function AgentView() {
         {/* Messages */}
         {!currentSessionId ? (
           <div
-            className="flex-1 flex items-center justify-center"
+            className="flex-1 flex items-center justify-center bg-background"
             data-testid="no-session-placeholder"
           >
-            <div className="text-center">
-              <Bot className="w-12 h-12 text-muted-foreground mx-auto mb-4 opacity-50" />
-              <h2 className="text-lg font-semibold mb-2">
+            <div className="text-center max-w-md">
+              <div className="w-16 h-16 rounded-2xl bg-muted/50 flex items-center justify-center mx-auto mb-6">
+                <Bot className="w-8 h-8 text-muted-foreground" />
+              </div>
+              <h2 className="text-lg font-semibold mb-3 text-foreground">
                 No Session Selected
               </h2>
-              <p className="text-sm text-muted-foreground mb-4">
-                Create or select a session to start chatting
+              <p className="text-sm text-muted-foreground mb-6 leading-relaxed">
+                Create or select a session to start chatting with the AI agent
               </p>
               <Button
                 onClick={() => setShowSessionManager(true)}
                 variant="outline"
+                className="gap-2"
               >
-                <PanelLeft className="w-4 h-4 mr-2" />
+                <PanelLeft className="w-4 h-4" />
                 {showSessionManager ? "View" : "Show"} Sessions
               </Button>
             </div>
@@ -566,7 +603,7 @@ export function AgentView() {
         ) : (
           <div
             ref={messagesContainerRef}
-            className="flex-1 overflow-y-auto p-4 space-y-4"
+            className="flex-1 overflow-y-auto px-6 py-6 space-y-6 scroll-smooth"
             data-testid="message-list"
             onScroll={handleScroll}
           >
@@ -574,95 +611,213 @@ export function AgentView() {
               <div
                 key={message.id}
                 className={cn(
-                  "flex gap-3",
-                  message.role === "user" && "flex-row-reverse"
+                  "flex gap-4 max-w-4xl",
+                  message.role === "user" ? "flex-row-reverse ml-auto" : ""
                 )}
               >
+                {/* Avatar */}
                 <div
                   className={cn(
-                    "w-8 h-8 rounded-full flex items-center justify-center shrink-0",
-                    message.role === "assistant" ? "bg-primary/10" : "bg-muted"
+                    "w-9 h-9 rounded-xl flex items-center justify-center shrink-0 shadow-sm",
+                    message.role === "assistant"
+                      ? "bg-primary/10 ring-1 ring-primary/20"
+                      : "bg-muted ring-1 ring-border"
                   )}
                 >
                   {message.role === "assistant" ? (
                     <Bot className="w-4 h-4 text-primary" />
                   ) : (
-                    <User className="w-4 h-4" />
+                    <User className="w-4 h-4 text-muted-foreground" />
                   )}
                 </div>
-                <Card
+
+                {/* Message Bubble */}
+                <div
                   className={cn(
-                    "max-w-[80%] py-0",
+                    "flex-1 max-w-[85%] rounded-2xl px-4 py-3 shadow-sm",
                     message.role === "user"
-                      ? "bg-transparent border border-primary text-foreground"
-                      : "border-l-4 border-primary bg-card"
+                      ? "bg-primary text-primary-foreground"
+                      : "bg-card border border-border"
                   )}
                 >
-                  <CardContent className="px-3 py-2">
-                    {message.role === "assistant" ? (
-                      <Markdown className="text-sm text-primary prose-headings:text-primary prose-strong:text-primary prose-code:text-primary">
-                        {message.content}
-                      </Markdown>
-                    ) : (
-                      <p className="text-sm whitespace-pre-wrap">
-                        {message.content}
-                      </p>
-                    )}
-                    <p
-                      className={cn(
-                        "text-xs mt-1",
-                        message.role === "user"
-                          ? "text-muted-foreground"
-                          : "text-primary/70"
-                      )}
-                    >
-                      {new Date(message.timestamp).toLocaleTimeString()}
+                  {message.role === "assistant" ? (
+                    <Markdown className="text-sm text-foreground prose-p:leading-relaxed prose-headings:text-foreground prose-strong:text-foreground prose-code:text-primary prose-code:bg-muted prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded">
+                      {message.content}
+                    </Markdown>
+                  ) : (
+                    <p className="text-sm whitespace-pre-wrap leading-relaxed">
+                      {message.content}
                     </p>
-                  </CardContent>
-                </Card>
+                  )}
+
+                  {/* Display attached images for user messages */}
+                  {message.role === "user" &&
+                    message.images &&
+                    message.images.length > 0 && (
+                      <div className="mt-3 space-y-2">
+                        <div className="flex items-center gap-1.5 text-xs text-primary-foreground/80">
+                          <ImageIcon className="w-3 h-3" />
+                          <span>
+                            {message.images.length} image
+                            {message.images.length > 1 ? "s" : ""} attached
+                          </span>
+                        </div>
+                        <div className="flex flex-wrap gap-2">
+                          {message.images.map((image, index) => {
+                            // Construct proper data URL from base64 data and mime type
+                            const dataUrl = image.data.startsWith("data:")
+                              ? image.data
+                              : `data:${image.mimeType || "image/png"};base64,${
+                                  image.data
+                                }`;
+                            return (
+                              <div
+                                key={image.id || `img-${index}`}
+                                className="relative group rounded-lg overflow-hidden border border-primary-foreground/20 bg-primary-foreground/10"
+                              >
+                                <img
+                                  src={dataUrl}
+                                  alt={
+                                    image.filename ||
+                                    `Attached image ${index + 1}`
+                                  }
+                                  className="w-20 h-20 object-cover hover:opacity-90 transition-opacity"
+                                />
+                                <div className="absolute bottom-0 left-0 right-0 bg-black/50 px-1.5 py-0.5 text-[9px] text-white truncate">
+                                  {image.filename || `Image ${index + 1}`}
+                                </div>
+                              </div>
+                            );
+                          })}
+                        </div>
+                      </div>
+                    )}
+
+                  <p
+                    className={cn(
+                      "text-[11px] mt-2 font-medium",
+                      message.role === "user"
+                        ? "text-primary-foreground/70"
+                        : "text-muted-foreground"
+                    )}
+                  >
+                    {new Date(message.timestamp).toLocaleTimeString([], {
+                      hour: "2-digit",
+                      minute: "2-digit",
+                    })}
+                  </p>
+                </div>
               </div>
             ))}
 
+            {/* Thinking Indicator */}
             {isProcessing && (
-              <div className="flex gap-3">
-                <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center">
+              <div className="flex gap-4 max-w-4xl">
+                <div className="w-9 h-9 rounded-xl bg-primary/10 ring-1 ring-primary/20 flex items-center justify-center shrink-0 shadow-sm">
                   <Bot className="w-4 h-4 text-primary" />
                 </div>
-                <Card className="border-l-4 border-primary bg-card py-0">
-                  <CardContent className="p-3">
-                    <div className="flex items-center gap-2">
-                      <Loader2 className="w-4 h-4 animate-spin text-primary" />
-                      <span className="text-sm text-primary">
-                        Thinking...
-                      </span>
+                <div className="bg-card border border-border rounded-2xl px-4 py-3 shadow-sm">
+                  <div className="flex items-center gap-3">
+                    <div className="flex items-center gap-1">
+                      <span
+                        className="w-2 h-2 rounded-full bg-primary animate-pulse"
+                        style={{ animationDelay: "0ms" }}
+                      />
+                      <span
+                        className="w-2 h-2 rounded-full bg-primary animate-pulse"
+                        style={{ animationDelay: "150ms" }}
+                      />
+                      <span
+                        className="w-2 h-2 rounded-full bg-primary animate-pulse"
+                        style={{ animationDelay: "300ms" }}
+                      />
                     </div>
-                  </CardContent>
-                </Card>
+                    <span className="text-sm text-muted-foreground">
+                      Thinking...
+                    </span>
+                  </div>
+                </div>
               </div>
             )}
           </div>
         )}
 
-        {/* Input */}
+        {/* Input Area */}
         {currentSessionId && (
-          <div className="border-t border-border p-4 space-y-3 bg-background">
+          <div className="border-t border-border p-4 bg-card/50 backdrop-blur-sm">
             {/* Image Drop Zone (when visible) */}
             {showImageDropZone && (
               <ImageDropZone
                 onImagesSelected={handleImagesSelected}
                 images={selectedImages}
                 maxFiles={5}
-                className="mb-3"
+                className="mb-4"
                 disabled={isProcessing || !isConnected}
               />
             )}
 
-            {/* Text Input and Controls - with drag and drop support */}
+            {/* Selected Images Preview */}
+            {selectedImages.length > 0 && (
+              <div className="mb-4 space-y-2">
+                <div className="flex items-center justify-between">
+                  <p className="text-xs font-medium text-foreground">
+                    {selectedImages.length} image
+                    {selectedImages.length > 1 ? "s" : ""} attached
+                  </p>
+                  <button
+                    onClick={() => setSelectedImages([])}
+                    className="text-xs text-muted-foreground hover:text-foreground transition-colors"
+                    disabled={isProcessing}
+                  >
+                    Clear all
+                  </button>
+                </div>
+                <div className="flex flex-wrap gap-2">
+                  {selectedImages.map((image) => (
+                    <div
+                      key={image.id}
+                      className="group relative rounded-lg border border-border bg-muted/30 p-2 flex items-center gap-2 hover:border-primary/30 transition-colors"
+                    >
+                      {/* Image thumbnail */}
+                      <div className="w-8 h-8 rounded-md overflow-hidden bg-muted flex-shrink-0">
+                        <img
+                          src={image.data}
+                          alt={image.filename}
+                          className="w-full h-full object-cover"
+                        />
+                      </div>
+                      {/* Image info */}
+                      <div className="min-w-0 flex-1">
+                        <p className="text-xs font-medium text-foreground truncate max-w-24">
+                          {image.filename}
+                        </p>
+                        {image.size !== undefined && (
+                          <p className="text-[10px] text-muted-foreground">
+                            {formatFileSize(image.size)}
+                          </p>
+                        )}
+                      </div>
+                      {/* Remove button */}
+                      {image.id && (
+                        <button
+                          onClick={() => removeImage(image.id!)}
+                          className="opacity-0 group-hover:opacity-100 transition-opacity p-1 rounded-full hover:bg-destructive/10 text-muted-foreground hover:text-destructive"
+                          disabled={isProcessing}
+                        >
+                          <X className="h-3 w-3" />
+                        </button>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Text Input and Controls */}
             <div
               className={cn(
-                "flex gap-2 transition-all duration-200 rounded-lg",
-                isDragOver &&
-                  "bg-primary/10 ring-2 ring-primary ring-offset-2 ring-offset-background"
+                "flex gap-2 transition-all duration-200 rounded-xl p-1",
+                isDragOver && "bg-primary/5 ring-2 ring-primary/30"
               )}
               onDragEnter={handleDragEnter}
               onDragLeave={handleDragLeave}
@@ -684,21 +839,20 @@ export function AgentView() {
                   disabled={isProcessing || !isConnected}
                   data-testid="agent-input"
                   className={cn(
-                    "bg-input border-border",
-                    selectedImages.length > 0 &&
-                      "border-primary/50 bg-primary/5",
-                    isDragOver &&
-                      "border-primary bg-primary/10"
+                    "h-11 bg-background border-border rounded-xl pl-4 pr-20 text-sm transition-all",
+                    "focus:ring-2 focus:ring-primary/20 focus:border-primary/50",
+                    selectedImages.length > 0 && "border-primary/30",
+                    isDragOver && "border-primary bg-primary/5"
                   )}
                 />
                 {selectedImages.length > 0 && !isDragOver && (
-                  <div className="absolute right-2 top-1/2 transform -translate-y-1/2 text-xs text-primary-foreground bg-primary px-2 py-1 rounded">
+                  <div className="absolute right-3 top-1/2 -translate-y-1/2 text-xs bg-primary text-primary-foreground px-2 py-0.5 rounded-full font-medium">
                     {selectedImages.length} image
                     {selectedImages.length > 1 ? "s" : ""}
                   </div>
                 )}
                 {isDragOver && (
-                  <div className="absolute right-2 top-1/2 transform -translate-y-1/2 text-xs text-primary-foreground bg-primary px-2 py-1 rounded flex items-center gap-1">
+                  <div className="absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-1.5 text-xs text-primary font-medium">
                     <Paperclip className="w-3 h-3" />
                     Drop here
                   </div>
@@ -708,13 +862,14 @@ export function AgentView() {
               {/* Image Attachment Button */}
               <Button
                 variant="outline"
-                size="default"
+                size="icon"
                 onClick={toggleImageDropZone}
                 disabled={isProcessing || !isConnected}
                 className={cn(
+                  "h-11 w-11 rounded-xl border-border",
                   showImageDropZone &&
-                    "bg-primary/20 text-primary border-primary",
-                  selectedImages.length > 0 && "border-primary"
+                    "bg-primary/10 text-primary border-primary/30",
+                  selectedImages.length > 0 && "border-primary/30 text-primary"
                 )}
                 title="Attach images"
               >
@@ -729,64 +884,21 @@ export function AgentView() {
                   isProcessing ||
                   !isConnected
                 }
+                className="h-11 px-4 rounded-xl"
                 data-testid="send-message"
               >
                 <Send className="w-4 h-4" />
               </Button>
             </div>
 
-            {/* Selected Images Preview */}
-            {selectedImages.length > 0 && (
-              <div className="space-y-2">
-                <div className="flex items-center justify-between">
-                  <p className="text-xs font-medium text-foreground">
-                    {selectedImages.length} image
-                    {selectedImages.length > 1 ? "s" : ""} attached
-                  </p>
-                  <button
-                    onClick={() => setSelectedImages([])}
-                    className="text-xs text-muted-foreground hover:text-foreground"
-                    disabled={isProcessing}
-                  >
-                    Clear all
-                  </button>
-                </div>
-                <div className="flex flex-wrap gap-2">
-                  {selectedImages.map((image) => (
-                    <div
-                      key={image.id}
-                      className="relative group rounded-md border border-muted bg-muted/50 p-2 flex items-center space-x-2"
-                    >
-                      {/* Image thumbnail */}
-                      <div className="w-8 h-8 rounded overflow-hidden bg-muted flex-shrink-0">
-                        <img
-                          src={image.data}
-                          alt={image.filename}
-                          className="w-full h-full object-cover"
-                        />
-                      </div>
-                      {/* Image info */}
-                      <div className="min-w-0 flex-1">
-                        <p className="text-xs font-medium text-foreground truncate">
-                          {image.filename}
-                        </p>
-                        <p className="text-xs text-muted-foreground">
-                          {formatFileSize(image.size)}
-                        </p>
-                      </div>
-                      {/* Remove button */}
-                      <button
-                        onClick={() => removeImage(image.id)}
-                        className="opacity-0 group-hover:opacity-100 transition-opacity p-1 rounded-full hover:bg-destructive hover:text-destructive-foreground text-muted-foreground"
-                        disabled={isProcessing}
-                      >
-                        <X className="h-3 w-3" />
-                      </button>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            )}
+            {/* Keyboard hint */}
+            <p className="text-[11px] text-muted-foreground mt-2 text-center">
+              Press{" "}
+              <kbd className="px-1.5 py-0.5 bg-muted rounded text-[10px] font-medium">
+                Enter
+              </kbd>{" "}
+              to send
+            </p>
           </div>
         )}
       </div>

apps/app/src/components/views/analysis-view.tsx

@@ -345,6 +345,7 @@ export function AnalysisView() {
       const techStack = detectTechStack();
 
       // Generate the spec content
+      // Note: Must follow XML format as defined in apps/server/src/lib/app-spec-format.ts
       const specContent = `<project_specification>
   <project_name>${projectName}</project_name>
 

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

@@ -0,0 +1,171 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { ImageIcon, Archive, Minimize2, Square, Maximize2, History, Trash2, Layout } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { useAppStore } from "@/store/app-store";
+
+interface BoardControlsProps {
+  isMounted: boolean;
+  onShowBoardBackground: () => void;
+  onShowCompletedModal: () => void;
+  completedCount: number;
+  kanbanCardDetailLevel: "minimal" | "standard" | "detailed";
+  onDetailLevelChange: (level: "minimal" | "standard" | "detailed") => void;
+}
+
+export function BoardControls({
+  isMounted,
+  onShowBoardBackground,
+  onShowCompletedModal,
+  completedCount,
+  kanbanCardDetailLevel,
+  onDetailLevelChange,
+}: BoardControlsProps) {
+  const { getEffectiveTheme } = useAppStore();
+  const effectiveTheme = getEffectiveTheme();
+  const isCleanTheme = effectiveTheme === "clean";
+
+  if (!isMounted) return null;
+
+  if (isCleanTheme) {
+    return (
+      <div className="flex items-center gap-2 ml-6">
+        <button 
+          className="p-2.5 glass rounded-xl text-slate-500 hover:text-white transition" 
+          onClick={onShowCompletedModal}
+        >
+          <History className="w-[18px] h-[18px]" />
+        </button>
+        <button className="p-2.5 glass rounded-xl text-slate-500 hover:text-white transition">
+          <Trash2 className="w-[18px] h-[18px]" />
+        </button>
+        <div className="w-px h-6 bg-white/10 mx-1"></div>
+        <button 
+          className="p-2.5 glass rounded-xl text-slate-500 hover:text-white transition" 
+          onClick={onShowBoardBackground}
+        >
+          <Maximize2 className="w-[18px] h-[18px]" />
+        </button>
+        <button 
+          className="p-2.5 glass rounded-xl text-slate-500 hover:text-white transition" 
+          onClick={() => onDetailLevelChange(kanbanCardDetailLevel === 'minimal' ? 'standard' : kanbanCardDetailLevel === 'standard' ? 'detailed' : 'minimal')}
+        >
+          <Layout className="w-[18px] h-[18px]" />
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <TooltipProvider>
+      <div className="flex items-center gap-2 ml-4">
+        {/* Board Background Button */}
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={onShowBoardBackground}
+              className="h-8 px-2"
+              data-testid="board-background-button"
+            >
+              <ImageIcon className="w-4 h-4" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>Board Background Settings</p>
+          </TooltipContent>
+        </Tooltip>
+
+        {/* Completed/Archived Features Button */}
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={onShowCompletedModal}
+              className="h-8 px-2 relative"
+              data-testid="completed-features-button"
+            >
+              <Archive className="w-4 h-4" />
+              {completedCount > 0 && (
+                <span className="absolute -top-1 -right-1 bg-brand-500 text-white text-[10px] font-bold rounded-full w-4 h-4 flex items-center justify-center">
+                  {completedCount > 99 ? "99+" : completedCount}
+                </span>
+              )}
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <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/app/src/components/views/board-view/board-header.tsx

@@ -0,0 +1,158 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { HotkeyButton } from "@/components/ui/hotkey-button";
+import { Slider } from "@/components/ui/slider";
+import { Play, StopCircle, Plus, Users } from "lucide-react";
+import { KeyboardShortcut } from "@/hooks/use-keyboard-shortcuts";
+import { useAppStore } from "@/store/app-store";
+
+interface BoardHeaderProps {
+  projectName: string;
+  maxConcurrency: number;
+  onConcurrencyChange: (value: number) => void;
+  isAutoModeRunning: boolean;
+  onStartAutoMode: () => void;
+  onStopAutoMode: () => void;
+  onAddFeature: () => void;
+  addFeatureShortcut: KeyboardShortcut;
+  isMounted: boolean;
+}
+
+export function BoardHeader({
+  projectName,
+  maxConcurrency,
+  onConcurrencyChange,
+  isAutoModeRunning,
+  onStartAutoMode,
+  onStopAutoMode,
+  onAddFeature,
+  addFeatureShortcut,
+  isMounted,
+}: BoardHeaderProps) {
+  const { getEffectiveTheme } = useAppStore();
+  const effectiveTheme = getEffectiveTheme();
+  const isCleanTheme = effectiveTheme === "clean";
+
+  if (isCleanTheme) {
+    return (
+      <header className="h-16 flex items-center justify-between px-8 border-b border-white/5 bg-[#0b101a]/40 backdrop-blur-md z-20 shrink-0">
+        <div>
+          <h2 className="text-lg font-bold text-white tracking-tight">Kanban Board</h2>
+          <p className="text-[10px] text-slate-500 uppercase tracking-[0.2em] font-bold mono">
+            {projectName}
+          </p>
+        </div>
+
+        <div className="flex items-center gap-5">
+          {/* Concurrency Display (Visual only to match mockup for now, or interactive if needed) */}
+          <div className="flex items-center bg-white/5 border border-white/10 rounded-full px-4 py-1.5 gap-3">
+            <Users className="w-4 h-4 text-slate-500" />
+            <div className="toggle-track">
+              <div className="toggle-thumb"></div>
+            </div>
+            <span className="mono text-xs font-bold text-slate-400">{maxConcurrency}</span>
+          </div>
+
+          {/* Auto Mode Button */}
+          {isAutoModeRunning ? (
+            <button
+              className="flex items-center gap-2 glass px-5 py-2 rounded-xl text-xs font-bold hover:bg-white/10 transition text-rose-400 border-rose-500/30"
+              onClick={onStopAutoMode}
+            >
+              <StopCircle className="w-3.5 h-3.5" /> Stop
+            </button>
+          ) : (
+            <button
+              className="flex items-center gap-2 glass px-5 py-2 rounded-xl text-xs font-bold hover:bg-white/10 transition"
+              onClick={onStartAutoMode}
+            >
+              <Play className="w-3.5 h-3.5 text-cyan-400 fill-cyan-400" /> Auto Mode
+            </button>
+          )}
+
+          {/* Add Feature Button */}
+          <button
+            className="btn-cyan px-6 py-2 rounded-xl text-xs font-black flex items-center gap-2 shadow-lg shadow-cyan-500/20"
+            onClick={onAddFeature}
+          >
+            <Plus className="w-4 h-4 stroke-[3.5px]" /> ADD FEATURE
+          </button>
+        </div>
+      </header>
+    );
+  }
+
+  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>
+      <div className="flex gap-2 items-center">
+        {/* Concurrency Slider - only show after mount to prevent hydration issues */}
+        {isMounted && (
+          <div
+            className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-secondary border border-border"
+            data-testid="concurrency-slider-container"
+          >
+            <Users className="w-4 h-4 text-muted-foreground" />
+            <Slider
+              value={[maxConcurrency]}
+              onValueChange={(value) => onConcurrencyChange(value[0])}
+              min={1}
+              max={10}
+              step={1}
+              className="w-20"
+              data-testid="concurrency-slider"
+            />
+            <span
+              className="text-sm text-muted-foreground min-w-[2ch] text-center"
+              data-testid="concurrency-value"
+            >
+              {maxConcurrency}
+            </span>
+          </div>
+        )}
+
+        {/* Auto Mode Toggle - only show after mount to prevent hydration issues */}
+        {isMounted && (
+          <>
+            {isAutoModeRunning ? (
+              <Button
+                variant="destructive"
+                size="sm"
+                onClick={onStopAutoMode}
+                data-testid="stop-auto-mode"
+              >
+                <StopCircle className="w-4 h-4 mr-2" />
+                Stop Auto Mode
+              </Button>
+            ) : (
+              <Button
+                variant="secondary"
+                size="sm"
+                onClick={onStartAutoMode}
+                data-testid="start-auto-mode"
+              >
+                <Play className="w-4 h-4 mr-2" />
+                Auto Mode
+              </Button>
+            )}
+          </>
+        )}
+
+        <HotkeyButton
+          size="sm"
+          onClick={onAddFeature}
+          hotkey={addFeatureShortcut}
+          hotkeyActive={false}
+          data-testid="add-feature-button"
+        >
+          <Plus className="w-4 h-4 mr-2" />
+          Add Feature
+        </HotkeyButton>
+      </div>
+    </div>
+  );
+}

apps/app/src/components/views/board-view/board-search-bar.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import { useRef, useEffect } from "react";
+import { Input } from "@/components/ui/input";
+import { Search, X, Loader2 } from "lucide-react";
+import { useAppStore } from "@/store/app-store";
+
+interface BoardSearchBarProps {
+  searchQuery: string;
+  onSearchChange: (query: string) => void;
+  isCreatingSpec: boolean;
+  creatingSpecProjectPath?: string;
+  currentProjectPath?: string;
+}
+
+export function BoardSearchBar({
+  searchQuery,
+  onSearchChange,
+  isCreatingSpec,
+  creatingSpecProjectPath,
+  currentProjectPath,
+}: BoardSearchBarProps) {
+  const searchInputRef = useRef<HTMLInputElement>(null);
+  const { getEffectiveTheme } = useAppStore();
+  const effectiveTheme = getEffectiveTheme();
+  const isCleanTheme = effectiveTheme === "clean";
+
+  // Focus search input when "/" is pressed
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Only focus if not typing in an input/textarea
+      if (
+        e.key === "/" &&
+        !(e.target instanceof HTMLInputElement) &&
+        !(e.target instanceof HTMLTextAreaElement)
+      ) {
+        e.preventDefault();
+        searchInputRef.current?.focus();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, []);
+
+  if (isCleanTheme) {
+    return (
+      <div className="relative flex-1 max-w-2xl group">
+        <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500 group-focus-within:text-cyan-400 transition-colors" />
+        <input
+          ref={searchInputRef}
+          type="text"
+          placeholder="Search features by keyword..."
+          value={searchQuery}
+          onChange={(e) => onSearchChange(e.target.value)}
+          className="w-full bg-white/5 border border-white/10 rounded-2xl py-2.5 pl-12 pr-12 text-sm focus:outline-none focus:border-cyan-500/50 transition-all mono"
+        />
+        <div className="absolute right-4 top-1/2 -translate-y-1/2">
+          <span className="shortcut-badge">/</span>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative max-w-md flex-1 flex items-center gap-2">
+      <div className="relative flex-1">
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground pointer-events-none" />
+        <Input
+          ref={searchInputRef}
+          type="text"
+          placeholder="Search features by keyword..."
+          value={searchQuery}
+          onChange={(e) => onSearchChange(e.target.value)}
+          className="pl-9 pr-12 border-border"
+          data-testid="kanban-search-input"
+        />
+        {searchQuery ? (
+          <button
+            onClick={() => onSearchChange("")}
+            className="absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded-sm hover:bg-accent text-muted-foreground hover:text-foreground transition-colors"
+            data-testid="kanban-search-clear"
+            aria-label="Clear search"
+          >
+            <X className="w-4 h-4" />
+          </button>
+        ) : (
+          <span
+            className="absolute right-2 top-1/2 -translate-y-1/2 px-1.5 py-0.5 text-[10px] font-mono rounded bg-brand-500/10 border border-brand-500/30 text-brand-400/70"
+            data-testid="kanban-search-hotkey"
+          >
+            /
+          </span>
+        )}
+      </div>
+      {/* Spec Creation Loading Badge */}
+      {isCreatingSpec &&
+        currentProjectPath === creatingSpecProjectPath && (
+          <div
+            className="flex items-center gap-1.5 px-2 py-1 rounded-md bg-brand-500/10 border border-brand-500/20 shrink-0"
+            title="Creating App Specification"
+            data-testid="spec-creation-badge"
+          >
+            <Loader2 className="w-3 h-3 animate-spin text-brand-500 shrink-0" />
+            <span className="text-xs font-medium text-brand-500 whitespace-nowrap">
+              Creating spec
+            </span>
+          </div>
+        )}
+    </div>
+  );
+}

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

@@ -0,0 +1,2 @@
+export { KanbanCard } from "./kanban-card";
+export { KanbanColumn } from "./kanban-column";

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

@@ -0,0 +1,198 @@
+"use client";
+
+import { memo } from "react";
+import { useDroppable } from "@dnd-kit/core";
+import { cn } from "@/lib/utils";
+import type { ReactNode } from "react";
+import { useAppStore } from "@/store/app-store";
+
+interface KanbanColumnProps {
+  id: string;
+  title: string;
+  colorClass: string;
+  count: number;
+  children: ReactNode;
+  headerAction?: ReactNode;
+  opacity?: number;
+  showBorder?: boolean;
+  hideScrollbar?: boolean;
+}
+
+export const KanbanColumn = memo(function KanbanColumn({
+  id,
+  title,
+  colorClass,
+  count,
+  children,
+  headerAction,
+  opacity = 100,
+  showBorder = true,
+  hideScrollbar = false,
+}: KanbanColumnProps) {
+  const { setNodeRef, isOver } = useDroppable({ id });
+  const { getEffectiveTheme } = useAppStore();
+  const effectiveTheme = getEffectiveTheme();
+  const isCleanTheme = effectiveTheme === "clean";
+
+  // Map column IDs to clean theme classes
+  const getColumnClasses = () => {
+    switch (id) {
+      case "in_progress":
+        return "col-in-progress";
+      case "waiting_approval":
+        return "col-waiting";
+      case "verified":
+        return "col-verified";
+      default:
+        return "";
+    }
+  };
+
+  // Map column IDs to status dot glow classes
+  const getStatusDotClasses = () => {
+    switch (id) {
+      case "in_progress":
+        return "status-dot-in-progress glow-cyan";
+      case "waiting_approval":
+        return "status-dot-waiting glow-orange";
+      case "verified":
+        return "status-dot-verified glow-green";
+      default:
+        return "";
+    }
+  };
+
+  // Clean theme column styles
+  if (isCleanTheme) {
+    const isBacklog = id === "backlog";
+    
+    // Explicitly match mockup classes for status dots
+    const getCleanStatusDotClass = () => {
+      switch (id) {
+        case "backlog":
+          return "status-dot bg-slate-600";
+        case "in_progress":
+          return "status-dot bg-cyan-400 glow-cyan";
+        case "waiting_approval":
+          return "status-dot bg-orange-500 glow-orange";
+        case "verified":
+          return "status-dot bg-emerald-500 glow-green";
+        default:
+          return "status-dot bg-slate-600";
+      }
+    };
+
+    // Explicitly match mockup classes for badges
+    const getBadgeClass = () => {
+      switch (id) {
+        case "in_progress":
+          return "mono text-[10px] bg-cyan-500/10 px-2.5 py-0.5 rounded-full text-cyan-400 border border-cyan-500/20";
+        case "verified":
+          return "mono text-[10px] bg-emerald-500/10 px-2.5 py-0.5 rounded-full text-emerald-500 border border-emerald-500/20";
+        case "backlog":
+        case "waiting_approval":
+        default:
+          return "mono text-[10px] bg-white/5 px-2.5 py-0.5 rounded-full text-slate-500 border border-white/5";
+      }
+    };
+
+    return (
+      <div
+        ref={setNodeRef}
+        className={cn(
+          "flex flex-col h-full w-80 gap-5",
+          !isBacklog && "rounded-[2.5rem] p-3",
+          getColumnClasses()
+        )}
+        data-testid={`kanban-column-${id}`}
+        data-column-id={id}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-2 shrink-0">
+          <div className="flex items-center gap-3">
+            <span className={getCleanStatusDotClass()} />
+            <h3 className={cn(
+              "text-[11px] font-black uppercase tracking-widest",
+              id === "backlog" ? "text-slate-400" :
+              id === "in_progress" ? "text-slate-200" : "text-slate-300"
+            )}>
+              {title}
+            </h3>
+            {headerAction}
+          </div>
+          
+          <span className={getBadgeClass()}>
+            {count}
+          </span>
+        </div>
+
+        {/* Content */}
+        <div
+          className={cn(
+            "flex-1 overflow-y-auto custom-scrollbar space-y-4",
+            isBacklog ? "pr-2" : "pr-1",
+            hideScrollbar && "scrollbar-hide"
+          )}
+        >
+          {children}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      ref={setNodeRef}
+      className={cn(
+        "relative flex flex-col h-full rounded-xl transition-all duration-200 w-72 clean:w-80",
+        showBorder && "border border-border/60",
+        isOver && "ring-2 ring-primary/30 ring-offset-1 ring-offset-background",
+        getColumnClasses()
+      )}
+      data-testid={`kanban-column-${id}`}
+      data-column-id={id}
+    >
+      {/* Background layer with opacity */}
+      <div
+        className={cn(
+          "absolute inset-0 rounded-xl backdrop-blur-sm transition-colors duration-200",
+          isOver ? "bg-accent/80" : "bg-card/80"
+        )}
+        style={{ opacity: opacity / 100 }}
+      />
+
+      {/* Column Header */}
+      <div
+        className={cn(
+          "relative z-10 flex items-center gap-3 px-3 py-2.5",
+          showBorder && "border-b border-border/40"
+        )}
+      >
+        <div className={cn("w-2.5 h-2.5 rounded-full shrink-0 status-dot", colorClass, getStatusDotClasses())} />
+        <h3 className="font-semibold text-sm text-foreground/90 flex-1 tracking-tight">{title}</h3>
+        {headerAction}
+        <span className="text-xs font-medium text-muted-foreground/80 bg-muted/50 px-2 py-0.5 rounded-md tabular-nums">
+          {count}
+        </span>
+      </div>
+
+      {/* Column Content */}
+      <div
+        className={cn(
+          "relative z-10 flex-1 overflow-y-auto p-2 space-y-2.5",
+          hideScrollbar &&
+            "[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]",
+          // Smooth scrolling
+          "scroll-smooth"
+        )}
+      >
+        {children}
+      </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" />
+      )}
+    </div>
+  );
+});

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

@@ -0,0 +1,22 @@
+import { Feature } from "@/store/app-store";
+
+export type ColumnId = Feature["status"];
+
+export const COLUMNS: { id: ColumnId; title: string; colorClass: string }[] = [
+  { id: "backlog", title: "Backlog", colorClass: "bg-[var(--status-backlog)]" },
+  {
+    id: "in_progress",
+    title: "In Progress",
+    colorClass: "bg-[var(--status-in-progress)]",
+  },
+  {
+    id: "waiting_approval",
+    title: "Waiting Approval",
+    colorClass: "bg-[var(--status-waiting)]",
+  },
+  {
+    id: "verified",
+    title: "Verified",
+    colorClass: "bg-[var(--status-success)]",
+  },
+];

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

@@ -0,0 +1,511 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { Button } from "@/components/ui/button";
+import { HotkeyButton } from "@/components/ui/hotkey-button";
+import { Label } from "@/components/ui/label";
+import { CategoryAutocomplete } from "@/components/ui/category-autocomplete";
+import { BranchAutocomplete } from "@/components/ui/branch-autocomplete";
+import {
+  DescriptionImageDropZone,
+  FeatureImagePath as DescriptionImagePath,
+  ImagePreviewMap,
+} from "@/components/ui/description-image-dropzone";
+import {
+  MessageSquare,
+  Settings2,
+  SlidersHorizontal,
+  FlaskConical,
+  Sparkles,
+  ChevronDown,
+} from "lucide-react";
+import { toast } from "sonner";
+import { getElectronAPI } from "@/lib/electron";
+import { modelSupportsThinking } from "@/lib/utils";
+import {
+  useAppStore,
+  AgentModel,
+  ThinkingLevel,
+  FeatureImage,
+  AIProfile,
+  PlanningMode,
+} from "@/store/app-store";
+import {
+  ModelSelector,
+  ThinkingLevelSelector,
+  ProfileQuickSelect,
+  TestingTabContent,
+  PrioritySelector,
+  PlanningModeSelector,
+} from "../shared";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+interface AddFeatureDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onAdd: (feature: {
+    category: string;
+    description: string;
+    steps: string[];
+    images: FeatureImage[];
+    imagePaths: DescriptionImagePath[];
+    skipTests: boolean;
+    model: AgentModel;
+    thinkingLevel: ThinkingLevel;
+    branchName: string;
+    priority: number;
+    planningMode: PlanningMode;
+    requirePlanApproval: boolean;
+  }) => void;
+  categorySuggestions: string[];
+  branchSuggestions: string[];
+  defaultSkipTests: boolean;
+  defaultBranch?: string;
+  isMaximized: boolean;
+  showProfilesOnly: boolean;
+  aiProfiles: AIProfile[];
+}
+
+export function AddFeatureDialog({
+  open,
+  onOpenChange,
+  onAdd,
+  categorySuggestions,
+  branchSuggestions,
+  defaultSkipTests,
+  defaultBranch = "main",
+  isMaximized,
+  showProfilesOnly,
+  aiProfiles,
+}: AddFeatureDialogProps) {
+  const [newFeature, setNewFeature] = useState({
+    category: "",
+    description: "",
+    steps: [""],
+    images: [] as FeatureImage[],
+    imagePaths: [] as DescriptionImagePath[],
+    skipTests: false,
+    model: "opus" as AgentModel,
+    thinkingLevel: "none" as ThinkingLevel,
+    branchName: "main",
+    priority: 2 as number, // Default to medium priority
+  });
+  const [newFeaturePreviewMap, setNewFeaturePreviewMap] =
+    useState<ImagePreviewMap>(() => new Map());
+  const [showAdvancedOptions, setShowAdvancedOptions] = useState(false);
+  const [descriptionError, setDescriptionError] = useState(false);
+  const [isEnhancing, setIsEnhancing] = useState(false);
+  const [enhancementMode, setEnhancementMode] = useState<
+    "improve" | "technical" | "simplify" | "acceptance"
+  >("improve");
+  const [planningMode, setPlanningMode] = useState<PlanningMode>('skip');
+  const [requirePlanApproval, setRequirePlanApproval] = useState(false);
+
+  // Get enhancement model, planning mode defaults, and worktrees setting from store
+  const { enhancementModel, defaultPlanningMode, defaultRequirePlanApproval, useWorktrees } = useAppStore();
+
+  // Sync defaults when dialog opens
+  useEffect(() => {
+    if (open) {
+      setNewFeature((prev) => ({
+        ...prev,
+        skipTests: defaultSkipTests,
+        branchName: defaultBranch,
+      }));
+      setPlanningMode(defaultPlanningMode);
+      setRequirePlanApproval(defaultRequirePlanApproval);
+    }
+  }, [open, defaultSkipTests, defaultBranch, defaultPlanningMode, defaultRequirePlanApproval]);
+
+  const handleAdd = () => {
+    if (!newFeature.description.trim()) {
+      setDescriptionError(true);
+      return;
+    }
+
+    const category = newFeature.category || "Uncategorized";
+    const selectedModel = newFeature.model;
+    const normalizedThinking = modelSupportsThinking(selectedModel)
+      ? newFeature.thinkingLevel
+      : "none";
+
+    onAdd({
+      category,
+      description: newFeature.description,
+      steps: newFeature.steps.filter((s) => s.trim()),
+      images: newFeature.images,
+      imagePaths: newFeature.imagePaths,
+      skipTests: newFeature.skipTests,
+      model: selectedModel,
+      thinkingLevel: normalizedThinking,
+      branchName: newFeature.branchName,
+      priority: newFeature.priority,
+      planningMode,
+      requirePlanApproval,
+    });
+
+    // Reset form
+    setNewFeature({
+      category: "",
+      description: "",
+      steps: [""],
+      images: [],
+      imagePaths: [],
+      skipTests: defaultSkipTests,
+      model: "opus",
+      priority: 2,
+      thinkingLevel: "none",
+      branchName: defaultBranch,
+    });
+    setPlanningMode(defaultPlanningMode);
+    setRequirePlanApproval(defaultRequirePlanApproval);
+    setNewFeaturePreviewMap(new Map());
+    setShowAdvancedOptions(false);
+    setDescriptionError(false);
+    onOpenChange(false);
+  };
+
+  const handleDialogClose = (open: boolean) => {
+    onOpenChange(open);
+    if (!open) {
+      setNewFeaturePreviewMap(new Map());
+      setShowAdvancedOptions(false);
+      setDescriptionError(false);
+    }
+  };
+
+  const handleEnhanceDescription = async () => {
+    if (!newFeature.description.trim() || isEnhancing) return;
+
+    setIsEnhancing(true);
+    try {
+      const api = getElectronAPI();
+      const result = await api.enhancePrompt?.enhance(
+        newFeature.description,
+        enhancementMode,
+        enhancementModel
+      );
+
+      if (result?.success && result.enhancedText) {
+        const enhancedText = result.enhancedText;
+        setNewFeature((prev) => ({ ...prev, description: enhancedText }));
+        toast.success("Description enhanced!");
+      } else {
+        toast.error(result?.error || "Failed to enhance description");
+      }
+    } catch (error) {
+      console.error("Enhancement failed:", error);
+      toast.error("Failed to enhance description");
+    } finally {
+      setIsEnhancing(false);
+    }
+  };
+
+  const handleModelSelect = (model: AgentModel) => {
+    setNewFeature({
+      ...newFeature,
+      model,
+      thinkingLevel: modelSupportsThinking(model)
+        ? newFeature.thinkingLevel
+        : "none",
+    });
+  };
+
+  const handleProfileSelect = (
+    model: AgentModel,
+    thinkingLevel: ThinkingLevel
+  ) => {
+    setNewFeature({
+      ...newFeature,
+      model,
+      thinkingLevel,
+    });
+  };
+
+  const newModelAllowsThinking = modelSupportsThinking(newFeature.model);
+
+  return (
+    <Dialog open={open} onOpenChange={handleDialogClose}>
+      <DialogContent
+        compact={!isMaximized}
+        data-testid="add-feature-dialog"
+        onPointerDownOutside={(e: CustomEvent) => {
+          const target = e.target as HTMLElement;
+          if (target.closest('[data-testid="category-autocomplete-list"]')) {
+            e.preventDefault();
+          }
+        }}
+        onInteractOutside={(e: CustomEvent) => {
+          const target = e.target as HTMLElement;
+          if (target.closest('[data-testid="category-autocomplete-list"]')) {
+            e.preventDefault();
+          }
+        }}
+      >
+        <DialogHeader>
+          <DialogTitle>Add New Feature</DialogTitle>
+          <DialogDescription>
+            Create a new feature card for the Kanban board.
+          </DialogDescription>
+        </DialogHeader>
+        <Tabs
+          defaultValue="prompt"
+          className="py-4 flex-1 min-h-0 flex flex-col"
+        >
+          <TabsList className="w-full grid grid-cols-3 mb-4">
+            <TabsTrigger value="prompt" data-testid="tab-prompt">
+              <MessageSquare className="w-4 h-4 mr-2" />
+              Prompt
+            </TabsTrigger>
+            <TabsTrigger value="model" data-testid="tab-model">
+              <Settings2 className="w-4 h-4 mr-2" />
+              Model
+            </TabsTrigger>
+            <TabsTrigger value="options" data-testid="tab-options">
+              <SlidersHorizontal className="w-4 h-4 mr-2" />
+              Options
+            </TabsTrigger>
+          </TabsList>
+
+          {/* Prompt Tab */}
+          <TabsContent
+            value="prompt"
+            className="space-y-4 overflow-y-auto cursor-default"
+          >
+            <div className="space-y-2">
+              <Label htmlFor="description">Description</Label>
+              <DescriptionImageDropZone
+                value={newFeature.description}
+                onChange={(value) => {
+                  setNewFeature({ ...newFeature, description: value });
+                  if (value.trim()) {
+                    setDescriptionError(false);
+                  }
+                }}
+                images={newFeature.imagePaths}
+                onImagesChange={(images) =>
+                  setNewFeature({ ...newFeature, imagePaths: images })
+                }
+                placeholder="Describe the feature..."
+                previewMap={newFeaturePreviewMap}
+                onPreviewMapChange={setNewFeaturePreviewMap}
+                autoFocus
+                error={descriptionError}
+              />
+            </div>
+            <div className="flex w-fit items-center gap-3 select-none cursor-default">
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="w-[200px] justify-between"
+                  >
+                    {enhancementMode === "improve" && "Improve Clarity"}
+                    {enhancementMode === "technical" && "Add Technical Details"}
+                    {enhancementMode === "simplify" && "Simplify"}
+                    {enhancementMode === "acceptance" &&
+                      "Add Acceptance Criteria"}
+                    <ChevronDown className="w-4 h-4 ml-2" />
+                  </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="outline"
+                size="sm"
+                onClick={handleEnhanceDescription}
+                disabled={!newFeature.description.trim() || isEnhancing}
+                loading={isEnhancing}
+              >
+                <Sparkles className="w-4 h-4 mr-2" />
+                Enhance with AI
+              </Button>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="category">Category (optional)</Label>
+              <CategoryAutocomplete
+                value={newFeature.category}
+                onChange={(value) =>
+                  setNewFeature({ ...newFeature, category: value })
+                }
+                suggestions={categorySuggestions}
+                placeholder="e.g., Core, UI, API"
+                data-testid="feature-category-input"
+              />
+            </div>
+            {useWorktrees && (
+              <div className="space-y-2">
+                <Label htmlFor="branch">Target Branch</Label>
+                <BranchAutocomplete
+                  value={newFeature.branchName}
+                  onChange={(value) =>
+                    setNewFeature({ ...newFeature, branchName: value })
+                  }
+                  branches={branchSuggestions}
+                  placeholder="Select or create branch..."
+                  data-testid="feature-branch-input"
+                />
+                <p className="text-xs text-muted-foreground">
+                  Work will be done in this branch. A worktree will be created if
+                  needed.
+                </p>
+              </div>
+            )}
+
+            {/* Priority Selector */}
+            <PrioritySelector
+              selectedPriority={newFeature.priority}
+              onPrioritySelect={(priority) =>
+                setNewFeature({ ...newFeature, priority })
+              }
+              testIdPrefix="priority"
+            />
+          </TabsContent>
+
+          {/* Model Tab */}
+          <TabsContent
+            value="model"
+            className="space-y-4 overflow-y-auto cursor-default"
+          >
+            {/* Show Advanced Options Toggle */}
+            {showProfilesOnly && (
+              <div className="flex items-center justify-between p-3 bg-muted/30 rounded-lg border border-border">
+                <div className="space-y-1">
+                  <p className="text-sm font-medium text-foreground">
+                    Simple Mode Active
+                  </p>
+                  <p className="text-xs text-muted-foreground">
+                    Only showing AI profiles. Advanced model tweaking is hidden.
+                  </p>
+                </div>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setShowAdvancedOptions(!showAdvancedOptions)}
+                  data-testid="show-advanced-options-toggle"
+                >
+                  <Settings2 className="w-4 h-4 mr-2" />
+                  {showAdvancedOptions ? "Hide" : "Show"} Advanced
+                </Button>
+              </div>
+            )}
+
+            {/* Quick Select Profile Section */}
+            <ProfileQuickSelect
+              profiles={aiProfiles}
+              selectedModel={newFeature.model}
+              selectedThinkingLevel={newFeature.thinkingLevel}
+              onSelect={handleProfileSelect}
+              showManageLink
+              onManageLinkClick={() => {
+                onOpenChange(false);
+                useAppStore.getState().setCurrentView("profiles");
+              }}
+            />
+
+            {/* Separator */}
+            {aiProfiles.length > 0 &&
+              (!showProfilesOnly || showAdvancedOptions) && (
+                <div className="border-t border-border" />
+              )}
+
+            {/* Claude Models Section */}
+            {(!showProfilesOnly || showAdvancedOptions) && (
+              <>
+                <ModelSelector
+                  selectedModel={newFeature.model}
+                  onModelSelect={handleModelSelect}
+                />
+                {newModelAllowsThinking && (
+                  <ThinkingLevelSelector
+                    selectedLevel={newFeature.thinkingLevel}
+                    onLevelSelect={(level) =>
+                      setNewFeature({ ...newFeature, thinkingLevel: level })
+                    }
+                  />
+                )}
+              </>
+            )}
+          </TabsContent>
+
+          {/* Options Tab */}
+          <TabsContent value="options" className="space-y-4 overflow-y-auto cursor-default">
+            {/* Planning Mode Section */}
+            <PlanningModeSelector
+              mode={planningMode}
+              onModeChange={setPlanningMode}
+              requireApproval={requirePlanApproval}
+              onRequireApprovalChange={setRequirePlanApproval}
+              featureDescription={newFeature.description}
+              testIdPrefix="add-feature"
+              compact
+            />
+
+            <div className="border-t border-border my-4" />
+
+            {/* Testing Section */}
+            <TestingTabContent
+              skipTests={newFeature.skipTests}
+              onSkipTestsChange={(skipTests) =>
+                setNewFeature({ ...newFeature, skipTests })
+              }
+              steps={newFeature.steps}
+              onStepsChange={(steps) => setNewFeature({ ...newFeature, steps })}
+            />
+          </TabsContent>
+        </Tabs>
+        <DialogFooter>
+          <Button variant="ghost" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <HotkeyButton
+            onClick={handleAdd}
+            hotkey={{ key: "Enter", cmdCtrl: true }}
+            hotkeyActive={open}
+            data-testid="confirm-add-feature"
+          >
+            Add Feature
+          </HotkeyButton>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/app/src/components/views/board-view/dialogs/agent-output-modal.tsx

@@ -12,6 +12,7 @@ import { Loader2, List, FileText, GitBranch } from "lucide-react";
 import { getElectronAPI } from "@/lib/electron";
 import { LogViewer } from "@/components/ui/log-viewer";
 import { GitDiffPanel } from "@/components/ui/git-diff-panel";
+import { TaskProgressPanel } from "@/components/ui/task-progress-panel";
 import { useAppStore } from "@/store/app-store";
 import type { AutoModeEvent } from "@/types/electron";
 
@@ -99,24 +100,6 @@ export function AgentOutputModal({
     loadOutput();
   }, [open, featureId]);
 
-  // Save output to file
-  const saveOutput = async (newContent: string) => {
-    if (!projectPathRef.current) return;
-
-    const api = getElectronAPI();
-    if (!api) return;
-
-    try {
-      // Use features API - agent output is stored in features/{id}/agent-output.md
-      // We need to write it directly since there's no updateAgentOutput method
-      // The context-manager handles this on the backend, but for frontend edits we write directly
-      const outputPath = `${projectPathRef.current}/.automaker/features/${featureId}/agent-output.md`;
-      await api.writeFile(outputPath, newContent);
-    } catch (error) {
-      console.error("Failed to save output:", error);
-    }
-  };
-
   // Listen to auto mode events and update output
   useEffect(() => {
     if (!open) return;
@@ -142,7 +125,7 @@ export function AgentOutputModal({
             ? JSON.stringify(event.input, null, 2)
             : "";
           newContent = `\n🔧 Tool: ${toolName}\n${
-            toolInput ? `Input: ${toolInput}` : ""
+            toolInput ? `Input: ${toolInput}\n` : ""
           }`;
           break;
         case "auto_mode_phase":
@@ -187,6 +170,64 @@ export function AgentOutputModal({
 
           newContent = prepContent;
           break;
+        case "planning_started":
+          // Show when planning mode begins
+          if ("mode" in event && "message" in event) {
+            const modeLabel =
+              event.mode === "lite"
+                ? "Lite"
+                : event.mode === "spec"
+                ? "Spec"
+                : "Full";
+            newContent = `\n📋 Planning Mode: ${modeLabel}\n${event.message}\n`;
+          }
+          break;
+        case "plan_approval_required":
+          // Show when plan requires approval
+          if ("planningMode" in event) {
+            newContent = `\n⏸️ Plan generated - waiting for your approval...\n`;
+          }
+          break;
+        case "plan_approved":
+          // Show when plan is manually approved
+          if ("hasEdits" in event) {
+            newContent = event.hasEdits
+              ? `\n✅ Plan approved (with edits) - continuing to implementation...\n`
+              : `\n✅ Plan approved - continuing to implementation...\n`;
+          }
+          break;
+        case "plan_auto_approved":
+          // Show when plan is auto-approved
+          newContent = `\n✅ Plan auto-approved - continuing to implementation...\n`;
+          break;
+        case "plan_revision_requested":
+          // Show when user requests plan revision
+          if ("planVersion" in event) {
+            const revisionEvent = event as Extract<AutoModeEvent, { type: "plan_revision_requested" }>;
+            newContent = `\n🔄 Revising plan based on your feedback (v${revisionEvent.planVersion})...\n`;
+          }
+          break;
+        case "auto_mode_task_started":
+          // Show when a task starts
+          if ("taskId" in event && "taskDescription" in event) {
+            const taskEvent = event as Extract<AutoModeEvent, { type: "auto_mode_task_started" }>;
+            newContent = `\n▶ Starting ${taskEvent.taskId}: ${taskEvent.taskDescription}\n`;
+          }
+          break;
+        case "auto_mode_task_complete":
+          // Show task completion progress
+          if ("taskId" in event && "tasksCompleted" in event && "tasksTotal" in event) {
+            const taskEvent = event as Extract<AutoModeEvent, { type: "auto_mode_task_complete" }>;
+            newContent = `\n✓ ${taskEvent.taskId} completed (${taskEvent.tasksCompleted}/${taskEvent.tasksTotal})\n`;
+          }
+          break;
+        case "auto_mode_phase_complete":
+          // Show phase completion for full mode
+          if ("phaseNumber" in event) {
+            const phaseEvent = event as Extract<AutoModeEvent, { type: "auto_mode_phase_complete" }>;
+            newContent = `\n🏁 Phase ${phaseEvent.phaseNumber} complete\n`;
+          }
+          break;
         case "auto_mode_feature_complete":
           const emoji = event.passes ? "✅" : "⚠️";
           newContent = `\n${emoji} Task completed: ${event.message}\n`;
@@ -202,11 +243,8 @@ export function AgentOutputModal({
       }
 
       if (newContent) {
-        setOutput((prev) => {
-          const updated = prev + newContent;
-          saveOutput(updated);
-          return updated;
-        });
+        // Only update local state - server is the single source of truth for file writes
+        setOutput((prev) => prev + newContent);
       }
     });
 
@@ -309,6 +347,13 @@ export function AgentOutputModal({
           </DialogDescription>
         </DialogHeader>
 
+        {/* Task Progress Panel - shows when tasks are being executed */}
+        <TaskProgressPanel
+          featureId={featureId}
+          projectPath={projectPath}
+          className="flex-shrink-0 mx-1"
+        />
+
         {viewMode === "changes" ? (
           <div className="flex-1 min-h-[400px] max-h-[60vh] overflow-y-auto scrollbar-visible">
             {projectPath ? (

apps/app/src/components/views/board-view/dialogs/commit-worktree-dialog.tsx

@@ -0,0 +1,163 @@
+"use client";
+
+import { useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { Label } from "@/components/ui/label";
+import { GitCommit, Loader2 } from "lucide-react";
+import { getElectronAPI } from "@/lib/electron";
+import { toast } from "sonner";
+
+interface WorktreeInfo {
+  path: string;
+  branch: string;
+  isMain: boolean;
+  hasChanges?: boolean;
+  changedFilesCount?: number;
+}
+
+interface CommitWorktreeDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  worktree: WorktreeInfo | null;
+  onCommitted: () => void;
+}
+
+export function CommitWorktreeDialog({
+  open,
+  onOpenChange,
+  worktree,
+  onCommitted,
+}: CommitWorktreeDialogProps) {
+  const [message, setMessage] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleCommit = async () => {
+    if (!worktree || !message.trim()) return;
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const api = getElectronAPI();
+      if (!api?.worktree?.commit) {
+        setError("Worktree API not available");
+        return;
+      }
+      const result = await api.worktree.commit(worktree.path, message);
+
+      if (result.success && result.result) {
+        if (result.result.committed) {
+          toast.success("Changes committed", {
+            description: `Commit ${result.result.commitHash} on ${result.result.branch}`,
+          });
+          onCommitted();
+          onOpenChange(false);
+          setMessage("");
+        } else {
+          toast.info("No changes to commit", {
+            description: result.result.message,
+          });
+        }
+      } else {
+        setError(result.error || "Failed to commit changes");
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to commit");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter" && e.metaKey && !isLoading && message.trim()) {
+      handleCommit();
+    }
+  };
+
+  if (!worktree) return null;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <GitCommit className="w-5 h-5" />
+            Commit Changes
+          </DialogTitle>
+          <DialogDescription>
+            Commit changes in the{" "}
+            <code className="font-mono bg-muted px-1 rounded">
+              {worktree.branch}
+            </code>{" "}
+            worktree.
+            {worktree.changedFilesCount && (
+              <span className="ml-1">
+                ({worktree.changedFilesCount} file
+                {worktree.changedFilesCount > 1 ? "s" : ""} changed)
+              </span>
+            )}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="grid gap-4 py-4">
+          <div className="grid gap-2">
+            <Label htmlFor="commit-message">Commit Message</Label>
+            <Textarea
+              id="commit-message"
+              placeholder="Describe your changes..."
+              value={message}
+              onChange={(e) => {
+                setMessage(e.target.value);
+                setError(null);
+              }}
+              onKeyDown={handleKeyDown}
+              className="min-h-[100px] font-mono text-sm"
+              autoFocus
+            />
+            {error && <p className="text-sm text-destructive">{error}</p>}
+          </div>
+
+          <p className="text-xs text-muted-foreground">
+            Press <kbd className="px-1 py-0.5 bg-muted rounded text-xs">Cmd+Enter</kbd> to commit
+          </p>
+        </div>
+
+        <DialogFooter>
+          <Button
+            variant="ghost"
+            onClick={() => onOpenChange(false)}
+            disabled={isLoading}
+          >
+            Cancel
+          </Button>
+          <Button
+            onClick={handleCommit}
+            disabled={isLoading || !message.trim()}
+          >
+            {isLoading ? (
+              <>
+                <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                Committing...
+              </>
+            ) : (
+              <>
+                <GitCommit className="w-4 h-4 mr-2" />
+                Commit
+              </>
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/app/src/components/views/board-view/dialogs/completed-features-modal.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Card, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { ArchiveRestore, Trash2 } from "lucide-react";
+import { Feature } from "@/store/app-store";
+
+interface CompletedFeaturesModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  completedFeatures: Feature[];
+  onUnarchive: (feature: Feature) => void;
+  onDelete: (feature: Feature) => void;
+}
+
+export function CompletedFeaturesModal({
+  open,
+  onOpenChange,
+  completedFeatures,
+  onUnarchive,
+  onDelete,
+}: CompletedFeaturesModalProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        className="max-w-6xl max-h-[90vh] flex flex-col"
+        data-testid="completed-features-modal"
+      >
+        <DialogHeader>
+          <DialogTitle>Completed Features</DialogTitle>
+          <DialogDescription>
+            {completedFeatures.length === 0
+              ? "No completed features yet."
+              : `${completedFeatures.length} completed feature${
+                  completedFeatures.length > 1 ? "s" : ""
+                }`}
+          </DialogDescription>
+        </DialogHeader>
+        <div className="flex-1 overflow-y-auto py-4">
+          {completedFeatures.length === 0 ? (
+            <div className="text-center text-muted-foreground py-8">
+              <ArchiveRestore className="w-12 h-12 mx-auto mb-4 opacity-50" />
+              <p>No completed features</p>
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+              {completedFeatures.map((feature) => (
+                <Card
+                  key={feature.id}
+                  className="flex flex-col"
+                  data-testid={`completed-card-${feature.id}`}
+                >
+                  <CardHeader className="p-3 pb-2 flex-1">
+                    <CardTitle className="text-sm leading-tight line-clamp-3">
+                      {feature.description || feature.summary || feature.id}
+                    </CardTitle>
+                    <CardDescription className="text-xs mt-1 truncate">
+                      {feature.category || "Uncategorized"}
+                    </CardDescription>
+                  </CardHeader>
+                  <div className="p-3 pt-0 flex gap-2">
+                    <Button
+                      variant="secondary"
+                      size="sm"
+                      className="flex-1 h-7 text-xs"
+                      onClick={() => onUnarchive(feature)}
+                      data-testid={`unarchive-${feature.id}`}
+                    >
+                      <ArchiveRestore className="w-3 h-3 mr-1" />
+                      Restore
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-7 w-7 p-0 text-muted-foreground hover:text-destructive"
+                      onClick={() => onDelete(feature)}
+                      data-testid={`delete-completed-${feature.id}`}
+                      title="Delete"
+                    >
+                      <Trash2 className="w-4 h-4" />
+                    </Button>
+                  </div>
+                </Card>
+              ))}
+            </div>
+          )}
+        </div>
+        <DialogFooter>
+          <Button variant="ghost" onClick={() => onOpenChange(false)}>
+            Close
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/app/src/components/views/board-view/dialogs/create-branch-dialog.tsx

@@ -0,0 +1,152 @@
+"use client";
+
+import { useState, 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 { getElectronAPI } from "@/lib/electron";
+import { toast } from "sonner";
+import { GitBranchPlus, Loader2 } from "lucide-react";
+
+interface WorktreeInfo {
+  path: string;
+  branch: string;
+  isMain: boolean;
+  hasChanges?: boolean;
+  changedFilesCount?: number;
+}
+
+interface CreateBranchDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  worktree: WorktreeInfo | null;
+  onCreated: () => void;
+}
+
+export function CreateBranchDialog({
+  open,
+  onOpenChange,
+  worktree,
+  onCreated,
+}: CreateBranchDialogProps) {
+  const [branchName, setBranchName] = useState("");
+  const [isCreating, setIsCreating] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Reset state when dialog opens/closes
+  useEffect(() => {
+    if (open) {
+      setBranchName("");
+      setError(null);
+    }
+  }, [open]);
+
+  const handleCreate = async () => {
+    if (!worktree || !branchName.trim()) return;
+
+    // Basic validation
+    const invalidChars = /[\s~^:?*[\]\\]/;
+    if (invalidChars.test(branchName)) {
+      setError("Branch name contains invalid characters");
+      return;
+    }
+
+    setIsCreating(true);
+    setError(null);
+
+    try {
+      const api = getElectronAPI();
+      if (!api?.worktree?.checkoutBranch) {
+        toast.error("Branch API not available");
+        return;
+      }
+
+      const result = await api.worktree.checkoutBranch(worktree.path, branchName.trim());
+
+      if (result.success && result.result) {
+        toast.success(result.result.message);
+        onCreated();
+        onOpenChange(false);
+      } else {
+        setError(result.error || "Failed to create branch");
+      }
+    } catch (err) {
+      console.error("Create branch failed:", err);
+      setError("Failed to create branch");
+    } finally {
+      setIsCreating(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <GitBranchPlus className="w-5 h-5" />
+            Create New Branch
+          </DialogTitle>
+          <DialogDescription>
+            Create a new branch from <span className="font-mono text-foreground">{worktree?.branch || "current branch"}</span>
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="grid gap-4 py-4">
+          <div className="grid gap-2">
+            <Label htmlFor="branch-name">Branch Name</Label>
+            <Input
+              id="branch-name"
+              placeholder="feature/my-new-feature"
+              value={branchName}
+              onChange={(e) => {
+                setBranchName(e.target.value);
+                setError(null);
+              }}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && branchName.trim() && !isCreating) {
+                  handleCreate();
+                }
+              }}
+              disabled={isCreating}
+              autoFocus
+            />
+            {error && (
+              <p className="text-sm text-destructive">{error}</p>
+            )}
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            disabled={isCreating}
+          >
+            Cancel
+          </Button>
+          <Button
+            onClick={handleCreate}
+            disabled={!branchName.trim() || isCreating}
+          >
+            {isCreating ? (
+              <>
+                <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                Creating...
+              </>
+            ) : (
+              "Create Branch"
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/app/src/components/views/board-view/dialogs/create-pr-dialog.tsx

@@ -0,0 +1,375 @@
+"use client";
+
+import { useState, 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 { Textarea } from "@/components/ui/textarea";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+import { GitPullRequest, Loader2, ExternalLink } from "lucide-react";
+import { getElectronAPI } from "@/lib/electron";
+import { toast } from "sonner";
+
+interface WorktreeInfo {
+  path: string;
+  branch: string;
+  isMain: boolean;
+  hasChanges?: boolean;
+  changedFilesCount?: number;
+}
+
+interface CreatePRDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  worktree: WorktreeInfo | null;
+  onCreated: () => void;
+}
+
+export function CreatePRDialog({
+  open,
+  onOpenChange,
+  worktree,
+  onCreated,
+}: CreatePRDialogProps) {
+  const [title, setTitle] = useState("");
+  const [body, setBody] = useState("");
+  const [baseBranch, setBaseBranch] = useState("main");
+  const [commitMessage, setCommitMessage] = useState("");
+  const [isDraft, setIsDraft] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [prUrl, setPrUrl] = useState<string | null>(null);
+  const [browserUrl, setBrowserUrl] = useState<string | null>(null);
+  const [showBrowserFallback, setShowBrowserFallback] = useState(false);
+
+  // Reset state when dialog opens or worktree changes
+  useEffect(() => {
+    if (open) {
+      // Only reset form fields, not the result states (prUrl, browserUrl, showBrowserFallback)
+      // These are set by the API response and should persist until dialog closes
+      setTitle("");
+      setBody("");
+      setCommitMessage("");
+      setBaseBranch("main");
+      setIsDraft(false);
+      setError(null);
+    } else {
+      // Reset everything when dialog closes
+      setTitle("");
+      setBody("");
+      setCommitMessage("");
+      setBaseBranch("main");
+      setIsDraft(false);
+      setError(null);
+      setPrUrl(null);
+      setBrowserUrl(null);
+      setShowBrowserFallback(false);
+    }
+  }, [open, worktree?.path]);
+
+  const handleCreate = async () => {
+    if (!worktree) return;
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const api = getElectronAPI();
+      if (!api?.worktree?.createPR) {
+        setError("Worktree API not available");
+        return;
+      }
+      const result = await api.worktree.createPR(worktree.path, {
+        commitMessage: commitMessage || undefined,
+        prTitle: title || worktree.branch,
+        prBody: body || `Changes from branch ${worktree.branch}`,
+        baseBranch,
+        draft: isDraft,
+      });
+
+      if (result.success && result.result) {
+        if (result.result.prCreated && result.result.prUrl) {
+          setPrUrl(result.result.prUrl);
+          toast.success("Pull request created!", {
+            description: `PR created from ${result.result.branch}`,
+            action: {
+              label: "View PR",
+              onClick: () => window.open(result.result!.prUrl!, "_blank"),
+            },
+          });
+          onCreated();
+        } else {
+          // Branch was pushed successfully
+          const prError = result.result.prError;
+          const hasBrowserUrl = !!result.result.browserUrl;
+
+          // Check if we should show browser fallback
+          if (!result.result.prCreated && hasBrowserUrl) {
+            // If gh CLI is not available, show browser fallback UI
+            if (prError === "gh_cli_not_available" || !result.result.ghCliAvailable) {
+              setBrowserUrl(result.result.browserUrl ?? null);
+              setShowBrowserFallback(true);
+              toast.success("Branch pushed", {
+                description: result.result.committed
+                  ? `Commit ${result.result.commitHash} pushed to ${result.result.branch}`
+                  : `Branch ${result.result.branch} pushed`,
+              });
+              // Don't call onCreated() here - we want to keep the dialog open to show the browser URL
+              setIsLoading(false);
+              return; // Don't close dialog, show browser fallback UI
+            }
+
+            // gh CLI is available but failed - show error with browser option
+            if (prError) {
+              // Parse common gh CLI errors for better messages
+              let errorMessage = prError;
+              if (prError.includes("No commits between")) {
+                errorMessage = "No new commits to create PR. Make sure your branch has changes compared to the base branch.";
+              } else if (prError.includes("already exists")) {
+                errorMessage = "A pull request already exists for this branch.";
+              } else if (prError.includes("not logged in") || prError.includes("auth")) {
+                errorMessage = "GitHub CLI not authenticated. Run 'gh auth login' in terminal.";
+              }
+
+              // Show error but also provide browser option
+              setBrowserUrl(result.result.browserUrl ?? null);
+              setShowBrowserFallback(true);
+              toast.error("PR creation failed", {
+                description: errorMessage,
+                duration: 8000,
+              });
+              // Don't call onCreated() here - we want to keep the dialog open to show the browser URL
+              setIsLoading(false);
+              return;
+            }
+          }
+
+          // Show success toast for push
+          toast.success("Branch pushed", {
+            description: result.result.committed
+              ? `Commit ${result.result.commitHash} pushed to ${result.result.branch}`
+              : `Branch ${result.result.branch} pushed`,
+          });
+
+          // No browser URL available, just close
+          if (!result.result.prCreated) {
+            if (!hasBrowserUrl) {
+              toast.info("PR not created", {
+                description: "Could not determine repository URL. GitHub CLI (gh) may not be installed or authenticated.",
+                duration: 8000,
+              });
+            }
+          }
+          onCreated();
+          onOpenChange(false);
+        }
+      } else {
+        setError(result.error || "Failed to create pull request");
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to create PR");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleClose = () => {
+    onOpenChange(false);
+    // Reset state after dialog closes
+    setTimeout(() => {
+      setTitle("");
+      setBody("");
+      setCommitMessage("");
+      setBaseBranch("main");
+      setIsDraft(false);
+      setError(null);
+      setPrUrl(null);
+      setBrowserUrl(null);
+      setShowBrowserFallback(false);
+    }, 200);
+  };
+
+  if (!worktree) return null;
+
+  const shouldShowBrowserFallback = showBrowserFallback && browserUrl;
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent className="sm:max-w-[550px]">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <GitPullRequest className="w-5 h-5" />
+            Create Pull Request
+          </DialogTitle>
+          <DialogDescription>
+            Push changes and create a pull request from{" "}
+            <code className="font-mono bg-muted px-1 rounded">
+              {worktree.branch}
+            </code>
+          </DialogDescription>
+        </DialogHeader>
+
+        {prUrl ? (
+          <div className="py-6 text-center space-y-4">
+            <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-green-500/10">
+              <GitPullRequest className="w-8 h-8 text-green-500" />
+            </div>
+            <div>
+              <h3 className="text-lg font-semibold">Pull Request Created!</h3>
+              <p className="text-sm text-muted-foreground mt-1">
+                Your PR is ready for review
+              </p>
+            </div>
+            <Button
+              onClick={() => window.open(prUrl, "_blank")}
+              className="gap-2"
+            >
+              <ExternalLink className="w-4 h-4" />
+              View Pull Request
+            </Button>
+          </div>
+        ) : shouldShowBrowserFallback ? (
+          <div className="py-6 text-center space-y-4">
+            <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-blue-500/10">
+              <GitPullRequest className="w-8 h-8 text-blue-500" />
+            </div>
+            <div>
+              <h3 className="text-lg font-semibold">Branch Pushed!</h3>
+              <p className="text-sm text-muted-foreground mt-1">
+                Your changes have been pushed to GitHub.
+                <br />
+                Click below to create a pull request in your browser.
+              </p>
+            </div>
+            <div className="space-y-3">
+              <Button
+                onClick={() => {
+                  if (browserUrl) {
+                    window.open(browserUrl, "_blank");
+                  }
+                }}
+                className="gap-2 w-full"
+                size="lg"
+              >
+                <ExternalLink className="w-4 h-4" />
+                Create PR in Browser
+              </Button>
+              <div className="p-2 bg-muted rounded text-xs break-all font-mono">
+                {browserUrl}
+              </div>
+              <p className="text-xs text-muted-foreground">
+                Tip: Install the GitHub CLI (<code className="bg-muted px-1 rounded">gh</code>) to create PRs directly from the app
+              </p>
+              <DialogFooter className="mt-4">
+                <Button variant="outline" onClick={handleClose}>
+                  Close
+                </Button>
+              </DialogFooter>
+            </div>
+          </div>
+        ) : (
+          <>
+            <div className="grid gap-4 py-4">
+              {worktree.hasChanges && (
+                <div className="grid gap-2">
+                  <Label htmlFor="commit-message">
+                    Commit Message{" "}
+                    <span className="text-muted-foreground">(optional)</span>
+                  </Label>
+                  <Input
+                    id="commit-message"
+                    placeholder="Leave empty to auto-generate"
+                    value={commitMessage}
+                    onChange={(e) => setCommitMessage(e.target.value)}
+                    className="font-mono text-sm"
+                  />
+                  <p className="text-xs text-muted-foreground">
+                    {worktree.changedFilesCount} uncommitted file(s) will be
+                    committed
+                  </p>
+                </div>
+              )}
+
+              <div className="grid gap-2">
+                <Label htmlFor="pr-title">PR Title</Label>
+                <Input
+                  id="pr-title"
+                  placeholder={worktree.branch}
+                  value={title}
+                  onChange={(e) => setTitle(e.target.value)}
+                />
+              </div>
+
+              <div className="grid gap-2">
+                <Label htmlFor="pr-body">Description</Label>
+                <Textarea
+                  id="pr-body"
+                  placeholder="Describe the changes in this PR..."
+                  value={body}
+                  onChange={(e) => setBody(e.target.value)}
+                  className="min-h-[80px]"
+                />
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
+                <div className="grid gap-2">
+                  <Label htmlFor="base-branch">Base Branch</Label>
+                  <Input
+                    id="base-branch"
+                    placeholder="main"
+                    value={baseBranch}
+                    onChange={(e) => setBaseBranch(e.target.value)}
+                    className="font-mono text-sm"
+                  />
+                </div>
+                <div className="flex items-end">
+                  <div className="flex items-center space-x-2">
+                    <Checkbox
+                      id="draft"
+                      checked={isDraft}
+                      onCheckedChange={(checked) => setIsDraft(checked === true)}
+                    />
+                    <Label htmlFor="draft" className="cursor-pointer">
+                      Create as draft
+                    </Label>
+                  </div>
+                </div>
+              </div>
+
+              {error && (
+                <p className="text-sm text-destructive">{error}</p>
+              )}
+            </div>
+
+            <DialogFooter>
+              <Button variant="ghost" onClick={handleClose} disabled={isLoading}>
+                Cancel
+              </Button>
+              <Button onClick={handleCreate} disabled={isLoading}>
+                {isLoading ? (
+                  <>
+                    <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                    Creating...
+                  </>
+                ) : (
+                  <>
+                    <GitPullRequest className="w-4 h-4 mr-2" />
+                    Create PR
+                  </>
+                )}
+              </Button>
+            </DialogFooter>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,171 @@
+"use client";
+
+import { useState } 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 { GitBranch, Loader2 } from "lucide-react";
+import { getElectronAPI } from "@/lib/electron";
+import { toast } from "sonner";
+
+interface CreatedWorktreeInfo {
+  path: string;
+  branch: string;
+}
+
+interface CreateWorktreeDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  projectPath: string;
+  onCreated: (worktree: CreatedWorktreeInfo) => void;
+}
+
+export function CreateWorktreeDialog({
+  open,
+  onOpenChange,
+  projectPath,
+  onCreated,
+}: CreateWorktreeDialogProps) {
+  const [branchName, setBranchName] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleCreate = async () => {
+    if (!branchName.trim()) {
+      setError("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."
+      );
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const api = getElectronAPI();
+      if (!api?.worktree?.create) {
+        setError("Worktree API not available");
+        return;
+      }
+      const result = await api.worktree.create(projectPath, branchName);
+
+      if (result.success && result.worktree) {
+        toast.success(
+          `Worktree created for branch "${result.worktree.branch}"`,
+          {
+            description: result.worktree.isNew
+              ? "New branch created"
+              : "Using existing branch",
+          }
+        );
+        onCreated({ path: result.worktree.path, branch: result.worktree.branch });
+        onOpenChange(false);
+        setBranchName("");
+      } else {
+        setError(result.error || "Failed to create worktree");
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to create worktree");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter" && !isLoading && branchName.trim()) {
+      handleCreate();
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <GitBranch className="w-5 h-5" />
+            Create New Worktree
+          </DialogTitle>
+          <DialogDescription>
+            Create a new git worktree with its own branch. This allows you to
+            work on multiple features in parallel.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="grid gap-4 py-4">
+          <div className="grid gap-2">
+            <Label htmlFor="branch-name">Branch Name</Label>
+            <Input
+              id="branch-name"
+              placeholder="feature/my-new-feature"
+              value={branchName}
+              onChange={(e) => {
+                setBranchName(e.target.value);
+                setError(null);
+              }}
+              onKeyDown={handleKeyDown}
+              className="font-mono text-sm"
+              autoFocus
+            />
+            {error && <p className="text-sm text-destructive">{error}</p>}
+          </div>
+
+          <div className="text-xs text-muted-foreground space-y-1">
+            <p>Examples:</p>
+            <ul className="list-disc list-inside pl-2 space-y-0.5">
+              <li>
+                <code className="bg-muted px-1 rounded">feature/user-auth</code>
+              </li>
+              <li>
+                <code className="bg-muted px-1 rounded">fix/login-bug</code>
+              </li>
+              <li>
+                <code className="bg-muted px-1 rounded">hotfix/security-patch</code>
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button
+            variant="ghost"
+            onClick={() => onOpenChange(false)}
+            disabled={isLoading}
+          >
+            Cancel
+          </Button>
+          <Button
+            onClick={handleCreate}
+            disabled={isLoading || !branchName.trim()}
+          >
+            {isLoading ? (
+              <>
+                <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                Creating...
+              </>
+            ) : (
+              <>
+                <GitBranch className="w-4 h-4 mr-2" />
+                Create Worktree
+              </>
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/app/src/components/views/board-view/dialogs/delete-all-verified-dialog.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Trash2 } from "lucide-react";
+
+interface DeleteAllVerifiedDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  verifiedCount: number;
+  onConfirm: () => void;
+}
+
+export function DeleteAllVerifiedDialog({
+  open,
+  onOpenChange,
+  verifiedCount,
+  onConfirm,
+}: DeleteAllVerifiedDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent data-testid="delete-all-verified-dialog">
+        <DialogHeader>
+          <DialogTitle>Delete All Verified Features</DialogTitle>
+          <DialogDescription>
+            Are you sure you want to delete all verified features? This action
+            cannot be undone.
+            {verifiedCount > 0 && (
+              <span className="block mt-2 text-yellow-500">
+                {verifiedCount} feature(s) will be deleted.
+              </span>
+            )}
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button variant="ghost" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button variant="destructive" onClick={onConfirm} data-testid="confirm-delete-all-verified">
+            <Trash2 className="w-4 h-4 mr-2" />
+            Delete All
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/app/src/components/views/board-view/dialogs/delete-completed-feature-dialog.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Trash2 } from "lucide-react";
+import { Feature } from "@/store/app-store";
+
+interface DeleteCompletedFeatureDialogProps {
+  feature: Feature | null;
+  onClose: () => void;
+  onConfirm: () => void;
+}
+
+export function DeleteCompletedFeatureDialog({
+  feature,
+  onClose,
+  onConfirm,
+}: DeleteCompletedFeatureDialogProps) {
+  if (!feature) return null;
+
+  return (
+    <Dialog open={!!feature} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent data-testid="delete-completed-confirmation-dialog">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2 text-destructive">
+            <Trash2 className="w-5 h-5" />
+            Delete Feature
+          </DialogTitle>
+          <DialogDescription>
+            Are you sure you want to permanently delete this feature?
+            <span className="block mt-2 font-medium text-foreground">
+              &quot;{feature.description?.slice(0, 100)}
+              {(feature.description?.length ?? 0) > 100 ? "..." : ""}&quot;
+            </span>
+            <span className="block mt-2 text-destructive font-medium">
+              This action cannot be undone.
+            </span>
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button
+            variant="ghost"
+            onClick={onClose}
+            data-testid="cancel-delete-completed-button"
+          >
+            Cancel
+          </Button>
+          <Button
+            variant="destructive"
+            onClick={onConfirm}
+            data-testid="confirm-delete-completed-button"
+          >
+            <Trash2 className="w-4 h-4 mr-2" />
+            Delete
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,158 @@
+"use client";
+
+import { useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import { Loader2, Trash2, AlertTriangle } from "lucide-react";
+import { getElectronAPI } from "@/lib/electron";
+import { toast } from "sonner";
+
+interface WorktreeInfo {
+  path: string;
+  branch: string;
+  isMain: boolean;
+  hasChanges?: boolean;
+  changedFilesCount?: number;
+}
+
+interface DeleteWorktreeDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  projectPath: string;
+  worktree: WorktreeInfo | null;
+  onDeleted: (deletedWorktree: WorktreeInfo, deletedBranch: boolean) => void;
+}
+
+export function DeleteWorktreeDialog({
+  open,
+  onOpenChange,
+  projectPath,
+  worktree,
+  onDeleted,
+}: DeleteWorktreeDialogProps) {
+  const [deleteBranch, setDeleteBranch] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleDelete = async () => {
+    if (!worktree) return;
+
+    setIsLoading(true);
+    try {
+      const api = getElectronAPI();
+      if (!api?.worktree?.delete) {
+        toast.error("Worktree API not available");
+        return;
+      }
+      const result = await api.worktree.delete(
+        projectPath,
+        worktree.path,
+        deleteBranch
+      );
+
+      if (result.success) {
+        toast.success(`Worktree deleted`, {
+          description: deleteBranch
+            ? `Branch "${worktree.branch}" was also deleted`
+            : `Branch "${worktree.branch}" was kept`,
+        });
+        onDeleted(worktree, deleteBranch);
+        onOpenChange(false);
+        setDeleteBranch(false);
+      } else {
+        toast.error("Failed to delete worktree", {
+          description: result.error,
+        });
+      }
+    } catch (err) {
+      toast.error("Failed to delete worktree", {
+        description: err instanceof Error ? err.message : "Unknown error",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  if (!worktree) return null;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Trash2 className="w-5 h-5 text-destructive" />
+            Delete Worktree
+          </DialogTitle>
+          <DialogDescription className="space-y-3">
+            <span>
+              Are you sure you want to delete the worktree for branch{" "}
+              <code className="font-mono bg-muted px-1 rounded">
+                {worktree.branch}
+              </code>
+              ?
+            </span>
+
+            {worktree.hasChanges && (
+              <div className="flex items-start gap-2 p-3 rounded-md bg-yellow-500/10 border border-yellow-500/20 mt-2">
+                <AlertTriangle className="w-4 h-4 text-yellow-500 mt-0.5 flex-shrink-0" />
+                <span className="text-yellow-500 text-sm">
+                  This worktree has {worktree.changedFilesCount} uncommitted
+                  change(s). These will be lost if you proceed.
+                </span>
+              </div>
+            )}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex items-center space-x-2 py-4">
+          <Checkbox
+            id="delete-branch"
+            checked={deleteBranch}
+            onCheckedChange={(checked) => setDeleteBranch(checked === true)}
+          />
+          <Label htmlFor="delete-branch" className="text-sm cursor-pointer">
+            Also delete the branch{" "}
+            <code className="font-mono bg-muted px-1 rounded">
+              {worktree.branch}
+            </code>
+          </Label>
+        </div>
+
+        <DialogFooter>
+          <Button
+            variant="ghost"
+            onClick={() => onOpenChange(false)}
+            disabled={isLoading}
+          >
+            Cancel
+          </Button>
+          <Button
+            variant="destructive"
+            onClick={handleDelete}
+            disabled={isLoading}
+          >
+            {isLoading ? (
+              <>
+                <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                Deleting...
+              </>
+            ) : (
+              <>
+                <Trash2 className="w-4 h-4 mr-2" />
+                Delete
+              </>
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/app/src/components/views/board-view/dialogs/dependency-tree-dialog.tsx

@@ -0,0 +1,233 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Feature } from "@/store/app-store";
+import { AlertCircle, CheckCircle2, Circle } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface DependencyTreeDialogProps {
+  open: boolean;
+  onClose: () => void;
+  feature: Feature | null;
+  allFeatures: Feature[];
+}
+
+export function DependencyTreeDialog({
+  open,
+  onClose,
+  feature,
+  allFeatures,
+}: DependencyTreeDialogProps) {
+  const [dependencyTree, setDependencyTree] = useState<{
+    dependencies: Feature[];
+    dependents: Feature[];
+  }>({ dependencies: [], dependents: [] });
+
+  useEffect(() => {
+    if (!feature) return;
+
+    // Find features this depends on
+    const dependencies = (feature.dependencies || [])
+      .map((depId) => allFeatures.find((f) => f.id === depId))
+      .filter((f): f is Feature => f !== undefined);
+
+    // Find features that depend on this one
+    const dependents = allFeatures.filter((f) =>
+      f.dependencies?.includes(feature.id)
+    );
+
+    setDependencyTree({ dependencies, dependents });
+  }, [feature, allFeatures]);
+
+  if (!feature) return null;
+
+  const getStatusIcon = (status: Feature["status"]) => {
+    switch (status) {
+      case "completed":
+      case "verified":
+        return <CheckCircle2 className="w-4 h-4 text-green-500" />;
+      case "in_progress":
+      case "waiting_approval":
+        return <Circle className="w-4 h-4 text-blue-500 fill-blue-500/20" />;
+      default:
+        return <Circle className="w-4 h-4 text-muted-foreground/50" />;
+    }
+  };
+
+  const getPriorityBadge = (priority?: number) => {
+    if (!priority) return null;
+    return (
+      <span
+        className={cn(
+          "text-xs px-1.5 py-0.5 rounded font-medium",
+          priority === 1 && "bg-red-500/20 text-red-500",
+          priority === 2 && "bg-yellow-500/20 text-yellow-500",
+          priority === 3 && "bg-blue-500/20 text-blue-500"
+        )}
+      >
+        P{priority}
+      </span>
+    );
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent className="max-w-xl max-h-[80vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>Dependency Tree</DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-6 mt-4">
+          {/* Current Feature */}
+          <div className="border-2 border-primary rounded-lg p-4 bg-primary/5">
+            <div className="flex items-center gap-3 mb-2">
+              {getStatusIcon(feature.status)}
+              <h3 className="font-semibold text-sm">Current Feature</h3>
+              {getPriorityBadge(feature.priority)}
+            </div>
+            <p className="text-sm text-muted-foreground">{feature.description}</p>
+            <p className="text-xs text-muted-foreground/70 mt-2">
+              Category: {feature.category}
+            </p>
+          </div>
+
+          {/* Dependencies (what this feature needs) */}
+          <div>
+            <div className="flex items-center gap-2 mb-3">
+              <h3 className="font-semibold text-sm">
+                Dependencies ({dependencyTree.dependencies.length})
+              </h3>
+              <span className="text-xs text-muted-foreground">
+                This feature requires:
+              </span>
+            </div>
+
+            {dependencyTree.dependencies.length === 0 ? (
+              <div className="text-sm text-muted-foreground/70 italic border border-dashed rounded-lg p-4 text-center">
+                No dependencies - this feature can be started independently
+              </div>
+            ) : (
+              <div className="space-y-2">
+                {dependencyTree.dependencies.map((dep) => (
+                  <div
+                    key={dep.id}
+                    className={cn(
+                      "border rounded-lg p-3 transition-colors",
+                      dep.status === "completed" || dep.status === "verified"
+                        ? "bg-green-500/5 border-green-500/20"
+                        : "bg-muted/30 border-border"
+                    )}
+                  >
+                    <div className="flex items-center gap-3 mb-1">
+                      {getStatusIcon(dep.status)}
+                      <span className="text-sm font-medium flex-1">
+                        {dep.description.slice(0, 100)}
+                        {dep.description.length > 100 && "..."}
+                      </span>
+                      {getPriorityBadge(dep.priority)}
+                    </div>
+                    <div className="flex items-center gap-3 ml-7">
+                      <span className="text-xs text-muted-foreground">
+                        {dep.category}
+                      </span>
+                      <span
+                        className={cn(
+                          "text-xs px-2 py-0.5 rounded-full",
+                          dep.status === "completed" || dep.status === "verified"
+                            ? "bg-green-500/20 text-green-600"
+                            : dep.status === "in_progress"
+                              ? "bg-blue-500/20 text-blue-600"
+                              : "bg-muted text-muted-foreground"
+                        )}
+                      >
+                        {dep.status.replace(/_/g, " ")}
+                      </span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* Dependents (what depends on this feature) */}
+          <div>
+            <div className="flex items-center gap-2 mb-3">
+              <h3 className="font-semibold text-sm">
+                Dependents ({dependencyTree.dependents.length})
+              </h3>
+              <span className="text-xs text-muted-foreground">
+                Features blocked by this:
+              </span>
+            </div>
+
+            {dependencyTree.dependents.length === 0 ? (
+              <div className="text-sm text-muted-foreground/70 italic border border-dashed rounded-lg p-4 text-center">
+                No dependents - no other features are waiting on this one
+              </div>
+            ) : (
+              <div className="space-y-2">
+                {dependencyTree.dependents.map((dependent) => (
+                  <div
+                    key={dependent.id}
+                    className="border rounded-lg p-3 bg-muted/30"
+                  >
+                    <div className="flex items-center gap-3 mb-1">
+                      {getStatusIcon(dependent.status)}
+                      <span className="text-sm font-medium flex-1">
+                        {dependent.description.slice(0, 100)}
+                        {dependent.description.length > 100 && "..."}
+                      </span>
+                      {getPriorityBadge(dependent.priority)}
+                    </div>
+                    <div className="flex items-center gap-3 ml-7">
+                      <span className="text-xs text-muted-foreground">
+                        {dependent.category}
+                      </span>
+                      <span
+                        className={cn(
+                          "text-xs px-2 py-0.5 rounded-full",
+                          dependent.status === "completed" ||
+                            dependent.status === "verified"
+                            ? "bg-green-500/20 text-green-600"
+                            : dependent.status === "in_progress"
+                              ? "bg-blue-500/20 text-blue-600"
+                              : "bg-muted text-muted-foreground"
+                        )}
+                      >
+                        {dependent.status.replace(/_/g, " ")}
+                      </span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* Warning for incomplete dependencies */}
+          {dependencyTree.dependencies.some(
+            (d) => d.status !== "completed" && d.status !== "verified"
+          ) && (
+            <div className="flex items-start gap-3 p-3 bg-yellow-500/10 border border-yellow-500/30 rounded-lg">
+              <AlertCircle className="w-5 h-5 text-yellow-600 shrink-0 mt-0.5" />
+              <div className="text-sm">
+                <p className="font-medium text-yellow-700 dark:text-yellow-500">
+                  Incomplete Dependencies
+                </p>
+                <p className="text-yellow-600 dark:text-yellow-400 mt-1">
+                  This feature has dependencies that aren't completed yet.
+                  Consider completing them first for a smoother implementation.
+                </p>
+              </div>
+            </div>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,527 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { Button } from "@/components/ui/button";
+import { HotkeyButton } from "@/components/ui/hotkey-button";
+import { Label } from "@/components/ui/label";
+import { CategoryAutocomplete } from "@/components/ui/category-autocomplete";
+import { BranchAutocomplete } from "@/components/ui/branch-autocomplete";
+import {
+  DescriptionImageDropZone,
+  FeatureImagePath as DescriptionImagePath,
+  ImagePreviewMap,
+} from "@/components/ui/description-image-dropzone";
+import {
+  MessageSquare,
+  Settings2,
+  SlidersHorizontal,
+  FlaskConical,
+  Sparkles,
+  ChevronDown,
+  GitBranch,
+} from "lucide-react";
+import { toast } from "sonner";
+import { getElectronAPI } from "@/lib/electron";
+import { modelSupportsThinking } from "@/lib/utils";
+import {
+  Feature,
+  AgentModel,
+  ThinkingLevel,
+  AIProfile,
+  useAppStore,
+  PlanningMode,
+} from "@/store/app-store";
+import {
+  ModelSelector,
+  ThinkingLevelSelector,
+  ProfileQuickSelect,
+  TestingTabContent,
+  PrioritySelector,
+  PlanningModeSelector,
+} from "../shared";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { DependencyTreeDialog } from "./dependency-tree-dialog";
+
+interface EditFeatureDialogProps {
+  feature: Feature | null;
+  onClose: () => void;
+  onUpdate: (
+    featureId: string,
+    updates: {
+      category: string;
+      description: string;
+      steps: string[];
+      skipTests: boolean;
+      model: AgentModel;
+      thinkingLevel: ThinkingLevel;
+      imagePaths: DescriptionImagePath[];
+      branchName: string;
+      priority: number;
+      planningMode: PlanningMode;
+      requirePlanApproval: boolean;
+    }
+  ) => void;
+  categorySuggestions: string[];
+  branchSuggestions: string[];
+  isMaximized: boolean;
+  showProfilesOnly: boolean;
+  aiProfiles: AIProfile[];
+  allFeatures: Feature[];
+}
+
+export function EditFeatureDialog({
+  feature,
+  onClose,
+  onUpdate,
+  categorySuggestions,
+  branchSuggestions,
+  isMaximized,
+  showProfilesOnly,
+  aiProfiles,
+  allFeatures,
+}: EditFeatureDialogProps) {
+  const [editingFeature, setEditingFeature] = useState<Feature | null>(feature);
+  const [editFeaturePreviewMap, setEditFeaturePreviewMap] =
+    useState<ImagePreviewMap>(() => new Map());
+  const [showEditAdvancedOptions, setShowEditAdvancedOptions] = useState(false);
+  const [isEnhancing, setIsEnhancing] = useState(false);
+  const [enhancementMode, setEnhancementMode] = useState<
+    "improve" | "technical" | "simplify" | "acceptance"
+  >("improve");
+  const [showDependencyTree, setShowDependencyTree] = useState(false);
+  const [planningMode, setPlanningMode] = useState<PlanningMode>(feature?.planningMode ?? 'skip');
+  const [requirePlanApproval, setRequirePlanApproval] = useState(feature?.requirePlanApproval ?? false);
+
+  // Get enhancement model and worktrees setting from store
+  const { enhancementModel, useWorktrees } = useAppStore();
+
+  useEffect(() => {
+    setEditingFeature(feature);
+    if (feature) {
+      setPlanningMode(feature.planningMode ?? 'skip');
+      setRequirePlanApproval(feature.requirePlanApproval ?? false);
+    } else {
+      setEditFeaturePreviewMap(new Map());
+      setShowEditAdvancedOptions(false);
+    }
+  }, [feature]);
+
+  const handleUpdate = () => {
+    if (!editingFeature) return;
+
+    const selectedModel = (editingFeature.model ?? "opus") as AgentModel;
+    const normalizedThinking: ThinkingLevel = modelSupportsThinking(
+      selectedModel
+    )
+      ? editingFeature.thinkingLevel ?? "none"
+      : "none";
+
+    const updates = {
+      category: editingFeature.category,
+      description: editingFeature.description,
+      steps: editingFeature.steps,
+      skipTests: editingFeature.skipTests ?? false,
+      model: selectedModel,
+      thinkingLevel: normalizedThinking,
+      imagePaths: editingFeature.imagePaths ?? [],
+      branchName: editingFeature.branchName ?? "main",
+      priority: editingFeature.priority ?? 2,
+      planningMode,
+      requirePlanApproval,
+    };
+
+    onUpdate(editingFeature.id, updates);
+    setEditFeaturePreviewMap(new Map());
+    setShowEditAdvancedOptions(false);
+    onClose();
+  };
+
+  const handleDialogClose = (open: boolean) => {
+    if (!open) {
+      onClose();
+    }
+  };
+
+  const handleModelSelect = (model: AgentModel) => {
+    if (!editingFeature) return;
+    setEditingFeature({
+      ...editingFeature,
+      model,
+      thinkingLevel: modelSupportsThinking(model)
+        ? editingFeature.thinkingLevel
+        : "none",
+    });
+  };
+
+  const handleProfileSelect = (
+    model: AgentModel,
+    thinkingLevel: ThinkingLevel
+  ) => {
+    if (!editingFeature) return;
+    setEditingFeature({
+      ...editingFeature,
+      model,
+      thinkingLevel,
+    });
+  };
+
+  const handleEnhanceDescription = async () => {
+    if (!editingFeature?.description.trim() || isEnhancing) return;
+
+    setIsEnhancing(true);
+    try {
+      const api = getElectronAPI();
+      const result = await api.enhancePrompt?.enhance(
+        editingFeature.description,
+        enhancementMode,
+        enhancementModel
+      );
+
+      if (result?.success && result.enhancedText) {
+        const enhancedText = result.enhancedText;
+        setEditingFeature((prev) =>
+          prev ? { ...prev, description: enhancedText } : prev
+        );
+        toast.success("Description enhanced!");
+      } else {
+        toast.error(result?.error || "Failed to enhance description");
+      }
+    } catch (error) {
+      console.error("Enhancement failed:", error);
+      toast.error("Failed to enhance description");
+    } finally {
+      setIsEnhancing(false);
+    }
+  };
+
+  const editModelAllowsThinking = modelSupportsThinking(editingFeature?.model);
+
+  if (!editingFeature) {
+    return null;
+  }
+
+  return (
+    <Dialog open={!!editingFeature} onOpenChange={handleDialogClose}>
+      <DialogContent
+        compact={!isMaximized}
+        data-testid="edit-feature-dialog"
+        onPointerDownOutside={(e: CustomEvent) => {
+          const target = e.target as HTMLElement;
+          if (target.closest('[data-testid="category-autocomplete-list"]')) {
+            e.preventDefault();
+          }
+        }}
+        onInteractOutside={(e: CustomEvent) => {
+          const target = e.target as HTMLElement;
+          if (target.closest('[data-testid="category-autocomplete-list"]')) {
+            e.preventDefault();
+          }
+        }}
+      >
+        <DialogHeader>
+          <DialogTitle>Edit Feature</DialogTitle>
+          <DialogDescription>Modify the feature details.</DialogDescription>
+        </DialogHeader>
+        <Tabs
+          defaultValue="prompt"
+          className="py-4 flex-1 min-h-0 flex flex-col"
+        >
+          <TabsList className="w-full grid grid-cols-3 mb-4">
+            <TabsTrigger value="prompt" data-testid="edit-tab-prompt">
+              <MessageSquare className="w-4 h-4 mr-2" />
+              Prompt
+            </TabsTrigger>
+            <TabsTrigger value="model" data-testid="edit-tab-model">
+              <Settings2 className="w-4 h-4 mr-2" />
+              Model
+            </TabsTrigger>
+            <TabsTrigger value="options" data-testid="edit-tab-options">
+              <SlidersHorizontal className="w-4 h-4 mr-2" />
+              Options
+            </TabsTrigger>
+          </TabsList>
+
+          {/* Prompt Tab */}
+          <TabsContent
+            value="prompt"
+            className="space-y-4 overflow-y-auto cursor-default"
+          >
+            <div className="space-y-2">
+              <Label htmlFor="edit-description">Description</Label>
+              <DescriptionImageDropZone
+                value={editingFeature.description}
+                onChange={(value) =>
+                  setEditingFeature({
+                    ...editingFeature,
+                    description: value,
+                  })
+                }
+                images={editingFeature.imagePaths ?? []}
+                onImagesChange={(images) =>
+                  setEditingFeature({
+                    ...editingFeature,
+                    imagePaths: images,
+                  })
+                }
+                placeholder="Describe the feature..."
+                previewMap={editFeaturePreviewMap}
+                onPreviewMapChange={setEditFeaturePreviewMap}
+                data-testid="edit-feature-description"
+              />
+            </div>
+            <div className="flex w-fit items-center gap-3 select-none cursor-default">
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="w-[180px] justify-between"
+                  >
+                    {enhancementMode === "improve" && "Improve Clarity"}
+                    {enhancementMode === "technical" && "Add Technical Details"}
+                    {enhancementMode === "simplify" && "Simplify"}
+                    {enhancementMode === "acceptance" &&
+                      "Add Acceptance Criteria"}
+                    <ChevronDown className="w-4 h-4 ml-2" />
+                  </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="outline"
+                size="sm"
+                onClick={handleEnhanceDescription}
+                disabled={!editingFeature.description.trim() || isEnhancing}
+                loading={isEnhancing}
+              >
+                <Sparkles className="w-4 h-4 mr-2" />
+                Enhance with AI
+              </Button>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="edit-category">Category (optional)</Label>
+              <CategoryAutocomplete
+                value={editingFeature.category}
+                onChange={(value) =>
+                  setEditingFeature({
+                    ...editingFeature,
+                    category: value,
+                  })
+                }
+                suggestions={categorySuggestions}
+                placeholder="e.g., Core, UI, API"
+                data-testid="edit-feature-category"
+              />
+            </div>
+            {useWorktrees && (
+              <div className="space-y-2">
+                <Label htmlFor="edit-branch">Target Branch</Label>
+                <BranchAutocomplete
+                  value={editingFeature.branchName ?? "main"}
+                  onChange={(value) =>
+                    setEditingFeature({
+                      ...editingFeature,
+                      branchName: value,
+                    })
+                  }
+                  branches={branchSuggestions}
+                  placeholder="Select or create branch..."
+                  data-testid="edit-feature-branch"
+                  disabled={editingFeature.status !== "backlog"}
+                />
+                {editingFeature.status !== "backlog" && (
+                  <p className="text-xs text-muted-foreground">
+                    Branch cannot be changed after work has started.
+                  </p>
+                )}
+                {editingFeature.status === "backlog" && (
+                  <p className="text-xs text-muted-foreground">
+                    Work will be done in this branch. A worktree will be created
+                    if needed.
+                  </p>
+                )}
+              </div>
+            )}
+
+            {/* Priority Selector */}
+            <PrioritySelector
+              selectedPriority={editingFeature.priority ?? 2}
+              onPrioritySelect={(priority) =>
+                setEditingFeature({
+                  ...editingFeature,
+                  priority,
+                })
+              }
+              testIdPrefix="edit-priority"
+            />
+          </TabsContent>
+
+          {/* Model Tab */}
+          <TabsContent
+            value="model"
+            className="space-y-4 overflow-y-auto cursor-default"
+          >
+            {/* Show Advanced Options Toggle */}
+            {showProfilesOnly && (
+              <div className="flex items-center justify-between p-3 bg-muted/30 rounded-lg border border-border">
+                <div className="space-y-1">
+                  <p className="text-sm font-medium text-foreground">
+                    Simple Mode Active
+                  </p>
+                  <p className="text-xs text-muted-foreground">
+                    Only showing AI profiles. Advanced model tweaking is hidden.
+                  </p>
+                </div>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() =>
+                    setShowEditAdvancedOptions(!showEditAdvancedOptions)
+                  }
+                  data-testid="edit-show-advanced-options-toggle"
+                >
+                  <Settings2 className="w-4 h-4 mr-2" />
+                  {showEditAdvancedOptions ? "Hide" : "Show"} Advanced
+                </Button>
+              </div>
+            )}
+
+            {/* Quick Select Profile Section */}
+            <ProfileQuickSelect
+              profiles={aiProfiles}
+              selectedModel={editingFeature.model ?? "opus"}
+              selectedThinkingLevel={editingFeature.thinkingLevel ?? "none"}
+              onSelect={handleProfileSelect}
+              testIdPrefix="edit-profile-quick-select"
+            />
+
+            {/* Separator */}
+            {aiProfiles.length > 0 &&
+              (!showProfilesOnly || showEditAdvancedOptions) && (
+                <div className="border-t border-border" />
+              )}
+
+            {/* Claude Models Section */}
+            {(!showProfilesOnly || showEditAdvancedOptions) && (
+              <>
+                <ModelSelector
+                  selectedModel={(editingFeature.model ?? "opus") as AgentModel}
+                  onModelSelect={handleModelSelect}
+                  testIdPrefix="edit-model-select"
+                />
+                {editModelAllowsThinking && (
+                  <ThinkingLevelSelector
+                    selectedLevel={editingFeature.thinkingLevel ?? "none"}
+                    onLevelSelect={(level) =>
+                      setEditingFeature({
+                        ...editingFeature,
+                        thinkingLevel: level,
+                      })
+                    }
+                    testIdPrefix="edit-thinking-level"
+                  />
+                )}
+              </>
+            )}
+          </TabsContent>
+
+          {/* Options Tab */}
+          <TabsContent value="options" className="space-y-4 overflow-y-auto cursor-default">
+            {/* Planning Mode Section */}
+            <PlanningModeSelector
+              mode={planningMode}
+              onModeChange={setPlanningMode}
+              requireApproval={requirePlanApproval}
+              onRequireApprovalChange={setRequirePlanApproval}
+              featureDescription={editingFeature.description}
+              testIdPrefix="edit-feature"
+              compact
+            />
+
+            <div className="border-t border-border my-4" />
+
+            {/* Testing Section */}
+            <TestingTabContent
+              skipTests={editingFeature.skipTests ?? false}
+              onSkipTestsChange={(skipTests) =>
+                setEditingFeature({ ...editingFeature, skipTests })
+              }
+              steps={editingFeature.steps}
+              onStepsChange={(steps) =>
+                setEditingFeature({ ...editingFeature, steps })
+              }
+              testIdPrefix="edit"
+            />
+          </TabsContent>
+        </Tabs>
+        <DialogFooter className="sm:!justify-between">
+          <Button
+            variant="outline"
+            onClick={() => setShowDependencyTree(true)}
+            className="gap-2 h-10"
+          >
+            <GitBranch className="w-4 h-4" />
+            View Dependency Tree
+          </Button>
+          <div className="flex gap-2">
+            <Button variant="ghost" onClick={onClose}>
+              Cancel
+            </Button>
+            <HotkeyButton
+              onClick={handleUpdate}
+              hotkey={{ key: "Enter", cmdCtrl: true }}
+              hotkeyActive={!!editingFeature}
+              data-testid="confirm-edit-feature"
+            >
+              Save Changes
+            </HotkeyButton>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+
+      <DependencyTreeDialog
+        open={showDependencyTree}
+        onClose={() => setShowDependencyTree(false)}
+        feature={editingFeature}
+        allFeatures={allFeatures}
+      />
+    </Dialog>
+  );
+}

apps/app/src/components/views/board-view/dialogs/feature-suggestions-dialog.tsx

@@ -239,6 +239,7 @@ export function FeatureSuggestionsDialog({
         steps: s.steps,
         status: "backlog" as const,
         skipTests: true, // As specified, testing mode true
+        priority: s.priority, // Preserve priority from suggestion
       }));
 
       // Create each new feature using the features API

apps/app/src/components/views/board-view/dialogs/follow-up-dialog.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import { useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { HotkeyButton } from "@/components/ui/hotkey-button";
+import {
+  DescriptionImageDropZone,
+  FeatureImagePath as DescriptionImagePath,
+  ImagePreviewMap,
+} from "@/components/ui/description-image-dropzone";
+import { MessageSquare } from "lucide-react";
+import { Feature } from "@/store/app-store";
+
+interface FollowUpDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  feature: Feature | null;
+  prompt: string;
+  imagePaths: DescriptionImagePath[];
+  previewMap: ImagePreviewMap;
+  onPromptChange: (prompt: string) => void;
+  onImagePathsChange: (paths: DescriptionImagePath[]) => void;
+  onPreviewMapChange: (map: ImagePreviewMap) => void;
+  onSend: () => void;
+  isMaximized: boolean;
+}
+
+export function FollowUpDialog({
+  open,
+  onOpenChange,
+  feature,
+  prompt,
+  imagePaths,
+  previewMap,
+  onPromptChange,
+  onImagePathsChange,
+  onPreviewMapChange,
+  onSend,
+  isMaximized,
+}: FollowUpDialogProps) {
+  const handleClose = (open: boolean) => {
+    if (!open) {
+      onOpenChange(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent
+        compact={!isMaximized}
+        data-testid="follow-up-dialog"
+        onKeyDown={(e: React.KeyboardEvent) => {
+          if ((e.metaKey || e.ctrlKey) && e.key === "Enter" && prompt.trim()) {
+            e.preventDefault();
+            onSend();
+          }
+        }}
+      >
+        <DialogHeader>
+          <DialogTitle>Follow-Up Prompt</DialogTitle>
+          <DialogDescription>
+            Send additional instructions to continue working on this feature.
+            {feature && (
+              <span className="block mt-2 text-primary">
+                Feature: {feature.description.slice(0, 100)}
+                {feature.description.length > 100 ? "..." : ""}
+              </span>
+            )}
+          </DialogDescription>
+        </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>
+            <DescriptionImageDropZone
+              value={prompt}
+              onChange={onPromptChange}
+              images={imagePaths}
+              onImagesChange={onImagePathsChange}
+              placeholder="Describe what needs to be fixed or changed..."
+              previewMap={previewMap}
+              onPreviewMapChange={onPreviewMapChange}
+            />
+          </div>
+          <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.
+          </p>
+        </div>
+        <DialogFooter>
+          <Button
+            variant="ghost"
+            onClick={() => {
+              onOpenChange(false);
+            }}
+          >
+            Cancel
+          </Button>
+          <HotkeyButton
+            onClick={onSend}
+            disabled={!prompt.trim()}
+            hotkey={{ key: "Enter", cmdCtrl: true }}
+            hotkeyActive={open}
+            data-testid="confirm-follow-up"
+          >
+            <MessageSquare className="w-4 h-4 mr-2" />
+            Send Follow-Up
+          </HotkeyButton>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,9 @@
+export { AddFeatureDialog } from "./add-feature-dialog";
+export { AgentOutputModal } from "./agent-output-modal";
+export { CompletedFeaturesModal } from "./completed-features-modal";
+export { DeleteAllVerifiedDialog } from "./delete-all-verified-dialog";
+export { DeleteCompletedFeatureDialog } from "./delete-completed-feature-dialog";
+export { EditFeatureDialog } from "./edit-feature-dialog";
+export { FeatureSuggestionsDialog } from "./feature-suggestions-dialog";
+export { FollowUpDialog } from "./follow-up-dialog";
+export { PlanApprovalDialog } from "./plan-approval-dialog";

apps/app/src/components/views/board-view/dialogs/plan-approval-dialog.tsx

@@ -0,0 +1,220 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { Markdown } from "@/components/ui/markdown";
+import { Label } from "@/components/ui/label";
+import { Feature } from "@/store/app-store";
+import { Check, RefreshCw, Edit2, Eye, Loader2 } from "lucide-react";
+
+interface PlanApprovalDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  feature: Feature | null;
+  planContent: string;
+  onApprove: (editedPlan?: string) => void;
+  onReject: (feedback?: string) => void;
+  isLoading?: boolean;
+  viewOnly?: boolean;
+}
+
+export function PlanApprovalDialog({
+  open,
+  onOpenChange,
+  feature,
+  planContent,
+  onApprove,
+  onReject,
+  isLoading = false,
+  viewOnly = false,
+}: PlanApprovalDialogProps) {
+  const [isEditMode, setIsEditMode] = useState(false);
+  const [editedPlan, setEditedPlan] = useState(planContent);
+  const [showRejectFeedback, setShowRejectFeedback] = useState(false);
+  const [rejectFeedback, setRejectFeedback] = useState("");
+
+  // Reset state when dialog opens or plan content changes
+  useEffect(() => {
+    if (open) {
+      setEditedPlan(planContent);
+      setIsEditMode(false);
+      setShowRejectFeedback(false);
+      setRejectFeedback("");
+    }
+  }, [open, planContent]);
+
+  const handleApprove = () => {
+    // Only pass edited plan if it was modified
+    const wasEdited = editedPlan !== planContent;
+    onApprove(wasEdited ? editedPlan : undefined);
+  };
+
+  const handleReject = () => {
+    if (showRejectFeedback) {
+      onReject(rejectFeedback.trim() || undefined);
+    } else {
+      setShowRejectFeedback(true);
+    }
+  };
+
+  const handleCancelReject = () => {
+    setShowRejectFeedback(false);
+    setRejectFeedback("");
+  };
+
+  const handleClose = (open: boolean) => {
+    if (!open && !isLoading) {
+      onOpenChange(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent
+        className="max-w-4xl"
+        data-testid="plan-approval-dialog"
+      >
+        <DialogHeader>
+          <DialogTitle>{viewOnly ? "View Plan" : "Review Plan"}</DialogTitle>
+          <DialogDescription>
+            {viewOnly
+              ? "View the generated plan for this feature."
+              : "Review the generated plan before implementation begins."}
+            {feature && (
+              <span className="block mt-2 text-primary">
+                Feature: {feature.description.slice(0, 150)}
+                {feature.description.length > 150 ? "..." : ""}
+              </span>
+            )}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex-1 overflow-hidden flex flex-col min-h-0">
+          {/* Mode Toggle - Only show when not in viewOnly mode */}
+          {!viewOnly && (
+            <div className="flex items-center justify-between mb-3">
+              <Label className="text-sm text-muted-foreground">
+                {isEditMode ? "Edit Mode" : "View Mode"}
+              </Label>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setIsEditMode(!isEditMode)}
+                disabled={isLoading}
+              >
+                {isEditMode ? (
+                  <>
+                    <Eye className="w-4 h-4 mr-2" />
+                    View
+                  </>
+                ) : (
+                  <>
+                    <Edit2 className="w-4 h-4 mr-2" />
+                    Edit
+                  </>
+                )}
+              </Button>
+            </div>
+          )}
+
+          {/* Plan Content */}
+          <div className="flex-1 overflow-y-auto max-h-[70vh] border border-border rounded-lg">
+            {isEditMode && !viewOnly ? (
+              <Textarea
+                value={editedPlan}
+                onChange={(e) => setEditedPlan(e.target.value)}
+                className="min-h-[400px] h-full w-full border-0 rounded-lg resize-none font-mono text-sm"
+                placeholder="Enter plan content..."
+                disabled={isLoading}
+              />
+            ) : (
+              <div className="p-4 overflow-auto">
+                <Markdown>{editedPlan || "No plan content available."}</Markdown>
+              </div>
+            )}
+          </div>
+
+          {/* Revision Feedback Section - Only show when not in viewOnly mode */}
+          {showRejectFeedback && !viewOnly && (
+            <div className="mt-4 space-y-2">
+              <Label htmlFor="reject-feedback">What changes would you like?</Label>
+              <Textarea
+                id="reject-feedback"
+                value={rejectFeedback}
+                onChange={(e) => setRejectFeedback(e.target.value)}
+                placeholder="Describe the changes you'd like to see in the plan..."
+                className="min-h-[80px]"
+                disabled={isLoading}
+              />
+              <p className="text-xs text-muted-foreground">
+                Leave empty to cancel the feature, or provide feedback to regenerate the plan.
+              </p>
+            </div>
+          )}
+        </div>
+
+        <DialogFooter className="flex-shrink-0 gap-2">
+          {viewOnly ? (
+            <Button variant="ghost" onClick={() => onOpenChange(false)}>
+              Close
+            </Button>
+          ) : showRejectFeedback ? (
+            <>
+              <Button
+                variant="ghost"
+                onClick={handleCancelReject}
+                disabled={isLoading}
+              >
+                Back
+              </Button>
+              <Button
+                variant="secondary"
+                onClick={handleReject}
+                disabled={isLoading}
+              >
+                {isLoading ? (
+                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                ) : (
+                  <RefreshCw className="w-4 h-4 mr-2" />
+                )}
+                {rejectFeedback.trim() ? "Revise Plan" : "Cancel Feature"}
+              </Button>
+            </>
+          ) : (
+            <>
+              <Button
+                variant="outline"
+                onClick={handleReject}
+                disabled={isLoading}
+              >
+                <RefreshCw className="w-4 h-4 mr-2" />
+                Request Changes
+              </Button>
+              <Button
+                onClick={handleApprove}
+                disabled={isLoading}
+                className="bg-green-600 hover:bg-green-700 text-white"
+              >
+                {isLoading ? (
+                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                ) : (
+                  <Check className="w-4 h-4 mr-2" />
+                )}
+                Approve
+              </Button>
+            </>
+          )}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,10 @@
+export { useBoardFeatures } from "./use-board-features";
+export { useBoardDragDrop } from "./use-board-drag-drop";
+export { useBoardActions } from "./use-board-actions";
+export { useBoardKeyboardShortcuts } from "./use-board-keyboard-shortcuts";
+export { useBoardColumnFeatures } from "./use-board-column-features";
+export { useBoardEffects } from "./use-board-effects";
+export { useBoardBackground } from "./use-board-background";
+export { useBoardPersistence } from "./use-board-persistence";
+export { useFollowUpState } from "./use-follow-up-state";
+export { useSuggestionsState } from "./use-suggestions-state";

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

@@ -0,0 +1,900 @@
+import { useCallback } from "react";
+import {
+  Feature,
+  FeatureImage,
+  AgentModel,
+  ThinkingLevel,
+  PlanningMode,
+  useAppStore,
+} from "@/store/app-store";
+import { FeatureImagePath as DescriptionImagePath } from "@/components/ui/description-image-dropzone";
+import { getElectronAPI } from "@/lib/electron";
+import { toast } from "sonner";
+import { useAutoMode } from "@/hooks/use-auto-mode";
+import { truncateDescription } from "@/lib/utils";
+import { getBlockingDependencies } from "@/lib/dependency-resolver";
+
+interface UseBoardActionsProps {
+  currentProject: { path: string; id: string } | null;
+  features: Feature[];
+  runningAutoTasks: string[];
+  loadFeatures: () => Promise<void>;
+  persistFeatureCreate: (feature: Feature) => Promise<void>;
+  persistFeatureUpdate: (
+    featureId: string,
+    updates: Partial<Feature>
+  ) => Promise<void>;
+  persistFeatureDelete: (featureId: string) => Promise<void>;
+  saveCategory: (category: string) => Promise<void>;
+  setEditingFeature: (feature: Feature | null) => void;
+  setShowOutputModal: (show: boolean) => void;
+  setOutputFeature: (feature: Feature | null) => void;
+  followUpFeature: Feature | null;
+  followUpPrompt: string;
+  followUpImagePaths: DescriptionImagePath[];
+  setFollowUpFeature: (feature: Feature | null) => void;
+  setFollowUpPrompt: (prompt: string) => void;
+  setFollowUpImagePaths: (paths: DescriptionImagePath[]) => void;
+  setFollowUpPreviewMap: (map: Map<string, string>) => void;
+  setShowFollowUpDialog: (show: boolean) => void;
+  inProgressFeaturesForShortcuts: Feature[];
+  outputFeature: Feature | null;
+  projectPath: string | null;
+  onWorktreeCreated?: () => void;
+  currentWorktreeBranch: string | null; // Branch name of the selected worktree for filtering
+}
+
+export function useBoardActions({
+  currentProject,
+  features,
+  runningAutoTasks,
+  loadFeatures,
+  persistFeatureCreate,
+  persistFeatureUpdate,
+  persistFeatureDelete,
+  saveCategory,
+  setEditingFeature,
+  setShowOutputModal,
+  setOutputFeature,
+  followUpFeature,
+  followUpPrompt,
+  followUpImagePaths,
+  setFollowUpFeature,
+  setFollowUpPrompt,
+  setFollowUpImagePaths,
+  setFollowUpPreviewMap,
+  setShowFollowUpDialog,
+  inProgressFeaturesForShortcuts,
+  outputFeature,
+  projectPath,
+  onWorktreeCreated,
+  currentWorktreeBranch,
+}: UseBoardActionsProps) {
+  const {
+    addFeature,
+    updateFeature,
+    removeFeature,
+    moveFeature,
+    useWorktrees,
+    enableDependencyBlocking,
+  } = useAppStore();
+  const autoMode = useAutoMode();
+
+  /**
+   * Get or create the worktree path for a feature based on its branchName.
+   * - If branchName is "main" or empty, returns the project path
+   * - Otherwise, creates a worktree for that branch if needed
+   */
+  const getOrCreateWorktreeForFeature = useCallback(
+    async (feature: Feature): Promise<string | null> => {
+      if (!projectPath) return null;
+
+      const branchName = feature.branchName || "main";
+
+      // If targeting main branch, use the project path directly
+      if (branchName === "main" || branchName === "master") {
+        return projectPath;
+      }
+
+      // For other branches, create a worktree if it doesn't exist
+      try {
+        const api = getElectronAPI();
+        if (!api?.worktree?.create) {
+          console.error("[BoardActions] Worktree API not available");
+          return projectPath;
+        }
+
+        // Try to create the worktree (will return existing if already exists)
+        const result = await api.worktree.create(projectPath, branchName);
+
+        if (result.success && result.worktree) {
+          console.log(
+            `[BoardActions] Worktree ready for branch "${branchName}": ${result.worktree.path}`
+          );
+          if (result.worktree.isNew) {
+            toast.success(`Worktree created for branch "${branchName}"`, {
+              description: "A new worktree was created for this feature.",
+            });
+          }
+          return result.worktree.path;
+        } else {
+          console.error(
+            "[BoardActions] Failed to create worktree:",
+            result.error
+          );
+          toast.error("Failed to create worktree", {
+            description:
+              result.error || "Could not create worktree for this branch.",
+          });
+          return projectPath; // Fall back to project path
+        }
+      } catch (error) {
+        console.error("[BoardActions] Error creating worktree:", error);
+        toast.error("Error creating worktree", {
+          description: error instanceof Error ? error.message : "Unknown error",
+        });
+        return projectPath; // Fall back to project path
+      }
+    },
+    [projectPath]
+  );
+
+  const handleAddFeature = useCallback(
+    async (featureData: {
+      category: string;
+      description: string;
+      steps: string[];
+      images: FeatureImage[];
+      imagePaths: DescriptionImagePath[];
+      skipTests: boolean;
+      model: AgentModel;
+      thinkingLevel: ThinkingLevel;
+      branchName: string;
+      priority: number;
+      planningMode: PlanningMode;
+      requirePlanApproval: boolean;
+    }) => {
+      let worktreePath: string | undefined;
+
+      // If worktrees are enabled and a non-main branch is selected, create the worktree
+      if (useWorktrees && featureData.branchName) {
+        const branchName = featureData.branchName;
+        if (branchName !== "main" && branchName !== "master") {
+          // Create a temporary feature-like object for getOrCreateWorktreeForFeature
+          const tempFeature = { branchName } as Feature;
+          const path = await getOrCreateWorktreeForFeature(tempFeature);
+          if (path && path !== projectPath) {
+            worktreePath = path;
+            // Refresh worktree selector after creating worktree
+            onWorktreeCreated?.();
+          }
+        }
+      }
+
+      const newFeatureData = {
+        ...featureData,
+        status: "backlog" as const,
+        worktreePath,
+      };
+      const createdFeature = addFeature(newFeatureData);
+      // Must await to ensure feature exists on server before user can drag it
+      await persistFeatureCreate(createdFeature);
+      saveCategory(featureData.category);
+    },
+    [addFeature, persistFeatureCreate, saveCategory, useWorktrees, getOrCreateWorktreeForFeature, projectPath, onWorktreeCreated]
+  );
+
+  const handleUpdateFeature = useCallback(
+    async (
+      featureId: string,
+      updates: {
+        category: string;
+        description: string;
+        steps: string[];
+        skipTests: boolean;
+        model: AgentModel;
+        thinkingLevel: ThinkingLevel;
+        imagePaths: DescriptionImagePath[];
+        branchName: string;
+        priority: number;
+        planningMode?: PlanningMode;
+        requirePlanApproval?: boolean;
+      }
+    ) => {
+      // Get the current feature to check if branch is changing
+      const currentFeature = features.find((f) => f.id === featureId);
+      const currentBranch = currentFeature?.branchName || "main";
+      const newBranch = updates.branchName || "main";
+      const branchIsChanging = currentBranch !== newBranch;
+
+      let worktreePath: string | undefined;
+      let shouldClearWorktreePath = false;
+
+      // If worktrees are enabled and branch is changing to a non-main branch, create worktree
+      if (useWorktrees && branchIsChanging) {
+        if (newBranch === "main" || newBranch === "master") {
+          // Changing to main - clear the worktreePath
+          shouldClearWorktreePath = true;
+        } else {
+          // Changing to a feature branch - create worktree if needed
+          const tempFeature = { branchName: newBranch } as Feature;
+          const path = await getOrCreateWorktreeForFeature(tempFeature);
+          if (path && path !== projectPath) {
+            worktreePath = path;
+            // Refresh worktree selector after creating worktree
+            onWorktreeCreated?.();
+          }
+        }
+      }
+
+      // Build final updates with worktreePath if it was changed
+      let finalUpdates: typeof updates & { worktreePath?: string };
+      if (branchIsChanging && useWorktrees) {
+        if (shouldClearWorktreePath) {
+          // Use null to clear the value in persistence (cast to work around type system)
+          finalUpdates = { ...updates, worktreePath: null as unknown as string | undefined };
+        } else {
+          finalUpdates = { ...updates, worktreePath };
+        }
+      } else {
+        finalUpdates = updates;
+      }
+
+      updateFeature(featureId, finalUpdates);
+      persistFeatureUpdate(featureId, finalUpdates);
+      if (updates.category) {
+        saveCategory(updates.category);
+      }
+      setEditingFeature(null);
+    },
+    [updateFeature, persistFeatureUpdate, saveCategory, setEditingFeature, features, useWorktrees, getOrCreateWorktreeForFeature, projectPath, onWorktreeCreated]
+  );
+
+  const handleDeleteFeature = useCallback(
+    async (featureId: string) => {
+      const feature = features.find((f) => f.id === featureId);
+      if (!feature) return;
+
+      const isRunning = runningAutoTasks.includes(featureId);
+
+      if (isRunning) {
+        try {
+          await autoMode.stopFeature(featureId);
+          toast.success("Agent stopped", {
+            description: `Stopped and deleted: ${truncateDescription(
+              feature.description
+            )}`,
+          });
+        } catch (error) {
+          console.error("[Board] Error stopping feature before delete:", error);
+          toast.error("Failed to stop agent", {
+            description: "The feature will still be deleted.",
+          });
+        }
+      }
+
+      if (feature.imagePaths && feature.imagePaths.length > 0) {
+        try {
+          const api = getElectronAPI();
+          for (const imagePathObj of feature.imagePaths) {
+            try {
+              await api.deleteFile(imagePathObj.path);
+              console.log(`[Board] Deleted image: ${imagePathObj.path}`);
+            } catch (error) {
+              console.error(
+                `[Board] Failed to delete image ${imagePathObj.path}:`,
+                error
+              );
+            }
+          }
+        } catch (error) {
+          console.error(
+            `[Board] Error deleting images for feature ${featureId}:`,
+            error
+          );
+        }
+      }
+
+      removeFeature(featureId);
+      persistFeatureDelete(featureId);
+    },
+    [features, runningAutoTasks, autoMode, removeFeature, persistFeatureDelete]
+  );
+
+  const handleRunFeature = useCallback(
+    async (feature: Feature) => {
+      if (!currentProject) return;
+
+      try {
+        const api = getElectronAPI();
+        if (!api?.autoMode) {
+          console.error("Auto mode API not available");
+          return;
+        }
+
+        // Use the feature's assigned worktreePath (set when moving to in_progress)
+        // This ensures work happens in the correct worktree based on the feature's branchName
+        const featureWorktreePath = feature.worktreePath;
+
+        const result = await api.autoMode.runFeature(
+          currentProject.path,
+          feature.id,
+          useWorktrees,
+          featureWorktreePath || undefined
+        );
+
+        if (result.success) {
+          console.log(
+            "[Board] Feature run started successfully in worktree:",
+            featureWorktreePath || "main"
+          );
+        } else {
+          console.error("[Board] Failed to run feature:", result.error);
+          await loadFeatures();
+        }
+      } catch (error) {
+        console.error("[Board] Error running feature:", error);
+        await loadFeatures();
+      }
+    },
+    [currentProject, useWorktrees, loadFeatures]
+  );
+
+  const handleStartImplementation = useCallback(
+    async (feature: Feature) => {
+      if (!autoMode.canStartNewTask) {
+        toast.error("Concurrency limit reached", {
+          description: `You can only have ${autoMode.maxConcurrency} task${
+            autoMode.maxConcurrency > 1 ? "s" : ""
+          } running at a time. Wait for a task to complete or increase the limit.`,
+        });
+        return false;
+      }
+
+      // Check for blocking dependencies and show warning if enabled
+      if (enableDependencyBlocking) {
+        const blockingDeps = getBlockingDependencies(feature, features);
+        if (blockingDeps.length > 0) {
+          const depDescriptions = blockingDeps.map(depId => {
+            const dep = features.find(f => f.id === depId);
+            return dep ? truncateDescription(dep.description, 40) : depId;
+          }).join(", ");
+
+          toast.warning("Starting feature with incomplete dependencies", {
+            description: `This feature depends on: ${depDescriptions}`,
+          });
+        }
+      }
+
+      const updates = {
+        status: "in_progress" as const,
+        startedAt: new Date().toISOString(),
+      };
+      updateFeature(feature.id, updates);
+      // Must await to ensure feature status is persisted before starting agent
+      await persistFeatureUpdate(feature.id, updates);
+      console.log("[Board] Feature moved to in_progress, starting agent...");
+      await handleRunFeature(feature);
+      return true;
+    },
+    [autoMode, enableDependencyBlocking, features, updateFeature, persistFeatureUpdate, handleRunFeature]
+  );
+
+  const handleVerifyFeature = useCallback(
+    async (feature: Feature) => {
+      if (!currentProject) return;
+
+      try {
+        const api = getElectronAPI();
+        if (!api?.autoMode) {
+          console.error("Auto mode API not available");
+          return;
+        }
+
+        const result = await api.autoMode.verifyFeature(
+          currentProject.path,
+          feature.id
+        );
+
+        if (result.success) {
+          console.log("[Board] Feature verification started successfully");
+        } else {
+          console.error("[Board] Failed to verify feature:", result.error);
+          await loadFeatures();
+        }
+      } catch (error) {
+        console.error("[Board] Error verifying feature:", error);
+        await loadFeatures();
+      }
+    },
+    [currentProject, loadFeatures]
+  );
+
+  const handleResumeFeature = useCallback(
+    async (feature: Feature) => {
+      if (!currentProject) return;
+
+      try {
+        const api = getElectronAPI();
+        if (!api?.autoMode) {
+          console.error("Auto mode API not available");
+          return;
+        }
+
+        const result = await api.autoMode.resumeFeature(
+          currentProject.path,
+          feature.id,
+          useWorktrees
+        );
+
+        if (result.success) {
+          console.log("[Board] Feature resume started successfully");
+        } else {
+          console.error("[Board] Failed to resume feature:", result.error);
+          await loadFeatures();
+        }
+      } catch (error) {
+        console.error("[Board] Error resuming feature:", error);
+        await loadFeatures();
+      }
+    },
+    [currentProject, loadFeatures, useWorktrees]
+  );
+
+  const handleManualVerify = useCallback(
+    (feature: Feature) => {
+      moveFeature(feature.id, "verified");
+      persistFeatureUpdate(feature.id, {
+        status: "verified",
+        justFinishedAt: undefined,
+      });
+      toast.success("Feature verified", {
+        description: `Marked as verified: ${truncateDescription(
+          feature.description
+        )}`,
+      });
+    },
+    [moveFeature, persistFeatureUpdate]
+  );
+
+  const handleMoveBackToInProgress = useCallback(
+    (feature: Feature) => {
+      const updates = {
+        status: "in_progress" as const,
+        startedAt: new Date().toISOString(),
+      };
+      updateFeature(feature.id, updates);
+      persistFeatureUpdate(feature.id, updates);
+      toast.info("Feature moved back", {
+        description: `Moved back to In Progress: ${truncateDescription(
+          feature.description
+        )}`,
+      });
+    },
+    [updateFeature, persistFeatureUpdate]
+  );
+
+  const handleOpenFollowUp = useCallback(
+    (feature: Feature) => {
+      setFollowUpFeature(feature);
+      setFollowUpPrompt("");
+      setFollowUpImagePaths([]);
+      setShowFollowUpDialog(true);
+    },
+    [
+      setFollowUpFeature,
+      setFollowUpPrompt,
+      setFollowUpImagePaths,
+      setShowFollowUpDialog,
+    ]
+  );
+
+  const handleSendFollowUp = useCallback(async () => {
+    if (!currentProject || !followUpFeature || !followUpPrompt.trim()) return;
+
+    const featureId = followUpFeature.id;
+    const featureDescription = followUpFeature.description;
+    const prompt = followUpPrompt;
+
+    const api = getElectronAPI();
+    if (!api?.autoMode?.followUpFeature) {
+      console.error("Follow-up feature API not available");
+      toast.error("Follow-up not available", {
+        description: "This feature is not available in the current version.",
+      });
+      return;
+    }
+
+    const updates = {
+      status: "in_progress" as const,
+      startedAt: new Date().toISOString(),
+      justFinishedAt: undefined,
+    };
+    updateFeature(featureId, updates);
+    persistFeatureUpdate(featureId, updates);
+
+    setShowFollowUpDialog(false);
+    setFollowUpFeature(null);
+    setFollowUpPrompt("");
+    setFollowUpImagePaths([]);
+    setFollowUpPreviewMap(new Map());
+
+    toast.success("Follow-up started", {
+      description: `Continuing work on: ${truncateDescription(
+        featureDescription
+      )}`,
+    });
+
+    const imagePaths = followUpImagePaths.map((img) => img.path);
+    // Use the feature's worktreePath to ensure work happens in the correct branch
+    const featureWorktreePath = followUpFeature.worktreePath;
+    api.autoMode
+      .followUpFeature(
+        currentProject.path,
+        followUpFeature.id,
+        followUpPrompt,
+        imagePaths,
+        featureWorktreePath
+      )
+      .catch((error) => {
+        console.error("[Board] Error sending follow-up:", error);
+        toast.error("Failed to send follow-up", {
+          description:
+            error instanceof Error ? error.message : "An error occurred",
+        });
+        loadFeatures();
+      });
+  }, [
+    currentProject,
+    followUpFeature,
+    followUpPrompt,
+    followUpImagePaths,
+    updateFeature,
+    persistFeatureUpdate,
+    setShowFollowUpDialog,
+    setFollowUpFeature,
+    setFollowUpPrompt,
+    setFollowUpImagePaths,
+    setFollowUpPreviewMap,
+    loadFeatures,
+  ]);
+
+  const handleCommitFeature = useCallback(
+    async (feature: Feature) => {
+      if (!currentProject) return;
+
+      try {
+        const api = getElectronAPI();
+        if (!api?.autoMode?.commitFeature) {
+          console.error("Commit feature API not available");
+          toast.error("Commit not available", {
+            description:
+              "This feature is not available in the current version.",
+          });
+          return;
+        }
+
+        // Pass the feature's worktreePath to ensure commits happen in the correct worktree
+        const result = await api.autoMode.commitFeature(
+          currentProject.path,
+          feature.id,
+          feature.worktreePath
+        );
+
+        if (result.success) {
+          moveFeature(feature.id, "verified");
+          persistFeatureUpdate(feature.id, { status: "verified" });
+          toast.success("Feature committed", {
+            description: `Committed and verified: ${truncateDescription(
+              feature.description
+            )}`,
+          });
+          // Refresh worktree selector to update commit counts
+          onWorktreeCreated?.();
+        } else {
+          console.error("[Board] Failed to commit feature:", result.error);
+          toast.error("Failed to commit feature", {
+            description: result.error || "An error occurred",
+          });
+          await loadFeatures();
+        }
+      } catch (error) {
+        console.error("[Board] Error committing feature:", error);
+        toast.error("Failed to commit feature", {
+          description:
+            error instanceof Error ? error.message : "An error occurred",
+        });
+        await loadFeatures();
+      }
+    },
+    [
+      currentProject,
+      moveFeature,
+      persistFeatureUpdate,
+      loadFeatures,
+      onWorktreeCreated,
+    ]
+  );
+
+  const handleMergeFeature = useCallback(
+    async (feature: Feature) => {
+      if (!currentProject) return;
+
+      try {
+        const api = getElectronAPI();
+        if (!api?.worktree?.mergeFeature) {
+          console.error("Worktree API not available");
+          toast.error("Merge not available", {
+            description:
+              "This feature is not available in the current version.",
+          });
+          return;
+        }
+
+        const result = await api.worktree.mergeFeature(
+          currentProject.path,
+          feature.id
+        );
+
+        if (result.success) {
+          await loadFeatures();
+          toast.success("Feature merged", {
+            description: `Changes merged to main branch: ${truncateDescription(
+              feature.description
+            )}`,
+          });
+        } else {
+          console.error("[Board] Failed to merge feature:", result.error);
+          toast.error("Failed to merge feature", {
+            description: result.error || "An error occurred",
+          });
+        }
+      } catch (error) {
+        console.error("[Board] Error merging feature:", error);
+        toast.error("Failed to merge feature", {
+          description:
+            error instanceof Error ? error.message : "An error occurred",
+        });
+      }
+    },
+    [currentProject, loadFeatures]
+  );
+
+  const handleCompleteFeature = useCallback(
+    (feature: Feature) => {
+      const updates = {
+        status: "completed" as const,
+      };
+      updateFeature(feature.id, updates);
+      persistFeatureUpdate(feature.id, updates);
+
+      toast.success("Feature completed", {
+        description: `Archived: ${truncateDescription(feature.description)}`,
+      });
+    },
+    [updateFeature, persistFeatureUpdate]
+  );
+
+  const handleUnarchiveFeature = useCallback(
+    (feature: Feature) => {
+      const updates = {
+        status: "verified" as const,
+      };
+      updateFeature(feature.id, updates);
+      persistFeatureUpdate(feature.id, updates);
+
+      toast.success("Feature restored", {
+        description: `Moved back to verified: ${truncateDescription(
+          feature.description
+        )}`,
+      });
+    },
+    [updateFeature, persistFeatureUpdate]
+  );
+
+  const handleViewOutput = useCallback(
+    (feature: Feature) => {
+      setOutputFeature(feature);
+      setShowOutputModal(true);
+    },
+    [setOutputFeature, setShowOutputModal]
+  );
+
+  const handleOutputModalNumberKeyPress = useCallback(
+    (key: string) => {
+      const index = key === "0" ? 9 : parseInt(key, 10) - 1;
+      const targetFeature = inProgressFeaturesForShortcuts[index];
+
+      if (!targetFeature) {
+        return;
+      }
+
+      if (targetFeature.id === outputFeature?.id) {
+        setShowOutputModal(false);
+      } else {
+        setOutputFeature(targetFeature);
+      }
+    },
+    [
+      inProgressFeaturesForShortcuts,
+      outputFeature?.id,
+      setShowOutputModal,
+      setOutputFeature,
+    ]
+  );
+
+  const handleForceStopFeature = useCallback(
+    async (feature: Feature) => {
+      try {
+        await autoMode.stopFeature(feature.id);
+
+        const targetStatus =
+          feature.skipTests && feature.status === "waiting_approval"
+            ? "waiting_approval"
+            : "backlog";
+
+        if (targetStatus !== feature.status) {
+          moveFeature(feature.id, targetStatus);
+          // Must await to ensure file is written before user can restart
+          await persistFeatureUpdate(feature.id, { status: targetStatus });
+        }
+
+        toast.success("Agent stopped", {
+          description:
+            targetStatus === "waiting_approval"
+              ? `Stopped commit - returned to waiting approval: ${truncateDescription(
+                  feature.description
+                )}`
+              : `Stopped working on: ${truncateDescription(
+                  feature.description
+                )}`,
+        });
+      } catch (error) {
+        console.error("[Board] Error stopping feature:", error);
+        toast.error("Failed to stop agent", {
+          description:
+            error instanceof Error ? error.message : "An error occurred",
+        });
+      }
+    },
+    [autoMode, moveFeature, persistFeatureUpdate]
+  );
+
+  const handleStartNextFeatures = useCallback(async () => {
+    // Filter backlog features by the currently selected worktree branch
+    // This ensures "G" only starts features from the filtered list
+    const backlogFeatures = features.filter((f) => {
+      if (f.status !== "backlog") return false;
+
+      // Determine the feature's branch (default to "main" if not set)
+      const featureBranch = f.branchName || "main";
+
+      // If no worktree is selected (currentWorktreeBranch is null or main-like),
+      // show features with no branch or "main"/"master" branch
+      if (
+        !currentWorktreeBranch ||
+        currentWorktreeBranch === "main" ||
+        currentWorktreeBranch === "master"
+      ) {
+        return (
+          !f.branchName ||
+          featureBranch === "main" ||
+          featureBranch === "master"
+        );
+      }
+
+      // Otherwise, only show features matching the selected worktree branch
+      return featureBranch === currentWorktreeBranch;
+    });
+
+    const availableSlots =
+      useAppStore.getState().maxConcurrency - runningAutoTasks.length;
+
+    if (availableSlots <= 0) {
+      toast.error("Concurrency limit reached", {
+        description:
+          "Wait for a task to complete or increase the concurrency limit.",
+      });
+      return;
+    }
+
+    if (backlogFeatures.length === 0) {
+      toast.info("Backlog empty", {
+        description:
+          currentWorktreeBranch &&
+          currentWorktreeBranch !== "main" &&
+          currentWorktreeBranch !== "master"
+            ? `No features in backlog for branch "${currentWorktreeBranch}".`
+            : "No features in backlog to start.",
+      });
+      return;
+    }
+
+    // Sort by priority (lower number = higher priority, priority 1 is highest)
+    // This matches the auto mode service behavior for consistency
+    const sortedBacklog = [...backlogFeatures].sort(
+      (a, b) => (a.priority || 999) - (b.priority || 999)
+    );
+
+    // Start only one feature per keypress (user must press again for next)
+    const featuresToStart = sortedBacklog.slice(0, 1);
+
+    for (const feature of featuresToStart) {
+      // Only create worktrees if the feature is enabled
+      let worktreePath: string | null = null;
+      if (useWorktrees) {
+        // Get or create worktree based on the feature's assigned branch (same as drag-to-in-progress)
+        worktreePath = await getOrCreateWorktreeForFeature(feature);
+        if (worktreePath) {
+          await persistFeatureUpdate(feature.id, { worktreePath });
+        }
+        // Refresh worktree selector after creating worktree
+        onWorktreeCreated?.();
+      }
+      // Start the implementation
+      // Pass feature with worktreePath so handleRunFeature uses the correct path
+      await handleStartImplementation({
+        ...feature,
+        worktreePath: worktreePath || undefined,
+      });
+    }
+  }, [
+    features,
+    runningAutoTasks,
+    handleStartImplementation,
+    getOrCreateWorktreeForFeature,
+    persistFeatureUpdate,
+    onWorktreeCreated,
+    currentWorktreeBranch,
+    useWorktrees,
+  ]);
+
+  const handleDeleteAllVerified = useCallback(async () => {
+    const verifiedFeatures = features.filter((f) => f.status === "verified");
+
+    for (const feature of verifiedFeatures) {
+      const isRunning = runningAutoTasks.includes(feature.id);
+      if (isRunning) {
+        try {
+          await autoMode.stopFeature(feature.id);
+        } catch (error) {
+          console.error("[Board] Error stopping feature before delete:", error);
+        }
+      }
+      removeFeature(feature.id);
+      persistFeatureDelete(feature.id);
+    }
+
+    toast.success("All verified features deleted", {
+      description: `Deleted ${verifiedFeatures.length} feature(s).`,
+    });
+  }, [
+    features,
+    runningAutoTasks,
+    autoMode,
+    removeFeature,
+    persistFeatureDelete,
+  ]);
+
+  return {
+    handleAddFeature,
+    handleUpdateFeature,
+    handleDeleteFeature,
+    handleStartImplementation,
+    handleVerifyFeature,
+    handleResumeFeature,
+    handleManualVerify,
+    handleMoveBackToInProgress,
+    handleOpenFollowUp,
+    handleSendFollowUp,
+    handleCommitFeature,
+    handleMergeFeature,
+    handleCompleteFeature,
+    handleUnarchiveFeature,
+    handleViewOutput,
+    handleOutputModalNumberKeyPress,
+    handleForceStopFeature,
+    handleStartNextFeatures,
+    handleDeleteAllVerified,
+  };
+}

apps/app/src/components/views/board-view/hooks/use-board-background.ts

@@ -0,0 +1,47 @@
+import { useMemo } from "react";
+import { useAppStore, defaultBackgroundSettings } from "@/store/app-store";
+
+interface UseBoardBackgroundProps {
+  currentProject: { path: string; id: string } | null;
+}
+
+export function useBoardBackground({ currentProject }: UseBoardBackgroundProps) {
+  const boardBackgroundByProject = useAppStore(
+    (state) => state.boardBackgroundByProject
+  );
+
+  // Get background settings for current project
+  const backgroundSettings = useMemo(() => {
+    return (
+      (currentProject && boardBackgroundByProject[currentProject.path]) ||
+      defaultBackgroundSettings
+    );
+  }, [currentProject, boardBackgroundByProject]);
+
+  // Build background image style if image exists
+  const backgroundImageStyle = useMemo(() => {
+    if (!backgroundSettings.imagePath || !currentProject) {
+      return {};
+    }
+
+    return {
+      backgroundImage: `url(${
+        process.env.NEXT_PUBLIC_SERVER_URL || "http://localhost:3008"
+      }/api/fs/image?path=${encodeURIComponent(
+        backgroundSettings.imagePath
+      )}&projectPath=${encodeURIComponent(currentProject.path)}${
+        backgroundSettings.imageVersion
+          ? `&v=${backgroundSettings.imageVersion}`
+          : ""
+      })`,
+      backgroundSize: "cover",
+      backgroundPosition: "center",
+      backgroundRepeat: "no-repeat",
+    } as React.CSSProperties;
+  }, [backgroundSettings, currentProject]);
+
+  return {
+    backgroundSettings,
+    backgroundImageStyle,
+  };
+}

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

@@ -0,0 +1,137 @@
+import { useMemo, useCallback } from "react";
+import { Feature } from "@/store/app-store";
+import { resolveDependencies } from "@/lib/dependency-resolver";
+import { pathsEqual } from "@/lib/utils";
+
+type ColumnId = Feature["status"];
+
+interface UseBoardColumnFeaturesProps {
+  features: Feature[];
+  runningAutoTasks: string[];
+  searchQuery: string;
+  currentWorktreePath: string | null; // Currently selected worktree path
+  currentWorktreeBranch: string | null; // Branch name of the selected worktree (null = main)
+  projectPath: string | null; // Main project path (for main worktree)
+}
+
+export function useBoardColumnFeatures({
+  features,
+  runningAutoTasks,
+  searchQuery,
+  currentWorktreePath,
+  currentWorktreeBranch,
+  projectPath,
+}: UseBoardColumnFeaturesProps) {
+  // Memoize column features to prevent unnecessary re-renders
+  const columnFeaturesMap = useMemo(() => {
+    const map: Record<ColumnId, Feature[]> = {
+      backlog: [],
+      in_progress: [],
+      waiting_approval: [],
+      verified: [],
+      completed: [], // Completed features are shown in the archive modal, not as a column
+    };
+
+    // Filter features by search query (case-insensitive)
+    const normalizedQuery = searchQuery.toLowerCase().trim();
+    const filteredFeatures = normalizedQuery
+      ? features.filter(
+          (f) =>
+            f.description.toLowerCase().includes(normalizedQuery) ||
+            f.category?.toLowerCase().includes(normalizedQuery)
+        )
+      : features;
+
+    // Determine the effective worktree path and branch for filtering
+    // If currentWorktreePath is null, we're on the main worktree
+    const effectiveWorktreePath = currentWorktreePath || projectPath;
+    // Use the branch name from the selected worktree
+    // If we're selecting main (currentWorktreePath is null), currentWorktreeBranch
+    // should contain the main branch's actual name, defaulting to "main"
+    // If we're selecting a non-main worktree but can't find it, currentWorktreeBranch is null
+    // In that case, we can't do branch-based filtering, so we'll handle it specially below
+    const effectiveBranch = currentWorktreeBranch;
+
+    filteredFeatures.forEach((f) => {
+      // If feature has a running agent, always show it in "in_progress"
+      const isRunning = runningAutoTasks.includes(f.id);
+
+      // Check if feature matches the current worktree
+      // Match by worktreePath if set, OR by branchName if set
+      // Features with neither are considered unassigned (show on ALL worktrees)
+      const featureBranch = f.branchName || "main";
+      const hasWorktreeAssigned = f.worktreePath || f.branchName;
+
+      let matchesWorktree: boolean;
+      if (!hasWorktreeAssigned) {
+        // No worktree or branch assigned - show on ALL worktrees (unassigned)
+        matchesWorktree = true;
+      } else if (f.worktreePath) {
+        // Has worktreePath - match by path (use pathsEqual for cross-platform compatibility)
+        matchesWorktree = pathsEqual(f.worktreePath, effectiveWorktreePath);
+      } else if (effectiveBranch === null) {
+        // We're viewing main but branch hasn't been initialized yet
+        // (worktrees disabled or haven't loaded yet).
+        // Show features assigned to main/master branch since we're on the main worktree.
+        matchesWorktree = featureBranch === "main" || featureBranch === "master";
+      } else {
+        // Has branchName but no worktreePath - match by branch name
+        matchesWorktree = featureBranch === effectiveBranch;
+      }
+
+      if (isRunning) {
+        // Only show running tasks if they match the current worktree
+        if (matchesWorktree) {
+          map.in_progress.push(f);
+        }
+      } else {
+        // Otherwise, use the feature's status (fallback to backlog for unknown statuses)
+        const status = f.status as ColumnId;
+
+        // Filter all items by worktree, including backlog
+        // This ensures backlog items with a branch assigned only show in that branch
+        if (status === "backlog") {
+          if (matchesWorktree) {
+            map.backlog.push(f);
+          }
+        } else if (map[status]) {
+          // Only show if matches current worktree or has no worktree assigned
+          if (matchesWorktree) {
+            map[status].push(f);
+          }
+        } else {
+          // Unknown status, default to backlog
+          map.backlog.push(f);
+        }
+      }
+    });
+
+    // Apply dependency-aware sorting to backlog
+    // This ensures features appear in dependency order (dependencies before dependents)
+    // Within the same dependency level, features are sorted by priority
+    if (map.backlog.length > 0) {
+      const { orderedFeatures } = resolveDependencies(map.backlog);
+      map.backlog = orderedFeatures;
+    }
+
+    return map;
+  }, [features, runningAutoTasks, searchQuery, currentWorktreePath, currentWorktreeBranch, projectPath]);
+
+  const getColumnFeatures = useCallback(
+    (columnId: ColumnId) => {
+      return columnFeaturesMap[columnId];
+    },
+    [columnFeaturesMap]
+  );
+
+  // Memoize completed features for the archive modal
+  const completedFeatures = useMemo(() => {
+    return features.filter((f) => f.status === "completed");
+  }, [features]);
+
+  return {
+    columnFeaturesMap,
+    getColumnFeatures,
+    completedFeatures,
+  };
+}

apps/app/src/components/views/board-view/hooks/use-board-drag-drop.ts

@@ -0,0 +1,294 @@
+import { useState, useCallback } from "react";
+import { DragStartEvent, DragEndEvent } from "@dnd-kit/core";
+import { Feature } from "@/store/app-store";
+import { useAppStore } from "@/store/app-store";
+import { toast } from "sonner";
+import { COLUMNS, ColumnId } from "../constants";
+import { getElectronAPI } from "@/lib/electron";
+
+interface UseBoardDragDropProps {
+  features: Feature[];
+  currentProject: { path: string; id: string } | null;
+  runningAutoTasks: string[];
+  persistFeatureUpdate: (
+    featureId: string,
+    updates: Partial<Feature>
+  ) => Promise<void>;
+  handleStartImplementation: (feature: Feature) => Promise<boolean>;
+  projectPath: string | null; // Main project path
+  onWorktreeCreated?: () => void; // Callback when a new worktree is created
+}
+
+export function useBoardDragDrop({
+  features,
+  currentProject,
+  runningAutoTasks,
+  persistFeatureUpdate,
+  handleStartImplementation,
+  projectPath,
+  onWorktreeCreated,
+}: UseBoardDragDropProps) {
+  const [activeFeature, setActiveFeature] = useState<Feature | null>(null);
+  const { moveFeature, useWorktrees } = useAppStore();
+
+  /**
+   * Get or create the worktree path for a feature based on its branchName.
+   * - If branchName is "main" or empty, returns the project path
+   * - Otherwise, creates a worktree for that branch if needed
+   */
+  const getOrCreateWorktreeForFeature = useCallback(
+    async (feature: Feature): Promise<string | null> => {
+      if (!projectPath) return null;
+
+      const branchName = feature.branchName || "main";
+
+      // If targeting main branch, use the project path directly
+      if (branchName === "main" || branchName === "master") {
+        return projectPath;
+      }
+
+      // For other branches, create a worktree if it doesn't exist
+      try {
+        const api = getElectronAPI();
+        if (!api?.worktree?.create) {
+          console.error("[DragDrop] Worktree API not available");
+          return projectPath;
+        }
+
+        // Try to create the worktree (will return existing if already exists)
+        const result = await api.worktree.create(projectPath, branchName);
+
+        if (result.success && result.worktree) {
+          console.log(
+            `[DragDrop] Worktree ready for branch "${branchName}": ${result.worktree.path}`
+          );
+          if (result.worktree.isNew) {
+            toast.success(`Worktree created for branch "${branchName}"`, {
+              description: "A new worktree was created for this feature.",
+            });
+          }
+          return result.worktree.path;
+        } else {
+          console.error("[DragDrop] Failed to create worktree:", result.error);
+          toast.error("Failed to create worktree", {
+            description: result.error || "Could not create worktree for this branch.",
+          });
+          return projectPath; // Fall back to project path
+        }
+      } catch (error) {
+        console.error("[DragDrop] Error creating worktree:", error);
+        toast.error("Error creating worktree", {
+          description: error instanceof Error ? error.message : "Unknown error",
+        });
+        return projectPath; // Fall back to project path
+      }
+    },
+    [projectPath]
+  );
+
+  const handleDragStart = useCallback(
+    (event: DragStartEvent) => {
+      const { active } = event;
+      const feature = features.find((f) => f.id === active.id);
+      if (feature) {
+        setActiveFeature(feature);
+      }
+    },
+    [features]
+  );
+
+  const handleDragEnd = useCallback(
+    async (event: DragEndEvent) => {
+      const { active, over } = event;
+      setActiveFeature(null);
+
+      if (!over) return;
+
+      const featureId = active.id as string;
+      const overId = over.id as string;
+
+      // Find the feature being dragged
+      const draggedFeature = features.find((f) => f.id === featureId);
+      if (!draggedFeature) return;
+
+      // Check if this is a running task (non-skipTests, TDD)
+      const isRunningTask = runningAutoTasks.includes(featureId);
+
+      // Determine if dragging is allowed based on status and skipTests
+      // - Backlog items can always be dragged
+      // - waiting_approval items can always be dragged (to allow manual verification via drag)
+      // - verified items can always be dragged (to allow moving back to waiting_approval)
+      // - skipTests (non-TDD) items can be dragged between in_progress and verified
+      // - Non-skipTests (TDD) items that are in progress cannot be dragged (they are running)
+      if (
+        draggedFeature.status !== "backlog" &&
+        draggedFeature.status !== "waiting_approval" &&
+        draggedFeature.status !== "verified"
+      ) {
+        // Only allow dragging in_progress if it's a skipTests feature and not currently running
+        if (!draggedFeature.skipTests || isRunningTask) {
+          console.log(
+            "[Board] Cannot drag feature - TDD feature or currently running"
+          );
+          return;
+        }
+      }
+
+      let targetStatus: ColumnId | null = null;
+
+      // Check if we dropped on a column
+      const column = COLUMNS.find((c) => c.id === overId);
+      if (column) {
+        targetStatus = column.id;
+      } else {
+        // Dropped on another feature - find its column
+        const overFeature = features.find((f) => f.id === overId);
+        if (overFeature) {
+          targetStatus = overFeature.status;
+        }
+      }
+
+      if (!targetStatus) return;
+
+      // Same column, nothing to do
+      if (targetStatus === draggedFeature.status) return;
+
+      // Handle different drag scenarios
+      if (draggedFeature.status === "backlog") {
+        // From backlog
+        if (targetStatus === "in_progress") {
+          // Only create worktrees if the feature is enabled
+          let worktreePath: string | null = null;
+          if (useWorktrees) {
+            // Get or create worktree based on the feature's assigned branch
+            worktreePath = await getOrCreateWorktreeForFeature(draggedFeature);
+            if (worktreePath) {
+              await persistFeatureUpdate(featureId, { worktreePath });
+            }
+            // Refresh worktree selector after moving to in_progress
+            onWorktreeCreated?.();
+          }
+          // Use helper function to handle concurrency check and start implementation
+          // Pass feature with worktreePath so handleRunFeature uses the correct path
+          await handleStartImplementation({ ...draggedFeature, worktreePath: worktreePath || undefined });
+        } else {
+          moveFeature(featureId, targetStatus);
+          persistFeatureUpdate(featureId, { status: targetStatus });
+        }
+      } else if (draggedFeature.status === "waiting_approval") {
+        // waiting_approval features can be dragged to verified for manual verification
+        // NOTE: This check must come BEFORE skipTests check because waiting_approval
+        // features often have skipTests=true, and we want status-based handling first
+        if (targetStatus === "verified") {
+          moveFeature(featureId, "verified");
+          // Clear justFinishedAt timestamp when manually verifying via drag
+          persistFeatureUpdate(featureId, {
+            status: "verified",
+            justFinishedAt: undefined,
+          });
+          toast.success("Feature verified", {
+            description: `Manually verified: ${draggedFeature.description.slice(
+              0,
+              50
+            )}${draggedFeature.description.length > 50 ? "..." : ""}`,
+          });
+        } else if (targetStatus === "backlog") {
+          // Allow moving waiting_approval cards back to backlog
+          moveFeature(featureId, "backlog");
+          // Clear justFinishedAt timestamp and worktreePath when moving back to backlog
+          persistFeatureUpdate(featureId, {
+            status: "backlog",
+            justFinishedAt: undefined,
+            worktreePath: undefined,
+          });
+          toast.info("Feature moved to backlog", {
+            description: `Moved to Backlog: ${draggedFeature.description.slice(
+              0,
+              50
+            )}${draggedFeature.description.length > 50 ? "..." : ""}`,
+          });
+        }
+      } else if (draggedFeature.skipTests) {
+        // skipTests feature being moved between in_progress and verified
+        if (
+          targetStatus === "verified" &&
+          draggedFeature.status === "in_progress"
+        ) {
+          // Manual verify via drag
+          moveFeature(featureId, "verified");
+          persistFeatureUpdate(featureId, { status: "verified" });
+          toast.success("Feature verified", {
+            description: `Marked as verified: ${draggedFeature.description.slice(
+              0,
+              50
+            )}${draggedFeature.description.length > 50 ? "..." : ""}`,
+          });
+        } else if (
+          targetStatus === "waiting_approval" &&
+          draggedFeature.status === "verified"
+        ) {
+          // Move verified feature back to waiting_approval
+          moveFeature(featureId, "waiting_approval");
+          persistFeatureUpdate(featureId, { status: "waiting_approval" });
+          toast.info("Feature moved back", {
+            description: `Moved back to Waiting Approval: ${draggedFeature.description.slice(
+              0,
+              50
+            )}${draggedFeature.description.length > 50 ? "..." : ""}`,
+          });
+        } else if (targetStatus === "backlog") {
+          // Allow moving skipTests cards back to backlog
+          moveFeature(featureId, "backlog");
+          // Clear worktreePath when moving back to backlog
+          persistFeatureUpdate(featureId, { status: "backlog", worktreePath: undefined });
+          toast.info("Feature moved to backlog", {
+            description: `Moved to Backlog: ${draggedFeature.description.slice(
+              0,
+              50
+            )}${draggedFeature.description.length > 50 ? "..." : ""}`,
+          });
+        }
+      } else if (draggedFeature.status === "verified") {
+        // Handle verified TDD (non-skipTests) features being moved back
+        if (targetStatus === "waiting_approval") {
+          // Move verified feature back to waiting_approval
+          moveFeature(featureId, "waiting_approval");
+          persistFeatureUpdate(featureId, { status: "waiting_approval" });
+          toast.info("Feature moved back", {
+            description: `Moved back to Waiting Approval: ${draggedFeature.description.slice(
+              0,
+              50
+            )}${draggedFeature.description.length > 50 ? "..." : ""}`,
+          });
+        } else if (targetStatus === "backlog") {
+          // Allow moving verified cards back to backlog
+          moveFeature(featureId, "backlog");
+          // Clear worktreePath when moving back to backlog
+          persistFeatureUpdate(featureId, { status: "backlog", worktreePath: undefined });
+          toast.info("Feature moved to backlog", {
+            description: `Moved to Backlog: ${draggedFeature.description.slice(
+              0,
+              50
+            )}${draggedFeature.description.length > 50 ? "..." : ""}`,
+          });
+        }
+      }
+    },
+    [
+      features,
+      runningAutoTasks,
+      moveFeature,
+      persistFeatureUpdate,
+      handleStartImplementation,
+      getOrCreateWorktreeForFeature,
+      onWorktreeCreated,
+      useWorktrees,
+    ]
+  );
+
+  return {
+    activeFeature,
+    handleDragStart,
+    handleDragEnd,
+  };
+}

apps/app/src/components/views/board-view/hooks/use-board-effects.ts

@@ -0,0 +1,166 @@
+import { useEffect, useRef } from "react";
+import { getElectronAPI } from "@/lib/electron";
+import { useAppStore } from "@/store/app-store";
+import { useAutoMode } from "@/hooks/use-auto-mode";
+
+interface UseBoardEffectsProps {
+  currentProject: { path: string; id: string } | null;
+  specCreatingForProject: string | null;
+  setSpecCreatingForProject: (path: string | null) => void;
+  setSuggestionsCount: (count: number) => void;
+  setFeatureSuggestions: (suggestions: any[]) => void;
+  setIsGeneratingSuggestions: (generating: boolean) => void;
+  checkContextExists: (featureId: string) => Promise<boolean>;
+  features: any[];
+  isLoading: boolean;
+  setFeaturesWithContext: (set: Set<string>) => void;
+}
+
+export function useBoardEffects({
+  currentProject,
+  specCreatingForProject,
+  setSpecCreatingForProject,
+  setSuggestionsCount,
+  setFeatureSuggestions,
+  setIsGeneratingSuggestions,
+  checkContextExists,
+  features,
+  isLoading,
+  setFeaturesWithContext,
+}: UseBoardEffectsProps) {
+  const autoMode = useAutoMode();
+
+  // Make current project available globally for modal
+  useEffect(() => {
+    if (currentProject) {
+      (window as any).__currentProject = currentProject;
+    }
+    return () => {
+      (window as any).__currentProject = null;
+    };
+  }, [currentProject]);
+
+  // Listen for suggestions events to update count (persists even when dialog is closed)
+  useEffect(() => {
+    const api = getElectronAPI();
+    if (!api?.suggestions) return;
+
+    const unsubscribe = api.suggestions.onEvent((event) => {
+      if (event.type === "suggestions_complete" && event.suggestions) {
+        setSuggestionsCount(event.suggestions.length);
+        setFeatureSuggestions(event.suggestions);
+        setIsGeneratingSuggestions(false);
+      } else if (event.type === "suggestions_error") {
+        setIsGeneratingSuggestions(false);
+      }
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, [setSuggestionsCount, setFeatureSuggestions, setIsGeneratingSuggestions]);
+
+  // Subscribe to spec regeneration events to clear creating state on completion
+  useEffect(() => {
+    const api = getElectronAPI();
+    if (!api.specRegeneration) return;
+
+    const unsubscribe = api.specRegeneration.onEvent((event) => {
+      console.log(
+        "[BoardView] Spec regeneration event:",
+        event.type,
+        "for project:",
+        event.projectPath
+      );
+
+      if (event.projectPath !== specCreatingForProject) {
+        return;
+      }
+
+      if (event.type === "spec_regeneration_complete") {
+        setSpecCreatingForProject(null);
+      } else if (event.type === "spec_regeneration_error") {
+        setSpecCreatingForProject(null);
+      }
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, [specCreatingForProject, setSpecCreatingForProject]);
+
+  // Sync running tasks from electron backend on mount
+  useEffect(() => {
+    if (!currentProject) return;
+
+    const syncRunningTasks = async () => {
+      try {
+        const api = getElectronAPI();
+        if (!api?.autoMode?.status) return;
+
+        const status = await api.autoMode.status(currentProject.path);
+        if (status.success) {
+          const projectId = currentProject.id;
+          const { clearRunningTasks, addRunningTask, setAutoModeRunning } =
+            useAppStore.getState();
+
+          if (status.runningFeatures) {
+            console.log(
+              "[Board] Syncing running tasks from backend:",
+              status.runningFeatures
+            );
+
+            clearRunningTasks(projectId);
+
+            status.runningFeatures.forEach((featureId: string) => {
+              addRunningTask(projectId, featureId);
+            });
+          }
+
+          const isAutoModeRunning =
+            status.autoLoopRunning ?? status.isRunning ?? false;
+          console.log(
+            "[Board] Syncing auto mode running state:",
+            isAutoModeRunning
+          );
+          setAutoModeRunning(projectId, isAutoModeRunning);
+        }
+      } catch (error) {
+        console.error("[Board] Failed to sync running tasks:", error);
+      }
+    };
+
+    syncRunningTasks();
+  }, [currentProject]);
+
+  // Check which features have context files
+  useEffect(() => {
+    const checkAllContexts = async () => {
+      const featuresWithPotentialContext = features.filter(
+        (f) =>
+          f.status === "in_progress" ||
+          f.status === "waiting_approval" ||
+          f.status === "verified"
+      );
+      const contextChecks = await Promise.all(
+        featuresWithPotentialContext.map(async (f) => ({
+          id: f.id,
+          hasContext: await checkContextExists(f.id),
+        }))
+      );
+
+      const newSet = new Set<string>();
+      contextChecks.forEach(({ id, hasContext }) => {
+        if (hasContext) {
+          newSet.add(id);
+        }
+      });
+
+      setFeaturesWithContext(newSet);
+    };
+
+    if (features.length > 0 && !isLoading) {
+      checkAllContexts();
+    }
+  }, [features, isLoading, checkContextExists, setFeaturesWithContext]);
+}

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

@@ -0,0 +1,273 @@
+import { useState, useCallback, useEffect, useRef } from "react";
+import { useAppStore, Feature } from "@/store/app-store";
+import { getElectronAPI } from "@/lib/electron";
+import { toast } from "sonner";
+
+interface UseBoardFeaturesProps {
+  currentProject: { path: string; id: string } | null;
+}
+
+export function useBoardFeatures({ currentProject }: UseBoardFeaturesProps) {
+  const { features, setFeatures } = useAppStore();
+  const [isLoading, setIsLoading] = useState(true);
+  const [persistedCategories, setPersistedCategories] = useState<string[]>([]);
+
+  // Track previous project path to detect project switches
+  const prevProjectPathRef = useRef<string | null>(null);
+  const isInitialLoadRef = useRef(true);
+  const isSwitchingProjectRef = useRef(false);
+
+  // Load features using features API
+  // IMPORTANT: Do NOT add 'features' to dependency array - it would cause infinite reload loop
+  const loadFeatures = useCallback(async () => {
+    if (!currentProject) return;
+
+    const currentPath = currentProject.path;
+    const previousPath = prevProjectPathRef.current;
+    const isProjectSwitch =
+      previousPath !== null && currentPath !== previousPath;
+
+    // Get cached features from store (without adding to dependencies)
+    const cachedFeatures = useAppStore.getState().features;
+
+    // If project switched, mark it but don't clear features yet
+    // We'll clear after successful API load to prevent data loss
+    if (isProjectSwitch) {
+      console.log(
+        `[BoardView] Project switch detected: ${previousPath} -> ${currentPath}`
+      );
+      isSwitchingProjectRef.current = true;
+      isInitialLoadRef.current = true;
+    }
+
+    // Update the ref to track current project
+    prevProjectPathRef.current = currentPath;
+
+    // Only show loading spinner on initial load to prevent board flash during reloads
+    if (isInitialLoadRef.current) {
+      setIsLoading(true);
+    }
+
+    try {
+      const api = getElectronAPI();
+      if (!api.features) {
+        console.error("[BoardView] Features API not available");
+        // Keep cached features if API is unavailable
+        return;
+      }
+
+      const result = await api.features.getAll(currentProject.path);
+
+      if (result.success && result.features) {
+        const featuresWithIds = result.features.map(
+          (f: any, index: number) => ({
+            ...f,
+            id: f.id || `feature-${index}-${Date.now()}`,
+            status: f.status || "backlog",
+            startedAt: f.startedAt, // Preserve startedAt timestamp
+            // Ensure model and thinkingLevel are set for backward compatibility
+            model: f.model || "opus",
+            thinkingLevel: f.thinkingLevel || "none",
+          })
+        );
+        // Successfully loaded features - now safe to set them
+        setFeatures(featuresWithIds);
+
+        // Only clear categories on project switch AFTER successful load
+        if (isProjectSwitch) {
+          setPersistedCategories([]);
+        }
+      } else if (!result.success && result.error) {
+        console.error("[BoardView] API returned error:", result.error);
+        // If it's a new project or the error indicates no features found,
+        // that's expected - start with empty array
+        if (isProjectSwitch) {
+          setFeatures([]);
+          setPersistedCategories([]);
+        }
+        // Otherwise keep cached features
+      }
+    } catch (error) {
+      console.error("Failed to load features:", error);
+      // On error, keep existing cached features for the current project
+      // Only clear on project switch if we have no features from server
+      if (isProjectSwitch && cachedFeatures.length === 0) {
+        setFeatures([]);
+        setPersistedCategories([]);
+      }
+    } finally {
+      setIsLoading(false);
+      isInitialLoadRef.current = false;
+      isSwitchingProjectRef.current = false;
+    }
+  }, [currentProject, setFeatures]);
+
+  // Load persisted categories from file
+  const loadCategories = useCallback(async () => {
+    if (!currentProject) return;
+
+    try {
+      const api = getElectronAPI();
+      const result = await api.readFile(
+        `${currentProject.path}/.automaker/categories.json`
+      );
+
+      if (result.success && result.content) {
+        const parsed = JSON.parse(result.content);
+        if (Array.isArray(parsed)) {
+          setPersistedCategories(parsed);
+        }
+      } else {
+        // File doesn't exist, ensure categories are cleared
+        setPersistedCategories([]);
+      }
+    } catch (error) {
+      console.error("Failed to load categories:", error);
+      // If file doesn't exist, ensure categories are cleared
+      setPersistedCategories([]);
+    }
+  }, [currentProject]);
+
+  // Save a new category to the persisted categories file
+  const saveCategory = useCallback(
+    async (category: string) => {
+      if (!currentProject || !category.trim()) return;
+
+      try {
+        const api = getElectronAPI();
+
+        // Read existing categories
+        let categories: string[] = [...persistedCategories];
+
+        // Add new category if it doesn't exist
+        if (!categories.includes(category)) {
+          categories.push(category);
+          categories.sort(); // Keep sorted
+
+          // Write back to file
+          await api.writeFile(
+            `${currentProject.path}/.automaker/categories.json`,
+            JSON.stringify(categories, null, 2)
+          );
+
+          // Update state
+          setPersistedCategories(categories);
+        }
+      } catch (error) {
+        console.error("Failed to save category:", error);
+      }
+    },
+    [currentProject, persistedCategories]
+  );
+
+  // Subscribe to spec regeneration complete events to refresh kanban board
+  useEffect(() => {
+    const api = getElectronAPI();
+    if (!api.specRegeneration) return;
+
+    const unsubscribe = api.specRegeneration.onEvent((event) => {
+      // Refresh the kanban board when spec regeneration completes for the current project
+      if (
+        event.type === "spec_regeneration_complete" &&
+        currentProject &&
+        event.projectPath === currentProject.path
+      ) {
+        console.log(
+          "[BoardView] Spec regeneration complete, refreshing features"
+        );
+        loadFeatures();
+      }
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, [currentProject, loadFeatures]);
+
+  // Listen for auto mode feature completion and errors to reload features
+  useEffect(() => {
+    const api = getElectronAPI();
+    if (!api?.autoMode || !currentProject) return;
+
+    const { removeRunningTask } = useAppStore.getState();
+    const projectId = currentProject.id;
+
+    const unsubscribe = api.autoMode.onEvent((event) => {
+      // Use event's projectPath or projectId if available, otherwise use current project
+      // Board view only reacts to events for the currently selected project
+      const eventProjectId =
+        ("projectId" in event && event.projectId) || projectId;
+
+      if (event.type === "auto_mode_feature_complete") {
+        // Reload features when a feature is completed
+        console.log("[Board] Feature completed, reloading features...");
+        loadFeatures();
+        // Play ding sound when feature is done (unless muted)
+        const { muteDoneSound } = useAppStore.getState();
+        if (!muteDoneSound) {
+          const audio = new Audio("/sounds/ding.mp3");
+          audio
+            .play()
+            .catch((err) => console.warn("Could not play ding sound:", err));
+        }
+      } else if (event.type === "plan_approval_required") {
+        // Reload features when plan is generated and requires approval
+        // This ensures the feature card shows the "Approve Plan" button
+        console.log("[Board] Plan approval required, reloading features...");
+        loadFeatures();
+      } else if (event.type === "auto_mode_error") {
+        // Reload features when an error occurs (feature moved to waiting_approval)
+        console.log(
+          "[Board] Feature error, reloading features...",
+          event.error
+        );
+
+        // Remove from running tasks so it moves to the correct column
+        if (event.featureId) {
+          removeRunningTask(eventProjectId, event.featureId);
+        }
+
+        loadFeatures();
+
+        // Check for authentication errors and show a more helpful message
+        const isAuthError =
+          event.errorType === "authentication" ||
+          (event.error &&
+            (event.error.includes("Authentication failed") ||
+              event.error.includes("Invalid API key")));
+
+        if (isAuthError) {
+          toast.error("Authentication Failed", {
+            description:
+              "Your API key is invalid or expired. Please check Settings or run 'claude login' in terminal.",
+            duration: 10000,
+          });
+        } else {
+          toast.error("Agent encountered an error", {
+            description: event.error || "Check the logs for details",
+          });
+        }
+      }
+    });
+
+    return unsubscribe;
+  }, [loadFeatures, currentProject]);
+
+  useEffect(() => {
+    loadFeatures();
+  }, [loadFeatures]);
+
+  // Load persisted categories on mount
+  useEffect(() => {
+    loadCategories();
+  }, [loadCategories]);
+
+  return {
+    features,
+    isLoading,
+    persistedCategories,
+    loadFeatures,
+    loadCategories,
+    saveCategory,
+  };
+}

apps/app/src/components/views/board-view/hooks/use-board-keyboard-shortcuts.ts

@@ -0,0 +1,78 @@
+import { useMemo, useRef, useEffect } from "react";
+import {
+  useKeyboardShortcuts,
+  useKeyboardShortcutsConfig,
+  KeyboardShortcut,
+} from "@/hooks/use-keyboard-shortcuts";
+import { Feature } from "@/store/app-store";
+
+interface UseBoardKeyboardShortcutsProps {
+  features: Feature[];
+  runningAutoTasks: string[];
+  onAddFeature: () => void;
+  onStartNextFeatures: () => void;
+  onViewOutput: (feature: Feature) => void;
+}
+
+export function useBoardKeyboardShortcuts({
+  features,
+  runningAutoTasks,
+  onAddFeature,
+  onStartNextFeatures,
+  onViewOutput,
+}: UseBoardKeyboardShortcutsProps) {
+  const shortcuts = useKeyboardShortcutsConfig();
+
+  // Get in-progress features for keyboard shortcuts (memoized for shortcuts)
+  const inProgressFeaturesForShortcuts = useMemo(() => {
+    return features.filter((f) => {
+      const isRunning = runningAutoTasks.includes(f.id);
+      return isRunning || f.status === "in_progress";
+    });
+  }, [features, runningAutoTasks]);
+
+  // Ref to hold the start next callback (to avoid dependency issues)
+  const startNextFeaturesRef = useRef<() => void>(() => {});
+
+  // Update ref when callback changes
+  useEffect(() => {
+    startNextFeaturesRef.current = onStartNextFeatures;
+  }, [onStartNextFeatures]);
+
+  // Keyboard shortcuts for this view
+  const boardShortcuts: KeyboardShortcut[] = useMemo(() => {
+    const shortcutsList: KeyboardShortcut[] = [
+      {
+        key: shortcuts.addFeature,
+        action: onAddFeature,
+        description: "Add new feature",
+      },
+      {
+        key: shortcuts.startNext,
+        action: () => startNextFeaturesRef.current(),
+        description: "Start next features from backlog",
+      },
+    ];
+
+    // Add shortcuts for in-progress cards (1-9 and 0 for 10th)
+    inProgressFeaturesForShortcuts.slice(0, 10).forEach((feature, index) => {
+      // Keys 1-9 for first 9 cards, 0 for 10th card
+      const key = index === 9 ? "0" : String(index + 1);
+      shortcutsList.push({
+        key,
+        action: () => {
+          onViewOutput(feature);
+        },
+        description: `View output for in-progress card ${index + 1}`,
+      });
+    });
+
+    return shortcutsList;
+  }, [inProgressFeaturesForShortcuts, shortcuts, onAddFeature, onViewOutput]);
+
+  useKeyboardShortcuts(boardShortcuts);
+
+  return {
+    inProgressFeaturesForShortcuts,
+  };
+}

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

@@ -0,0 +1,90 @@
+import { useCallback } from "react";
+import { Feature } from "@/store/app-store";
+import { getElectronAPI } from "@/lib/electron";
+import { useAppStore } from "@/store/app-store";
+
+interface UseBoardPersistenceProps {
+  currentProject: { path: string; id: string } | null;
+}
+
+export function useBoardPersistence({
+  currentProject,
+}: UseBoardPersistenceProps) {
+  const { updateFeature } = useAppStore();
+
+  // Persist feature update to API (replaces saveFeatures)
+  const persistFeatureUpdate = useCallback(
+    async (featureId: string, updates: Partial<Feature>) => {
+      if (!currentProject) return;
+
+      try {
+        const api = getElectronAPI();
+        if (!api.features) {
+          console.error("[BoardView] Features API not available");
+          return;
+        }
+
+        const result = await api.features.update(
+          currentProject.path,
+          featureId,
+          updates
+        );
+        if (result.success && result.feature) {
+          updateFeature(result.feature.id, result.feature);
+        }
+      } catch (error) {
+        console.error("Failed to persist feature update:", error);
+      }
+    },
+    [currentProject, updateFeature]
+  );
+
+  // Persist feature creation to API
+  const persistFeatureCreate = useCallback(
+    async (feature: Feature) => {
+      if (!currentProject) return;
+
+      try {
+        const api = getElectronAPI();
+        if (!api.features) {
+          console.error("[BoardView] Features API not available");
+          return;
+        }
+
+        const result = await api.features.create(currentProject.path, feature);
+        if (result.success && result.feature) {
+          updateFeature(result.feature.id, result.feature);
+        }
+      } catch (error) {
+        console.error("Failed to persist feature creation:", error);
+      }
+    },
+    [currentProject, updateFeature]
+  );
+
+  // Persist feature deletion to API
+  const persistFeatureDelete = useCallback(
+    async (featureId: string) => {
+      if (!currentProject) return;
+
+      try {
+        const api = getElectronAPI();
+        if (!api.features) {
+          console.error("[BoardView] Features API not available");
+          return;
+        }
+
+        await api.features.delete(currentProject.path, featureId);
+      } catch (error) {
+        console.error("Failed to persist feature deletion:", error);
+      }
+    },
+    [currentProject]
+  );
+
+  return {
+    persistFeatureCreate,
+    persistFeatureUpdate,
+    persistFeatureDelete,
+  };
+}