feat: implement new layout components and enhance UI with glassmorphism

This commit introduces a new app layout structure with an AppLayout component, a TopHeader for improved navigation, and a Sidebar for project management. Additionally, it adds GlassPanel and GlassCard components to enhance the UI with a glassmorphism effect. The Kanban board and agent views have been updated to utilize these new components, improving the overall user experience and visual consistency across the application.

.claude/settings.local.json

@@ -1,7 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "Bash(dir \"C:\\Users\\Ben\\Desktop\\appdev\\git\\automaker\\apps\\app\\public\")"
-    ]
-  }
-}

.claude_settings.json

@@ -21,4 +21,4 @@
       "mcp__puppeteer__puppeteer_evaluate"
     ]
   }
-}
+}

.github/actions/setup-project/action.yml

@@ -0,0 +1,71 @@
+name: 'Setup Project'
+description: 'Common setup steps for CI workflows - checkout, Node.js, dependencies, and native modules'
+
+inputs:
+  node-version:
+    description: 'Node.js version to use'
+    required: false
+    default: '22'
+  check-lockfile:
+    description: 'Run lockfile lint check for SSH URLs'
+    required: false
+    default: 'false'
+  rebuild-node-pty-path:
+    description: 'Working directory for node-pty rebuild (empty = root)'
+    required: false
+    default: ''
+
+runs:
+  using: 'composite'
+  steps:
+    - name: Setup Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ inputs.node-version }}
+        cache: 'npm'
+        cache-dependency-path: package-lock.json
+
+    - name: Check for SSH URLs in lockfile
+      if: inputs.check-lockfile == 'true'
+      shell: bash
+      run: npm run lint:lockfile
+
+    - name: Configure Git for HTTPS
+      shell: bash
+      # 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
+      shell: bash
+      # Use npm install instead of npm ci to correctly resolve platform-specific
+      # optional dependencies (e.g., @tailwindcss/oxide, lightningcss binaries)
+      # Skip scripts to avoid electron-builder install-app-deps which uses too much memory
+      run: npm install --ignore-scripts
+
+    - name: Install Linux native bindings
+      shell: bash
+      # Workaround for npm optional dependencies bug (npm/cli#4828)
+      # Explicitly install Linux bindings needed for build tools
+      run: |
+        npm install --no-save --force --ignore-scripts \
+          @rollup/rollup-linux-x64-gnu@4.53.3 \
+          @tailwindcss/oxide-linux-x64-gnu@4.1.17
+
+    - name: Build shared packages
+      shell: bash
+      # Build shared packages (types, utils, platform, etc.) before apps can use them
+      run: npm run build:packages
+
+    - name: Rebuild native modules (root)
+      if: inputs.rebuild-node-pty-path == ''
+      shell: bash
+      # Rebuild node-pty and other native modules for Electron
+      run: npm rebuild node-pty
+
+    - name: Rebuild native modules (workspace)
+      if: inputs.rebuild-node-pty-path != ''
+      shell: bash
+      # Rebuild node-pty and other native modules needed for server
+      run: npm rebuild node-pty
+      working-directory: ${{ inputs.rebuild-node-pty-path }}

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

@@ -1,15 +1,11 @@
-const {
-  S3Client,
-  PutObjectCommand,
-  GetObjectCommand,
-} = require("@aws-sdk/client-s3");
-const fs = require("fs");
-const path = require("path");
-const https = require("https");
-const { pipeline } = require("stream/promises");
+const { S3Client, PutObjectCommand, GetObjectCommand } = 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",
+  region: 'auto',
   endpoint: process.env.R2_ENDPOINT,
   credentials: {
     accessKeyId: process.env.R2_ACCESS_KEY_ID,
@@ -28,14 +24,14 @@ async function fetchExistingReleases() {
     const response = await s3Client.send(
       new GetObjectCommand({
         Bucket: BUCKET,
-        Key: "releases.json",
+        Key: 'releases.json',
       })
     );
     const body = await response.Body.transformToString();
     return JSON.parse(body);
   } catch (error) {
-    if (error.name === "NoSuchKey" || error.$metadata?.httpStatusCode === 404) {
-      console.log("No existing releases.json found, creating new one");
+    if (error.name === 'NoSuchKey' || error.$metadata?.httpStatusCode === 404) {
+      console.log('No existing releases.json found, creating new one');
       return { latestVersion: null, releases: [] };
     }
     throw error;
@@ -85,7 +81,7 @@ async function checkUrlAccessible(url, maxRetries = 10, initialDelay = 1000) {
               resolve({
                 accessible: false,
                 statusCode,
-                error: "Redirect without location header",
+                error: 'Redirect without location header',
               });
               return;
             }
@@ -93,18 +89,16 @@ async function checkUrlAccessible(url, maxRetries = 10, initialDelay = 1000) {
             return https
               .get(redirectUrl, { timeout: 10000 }, (redirectResponse) => {
                 const redirectStatus = redirectResponse.statusCode;
-                const contentType =
-                  redirectResponse.headers["content-type"] || "";
+                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;
+                  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,
@@ -113,38 +107,38 @@ async function checkUrlAccessible(url, maxRetries = 10, initialDelay = 1000) {
                   contentType,
                 });
               })
-              .on("error", (error) => {
+              .on('error', (error) => {
                 resolve({
                   accessible: false,
                   statusCode,
                   error: error.message,
                 });
               })
-              .on("timeout", function () {
+              .on('timeout', function () {
                 this.destroy();
                 resolve({
                   accessible: false,
                   statusCode,
-                  error: "Timeout following redirect",
+                  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 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");
+            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) => {
+        request.on('error', (error) => {
           resolve({
             accessible: false,
             statusCode: null,
@@ -152,12 +146,12 @@ async function checkUrlAccessible(url, maxRetries = 10, initialDelay = 1000) {
           });
         });
 
-        request.on("timeout", () => {
+        request.on('timeout', () => {
           request.destroy();
           resolve({
             accessible: false,
             statusCode: null,
-            error: "Request timeout",
+            error: 'Request timeout',
           });
         });
       });
@@ -168,22 +162,14 @@ async function checkUrlAccessible(url, maxRetries = 10, initialDelay = 1000) {
             `✓ URL ${url} is now accessible after ${attempt} retries (status: ${result.statusCode})`
           );
         } else {
-          console.log(
-            `✓ URL ${url} is accessible (status: ${result.statusCode})`
-          );
+          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}`
-        );
+        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}`);
@@ -191,9 +177,7 @@ async function checkUrlAccessible(url, maxRetries = 10, initialDelay = 1000) {
 
     if (attempt < maxRetries - 1) {
       const delay = initialDelay * Math.pow(2, attempt);
-      console.log(
-        `  Retrying in ${delay}ms... (attempt ${attempt + 1}/${maxRetries})`
-      );
+      console.log(`  Retrying in ${delay}ms... (attempt ${attempt + 1}/${maxRetries})`);
       await new Promise((resolve) => setTimeout(resolve, delay));
     }
   }
@@ -207,12 +191,7 @@ async function downloadFromGitHub(url, outputPath) {
       const statusCode = response.statusCode;
 
       // Follow redirects (all redirect types)
-      if (
-        statusCode === 301 ||
-        statusCode === 302 ||
-        statusCode === 307 ||
-        statusCode === 308
-      ) {
+      if (statusCode === 301 || statusCode === 302 || statusCode === 307 || statusCode === 308) {
         const redirectUrl = response.headers.location;
         response.destroy();
         if (!redirectUrl) {
@@ -220,39 +199,33 @@ async function downloadFromGitHub(url, outputPath) {
           return;
         }
         // Resolve relative redirects
-        const finalRedirectUrl = redirectUrl.startsWith("http")
+        const finalRedirectUrl = redirectUrl.startsWith('http')
           ? redirectUrl
           : new URL(redirectUrl, url).href;
         console.log(`  Following redirect: ${finalRedirectUrl}`);
-        return downloadFromGitHub(finalRedirectUrl, outputPath)
-          .then(resolve)
-          .catch(reject);
+        return downloadFromGitHub(finalRedirectUrl, outputPath).then(resolve).catch(reject);
       }
 
       if (statusCode !== 200) {
         response.destroy();
-        reject(
-          new Error(
-            `Failed to download ${url}: ${statusCode} ${response.statusMessage}`
-          )
-        );
+        reject(new Error(`Failed to download ${url}: ${statusCode} ${response.statusMessage}`));
         return;
       }
 
       const fileStream = fs.createWriteStream(outputPath);
       response.pipe(fileStream);
-      fileStream.on("finish", () => {
+      fileStream.on('finish', () => {
         fileStream.close();
         resolve();
       });
-      fileStream.on("error", (error) => {
+      fileStream.on('error', (error) => {
         response.destroy();
         reject(error);
       });
     });
 
-    request.on("error", reject);
-    request.on("timeout", () => {
+    request.on('error', reject);
+    request.on('timeout', () => {
       request.destroy();
       reject(new Error(`Request timeout for ${url}`));
     });
@@ -260,8 +233,8 @@ async function downloadFromGitHub(url, outputPath) {
 }
 
 async function main() {
-  const artifactsDir = "artifacts";
-  const tempDir = path.join(artifactsDir, "temp");
+  const artifactsDir = 'artifacts';
+  const tempDir = path.join(artifactsDir, 'temp');
 
   // Create temp directory for downloaded GitHub archives
   if (!fs.existsSync(tempDir)) {
@@ -292,40 +265,30 @@ async function main() {
 
   // Find all artifacts
   const artifacts = {
-    windows: findArtifacts(path.join(artifactsDir, "windows-builds"), /\.exe$/),
-    macos: findArtifacts(path.join(artifactsDir, "macos-builds"), /-x64\.dmg$/),
-    macosArm: findArtifacts(
-      path.join(artifactsDir, "macos-builds"),
-      /-arm64\.dmg$/
-    ),
-    linux: findArtifacts(
-      path.join(artifactsDir, "linux-builds"),
-      /\.AppImage$/
-    ),
+    windows: findArtifacts(path.join(artifactsDir, 'windows-builds'), /\.exe$/),
+    macos: findArtifacts(path.join(artifactsDir, 'macos-builds'), /-x64\.dmg$/),
+    macosArm: findArtifacts(path.join(artifactsDir, 'macos-builds'), /-arm64\.dmg$/),
+    linux: findArtifacts(path.join(artifactsDir, 'linux-builds'), /\.AppImage$/),
     sourceZip: [sourceZipPath],
     sourceTarGz: [sourceTarGzPath],
   };
 
-  console.log("Found artifacts:");
+  console.log('Found artifacts:');
   for (const [platform, files] of Object.entries(artifacts)) {
     console.log(
-      `  ${platform}: ${
-        files.length > 0
-          ? files.map((f) => path.basename(f)).join(", ")
-          : "none"
-      }`
+      `  ${platform}: ${files.length > 0 ? files.map((f) => path.basename(f)).join(', ') : 'none'}`
     );
   }
 
   // Upload each artifact to R2
   const assets = {};
   const contentTypes = {
-    windows: "application/x-msdownload",
-    macos: "application/x-apple-diskimage",
-    macosArm: "application/x-apple-diskimage",
-    linux: "application/x-executable",
-    sourceZip: "application/zip",
-    sourceTarGz: "application/gzip",
+    windows: 'application/x-msdownload',
+    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)) {
@@ -345,11 +308,11 @@ async function main() {
       filename,
       size,
       arch:
-        platform === "macosArm"
-          ? "arm64"
-          : platform === "sourceZip" || platform === "sourceTarGz"
-          ? "source"
-          : "x64",
+        platform === 'macosArm'
+          ? 'arm64'
+          : platform === 'sourceZip' || platform === 'sourceTarGz'
+            ? 'source'
+            : 'x64',
     };
   }
 
@@ -364,9 +327,7 @@ async function main() {
   };
 
   // Remove existing entry for this version if re-running
-  releasesData.releases = releasesData.releases.filter(
-    (r) => r.version !== VERSION
-  );
+  releasesData.releases = releasesData.releases.filter((r) => r.version !== VERSION);
 
   // Prepend new release
   releasesData.releases.unshift(newRelease);
@@ -376,19 +337,19 @@ async function main() {
   await s3Client.send(
     new PutObjectCommand({
       Bucket: BUCKET,
-      Key: "releases.json",
+      Key: 'releases.json',
       Body: JSON.stringify(releasesData, null, 2),
-      ContentType: "application/json",
-      CacheControl: "public, max-age=60",
+      ContentType: 'application/json',
+      CacheControl: 'public, max-age=60',
     })
   );
 
-  console.log("Successfully updated releases.json");
+  console.log('Successfully updated releases.json');
   console.log(`Latest version: ${VERSION}`);
   console.log(`Total releases: ${releasesData.releases.length}`);
 }
 
 main().catch((err) => {
-  console.error("Failed to upload to R2:", err);
+  console.error('Failed to upload to R2:', err);
   process.exit(1);
 });

.github/workflows/claude.yml

@@ -0,0 +1,49 @@
+name: Claude Code
+
+on:
+  issue_comment:
+    types: [created]
+  pull_request_review_comment:
+    types: [created]
+  issues:
+    types: [opened, assigned]
+  pull_request_review:
+    types: [submitted]
+
+jobs:
+  claude:
+    if: |
+      (github.event_name == 'issue_comment' && contains(github.event.comment.body, '@claude')) ||
+      (github.event_name == 'pull_request_review_comment' && contains(github.event.comment.body, '@claude')) ||
+      (github.event_name == 'pull_request_review' && contains(github.event.review.body, '@claude')) ||
+      (github.event_name == 'issues' && (contains(github.event.issue.body, '@claude') || contains(github.event.issue.title, '@claude')))
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pull-requests: read
+      issues: read
+      id-token: write
+      actions: read # Required for Claude to read CI results on PRs
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 1
+
+      - name: Run Claude Code
+        id: claude
+        uses: anthropics/claude-code-action@v1
+        with:
+          claude_code_oauth_token: ${{ secrets.CLAUDE_CODE_OAUTH_TOKEN }}
+
+          # This is an optional setting that allows Claude to read CI results on PRs
+          additional_permissions: |
+            actions: read
+
+          # Optional: Give a custom prompt to Claude. If this is not specified, Claude will perform the instructions specified in the comment that tagged it.
+          # prompt: 'Update the pull request description to include a summary of changes.'
+
+          # Optional: Add claude_args to customize behavior and configuration
+          # See https://github.com/anthropics/claude-code-action/blob/main/docs/usage.md
+          # or https://code.claude.com/docs/en/cli-reference for available options
+          # claude_args: '--allowed-tools Bash(gh pr:*)'

.github/workflows/e2e-tests.yml

@@ -3,7 +3,7 @@ name: E2E Tests
 on:
   pull_request:
     branches:
-      - "*"
+      - '*'
   push:
     branches:
       - main
@@ -18,29 +18,15 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v4
 
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
+      - name: Setup project
+        uses: ./.github/actions/setup-project
         with:
-          node-version: "20"
-          cache: "npm"
-          cache-dependency-path: package-lock.json
-
-      - 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
+          check-lockfile: 'true'
+          rebuild-node-pty-path: 'apps/server'
 
       - name: Install Playwright browsers
         run: npx playwright install --with-deps chromium
-        working-directory: apps/app
+        working-directory: apps/ui
 
       - name: Build server
         run: npm run build --workspace=apps/server
@@ -66,20 +52,20 @@ jobs:
           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
+        # Playwright automatically starts the Vite frontend via webServer config
+        # (see apps/ui/playwright.config.ts) - no need to start it manually
+        run: npm run test --workspace=apps/ui
         env:
           CI: true
-          NEXT_PUBLIC_SERVER_URL: http://localhost:3008
-          NEXT_PUBLIC_SKIP_SETUP: "true"
+          VITE_SERVER_URL: http://localhost:3008
+          VITE_SKIP_SETUP: 'true'
 
       - name: Upload Playwright report
         uses: actions/upload-artifact@v4
         if: always()
         with:
           name: playwright-report
-          path: apps/app/playwright-report/
+          path: apps/ui/playwright-report/
           retention-days: 7
 
       - name: Upload test results
@@ -87,5 +73,5 @@ jobs:
         if: failure()
         with:
           name: test-results
-          path: apps/app/test-results/
+          path: apps/ui/test-results/
           retention-days: 7

.github/workflows/format-check.yml

@@ -0,0 +1,31 @@
+name: Format Check
+
+on:
+  pull_request:
+    branches:
+      - '*'
+  push:
+    branches:
+      - main
+      - master
+
+jobs:
+  format:
+    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: Install dependencies
+        run: npm install --ignore-scripts
+
+      - name: Check formatting
+        run: npm run format:check

.github/workflows/pr-check.yml

@@ -3,7 +3,7 @@ name: PR Build Check
 on:
   pull_request:
     branches:
-      - "*"
+      - '*'
   push:
     branches:
       - main
@@ -17,25 +17,10 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v4
 
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
+      - name: Setup project
+        uses: ./.github/actions/setup-project
         with:
-          node-version: "20"
-          cache: "npm"
-          cache-dependency-path: package-lock.json
+          check-lockfile: 'true'
 
-      - 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
+      - name: Run build:electron (dir only - faster CI)
+        run: npm run build:electron:dir

.github/workflows/release.yml

@@ -1,175 +1,111 @@
-name: Build and Release Electron App
+name: Release Build
 
 on:
-  push:
-    tags:
-      - "v*.*.*" # Triggers on version tags like v1.0.0
-  workflow_dispatch: # Allows manual triggering
-    inputs:
-      version:
-        description: "Version to release (e.g., v1.0.0)"
-        required: true
-        default: "v0.1.0"
+  release:
+    types: [published]
 
 jobs:
-  build-and-release:
+  build:
     strategy:
-      fail-fast: false
       matrix:
-        include:
-          - os: macos-latest
-            name: macOS
-            artifact-name: macos-builds
-          - os: windows-latest
-            name: Windows
-            artifact-name: windows-builds
-          - os: ubuntu-latest
-            name: Linux
-            artifact-name: linux-builds
-
+        os: [ubuntu-latest, macos-latest, windows-latest]
     runs-on: ${{ matrix.os }}
 
-    permissions:
-      contents: write
-
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
 
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: "20"
-          cache: "npm"
-          cache-dependency-path: package-lock.json
-
-      - 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
+      - name: Extract version from tag
         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"
+          # Remove 'v' prefix if present (e.g., "v1.2.3" -> "1.2.3")
+          VERSION="${{ github.event.release.tag_name }}"
+          VERSION="${VERSION#v}"
+          echo "version=${VERSION}" >> $GITHUB_OUTPUT
+          echo "Extracted version: ${VERSION}"
 
-      - name: Build Electron App (macOS)
-        if: matrix.os == 'macos-latest'
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        run: npm run build:electron -- --mac --x64 --arm64
+      - name: Update package.json version
+        shell: bash
+        run: |
+          node apps/ui/scripts/update-version.mjs "${{ steps.version.outputs.version }}"
 
-      - name: Build Electron App (Windows)
-        if: matrix.os == 'windows-latest'
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        run: npm run build:electron -- --win --x64
-
-      - name: Build Electron App (Linux)
-        if: matrix.os == 'ubuntu-latest'
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        run: npm run build:electron -- --linux --x64
-
-      - name: Upload Release Assets
-        uses: softprops/action-gh-release@v1
+      - name: Setup project
+        uses: ./.github/actions/setup-project
         with:
-          tag_name: ${{ github.event.inputs.version || github.ref_name }}
-          files: |
-            apps/app/dist/*.exe
-            apps/app/dist/*.dmg
-            apps/app/dist/*.AppImage
-            apps/app/dist/*.zip
-            apps/app/dist/*.deb
-            apps/app/dist/*.rpm
-          draft: false
-          prerelease: false
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          check-lockfile: 'true'
 
-      - name: Upload macOS artifacts for R2
+      - name: Build Electron app (macOS)
+        if: matrix.os == 'macos-latest'
+        shell: bash
+        run: npm run build:electron:mac --workspace=apps/ui
+        env:
+          CSC_IDENTITY_AUTO_DISCOVERY: false
+
+      - name: Build Electron app (Windows)
+        if: matrix.os == 'windows-latest'
+        shell: bash
+        run: npm run build:electron:win --workspace=apps/ui
+
+      - name: Build Electron app (Linux)
+        if: matrix.os == 'ubuntu-latest'
+        shell: bash
+        run: npm run build:electron:linux --workspace=apps/ui
+
+      - name: Upload macOS artifacts
         if: matrix.os == 'macos-latest'
         uses: actions/upload-artifact@v4
         with:
-          name: ${{ matrix.artifact-name }}
-          path: apps/app/dist/*.dmg
-          retention-days: 1
+          name: macos-builds
+          path: apps/ui/release/*.{dmg,zip}
+          retention-days: 30
 
-      - name: Upload Windows artifacts for R2
+      - name: Upload Windows artifacts
         if: matrix.os == 'windows-latest'
         uses: actions/upload-artifact@v4
         with:
-          name: ${{ matrix.artifact-name }}
-          path: apps/app/dist/*.exe
-          retention-days: 1
+          name: windows-builds
+          path: apps/ui/release/*.exe
+          retention-days: 30
 
-      - name: Upload Linux artifacts for R2
+      - name: Upload Linux artifacts
         if: matrix.os == 'ubuntu-latest'
         uses: actions/upload-artifact@v4
         with:
-          name: ${{ matrix.artifact-name }}
-          path: apps/app/dist/*.AppImage
-          retention-days: 1
+          name: linux-builds
+          path: apps/ui/release/*.{AppImage,deb}
+          retention-days: 30
 
-  upload-to-r2:
-    needs: build-and-release
+  upload:
+    needs: build
     runs-on: ubuntu-latest
+    if: github.event.release.draft == false
 
     steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: "20"
-
-      - name: Download all artifacts
+      - name: Download macOS artifacts
         uses: actions/download-artifact@v4
         with:
-          path: artifacts
+          name: macos-builds
+          path: artifacts/macos-builds
 
-      - name: Install AWS SDK
-        run: npm install @aws-sdk/client-s3
+      - name: Download Windows artifacts
+        uses: actions/download-artifact@v4
+        with:
+          name: windows-builds
+          path: artifacts/windows-builds
 
-      - 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: Download Linux artifacts
+        uses: actions/download-artifact@v4
+        with:
+          name: linux-builds
+          path: artifacts/linux-builds
 
-      - name: Upload to R2 and update releases.json
+      - name: Upload to GitHub Release
+        uses: softprops/action-gh-release@v2
+        with:
+          files: |
+            artifacts/macos-builds/*
+            artifacts/windows-builds/*
+            artifacts/linux-builds/*
         env:
-          R2_ENDPOINT: ${{ secrets.R2_ENDPOINT }}
-          R2_ACCESS_KEY_ID: ${{ secrets.R2_ACCESS_KEY_ID }}
-          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: ${{ steps.version.outputs.version }}
-          RELEASE_TAG: ${{ steps.version.outputs.version_tag }}
-          GITHUB_REPOSITORY: ${{ github.repository }}
-        run: node .github/scripts/upload-to-r2.js
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/security-audit.yml

@@ -0,0 +1,30 @@
+name: Security Audit
+
+on:
+  pull_request:
+    branches:
+      - '*'
+  push:
+    branches:
+      - main
+      - master
+  schedule:
+    # Run weekly on Mondays at 9 AM UTC
+    - cron: '0 9 * * 1'
+
+jobs:
+  audit:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup project
+        uses: ./.github/actions/setup-project
+        with:
+          check-lockfile: 'true'
+
+      - name: Run npm audit
+        run: npm audit --audit-level=moderate
+        continue-on-error: false

.github/workflows/test.yml

@@ -3,7 +3,7 @@ name: Test Suite
 on:
   pull_request:
     branches:
-      - "*"
+      - '*'
   push:
     branches:
       - main
@@ -17,25 +17,16 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v4
 
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
+      - name: Setup project
+        uses: ./.github/actions/setup-project
         with:
-          node-version: "20"
-          cache: "npm"
-          cache-dependency-path: package-lock.json
+          check-lockfile: 'true'
+          rebuild-node-pty-path: 'apps/server'
 
-      - 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 package tests
+        run: npm run test:packages
+        env:
+          NODE_ENV: test
 
       - name: Run server tests with coverage
         run: npm run test:server:coverage

.gitignore

@@ -6,10 +6,77 @@ node_modules/
 
 # Build outputs
 dist/
+build/
+out/
 .next/
+.turbo/
+
+# Automaker
 .automaker/images/
 .automaker/
 /.automaker/*
 /.automaker/
 
-/logs
+.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
+
+docker-compose.override.yml

.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

.prettierignore

@@ -0,0 +1,39 @@
+# Dependencies
+node_modules/
+
+# Build outputs
+dist/
+build/
+out/
+.next/
+.turbo/
+release/
+
+# Automaker
+.automaker/
+
+# Logs
+logs/
+*.log
+
+# Lock files
+package-lock.json
+pnpm-lock.yaml
+
+# Generated files
+*.min.js
+*.min.css
+
+# Test artifacts
+test-results/
+coverage/
+playwright-report/
+blob-report/
+
+# IDE/Editor
+.vscode/
+.idea/
+
+# Electron
+dist-electron/
+server-bundle/

.prettierrc

@@ -0,0 +1,10 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 100,
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "endOfLine": "lf"
+}

DISCLAIMER.md

@@ -30,6 +30,26 @@ Before running Automaker, we strongly recommend reviewing the source code yourse
 - **Virtual Machine**: Use a VM (such as VirtualBox, VMware, or Parallels) to create an isolated environment
 - **Cloud Development Environment**: Use a cloud-based development environment that provides isolation
 
+#### Running in Isolated Docker Container
+
+For maximum security, run Automaker in an isolated Docker container that **cannot access your laptop's files**:
+
+```bash
+# 1. Set your API key (bash/Linux/Mac - creates UTF-8 file)
+echo "ANTHROPIC_API_KEY=your-api-key-here" > .env
+
+# On Windows PowerShell, use instead:
+Set-Content -Path .env -Value "ANTHROPIC_API_KEY=your-api-key-here" -Encoding UTF8
+
+# 2. Build and run isolated container
+docker-compose up -d
+
+# 3. Access the UI at http://localhost:3007
+#    API at http://localhost:3008/api/health
+```
+
+The container uses only Docker-managed volumes and has no access to your host filesystem. See [docker-isolation.md](docs/docker-isolation.md) for full documentation.
+
 ### 3. Limit Access
 
 If you must run locally:

README.md

@@ -1,17 +1,52 @@
+<p align="center">
+  <img src="apps/ui/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).
+> **Learn how:** Master these same techniques and workflows in the [Agentic Jumpstart course](https://agenticjumpstart.com/?utm=automaker-gh).
 
 # Automaker
 
 **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.
@@ -26,7 +61,7 @@ Traditional development tools help you write code. Automaker helps you **orchest
 
 ### 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.
+Automaker leverages the [Claude Agent SDK](https://platform.claude.com/docs/en/agent-sdk/overview) 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
 
@@ -44,7 +79,24 @@ The future of software development is **agentic coding**—where developers beco
 >
 > **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)**
+> **[Read the full disclaimer](./DISCLAIMER.md)**
+
+---
+
+## 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
 
 ---
 
@@ -54,19 +106,22 @@ The future of software development is **agentic coding**—where developers beco
 
 - Node.js 18+
 - npm
-- [Claude Code CLI](https://docs.anthropic.com/en/docs/claude-code) installed and authenticated
+- [Claude Code CLI](https://code.claude.com/docs/en/overview) installed and authenticated
 
 ### Quick Start
 
 ```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. Run Automaker (pick your mode)
+# 3. Build local shared packages
+npm run build:packages
+
+# 4. Run Automaker (pick your mode)
 npm run dev
 # Then choose your run mode when prompted, or use specific commands below
 ```
@@ -144,21 +199,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`.
@@ -205,19 +256,16 @@ This project is licensed under the **Automaker License Agreement**. See [LICENSE
 **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:**

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/.eslintrc.js

@@ -1,5 +0,0 @@
-module.exports = {
-  rules: {
-    "@typescript-eslint/no-require-imports": "off",
-  },
-};

apps/app/electron/main.js

@@ -1,435 +0,0 @@
-/**
- * Simplified Electron main process
- *
- * This version spawns the backend server and uses HTTP API for most operations.
- * Only native features (dialogs, shell) use IPC.
- */
-
-const path = require("path");
-const { spawn } = require("child_process");
-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, cross-platform
-function getIconPath() {
-  // 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();
-      }
-    });
-  });
-}
-
-/**
- * Start the backend server
- */
-async function startServer() {
-  const isDev = !app.isPackaged;
-
-  // 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(command, args, {
-    cwd: path.dirname(serverPath),
-    env,
-    stdio: ["ignore", "pipe", "pipe"],
-  });
-
-  serverProcess.stdout.on("data", (data) => {
-    console.log(`[Server] ${data.toString().trim()}`);
-  });
-
-  serverProcess.stderr.on("data", (data) => {
-    console.error(`[Server Error] ${data.toString().trim()}`);
-  });
-
-  serverProcess.on("close", (code) => {
-    console.log(`[Server] Process exited with code ${code}`);
-    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();
-}
-
-/**
- * Wait for server to be available
- */
-async function waitForServer(maxAttempts = 30) {
-  const http = require("http");
-
-  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}`));
-            }
-          }
-        );
-        req.on("error", reject);
-        req.setTimeout(1000, () => {
-          req.destroy();
-          reject(new Error("Timeout"));
-        });
-      });
-      console.log("[Electron] Server is ready");
-      return;
-    } catch {
-      await new Promise((r) => setTimeout(r, 500));
-    }
-  }
-
-  throw new Error("Server failed to start");
-}
-
-/**
- * Create the main window
- */
-function createWindow() {
-  const iconPath = getIconPath();
-  const windowOptions = {
-    width: 1400,
-    height: 900,
-    minWidth: 1024,
-    minHeight: 700,
-    webPreferences: {
-      preload: path.join(__dirname, "preload.js"),
-      contextIsolation: true,
-      nodeIntegration: false,
-    },
-    titleBarStyle: "hiddenInset",
-    backgroundColor: "#0a0a0a",
-  };
-
-  // 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;
-  mainWindow.loadURL(`http://localhost:${STATIC_PORT}`);
-  if (isDev && process.env.OPEN_DEVTOOLS === "true") {
-    mainWindow.webContents.openDevTools();
-  }
-
-  mainWindow.on("closed", () => {
-    mainWindow = null;
-  });
-
-  // Handle external links - open in default browser
-  mainWindow.webContents.setWindowOpenHandler(({ url }) => {
-    shell.openExternal(url);
-    return { action: "deny" };
-  });
-}
-
-// App lifecycle
-app.whenReady().then(async () => {
-  // Set app icon (dock icon on macOS)
-  if (process.platform === "darwin" && app.dock) {
-    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();
-
-    // Create window
-    createWindow();
-  } catch (error) {
-    console.error("[Electron] Failed to start:", error);
-    app.quit();
-  }
-
-  app.on("activate", () => {
-    if (BrowserWindow.getAllWindows().length === 0) {
-      createWindow();
-    }
-  });
-});
-
-app.on("window-all-closed", () => {
-  if (process.platform !== "darwin") {
-    app.quit();
-  }
-});
-
-app.on("before-quit", () => {
-  // Kill server process
-  if (serverProcess) {
-    console.log("[Electron] Stopping server...");
-    serverProcess.kill();
-    serverProcess = null;
-  }
-
-  // Close static server
-  if (staticServer) {
-    console.log("[Electron] Stopping static server...");
-    staticServer.close();
-    staticServer = null;
-  }
-});
-
-// ============================================
-// IPC Handlers - Only native features
-// ============================================
-
-// Native file dialogs
-ipcMain.handle("dialog:openDirectory", async () => {
-  const result = await dialog.showOpenDialog(mainWindow, {
-    properties: ["openDirectory", "createDirectory"],
-  });
-  return result;
-});
-
-ipcMain.handle("dialog:openFile", async (_, options = {}) => {
-  const result = await dialog.showOpenDialog(mainWindow, {
-    properties: ["openFile"],
-    ...options,
-  });
-  return result;
-});
-
-ipcMain.handle("dialog:saveFile", async (_, options = {}) => {
-  const result = await dialog.showSaveDialog(mainWindow, options);
-  return result;
-});
-
-// Shell operations
-ipcMain.handle("shell:openExternal", async (_, url) => {
-  try {
-    await shell.openExternal(url);
-    return { success: true };
-  } catch (error) {
-    return { success: false, error: error.message };
-  }
-});
-
-ipcMain.handle("shell:openPath", async (_, filePath) => {
-  try {
-    await shell.openPath(filePath);
-    return { success: true };
-  } catch (error) {
-    return { success: false, error: error.message };
-  }
-});
-
-// App info
-ipcMain.handle("app:getPath", async (_, name) => {
-  return app.getPath(name);
-});
-
-ipcMain.handle("app:getVersion", async () => {
-  return app.getVersion();
-});
-
-ipcMain.handle("app:isPackaged", async () => {
-  return app.isPackaged;
-});
-
-// Ping - for connection check
-ipcMain.handle("ping", async () => {
-  return "pong";
-});
-
-// Get server URL for HTTP client
-ipcMain.handle("server:getUrl", async () => {
-  return `http://localhost:${SERVER_PORT}`;
-});

apps/app/electron/preload.js

@@ -1,37 +0,0 @@
-/**
- * Simplified Electron preload script
- *
- * Only exposes native features (dialogs, shell) and server URL.
- * All other operations go through HTTP API.
- */
-
-const { contextBridge, ipcRenderer } = require("electron");
-
-// Expose minimal API for native features
-contextBridge.exposeInMainWorld("electronAPI", {
-  // Platform info
-  platform: process.platform,
-  isElectron: true,
-
-  // Connection check
-  ping: () => ipcRenderer.invoke("ping"),
-
-  // Get server URL for HTTP client
-  getServerUrl: () => ipcRenderer.invoke("server:getUrl"),
-
-  // Native dialogs - better UX than prompt()
-  openDirectory: () => ipcRenderer.invoke("dialog:openDirectory"),
-  openFile: (options) => ipcRenderer.invoke("dialog:openFile", options),
-  saveFile: (options) => ipcRenderer.invoke("dialog:saveFile", options),
-
-  // Shell operations
-  openExternalLink: (url) => ipcRenderer.invoke("shell:openExternal", url),
-  openPath: (filePath) => ipcRenderer.invoke("shell:openPath", filePath),
-
-  // App info
-  getPath: (name) => ipcRenderer.invoke("app:getPath", name),
-  getVersion: () => ipcRenderer.invoke("app:getVersion"),
-  isPackaged: () => ipcRenderer.invoke("app:isPackaged"),
-});
-
-console.log("[Preload] Electron API exposed (simplified mode)");

apps/app/eslint.config.mjs

@@ -1,20 +0,0 @@
-import { defineConfig, globalIgnores } from "eslint/config";
-import nextVitals from "eslint-config-next/core-web-vitals";
-import nextTs from "eslint-config-next/typescript";
-
-const eslintConfig = defineConfig([
-  ...nextVitals,
-  ...nextTs,
-  // Override default ignores of eslint-config-next.
-  globalIgnores([
-    // Default ignores of eslint-config-next:
-    ".next/**",
-    "out/**",
-    "build/**",
-    "next-env.d.ts",
-    // Electron files use CommonJS
-    "electron/**",
-  ]),
-]);
-
-export default eslintConfig;

apps/app/next.config.ts

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

apps/app/playwright.config.ts

@@ -1,39 +0,0 @@
-import { defineConfig, devices } from "@playwright/test";
-
-const port = process.env.TEST_PORT || 3007;
-const reuseServer = process.env.TEST_REUSE_SERVER === "true";
-
-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: 30000,
-  use: {
-    baseURL: `http://localhost:${port}`,
-    trace: "on-first-retry",
-    screenshot: "only-on-failure",
-  },
-  projects: [
-    {
-      name: "chromium",
-      use: { ...devices["Desktop Chrome"] },
-    },
-  ],
-  ...(reuseServer
-    ? {}
-    : {
-        webServer: {
-          command: `npx next dev -p ${port}`,
-          url: `http://localhost:${port}`,
-          reuseExistingServer: !process.env.CI,
-          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/postcss.config.mjs

@@ -1,7 +0,0 @@
-const config = {
-  plugins: {
-    "@tailwindcss/postcss": {},
-  },
-};
-
-export default config;

apps/app/server-bundle/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@automaker/server-bundle",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "dist/index.js",
+  "dependencies": {
+    "@anthropic-ai/claude-agent-sdk": "^0.1.61",
+    "cors": "^2.8.5",
+    "dotenv": "^17.2.3",
+    "express": "^5.1.0",
+    "morgan": "^1.10.1",
+    "node-pty": "1.1.0-beta41",
+    "ws": "^8.18.0"
+  }
+}

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

@@ -1,97 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-
-interface AnthropicResponse {
-  content?: Array<{ type: string; text?: string }>;
-  model?: string;
-  error?: { message?: string };
-}
-
-export async function POST(request: NextRequest) {
-  try {
-    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;
-
-    if (!effectiveApiKey) {
-      return NextResponse.json(
-        { success: false, error: "No API key provided or configured in environment" },
-        { status: 400 }
-      );
-    }
-
-    // Send a simple test prompt to the Anthropic API
-    const response = await fetch("https://api.anthropic.com/v1/messages", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        "x-api-key": effectiveApiKey,
-        "anthropic-version": "2023-06-01",
-      },
-      body: JSON.stringify({
-        model: "claude-sonnet-4-20250514",
-        max_tokens: 100,
-        messages: [
-          {
-            role: "user",
-            content: "Respond with exactly: 'Claude API connection successful!' and nothing else.",
-          },
-        ],
-      }),
-    });
-
-    if (!response.ok) {
-      const errorData = (await response.json()) as AnthropicResponse;
-      const errorMessage = errorData.error?.message || `HTTP ${response.status}`;
-
-      if (response.status === 401) {
-        return NextResponse.json(
-          { success: false, error: "Invalid API key. Please check your Anthropic API key." },
-          { status: 401 }
-        );
-      }
-
-      if (response.status === 429) {
-        return NextResponse.json(
-          { success: false, error: "Rate limit exceeded. Please try again later." },
-          { status: 429 }
-        );
-      }
-
-      return NextResponse.json(
-        { success: false, error: `API error: ${errorMessage}` },
-        { status: response.status }
-      );
-    }
-
-    const data = (await response.json()) as AnthropicResponse;
-
-    // Check if we got a valid response
-    if (data.content && data.content.length > 0) {
-      const textContent = data.content.find((block) => block.type === "text");
-      if (textContent && textContent.type === "text" && textContent.text) {
-        return NextResponse.json({
-          success: true,
-          message: `Connection successful! Response: "${textContent.text}"`,
-          model: data.model,
-        });
-      }
-    }
-
-    return NextResponse.json({
-      success: true,
-      message: "Connection successful! Claude responded.",
-      model: data.model,
-    });
-  } catch (error: unknown) {
-    console.error("Claude API test error:", error);
-
-    const errorMessage =
-      error instanceof Error ? error.message : "Failed to connect to Claude API";
-
-    return NextResponse.json(
-      { success: false, error: errorMessage },
-      { status: 500 }
-    );
-  }
-}

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

@@ -1,191 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-
-interface GeminiContent {
-  parts: Array<{
-    text?: string;
-    inlineData?: {
-      mimeType: string;
-      data: string;
-    };
-  }>;
-  role?: string;
-}
-
-interface GeminiRequest {
-  contents: GeminiContent[];
-  generationConfig?: {
-    maxOutputTokens?: number;
-    temperature?: number;
-  };
-}
-
-interface GeminiResponse {
-  candidates?: Array<{
-    content: {
-      parts: Array<{
-        text: string;
-      }>;
-      role: string;
-    };
-    finishReason: string;
-    safetyRatings?: Array<{
-      category: string;
-      probability: string;
-    }>;
-  }>;
-  promptFeedback?: {
-    safetyRatings?: Array<{
-      category: string;
-      probability: string;
-    }>;
-  };
-  error?: {
-    code: number;
-    message: string;
-    status: string;
-  };
-}
-
-export async function POST(request: NextRequest) {
-  try {
-    const { apiKey, imageData, mimeType, prompt } = await request.json();
-
-    // Use provided API key or fall back to environment variable
-    const effectiveApiKey = apiKey || process.env.GOOGLE_API_KEY;
-
-    if (!effectiveApiKey) {
-      return NextResponse.json(
-        { success: false, error: "No API key provided or configured in environment" },
-        { status: 400 }
-      );
-    }
-
-    // Build the request body
-    const requestBody: GeminiRequest = {
-      contents: [
-        {
-          parts: [],
-        },
-      ],
-      generationConfig: {
-        maxOutputTokens: 150,
-        temperature: 0.4,
-      },
-    };
-
-    // Add image if provided
-    if (imageData && mimeType) {
-      requestBody.contents[0].parts.push({
-        inlineData: {
-          mimeType: mimeType,
-          data: imageData,
-        },
-      });
-    }
-
-    // Add text prompt
-    const textPrompt = prompt || (imageData
-      ? "Describe what you see in this image briefly."
-      : "Respond with exactly: 'Gemini SDK connection successful!' and nothing else.");
-
-    requestBody.contents[0].parts.push({
-      text: textPrompt,
-    });
-
-    // Call Gemini API - using gemini-1.5-flash as it supports both text and vision
-    const model = imageData ? "gemini-1.5-flash" : "gemini-1.5-flash";
-    const geminiUrl = `https://generativelanguage.googleapis.com/v1beta/models/${model}:generateContent?key=${effectiveApiKey}`;
-
-    const response = await fetch(geminiUrl, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(requestBody),
-    });
-
-    const data: GeminiResponse = await response.json();
-
-    // Check for API errors
-    if (data.error) {
-      const errorMessage = data.error.message || "Unknown Gemini API error";
-      const statusCode = data.error.code || 500;
-
-      if (statusCode === 400 && errorMessage.includes("API key")) {
-        return NextResponse.json(
-          { success: false, error: "Invalid API key. Please check your Google API key." },
-          { status: 401 }
-        );
-      }
-
-      if (statusCode === 429) {
-        return NextResponse.json(
-          { success: false, error: "Rate limit exceeded. Please try again later." },
-          { status: 429 }
-        );
-      }
-
-      return NextResponse.json(
-        { success: false, error: `API error: ${errorMessage}` },
-        { status: statusCode }
-      );
-    }
-
-    // Check for valid response
-    if (!response.ok) {
-      return NextResponse.json(
-        { success: false, error: `HTTP error: ${response.status} ${response.statusText}` },
-        { status: response.status }
-      );
-    }
-
-    // Extract response text
-    if (data.candidates && data.candidates.length > 0 && data.candidates[0].content?.parts?.length > 0) {
-      const responseText = data.candidates[0].content.parts
-        .filter((part) => part.text)
-        .map((part) => part.text)
-        .join("");
-
-      return NextResponse.json({
-        success: true,
-        message: `Connection successful! Response: "${responseText.substring(0, 200)}${responseText.length > 200 ? '...' : ''}"`,
-        model: model,
-        hasImage: !!imageData,
-      });
-    }
-
-    // Handle blocked responses
-    if (data.promptFeedback?.safetyRatings) {
-      return NextResponse.json({
-        success: true,
-        message: "Connection successful! Gemini responded (response may have been filtered).",
-        model: model,
-        hasImage: !!imageData,
-      });
-    }
-
-    return NextResponse.json({
-      success: true,
-      message: "Connection successful! Gemini responded.",
-      model: model,
-      hasImage: !!imageData,
-    });
-  } catch (error: unknown) {
-    console.error("Gemini API test error:", error);
-
-    if (error instanceof TypeError && error.message.includes("fetch")) {
-      return NextResponse.json(
-        { success: false, error: "Network error. Unable to reach Gemini API." },
-        { status: 503 }
-      );
-    }
-
-    const errorMessage =
-      error instanceof Error ? error.message : "Failed to connect to Gemini API";
-
-    return NextResponse.json(
-      { success: false, error: errorMessage },
-      { status: 500 }
-    );
-  }
-}

apps/app/src/app/layout.tsx

@@ -1,26 +0,0 @@
-import type { Metadata } from "next";
-import { GeistSans } from "geist/font/sans";
-import { GeistMono } from "geist/font/mono";
-import { Toaster } from "sonner";
-import "./globals.css";
-export const metadata: Metadata = {
-  title: "Automaker - Autonomous AI Development Studio",
-  description: "Build software autonomously with intelligent orchestration",
-};
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <html lang="en" suppressHydrationWarning>
-      <body
-        className={`${GeistSans.variable} ${GeistMono.variable} antialiased`}
-      >
-        {children}
-        <Toaster richColors position="bottom-right" />
-      </body>
-    </html>
-  );
-}

apps/app/src/app/page.tsx

@@ -1,255 +0,0 @@
-"use client";
-
-import { useEffect, useState, useCallback } from "react";
-import { Sidebar } from "@/components/layout/sidebar";
-import { WelcomeView } from "@/components/views/welcome-view";
-import { BoardView } from "@/components/views/board-view";
-import { SpecView } from "@/components/views/spec-view";
-import { AgentView } from "@/components/views/agent-view";
-import { SettingsView } from "@/components/views/settings-view";
-import { InterviewView } from "@/components/views/interview-view";
-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";
-import {
-  FileBrowserProvider,
-  useFileBrowser,
-  setGlobalFileBrowser,
-} from "@/contexts/file-browser-context";
-
-function HomeContent() {
-  const {
-    currentView,
-    setCurrentView,
-    setIpcConnected,
-    theme,
-    currentProject,
-    previewTheme,
-    getEffectiveTheme,
-  } = useAppStore();
-  const { isFirstRun, setupComplete } = useSetupStore();
-  const [isMounted, setIsMounted] = useState(false);
-  const [streamerPanelOpen, setStreamerPanelOpen] = useState(false);
-  const { openFileBrowser } = useFileBrowser();
-
-  // Hidden streamer panel - opens with "\" key
-  const handleStreamerPanelShortcut = useCallback((event: KeyboardEvent) => {
-    // Don't trigger when typing in inputs
-    const activeElement = document.activeElement;
-    if (activeElement) {
-      const tagName = activeElement.tagName.toLowerCase();
-      if (
-        tagName === "input" ||
-        tagName === "textarea" ||
-        tagName === "select"
-      ) {
-        return;
-      }
-      if (activeElement.getAttribute("contenteditable") === "true") {
-        return;
-      }
-      const role = activeElement.getAttribute("role");
-      if (role === "textbox" || role === "searchbox" || role === "combobox") {
-        return;
-      }
-    }
-
-    // Don't trigger with modifier keys
-    if (event.ctrlKey || event.altKey || event.metaKey) {
-      return;
-    }
-
-    // Check for "\" key (backslash)
-    if (event.key === "\\") {
-      event.preventDefault();
-      setStreamerPanelOpen((prev) => !prev);
-    }
-  }, []);
-
-  // Register the "\" shortcut for streamer panel
-  useEffect(() => {
-    window.addEventListener("keydown", handleStreamerPanelShortcut);
-    return () => {
-      window.removeEventListener("keydown", handleStreamerPanelShortcut);
-    };
-  }, [handleStreamerPanelShortcut]);
-
-  // Compute the effective theme: previewTheme takes priority, then project theme, then global theme
-  // This is reactive because it depends on previewTheme, currentProject, and theme from the store
-  const effectiveTheme = getEffectiveTheme();
-
-  // Prevent hydration issues
-  useEffect(() => {
-    setIsMounted(true);
-  }, []);
-
-  // Initialize global file browser for HttpApiClient
-  useEffect(() => {
-    setGlobalFileBrowser(openFileBrowser);
-  }, [openFileBrowser]);
-
-  // Check if this is first run and redirect to setup if needed
-  useEffect(() => {
-    console.log("[Setup Flow] Checking setup state:", {
-      isMounted,
-      isFirstRun,
-      setupComplete,
-      currentView,
-      shouldShowSetup: isMounted && isFirstRun && !setupComplete,
-    });
-
-    if (isMounted && isFirstRun && !setupComplete) {
-      console.log(
-        "[Setup Flow] Redirecting to setup wizard (first run, not complete)"
-      );
-      setCurrentView("setup");
-    } else if (isMounted && setupComplete) {
-      console.log("[Setup Flow] Setup already complete, showing normal view");
-    }
-  }, [isMounted, isFirstRun, setupComplete, setCurrentView, currentView]);
-
-  // Test IPC connection on mount
-  useEffect(() => {
-    const testConnection = async () => {
-      try {
-        const api = getElectronAPI();
-        const result = await api.ping();
-        setIpcConnected(result === "pong");
-      } catch (error) {
-        console.error("IPC connection failed:", error);
-        setIpcConnected(false);
-      }
-    };
-
-    testConnection();
-  }, [setIpcConnected]);
-
-  // Apply theme class to document (uses effective theme - preview, project-specific, or global)
-  useEffect(() => {
-    const root = document.documentElement;
-    root.classList.remove(
-      "dark",
-      "retro",
-      "light",
-      "dracula",
-      "nord",
-      "monokai",
-      "tokyonight",
-      "solarized",
-      "gruvbox",
-      "catppuccin",
-      "onedark",
-      "synthwave",
-      "red"
-    );
-
-    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");
-    } else if (effectiveTheme === "system") {
-      // System theme
-      const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-      if (isDark) {
-        root.classList.add("dark");
-      } else {
-        root.classList.add("light");
-      }
-    }
-  }, [effectiveTheme, previewTheme, currentProject, theme]);
-
-  const renderView = () => {
-    switch (currentView) {
-      case "welcome":
-        return <WelcomeView />;
-      case "setup":
-        return <SetupView />;
-      case "board":
-        return <BoardView />;
-      case "spec":
-        return <SpecView />;
-      case "agent":
-        return <AgentView />;
-      case "settings":
-        return <SettingsView />;
-      case "interview":
-        return <InterviewView />;
-      case "context":
-        return <ContextView />;
-      case "profiles":
-        return <ProfilesView />;
-      case "running-agents":
-        return <RunningAgentsView />;
-      case "terminal":
-        return <TerminalView />;
-      case "wiki":
-        return <WikiView />;
-      default:
-        return <WelcomeView />;
-    }
-  };
-
-  // Setup view is full-screen without sidebar
-  if (currentView === "setup") {
-    return (
-      <main className="h-screen overflow-hidden" data-testid="app-container">
-        <SetupView />
-      </main>
-    );
-  }
-
-  return (
-    <main className="flex h-screen overflow-hidden" data-testid="app-container">
-      <Sidebar />
-      <div
-        className="flex-1 flex flex-col overflow-hidden transition-all duration-300"
-        style={{ marginRight: streamerPanelOpen ? "250px" : "0" }}
-      >
-        {renderView()}
-      </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 ${
-          streamerPanelOpen ? "translate-x-0" : "translate-x-full"
-        }`}
-      />
-    </main>
-  );
-}
-
-export default function Home() {
-  return (
-    <FileBrowserProvider>
-      <HomeContent />
-    </FileBrowserProvider>
-  );
-}

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

@@ -1,316 +0,0 @@
-"use client";
-
-import { useState, useEffect, useRef } from "react";
-import {
-  FolderOpen,
-  Folder,
-  ChevronRight,
-  Home,
-  ArrowLeft,
-  HardDrive,
-  CornerDownLeft,
-} from "lucide-react";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-
-interface DirectoryEntry {
-  name: string;
-  path: string;
-}
-
-interface BrowseResult {
-  success: boolean;
-  currentPath: string;
-  parentPath: string | null;
-  directories: DirectoryEntry[];
-  drives?: string[];
-  error?: string;
-  warning?: string;
-}
-
-interface FileBrowserDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  onSelect: (path: string) => void;
-  title?: string;
-  description?: string;
-  initialPath?: string;
-}
-
-export function FileBrowserDialog({
-  open,
-  onOpenChange,
-  onSelect,
-  title = "Select Project Directory",
-  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 pathInputRef = useRef<HTMLInputElement>(null);
-
-  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 response = await fetch(`${serverUrl}/api/fs/browse`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ dirPath }),
-      });
-
-      const result: BrowseResult = await response.json();
-
-      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"
-      );
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  // Reset current path when dialog closes
-  useEffect(() => {
-    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);
-  };
-
-  const handleGoToParent = () => {
-    if (parentPath) {
-      browseDirectory(parentPath);
-    }
-  };
-
-  const handleGoHome = () => {
-    browseDirectory();
-  };
-
-  const handleSelectDrive = (drivePath: string) => {
-    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) {
-      onSelect(currentPath);
-      onOpenChange(false);
-    }
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="bg-popover border-border max-w-2xl max-h-[80vh] overflow-hidden flex flex-col">
-        <DialogHeader className="pb-2">
-          <DialogTitle className="flex items-center gap-2">
-            <FolderOpen className="w-5 h-5 text-brand-500" />
-            {title}
-          </DialogTitle>
-          <DialogDescription className="text-muted-foreground">
-            {description}
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className="flex flex-col gap-3 min-h-[400px] flex-1 overflow-hidden py-2">
-          {/* Direct path input */}
-          <div className="flex items-center gap-2">
-            <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-sm"
-              data-testid="path-input"
-              disabled={loading}
-            />
-            <Button
-              variant="secondary"
-              size="sm"
-              onClick={handleGoToPath}
-              disabled={loading || !pathInput.trim()}
-              data-testid="go-to-path-button"
-            >
-              <CornerDownLeft className="w-4 h-4 mr-1" />
-              Go
-            </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">
-                <HardDrive className="w-3 h-3" />
-                <span>Drives:</span>
-              </div>
-              {drives.map((drive) => (
-                <Button
-                  key={drive}
-                  variant={
-                    currentPath.startsWith(drive) ? "default" : "outline"
-                  }
-                  size="sm"
-                  onClick={() => handleSelectDrive(drive)}
-                  className="h-7 px-3 text-xs"
-                  disabled={loading}
-                >
-                  {drive.replace("\\", "")}
-                </Button>
-              ))}
-            </div>
-          )}
-
-          {/* Current path breadcrumb */}
-          <div className="flex items-center gap-2 p-3 rounded-lg bg-sidebar-accent/10 border border-sidebar-border">
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={handleGoHome}
-              className="h-7 px-2"
-              disabled={loading}
-            >
-              <Home className="w-4 h-4" />
-            </Button>
-            {parentPath && (
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={handleGoToParent}
-                className="h-7 px-2"
-                disabled={loading}
-              >
-                <ArrowLeft className="w-4 h-4" />
-              </Button>
-            )}
-            <div className="flex-1 font-mono text-sm truncate text-muted-foreground">
-              {currentPath || "Loading..."}
-            </div>
-          </div>
-
-          {/* Directory list */}
-          <div className="flex-1 overflow-y-auto border border-sidebar-border rounded-lg">
-            {loading && (
-              <div className="flex items-center justify-center h-full p-8">
-                <div className="text-sm 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>
-            )}
-
-            {warning && (
-              <div className="p-3 bg-yellow-500/10 border border-yellow-500/30 rounded-lg mb-2">
-                <div className="text-sm text-yellow-500">{warning}</div>
-              </div>
-            )}
-
-            {!loading && !error && !warning && 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>
-              </div>
-            )}
-
-            {!loading && !error && directories.length > 0 && (
-              <div className="divide-y divide-sidebar-border">
-                {directories.map((dir) => (
-                  <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"
-                  >
-                    <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" />
-                  </button>
-                ))}
-              </div>
-            )}
-          </div>
-
-          <div className="text-xs 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="border-t border-border pt-4 gap-2">
-          <Button variant="ghost" onClick={() => onOpenChange(false)}>
-            Cancel
-          </Button>
-          <Button onClick={handleSelect} disabled={!currentPath || loading}>
-            <FolderOpen className="w-4 h-4 mr-2" />
-            Select Current Folder
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}

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

@@ -1,167 +0,0 @@
-"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/ui/badge.tsx

@@ -1,57 +0,0 @@
-import * as React from "react";
-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-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/90",
-        secondary:
-          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        destructive:
-          "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",
-    },
-  }
-);
-
-export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
-
-function Badge({ className, variant, size, ...props }: BadgeProps) {
-  return (
-    <div className={cn(badgeVariants({ variant, size }), className)} {...props} />
-  );
-}
-
-export { Badge, badgeVariants };

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

@@ -1,100 +0,0 @@
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-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-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}
-    />
-  );
-}
-
-function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-header"
-      className={cn(
-        "@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}
-    />
-  );
-}
-
-function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-title"
-      className={cn("leading-none font-semibold tracking-tight", className)}
-      {...props}
-    />
-  );
-}
-
-function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-description"
-      className={cn("text-muted-foreground text-sm leading-relaxed", className)}
-      {...props}
-    />
-  );
-}
-
-function CardAction({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-action"
-      className={cn(
-        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-function CardContent({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-content"
-      className={cn("px-6", className)}
-      {...props}
-    />
-  );
-}
-
-function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-footer"
-      className={cn("flex items-center gap-3 px-6 [.border-t]:pt-6", className)}
-      {...props}
-    />
-  );
-}
-
-export {
-  Card,
-  CardHeader,
-  CardFooter,
-  CardTitle,
-  CardAction,
-  CardDescription,
-  CardContent,
-};

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

@@ -1,91 +0,0 @@
-"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";
-
-interface CategoryAutocompleteProps {
-  value: string;
-  onChange: (value: string) => void;
-  suggestions: string[];
-  placeholder?: string;
-  className?: string;
-  disabled?: boolean;
-  "data-testid"?: string;
-}
-
-export function CategoryAutocomplete({
-  value,
-  onChange,
-  suggestions,
-  placeholder = "Select or type a category...",
-  className,
-  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>
-  );
-}

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

@@ -1,30 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-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")}
-    >
-      <Check className="h-4 w-4" />
-    </CheckboxPrimitive.Indicator>
-  </CheckboxPrimitive.Root>
-));
-Checkbox.displayName = CheckboxPrimitive.Root.displayName;
-
-export { Checkbox };

apps/app/src/components/ui/course-promo-badge.tsx

@@ -1,88 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { Sparkles, X } from "lucide-react";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-
-interface CoursePromoBadgeProps {
-  sidebarOpen?: boolean;
-}
-
-export function CoursePromoBadge({ sidebarOpen = true }: CoursePromoBadgeProps) {
-  const [dismissed, setDismissed] = React.useState(false);
-
-  if (dismissed) {
-    return null;
-  }
-
-  // Collapsed state - show only icon with tooltip
-  if (!sidebarOpen) {
-    return (
-      <div className="p-2 pb-0 flex justify-center">
-        <TooltipProvider delayDuration={300}>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <a
-                href="https://agenticjumpstart.com"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="group cursor-pointer flex items-center justify-center w-10 h-10 bg-primary/10 text-primary rounded-lg hover:bg-primary/20 transition-all border border-primary/30"
-                data-testid="course-promo-badge-collapsed"
-              >
-                <Sparkles className="size-4 shrink-0" />
-              </a>
-            </TooltipTrigger>
-            <TooltipContent side="right" className="flex items-center gap-2">
-              <span>Become a 10x Dev</span>
-              <span
-                onClick={(e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  setDismissed(true);
-                }}
-                className="p-0.5 rounded-full hover:bg-primary/30 transition-colors cursor-pointer"
-                aria-label="Dismiss"
-              >
-                <X className="size-3" />
-              </span>
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
-      </div>
-    );
-  }
-
-  // Expanded state - show full badge
-  return (
-    <div className="p-2 pb-0">
-      <a
-        href="https://agenticjumpstart.com"
-        target="_blank"
-        rel="noopener noreferrer"
-        className="group cursor-pointer flex items-center justify-between w-full px-2 lg:px-3 py-2.5 bg-primary/10 text-primary rounded-lg font-medium text-sm hover:bg-primary/20 transition-all border border-primary/30"
-        data-testid="course-promo-badge"
-      >
-        <div className="flex items-center gap-2">
-          <Sparkles className="size-4 shrink-0" />
-          <span className="hidden lg:block">Become a 10x Dev</span>
-        </div>
-        <span
-          onClick={(e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            setDismissed(true);
-          }}
-          className="hidden lg:block p-1 rounded-full hover:bg-primary/30 transition-colors cursor-pointer"
-          aria-label="Dismiss"
-        >
-          <X className="size-3.5" />
-        </span>
-      </a>
-    </div>
-  );
-}

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

@@ -1,422 +0,0 @@
-"use client";
-
-import React, { useState, useRef, useCallback } from "react";
-import { cn } from "@/lib/utils";
-import { ImageIcon, X, Loader2 } from "lucide-react";
-import { Textarea } from "@/components/ui/textarea";
-import { getElectronAPI } from "@/lib/electron";
-import { useAppStore } from "@/store/app-store";
-
-export interface FeatureImagePath {
-  id: string;
-  path: string; // Path to the temp file
-  filename: string;
-  mimeType: string;
-}
-
-// Map to store preview data by image ID (persisted across component re-mounts)
-export type ImagePreviewMap = Map<string, string>;
-
-interface DescriptionImageDropZoneProps {
-  value: string;
-  onChange: (value: string) => void;
-  images: FeatureImagePath[];
-  onImagesChange: (images: FeatureImagePath[]) => void;
-  placeholder?: string;
-  className?: string;
-  disabled?: boolean;
-  maxFiles?: number;
-  maxFileSize?: number; // in bytes, default 10MB
-  // Optional: pass preview map from parent to persist across tab switches
-  previewMap?: ImagePreviewMap;
-  onPreviewMapChange?: (map: ImagePreviewMap) => void;
-  autoFocus?: boolean;
-  error?: boolean; // Show error state with red border
-}
-
-const ACCEPTED_IMAGE_TYPES = [
-  "image/jpeg",
-  "image/jpg",
-  "image/png",
-  "image/gif",
-  "image/webp",
-];
-const DEFAULT_MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
-
-export function DescriptionImageDropZone({
-  value,
-  onChange,
-  images,
-  onImagesChange,
-  placeholder = "Describe the feature...",
-  className,
-  disabled = false,
-  maxFiles = 5,
-  maxFileSize = DEFAULT_MAX_FILE_SIZE,
-  previewMap,
-  onPreviewMapChange,
-  autoFocus = false,
-  error = false,
-}: DescriptionImageDropZoneProps) {
-  const [isDragOver, setIsDragOver] = useState(false);
-  const [isProcessing, setIsProcessing] = useState(false);
-  // Use parent-provided preview map if available, otherwise use local state
-  const [localPreviewImages, setLocalPreviewImages] = useState<Map<string, string>>(
-    () => new Map()
-  );
-
-  // Determine which preview map to use - prefer parent-controlled state
-  const previewImages = previewMap !== undefined ? previewMap : localPreviewImages;
-  const setPreviewImages = useCallback((updater: Map<string, string> | ((prev: Map<string, string>) => Map<string, string>)) => {
-    if (onPreviewMapChange) {
-      const currentMap = previewMap !== undefined ? previewMap : localPreviewImages;
-      const newMap = typeof updater === 'function' ? updater(currentMap) : updater;
-      onPreviewMapChange(newMap);
-    } else {
-      setLocalPreviewImages((prev) => {
-        const newMap = typeof updater === 'function' ? updater(prev) : updater;
-        return newMap;
-      });
-    }
-  }, [onPreviewMapChange, previewMap, localPreviewImages]);
-
-  const fileInputRef = useRef<HTMLInputElement>(null);
-  const currentProject = useAppStore((state) => state.currentProject);
-
-  // Construct server URL for loading saved images
-  const getImageServerUrl = useCallback((imagePath: string): string => {
-    const serverUrl = process.env.NEXT_PUBLIC_SERVER_URL || "http://localhost:3008";
-    const projectPath = currentProject?.path || "";
-    return `${serverUrl}/api/fs/image?path=${encodeURIComponent(imagePath)}&projectPath=${encodeURIComponent(projectPath)}`;
-  }, [currentProject?.path]);
-
-  const fileToBase64 = (file: File): Promise<string> => {
-    return new Promise((resolve, reject) => {
-      const reader = new FileReader();
-      reader.onload = () => {
-        if (typeof reader.result === "string") {
-          resolve(reader.result);
-        } else {
-          reject(new Error("Failed to read file as base64"));
-        }
-      };
-      reader.onerror = () => reject(new Error("Failed to read file"));
-      reader.readAsDataURL(file);
-    });
-  };
-
-  const saveImageToTemp = useCallback(async (
-    base64Data: string,
-    filename: string,
-    mimeType: string
-  ): Promise<string | null> => {
-    try {
-      const api = getElectronAPI();
-      // Check if saveImageToTemp method exists
-      if (!api.saveImageToTemp) {
-        // Fallback path when saveImageToTemp is not available
-        console.log("[DescriptionImageDropZone] Using fallback path for image");
-        return `.automaker/images/${Date.now()}_${filename}`;
-      }
-
-      // Get projectPath from the store if available
-      const projectPath = currentProject?.path;
-      const result = await api.saveImageToTemp(base64Data, filename, mimeType, projectPath);
-      if (result.success && result.path) {
-        return result.path;
-      }
-      console.error("[DescriptionImageDropZone] Failed to save image:", result.error);
-      return null;
-    } catch (error) {
-      console.error("[DescriptionImageDropZone] Error saving image:", error);
-      return null;
-    }
-  }, [currentProject?.path]);
-
-  const processFiles = useCallback(
-    async (files: FileList) => {
-      if (disabled || isProcessing) return;
-
-      setIsProcessing(true);
-      const newImages: FeatureImagePath[] = [];
-      const newPreviews = new Map(previewImages);
-      const errors: string[] = [];
-
-      for (const file of Array.from(files)) {
-        // Validate file type
-        if (!ACCEPTED_IMAGE_TYPES.includes(file.type)) {
-          errors.push(
-            `${file.name}: Unsupported file type. Please use JPG, PNG, GIF, or WebP.`
-          );
-          continue;
-        }
-
-        // Validate file size
-        if (file.size > maxFileSize) {
-          const maxSizeMB = maxFileSize / (1024 * 1024);
-          errors.push(
-            `${file.name}: File too large. Maximum size is ${maxSizeMB}MB.`
-          );
-          continue;
-        }
-
-        // Check if we've reached max files
-        if (newImages.length + images.length >= maxFiles) {
-          errors.push(`Maximum ${maxFiles} images allowed.`);
-          break;
-        }
-
-        try {
-          const base64 = await fileToBase64(file);
-          const tempPath = await saveImageToTemp(base64, file.name, file.type);
-
-          if (tempPath) {
-            const imageId = `img-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`;
-            const imagePathRef: FeatureImagePath = {
-              id: imageId,
-              path: tempPath,
-              filename: file.name,
-              mimeType: file.type,
-            };
-            newImages.push(imagePathRef);
-            // Store preview for display
-            newPreviews.set(imageId, base64);
-          } else {
-            errors.push(`${file.name}: Failed to save image.`);
-          }
-        } catch (error) {
-          errors.push(`${file.name}: Failed to process image.`);
-        }
-      }
-
-      if (errors.length > 0) {
-        console.warn("Image upload errors:", errors);
-      }
-
-      if (newImages.length > 0) {
-        onImagesChange([...images, ...newImages]);
-        setPreviewImages(newPreviews);
-      }
-
-      setIsProcessing(false);
-    },
-    [disabled, isProcessing, images, maxFiles, maxFileSize, onImagesChange, previewImages, saveImageToTemp]
-  );
-
-  const handleDrop = useCallback(
-    (e: React.DragEvent) => {
-      e.preventDefault();
-      e.stopPropagation();
-      setIsDragOver(false);
-
-      if (disabled) return;
-
-      const files = e.dataTransfer.files;
-      if (files.length > 0) {
-        processFiles(files);
-      }
-    },
-    [disabled, processFiles]
-  );
-
-  const handleDragOver = useCallback(
-    (e: React.DragEvent) => {
-      e.preventDefault();
-      e.stopPropagation();
-      if (!disabled) {
-        setIsDragOver(true);
-      }
-    },
-    [disabled]
-  );
-
-  const handleDragLeave = useCallback((e: React.DragEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setIsDragOver(false);
-  }, []);
-
-  const handleFileSelect = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      const files = e.target.files;
-      if (files && files.length > 0) {
-        processFiles(files);
-      }
-      // Reset the input so the same file can be selected again
-      if (fileInputRef.current) {
-        fileInputRef.current.value = "";
-      }
-    },
-    [processFiles]
-  );
-
-  const handleBrowseClick = useCallback(() => {
-    if (!disabled && fileInputRef.current) {
-      fileInputRef.current.click();
-    }
-  }, [disabled]);
-
-  const removeImage = useCallback(
-    (imageId: string) => {
-      onImagesChange(images.filter((img) => img.id !== imageId));
-      setPreviewImages((prev) => {
-        const newMap = new Map(prev);
-        newMap.delete(imageId);
-        return newMap;
-      });
-    },
-    [images, onImagesChange]
-  );
-
-  return (
-    <div className={cn("relative", className)}>
-      {/* Hidden file input */}
-      <input
-        ref={fileInputRef}
-        type="file"
-        multiple
-        accept={ACCEPTED_IMAGE_TYPES.join(",")}
-        onChange={handleFileSelect}
-        className="hidden"
-        disabled={disabled}
-        data-testid="description-image-input"
-      />
-
-      {/* Drop zone wrapper */}
-      <div
-        onDrop={handleDrop}
-        onDragOver={handleDragOver}
-        onDragLeave={handleDragLeave}
-        className={cn(
-          "relative rounded-md transition-all duration-200",
-          {
-            "ring-2 ring-blue-400 ring-offset-2 ring-offset-background":
-              isDragOver && !disabled,
-          }
-        )}
-      >
-        {/* Drag overlay */}
-        {isDragOver && !disabled && (
-          <div
-            className="absolute inset-0 z-10 flex items-center justify-center rounded-md bg-blue-500/20 border-2 border-dashed border-blue-400 pointer-events-none"
-            data-testid="drop-overlay"
-          >
-            <div className="flex flex-col items-center gap-2 text-blue-400">
-              <ImageIcon className="w-8 h-8" />
-              <span className="text-sm font-medium">Drop images here</span>
-            </div>
-          </div>
-        )}
-
-        {/* Textarea */}
-        <Textarea
-          placeholder={placeholder}
-          value={value}
-          onChange={(e) => onChange(e.target.value)}
-          disabled={disabled}
-          autoFocus={autoFocus}
-          aria-invalid={error}
-          className={cn(
-            "min-h-[120px]",
-            isProcessing && "opacity-50 pointer-events-none"
-          )}
-          data-testid="feature-description-input"
-        />
-      </div>
-
-      {/* Hint text */}
-      <p className="text-xs text-muted-foreground mt-1">
-        Drag and drop images here or{" "}
-        <button
-          type="button"
-          onClick={handleBrowseClick}
-          className="text-primary hover:text-primary/80 underline"
-          disabled={disabled || isProcessing}
-        >
-          browse
-        </button>{" "}
-        to attach context images
-      </p>
-
-      {/* Processing indicator */}
-      {isProcessing && (
-        <div className="flex items-center gap-2 mt-2 text-sm text-muted-foreground">
-          <Loader2 className="w-4 h-4 animate-spin" />
-          <span>Saving images...</span>
-        </div>
-      )}
-
-      {/* Image previews */}
-      {images.length > 0 && (
-        <div className="mt-3 space-y-2" data-testid="description-image-previews">
-          <div className="flex items-center justify-between">
-            <p className="text-xs font-medium text-foreground">
-              {images.length} image{images.length > 1 ? "s" : ""} attached
-            </p>
-            <button
-              type="button"
-              onClick={() => {
-                onImagesChange([]);
-                setPreviewImages(new Map());
-              }}
-              className="text-xs text-muted-foreground hover:text-foreground"
-              disabled={disabled}
-            >
-              Clear all
-            </button>
-          </div>
-          <div className="flex flex-wrap gap-2">
-            {images.map((image) => (
-              <div
-                key={image.id}
-                className="relative group rounded-md border border-muted bg-muted/50 overflow-hidden"
-                data-testid={`description-image-preview-${image.id}`}
-              >
-                {/* Image thumbnail or placeholder */}
-                <div className="w-16 h-16 flex items-center justify-center bg-zinc-800">
-                  {previewImages.has(image.id) ? (
-                    <img
-                      src={previewImages.get(image.id)}
-                      alt={image.filename}
-                      className="max-w-full max-h-full object-contain"
-                    />
-                  ) : (
-                    <img
-                      src={getImageServerUrl(image.path)}
-                      alt={image.filename}
-                      className="max-w-full max-h-full object-contain"
-                      onError={(e) => {
-                        // If image fails to load, hide it
-                        (e.target as HTMLImageElement).style.display = 'none';
-                      }}
-                    />
-                  )}
-                </div>
-                {/* Remove button */}
-                {!disabled && (
-                  <button
-                    type="button"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      removeImage(image.id);
-                    }}
-                    className="absolute top-0.5 right-0.5 p-0.5 rounded-full bg-destructive text-destructive-foreground opacity-0 group-hover:opacity-100 transition-opacity"
-                    data-testid={`remove-description-image-${image.id}`}
-                  >
-                    <X className="h-3 w-3" />
-                  </button>
-                )}
-                {/* Filename tooltip on hover */}
-                <div className="absolute bottom-0 left-0 right-0 bg-black/60 px-1 py-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
-                  <p className="text-[10px] text-white truncate">
-                    {image.filename}
-                  </p>
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}

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

@@ -1,175 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { XIcon } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-function Dialog({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
-}
-
-function DialogTrigger({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
-}
-
-function DialogPortal({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
-}
-
-function DialogClose({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Close>) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
-}
-
-function DialogOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
-  return (
-    <DialogPrimitive.Overlay
-      data-slot="dialog-overlay"
-      className={cn(
-        "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}
-    />
-  );
-}
-
-function DialogContent({
-  className,
-  children,
-  showCloseButton = true,
-  compact = false,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Content> & {
-  showCloseButton?: boolean;
-  compact?: boolean;
-}) {
-  // Check if className contains a custom max-width
-  const hasCustomMaxWidth =
-    typeof className === "string" && className.includes("max-w-");
-
-  return (
-    <DialogPortal data-slot="dialog-portal">
-      <DialogOverlay />
-      <DialogPrimitive.Content
-        data-slot="dialog-content"
-        className={cn(
-          "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
-            ? "sm:max-w-2xl p-6"
-            : "p-6",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        {showCloseButton && (
-          <DialogPrimitive.Close
-            data-slot="dialog-close"
-            className={cn(
-              "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>
-        )}
-      </DialogPrimitive.Content>
-    </DialogPortal>
-  );
-}
-
-function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="dialog-header"
-      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
-      {...props}
-    />
-  );
-}
-
-function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="dialog-footer"
-      className={cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end mt-6",
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-function DialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Title>) {
-  return (
-    <DialogPrimitive.Title
-      data-slot="dialog-title"
-      className={cn("text-lg leading-none font-semibold tracking-tight", className)}
-      {...props}
-    />
-  );
-}
-
-function DialogDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Description>) {
-  return (
-    <DialogPrimitive.Description
-      data-slot="dialog-description"
-      className={cn("text-muted-foreground text-sm leading-relaxed", className)}
-      {...props}
-    />
-  );
-}
-
-export {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogOverlay,
-  DialogPortal,
-  DialogTitle,
-  DialogTrigger,
-};

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

@@ -1,200 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { Check, ChevronRight, Circle } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-const DropdownMenu = DropdownMenuPrimitive.Root
-
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
-
-const DropdownMenuGroup = DropdownMenuPrimitive.Group
-
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal
-
-const DropdownMenuSub = DropdownMenuPrimitive.Sub
-
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
-
-const DropdownMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean
-  }
->(({ className, inset, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubTrigger
-    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",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRight className="ml-auto h-4 w-4" />
-  </DropdownMenuPrimitive.SubTrigger>
-))
-DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName
-
-const DropdownMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-  <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>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <DropdownMenuPrimitive.Portal>
-    <DropdownMenuPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 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",
-        className
-      )}
-      {...props}
-    />
-  </DropdownMenuPrimitive.Portal>
-))
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
-
-const DropdownMenuItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Item
-    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",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  />
-))
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
-
-const DropdownMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
-  <DropdownMenuPrimitive.CheckboxItem
-    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",
-      className
-    )}
-    checked={checked}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.CheckboxItem>
-))
-DropdownMenuCheckboxItem.displayName =
-  DropdownMenuPrimitive.CheckboxItem.displayName
-
-const DropdownMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.RadioItem
-    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",
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Circle className="h-2 w-2 fill-current" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.RadioItem>
-))
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
-
-const DropdownMenuLabel = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Label
-    ref={ref}
-    className={cn(
-      "px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  />
-))
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
-
-const DropdownMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
-    {...props}
-  />
-))
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
-
-const DropdownMenuShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn("ml-auto text-xs tracking-widest text-brand-400/70", className)}
-      {...props}
-    />
-  )
-}
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
-
-export {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuGroup,
-  DropdownMenuPortal,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuRadioGroup,
-}

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

@@ -1,290 +0,0 @@
-"use client";
-
-import React, { useState, useRef, useCallback } from "react";
-import { cn } from "@/lib/utils";
-import { ImageIcon, X, Upload } from "lucide-react";
-import type { ImageAttachment } from "@/store/app-store";
-
-interface ImageDropZoneProps {
-  onImagesSelected: (images: ImageAttachment[]) => void;
-  maxFiles?: number;
-  maxFileSize?: number; // in bytes, default 10MB
-  className?: string;
-  children?: React.ReactNode;
-  disabled?: boolean;
-  images?: ImageAttachment[]; // Optional controlled images prop
-}
-
-const ACCEPTED_IMAGE_TYPES = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/webp'];
-const DEFAULT_MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
-
-export function ImageDropZone({
-  onImagesSelected,
-  maxFiles = 5,
-  maxFileSize = DEFAULT_MAX_FILE_SIZE,
-  className,
-  children,
-  disabled = false,
-  images,
-}: ImageDropZoneProps) {
-  const [isDragOver, setIsDragOver] = useState(false);
-  const [isProcessing, setIsProcessing] = useState(false);
-  const [internalImages, setInternalImages] = useState<ImageAttachment[]>([]);
-  const fileInputRef = useRef<HTMLInputElement>(null);
-
-  // Use controlled images if provided, otherwise use internal state
-  const selectedImages = images ?? internalImages;
-
-  // Update images - for controlled mode, just call the callback; for uncontrolled, also update internal state
-  const updateImages = useCallback((newImages: ImageAttachment[]) => {
-    if (images === undefined) {
-      setInternalImages(newImages);
-    }
-    onImagesSelected(newImages);
-  }, [images, onImagesSelected]);
-
-  const processFiles = useCallback(async (files: FileList) => {
-    if (disabled || isProcessing) return;
-
-    setIsProcessing(true);
-    const newImages: ImageAttachment[] = [];
-    const errors: string[] = [];
-
-    for (const file of Array.from(files)) {
-      // Validate file type
-      if (!ACCEPTED_IMAGE_TYPES.includes(file.type)) {
-        errors.push(`${file.name}: Unsupported file type. Please use JPG, PNG, GIF, or WebP.`);
-        continue;
-      }
-
-      // Validate file size
-      if (file.size > maxFileSize) {
-        const maxSizeMB = maxFileSize / (1024 * 1024);
-        errors.push(`${file.name}: File too large. Maximum size is ${maxSizeMB}MB.`);
-        continue;
-      }
-
-      // Check if we've reached max files
-      if (newImages.length + selectedImages.length >= maxFiles) {
-        errors.push(`Maximum ${maxFiles} images allowed.`);
-        break;
-      }
-
-      try {
-        const base64 = await fileToBase64(file);
-        const imageAttachment: ImageAttachment = {
-          id: `img-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
-          data: base64,
-          mimeType: file.type,
-          filename: file.name,
-          size: file.size,
-        };
-        newImages.push(imageAttachment);
-      } catch (error) {
-        errors.push(`${file.name}: Failed to process image.`);
-      }
-    }
-
-    if (errors.length > 0) {
-      console.warn('Image upload errors:', errors);
-      // You could show these errors to the user via a toast or notification
-    }
-
-    if (newImages.length > 0) {
-      const allImages = [...selectedImages, ...newImages];
-      updateImages(allImages);
-    }
-
-    setIsProcessing(false);
-  }, [disabled, isProcessing, maxFiles, maxFileSize, selectedImages, updateImages]);
-
-  const handleDrop = useCallback((e: React.DragEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setIsDragOver(false);
-
-    if (disabled) return;
-
-    const files = e.dataTransfer.files;
-    if (files.length > 0) {
-      processFiles(files);
-    }
-  }, [disabled, processFiles]);
-
-  const handleDragOver = useCallback((e: React.DragEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (!disabled) {
-      setIsDragOver(true);
-    }
-  }, [disabled]);
-
-  const handleDragLeave = useCallback((e: React.DragEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setIsDragOver(false);
-  }, []);
-
-  const handleFileSelect = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    const files = e.target.files;
-    if (files && files.length > 0) {
-      processFiles(files);
-    }
-    // Reset the input so the same file can be selected again
-    if (fileInputRef.current) {
-      fileInputRef.current.value = '';
-    }
-  }, [processFiles]);
-
-  const handleBrowseClick = useCallback(() => {
-    if (!disabled && fileInputRef.current) {
-      fileInputRef.current.click();
-    }
-  }, [disabled]);
-
-  const removeImage = useCallback((imageId: string) => {
-    const updated = selectedImages.filter(img => img.id !== imageId);
-    updateImages(updated);
-  }, [selectedImages, updateImages]);
-
-  const clearAllImages = useCallback(() => {
-    updateImages([]);
-  }, [updateImages]);
-
-  return (
-    <div className={cn("relative", className)}>
-      {/* Hidden file input */}
-      <input
-        ref={fileInputRef}
-        type="file"
-        multiple
-        accept={ACCEPTED_IMAGE_TYPES.join(',')}
-        onChange={handleFileSelect}
-        className="hidden"
-        disabled={disabled}
-      />
-
-      {/* Drop zone */}
-      <div
-        onDrop={handleDrop}
-        onDragOver={handleDragOver}
-        onDragLeave={handleDragLeave}
-        className={cn(
-          "relative rounded-lg border-2 border-dashed transition-all duration-200",
-          {
-            "border-blue-400 bg-blue-50 dark:bg-blue-950/20": isDragOver && !disabled,
-            "border-muted-foreground/25": !isDragOver && !disabled,
-            "border-muted-foreground/10 opacity-50 cursor-not-allowed": disabled,
-            "hover:border-blue-400 hover:bg-blue-50/50 dark:hover:bg-blue-950/10": !disabled && !isDragOver,
-          }
-        )}
-      >
-        {children || (
-          <div className="flex flex-col items-center justify-center p-6 text-center">
-            <div className={cn(
-              "rounded-full p-3 mb-4",
-              isDragOver && !disabled ? "bg-blue-100 dark:bg-blue-900/30" : "bg-muted"
-            )}>
-              {isProcessing ? (
-                <Upload className="h-6 w-6 animate-spin text-muted-foreground" />
-              ) : (
-                <ImageIcon className="h-6 w-6 text-muted-foreground" />
-              )}
-            </div>
-            <p className="text-sm font-medium text-foreground mb-1">
-              {isDragOver && !disabled ? "Drop your images here" : "Drag images here or click to browse"}
-            </p>
-            <p className="text-xs text-muted-foreground">
-              {maxFiles > 1 ? `Up to ${maxFiles} images` : "1 image"}, max {Math.round(maxFileSize / (1024 * 1024))}MB each
-            </p>
-            {!disabled && (
-              <button
-                onClick={handleBrowseClick}
-                className="mt-2 text-xs text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
-                disabled={isProcessing}
-              >
-                Browse files
-              </button>
-            )}
-          </div>
-        )}
-      </div>
-
-      {/* Image previews */}
-      {selectedImages.length > 0 && (
-        <div className="mt-3 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' : ''} selected
-            </p>
-            <button
-              onClick={clearAllImages}
-              className="text-xs text-muted-foreground hover:text-foreground"
-              disabled={disabled}
-            >
-              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 */}
-                {!disabled && (
-                  <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"
-                  >
-                    <X className="h-3 w-3" />
-                  </button>
-                )}
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-function fileToBase64(file: File): Promise<string> {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onload = () => {
-      if (typeof reader.result === 'string') {
-        resolve(reader.result);
-      } else {
-        reject(new Error('Failed to read file as base64'));
-      }
-    };
-    reader.onerror = () => reject(new Error('Failed to read file'));
-    reader.readAsDataURL(file);
-  });
-}
-
-function formatFileSize(bytes: number): string {
-  if (bytes === 0) return '0 B';
-  const k = 1024;
-  const sizes = ['B', 'KB', 'MB', 'GB'];
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
-}

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

@@ -1,660 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { useAppStore, DEFAULT_KEYBOARD_SHORTCUTS, parseShortcut, formatShortcut } from "@/store/app-store";
-import type { KeyboardShortcuts } from "@/store/app-store";
-import { cn } from "@/lib/utils";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { CheckCircle2, X, RotateCcw, Edit2 } from "lucide-react";
-import { Checkbox } from "@/components/ui/checkbox";
-import { Label } from "@/components/ui/label";
-
-// Detect if running on Mac
-const isMac = typeof navigator !== 'undefined' && navigator.platform.toUpperCase().indexOf('MAC') >= 0;
-
-// Keyboard layout - US QWERTY
-const KEYBOARD_ROWS = [
-  // Number row
-  [
-    { key: "`", label: "`", width: 1 },
-    { key: "1", label: "1", width: 1 },
-    { key: "2", label: "2", width: 1 },
-    { key: "3", label: "3", width: 1 },
-    { key: "4", label: "4", width: 1 },
-    { key: "5", label: "5", width: 1 },
-    { key: "6", label: "6", width: 1 },
-    { key: "7", label: "7", width: 1 },
-    { key: "8", label: "8", width: 1 },
-    { key: "9", label: "9", width: 1 },
-    { key: "0", label: "0", width: 1 },
-    { key: "-", label: "-", width: 1 },
-    { key: "=", label: "=", width: 1 },
-  ],
-  // Top letter row
-  [
-    { key: "Q", label: "Q", width: 1 },
-    { key: "W", label: "W", width: 1 },
-    { key: "E", label: "E", width: 1 },
-    { key: "R", label: "R", width: 1 },
-    { key: "T", label: "T", width: 1 },
-    { key: "Y", label: "Y", width: 1 },
-    { key: "U", label: "U", width: 1 },
-    { key: "I", label: "I", width: 1 },
-    { key: "O", label: "O", width: 1 },
-    { key: "P", label: "P", width: 1 },
-    { key: "[", label: "[", width: 1 },
-    { key: "]", label: "]", width: 1 },
-    { key: "\\", label: "\\", width: 1 },
-  ],
-  // Home row
-  [
-    { key: "A", label: "A", width: 1 },
-    { key: "S", label: "S", width: 1 },
-    { key: "D", label: "D", width: 1 },
-    { key: "F", label: "F", width: 1 },
-    { key: "G", label: "G", width: 1 },
-    { key: "H", label: "H", width: 1 },
-    { key: "J", label: "J", width: 1 },
-    { key: "K", label: "K", width: 1 },
-    { key: "L", label: "L", width: 1 },
-    { key: ";", label: ";", width: 1 },
-    { key: "'", label: "'", width: 1 },
-  ],
-  // Bottom letter row
-  [
-    { key: "Z", label: "Z", width: 1 },
-    { key: "X", label: "X", width: 1 },
-    { key: "C", label: "C", width: 1 },
-    { key: "V", label: "V", width: 1 },
-    { key: "B", label: "B", width: 1 },
-    { key: "N", label: "N", width: 1 },
-    { key: "M", label: "M", width: 1 },
-    { key: ",", label: ",", width: 1 },
-    { key: ".", label: ".", width: 1 },
-    { key: "/", label: "/", width: 1 },
-  ],
-];
-
-// Map shortcut names to human-readable labels
-const SHORTCUT_LABELS: Record<keyof KeyboardShortcuts, string> = {
-  board: "Kanban Board",
-  agent: "Agent Runner",
-  spec: "Spec Editor",
-  context: "Context",
-  settings: "Settings",
-  profiles: "AI Profiles",
-  terminal: "Terminal",
-  toggleSidebar: "Toggle Sidebar",
-  addFeature: "Add Feature",
-  addContextFile: "Add Context File",
-  startNext: "Start Next",
-  newSession: "New Session",
-  openProject: "Open Project",
-  projectPicker: "Project Picker",
-  cyclePrevProject: "Prev Project",
-  cycleNextProject: "Next Project",
-  addProfile: "Add Profile",
-  splitTerminalRight: "Split Right",
-  splitTerminalDown: "Split Down",
-  closeTerminal: "Close Terminal",
-};
-
-// Categorize shortcuts for color coding
-const SHORTCUT_CATEGORIES: Record<keyof KeyboardShortcuts, "navigation" | "ui" | "action"> = {
-  board: "navigation",
-  agent: "navigation",
-  spec: "navigation",
-  context: "navigation",
-  settings: "navigation",
-  profiles: "navigation",
-  terminal: "navigation",
-  toggleSidebar: "ui",
-  addFeature: "action",
-  addContextFile: "action",
-  startNext: "action",
-  newSession: "action",
-  openProject: "action",
-  projectPicker: "action",
-  cyclePrevProject: "action",
-  cycleNextProject: "action",
-  addProfile: "action",
-  splitTerminalRight: "action",
-  splitTerminalDown: "action",
-  closeTerminal: "action",
-};
-
-// Category colors
-const CATEGORY_COLORS = {
-  navigation: {
-    bg: "bg-blue-500/20",
-    border: "border-blue-500/50",
-    text: "text-blue-400",
-    label: "Navigation",
-  },
-  ui: {
-    bg: "bg-purple-500/20",
-    border: "border-purple-500/50",
-    text: "text-purple-400",
-    label: "UI Controls",
-  },
-  action: {
-    bg: "bg-green-500/20",
-    border: "border-green-500/50",
-    text: "text-green-400",
-    label: "Actions",
-  },
-};
-
-interface KeyboardMapProps {
-  onKeySelect?: (key: string) => void;
-  selectedKey?: string | null;
-  className?: string;
-}
-
-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(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);
-        if (!map[normalizedKey]) {
-          map[normalizedKey] = [];
-        }
-        map[normalizedKey].push({ name: shortcutName, hasModifiers });
-      }
-    );
-    return map;
-  }, [mergedShortcuts]);
-
-  const renderKey = (keyDef: { key: string; label: string; width: number }) => {
-    const normalizedKey = keyDef.key.toUpperCase();
-    const shortcutInfos = keyToShortcuts[normalizedKey] || [];
-    const shortcuts = shortcutInfos.map(s => s.name);
-    const isBound = shortcuts.length > 0;
-    const isSelected = selectedKey?.toUpperCase() === normalizedKey;
-    const isModified = shortcuts.some(
-      (s) => mergedShortcuts[s] !== DEFAULT_KEYBOARD_SHORTCUTS[s]
-    );
-
-    // Get category for coloring (use first shortcut's category if multiple)
-    const category = shortcuts.length > 0 ? SHORTCUT_CATEGORIES[shortcuts[0]] : null;
-    const colors = category ? CATEGORY_COLORS[category] : null;
-
-    const keyElement = (
-      <button
-        key={keyDef.key}
-        onClick={() => onKeySelect?.(keyDef.key)}
-        className={cn(
-          "relative flex flex-col items-center justify-center rounded-lg border transition-all",
-          "h-12 min-w-11 py-1",
-          keyDef.width > 1 && `w-[${keyDef.width * 2.75}rem]`,
-          // Base styles
-          !isBound && "bg-sidebar-accent/10 border-sidebar-border hover:bg-sidebar-accent/20",
-          // Bound key styles
-          isBound && colors && `${colors.bg} ${colors.border} hover:brightness-110`,
-          // Selected state
-          isSelected && "ring-2 ring-brand-500 ring-offset-2 ring-offset-background",
-          // Modified indicator
-          isModified && "ring-1 ring-yellow-500/50"
-        )}
-        data-testid={`keyboard-key-${keyDef.key}`}
-      >
-        {/* Key label - always at top */}
-        <span
-          className={cn(
-            "text-sm font-mono font-bold leading-none",
-            isBound && colors ? colors.text : "text-muted-foreground"
-          )}
-        >
-          {keyDef.label}
-        </span>
-        {/* Shortcut label - always takes up space to maintain consistent height */}
-        <span
-          className={cn(
-            "text-[9px] leading-tight text-center px-0.5 truncate max-w-full h-3 mt-0.5",
-            isBound && shortcuts.length > 0
-              ? (colors ? colors.text : "text-muted-foreground")
-              : "opacity-0"
-          )}
-        >
-          {isBound && shortcuts.length > 0
-            ? (shortcuts.length === 1
-                ? (SHORTCUT_LABELS[shortcuts[0]]?.split(" ")[0] ?? shortcuts[0])
-                : `${shortcuts.length}x`)
-            : "\u00A0" // Non-breaking space to maintain height
-          }
-        </span>
-        {isModified && (
-          <span className="absolute -top-1 -right-1 w-2 h-2 rounded-full bg-yellow-500" />
-        )}
-      </button>
-    );
-
-    // Wrap in tooltip if bound
-    if (isBound) {
-      return (
-        <Tooltip key={keyDef.key}>
-          <TooltipTrigger asChild>{keyElement}</TooltipTrigger>
-          <TooltipContent side="top" className="max-w-xs">
-            <div className="space-y-1">
-              {shortcuts.map((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",
-                        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] ?? shortcut}</span>
-                    <kbd className="text-xs font-mono bg-sidebar-accent/30 px-1 rounded">
-                      {displayShortcut}
-                    </kbd>
-                    {mergedShortcuts[shortcut] !== DEFAULT_KEYBOARD_SHORTCUTS[shortcut] && (
-                      <span className="text-xs text-yellow-400">(custom)</span>
-                    )}
-                  </div>
-                );
-              })}
-            </div>
-          </TooltipContent>
-        </Tooltip>
-      );
-    }
-
-    return keyElement;
-  };
-
-  return (
-    <TooltipProvider>
-      <div className={cn("space-y-4", className)} data-testid="keyboard-map">
-        {/* Legend */}
-        <div className="flex flex-wrap gap-4 justify-center text-xs">
-          {Object.entries(CATEGORY_COLORS).map(([key, colors]) => (
-            <div key={key} className="flex items-center gap-2">
-              <div
-                className={cn(
-                  "w-4 h-4 rounded border",
-                  colors.bg,
-                  colors.border
-                )}
-              />
-              <span className={colors.text}>{colors.label}</span>
-            </div>
-          ))}
-          <div className="flex items-center gap-2">
-            <div className="w-4 h-4 rounded bg-sidebar-accent/10 border border-sidebar-border" />
-            <span className="text-muted-foreground">Available</span>
-          </div>
-          <div className="flex items-center gap-2">
-            <div className="w-2 h-2 rounded-full bg-yellow-500" />
-            <span className="text-yellow-400">Modified</span>
-          </div>
-        </div>
-
-        {/* Keyboard layout */}
-        <div className="flex flex-col items-center gap-1.5 p-4 rounded-xl bg-sidebar-accent/5 border border-sidebar-border">
-          {KEYBOARD_ROWS.map((row, rowIndex) => (
-            <div key={rowIndex} className="flex gap-1.5 justify-center">
-              {row.map(renderKey)}
-            </div>
-          ))}
-        </div>
-
-        {/* Stats */}
-        <div className="flex justify-center gap-6 text-xs text-muted-foreground">
-          <span>
-            <strong className="text-foreground">{Object.keys(keyboardShortcuts).length}</strong> shortcuts
-            configured
-          </span>
-          <span>
-            <strong className="text-foreground">
-              {Object.keys(keyToShortcuts).length}
-            </strong>{" "}
-            keys in use
-          </span>
-          <span>
-            <strong className="text-foreground">
-              {KEYBOARD_ROWS.flat().length - Object.keys(keyToShortcuts).length}
-            </strong>{" "}
-            keys available
-          </span>
-        </div>
-      </div>
-    </TooltipProvider>
-  );
-}
-
-// Full shortcut reference panel with editing capability
-interface ShortcutReferencePanelProps {
-  editable?: boolean;
-}
-
-export function ShortcutReferencePanel({ editable = false }: ShortcutReferencePanelProps) {
-  const { keyboardShortcuts, setKeyboardShortcut, resetKeyboardShortcuts } = useAppStore();
-  const [editingShortcut, setEditingShortcut] = React.useState<keyof KeyboardShortcuts | null>(null);
-  const [keyValue, setKeyValue] = React.useState("");
-  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: [],
-      ui: [],
-      action: [],
-    };
-
-    (Object.entries(SHORTCUT_CATEGORIES) as [keyof KeyboardShortcuts, string][]).forEach(
-      ([shortcut, category]) => {
-        groups[category].push({
-          key: shortcut,
-          label: SHORTCUT_LABELS[shortcut] ?? shortcut,
-          value: mergedShortcuts[shortcut],
-        });
-      }
-    );
-
-    return groups;
-  }, [mergedShortcuts]);
-
-  // Build the full shortcut string from key + modifiers
-  const buildShortcutString = React.useCallback((key: string, mods: typeof modifiers) => {
-    const parts: string[] = [];
-    if (mods.cmdCtrl) parts.push(isMac ? "Cmd" : "Ctrl");
-    if (mods.alt) parts.push(isMac ? "Opt" : "Alt");
-    if (mods.shift) parts.push("Shift");
-    parts.push(key.toUpperCase());
-    return parts.join("+");
-  }, []);
-
-  // Check for conflicts with other shortcuts
-  const checkConflict = React.useCallback((shortcutStr: string, currentKey: keyof KeyboardShortcuts) => {
-    const conflict = Object.entries(mergedShortcuts).find(
-      ([k, v]) => k !== currentKey && v?.toUpperCase() === shortcutStr.toUpperCase()
-    );
-    return conflict ? (SHORTCUT_LABELS[conflict[0] as keyof KeyboardShortcuts] ?? conflict[0]) : null;
-  }, [mergedShortcuts]);
-
-  const handleStartEdit = (key: keyof KeyboardShortcuts) => {
-    const currentValue = mergedShortcuts[key];
-    const parsed = parseShortcut(currentValue);
-    setEditingShortcut(key);
-    setKeyValue(parsed.key);
-    setModifiers({
-      shift: parsed.shift || false,
-      cmdCtrl: parsed.cmdCtrl || false,
-      alt: parsed.alt || false,
-    });
-    setShortcutError(null);
-  };
-
-  const handleSaveShortcut = () => {
-    if (!editingShortcut || shortcutError || !keyValue) return;
-    const shortcutStr = buildShortcutString(keyValue, modifiers);
-    setKeyboardShortcut(editingShortcut, shortcutStr);
-    setEditingShortcut(null);
-    setKeyValue("");
-    setModifiers({ shift: false, cmdCtrl: false, alt: false });
-    setShortcutError(null);
-  };
-
-  const handleCancelEdit = () => {
-    setEditingShortcut(null);
-    setKeyValue("");
-    setModifiers({ shift: false, cmdCtrl: false, alt: false });
-    setShortcutError(null);
-  };
-
-  const handleKeyChange = (value: string, currentKey: keyof KeyboardShortcuts) => {
-    setKeyValue(value);
-    // Check for conflicts with full shortcut string
-    if (!value) {
-      setShortcutError("Key cannot be empty");
-    } else {
-      const shortcutStr = buildShortcutString(value, modifiers);
-      const conflictLabel = checkConflict(shortcutStr, currentKey);
-      if (conflictLabel) {
-        setShortcutError(`Already used by "${conflictLabel}"`);
-      } else {
-        setShortcutError(null);
-      }
-    }
-  };
-
-  const handleModifierChange = (modifier: keyof typeof modifiers, checked: boolean, currentKey: keyof KeyboardShortcuts) => {
-    // Enforce single modifier: when checking, uncheck all others (radio-button behavior)
-    const newModifiers = checked
-      ? { shift: false, cmdCtrl: false, alt: false, [modifier]: true }
-      : { ...modifiers, [modifier]: false };
-
-    setModifiers(newModifiers);
-
-    // Recheck for conflicts
-    if (keyValue) {
-      const shortcutStr = buildShortcutString(keyValue, newModifiers);
-      const conflictLabel = checkConflict(shortcutStr, currentKey);
-      if (conflictLabel) {
-        setShortcutError(`Already used by "${conflictLabel}"`);
-      } else {
-        setShortcutError(null);
-      }
-    }
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === "Enter" && !shortcutError && keyValue) {
-      handleSaveShortcut();
-    } else if (e.key === "Escape") {
-      handleCancelEdit();
-    }
-  };
-
-  const handleResetShortcut = (key: keyof KeyboardShortcuts) => {
-    setKeyboardShortcut(key, DEFAULT_KEYBOARD_SHORTCUTS[key]);
-  };
-
-  return (
-    <TooltipProvider>
-      <div className="space-y-4" data-testid="shortcut-reference-panel">
-      {editable && (
-        <div className="flex justify-end">
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => resetKeyboardShortcuts()}
-            className="gap-2 text-xs"
-            data-testid="reset-all-shortcuts-button"
-          >
-            <RotateCcw className="w-3 h-3" />
-            Reset All to Defaults
-          </Button>
-        </div>
-      )}
-      {Object.entries(groupedShortcuts).map(([category, shortcuts]) => {
-        const colors = CATEGORY_COLORS[category as keyof typeof CATEGORY_COLORS];
-        return (
-          <div key={category} className="space-y-2">
-            <h4 className={cn("text-sm font-semibold", colors.text)}>
-              {colors.label}
-            </h4>
-            <div className="grid grid-cols-2 gap-2">
-              {shortcuts.map(({ key, label, value }) => {
-                const isModified = mergedShortcuts[key] !== DEFAULT_KEYBOARD_SHORTCUTS[key];
-                const isEditing = editingShortcut === key;
-
-                return (
-                  <div
-                    key={key}
-                    className={cn(
-                      "flex items-center justify-between p-2 rounded-lg bg-sidebar-accent/10 border transition-colors",
-                      isEditing ? "border-brand-500" : "border-sidebar-border",
-                      editable && !isEditing && "hover:bg-sidebar-accent/20 cursor-pointer"
-                    )}
-                    onClick={() => editable && !isEditing && handleStartEdit(key)}
-                    data-testid={`shortcut-row-${key}`}
-                  >
-                    <span className="text-sm text-foreground">{label}</span>
-                    <div className="flex items-center gap-2">
-                      {isEditing ? (
-                        <div className="flex items-center gap-2" onClick={(e) => e.stopPropagation()}>
-                          {/* Modifier checkboxes */}
-                          <div className="flex items-center gap-1.5 text-xs">
-                            <div className="flex items-center gap-1">
-                              <Checkbox
-                                id={`mod-cmd-${key}`}
-                                checked={modifiers.cmdCtrl}
-                                onCheckedChange={(checked) => handleModifierChange("cmdCtrl", !!checked, key)}
-                                className="h-3.5 w-3.5"
-                              />
-                              <Label htmlFor={`mod-cmd-${key}`} className="text-xs text-muted-foreground cursor-pointer">
-                                {isMac ? "⌘" : "Ctrl"}
-                              </Label>
-                            </div>
-                            <div className="flex items-center gap-1">
-                              <Checkbox
-                                id={`mod-alt-${key}`}
-                                checked={modifiers.alt}
-                                onCheckedChange={(checked) => handleModifierChange("alt", !!checked, key)}
-                                className="h-3.5 w-3.5"
-                              />
-                              <Label htmlFor={`mod-alt-${key}`} className="text-xs text-muted-foreground cursor-pointer">
-                                {isMac ? "⌥" : "Alt"}
-                              </Label>
-                            </div>
-                            <div className="flex items-center gap-1">
-                              <Checkbox
-                                id={`mod-shift-${key}`}
-                                checked={modifiers.shift}
-                                onCheckedChange={(checked) => handleModifierChange("shift", !!checked, key)}
-                                className="h-3.5 w-3.5"
-                              />
-                              <Label htmlFor={`mod-shift-${key}`} className="text-xs text-muted-foreground cursor-pointer">
-                                ⇧
-                              </Label>
-                            </div>
-                          </div>
-                          <span className="text-muted-foreground">+</span>
-                          <Input
-                            value={keyValue}
-                            onChange={(e) => handleKeyChange(e.target.value, key)}
-                            onKeyDown={handleKeyDown}
-                            className={cn(
-                              "w-12 h-7 text-center font-mono text-xs uppercase",
-                              shortcutError && "border-red-500 focus-visible:ring-red-500"
-                            )}
-                            placeholder="Key"
-                            maxLength={1}
-                            autoFocus
-                            data-testid={`edit-shortcut-input-${key}`}
-                          />
-                          <Button
-                            size="sm"
-                            variant="ghost"
-                            className="h-7 w-7 p-0 hover:bg-green-500/20 hover:text-green-400"
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              handleSaveShortcut();
-                            }}
-                            disabled={!!shortcutError || !keyValue}
-                            data-testid={`save-shortcut-${key}`}
-                          >
-                            <CheckCircle2 className="w-4 h-4" />
-                          </Button>
-                          <Button
-                            size="sm"
-                            variant="ghost"
-                            className="h-7 w-7 p-0 hover:bg-red-500/20 hover:text-red-400"
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              handleCancelEdit();
-                            }}
-                            data-testid={`cancel-shortcut-${key}`}
-                          >
-                            <X className="w-4 h-4" />
-                          </Button>
-                        </div>
-                      ) : (
-                        <>
-                          <kbd
-                            className={cn(
-                              "px-2 py-1 text-xs font-mono rounded border",
-                              colors.bg,
-                              colors.border,
-                              colors.text
-                            )}
-                          >
-                            {formatShortcut(value, true)}
-                          </kbd>
-                          {isModified && editable && (
-                            <Tooltip>
-                              <TooltipTrigger asChild>
-                                <Button
-                                  size="sm"
-                                  variant="ghost"
-                                  className="h-6 w-6 p-0 hover:bg-yellow-500/20 hover:text-yellow-400"
-                                  onClick={(e) => {
-                                    e.stopPropagation();
-                                    handleResetShortcut(key);
-                                  }}
-                                  data-testid={`reset-shortcut-${key}`}
-                                >
-                                  <RotateCcw className="w-3 h-3" />
-                                </Button>
-                              </TooltipTrigger>
-                              <TooltipContent side="top">
-                                Reset to default ({DEFAULT_KEYBOARD_SHORTCUTS[key]})
-                              </TooltipContent>
-                            </Tooltip>
-                          )}
-                          {isModified && !editable && (
-                            <span className="w-2 h-2 rounded-full bg-yellow-500" />
-                          )}
-                          {editable && !isModified && (
-                            <Edit2 className="w-3 h-3 text-muted-foreground opacity-0 group-hover:opacity-100" />
-                          )}
-                        </>
-                      )}
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-            {editingShortcut && shortcutError && SHORTCUT_CATEGORIES[editingShortcut] === category && (
-              <p className="text-xs text-red-400 mt-1">{shortcutError}</p>
-            )}
-          </div>
-        );
-      })}
-    </div>
-    </TooltipProvider>
-  );
-}

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

@@ -1,24 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-
-import { cn } from "@/lib/utils"
-
-function Label({
-  className,
-  ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
-  return (
-    <LabelPrimitive.Root
-      data-slot="label"
-      className={cn(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Label }

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

@@ -1,284 +0,0 @@
-"use client";
-
-import { useState, useMemo } from "react";
-import {
-  ChevronDown,
-  ChevronRight,
-  MessageSquare,
-  Wrench,
-  Zap,
-  AlertCircle,
-  CheckCircle2,
-  AlertTriangle,
-  Bug,
-  Info,
-  FileOutput,
-  Brain,
-} from "lucide-react";
-import { cn } from "@/lib/utils";
-import {
-  parseLogOutput,
-  getLogTypeColors,
-  type LogEntry,
-  type LogEntryType,
-} from "@/lib/log-parser";
-
-interface LogViewerProps {
-  output: string;
-  className?: string;
-}
-
-const getLogIcon = (type: LogEntryType) => {
-  switch (type) {
-    case "prompt":
-      return <MessageSquare className="w-4 h-4" />;
-    case "tool_call":
-      return <Wrench className="w-4 h-4" />;
-    case "tool_result":
-      return <FileOutput className="w-4 h-4" />;
-    case "phase":
-      return <Zap className="w-4 h-4" />;
-    case "error":
-      return <AlertCircle className="w-4 h-4" />;
-    case "success":
-      return <CheckCircle2 className="w-4 h-4" />;
-    case "warning":
-      return <AlertTriangle className="w-4 h-4" />;
-    case "thinking":
-      return <Brain className="w-4 h-4" />;
-    case "debug":
-      return <Bug className="w-4 h-4" />;
-    default:
-      return <Info className="w-4 h-4" />;
-  }
-};
-
-interface LogEntryItemProps {
-  entry: LogEntry;
-  isExpanded: boolean;
-  onToggle: () => void;
-}
-
-function LogEntryItem({ entry, isExpanded, onToggle }: LogEntryItemProps) {
-  const colors = getLogTypeColors(entry.type);
-  const hasContent = entry.content.length > 100;
-
-  // Format content - detect and highlight JSON
-  const formattedContent = useMemo(() => {
-    const content = entry.content;
-
-    // Try to find and format JSON blocks
-    const jsonRegex = /(\{[\s\S]*?\}|\[[\s\S]*?\])/g;
-    let lastIndex = 0;
-    const parts: { type: "text" | "json"; content: string }[] = [];
-
-    let match;
-    while ((match = jsonRegex.exec(content)) !== null) {
-      // Add text before JSON
-      if (match.index > lastIndex) {
-        parts.push({
-          type: "text",
-          content: content.slice(lastIndex, match.index),
-        });
-      }
-
-      // Try to parse and format JSON
-      try {
-        const parsed = JSON.parse(match[1]);
-        parts.push({
-          type: "json",
-          content: JSON.stringify(parsed, null, 2),
-        });
-      } catch {
-        // Not valid JSON, treat as text
-        parts.push({ type: "text", content: match[1] });
-      }
-
-      lastIndex = match.index + match[1].length;
-    }
-
-    // Add remaining text
-    if (lastIndex < content.length) {
-      parts.push({ type: "text", content: content.slice(lastIndex) });
-    }
-
-    return parts.length > 0 ? parts : [{ type: "text" as const, content }];
-  }, [entry.content]);
-
-  return (
-    <div
-      className={cn(
-        "rounded-lg border-l-4 transition-all duration-200",
-        colors.bg,
-        colors.border,
-        "hover:brightness-110"
-      )}
-      data-testid={`log-entry-${entry.type}`}
-    >
-      <button
-        onClick={onToggle}
-        className="w-full px-3 py-2 flex items-center gap-2 text-left"
-        data-testid={`log-entry-toggle-${entry.id}`}
-      >
-        {hasContent ? (
-          isExpanded ? (
-            <ChevronDown className="w-4 h-4 text-zinc-400 flex-shrink-0" />
-          ) : (
-            <ChevronRight className="w-4 h-4 text-zinc-400 flex-shrink-0" />
-          )
-        ) : (
-          <span className="w-4 flex-shrink-0" />
-        )}
-
-        <span className={cn("flex-shrink-0", colors.icon)}>
-          {getLogIcon(entry.type)}
-        </span>
-
-        <span
-          className={cn(
-            "text-xs font-medium px-2 py-0.5 rounded-full flex-shrink-0",
-            colors.badge
-          )}
-          data-testid="log-entry-badge"
-        >
-          {entry.title}
-        </span>
-
-        <span className="text-xs text-zinc-400 truncate flex-1 ml-2">
-          {!isExpanded &&
-            entry.content.slice(0, 80) +
-              (entry.content.length > 80 ? "..." : "")}
-        </span>
-      </button>
-
-      {(isExpanded || !hasContent) && (
-        <div
-          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>
-        </div>
-      )}
-    </div>
-  );
-}
-
-export function LogViewer({ output, className }: LogViewerProps) {
-  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
-
-  const entries = useMemo(() => parseLogOutput(output), [output]);
-
-  const toggleEntry = (id: string) => {
-    setExpandedIds((prev) => {
-      const next = new Set(prev);
-      if (next.has(id)) {
-        next.delete(id);
-      } else {
-        next.add(id);
-      }
-      return next;
-    });
-  };
-
-  const expandAll = () => {
-    setExpandedIds(new Set(entries.map((e) => e.id)));
-  };
-
-  const collapseAll = () => {
-    setExpandedIds(new Set());
-  };
-
-  if (entries.length === 0) {
-    return (
-      <div className="flex items-center justify-center p-8 text-muted-foreground">
-        <div className="text-center">
-          <Info className="w-8 h-8 mx-auto mb-2 opacity-50" />
-          <p className="text-sm">No log entries yet. Logs will appear here as the process runs.</p>
-          {output && output.trim() && (
-            <div className="mt-4 p-3 bg-zinc-900/50 rounded text-xs font-mono text-left max-h-40 overflow-auto">
-              <pre className="whitespace-pre-wrap">{output}</pre>
-            </div>
-          )}
-        </div>
-      </div>
-    );
-  }
-
-  // Count entries by type
-  const typeCounts = entries.reduce((acc, entry) => {
-    acc[entry.type] = (acc[entry.type] || 0) + 1;
-    return acc;
-  }, {} as Record<string, number>);
-
-  return (
-    <div className={cn("flex flex-col gap-2", className)}>
-      {/* Header with controls */}
-      <div className="flex items-center justify-between px-1" data-testid="log-viewer-header">
-        <div className="flex items-center gap-2 flex-wrap">
-          {Object.entries(typeCounts).map(([type, count]) => {
-            const colors = getLogTypeColors(type as LogEntryType);
-            return (
-              <span
-                key={type}
-                className={cn(
-                  "text-xs px-2 py-0.5 rounded-full",
-                  colors.badge
-                )}
-                data-testid={`log-type-count-${type}`}
-              >
-                {type}: {count}
-              </span>
-            );
-          })}
-        </div>
-        <div className="flex items-center gap-1">
-          <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"
-            data-testid="log-expand-all"
-          >
-            Expand All
-          </button>
-          <button
-            onClick={collapseAll}
-            className="text-xs text-zinc-400 hover:text-zinc-200 px-2 py-1 rounded hover:bg-zinc-800/50 transition-colors"
-            data-testid="log-collapse-all"
-          >
-            Collapse All
-          </button>
-        </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>
-    </div>
-  );
-}

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

@@ -1,48 +0,0 @@
-"use client";
-
-import ReactMarkdown from "react-markdown";
-import { cn } from "@/lib/utils";
-
-interface MarkdownProps {
-  children: string;
-  className?: string;
-}
-
-/**
- * Reusable Markdown component for rendering markdown content
- * Theme-aware styling that adapts to all predefined themes
- */
-export function Markdown({ children, className }: MarkdownProps) {
-  return (
-    <div
-      className={cn(
-        "prose prose-sm prose-invert max-w-none",
-        // Headings
-        "[&_h1]:text-xl [&_h1]:text-foreground [&_h1]:font-semibold [&_h1]:mt-4 [&_h1]:mb-2",
-        "[&_h2]:text-lg [&_h2]:text-foreground [&_h2]:font-semibold [&_h2]:mt-4 [&_h2]:mb-2",
-        "[&_h3]:text-base [&_h3]:text-foreground [&_h3]:font-semibold [&_h3]:mt-3 [&_h3]:mb-2",
-        "[&_h4]:text-sm [&_h4]:text-foreground [&_h4]:font-semibold [&_h4]:mt-2 [&_h4]:mb-1",
-        // Paragraphs
-        "[&_p]:text-foreground-secondary [&_p]:leading-relaxed [&_p]:my-2",
-        // Lists
-        "[&_ul]:my-2 [&_ul]:pl-4 [&_ol]:my-2 [&_ol]:pl-4",
-        "[&_li]:text-foreground-secondary [&_li]:my-0.5",
-        // Code
-        "[&_code]:text-chart-2 [&_code]:bg-muted [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:rounded [&_code]:text-sm",
-        "[&_pre]:bg-card [&_pre]:border [&_pre]:border-border [&_pre]:rounded-lg [&_pre]:my-2 [&_pre]:p-3 [&_pre]:overflow-x-auto",
-        "[&_pre_code]:bg-transparent [&_pre_code]:p-0",
-        // Strong/Bold
-        "[&_strong]:text-foreground [&_strong]:font-semibold",
-        // Links
-        "[&_a]:text-brand-500 [&_a]:no-underline hover:[&_a]:underline",
-        // Blockquotes
-        "[&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-4 [&_blockquote]:text-muted-foreground [&_blockquote]:italic [&_blockquote]:my-2",
-        // Horizontal rules
-        "[&_hr]:border-border [&_hr]:my-4",
-        className
-      )}
-    >
-      <ReactMarkdown>{children}</ReactMarkdown>
-    </div>
-  );
-}

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

@@ -1,48 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as PopoverPrimitive from "@radix-ui/react-popover"
-
-import { cn } from "@/lib/utils"
-
-function Popover({
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
-  return <PopoverPrimitive.Root data-slot="popover" {...props} />
-}
-
-function PopoverTrigger({
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
-  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
-}
-
-function PopoverContent({
-  className,
-  align = "center",
-  sideOffset = 4,
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
-  return (
-    <PopoverPrimitive.Portal>
-      <PopoverPrimitive.Content
-        data-slot="popover-content"
-        align={align}
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-popover text-popover-foreground 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 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
-          className
-        )}
-        {...props}
-      />
-    </PopoverPrimitive.Portal>
-  )
-}
-
-function PopoverAnchor({
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
-  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
-}
-
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }

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

@@ -1,139 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as SheetPrimitive from "@radix-ui/react-dialog"
-import { XIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
-  return <SheetPrimitive.Root data-slot="sheet" {...props} />
-}
-
-function SheetTrigger({
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
-  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
-}
-
-function SheetClose({
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Close>) {
-  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
-}
-
-function SheetPortal({
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
-  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
-}
-
-function SheetOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
-  return (
-    <SheetPrimitive.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",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function SheetContent({
-  className,
-  children,
-  side = "right",
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Content> & {
-  side?: "top" | "right" | "bottom" | "left"
-}) {
-  return (
-    <SheetPortal>
-      <SheetOverlay />
-      <SheetPrimitive.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",
-          side === "right" &&
-            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
-          side === "left" &&
-            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
-          side === "top" &&
-            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
-          side === "bottom" &&
-            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
-          className
-        )}
-        {...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">
-          <XIcon className="size-4" />
-          <span className="sr-only">Close</span>
-        </SheetPrimitive.Close>
-      </SheetPrimitive.Content>
-    </SheetPortal>
-  )
-}
-
-function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sheet-header"
-      className={cn("flex flex-col gap-1.5 p-4", className)}
-      {...props}
-    />
-  )
-}
-
-function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sheet-footer"
-      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
-      {...props}
-    />
-  )
-}
-
-function SheetTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Title>) {
-  return (
-    <SheetPrimitive.Title
-      data-slot="sheet-title"
-      className={cn("text-foreground font-semibold", className)}
-      {...props}
-    />
-  )
-}
-
-function SheetDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Description>) {
-  return (
-    <SheetPrimitive.Description
-      data-slot="sheet-description"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  )
-}
-
-export {
-  Sheet,
-  SheetTrigger,
-  SheetClose,
-  SheetContent,
-  SheetHeader,
-  SheetFooter,
-  SheetTitle,
-  SheetDescription,
-}

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

@@ -1,27 +0,0 @@
-"use client";
-
-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>
-));
-Slider.displayName = SliderPrimitive.Root.displayName;
-
-export { Slider };

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

@@ -1,71 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as TabsPrimitive from "@radix-ui/react-tabs"
-
-import { cn } from "@/lib/utils"
-
-function Tabs({
-  className,
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.Root>) {
-  return (
-    <TabsPrimitive.Root
-      data-slot="tabs"
-      className={cn("flex flex-col gap-2", className)}
-      {...props}
-    />
-  )
-}
-
-function TabsList({
-  className,
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.List>) {
-  return (
-    <TabsPrimitive.List
-      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}
-    />
-  )
-}
-
-function TabsTrigger({
-  className,
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
-  return (
-    <TabsPrimitive.Trigger
-      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",
-        "text-foreground/70 hover:text-foreground hover:bg-accent",
-        "data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-md data-[state=active]:border-primary/50",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring focus-visible:ring-[3px] focus-visible:outline-1",
-        "disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed",
-        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function TabsContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.Content>) {
-  return (
-    <TabsPrimitive.Content
-      data-slot="tabs-content"
-      className={cn("flex-1 outline-none", className)}
-      {...props}
-    />
-  )
-}
-
-export { Tabs, TabsList, TabsTrigger, TabsContent }

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

@@ -1,42 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
-
-import { cn } from "@/lib/utils"
-
-const TooltipProvider = TooltipPrimitive.Provider
-
-const Tooltip = TooltipPrimitive.Root
-
-const TooltipTrigger = TooltipPrimitive.Trigger
-
-const TooltipContent = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 6, ...props }, ref) => (
-  <TooltipPrimitive.Portal>
-    <TooltipPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cn(
-        "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}
-    />
-  </TooltipPrimitive.Portal>
-))
-TooltipContent.displayName = TooltipPrimitive.Content.displayName
-
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

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

@@ -1,120 +0,0 @@
-"use client";
-
-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 {
-  value: string;
-  onChange: (value: string) => void;
-  placeholder?: string;
-  className?: string;
-  "data-testid"?: 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)" },
-
-  // 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))" },
-
-  // Strings and content
-  { tag: t.string, color: "var(--chart-1, oklch(0.646 0.222 41.116))" },
-  { tag: t.content, color: "var(--foreground)" },
-
-  // Comments
-  { tag: t.comment, color: "var(--muted-foreground)", fontStyle: "italic" },
-
-  // Special
-  { tag: t.processingInstruction, color: "var(--muted-foreground)" },
-  { tag: t.documentMeta, color: "var(--muted-foreground)" },
-]);
-
-// 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",
-  },
-});
-
-// Combine all extensions
-const extensions: Extension[] = [
-  xml(),
-  syntaxHighlighting(syntaxColors),
-  editorTheme,
-];
-
-export function XmlSyntaxEditor({
-  value,
-  onChange,
-  placeholder,
-  className,
-  "data-testid": testId,
-}: XmlSyntaxEditorProps) {
-  return (
-    <div className={cn("w-full h-full", className)} data-testid={testId}>
-      <CodeMirror
-        value={value}
-        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-tools-view.tsx

@@ -1,488 +0,0 @@
-"use client";
-
-import { useState, useCallback } from "react";
-import { useAppStore } from "@/store/app-store";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  CardDescription,
-} from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import {
-  FileText,
-  FolderOpen,
-  Terminal,
-  CheckCircle,
-  XCircle,
-  Loader2,
-  Play,
-  File,
-  Pencil,
-  Wrench,
-} from "lucide-react";
-import { cn } from "@/lib/utils";
-import { getElectronAPI } from "@/lib/electron";
-
-interface ToolResult {
-  success: boolean;
-  output?: string;
-  error?: string;
-  timestamp: Date;
-}
-
-interface ToolExecution {
-  tool: string;
-  input: string;
-  result: ToolResult | null;
-  isRunning: boolean;
-}
-
-export function AgentToolsView() {
-  const { currentProject } = useAppStore();
-  const api = getElectronAPI();
-
-  // Read File Tool State
-  const [readFilePath, setReadFilePath] = useState("");
-  const [readFileResult, setReadFileResult] = useState<ToolResult | null>(null);
-  const [isReadingFile, setIsReadingFile] = useState(false);
-
-  // Write File Tool State
-  const [writeFilePath, setWriteFilePath] = useState("");
-  const [writeFileContent, setWriteFileContent] = useState("");
-  const [writeFileResult, setWriteFileResult] = useState<ToolResult | null>(
-    null
-  );
-  const [isWritingFile, setIsWritingFile] = useState(false);
-
-  // Terminal Tool State
-  const [terminalCommand, setTerminalCommand] = useState("ls");
-  const [terminalResult, setTerminalResult] = useState<ToolResult | null>(null);
-  const [isRunningCommand, setIsRunningCommand] = useState(false);
-
-  // Execute Read File
-  const handleReadFile = useCallback(async () => {
-    if (!readFilePath.trim()) return;
-
-    setIsReadingFile(true);
-    setReadFileResult(null);
-
-    try {
-      // Simulate agent requesting file read
-      console.log(`[Agent Tool] Requesting to read file: ${readFilePath}`);
-
-      const result = await api.readFile(readFilePath);
-
-      if (result.success) {
-        setReadFileResult({
-          success: true,
-          output: result.content,
-          timestamp: new Date(),
-        });
-        console.log(`[Agent Tool] File read successful: ${readFilePath}`);
-      } else {
-        setReadFileResult({
-          success: false,
-          error: result.error || "Failed to read file",
-          timestamp: new Date(),
-        });
-        console.log(`[Agent Tool] File read failed: ${result.error}`);
-      }
-    } catch (error) {
-      setReadFileResult({
-        success: false,
-        error: error instanceof Error ? error.message : "Unknown error",
-        timestamp: new Date(),
-      });
-    } finally {
-      setIsReadingFile(false);
-    }
-  }, [readFilePath, api]);
-
-  // Execute Write File
-  const handleWriteFile = useCallback(async () => {
-    if (!writeFilePath.trim() || !writeFileContent.trim()) return;
-
-    setIsWritingFile(true);
-    setWriteFileResult(null);
-
-    try {
-      // Simulate agent requesting file write
-      console.log(`[Agent Tool] Requesting to write file: ${writeFilePath}`);
-
-      const result = await api.writeFile(writeFilePath, writeFileContent);
-
-      if (result.success) {
-        setWriteFileResult({
-          success: true,
-          output: `File written successfully: ${writeFilePath}`,
-          timestamp: new Date(),
-        });
-        console.log(`[Agent Tool] File write successful: ${writeFilePath}`);
-      } else {
-        setWriteFileResult({
-          success: false,
-          error: result.error || "Failed to write file",
-          timestamp: new Date(),
-        });
-        console.log(`[Agent Tool] File write failed: ${result.error}`);
-      }
-    } catch (error) {
-      setWriteFileResult({
-        success: false,
-        error: error instanceof Error ? error.message : "Unknown error",
-        timestamp: new Date(),
-      });
-    } finally {
-      setIsWritingFile(false);
-    }
-  }, [writeFilePath, writeFileContent, api]);
-
-  // Execute Terminal Command
-  const handleRunCommand = useCallback(async () => {
-    if (!terminalCommand.trim()) return;
-
-    setIsRunningCommand(true);
-    setTerminalResult(null);
-
-    try {
-      // Terminal command simulation for demonstration purposes
-      console.log(`[Agent Tool] Simulating command: ${terminalCommand}`);
-
-      // Simulated outputs for common commands (preview mode)
-      // In production, the agent executes commands via Claude SDK
-      const simulatedOutputs: Record<string, string> = {
-        ls: "app_spec.txt\nfeatures\nnode_modules\npackage.json\nsrc\ntests\ntsconfig.json",
-        pwd: currentProject?.path || "/Users/demo/project",
-        "echo hello": "hello",
-        whoami: "automaker-agent",
-        date: new Date().toString(),
-        "cat package.json":
-          '{\n  "name": "demo-project",\n  "version": "1.0.0"\n}',
-      };
-
-      // Simulate command execution delay
-      await new Promise((resolve) => setTimeout(resolve, 500));
-
-      const output =
-        simulatedOutputs[terminalCommand.toLowerCase()] ||
-        `[Preview] ${terminalCommand}\n(Terminal commands are executed by the agent during feature implementation)`;
-
-      setTerminalResult({
-        success: true,
-        output: output,
-        timestamp: new Date(),
-      });
-      console.log(
-        `[Agent Tool] Command executed successfully: ${terminalCommand}`
-      );
-    } catch (error) {
-      setTerminalResult({
-        success: false,
-        error: error instanceof Error ? error.message : "Unknown error",
-        timestamp: new Date(),
-      });
-    } finally {
-      setIsRunningCommand(false);
-    }
-  }, [terminalCommand, currentProject]);
-
-  if (!currentProject) {
-    return (
-      <div
-        className="flex-1 flex items-center justify-center"
-        data-testid="agent-tools-no-project"
-      >
-        <div className="text-center">
-          <Wrench 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">
-            Open or create a project to test agent tools.
-          </p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div
-      className="flex-1 flex flex-col overflow-hidden content-bg"
-      data-testid="agent-tools-view"
-    >
-      {/* Header */}
-      <div className="flex items-center gap-3 p-4 border-b border-border bg-glass backdrop-blur-md">
-        <Wrench className="w-5 h-5 text-primary" />
-        <div>
-          <h1 className="text-xl font-bold">Agent Tools</h1>
-          <p className="text-sm text-muted-foreground">
-            Test file system and terminal tools for {currentProject.name}
-          </p>
-        </div>
-      </div>
-
-      {/* Tools Grid */}
-      <div className="flex-1 overflow-y-auto p-4">
-        <div className="grid gap-6 md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3">
-          {/* Read File Tool */}
-          <Card data-testid="read-file-tool">
-            <CardHeader>
-              <div className="flex items-center gap-2">
-                <File className="w-5 h-5 text-blue-500" />
-                <CardTitle className="text-lg">Read File</CardTitle>
-              </div>
-              <CardDescription>
-                Agent requests to read a file from the filesystem
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <div className="space-y-2">
-                <Label htmlFor="read-file-path">File Path</Label>
-                <Input
-                  id="read-file-path"
-                  placeholder="/path/to/file.txt"
-                  value={readFilePath}
-                  onChange={(e) => setReadFilePath(e.target.value)}
-                  data-testid="read-file-path-input"
-                />
-              </div>
-              <Button
-                onClick={handleReadFile}
-                disabled={isReadingFile || !readFilePath.trim()}
-                className="w-full"
-                data-testid="read-file-button"
-              >
-                {isReadingFile ? (
-                  <>
-                    <Loader2 className="w-4 h-4 mr-2 animate-spin" />
-                    Reading...
-                  </>
-                ) : (
-                  <>
-                    <Play className="w-4 h-4 mr-2" />
-                    Execute Read
-                  </>
-                )}
-              </Button>
-
-              {/* Result */}
-              {readFileResult && (
-                <div
-                  className={cn(
-                    "p-3 rounded-md border",
-                    readFileResult.success
-                      ? "bg-green-500/10 border-green-500/20"
-                      : "bg-red-500/10 border-red-500/20"
-                  )}
-                  data-testid="read-file-result"
-                >
-                  <div className="flex items-center gap-2 mb-2">
-                    {readFileResult.success ? (
-                      <CheckCircle className="w-4 h-4 text-green-500" />
-                    ) : (
-                      <XCircle className="w-4 h-4 text-red-500" />
-                    )}
-                    <span className="text-sm font-medium">
-                      {readFileResult.success ? "Success" : "Failed"}
-                    </span>
-                  </div>
-                  <pre className="text-xs overflow-auto max-h-40 whitespace-pre-wrap">
-                    {readFileResult.success
-                      ? readFileResult.output
-                      : readFileResult.error}
-                  </pre>
-                </div>
-              )}
-            </CardContent>
-          </Card>
-
-          {/* Write File Tool */}
-          <Card data-testid="write-file-tool">
-            <CardHeader>
-              <div className="flex items-center gap-2">
-                <Pencil className="w-5 h-5 text-green-500" />
-                <CardTitle className="text-lg">Write File</CardTitle>
-              </div>
-              <CardDescription>
-                Agent requests to write content to a file
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <div className="space-y-2">
-                <Label htmlFor="write-file-path">File Path</Label>
-                <Input
-                  id="write-file-path"
-                  placeholder="/path/to/file.txt"
-                  value={writeFilePath}
-                  onChange={(e) => setWriteFilePath(e.target.value)}
-                  data-testid="write-file-path-input"
-                />
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="write-file-content">Content</Label>
-                <textarea
-                  id="write-file-content"
-                  placeholder="File content..."
-                  value={writeFileContent}
-                  onChange={(e) => setWriteFileContent(e.target.value)}
-                  className="w-full min-h-[100px] px-3 py-2 text-sm rounded-md border border-input bg-background resize-y"
-                  data-testid="write-file-content-input"
-                />
-              </div>
-              <Button
-                onClick={handleWriteFile}
-                disabled={
-                  isWritingFile ||
-                  !writeFilePath.trim() ||
-                  !writeFileContent.trim()
-                }
-                className="w-full"
-                data-testid="write-file-button"
-              >
-                {isWritingFile ? (
-                  <>
-                    <Loader2 className="w-4 h-4 mr-2 animate-spin" />
-                    Writing...
-                  </>
-                ) : (
-                  <>
-                    <Play className="w-4 h-4 mr-2" />
-                    Execute Write
-                  </>
-                )}
-              </Button>
-
-              {/* Result */}
-              {writeFileResult && (
-                <div
-                  className={cn(
-                    "p-3 rounded-md border",
-                    writeFileResult.success
-                      ? "bg-green-500/10 border-green-500/20"
-                      : "bg-red-500/10 border-red-500/20"
-                  )}
-                  data-testid="write-file-result"
-                >
-                  <div className="flex items-center gap-2 mb-2">
-                    {writeFileResult.success ? (
-                      <CheckCircle className="w-4 h-4 text-green-500" />
-                    ) : (
-                      <XCircle className="w-4 h-4 text-red-500" />
-                    )}
-                    <span className="text-sm font-medium">
-                      {writeFileResult.success ? "Success" : "Failed"}
-                    </span>
-                  </div>
-                  <pre className="text-xs overflow-auto max-h-40 whitespace-pre-wrap">
-                    {writeFileResult.success
-                      ? writeFileResult.output
-                      : writeFileResult.error}
-                  </pre>
-                </div>
-              )}
-            </CardContent>
-          </Card>
-
-          {/* Terminal Tool */}
-          <Card data-testid="terminal-tool">
-            <CardHeader>
-              <div className="flex items-center gap-2">
-                <Terminal className="w-5 h-5 text-purple-500" />
-                <CardTitle className="text-lg">Run Terminal</CardTitle>
-              </div>
-              <CardDescription>
-                Agent requests to execute a terminal command
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <div className="space-y-2">
-                <Label htmlFor="terminal-command">Command</Label>
-                <Input
-                  id="terminal-command"
-                  placeholder="ls -la"
-                  value={terminalCommand}
-                  onChange={(e) => setTerminalCommand(e.target.value)}
-                  data-testid="terminal-command-input"
-                />
-              </div>
-              <Button
-                onClick={handleRunCommand}
-                disabled={isRunningCommand || !terminalCommand.trim()}
-                className="w-full"
-                data-testid="run-terminal-button"
-              >
-                {isRunningCommand ? (
-                  <>
-                    <Loader2 className="w-4 h-4 mr-2 animate-spin" />
-                    Running...
-                  </>
-                ) : (
-                  <>
-                    <Play className="w-4 h-4 mr-2" />
-                    Execute Command
-                  </>
-                )}
-              </Button>
-
-              {/* Result */}
-              {terminalResult && (
-                <div
-                  className={cn(
-                    "p-3 rounded-md border",
-                    terminalResult.success
-                      ? "bg-green-500/10 border-green-500/20"
-                      : "bg-red-500/10 border-red-500/20"
-                  )}
-                  data-testid="terminal-result"
-                >
-                  <div className="flex items-center gap-2 mb-2">
-                    {terminalResult.success ? (
-                      <CheckCircle className="w-4 h-4 text-green-500" />
-                    ) : (
-                      <XCircle className="w-4 h-4 text-red-500" />
-                    )}
-                    <span className="text-sm font-medium">
-                      {terminalResult.success ? "Success" : "Failed"}
-                    </span>
-                  </div>
-                  <pre className="text-xs overflow-auto max-h-40 whitespace-pre-wrap font-mono bg-black/50 text-green-400 p-2 rounded">
-                    $ {terminalCommand}
-                    {"\n"}
-                    {terminalResult.success
-                      ? terminalResult.output
-                      : terminalResult.error}
-                  </pre>
-                </div>
-              )}
-            </CardContent>
-          </Card>
-        </div>
-
-        {/* Tool Log Section */}
-        <Card className="mt-6" data-testid="tool-log">
-          <CardHeader>
-            <CardTitle className="text-lg">Tool Execution Log</CardTitle>
-            <CardDescription>
-              View agent tool requests and responses
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className="space-y-2 text-sm">
-              <p className="text-muted-foreground">
-                Open your browser&apos;s developer console to see detailed agent
-                tool logs.
-              </p>
-              <ul className="list-disc list-inside space-y-1 text-muted-foreground">
-                <li>Read File - Agent requests file content from filesystem</li>
-                <li>Write File - Agent writes content to specified path</li>
-                <li>Run Terminal - Agent executes shell commands</li>
-              </ul>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-    </div>
-  );
-}

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

@@ -1,792 +0,0 @@
-"use client";
-
-import { useState, useCallback, useRef, useEffect, useMemo } from "react";
-import { useAppStore } from "@/store/app-store";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { ImageDropZone } from "@/components/ui/image-drop-zone";
-import {
-  Bot,
-  Send,
-  User,
-  Loader2,
-  Sparkles,
-  Wrench,
-  Trash2,
-  PanelLeftClose,
-  PanelLeft,
-  Paperclip,
-  X,
-} from "lucide-react";
-import { cn } from "@/lib/utils";
-import { useElectronAgent } from "@/hooks/use-electron-agent";
-import { SessionManager } from "@/components/session-manager";
-import { Markdown } from "@/components/ui/markdown";
-import type { ImageAttachment } from "@/store/app-store";
-import {
-  useKeyboardShortcuts,
-  useKeyboardShortcutsConfig,
-  KeyboardShortcut,
-} from "@/hooks/use-keyboard-shortcuts";
-
-export function AgentView() {
-  const { currentProject, setLastSelectedSession, getLastSelectedSession } = useAppStore();
-  const shortcuts = useKeyboardShortcutsConfig();
-  const [input, setInput] = useState("");
-  const [selectedImages, setSelectedImages] = useState<ImageAttachment[]>([]);
-  const [showImageDropZone, setShowImageDropZone] = useState(false);
-  const [currentTool, setCurrentTool] = useState<string | null>(null);
-  const [currentSessionId, setCurrentSessionId] = useState<string | null>(null);
-  const [showSessionManager, setShowSessionManager] = useState(true);
-  const [isDragOver, setIsDragOver] = useState(false);
-
-  // Track if initial session has been loaded
-  const initialSessionLoadedRef = useRef(false);
-
-  // Scroll management for auto-scroll
-  const messagesContainerRef = useRef<HTMLDivElement>(null);
-  const [isUserAtBottom, setIsUserAtBottom] = useState(true);
-
-  // Input ref for auto-focus
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  // Ref for quick create session function from SessionManager
-  const quickCreateSessionRef = useRef<(() => Promise<void>) | null>(null);
-
-  // Use the Electron agent hook (only if we have a session)
-  const {
-    messages,
-    isProcessing,
-    isConnected,
-    sendMessage,
-    clearHistory,
-    error: agentError,
-  } = useElectronAgent({
-    sessionId: currentSessionId || "",
-    workingDirectory: currentProject?.path,
-    onToolUse: (toolName) => {
-      setCurrentTool(toolName);
-      setTimeout(() => setCurrentTool(null), 2000);
-    },
-  });
-
-  // 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]);
-
-  // Restore last selected session when switching to Agent view or when project changes
-  useEffect(() => {
-    if (!currentProject?.path) {
-      // No project, reset
-      setCurrentSessionId(null);
-      initialSessionLoadedRef.current = false;
-      return;
-    }
-
-    // Only restore once per project
-    if (initialSessionLoadedRef.current) return;
-    initialSessionLoadedRef.current = true;
-
-    const lastSessionId = getLastSelectedSession(currentProject.path);
-    if (lastSessionId) {
-      console.log("[AgentView] Restoring last selected session:", lastSessionId);
-      setCurrentSessionId(lastSessionId);
-    }
-  }, [currentProject?.path, getLastSelectedSession]);
-
-  // Reset initialSessionLoadedRef when project changes
-  useEffect(() => {
-    initialSessionLoadedRef.current = false;
-  }, [currentProject?.path]);
-
-  const handleSend = useCallback(async () => {
-    if ((!input.trim() && selectedImages.length === 0) || isProcessing) return;
-
-    const messageContent = input;
-    const messageImages = selectedImages;
-
-    setInput("");
-    setSelectedImages([]);
-    setShowImageDropZone(false);
-
-    await sendMessage(messageContent, messageImages);
-  }, [input, selectedImages, isProcessing, sendMessage]);
-
-  const handleImagesSelected = useCallback((images: ImageAttachment[]) => {
-    setSelectedImages(images);
-  }, []);
-
-  const toggleImageDropZone = useCallback(() => {
-    setShowImageDropZone(!showImageDropZone);
-  }, [showImageDropZone]);
-
-  // Helper function to convert file to base64
-  const fileToBase64 = useCallback((file: File): Promise<string> => {
-    return new Promise((resolve, reject) => {
-      const reader = new FileReader();
-      reader.onload = () => {
-        if (typeof reader.result === "string") {
-          resolve(reader.result);
-        } else {
-          reject(new Error("Failed to read file as base64"));
-        }
-      };
-      reader.onerror = () => reject(new Error("Failed to read file"));
-      reader.readAsDataURL(file);
-    });
-  }, []);
-
-  // Process dropped files
-  const processDroppedFiles = useCallback(
-    async (files: FileList) => {
-      if (isProcessing) return;
-
-      const ACCEPTED_IMAGE_TYPES = [
-        "image/jpeg",
-        "image/jpg",
-        "image/png",
-        "image/gif",
-        "image/webp",
-      ];
-      const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
-      const MAX_FILES = 5;
-
-      const newImages: ImageAttachment[] = [];
-      const errors: string[] = [];
-
-      for (const file of Array.from(files)) {
-        // Validate file type
-        if (!ACCEPTED_IMAGE_TYPES.includes(file.type)) {
-          errors.push(
-            `${file.name}: Unsupported file type. Please use JPG, PNG, GIF, or WebP.`
-          );
-          continue;
-        }
-
-        // Validate file size
-        if (file.size > MAX_FILE_SIZE) {
-          const maxSizeMB = MAX_FILE_SIZE / (1024 * 1024);
-          errors.push(
-            `${file.name}: File too large. Maximum size is ${maxSizeMB}MB.`
-          );
-          continue;
-        }
-
-        // Check if we've reached max files
-        if (newImages.length + selectedImages.length >= MAX_FILES) {
-          errors.push(`Maximum ${MAX_FILES} images allowed.`);
-          break;
-        }
-
-        try {
-          const base64 = await fileToBase64(file);
-          const imageAttachment: ImageAttachment = {
-            id: `img-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
-            data: base64,
-            mimeType: file.type,
-            filename: file.name,
-            size: file.size,
-          };
-          newImages.push(imageAttachment);
-        } catch (error) {
-          errors.push(`${file.name}: Failed to process image.`);
-        }
-      }
-
-      if (errors.length > 0) {
-        console.warn("Image upload errors:", errors);
-      }
-
-      if (newImages.length > 0) {
-        setSelectedImages((prev) => [...prev, ...newImages]);
-      }
-    },
-    [isProcessing, selectedImages, fileToBase64]
-  );
-
-  // Remove individual image
-  const removeImage = useCallback((imageId: string) => {
-    setSelectedImages((prev) => prev.filter((img) => img.id !== imageId));
-  }, []);
-
-  // Drag and drop handlers for the input area
-  const handleDragEnter = useCallback(
-    (e: React.DragEvent) => {
-      e.preventDefault();
-      e.stopPropagation();
-      if (isProcessing || !isConnected) return;
-
-      // Check if dragged items contain files
-      if (e.dataTransfer.types.includes("Files")) {
-        setIsDragOver(true);
-      }
-    },
-    [isProcessing, isConnected]
-  );
-
-  const handleDragLeave = useCallback((e: React.DragEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    // Only set dragOver to false if we're leaving the input container
-    const rect = e.currentTarget.getBoundingClientRect();
-    const x = e.clientX;
-    const y = e.clientY;
-
-    if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom) {
-      setIsDragOver(false);
-    }
-  }, []);
-
-  const handleDragOver = useCallback((e: React.DragEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-  }, []);
-
-  const handleDrop = useCallback(
-    async (e: React.DragEvent) => {
-      e.preventDefault();
-      e.stopPropagation();
-      setIsDragOver(false);
-
-      if (isProcessing || !isConnected) return;
-
-      // Check if we have files
-      const files = e.dataTransfer.files;
-      if (files && files.length > 0) {
-        processDroppedFiles(files);
-        return;
-      }
-
-      // Handle file paths (from screenshots or other sources)
-      const items = e.dataTransfer.items;
-      if (items && items.length > 0) {
-        for (let i = 0; i < items.length; i++) {
-          const item = items[i];
-          if (item.kind === "file") {
-            const file = item.getAsFile();
-            if (file) {
-              const dataTransfer = new DataTransfer();
-              dataTransfer.items.add(file);
-              processDroppedFiles(dataTransfer.files);
-            }
-          }
-        }
-      }
-    },
-    [isProcessing, isConnected, processDroppedFiles]
-  );
-
-  const handlePaste = useCallback(
-    async (e: React.ClipboardEvent) => {
-      // Check if clipboard contains files
-      const items = e.clipboardData?.items;
-      if (items) {
-        const files: File[] = [];
-
-        for (let i = 0; i < items.length; i++) {
-          const item = items[i];
-
-          if (item.kind === "file") {
-            const file = item.getAsFile();
-            if (file && file.type.startsWith("image/")) {
-              e.preventDefault(); // Prevent default paste of file path
-              files.push(file);
-            }
-          }
-        }
-
-        if (files.length > 0) {
-          const dataTransfer = new DataTransfer();
-          files.forEach((file) => dataTransfer.items.add(file));
-          await processDroppedFiles(dataTransfer.files);
-        }
-      }
-    },
-    [processDroppedFiles]
-  );
-
-  const handleKeyPress = (e: React.KeyboardEvent) => {
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      handleSend();
-    }
-  };
-
-  const handleClearChat = async () => {
-    if (!confirm("Are you sure you want to clear this conversation?")) return;
-    await clearHistory();
-  };
-
-  // Scroll position detection
-  const checkIfUserIsAtBottom = useCallback(() => {
-    const container = messagesContainerRef.current;
-    if (!container) return;
-
-    const threshold = 50; // 50px threshold for "near bottom"
-    const isAtBottom =
-      container.scrollHeight - container.scrollTop - container.clientHeight <=
-      threshold;
-
-    setIsUserAtBottom(isAtBottom);
-  }, []);
-
-  // Scroll to bottom function
-  const scrollToBottom = useCallback((behavior: ScrollBehavior = "smooth") => {
-    const container = messagesContainerRef.current;
-    if (!container) return;
-
-    container.scrollTo({
-      top: container.scrollHeight,
-      behavior: behavior,
-    });
-  }, []);
-
-  // Handle scroll events
-  const handleScroll = useCallback(() => {
-    checkIfUserIsAtBottom();
-  }, [checkIfUserIsAtBottom]);
-
-  // Auto-scroll effect when messages change
-  useEffect(() => {
-    // Only auto-scroll if user was already at bottom
-    if (isUserAtBottom && messages.length > 0) {
-      // Use a small delay to ensure DOM is updated
-      setTimeout(() => {
-        scrollToBottom("smooth");
-      }, 100);
-    }
-  }, [messages, isUserAtBottom, scrollToBottom]);
-
-  // Initial scroll to bottom when session changes
-  useEffect(() => {
-    if (currentSessionId && messages.length > 0) {
-      // Scroll immediately without animation when switching sessions
-      setTimeout(() => {
-        scrollToBottom("auto");
-        setIsUserAtBottom(true);
-      }, 100);
-    }
-  }, [currentSessionId, scrollToBottom]);
-
-  // Auto-focus input when session is selected/changed
-  useEffect(() => {
-    if (currentSessionId && inputRef.current) {
-      // Small delay to ensure UI has updated
-      setTimeout(() => {
-        inputRef.current?.focus();
-      }, 200);
-    }
-  }, [currentSessionId]);
-
-  // Keyboard shortcuts for agent view
-  const agentShortcuts: KeyboardShortcut[] = useMemo(() => {
-    const shortcutsList: KeyboardShortcut[] = [];
-
-    // New session shortcut - only when in agent view with a project
-    if (currentProject) {
-      shortcutsList.push({
-        key: shortcuts.newSession,
-        action: () => {
-          if (quickCreateSessionRef.current) {
-            quickCreateSessionRef.current();
-          }
-        },
-        description: "Create new session",
-      });
-    }
-
-    return shortcutsList;
-  }, [currentProject, shortcuts]);
-
-  // Register keyboard shortcuts
-  useKeyboardShortcuts(agentShortcuts);
-
-  if (!currentProject) {
-    return (
-      <div
-        className="flex-1 flex items-center justify-center bg-background"
-        data-testid="agent-view-no-project"
-      >
-        <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>
-      </div>
-    );
-  }
-
-  // Show welcome message if no messages yet
-  const displayMessages =
-    messages.length === 0
-      ? [
-          {
-            id: "welcome",
-            role: "assistant" as const,
-            content:
-              "Hello! I'm the Automaker Agent. I can help you build software autonomously. I can read and modify files in this project, run commands, and execute tests. What would you like to create today?",
-            timestamp: new Date().toISOString(),
-          },
-        ]
-      : messages;
-
-  return (
-    <div
-      className="flex-1 flex overflow-hidden bg-background"
-      data-testid="agent-view"
-    >
-      {/* Session Manager Sidebar */}
-      {showSessionManager && currentProject && (
-        <div className="w-80 border-r border-border flex-shrink-0 bg-card/50">
-          <SessionManager
-            currentSessionId={currentSessionId}
-            onSelectSession={handleSelectSession}
-            projectPath={currentProject.path}
-            isCurrentSessionThinking={isProcessing}
-            onQuickCreateRef={quickCreateSessionRef}
-          />
-        </div>
-      )}
-
-      {/* Chat Area */}
-      <div className="flex-1 flex flex-col overflow-hidden">
-        {/* Header */}
-        <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 text-muted-foreground hover:text-foreground"
-            >
-              {showSessionManager ? (
-                <PanelLeftClose className="w-4 h-4" />
-              ) : (
-                <PanelLeft className="w-4 h-4" />
-              )}
-            </Button>
-            <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-lg font-semibold text-foreground">AI Agent</h1>
-              <p className="text-sm text-muted-foreground">
-                {currentProject.name}
-                {currentSessionId && !isConnected && " - Connecting..."}
-              </p>
-            </div>
-          </div>
-
-          {/* Status indicators & actions */}
-          <div className="flex items-center gap-3">
-            {currentTool && (
-              <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 font-medium">{agentError}</span>
-            )}
-            {currentSessionId && messages.length > 0 && (
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={handleClearChat}
-                disabled={isProcessing}
-                className="text-muted-foreground hover:text-foreground"
-              >
-                <Trash2 className="w-4 h-4 mr-2" />
-                Clear
-              </Button>
-            )}
-          </div>
-        </div>
-
-        {/* Messages */}
-        {!currentSessionId ? (
-          <div
-            className="flex-1 flex items-center justify-center bg-background"
-            data-testid="no-session-placeholder"
-          >
-            <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-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" />
-                {showSessionManager ? "View" : "Show"} Sessions
-              </Button>
-            </div>
-          </div>
-        ) : (
-          <div
-            ref={messagesContainerRef}
-            className="flex-1 overflow-y-auto px-6 py-6 space-y-6 scroll-smooth"
-            data-testid="message-list"
-            onScroll={handleScroll}
-          >
-            {displayMessages.map((message) => (
-              <div
-                key={message.id}
-                className={cn(
-                  "flex gap-4 max-w-4xl",
-                  message.role === "user" ? "flex-row-reverse ml-auto" : ""
-                )}
-              >
-                {/* Avatar */}
-                <div
-                  className={cn(
-                    "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 text-muted-foreground" />
-                  )}
-                </div>
-
-                {/* Message Bubble */}
-                <div
-                  className={cn(
-                    "flex-1 max-w-[85%] rounded-2xl px-4 py-3 shadow-sm",
-                    message.role === "user"
-                      ? "bg-primary text-primary-foreground"
-                      : "bg-card border border-border"
-                  )}
-                >
-                  {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>
-                  )}
-                  <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-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>
-                <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>
-                    <span className="text-sm text-muted-foreground">
-                      Thinking...
-                    </span>
-                  </div>
-                </div>
-              </div>
-            )}
-          </div>
-        )}
-
-        {/* Input Area */}
-        {currentSessionId && (
-          <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-4"
-                disabled={isProcessing || !isConnected}
-              />
-            )}
-
-            {/* 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>
-                        <p className="text-[10px] 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/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-xl p-1",
-                isDragOver && "bg-primary/5 ring-2 ring-primary/30"
-              )}
-              onDragEnter={handleDragEnter}
-              onDragLeave={handleDragLeave}
-              onDragOver={handleDragOver}
-              onDrop={handleDrop}
-            >
-              <div className="flex-1 relative">
-                <Input
-                  ref={inputRef}
-                  placeholder={
-                    isDragOver
-                      ? "Drop your images here..."
-                      : "Describe what you want to build..."
-                  }
-                  value={input}
-                  onChange={(e) => setInput(e.target.value)}
-                  onKeyPress={handleKeyPress}
-                  onPaste={handlePaste}
-                  disabled={isProcessing || !isConnected}
-                  data-testid="agent-input"
-                  className={cn(
-                    "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-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-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>
-                )}
-              </div>
-
-              {/* Image Attachment Button */}
-              <Button
-                variant="outline"
-                size="icon"
-                onClick={toggleImageDropZone}
-                disabled={isProcessing || !isConnected}
-                className={cn(
-                  "h-11 w-11 rounded-xl border-border",
-                  showImageDropZone && "bg-primary/10 text-primary border-primary/30",
-                  selectedImages.length > 0 && "border-primary/30 text-primary"
-                )}
-                title="Attach images"
-              >
-                <Paperclip className="w-4 h-4" />
-              </Button>
-
-              {/* Send Button */}
-              <Button
-                onClick={handleSend}
-                disabled={
-                  (!input.trim() && selectedImages.length === 0) ||
-                  isProcessing ||
-                  !isConnected
-                }
-                className="h-11 px-4 rounded-xl"
-                data-testid="send-message"
-              >
-                <Send className="w-4 h-4" />
-              </Button>
-            </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>
-    </div>
-  );
-}
-
-// Helper function to format file size
-function formatFileSize(bytes: number): string {
-  if (bytes === 0) return "0 B";
-  const k = 1024;
-  const sizes = ["B", "KB", "MB", "GB"];
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + " " + sizes[i];
-}

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

@@ -1,735 +0,0 @@
-"use client";
-
-import { useEffect, useState, useCallback, useMemo } from "react";
-import { useAppStore } from "@/store/app-store";
-import { getElectronAPI } from "@/lib/electron";
-import { Button } from "@/components/ui/button";
-import { HotkeyButton } from "@/components/ui/hotkey-button";
-import { Card } from "@/components/ui/card";
-import {
-  Plus,
-  RefreshCw,
-  FileText,
-  Image as ImageIcon,
-  Trash2,
-  Save,
-  Upload,
-  File,
-  X,
-  BookOpen,
-  EditIcon,
-  Eye,
-} from "lucide-react";
-import {
-  useKeyboardShortcuts,
-  useKeyboardShortcutsConfig,
-  KeyboardShortcut,
-} from "@/hooks/use-keyboard-shortcuts";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogDescription,
-  DialogFooter,
-} from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { cn } from "@/lib/utils";
-import { Markdown } from "../ui/markdown";
-
-interface ContextFile {
-  name: string;
-  type: "text" | "image";
-  content?: string;
-  path: string;
-}
-
-export function ContextView() {
-  const { currentProject } = useAppStore();
-  const shortcuts = useKeyboardShortcutsConfig();
-  const [contextFiles, setContextFiles] = useState<ContextFile[]>([]);
-  const [selectedFile, setSelectedFile] = useState<ContextFile | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const [isSaving, setIsSaving] = useState(false);
-  const [hasChanges, setHasChanges] = useState(false);
-  const [editedContent, setEditedContent] = useState("");
-  const [isAddDialogOpen, setIsAddDialogOpen] = useState(false);
-  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
-  const [newFileName, setNewFileName] = useState("");
-  const [newFileType, setNewFileType] = useState<"text" | "image">("text");
-  const [uploadedImageData, setUploadedImageData] = useState<string | null>(
-    null
-  );
-  const [newFileContent, setNewFileContent] = useState("");
-  const [isDropHovering, setIsDropHovering] = useState(false);
-  const [isPreviewMode, setIsPreviewMode] = useState(false);
-
-  // Keyboard shortcuts for this view
-  const contextShortcuts: KeyboardShortcut[] = useMemo(
-    () => [
-      {
-        key: shortcuts.addContextFile,
-        action: () => setIsAddDialogOpen(true),
-        description: "Add new context file",
-      },
-    ],
-    [shortcuts]
-  );
-  useKeyboardShortcuts(contextShortcuts);
-
-  // Get context directory path for user-added context files
-  const getContextPath = useCallback(() => {
-    if (!currentProject) return null;
-    return `${currentProject.path}/.automaker/context`;
-  }, [currentProject]);
-
-  const isMarkdownFile = (filename: string): boolean => {
-    const ext = filename.toLowerCase().substring(filename.lastIndexOf("."));
-    return ext === ".md" || ext === ".markdown";
-  };
-
-  // Determine if a file is an image based on extension
-  const isImageFile = (filename: string): boolean => {
-    const imageExtensions = [
-      ".png",
-      ".jpg",
-      ".jpeg",
-      ".gif",
-      ".webp",
-      ".svg",
-      ".bmp",
-    ];
-    const ext = filename.toLowerCase().substring(filename.lastIndexOf("."));
-    return imageExtensions.includes(ext);
-  };
-
-  // Load context files
-  const loadContextFiles = useCallback(async () => {
-    const contextPath = getContextPath();
-    if (!contextPath) return;
-
-    setIsLoading(true);
-    try {
-      const api = getElectronAPI();
-
-      // Ensure context directory exists
-      await api.mkdir(contextPath);
-
-      // Read directory contents
-      const result = await api.readdir(contextPath);
-      if (result.success && result.entries) {
-        const files: ContextFile[] = result.entries
-          .filter((entry) => entry.isFile)
-          .map((entry) => ({
-            name: entry.name,
-            type: isImageFile(entry.name) ? "image" : "text",
-            path: `${contextPath}/${entry.name}`,
-          }));
-        setContextFiles(files);
-      }
-    } catch (error) {
-      console.error("Failed to load context files:", error);
-    } finally {
-      setIsLoading(false);
-    }
-  }, [getContextPath]);
-
-  useEffect(() => {
-    loadContextFiles();
-  }, [loadContextFiles]);
-
-  // Load selected file content
-  const loadFileContent = useCallback(async (file: ContextFile) => {
-    try {
-      const api = getElectronAPI();
-      const result = await api.readFile(file.path);
-      if (result.success && result.content !== undefined) {
-        setEditedContent(result.content);
-        setSelectedFile({ ...file, content: result.content });
-        setHasChanges(false);
-      }
-    } catch (error) {
-      console.error("Failed to load file content:", error);
-    }
-  }, []);
-
-  // Select a file
-  const handleSelectFile = (file: ContextFile) => {
-    if (hasChanges) {
-      // Could add a confirmation dialog here
-    }
-    loadFileContent(file);
-    setIsPreviewMode(isMarkdownFile(file.name));
-  };
-
-  // Save current file
-  const saveFile = async () => {
-    if (!selectedFile) return;
-
-    setIsSaving(true);
-    try {
-      const api = getElectronAPI();
-      await api.writeFile(selectedFile.path, editedContent);
-      setSelectedFile({ ...selectedFile, content: editedContent });
-      setHasChanges(false);
-    } catch (error) {
-      console.error("Failed to save file:", error);
-    } finally {
-      setIsSaving(false);
-    }
-  };
-
-  // Handle content change
-  const handleContentChange = (value: string) => {
-    setEditedContent(value);
-    setHasChanges(true);
-  };
-
-  // Add new context file
-  const handleAddFile = async () => {
-    const contextPath = getContextPath();
-    if (!contextPath || !newFileName.trim()) return;
-
-    try {
-      const api = getElectronAPI();
-      let filename = newFileName.trim();
-
-      // Add default extension if not provided
-      if (newFileType === "text" && !filename.includes(".")) {
-        filename += ".md";
-      }
-
-      const filePath = `${contextPath}/${filename}`;
-
-      if (newFileType === "image" && uploadedImageData) {
-        // Write image data
-        await api.writeFile(filePath, uploadedImageData);
-      } else {
-        // Write text file with content (or empty if no content)
-        await api.writeFile(filePath, newFileContent);
-      }
-
-      setIsAddDialogOpen(false);
-      setNewFileName("");
-      setNewFileType("text");
-      setUploadedImageData(null);
-      setNewFileContent("");
-      setIsDropHovering(false);
-      await loadContextFiles();
-    } catch (error) {
-      console.error("Failed to add file:", error);
-    }
-  };
-
-  // Delete selected file
-  const handleDeleteFile = async () => {
-    if (!selectedFile) return;
-
-    try {
-      const api = getElectronAPI();
-      await api.deleteFile(selectedFile.path);
-
-      setIsDeleteDialogOpen(false);
-      setSelectedFile(null);
-      setEditedContent("");
-      setHasChanges(false);
-      await loadContextFiles();
-    } catch (error) {
-      console.error("Failed to delete file:", error);
-    }
-  };
-
-  // Handle image upload
-  const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (!file) return;
-
-    const reader = new FileReader();
-    reader.onload = (event) => {
-      const base64 = event.target?.result as string;
-      setUploadedImageData(base64);
-      if (!newFileName) {
-        setNewFileName(file.name);
-      }
-    };
-    reader.readAsDataURL(file);
-  };
-
-  // Handle drag and drop for file upload
-  const handleDrop = async (e: React.DragEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    const files = Array.from(e.dataTransfer.files);
-    if (files.length === 0) return;
-
-    const contextPath = getContextPath();
-    if (!contextPath) return;
-
-    const api = getElectronAPI();
-
-    for (const file of files) {
-      const reader = new FileReader();
-      reader.onload = async (event) => {
-        const content = event.target?.result as string;
-        const filePath = `${contextPath}/${file.name}`;
-        await api.writeFile(filePath, content);
-        await loadContextFiles();
-      };
-
-      if (isImageFile(file.name)) {
-        reader.readAsDataURL(file);
-      } else {
-        reader.readAsText(file);
-      }
-    }
-  };
-
-  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-  };
-
-  // Handle drag and drop for .txt and .md files in the add context dialog textarea
-  const handleTextAreaDrop = async (
-    e: React.DragEvent<HTMLTextAreaElement>
-  ) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setIsDropHovering(false);
-
-    const files = Array.from(e.dataTransfer.files);
-    if (files.length === 0) return;
-
-    const file = files[0]; // Only handle the first file
-    const fileName = file.name.toLowerCase();
-
-    // Only accept .txt and .md files
-    if (!fileName.endsWith(".txt") && !fileName.endsWith(".md")) {
-      console.warn("Only .txt and .md files are supported for drag and drop");
-      return;
-    }
-
-    const reader = new FileReader();
-    reader.onload = (event) => {
-      const content = event.target?.result as string;
-      setNewFileContent(content);
-
-      // Auto-fill filename if empty
-      if (!newFileName) {
-        setNewFileName(file.name);
-      }
-    };
-    reader.readAsText(file);
-  };
-
-  const handleTextAreaDragOver = (e: React.DragEvent<HTMLTextAreaElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setIsDropHovering(true);
-  };
-
-  const handleTextAreaDragLeave = (e: React.DragEvent<HTMLTextAreaElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setIsDropHovering(false);
-  };
-
-  if (!currentProject) {
-    return (
-      <div
-        className="flex-1 flex items-center justify-center"
-        data-testid="context-view-no-project"
-      >
-        <p className="text-muted-foreground">No project selected</p>
-      </div>
-    );
-  }
-
-  if (isLoading) {
-    return (
-      <div
-        className="flex-1 flex items-center justify-center"
-        data-testid="context-view-loading"
-      >
-        <RefreshCw className="w-6 h-6 animate-spin text-muted-foreground" />
-      </div>
-    );
-  }
-
-  return (
-    <div
-      className="flex-1 flex flex-col overflow-hidden content-bg"
-      data-testid="context-view"
-    >
-      {/* Header */}
-      <div className="flex items-center justify-between p-4 border-b border-border bg-glass backdrop-blur-md">
-        <div className="flex items-center gap-3">
-          <BookOpen className="w-5 h-5 text-muted-foreground" />
-          <div>
-            <h1 className="text-xl font-bold">Context Files</h1>
-            <p className="text-sm text-muted-foreground">
-              Add context files to include in AI prompts
-            </p>
-          </div>
-        </div>
-        <div className="flex gap-2">
-          <HotkeyButton
-            size="sm"
-            onClick={() => setIsAddDialogOpen(true)}
-            hotkey={shortcuts.addContextFile}
-            hotkeyActive={false}
-            data-testid="add-context-file"
-          >
-            <Plus className="w-4 h-4 mr-2" />
-            Add File
-          </HotkeyButton>
-        </div>
-      </div>
-
-      {/* Main content area with file list and editor */}
-      <div
-        className="flex-1 flex overflow-hidden"
-        onDrop={handleDrop}
-        onDragOver={handleDragOver}
-        data-testid="context-drop-zone"
-      >
-        {/* Left Panel - File List */}
-        <div className="w-64 border-r border-border flex flex-col overflow-hidden">
-          <div className="p-3 border-b border-border">
-            <h2 className="text-sm font-semibold text-muted-foreground">
-              Context Files ({contextFiles.length})
-            </h2>
-          </div>
-          <div
-            className="flex-1 overflow-y-auto p-2"
-            data-testid="context-file-list"
-          >
-            {contextFiles.length === 0 ? (
-              <div className="flex flex-col items-center justify-center h-full text-center p-4">
-                <Upload className="w-8 h-8 text-muted-foreground mb-2" />
-                <p className="text-sm text-muted-foreground">
-                  No context files yet.
-                  <br />
-                  Drop files here or click Add File.
-                </p>
-              </div>
-            ) : (
-              <div className="space-y-1">
-                {contextFiles.map((file) => (
-                  <button
-                    key={file.path}
-                    onClick={() => handleSelectFile(file)}
-                    className={cn(
-                      "w-full flex items-center gap-2 px-3 py-2 rounded-lg text-left transition-colors",
-                      selectedFile?.path === file.path
-                        ? "bg-primary/20 text-foreground border border-primary/30"
-                        : "text-muted-foreground hover:bg-accent hover:text-foreground"
-                    )}
-                    data-testid={`context-file-${file.name}`}
-                  >
-                    {file.type === "image" ? (
-                      <ImageIcon className="w-4 h-4 flex-shrink-0" />
-                    ) : (
-                      <FileText className="w-4 h-4 flex-shrink-0" />
-                    )}
-                    <span className="truncate text-sm">{file.name}</span>
-                  </button>
-                ))}
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* Right Panel - Editor/Preview */}
-        <div className="flex-1 flex flex-col overflow-hidden">
-          {selectedFile ? (
-            <>
-              {/* File toolbar */}
-              <div className="flex items-center justify-between p-3 border-b border-border bg-card">
-                <div className="flex items-center gap-2">
-                  {selectedFile.type === "image" ? (
-                    <ImageIcon className="w-4 h-4 text-muted-foreground" />
-                  ) : (
-                    <FileText className="w-4 h-4 text-muted-foreground" />
-                  )}
-                  <span className="text-sm font-medium">
-                    {selectedFile.name}
-                  </span>
-                </div>
-                <div className="flex gap-2">
-                  {selectedFile.type === "text" &&
-                    isMarkdownFile(selectedFile.name) && (
-                      <Button
-                        variant={"outline"}
-                        size="sm"
-                        onClick={() => setIsPreviewMode(!isPreviewMode)}
-                        data-testid="toggle-preview-mode"
-                      >
-                        {isPreviewMode ? (
-                          <>
-                            <EditIcon className="w-4 h-4 mr-2" />
-                            Edit
-                          </>
-                        ) : (
-                          <>
-                            <Eye className="w-4 h-4 mr-2" />
-                            Preview
-                          </>
-                        )}
-                      </Button>
-                    )}
-                  {selectedFile.type === "text" && (
-                    <Button
-                      size="sm"
-                      onClick={saveFile}
-                      disabled={!hasChanges || isSaving}
-                      data-testid="save-context-file"
-                    >
-                      <Save className="w-4 h-4 mr-2" />
-                      {isSaving ? "Saving..." : hasChanges ? "Save" : "Saved"}
-                    </Button>
-                  )}
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={() => setIsDeleteDialogOpen(true)}
-                    className="text-red-500 hover:text-red-400 hover:border-red-500/50"
-                    data-testid="delete-context-file"
-                  >
-                    <Trash2 className="w-4 h-4" />
-                  </Button>
-                </div>
-              </div>
-
-              {/* Content area */}
-              <div className="flex-1 overflow-hidden p-4">
-                {selectedFile.type === "image" ? (
-                  <div
-                    className="h-full flex items-center justify-center bg-card rounded-lg"
-                    data-testid="image-preview"
-                  >
-                    <img
-                      src={editedContent}
-                      alt={selectedFile.name}
-                      className="max-w-full max-h-full object-contain"
-                    />
-                  </div>
-                ) : isPreviewMode ? (
-                  <Card className="h-full overflow-auto p-4" data-testid="markdown-preview">
-                    <Markdown>{editedContent}</Markdown>
-                  </Card>
-                ) : (
-                  <Card className="h-full overflow-hidden">
-                    <textarea
-                      className="w-full h-full p-4 font-mono text-sm bg-transparent resize-none focus:outline-none"
-                      value={editedContent}
-                      onChange={(e) => handleContentChange(e.target.value)}
-                      placeholder="Enter context content here..."
-                      spellCheck={false}
-                      data-testid="context-editor"
-                    />
-                  </Card>
-                )}
-              </div>
-            </>
-          ) : (
-            <div className="flex-1 flex items-center justify-center">
-              <div className="text-center">
-                <File className="w-12 h-12 text-muted-foreground mx-auto mb-3" />
-                <p className="text-foreground-secondary">
-                  Select a file to view or edit
-                </p>
-                <p className="text-muted-foreground text-sm mt-1">
-                  Or drop files here to add them
-                </p>
-              </div>
-            </div>
-          )}
-        </div>
-      </div>
-
-      {/* Add File Dialog */}
-      <Dialog open={isAddDialogOpen} onOpenChange={setIsAddDialogOpen}>
-        <DialogContent
-          data-testid="add-context-dialog"
-          className="w-[60vw] max-w-[60vw] max-h-[80vh] flex flex-col"
-        >
-          <DialogHeader>
-            <DialogTitle>Add Context File</DialogTitle>
-            <DialogDescription>
-              Add a new text or image file to the context.
-            </DialogDescription>
-          </DialogHeader>
-          <div className="space-y-4 py-4">
-            <div className="flex gap-2">
-              <Button
-                variant={newFileType === "text" ? "default" : "outline"}
-                size="sm"
-                onClick={() => setNewFileType("text")}
-                data-testid="add-text-type"
-              >
-                <FileText className="w-4 h-4 mr-2" />
-                Text
-              </Button>
-              <Button
-                variant={newFileType === "image" ? "default" : "outline"}
-                size="sm"
-                onClick={() => setNewFileType("image")}
-                data-testid="add-image-type"
-              >
-                <ImageIcon className="w-4 h-4 mr-2" />
-                Image
-              </Button>
-            </div>
-
-            <div className="space-y-2">
-              <Label htmlFor="filename">File Name</Label>
-              <Input
-                id="filename"
-                value={newFileName}
-                onChange={(e) => setNewFileName(e.target.value)}
-                placeholder={
-                  newFileType === "text" ? "context.md" : "image.png"
-                }
-                data-testid="new-file-name"
-              />
-            </div>
-
-            {newFileType === "text" && (
-              <div className="space-y-2">
-                <Label htmlFor="context-content">Context Content</Label>
-                <div
-                  className={cn(
-                    "relative rounded-lg transition-colors",
-                    isDropHovering && "ring-2 ring-primary"
-                  )}
-                >
-                  <textarea
-                    id="context-content"
-                    value={newFileContent}
-                    onChange={(e) => setNewFileContent(e.target.value)}
-                    onDrop={handleTextAreaDrop}
-                    onDragOver={handleTextAreaDragOver}
-                    onDragLeave={handleTextAreaDragLeave}
-                    placeholder="Enter context content here or drag & drop a .txt or .md file..."
-                    className={cn(
-                      "w-full h-40 p-3 font-mono text-sm bg-background border border-border rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent",
-                      isDropHovering && "border-primary bg-primary/10"
-                    )}
-                    spellCheck={false}
-                    data-testid="new-file-content"
-                  />
-                  {isDropHovering && (
-                    <div className="absolute inset-0 flex items-center justify-center bg-primary/20 rounded-lg pointer-events-none">
-                      <div className="flex flex-col items-center text-primary">
-                        <Upload className="w-8 h-8 mb-2" />
-                        <span className="text-sm font-medium">
-                          Drop .txt or .md file here
-                        </span>
-                      </div>
-                    </div>
-                  )}
-                </div>
-                <p className="text-xs text-muted-foreground">
-                  Drag & drop .txt or .md files to import their content
-                </p>
-              </div>
-            )}
-
-            {newFileType === "image" && (
-              <div className="space-y-2">
-                <Label>Upload Image</Label>
-                <div className="border-2 border-dashed border-border rounded-lg p-4 text-center">
-                  <input
-                    type="file"
-                    accept="image/*"
-                    onChange={handleImageUpload}
-                    className="hidden"
-                    id="image-upload"
-                    data-testid="image-upload-input"
-                  />
-                  <label
-                    htmlFor="image-upload"
-                    className="cursor-pointer flex flex-col items-center"
-                  >
-                    {uploadedImageData ? (
-                      <img
-                        src={uploadedImageData}
-                        alt="Preview"
-                        className="max-w-32 max-h-32 object-contain mb-2"
-                      />
-                    ) : (
-                      <Upload className="w-8 h-8 text-muted-foreground mb-2" />
-                    )}
-                    <span className="text-sm text-muted-foreground">
-                      {uploadedImageData
-                        ? "Click to change"
-                        : "Click to upload"}
-                    </span>
-                  </label>
-                </div>
-              </div>
-            )}
-          </div>
-          <DialogFooter>
-            <Button
-              variant="outline"
-              onClick={() => {
-                setIsAddDialogOpen(false);
-                setNewFileName("");
-                setUploadedImageData(null);
-                setNewFileContent("");
-                setIsDropHovering(false);
-              }}
-            >
-              Cancel
-            </Button>
-            <HotkeyButton
-              onClick={handleAddFile}
-              disabled={
-                !newFileName.trim() ||
-                (newFileType === "image" && !uploadedImageData)
-              }
-              hotkey={{ key: "Enter", cmdCtrl: true }}
-              hotkeyActive={isAddDialogOpen}
-              data-testid="confirm-add-file"
-            >
-              Add File
-            </HotkeyButton>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-
-      {/* Delete Confirmation Dialog */}
-      <Dialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
-        <DialogContent data-testid="delete-context-dialog">
-          <DialogHeader>
-            <DialogTitle>Delete Context File</DialogTitle>
-            <DialogDescription>
-              Are you sure you want to delete "{selectedFile?.name}"? This
-              action cannot be undone.
-            </DialogDescription>
-          </DialogHeader>
-          <DialogFooter>
-            <Button
-              variant="outline"
-              onClick={() => setIsDeleteDialogOpen(false)}
-            >
-              Cancel
-            </Button>
-            <Button
-              variant="destructive"
-              onClick={handleDeleteFile}
-              className="bg-red-600 hover:bg-red-700"
-              data-testid="confirm-delete-file"
-            >
-              Delete
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </div>
-  );
-}

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

@@ -1,86 +0,0 @@
-"use client";
-
-import { memo } from "react";
-import { useDroppable } from "@dnd-kit/core";
-import { cn } from "@/lib/utils";
-import type { ReactNode } from "react";
-
-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 });
-
-  return (
-    <div
-      ref={setNodeRef}
-      className={cn(
-        "relative flex flex-col h-full rounded-xl transition-all duration-200 w-72",
-        showBorder && "border border-border/60",
-        isOver && "ring-2 ring-primary/30 ring-offset-1 ring-offset-background"
-      )}
-      data-testid={`kanban-column-${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", colorClass)} />
-        <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/profiles-view/components/index.ts

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

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

@@ -1,48 +0,0 @@
-import {
-  Brain,
-  Zap,
-  Scale,
-  Cpu,
-  Rocket,
-  Sparkles,
-} from "lucide-react";
-import type { AgentModel, ThinkingLevel } from "@/store/app-store";
-
-// Icon mapping for profiles
-export const PROFILE_ICONS: Record<
-  string,
-  React.ComponentType<{ className?: string }>
-> = {
-  Brain,
-  Zap,
-  Scale,
-  Cpu,
-  Rocket,
-  Sparkles,
-};
-
-// Available icons for selection
-export const ICON_OPTIONS = [
-  { name: "Brain", icon: Brain },
-  { name: "Zap", icon: Zap },
-  { name: "Scale", icon: Scale },
-  { name: "Cpu", icon: Cpu },
-  { name: "Rocket", icon: Rocket },
-  { name: "Sparkles", icon: Sparkles },
-];
-
-// Model options for the form
-export const CLAUDE_MODELS: { id: AgentModel; label: string }[] = [
-  { id: "haiku", label: "Claude Haiku" },
-  { id: "sonnet", label: "Claude Sonnet" },
-  { id: "opus", label: "Claude Opus" },
-];
-
-export const THINKING_LEVELS: { id: ThinkingLevel; label: string }[] = [
-  { id: "none", label: "None" },
-  { id: "low", label: "Low" },
-  { id: "medium", label: "Medium" },
-  { id: "high", label: "High" },
-  { id: "ultrathink", label: "Ultrathink" },
-];
-

apps/app/src/components/views/running-agents-view.tsx

@@ -1,210 +0,0 @@
-"use client";
-
-import { useState, useEffect, useCallback } from "react";
-import { Bot, Folder, Loader2, RefreshCw, Square, Activity } from "lucide-react";
-import { getElectronAPI, RunningAgent } from "@/lib/electron";
-import { useAppStore } from "@/store/app-store";
-import { Button } from "@/components/ui/button";
-import { cn } from "@/lib/utils";
-
-export function RunningAgentsView() {
-  const [runningAgents, setRunningAgents] = useState<RunningAgent[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [refreshing, setRefreshing] = useState(false);
-  const { setCurrentProject, projects, setCurrentView } = useAppStore();
-
-  const fetchRunningAgents = useCallback(async () => {
-    try {
-      const api = getElectronAPI();
-      if (api.runningAgents) {
-        const result = await api.runningAgents.getAll();
-        if (result.success && result.runningAgents) {
-          setRunningAgents(result.runningAgents);
-        }
-      }
-    } catch (error) {
-      console.error("[RunningAgentsView] Error fetching running agents:", error);
-    } finally {
-      setLoading(false);
-      setRefreshing(false);
-    }
-  }, []);
-
-  // Initial fetch
-  useEffect(() => {
-    fetchRunningAgents();
-  }, [fetchRunningAgents]);
-
-  // Auto-refresh every 2 seconds
-  useEffect(() => {
-    const interval = setInterval(() => {
-      fetchRunningAgents();
-    }, 2000);
-
-    return () => clearInterval(interval);
-  }, [fetchRunningAgents]);
-
-  // Subscribe to auto-mode events to update in real-time
-  useEffect(() => {
-    const api = getElectronAPI();
-    if (!api.autoMode) return;
-
-    const unsubscribe = api.autoMode.onEvent((event) => {
-      // When a feature completes or errors, refresh the list
-      if (
-        event.type === "auto_mode_feature_complete" ||
-        event.type === "auto_mode_error"
-      ) {
-        fetchRunningAgents();
-      }
-    });
-
-    return () => {
-      unsubscribe();
-    };
-  }, [fetchRunningAgents]);
-
-  const handleRefresh = useCallback(() => {
-    setRefreshing(true);
-    fetchRunningAgents();
-  }, [fetchRunningAgents]);
-
-  const handleStopAgent = useCallback(async (featureId: string) => {
-    try {
-      const api = getElectronAPI();
-      if (api.autoMode) {
-        await api.autoMode.stopFeature(featureId);
-        // Refresh list after stopping
-        fetchRunningAgents();
-      }
-    } catch (error) {
-      console.error("[RunningAgentsView] Error stopping agent:", error);
-    }
-  }, [fetchRunningAgents]);
-
-  const handleNavigateToProject = useCallback((agent: RunningAgent) => {
-    // Find the project by path
-    const project = projects.find((p) => p.path === agent.projectPath);
-    if (project) {
-      setCurrentProject(project);
-      setCurrentView("board");
-    }
-  }, [projects, setCurrentProject, setCurrentView]);
-
-  if (loading) {
-    return (
-      <div className="flex-1 flex items-center justify-center">
-        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex-1 flex flex-col overflow-hidden p-6">
-      {/* Header */}
-      <div className="flex items-center justify-between mb-6">
-        <div className="flex items-center gap-3">
-          <div className="p-2 rounded-lg bg-brand-500/10">
-            <Activity className="h-6 w-6 text-brand-500" />
-          </div>
-          <div>
-            <h1 className="text-2xl font-bold">Running Agents</h1>
-            <p className="text-sm text-muted-foreground">
-              {runningAgents.length === 0
-                ? "No agents currently running"
-                : `${runningAgents.length} agent${runningAgents.length === 1 ? "" : "s"} running across all projects`}
-            </p>
-          </div>
-        </div>
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={handleRefresh}
-          disabled={refreshing}
-        >
-          <RefreshCw
-            className={cn("h-4 w-4 mr-2", refreshing && "animate-spin")}
-          />
-          Refresh
-        </Button>
-      </div>
-
-      {/* Content */}
-      {runningAgents.length === 0 ? (
-        <div className="flex-1 flex flex-col items-center justify-center text-center">
-          <div className="p-4 rounded-full bg-muted/50 mb-4">
-            <Bot className="h-12 w-12 text-muted-foreground" />
-          </div>
-          <h2 className="text-lg font-medium mb-2">No Running Agents</h2>
-          <p className="text-muted-foreground max-w-md">
-            Agents will appear here when they are actively working on features.
-            Start an agent from the Kanban board by dragging a feature to "In Progress".
-          </p>
-        </div>
-      ) : (
-        <div className="flex-1 overflow-auto">
-          <div className="space-y-3">
-            {runningAgents.map((agent) => (
-              <div
-                key={`${agent.projectPath}-${agent.featureId}`}
-                className="flex items-center justify-between p-4 rounded-lg border border-border bg-card hover:bg-accent/50 transition-colors"
-              >
-                <div className="flex items-center gap-4 min-w-0">
-                  {/* Status indicator */}
-                  <div className="relative">
-                    <Bot className="h-8 w-8 text-brand-500" />
-                    <span className="absolute -top-1 -right-1 flex h-3 w-3">
-                      <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
-                      <span className="relative inline-flex rounded-full h-3 w-3 bg-green-500" />
-                    </span>
-                  </div>
-
-                  {/* Agent info */}
-                  <div className="min-w-0">
-                    <div className="flex items-center gap-2">
-                      <span className="font-medium truncate">
-                        {agent.featureId}
-                      </span>
-                      {agent.isAutoMode && (
-                        <span className="px-2 py-0.5 text-[10px] font-medium rounded-full bg-brand-500/10 text-brand-500 border border-brand-500/30">
-                          AUTO
-                        </span>
-                      )}
-                    </div>
-                    <button
-                      onClick={() => handleNavigateToProject(agent)}
-                      className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
-                    >
-                      <Folder className="h-3.5 w-3.5" />
-                      <span className="truncate">{agent.projectName}</span>
-                    </button>
-                  </div>
-                </div>
-
-                {/* Actions */}
-                <div className="flex items-center gap-2 flex-shrink-0">
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    onClick={() => handleNavigateToProject(agent)}
-                    className="text-muted-foreground hover:text-foreground"
-                  >
-                    View Project
-                  </Button>
-                  <Button
-                    variant="destructive"
-                    size="sm"
-                    onClick={() => handleStopAgent(agent.featureId)}
-                  >
-                    <Square className="h-3.5 w-3.5 mr-1.5" />
-                    Stop
-                  </Button>
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}

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

@@ -1,240 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { useAppStore } from "@/store/app-store";
-import { Label } from "@/components/ui/label";
-import {
-  Key,
-  Palette,
-  Terminal,
-  FlaskConical,
-  Trash2,
-  Settings2,
-  Volume2,
-  VolumeX,
-} from "lucide-react";
-import { Checkbox } from "@/components/ui/checkbox";
-
-import { useCliStatus } from "./settings-view/hooks/use-cli-status";
-import { useScrollTracking } from "@/hooks/use-scroll-tracking";
-import { SettingsHeader } from "./settings-view/components/settings-header";
-import { KeyboardMapDialog } from "./settings-view/components/keyboard-map-dialog";
-import { DeleteProjectDialog } from "./settings-view/components/delete-project-dialog";
-import { SettingsNavigation } from "./settings-view/components/settings-navigation";
-import { ApiKeysSection } from "./settings-view/api-keys/api-keys-section";
-import { ClaudeCliStatus } from "./settings-view/cli-status/claude-cli-status";
-import { AppearanceSection } from "./settings-view/appearance/appearance-section";
-import { KeyboardShortcutsSection } from "./settings-view/keyboard-shortcuts/keyboard-shortcuts-section";
-import { FeatureDefaultsSection } from "./settings-view/feature-defaults/feature-defaults-section";
-import { DangerZoneSection } from "./settings-view/danger-zone/danger-zone-section";
-import type {
-  Project as SettingsProject,
-  Theme,
-} from "./settings-view/shared/types";
-import type { Project as ElectronProject } from "@/lib/electron";
-
-// Navigation items for the side panel
-const NAV_ITEMS = [
-  { id: "api-keys", label: "API Keys", icon: Key },
-  { id: "claude", label: "Claude", icon: Terminal },
-  { id: "appearance", label: "Appearance", icon: Palette },
-  { id: "audio", label: "Audio", icon: Volume2 },
-  { id: "keyboard", label: "Keyboard Shortcuts", icon: Settings2 },
-  { id: "defaults", label: "Feature Defaults", icon: FlaskConical },
-  { id: "danger", label: "Danger Zone", icon: Trash2 },
-];
-
-export function SettingsView() {
-  const {
-    theme,
-    setTheme,
-    setProjectTheme,
-    defaultSkipTests,
-    setDefaultSkipTests,
-    useWorktrees,
-    setUseWorktrees,
-    showProfilesOnly,
-    setShowProfilesOnly,
-    muteDoneSound,
-    setMuteDoneSound,
-    currentProject,
-    moveProjectToTrash,
-  } = useAppStore();
-
-  // Convert electron Project to settings-view Project type
-  const convertProject = (
-    project: ElectronProject | null
-  ): SettingsProject | null => {
-    if (!project) return null;
-    return {
-      id: project.id,
-      name: project.name,
-      path: project.path,
-      theme: project.theme as Theme | undefined,
-    };
-  };
-
-  const settingsProject = convertProject(currentProject);
-
-  // Compute the effective theme for the current project
-  const effectiveTheme = (settingsProject?.theme || theme) as Theme;
-
-  // Handler to set theme - always updates global theme (user's preference),
-  // and also sets per-project theme if a project is selected
-  const handleSetTheme = (newTheme: typeof theme) => {
-    // Always update global theme so user's preference persists across all projects
-    setTheme(newTheme);
-    // Also set per-project theme if a project is selected
-    if (currentProject) {
-      setProjectTheme(currentProject.id, newTheme);
-    }
-  };
-
-  // Use CLI status hook
-  const {
-    claudeCliStatus,
-    isCheckingClaudeCli,
-    handleRefreshClaudeCli,
-  } = useCliStatus();
-
-  // Use scroll tracking hook
-  const { activeSection, scrollToSection, scrollContainerRef } =
-    useScrollTracking({
-      items: NAV_ITEMS,
-      filterFn: (item) => item.id !== "danger" || !!currentProject,
-      initialSection: "api-keys",
-    });
-
-  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
-  const [showKeyboardMapDialog, setShowKeyboardMapDialog] = useState(false);
-
-  return (
-    <div
-      className="flex-1 flex flex-col overflow-hidden content-bg"
-      data-testid="settings-view"
-    >
-      {/* Header Section */}
-      <SettingsHeader />
-
-      {/* Content Area with Sidebar */}
-      <div className="flex-1 flex overflow-hidden">
-        {/* Sticky Side Navigation */}
-        <SettingsNavigation
-          navItems={NAV_ITEMS}
-          activeSection={activeSection}
-          currentProject={currentProject}
-          onNavigate={scrollToSection}
-        />
-
-        {/* Scrollable Content */}
-        <div ref={scrollContainerRef} className="flex-1 overflow-y-auto p-8">
-          <div className="max-w-4xl mx-auto space-y-6 pb-96">
-            {/* API Keys Section */}
-            <ApiKeysSection />
-
-            {/* Claude CLI Status Section */}
-            {claudeCliStatus && (
-              <ClaudeCliStatus
-                status={claudeCliStatus}
-                isChecking={isCheckingClaudeCli}
-                onRefresh={handleRefreshClaudeCli}
-              />
-            )}
-
-            {/* Appearance Section */}
-            <AppearanceSection
-              effectiveTheme={effectiveTheme}
-              currentProject={settingsProject}
-              onThemeChange={handleSetTheme}
-            />
-
-
-            {/* Keyboard Shortcuts Section */}
-            <KeyboardShortcutsSection
-              onOpenKeyboardMap={() => setShowKeyboardMapDialog(true)}
-            />
-
-            {/* Audio Section */}
-            <div
-              id="audio"
-              className="rounded-2xl border border-border/50 bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl shadow-sm shadow-black/5 overflow-hidden scroll-mt-6"
-            >
-              <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
-                <div className="flex items-center gap-3 mb-2">
-                  <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
-                    <Volume2 className="w-5 h-5 text-brand-500" />
-                  </div>
-                  <h2 className="text-lg font-semibold text-foreground tracking-tight">
-                    Audio
-                  </h2>
-                </div>
-                <p className="text-sm text-muted-foreground/80 ml-12">
-                  Configure audio and notification settings.
-                </p>
-              </div>
-              <div className="p-6 space-y-4">
-                {/* Mute Done Sound Setting */}
-                <div className="group flex items-start space-x-3 p-3 rounded-xl hover:bg-accent/30 transition-colors duration-200 -mx-3">
-                  <Checkbox
-                    id="mute-done-sound"
-                    checked={muteDoneSound}
-                    onCheckedChange={(checked) =>
-                      setMuteDoneSound(checked === true)
-                    }
-                    className="mt-1"
-                    data-testid="mute-done-sound-checkbox"
-                  />
-                  <div className="space-y-1.5">
-                    <Label
-                      htmlFor="mute-done-sound"
-                      className="text-foreground cursor-pointer font-medium flex items-center gap-2"
-                    >
-                      <VolumeX className="w-4 h-4 text-brand-500" />
-                      Mute notification sound when agents complete
-                    </Label>
-                    <p className="text-xs text-muted-foreground/80 leading-relaxed">
-                      When enabled, disables the &quot;ding&quot; sound that
-                      plays when an agent completes a feature. The feature
-                      will still move to the completed column, but without
-                      audio notification.
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            {/* Feature Defaults Section */}
-            <FeatureDefaultsSection
-              showProfilesOnly={showProfilesOnly}
-              defaultSkipTests={defaultSkipTests}
-              useWorktrees={useWorktrees}
-              onShowProfilesOnlyChange={setShowProfilesOnly}
-              onDefaultSkipTestsChange={setDefaultSkipTests}
-              onUseWorktreesChange={setUseWorktrees}
-            />
-
-            {/* Danger Zone Section - Only show when a project is selected */}
-            <DangerZoneSection
-              project={settingsProject}
-              onDeleteClick={() => setShowDeleteDialog(true)}
-            />
-          </div>
-        </div>
-      </div>
-
-      {/* Keyboard Map Dialog */}
-      <KeyboardMapDialog
-        open={showKeyboardMapDialog}
-        onOpenChange={setShowKeyboardMapDialog}
-      />
-
-      {/* Delete Project Confirmation Dialog */}
-      <DeleteProjectDialog
-        open={showDeleteDialog}
-        onOpenChange={setShowDeleteDialog}
-        project={currentProject}
-        onConfirm={moveProjectToTrash}
-      />
-    </div>
-  );
-}

apps/app/src/components/views/settings-view/api-keys/api-keys-section.tsx

@@ -1,86 +0,0 @@
-import { useAppStore } from "@/store/app-store";
-import { useSetupStore } from "@/store/setup-store";
-import { Button } from "@/components/ui/button";
-import { Key, CheckCircle2 } from "lucide-react";
-import { ApiKeyField } from "./api-key-field";
-import { buildProviderConfigs } from "@/config/api-providers";
-import { AuthenticationStatusDisplay } from "./authentication-status-display";
-import { SecurityNotice } from "./security-notice";
-import { useApiKeyManagement } from "./hooks/use-api-key-management";
-import { cn } from "@/lib/utils";
-
-export function ApiKeysSection() {
-  const { apiKeys } = useAppStore();
-  const { claudeAuthStatus } = useSetupStore();
-
-  const { providerConfigParams, apiKeyStatus, handleSave, saved } =
-    useApiKeyManagement();
-
-  const providerConfigs = buildProviderConfigs(providerConfigParams);
-
-  return (
-    <div
-      id="api-keys"
-      className={cn(
-        "rounded-2xl overflow-hidden scroll-mt-6",
-        "border border-border/50",
-        "bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl",
-        "shadow-sm shadow-black/5"
-      )}
-    >
-      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
-        <div className="flex items-center gap-3 mb-2">
-          <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
-            <Key className="w-5 h-5 text-brand-500" />
-          </div>
-          <h2 className="text-lg font-semibold text-foreground tracking-tight">API Keys</h2>
-        </div>
-        <p className="text-sm text-muted-foreground/80 ml-12">
-          Configure your AI provider API keys. Keys are stored locally in your browser.
-        </p>
-      </div>
-      <div className="p-6 space-y-6">
-        {/* API Key Fields */}
-        {providerConfigs.map((provider) => (
-          <ApiKeyField key={provider.key} config={provider} />
-        ))}
-
-        {/* Authentication Status Display */}
-        <AuthenticationStatusDisplay
-          claudeAuthStatus={claudeAuthStatus}
-          apiKeyStatus={apiKeyStatus}
-          apiKeys={apiKeys}
-        />
-
-        {/* Security Notice */}
-        <SecurityNotice />
-
-        {/* Save Button */}
-        <div className="flex items-center gap-4 pt-2">
-          <Button
-            onClick={handleSave}
-            data-testid="save-settings"
-            className={cn(
-              "min-w-[140px] h-10",
-              "bg-gradient-to-r from-brand-500 to-brand-600",
-              "hover:from-brand-600 hover:to-brand-600",
-              "text-white font-medium border-0",
-              "shadow-md shadow-brand-500/20 hover:shadow-lg hover:shadow-brand-500/25",
-              "transition-all duration-200 ease-out",
-              "hover:scale-[1.02] active:scale-[0.98]"
-            )}
-          >
-            {saved ? (
-              <>
-                <CheckCircle2 className="w-4 h-4 mr-2" />
-                Saved!
-              </>
-            ) : (
-              "Save API Keys"
-            )}
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-}

apps/app/src/components/views/settings-view/api-keys/authentication-status-display.tsx

@@ -1,133 +0,0 @@
-import { Label } from "@/components/ui/label";
-import {
-  CheckCircle2,
-  AlertCircle,
-  Info,
-  Terminal,
-  Sparkles,
-} from "lucide-react";
-import type { ClaudeAuthStatus } from "@/store/setup-store";
-
-interface AuthenticationStatusDisplayProps {
-  claudeAuthStatus: ClaudeAuthStatus | null;
-  apiKeyStatus: {
-    hasAnthropicKey: boolean;
-    hasGoogleKey: boolean;
-  } | null;
-  apiKeys: {
-    anthropic: string;
-    google: string;
-  };
-}
-
-export function AuthenticationStatusDisplay({
-  claudeAuthStatus,
-  apiKeyStatus,
-  apiKeys,
-}: AuthenticationStatusDisplayProps) {
-  return (
-    <div className="space-y-4 pt-4 border-t border-border">
-      <div className="flex items-center gap-2 mb-3">
-        <Info className="w-4 h-4 text-brand-500" />
-        <Label className="text-foreground font-semibold">
-          Current Authentication Configuration
-        </Label>
-      </div>
-
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-        {/* Claude Authentication Status */}
-        <div className="p-3 rounded-lg bg-card border border-border">
-          <div className="flex items-center gap-2 mb-1.5">
-            <Terminal className="w-4 h-4 text-brand-500" />
-            <span className="text-sm font-medium text-foreground">
-              Claude (Anthropic)
-            </span>
-          </div>
-          <div className="space-y-1.5 text-xs min-h-12">
-            {claudeAuthStatus?.authenticated ? (
-              <>
-                <div className="flex items-center gap-2">
-                  <CheckCircle2 className="w-3 h-3 text-green-500 shrink-0" />
-                  <span className="text-green-400 font-medium">Authenticated</span>
-                </div>
-                <div className="flex items-center gap-2 text-muted-foreground">
-                  <Info className="w-3 h-3 shrink-0" />
-                  <span>
-                    {claudeAuthStatus.method === "oauth_token_env"
-                      ? "Using CLAUDE_CODE_OAUTH_TOKEN"
-                      : claudeAuthStatus.method === "oauth_token"
-                      ? "Using stored OAuth token (subscription)"
-                      : claudeAuthStatus.method === "api_key_env"
-                      ? "Using ANTHROPIC_API_KEY"
-                      : claudeAuthStatus.method === "api_key"
-                      ? "Using stored API key"
-                      : claudeAuthStatus.method === "credentials_file"
-                      ? "Using credentials file"
-                      : claudeAuthStatus.method === "cli_authenticated"
-                      ? "Using Claude CLI authentication"
-                      : `Using ${claudeAuthStatus.method || "detected"} authentication`}
-                  </span>
-                </div>
-              </>
-            ) : apiKeyStatus?.hasAnthropicKey ? (
-              <div className="flex items-center gap-2 text-blue-400">
-                <Info className="w-3 h-3 shrink-0" />
-                <span>Using environment variable (ANTHROPIC_API_KEY)</span>
-              </div>
-            ) : apiKeys.anthropic ? (
-              <div className="flex items-center gap-2 text-blue-400">
-                <Info className="w-3 h-3 shrink-0" />
-                <span>Using manual API key from settings</span>
-              </div>
-            ) : (
-              <div className="flex items-center gap-1.5 text-yellow-500 py-0.5">
-                <AlertCircle className="w-3 h-3 shrink-0" />
-                <span className="text-xs">Not configured</span>
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* Google/Gemini Authentication Status */}
-        <div className="p-3 rounded-lg bg-card border border-border">
-          <div className="flex items-center gap-2 mb-1.5">
-            <Sparkles className="w-4 h-4 text-purple-500" />
-            <span className="text-sm font-medium text-foreground">
-              Gemini (Google)
-            </span>
-          </div>
-          <div className="space-y-1.5 text-xs min-h-12">
-            {apiKeyStatus?.hasGoogleKey ? (
-              <>
-                <div className="flex items-center gap-2">
-                  <CheckCircle2 className="w-3 h-3 text-green-500 shrink-0" />
-                  <span className="text-green-400 font-medium">Authenticated</span>
-                </div>
-                <div className="flex items-center gap-2 text-muted-foreground">
-                  <Info className="w-3 h-3 shrink-0" />
-                  <span>Using GOOGLE_API_KEY</span>
-                </div>
-              </>
-            ) : apiKeys.google ? (
-              <>
-                <div className="flex items-center gap-2">
-                  <CheckCircle2 className="w-3 h-3 text-green-500 shrink-0" />
-                  <span className="text-green-400 font-medium">Authenticated</span>
-                </div>
-                <div className="flex items-center gap-2 text-muted-foreground">
-                  <Info className="w-3 h-3 shrink-0" />
-                  <span>Using stored API key</span>
-                </div>
-              </>
-            ) : (
-              <div className="flex items-center gap-1.5 text-yellow-500 py-0.5">
-                <AlertCircle className="w-3 h-3 shrink-0" />
-                <span className="text-xs">Not configured</span>
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

apps/app/src/components/views/settings-view/appearance/appearance-section.tsx

@@ -1,88 +0,0 @@
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Palette } from "lucide-react";
-import { themeOptions } from "@/config/theme-options";
-import { cn } from "@/lib/utils";
-import type { Theme, Project } from "../shared/types";
-
-interface AppearanceSectionProps {
-  effectiveTheme: Theme;
-  currentProject: Project | null;
-  onThemeChange: (theme: Theme) => void;
-}
-
-export function AppearanceSection({
-  effectiveTheme,
-  currentProject,
-  onThemeChange,
-}: AppearanceSectionProps) {
-  return (
-    <div
-      id="appearance"
-      className={cn(
-        "rounded-2xl overflow-hidden scroll-mt-6",
-        "border border-border/50",
-        "bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl",
-        "shadow-sm shadow-black/5"
-      )}
-    >
-      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
-        <div className="flex items-center gap-3 mb-2">
-          <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
-            <Palette className="w-5 h-5 text-brand-500" />
-          </div>
-          <h2 className="text-lg font-semibold text-foreground tracking-tight">Appearance</h2>
-        </div>
-        <p className="text-sm text-muted-foreground/80 ml-12">
-          Customize the look and feel of your application.
-        </p>
-      </div>
-      <div className="p-6 space-y-4">
-        <div className="space-y-4">
-          <Label className="text-foreground font-medium">
-            Theme{" "}
-            <span className="text-muted-foreground font-normal">
-              {currentProject ? `(for ${currentProject.name})` : "(Global)"}
-            </span>
-          </Label>
-          <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
-            {themeOptions.map(({ value, label, Icon, testId }) => {
-              const isActive = effectiveTheme === value;
-              return (
-                <button
-                  key={value}
-                  onClick={() => onThemeChange(value)}
-                  className={cn(
-                    "group flex items-center justify-center gap-2.5 px-4 py-3.5 rounded-xl",
-                    "text-sm font-medium transition-all duration-200 ease-out",
-                    isActive
-                      ? [
-                          "bg-gradient-to-br from-brand-500/15 to-brand-600/10",
-                          "border-2 border-brand-500/40",
-                          "text-foreground",
-                          "shadow-md shadow-brand-500/10",
-                        ]
-                      : [
-                          "bg-accent/30 hover:bg-accent/50",
-                          "border border-border/50 hover:border-border",
-                          "text-muted-foreground hover:text-foreground",
-                          "hover:shadow-sm",
-                        ],
-                    "hover:scale-[1.02] active:scale-[0.98]"
-                  )}
-                  data-testid={testId}
-                >
-                  <Icon className={cn(
-                    "w-4 h-4 transition-all duration-200",
-                    isActive ? "text-brand-500" : "group-hover:text-brand-400"
-                  )} />
-                  <span>{label}</span>
-                </button>
-              );
-            })}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

apps/app/src/components/views/settings-view/components/settings-header.tsx

@@ -1,37 +0,0 @@
-import { Settings } from "lucide-react";
-import { cn } from "@/lib/utils";
-
-interface SettingsHeaderProps {
-  title?: string;
-  description?: string;
-}
-
-export function SettingsHeader({
-  title = "Settings",
-  description = "Configure your API keys and preferences",
-}: SettingsHeaderProps) {
-  return (
-    <div className={cn(
-      "shrink-0",
-      "border-b border-border/50",
-      "bg-gradient-to-r from-card/90 via-card/70 to-card/80 backdrop-blur-xl"
-    )}>
-      <div className="px-8 py-6">
-        <div className="flex items-center gap-4">
-          <div className={cn(
-            "w-12 h-12 rounded-2xl flex items-center justify-center",
-            "bg-gradient-to-br from-brand-500 to-brand-600",
-            "shadow-lg shadow-brand-500/25",
-            "ring-1 ring-white/10"
-          )}>
-            <Settings className="w-6 h-6 text-white" />
-          </div>
-          <div>
-            <h1 className="text-2xl font-bold text-foreground tracking-tight">{title}</h1>
-            <p className="text-sm text-muted-foreground/80 mt-0.5">{description}</p>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

apps/app/src/components/views/settings-view/components/settings-navigation.tsx

@@ -1,70 +0,0 @@
-import { cn } from "@/lib/utils";
-import type { Project } from "@/lib/electron";
-import type { NavigationItem } from "../config/navigation";
-
-interface SettingsNavigationProps {
-  navItems: NavigationItem[];
-  activeSection: string;
-  currentProject: Project | null;
-  onNavigate: (sectionId: string) => void;
-}
-
-export function SettingsNavigation({
-  navItems,
-  activeSection,
-  currentProject,
-  onNavigate,
-}: SettingsNavigationProps) {
-  return (
-    <nav className={cn(
-      "hidden lg:block w-52 shrink-0",
-      "border-r border-border/50",
-      "bg-gradient-to-b from-card/80 via-card/60 to-card/40 backdrop-blur-xl"
-    )}>
-      <div className="sticky top-0 p-4 space-y-1.5">
-        {navItems
-          .filter((item) => item.id !== "danger" || currentProject)
-          .map((item) => {
-            const Icon = item.icon;
-            const isActive = activeSection === item.id;
-            return (
-              <button
-                key={item.id}
-                onClick={() => onNavigate(item.id)}
-                className={cn(
-                  "group w-full flex items-center gap-2.5 px-3 py-2.5 rounded-xl text-sm font-medium transition-all duration-200 ease-out text-left relative overflow-hidden",
-                  isActive
-                    ? [
-                        "bg-gradient-to-r from-brand-500/15 via-brand-500/10 to-brand-600/5",
-                        "text-foreground",
-                        "border border-brand-500/25",
-                        "shadow-sm shadow-brand-500/5",
-                      ]
-                    : [
-                        "text-muted-foreground hover:text-foreground",
-                        "hover:bg-accent/50",
-                        "border border-transparent hover:border-border/40",
-                      ],
-                  "hover:scale-[1.01] active:scale-[0.98]"
-                )}
-              >
-                {/* Active indicator bar */}
-                {isActive && (
-                  <div className="absolute inset-y-0 left-0 w-0.5 bg-gradient-to-b from-brand-400 via-brand-500 to-brand-600 rounded-r-full" />
-                )}
-                <Icon
-                  className={cn(
-                    "w-4 h-4 shrink-0 transition-all duration-200",
-                    isActive
-                      ? "text-brand-500"
-                      : "group-hover:text-brand-400 group-hover:scale-110"
-                  )}
-                />
-                <span className="truncate">{item.label}</span>
-              </button>
-            );
-          })}
-      </div>
-    </nav>
-  );
-}

apps/app/src/components/views/settings-view/config/navigation.ts

@@ -1,27 +0,0 @@
-import type { LucideIcon } from "lucide-react";
-import {
-  Key,
-  Terminal,
-  Palette,
-  LayoutGrid,
-  Settings2,
-  FlaskConical,
-  Trash2,
-} from "lucide-react";
-
-export interface NavigationItem {
-  id: string;
-  label: string;
-  icon: LucideIcon;
-}
-
-// Navigation items for the settings side panel
-export const NAV_ITEMS: NavigationItem[] = [
-  { id: "api-keys", label: "API Keys", icon: Key },
-  { id: "claude", label: "Claude", icon: Terminal },
-  { id: "appearance", label: "Appearance", icon: Palette },
-  { id: "kanban", label: "Kanban Display", icon: LayoutGrid },
-  { id: "keyboard", label: "Keyboard Shortcuts", icon: Settings2 },
-  { id: "defaults", label: "Feature Defaults", icon: FlaskConical },
-  { id: "danger", label: "Danger Zone", icon: Trash2 },
-];

apps/app/src/components/views/settings-view/feature-defaults/feature-defaults-section.tsx

@@ -1,137 +0,0 @@
-import { Label } from "@/components/ui/label";
-import { Checkbox } from "@/components/ui/checkbox";
-import { FlaskConical, Settings2, TestTube, GitBranch } from "lucide-react";
-import { cn } from "@/lib/utils";
-
-interface FeatureDefaultsSectionProps {
-  showProfilesOnly: boolean;
-  defaultSkipTests: boolean;
-  useWorktrees: boolean;
-  onShowProfilesOnlyChange: (value: boolean) => void;
-  onDefaultSkipTestsChange: (value: boolean) => void;
-  onUseWorktreesChange: (value: boolean) => void;
-}
-
-export function FeatureDefaultsSection({
-  showProfilesOnly,
-  defaultSkipTests,
-  useWorktrees,
-  onShowProfilesOnlyChange,
-  onDefaultSkipTestsChange,
-  onUseWorktreesChange,
-}: FeatureDefaultsSectionProps) {
-  return (
-    <div
-      id="defaults"
-      className={cn(
-        "rounded-2xl overflow-hidden scroll-mt-6",
-        "border border-border/50",
-        "bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl",
-        "shadow-sm shadow-black/5"
-      )}
-    >
-      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
-        <div className="flex items-center gap-3 mb-2">
-          <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
-            <FlaskConical className="w-5 h-5 text-brand-500" />
-          </div>
-          <h2 className="text-lg font-semibold text-foreground tracking-tight">
-            Feature Defaults
-          </h2>
-        </div>
-        <p className="text-sm text-muted-foreground/80 ml-12">
-          Configure default settings for new features.
-        </p>
-      </div>
-      <div className="p-6 space-y-5">
-        {/* Profiles Only Setting */}
-        <div className="group flex items-start space-x-3 p-3 rounded-xl hover:bg-accent/30 transition-colors duration-200 -mx-3">
-          <Checkbox
-            id="show-profiles-only"
-            checked={showProfilesOnly}
-            onCheckedChange={(checked) =>
-              onShowProfilesOnlyChange(checked === true)
-            }
-            className="mt-1"
-            data-testid="show-profiles-only-checkbox"
-          />
-          <div className="space-y-1.5">
-            <Label
-              htmlFor="show-profiles-only"
-              className="text-foreground cursor-pointer font-medium flex items-center gap-2"
-            >
-              <Settings2 className="w-4 h-4 text-brand-500" />
-              Show profiles only by default
-            </Label>
-            <p className="text-xs text-muted-foreground/80 leading-relaxed">
-              When enabled, the Add Feature dialog will show only AI profiles
-              and hide advanced model tweaking options. This creates a cleaner, less
-              overwhelming UI.
-            </p>
-          </div>
-        </div>
-
-        {/* Separator */}
-        <div className="border-t border-border/30" />
-
-        {/* Automated Testing Setting */}
-        <div className="group flex items-start space-x-3 p-3 rounded-xl hover:bg-accent/30 transition-colors duration-200 -mx-3">
-          <Checkbox
-            id="default-skip-tests"
-            checked={!defaultSkipTests}
-            onCheckedChange={(checked) =>
-              onDefaultSkipTestsChange(checked !== true)
-            }
-            className="mt-1"
-            data-testid="default-skip-tests-checkbox"
-          />
-          <div className="space-y-1.5">
-            <Label
-              htmlFor="default-skip-tests"
-              className="text-foreground cursor-pointer font-medium flex items-center gap-2"
-            >
-              <TestTube className="w-4 h-4 text-brand-500" />
-              Enable automated testing by default
-            </Label>
-            <p className="text-xs text-muted-foreground/80 leading-relaxed">
-              When enabled, new features will use TDD with automated tests. When disabled, features will
-              require manual verification.
-            </p>
-          </div>
-        </div>
-
-        {/* Separator */}
-        <div className="border-t border-border/30" />
-
-        {/* Worktree Isolation Setting */}
-        <div className="group flex items-start space-x-3 p-3 rounded-xl hover:bg-accent/30 transition-colors duration-200 -mx-3">
-          <Checkbox
-            id="use-worktrees"
-            checked={useWorktrees}
-            onCheckedChange={(checked) =>
-              onUseWorktreesChange(checked === true)
-            }
-            className="mt-1"
-            data-testid="use-worktrees-checkbox"
-          />
-          <div className="space-y-1.5">
-            <Label
-              htmlFor="use-worktrees"
-              className="text-foreground cursor-pointer font-medium flex items-center gap-2"
-            >
-              <GitBranch className="w-4 h-4 text-brand-500" />
-              Enable Git Worktree Isolation
-              <span className="text-[10px] px-1.5 py-0.5 rounded-md bg-amber-500/15 text-amber-500 border border-amber-500/20 font-medium">
-                experimental
-              </span>
-            </Label>
-            <p className="text-xs text-muted-foreground/80 leading-relaxed">
-              Creates isolated git branches for each feature. When disabled,
-              agents work directly in the main project directory.
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

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

@@ -1,122 +0,0 @@
-"use client";
-
-import { useSetupStore } from "@/store/setup-store";
-import { useAppStore } from "@/store/app-store";
-import { StepIndicator } from "./setup-view/components";
-import {
-  WelcomeStep,
-  CompleteStep,
-  ClaudeSetupStep,
-} from "./setup-view/steps";
-
-// Main Setup View
-export function SetupView() {
-  const {
-    currentStep,
-    setCurrentStep,
-    completeSetup,
-    setSkipClaudeSetup,
-  } = useSetupStore();
-  const { setCurrentView } = useAppStore();
-
-  const steps = ["welcome", "claude", "complete"] as const;
-  type StepName = (typeof steps)[number];
-  const getStepName = (): StepName => {
-    if (currentStep === "claude_detect" || currentStep === "claude_auth")
-      return "claude";
-    if (currentStep === "welcome") return "welcome";
-    return "complete";
-  };
-  const currentIndex = steps.indexOf(getStepName());
-
-  const handleNext = (from: string) => {
-    console.log(
-      "[Setup Flow] handleNext called from:",
-      from,
-      "currentStep:",
-      currentStep
-    );
-    switch (from) {
-      case "welcome":
-        console.log("[Setup Flow] Moving to claude_detect step");
-        setCurrentStep("claude_detect");
-        break;
-      case "claude":
-        console.log("[Setup Flow] Moving to complete step");
-        setCurrentStep("complete");
-        break;
-    }
-  };
-
-  const handleBack = (from: string) => {
-    console.log("[Setup Flow] handleBack called from:", from);
-    switch (from) {
-      case "claude":
-        setCurrentStep("welcome");
-        break;
-    }
-  };
-
-  const handleSkipClaude = () => {
-    console.log("[Setup Flow] Skipping Claude setup");
-    setSkipClaudeSetup(true);
-    setCurrentStep("complete");
-  };
-
-  const handleFinish = () => {
-    console.log("[Setup Flow] handleFinish called - completing setup");
-    completeSetup();
-    console.log("[Setup Flow] Setup completed, redirecting to welcome view");
-    setCurrentView("welcome");
-  };
-
-  return (
-    <div className="h-full flex flex-col content-bg" data-testid="setup-view">
-      {/* Header */}
-      <div className="shrink-0 border-b border-border bg-glass backdrop-blur-md titlebar-drag-region">
-        <div className="px-8 py-4">
-          <div className="flex items-center gap-3 titlebar-no-drag">
-            {/* eslint-disable-next-line @next/next/no-img-element */}
-            <img src="/logo.png" alt="Automaker" className="w-8 h-8" />
-            <span className="text-lg font-semibold text-foreground">
-              Automaker Setup
-            </span>
-          </div>
-        </div>
-      </div>
-
-      {/* Content */}
-      <div className="flex-1 overflow-y-auto min-h-0">
-        <div className="p-8">
-          <div className="w-full max-w-2xl mx-auto">
-            <div className="mb-8">
-              <StepIndicator
-                currentStep={currentIndex}
-                totalSteps={steps.length}
-              />
-            </div>
-
-            <div className="py-8">
-              {currentStep === "welcome" && (
-                <WelcomeStep onNext={() => handleNext("welcome")} />
-              )}
-
-              {(currentStep === "claude_detect" ||
-                currentStep === "claude_auth") && (
-                <ClaudeSetupStep
-                  onNext={() => handleNext("claude")}
-                  onBack={() => handleBack("claude")}
-                  onSkip={handleSkipClaude}
-                />
-              )}
-
-              {currentStep === "complete" && (
-                <CompleteStep onFinish={handleFinish} />
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

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

@@ -1,9 +0,0 @@
-// Re-export all setup-view components for easier imports
-export { StepIndicator } from "./step-indicator";
-export { StatusBadge } from "./status-badge";
-export { StatusRow } from "./status-row";
-export { TerminalOutput } from "./terminal-output";
-export { CopyableCommandField } from "./copyable-command-field";
-export { CliInstallationCard } from "./cli-installation-card";
-export { ReadyStateCard } from "./ready-state-card";
-export { AuthMethodSelector } from "./auth-method-selector";

apps/app/src/components/views/setup-view/components/status-badge.tsx

@@ -1,46 +0,0 @@
-import { CheckCircle2, XCircle, Loader2 } from "lucide-react";
-
-interface StatusBadgeProps {
-  status:
-    | "installed"
-    | "not_installed"
-    | "checking"
-    | "authenticated"
-    | "not_authenticated";
-  label: string;
-}
-
-export function StatusBadge({ status, label }: StatusBadgeProps) {
-  const getStatusConfig = () => {
-    switch (status) {
-      case "installed":
-      case "authenticated":
-        return {
-          icon: <CheckCircle2 className="w-4 h-4" />,
-          className: "bg-green-500/10 text-green-500 border-green-500/20",
-        };
-      case "not_installed":
-      case "not_authenticated":
-        return {
-          icon: <XCircle className="w-4 h-4" />,
-          className: "bg-red-500/10 text-red-500 border-red-500/20",
-        };
-      case "checking":
-        return {
-          icon: <Loader2 className="w-4 h-4 animate-spin" />,
-          className: "bg-yellow-500/10 text-yellow-500 border-yellow-500/20",
-        };
-    }
-  };
-
-  const config = getStatusConfig();
-
-  return (
-    <div
-      className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium border ${config.className}`}
-    >
-      {config.icon}
-      {label}
-    </div>
-  );
-}

apps/app/src/components/views/setup-view/components/terminal-output.tsx

@@ -1,18 +0,0 @@
-interface TerminalOutputProps {
-  lines: string[];
-}
-
-export function TerminalOutput({ lines }: TerminalOutputProps) {
-  return (
-    <div className="bg-zinc-900 rounded-lg p-4 font-mono text-sm max-h-48 overflow-y-auto">
-      {lines.map((line, index) => (
-        <div key={index} className="text-zinc-400">
-          <span className="text-green-500">$</span> {line}
-        </div>
-      ))}
-      {lines.length === 0 && (
-        <div className="text-zinc-500 italic">Waiting for output...</div>
-      )}
-    </div>
-  );
-}

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

@@ -1,2 +0,0 @@
-// Re-export all setup dialog components for easier imports
-export { SetupTokenModal } from "./setup-token-modal";

apps/app/src/components/views/setup-view/dialogs/setup-token-modal.tsx

@@ -1,262 +0,0 @@
-"use client";
-
-import { useState, useEffect, useRef, useCallback } from "react";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogFooter,
-} from "@/components/ui/dialog";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import {
-  Loader2,
-  Terminal,
-  CheckCircle2,
-  XCircle,
-  Copy,
-  RotateCcw,
-} from "lucide-react";
-import { toast } from "sonner";
-import { useOAuthAuthentication } from "../hooks";
-
-interface SetupTokenModalProps {
-  open: boolean;
-  onClose: () => void;
-  onTokenObtained: (token: string) => void;
-}
-
-export function SetupTokenModal({
-  open,
-  onClose,
-  onTokenObtained,
-}: SetupTokenModalProps) {
-  // Use the OAuth authentication hook
-  const { authState, output, token, error, startAuth, reset } =
-    useOAuthAuthentication({ cliType: "claude" });
-
-  const [manualToken, setManualToken] = useState("");
-  const scrollRef = useRef<HTMLDivElement>(null);
-
-  // Auto-scroll to bottom when output changes
-  useEffect(() => {
-    if (scrollRef.current) {
-      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
-    }
-  }, [output]);
-
-  // Reset state when modal opens/closes
-  useEffect(() => {
-    if (open) {
-      reset();
-      setManualToken("");
-    }
-  }, [open, reset]);
-
-  const handleUseToken = useCallback(() => {
-    const tokenToUse = token || manualToken;
-    if (tokenToUse.trim()) {
-      onTokenObtained(tokenToUse.trim());
-      onClose();
-    }
-  }, [token, manualToken, onTokenObtained, onClose]);
-
-  const copyCommand = useCallback(() => {
-    navigator.clipboard.writeText("claude setup-token");
-    toast.success("Command copied to clipboard");
-  }, []);
-
-  const handleRetry = useCallback(() => {
-    reset();
-    setManualToken("");
-  }, [reset]);
-
-  return (
-    <Dialog open={open} onOpenChange={onClose}>
-      <DialogContent
-        className="max-w-2xl bg-card border-border"
-        data-testid="setup-token-modal"
-      >
-        <DialogHeader>
-          <DialogTitle className="flex items-center gap-2 text-foreground">
-            <Terminal className="w-5 h-5 text-brand-500" />
-            Claude Subscription Authentication
-          </DialogTitle>
-          <DialogDescription className="text-muted-foreground">
-            {authState === "idle" &&
-              "Click Start to begin the authentication process."}
-            {authState === "running" &&
-              "Complete the sign-in in your browser..."}
-            {authState === "success" &&
-              "Authentication successful! Your token has been captured."}
-            {authState === "error" &&
-              "Authentication failed. Please try again or enter the token manually."}
-            {authState === "manual" &&
-              "Copy the token from your terminal and paste it below."}
-          </DialogDescription>
-        </DialogHeader>
-
-        {/* Terminal Output */}
-        <div
-          ref={scrollRef}
-          className="bg-zinc-900 rounded-lg p-4 font-mono text-sm max-h-48 overflow-y-auto border border-border mt-3"
-        >
-          {output.map((line, index) => (
-            <div key={index} className="text-zinc-300 whitespace-pre-wrap">
-              {line.startsWith("Error") || line.startsWith("⚠") ? (
-                <span className="text-yellow-400">{line}</span>
-              ) : line.startsWith("✓") ? (
-                <span className="text-green-400">{line}</span>
-              ) : (
-                line
-              )}
-            </div>
-          ))}
-          {output.length === 0 && (
-            <div className="text-zinc-500 italic">Waiting to start...</div>
-          )}
-          {authState === "running" && (
-            <div className="flex items-center gap-2 text-brand-400 mt-2">
-              <Loader2 className="w-4 h-4 animate-spin" />
-              <span>Waiting for authentication...</span>
-            </div>
-          )}
-        </div>
-
-        {/* Manual Token Input (for fallback) */}
-        {(authState === "manual" || authState === "error") && (
-          <div className="space-y-3 pt-2">
-            <div className="flex items-center gap-2 text-sm text-muted-foreground">
-              <span>Run this command in your terminal:</span>
-              <code className="bg-muted px-2 py-1 rounded font-mono text-foreground">
-                claude setup-token
-              </code>
-              <Button
-                variant="ghost"
-                size="icon"
-                onClick={copyCommand}
-                className="h-7 w-7"
-              >
-                <Copy className="w-4 h-4" />
-              </Button>
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="manual-token" className="text-foreground">
-                Paste your token:
-              </Label>
-              <Input
-                id="manual-token"
-                type="password"
-                placeholder="Paste token here..."
-                value={manualToken}
-                onChange={(e) => setManualToken(e.target.value)}
-                className="bg-input border-border text-foreground"
-                data-testid="manual-token-input"
-              />
-            </div>
-          </div>
-        )}
-
-        {/* Success State */}
-        {authState === "success" && (
-          <div className="flex items-center gap-3 p-4 rounded-lg bg-green-500/10 border border-green-500/20">
-            <CheckCircle2 className="w-6 h-6 text-green-500 shrink-0" />
-            <div>
-              <p className="font-medium text-foreground">
-                Token captured successfully!
-              </p>
-              <p className="text-sm text-muted-foreground">
-                Click &quot;Use Token&quot; to save and continue.
-              </p>
-            </div>
-          </div>
-        )}
-
-        {/* Error State */}
-        {error && authState === "error" && (
-          <div className="flex items-center gap-3 p-4 rounded-lg bg-red-500/10 border border-red-500/20">
-            <XCircle className="w-6 h-6 text-red-500 shrink-0" />
-            <div>
-              <p className="font-medium text-foreground">Error</p>
-              <p className="text-sm text-muted-foreground">{error}</p>
-            </div>
-          </div>
-        )}
-
-        <DialogFooter className="mt-5 flex gap-2">
-          <Button
-            variant="outline"
-            onClick={onClose}
-            className="text-muted-foreground hover:text-foreground"
-          >
-            Cancel
-          </Button>
-
-          {authState === "idle" && (
-            <Button
-              onClick={startAuth}
-              className="bg-brand-500 hover:bg-brand-600 text-white"
-              data-testid="start-auth-button"
-            >
-              <Terminal className="w-4 h-4 mr-2" />
-              Start Authentication
-            </Button>
-          )}
-
-          {authState === "running" && (
-            <Button disabled className="bg-brand-500">
-              <Loader2 className="w-4 h-4 mr-2 animate-spin" />
-              Authenticating...
-            </Button>
-          )}
-
-          {authState === "success" && (
-            <Button
-              onClick={handleUseToken}
-              className="bg-green-500 hover:bg-green-600 text-white"
-              data-testid="use-token-button"
-            >
-              <CheckCircle2 className="w-4 h-4 mr-2" />
-              Use Token
-            </Button>
-          )}
-
-          {authState === "manual" && (
-            <Button
-              onClick={handleUseToken}
-              disabled={!manualToken.trim()}
-              className="bg-brand-500 hover:bg-brand-600 text-white disabled:opacity-50"
-              data-testid="use-manual-token-button"
-            >
-              <CheckCircle2 className="w-4 h-4 mr-2" />
-              Use Token
-            </Button>
-          )}
-
-          {authState === "error" && (
-            <>
-              {manualToken.trim() && (
-                <Button
-                  onClick={handleUseToken}
-                  className="bg-green-500 hover:bg-green-600 text-white"
-                >
-                  Use Manual Token
-                </Button>
-              )}
-              <Button
-                onClick={handleRetry}
-                className="bg-brand-500 hover:bg-brand-600 text-white"
-              >
-                <RotateCcw className="w-4 h-4 mr-2" />
-                Retry
-              </Button>
-            </>
-          )}
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}

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

@@ -1,5 +0,0 @@
-// Re-export all hooks for easier imports
-export { useCliStatus } from "./use-cli-status";
-export { useCliInstallation } from "./use-cli-installation";
-export { useOAuthAuthentication } from "./use-oauth-authentication";
-export { useTokenSave } from "./use-token-save";

apps/app/src/components/views/setup-view/hooks/use-oauth-authentication.ts

@@ -1,174 +0,0 @@
-import { useState, useCallback, useRef, useEffect } from "react";
-import { getElectronAPI } from "@/lib/electron";
-
-type AuthState = "idle" | "running" | "success" | "error" | "manual";
-
-interface UseOAuthAuthenticationOptions {
-  cliType: "claude";
-  enabled?: boolean;
-}
-
-export function useOAuthAuthentication({
-  cliType,
-  enabled = true,
-}: UseOAuthAuthenticationOptions) {
-  const [authState, setAuthState] = useState<AuthState>("idle");
-  const [output, setOutput] = useState<string[]>([]);
-  const [token, setToken] = useState("");
-  const [error, setError] = useState<string | null>(null);
-  const unsubscribeRef = useRef<(() => void) | null>(null);
-
-  // Reset state when disabled
-  useEffect(() => {
-    if (!enabled) {
-      setAuthState("idle");
-      setOutput([]);
-      setToken("");
-      setError(null);
-
-      // Cleanup subscription
-      if (unsubscribeRef.current) {
-        unsubscribeRef.current();
-        unsubscribeRef.current = null;
-      }
-    }
-  }, [enabled]);
-
-  const startAuth = useCallback(async () => {
-    const api = getElectronAPI();
-    if (!api.setup) {
-      setError("Setup API not available");
-      setAuthState("error");
-      return;
-    }
-
-    setAuthState("running");
-    setOutput([
-      "Starting authentication...",
-      `Running ${cliType} CLI in an embedded terminal so you don't need to copy/paste.`,
-      "When your browser opens, complete sign-in and return here.",
-      "",
-    ]);
-    setError(null);
-    setToken("");
-
-    // Subscribe to progress events
-    if (api.setup.onAuthProgress) {
-      unsubscribeRef.current = api.setup.onAuthProgress((progress) => {
-        if (progress.cli === cliType && progress.data) {
-          // Split by newlines and add each line
-          const normalized = progress.data.replace(/\r/g, "\n");
-          const lines = normalized
-            .split("\n")
-            .map((line: string) => line.trimEnd())
-            .filter((line: string) => line.length > 0);
-          if (lines.length > 0) {
-            setOutput((prev) => [...prev, ...lines]);
-          }
-        }
-      });
-    }
-
-    try {
-      // Call the auth API
-      const result = await api.setup.authClaude();
-
-      // Cleanup subscription
-      if (unsubscribeRef.current) {
-        unsubscribeRef.current();
-        unsubscribeRef.current = null;
-      }
-
-      if (!result) {
-        setError("Authentication API not available");
-        setAuthState("error");
-        return;
-      }
-
-      // Check for token (only available for Claude)
-      const resultToken =
-        cliType === "claude" && "token" in result ? result.token : undefined;
-      const resultTerminalOpened =
-        cliType === "claude" && "terminalOpened" in result
-          ? result.terminalOpened
-          : false;
-
-      if (result.success && resultToken && typeof resultToken === "string") {
-        setToken(resultToken);
-        setAuthState("success");
-        setOutput((prev) => [
-          ...prev,
-          "",
-          "✓ Authentication successful!",
-          "✓ Token captured automatically.",
-        ]);
-      } else if (result.requiresManualAuth) {
-        // Terminal was opened - user needs to copy token manually
-        setAuthState("manual");
-        // Don't add extra messages if terminalOpened - the progress messages already explain
-        if (!resultTerminalOpened) {
-          const extraMessages = [
-            "",
-            "⚠ Could not capture token automatically.",
-          ];
-          if (result.error) {
-            extraMessages.push(result.error);
-          }
-          setOutput((prev) => [
-            ...prev,
-            ...extraMessages,
-            "Please copy the token from above and paste it below.",
-          ]);
-        }
-      } else {
-        setError(result.error || "Authentication failed");
-        setAuthState("error");
-      }
-    } catch (err: unknown) {
-      // Cleanup subscription
-      if (unsubscribeRef.current) {
-        unsubscribeRef.current();
-        unsubscribeRef.current = null;
-      }
-
-      const errorMessage =
-        err instanceof Error
-          ? err.message
-          : typeof err === "object" && err !== null && "error" in err
-            ? String((err as { error: unknown }).error)
-            : "Authentication failed";
-
-      // Check if we should fall back to manual mode
-      if (
-        typeof err === "object" &&
-        err !== null &&
-        "requiresManualAuth" in err &&
-        (err as { requiresManualAuth: boolean }).requiresManualAuth
-      ) {
-        setAuthState("manual");
-        setOutput((prev) => [
-          ...prev,
-          "",
-          "⚠ " + errorMessage,
-          "Please copy the token manually and paste it below.",
-        ]);
-      } else {
-        setError(errorMessage);
-        setAuthState("error");
-      }
-    }
-  }, [cliType]);
-
-  const reset = useCallback(() => {
-    setAuthState("idle");
-    setOutput([]);
-    setToken("");
-    setError(null);
-    if (unsubscribeRef.current) {
-      unsubscribeRef.current();
-      unsubscribeRef.current = null;
-    }
-  }, []);
-
-  return { authState, output, token, error, startAuth, reset };
-}

apps/app/src/components/views/setup-view/steps/claude-setup-step.tsx

@@ -1,602 +0,0 @@
-"use client";
-
-import { useState, useEffect, useCallback } from "react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { useSetupStore } from "@/store/setup-store";
-import { useAppStore } from "@/store/app-store";
-import { getElectronAPI } from "@/lib/electron";
-import {
-  CheckCircle2,
-  Loader2,
-  Terminal,
-  Key,
-  ArrowRight,
-  ArrowLeft,
-  ExternalLink,
-  Copy,
-  AlertCircle,
-  RefreshCw,
-  Download,
-  Shield,
-} from "lucide-react";
-import { toast } from "sonner";
-import { SetupTokenModal } from "../dialogs";
-import { StatusBadge, TerminalOutput } from "../components";
-import {
-  useCliStatus,
-  useCliInstallation,
-  useTokenSave,
-} from "../hooks";
-
-interface ClaudeSetupStepProps {
-  onNext: () => void;
-  onBack: () => void;
-  onSkip: () => void;
-}
-
-// Claude Setup Step - 2 Authentication Options:
-// 1. OAuth Token (Subscription): User runs `claude setup-token` and provides the token
-// 2. API Key (Pay-per-use): User provides their Anthropic API key directly
-export function ClaudeSetupStep({
-  onNext,
-  onBack,
-  onSkip,
-}: ClaudeSetupStepProps) {
-  const {
-    claudeCliStatus,
-    claudeAuthStatus,
-    setClaudeCliStatus,
-    setClaudeAuthStatus,
-    setClaudeInstallProgress,
-  } = useSetupStore();
-  const { setApiKeys, apiKeys } = useAppStore();
-
-  const [authMethod, setAuthMethod] = useState<"token" | "api_key" | null>(null);
-  const [oauthToken, setOAuthToken] = useState("");
-  const [apiKey, setApiKey] = useState("");
-  const [showTokenModal, setShowTokenModal] = useState(false);
-
-  // Memoize API functions to prevent infinite loops
-  const statusApi = useCallback(
-    () => getElectronAPI().setup?.getClaudeStatus() || Promise.reject(),
-    []
-  );
-
-  const installApi = useCallback(
-    () => getElectronAPI().setup?.installClaude() || Promise.reject(),
-    []
-  );
-
-  const getStoreState = useCallback(
-    () => useSetupStore.getState().claudeCliStatus,
-    []
-  );
-
-  // Use custom hooks
-  const { isChecking, checkStatus } = useCliStatus({
-    cliType: "claude",
-    statusApi,
-    setCliStatus: setClaudeCliStatus,
-    setAuthStatus: setClaudeAuthStatus,
-  });
-
-  const onInstallSuccess = useCallback(() => {
-    checkStatus();
-  }, [checkStatus]);
-
-  const { isInstalling, installProgress, install } = useCliInstallation({
-    cliType: "claude",
-    installApi,
-    onProgressEvent: getElectronAPI().setup?.onInstallProgress,
-    onSuccess: onInstallSuccess,
-    getStoreState,
-  });
-
-  const { isSaving: isSavingOAuth, saveToken: saveOAuthToken } = useTokenSave({
-    provider: "anthropic_oauth_token",
-    onSuccess: () => {
-      setClaudeAuthStatus({
-        authenticated: true,
-        method: "oauth_token",
-        hasCredentialsFile: false,
-        oauthTokenValid: true,
-      });
-      setAuthMethod(null);
-      checkStatus();
-    },
-  });
-
-  const { isSaving: isSavingApiKey, saveToken: saveApiKeyToken } = useTokenSave({
-    provider: "anthropic",
-    onSuccess: () => {
-      setClaudeAuthStatus({
-        authenticated: true,
-        method: "api_key",
-        hasCredentialsFile: false,
-        apiKeyValid: true,
-      });
-      setApiKeys({ ...apiKeys, anthropic: apiKey });
-      setAuthMethod(null);
-      checkStatus();
-    },
-  });
-
-  // Sync install progress to store
-  useEffect(() => {
-    setClaudeInstallProgress({
-      isInstalling,
-      output: installProgress.output,
-    });
-  }, [isInstalling, installProgress, setClaudeInstallProgress]);
-
-  // Check status on mount
-  useEffect(() => {
-    checkStatus();
-  }, [checkStatus]);
-
-  const copyCommand = (command: string) => {
-    navigator.clipboard.writeText(command);
-    toast.success("Command copied to clipboard");
-  };
-
-  // Handle token obtained from the OAuth modal
-  const handleTokenFromModal = useCallback(
-    async (token: string) => {
-      setOAuthToken(token);
-      setShowTokenModal(false);
-      await saveOAuthToken(token);
-    },
-    [saveOAuthToken]
-  );
-
-  const isAuthenticated = claudeAuthStatus?.authenticated || apiKeys.anthropic;
-
-  const getAuthMethodLabel = () => {
-    if (!isAuthenticated) return null;
-    if (
-      claudeAuthStatus?.method === "oauth_token_env" ||
-      claudeAuthStatus?.method === "oauth_token"
-    )
-      return "Subscription Token";
-    if (
-      apiKeys.anthropic ||
-      claudeAuthStatus?.method === "api_key" ||
-      claudeAuthStatus?.method === "api_key_env"
-    )
-      return "API Key";
-    return "Authenticated";
-  };
-
-  return (
-    <div className="space-y-6">
-      <div className="text-center mb-8">
-        <div className="w-16 h-16 rounded-xl bg-brand-500/10 flex items-center justify-center mx-auto mb-4">
-          <Terminal className="w-8 h-8 text-brand-500" />
-        </div>
-        <h2 className="text-2xl font-bold text-foreground mb-2">
-          Claude Setup
-        </h2>
-        <p className="text-muted-foreground">
-          Configure Claude for code generation
-        </p>
-      </div>
-
-      {/* Status Card */}
-      <Card className="bg-card border-border">
-        <CardHeader>
-          <div className="flex items-center justify-between">
-            <CardTitle className="text-lg">Status</CardTitle>
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={checkStatus}
-              disabled={isChecking}
-            >
-              <RefreshCw
-                className={`w-4 h-4 ${isChecking ? "animate-spin" : ""}`}
-              />
-            </Button>
-          </div>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <div className="flex items-center justify-between">
-            <span className="text-sm text-foreground">CLI Installation</span>
-            {isChecking ? (
-              <StatusBadge status="checking" label="Checking..." />
-            ) : claudeCliStatus?.installed ? (
-              <StatusBadge status="installed" label="Installed" />
-            ) : (
-              <StatusBadge status="not_installed" label="Not Installed" />
-            )}
-          </div>
-
-          {claudeCliStatus?.version && (
-            <div className="flex items-center justify-between">
-              <span className="text-sm text-muted-foreground">Version</span>
-              <span className="text-sm font-mono text-foreground">
-                {claudeCliStatus.version}
-              </span>
-            </div>
-          )}
-
-          <div className="flex items-center justify-between">
-            <span className="text-sm text-foreground">Authentication</span>
-            {isAuthenticated ? (
-              <div className="flex items-center gap-2">
-                <StatusBadge status="authenticated" label="Authenticated" />
-                {getAuthMethodLabel() && (
-                  <span className="text-xs text-muted-foreground">
-                    ({getAuthMethodLabel()})
-                  </span>
-                )}
-              </div>
-            ) : (
-              <StatusBadge
-                status="not_authenticated"
-                label="Not Authenticated"
-              />
-            )}
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Installation Section */}
-      {!claudeCliStatus?.installed && (
-        <Card className="bg-card border-border">
-          <CardHeader>
-            <CardTitle className="text-lg flex items-center gap-2">
-              <Download className="w-5 h-5" />
-              Install Claude CLI
-            </CardTitle>
-            <CardDescription>
-              Required for subscription-based authentication
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="space-y-2">
-              <Label className="text-sm text-muted-foreground">
-                macOS / Linux
-              </Label>
-              <div className="flex items-center gap-2">
-                <code className="flex-1 bg-muted px-3 py-2 rounded text-sm font-mono text-foreground">
-                  curl -fsSL https://claude.ai/install.sh | bash
-                </code>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  onClick={() =>
-                    copyCommand(
-                      "curl -fsSL https://claude.ai/install.sh | bash"
-                    )
-                  }
-                >
-                  <Copy className="w-4 h-4" />
-                </Button>
-              </div>
-            </div>
-
-            <div className="space-y-2">
-              <Label className="text-sm text-muted-foreground">Windows</Label>
-              <div className="flex items-center gap-2">
-                <code className="flex-1 bg-muted px-3 py-2 rounded text-sm font-mono text-foreground">
-                  irm https://claude.ai/install.ps1 | iex
-                </code>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  onClick={() =>
-                    copyCommand("irm https://claude.ai/install.ps1 | iex")
-                  }
-                >
-                  <Copy className="w-4 h-4" />
-                </Button>
-              </div>
-            </div>
-
-            {isInstalling && (
-              <TerminalOutput lines={installProgress.output} />
-            )}
-
-            <Button
-              onClick={install}
-              disabled={isInstalling}
-              className="w-full bg-brand-500 hover:bg-brand-600 text-white"
-              data-testid="install-claude-button"
-            >
-              {isInstalling ? (
-                <>
-                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
-                  Installing...
-                </>
-              ) : (
-                <>
-                  <Download className="w-4 h-4 mr-2" />
-                  Auto Install
-                </>
-              )}
-            </Button>
-          </CardContent>
-        </Card>
-      )}
-
-      {/* Authentication Section */}
-      {!isAuthenticated && (
-        <Card className="bg-card border-border">
-          <CardHeader>
-            <CardTitle className="text-lg flex items-center gap-2">
-              <Key className="w-5 h-5" />
-              Authentication
-            </CardTitle>
-            <CardDescription>Choose your authentication method</CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            {/* Option 1: Subscription Token */}
-            {authMethod === "token" ? (
-              <div className="p-4 rounded-lg bg-brand-500/5 border border-brand-500/20 space-y-4">
-                <div className="flex items-start gap-3">
-                  <Shield className="w-5 h-5 text-brand-500 mt-0.5" />
-                  <div className="flex-1">
-                    <p className="font-medium text-foreground">
-                      Subscription Token
-                    </p>
-                    <p className="text-sm text-muted-foreground mb-3">
-                      Use your Claude subscription (no API charges)
-                    </p>
-
-                    {claudeCliStatus?.installed ? (
-                      <>
-                        {/* Primary: Automated OAuth setup */}
-                        <Button
-                          onClick={() => setShowTokenModal(true)}
-                          className="w-full bg-brand-500 hover:bg-brand-600 text-white mb-4"
-                          data-testid="setup-oauth-button"
-                        >
-                          <Terminal className="w-4 h-4 mr-2" />
-                          Setup with OAuth
-                        </Button>
-
-                        {/* Divider */}
-                        <div className="relative my-4">
-                          <div className="absolute inset-0 flex items-center">
-                            <span className="w-full border-t border-border" />
-                          </div>
-                          <div className="relative flex justify-center text-xs uppercase">
-                            <span className="bg-brand-500/5 px-2 text-muted-foreground">
-                              or paste manually
-                            </span>
-                          </div>
-                        </div>
-
-                        {/* Fallback: Manual token entry */}
-                        <div className="space-y-2">
-                          <Label className="text-foreground text-sm">
-                            Paste token from{" "}
-                            <code className="bg-muted px-1 py-0.5 rounded text-xs">
-                              claude setup-token
-                            </code>
-                            :
-                          </Label>
-                          <Input
-                            type="password"
-                            placeholder="Paste token here..."
-                            value={oauthToken}
-                            onChange={(e) => setOAuthToken(e.target.value)}
-                            className="bg-input border-border text-foreground"
-                            data-testid="oauth-token-input"
-                          />
-                        </div>
-
-                        <div className="flex gap-2 mt-3">
-                          <Button
-                            variant="outline"
-                            onClick={() => setAuthMethod(null)}
-                            className="border-border"
-                          >
-                            Cancel
-                          </Button>
-                          <Button
-                            onClick={() => saveOAuthToken(oauthToken)}
-                            disabled={isSavingOAuth || !oauthToken.trim()}
-                            className="flex-1 bg-brand-500 hover:bg-brand-600 text-white"
-                            data-testid="save-oauth-token-button"
-                          >
-                            {isSavingOAuth ? (
-                              <Loader2 className="w-4 h-4 animate-spin" />
-                            ) : (
-                              "Save Token"
-                            )}
-                          </Button>
-                        </div>
-                      </>
-                    ) : (
-                      <div className="p-3 rounded bg-yellow-500/10 border border-yellow-500/20">
-                        <p className="text-sm text-yellow-600">
-                          <AlertCircle className="w-4 h-4 inline mr-1" />
-                          Install Claude CLI first to use subscription
-                          authentication
-                        </p>
-                      </div>
-                    )}
-                  </div>
-                </div>
-              </div>
-            ) : authMethod === "api_key" ? (
-              /* Option 2: API Key */
-              <div className="p-4 rounded-lg bg-green-500/5 border border-green-500/20 space-y-4">
-                <div className="flex items-start gap-3">
-                  <Key className="w-5 h-5 text-green-500 mt-0.5" />
-                  <div className="flex-1">
-                    <p className="font-medium text-foreground">API Key</p>
-                    <p className="text-sm text-muted-foreground mb-3">
-                      Pay-per-use with your Anthropic API key
-                    </p>
-
-                    <div className="space-y-2">
-                      <Label
-                        htmlFor="anthropic-key"
-                        className="text-foreground"
-                      >
-                        Anthropic API Key
-                      </Label>
-                      <Input
-                        id="anthropic-key"
-                        type="password"
-                        placeholder="sk-ant-..."
-                        value={apiKey}
-                        onChange={(e) => setApiKey(e.target.value)}
-                        className="bg-input border-border text-foreground"
-                        data-testid="anthropic-api-key-input"
-                      />
-                      <p className="text-xs text-muted-foreground">
-                        Get your API key from{" "}
-                        <a
-                          href="https://console.anthropic.com/"
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          className="text-brand-500 hover:underline"
-                        >
-                          console.anthropic.com
-                          <ExternalLink className="w-3 h-3 inline ml-1" />
-                        </a>
-                      </p>
-                    </div>
-
-                    <div className="flex gap-2 mt-3">
-                      <Button
-                        variant="outline"
-                        onClick={() => setAuthMethod(null)}
-                        className="border-border"
-                      >
-                        Cancel
-                      </Button>
-                      <Button
-                        onClick={() => saveApiKeyToken(apiKey)}
-                        disabled={isSavingApiKey || !apiKey.trim()}
-                        className="flex-1 bg-green-500 hover:bg-green-600 text-white"
-                        data-testid="save-anthropic-key-button"
-                      >
-                        {isSavingApiKey ? (
-                          <Loader2 className="w-4 h-4 animate-spin" />
-                        ) : (
-                          "Save API Key"
-                        )}
-                      </Button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            ) : (
-              /* Auth Method Selection */
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                <button
-                  onClick={() => setAuthMethod("token")}
-                  className="p-4 rounded-lg border border-border hover:border-brand-500/50 bg-card hover:bg-brand-500/5 transition-all text-left"
-                  data-testid="select-subscription-auth"
-                >
-                  <div className="flex items-start gap-3">
-                    <Shield className="w-6 h-6 text-brand-500" />
-                    <div>
-                      <p className="font-medium text-foreground">
-                        Subscription
-                      </p>
-                      <p className="text-sm text-muted-foreground mt-1">
-                        Use your Claude subscription
-                      </p>
-                      <p className="text-xs text-brand-500 mt-2">
-                        No API charges
-                      </p>
-                    </div>
-                  </div>
-                </button>
-
-                <button
-                  onClick={() => setAuthMethod("api_key")}
-                  className="p-4 rounded-lg border border-border hover:border-green-500/50 bg-card hover:bg-green-500/5 transition-all text-left"
-                  data-testid="select-api-key-auth"
-                >
-                  <div className="flex items-start gap-3">
-                    <Key className="w-6 h-6 text-green-500" />
-                    <div>
-                      <p className="font-medium text-foreground">API Key</p>
-                      <p className="text-sm text-muted-foreground mt-1">
-                        Use Anthropic API key
-                      </p>
-                      <p className="text-xs text-green-500 mt-2">Pay-per-use</p>
-                    </div>
-                  </div>
-                </button>
-              </div>
-            )}
-          </CardContent>
-        </Card>
-      )}
-
-      {/* Success State */}
-      {isAuthenticated && (
-        <Card className="bg-green-500/5 border-green-500/20">
-          <CardContent className="py-6">
-            <div className="flex items-center gap-4">
-              <div className="w-12 h-12 rounded-full bg-green-500/10 flex items-center justify-center">
-                <CheckCircle2 className="w-6 h-6 text-green-500" />
-              </div>
-              <div>
-                <p className="font-medium text-foreground">
-                  Claude is ready to use!
-                </p>
-                <p className="text-sm text-muted-foreground">
-                  {getAuthMethodLabel() && `Using ${getAuthMethodLabel()}. `}You
-                  can proceed to the next step
-                </p>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-      )}
-
-      {/* Navigation */}
-      <div className="flex justify-between pt-4">
-        <Button
-          variant="ghost"
-          onClick={onBack}
-          className="text-muted-foreground"
-        >
-          <ArrowLeft className="w-4 h-4 mr-2" />
-          Back
-        </Button>
-        <div className="flex gap-2">
-          <Button
-            variant="ghost"
-            onClick={onSkip}
-            className="text-muted-foreground"
-          >
-            Skip for now
-          </Button>
-          <Button
-            onClick={onNext}
-            className="bg-brand-500 hover:bg-brand-600 text-white"
-            data-testid="claude-next-button"
-          >
-            Continue
-            <ArrowRight className="w-4 h-4 ml-2" />
-          </Button>
-        </div>
-      </div>
-
-      {/* OAuth Setup Modal */}
-      <SetupTokenModal
-        open={showTokenModal}
-        onClose={() => setShowTokenModal(false)}
-        onTokenObtained={handleTokenFromModal}
-      />
-    </div>
-  );
-}

apps/app/src/components/views/setup-view/steps/complete-step.tsx

@@ -1,90 +0,0 @@
-import { Button } from "@/components/ui/button";
-import { Card, CardContent } from "@/components/ui/card";
-import {
-  CheckCircle2,
-  AlertCircle,
-  Shield,
-  Sparkles,
-} from "lucide-react";
-import { useSetupStore } from "@/store/setup-store";
-import { useAppStore } from "@/store/app-store";
-
-interface CompleteStepProps {
-  onFinish: () => void;
-}
-
-export function CompleteStep({ onFinish }: CompleteStepProps) {
-  const { claudeCliStatus, claudeAuthStatus } =
-    useSetupStore();
-  const { apiKeys } = useAppStore();
-
-  const claudeReady =
-    (claudeCliStatus?.installed && claudeAuthStatus?.authenticated) ||
-    apiKeys.anthropic;
-
-  return (
-    <div className="text-center space-y-6">
-      <div className="w-20 h-20 rounded-full bg-gradient-to-br from-green-500 to-emerald-600 shadow-lg shadow-green-500/30 flex items-center justify-center mx-auto">
-        <CheckCircle2 className="w-10 h-10 text-white" />
-      </div>
-
-      <div>
-        <h2 className="text-3xl font-bold text-foreground mb-3">
-          Setup Complete!
-        </h2>
-        <p className="text-muted-foreground max-w-md mx-auto">
-          Your development environment is configured. You&apos;re ready to start
-          building with AI-powered assistance.
-        </p>
-      </div>
-
-      <div className="max-w-md mx-auto">
-        <Card
-          className={`bg-card/50 border ${
-            claudeReady ? "border-green-500/50" : "border-yellow-500/50"
-          }`}
-        >
-          <CardContent className="py-4">
-            <div className="flex items-center gap-3">
-              {claudeReady ? (
-                <CheckCircle2 className="w-6 h-6 text-green-500" />
-              ) : (
-                <AlertCircle className="w-6 h-6 text-yellow-500" />
-              )}
-              <div className="text-left">
-                <p className="font-medium text-foreground">Claude</p>
-                <p className="text-sm text-muted-foreground">
-                  {claudeReady ? "Ready to use" : "Configure later in settings"}
-                </p>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-
-      <div className="p-4 rounded-lg bg-muted/50 border border-border max-w-md mx-auto">
-        <div className="flex items-start gap-3">
-          <Shield className="w-5 h-5 text-brand-500 mt-0.5" />
-          <div className="text-left">
-            <p className="text-sm font-medium text-foreground">
-              Your credentials are secure
-            </p>
-            <p className="text-xs text-muted-foreground">
-              API keys are stored locally and never sent to our servers
-            </p>
-          </div>
-        </div>
-      </div>
-
-      <Button
-        size="lg"
-        className="bg-gradient-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-700 text-white"
-        onClick={onFinish}
-        data-testid="setup-finish-button"
-      >
-        <Sparkles className="w-4 h-4 mr-2" />
-        Start Building
-      </Button>
-    </div>
-  );
-}

apps/app/src/components/views/setup-view/steps/index.ts

@@ -1,4 +0,0 @@
-// Re-export all setup step components for easier imports
-export { WelcomeStep } from "./welcome-step";
-export { CompleteStep } from "./complete-step";
-export { ClaudeSetupStep } from "./claude-setup-step";

apps/app/src/components/views/setup-view/steps/welcome-step.tsx

@@ -1,56 +0,0 @@
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Terminal, ArrowRight } from "lucide-react";
-
-interface WelcomeStepProps {
-  onNext: () => void;
-}
-
-export function WelcomeStep({ onNext }: WelcomeStepProps) {
-  return (
-    <div className="text-center space-y-6">
-      <div className="flex items-center justify-center mx-auto">
-        {/* eslint-disable-next-line @next/next/no-img-element */}
-        <img src="/logo.png" alt="Automaker Logo" className="w-24 h-24" />
-      </div>
-
-      <div>
-        <h2 className="text-3xl font-bold text-foreground mb-3">
-          Welcome to Automaker
-        </h2>
-        <p className="text-muted-foreground max-w-md mx-auto">
-          Let&apos;s set up your development environment. We&apos;ll check for
-          required CLI tools and help you configure them.
-        </p>
-      </div>
-
-      <div className="grid grid-cols-1 gap-4 max-w-md mx-auto place-items-center">
-        <Card className="bg-card/50 border-border hover:border-brand-500/50 transition-colors">
-          <CardHeader className="pb-3">
-            <CardTitle className="text-base flex items-center gap-2">
-              <Terminal className="w-5 h-5 text-brand-500" />
-              Claude CLI
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <p className="text-sm text-muted-foreground">
-              Anthropic&apos;s powerful AI assistant for code generation and
-              analysis
-            </p>
-          </CardContent>
-        </Card>
-
-      </div>
-
-      <Button
-        size="lg"
-        className="bg-gradient-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-700 text-white"
-        onClick={onNext}
-        data-testid="setup-start-button"
-      >
-        Get Started
-        <ArrowRight className="w-4 h-4 ml-2" />
-      </Button>
-    </div>
-  );
-}

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

@@ -1,697 +0,0 @@
-"use client";
-
-import React, { useState, useEffect, useCallback, useMemo, useRef } from "react";
-import {
-  Terminal as TerminalIcon,
-  Plus,
-  Lock,
-  Unlock,
-  SplitSquareHorizontal,
-  SplitSquareVertical,
-  Loader2,
-  AlertCircle,
-  RefreshCw,
-  X,
-  SquarePlus,
-} from "lucide-react";
-import { useAppStore, type TerminalPanelContent, type TerminalTab } from "@/store/app-store";
-import { useKeyboardShortcutsConfig, type KeyboardShortcut } from "@/hooks/use-keyboard-shortcuts";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import {
-  Panel,
-  PanelGroup,
-  PanelResizeHandle,
-} from "react-resizable-panels";
-import { TerminalPanel } from "./terminal-view/terminal-panel";
-import {
-  DndContext,
-  DragEndEvent,
-  DragStartEvent,
-  DragOverEvent,
-  PointerSensor,
-  useSensor,
-  useSensors,
-  closestCenter,
-  DragOverlay,
-  useDroppable,
-} from "@dnd-kit/core";
-import { cn } from "@/lib/utils";
-
-interface TerminalStatus {
-  enabled: boolean;
-  passwordRequired: boolean;
-  platform: {
-    platform: string;
-    isWSL: boolean;
-    defaultShell: string;
-    arch: string;
-  };
-}
-
-// Tab component with drop target support
-function TerminalTabButton({
-  tab,
-  isActive,
-  onClick,
-  onClose,
-  isDropTarget,
-}: {
-  tab: TerminalTab;
-  isActive: boolean;
-  onClick: () => void;
-  onClose: () => void;
-  isDropTarget: boolean;
-}) {
-  const { setNodeRef, isOver } = useDroppable({
-    id: `tab-${tab.id}`,
-    data: { type: "tab", tabId: tab.id },
-  });
-
-  return (
-    <div
-      ref={setNodeRef}
-      className={cn(
-        "flex items-center gap-1 px-3 py-1.5 text-sm rounded-t-md border-b-2 cursor-pointer transition-colors",
-        isActive
-          ? "bg-background border-brand-500 text-foreground"
-          : "bg-muted border-transparent text-muted-foreground hover:text-foreground hover:bg-accent",
-        isOver && isDropTarget && "ring-2 ring-green-500"
-      )}
-      onClick={onClick}
-    >
-      <TerminalIcon className="h-3 w-3" />
-      <span className="max-w-24 truncate">{tab.name}</span>
-      <button
-        className="ml-1 p-0.5 rounded hover:bg-accent text-muted-foreground hover:text-destructive"
-        onClick={(e) => {
-          e.stopPropagation();
-          onClose();
-        }}
-      >
-        <X className="h-3 w-3" />
-      </button>
-    </div>
-  );
-}
-
-// New tab drop zone
-function NewTabDropZone({ isDropTarget }: { isDropTarget: boolean }) {
-  const { setNodeRef, isOver } = useDroppable({
-    id: "new-tab-zone",
-    data: { type: "new-tab" },
-  });
-
-  return (
-    <div
-      ref={setNodeRef}
-      className={cn(
-        "flex items-center justify-center px-3 py-1.5 rounded-t-md border-2 border-dashed transition-all",
-        isOver && isDropTarget
-          ? "border-green-500 bg-green-500/10 text-green-500"
-          : "border-transparent text-muted-foreground hover:border-border"
-      )}
-    >
-      <SquarePlus className="h-4 w-4" />
-    </div>
-  );
-}
-
-export function TerminalView() {
-  const {
-    terminalState,
-    setTerminalUnlocked,
-    addTerminalToLayout,
-    removeTerminalFromLayout,
-    setActiveTerminalSession,
-    swapTerminals,
-    currentProject,
-    addTerminalTab,
-    removeTerminalTab,
-    setActiveTerminalTab,
-    moveTerminalToTab,
-    setTerminalPanelFontSize,
-  } = useAppStore();
-
-  const [status, setStatus] = useState<TerminalStatus | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [password, setPassword] = useState("");
-  const [authLoading, setAuthLoading] = useState(false);
-  const [authError, setAuthError] = useState<string | null>(null);
-  const [activeDragId, setActiveDragId] = useState<string | null>(null);
-  const [dragOverTabId, setDragOverTabId] = useState<string | null>(null);
-  const lastCreateTimeRef = useRef<number>(0);
-  const isCreatingRef = useRef<boolean>(false);
-
-  const serverUrl = process.env.NEXT_PUBLIC_SERVER_URL || "http://localhost:3008";
-  const CREATE_COOLDOWN_MS = 500; // Prevent rapid terminal creation
-
-  // Get active tab
-  const activeTab = terminalState.tabs.find(t => t.id === terminalState.activeTabId);
-
-  // DnD sensors with activation constraint to avoid accidental drags
-  const sensors = useSensors(
-    useSensor(PointerSensor, {
-      activationConstraint: {
-        distance: 8,
-      },
-    })
-  );
-
-  // Handle drag start
-  const handleDragStart = useCallback((event: DragStartEvent) => {
-    setActiveDragId(event.active.id as string);
-  }, []);
-
-  // Handle drag over - track which tab we're hovering
-  const handleDragOver = useCallback((event: DragOverEvent) => {
-    const { over } = event;
-    if (over?.data?.current?.type === "tab") {
-      setDragOverTabId(over.data.current.tabId);
-    } else if (over?.data?.current?.type === "new-tab") {
-      setDragOverTabId("new");
-    } else {
-      setDragOverTabId(null);
-    }
-  }, []);
-
-  // Handle drag end
-  const handleDragEnd = useCallback((event: DragEndEvent) => {
-    const { active, over } = event;
-    setActiveDragId(null);
-    setDragOverTabId(null);
-
-    if (!over) return;
-
-    const activeId = active.id as string;
-    const overData = over.data?.current;
-
-    // If dropped on a tab, move terminal to that tab
-    if (overData?.type === "tab") {
-      moveTerminalToTab(activeId, overData.tabId);
-      return;
-    }
-
-    // If dropped on new tab zone, create new tab with this terminal
-    if (overData?.type === "new-tab") {
-      moveTerminalToTab(activeId, "new");
-      return;
-    }
-
-    // Otherwise, swap terminals within current tab
-    if (active.id !== over.id) {
-      swapTerminals(activeId, over.id as string);
-    }
-  }, [swapTerminals, moveTerminalToTab]);
-
-  // Fetch terminal status
-  const fetchStatus = useCallback(async () => {
-    try {
-      setLoading(true);
-      setError(null);
-      const response = await fetch(`${serverUrl}/api/terminal/status`);
-      const data = await response.json();
-      if (data.success) {
-        setStatus(data.data);
-        if (!data.data.passwordRequired) {
-          setTerminalUnlocked(true);
-        }
-      } else {
-        setError(data.error || "Failed to get terminal status");
-      }
-    } catch (err) {
-      setError("Failed to connect to server");
-      console.error("[Terminal] Status fetch error:", err);
-    } finally {
-      setLoading(false);
-    }
-  }, [serverUrl, setTerminalUnlocked]);
-
-  useEffect(() => {
-    fetchStatus();
-  }, [fetchStatus]);
-
-  // Handle password authentication
-  const handleAuth = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setAuthLoading(true);
-    setAuthError(null);
-
-    try {
-      const response = await fetch(`${serverUrl}/api/terminal/auth`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ password }),
-      });
-      const data = await response.json();
-
-      if (data.success) {
-        setTerminalUnlocked(true, data.data.token);
-        setPassword("");
-      } else {
-        setAuthError(data.error || "Authentication failed");
-      }
-    } catch (err) {
-      setAuthError("Failed to authenticate");
-      console.error("[Terminal] Auth error:", err);
-    } finally {
-      setAuthLoading(false);
-    }
-  };
-
-  // Create a new terminal session
-  // targetSessionId: the terminal to split (if splitting an existing terminal)
-  const createTerminal = async (direction?: "horizontal" | "vertical", targetSessionId?: string) => {
-    // Debounce: prevent rapid terminal creation
-    const now = Date.now();
-    if (now - lastCreateTimeRef.current < CREATE_COOLDOWN_MS || isCreatingRef.current) {
-      console.log("[Terminal] Debounced terminal creation");
-      return;
-    }
-    lastCreateTimeRef.current = now;
-    isCreatingRef.current = true;
-
-    try {
-      const headers: Record<string, string> = {
-        "Content-Type": "application/json",
-      };
-      if (terminalState.authToken) {
-        headers["X-Terminal-Token"] = terminalState.authToken;
-      }
-
-      const response = await fetch(`${serverUrl}/api/terminal/sessions`, {
-        method: "POST",
-        headers,
-        body: JSON.stringify({
-          cwd: currentProject?.path || undefined,
-          cols: 80,
-          rows: 24,
-        }),
-      });
-      const data = await response.json();
-
-      if (data.success) {
-        addTerminalToLayout(data.data.id, direction, targetSessionId);
-      } else {
-        console.error("[Terminal] Failed to create session:", data.error);
-      }
-    } catch (err) {
-      console.error("[Terminal] Create session error:", err);
-    } finally {
-      isCreatingRef.current = false;
-    }
-  };
-
-  // Create terminal in new tab
-  const createTerminalInNewTab = async () => {
-    const tabId = addTerminalTab();
-    try {
-      const headers: Record<string, string> = {
-        "Content-Type": "application/json",
-      };
-      if (terminalState.authToken) {
-        headers["X-Terminal-Token"] = terminalState.authToken;
-      }
-
-      const response = await fetch(`${serverUrl}/api/terminal/sessions`, {
-        method: "POST",
-        headers,
-        body: JSON.stringify({
-          cwd: currentProject?.path || undefined,
-          cols: 80,
-          rows: 24,
-        }),
-      });
-      const data = await response.json();
-
-      if (data.success) {
-        // Add to the newly created tab
-        const { addTerminalToTab } = useAppStore.getState();
-        addTerminalToTab(data.data.id, tabId);
-      }
-    } catch (err) {
-      console.error("[Terminal] Create session error:", err);
-    }
-  };
-
-  // Kill a terminal session
-  const killTerminal = async (sessionId: string) => {
-    try {
-      const headers: Record<string, string> = {};
-      if (terminalState.authToken) {
-        headers["X-Terminal-Token"] = terminalState.authToken;
-      }
-
-      await fetch(`${serverUrl}/api/terminal/sessions/${sessionId}`, {
-        method: "DELETE",
-        headers,
-      });
-      removeTerminalFromLayout(sessionId);
-    } catch (err) {
-      console.error("[Terminal] Kill session error:", err);
-    }
-  };
-
-  // Get keyboard shortcuts config
-  const shortcuts = useKeyboardShortcutsConfig();
-
-  // Handle terminal-specific keyboard shortcuts
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      // Only handle shortcuts when terminal is unlocked and has an active session
-      if (!terminalState.isUnlocked || !terminalState.activeSessionId) return;
-
-      const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
-      const cmdOrCtrl = isMac ? e.metaKey : e.ctrlKey;
-
-      // Parse shortcut string to check for match
-      const matchesShortcut = (shortcutStr: string | undefined) => {
-        if (!shortcutStr) return false;
-        const parts = shortcutStr.toLowerCase().split('+');
-        const key = parts[parts.length - 1];
-        const needsCmd = parts.includes('cmd');
-        const needsShift = parts.includes('shift');
-        const needsAlt = parts.includes('alt');
-
-        // Check modifiers
-        const cmdMatches = needsCmd ? cmdOrCtrl : !cmdOrCtrl;
-        const shiftMatches = needsShift ? e.shiftKey : !e.shiftKey;
-        const altMatches = needsAlt ? e.altKey : !e.altKey;
-
-        return (
-          e.key.toLowerCase() === key &&
-          cmdMatches &&
-          shiftMatches &&
-          altMatches
-        );
-      };
-
-      // Split terminal right (Cmd+D / Ctrl+D)
-      if (matchesShortcut(shortcuts.splitTerminalRight)) {
-        e.preventDefault();
-        createTerminal("horizontal", terminalState.activeSessionId);
-        return;
-      }
-
-      // Split terminal down (Cmd+Shift+D / Ctrl+Shift+D)
-      if (matchesShortcut(shortcuts.splitTerminalDown)) {
-        e.preventDefault();
-        createTerminal("vertical", terminalState.activeSessionId);
-        return;
-      }
-
-      // Close terminal (Cmd+W / Ctrl+W)
-      if (matchesShortcut(shortcuts.closeTerminal)) {
-        e.preventDefault();
-        killTerminal(terminalState.activeSessionId);
-        return;
-      }
-    };
-
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [terminalState.isUnlocked, terminalState.activeSessionId, shortcuts]);
-
-  // Get a stable key for a panel
-  const getPanelKey = (panel: TerminalPanelContent): string => {
-    if (panel.type === "terminal") {
-      return panel.sessionId;
-    }
-    return `split-${panel.direction}-${panel.panels.map(getPanelKey).join("-")}`;
-  };
-
-  // Render panel content recursively
-  const renderPanelContent = (content: TerminalPanelContent): React.ReactNode => {
-    if (content.type === "terminal") {
-      // Use per-terminal fontSize or fall back to default
-      const terminalFontSize = content.fontSize ?? terminalState.defaultFontSize;
-      return (
-        <TerminalPanel
-          key={content.sessionId}
-          sessionId={content.sessionId}
-          authToken={terminalState.authToken}
-          isActive={terminalState.activeSessionId === content.sessionId}
-          onFocus={() => setActiveTerminalSession(content.sessionId)}
-          onClose={() => killTerminal(content.sessionId)}
-          onSplitHorizontal={() => createTerminal("horizontal", content.sessionId)}
-          onSplitVertical={() => createTerminal("vertical", content.sessionId)}
-          isDragging={activeDragId === content.sessionId}
-          isDropTarget={activeDragId !== null && activeDragId !== content.sessionId}
-          fontSize={terminalFontSize}
-          onFontSizeChange={(size) => setTerminalPanelFontSize(content.sessionId, size)}
-        />
-      );
-    }
-
-    const isHorizontal = content.direction === "horizontal";
-    const defaultSizePerPanel = 100 / content.panels.length;
-
-    return (
-      <PanelGroup direction={content.direction}>
-        {content.panels.map((panel, index) => {
-          const panelSize = panel.type === "terminal" && panel.size
-            ? panel.size
-            : defaultSizePerPanel;
-
-          return (
-            <React.Fragment key={getPanelKey(panel)}>
-              {index > 0 && (
-                <PanelResizeHandle
-                  className={
-                    isHorizontal
-                      ? "w-1 h-full bg-border hover:bg-brand-500 transition-colors data-[resize-handle-state=hover]:bg-brand-500 data-[resize-handle-state=drag]:bg-brand-500"
-                      : "h-1 w-full bg-border hover:bg-brand-500 transition-colors data-[resize-handle-state=hover]:bg-brand-500 data-[resize-handle-state=drag]:bg-brand-500"
-                  }
-                />
-              )}
-              <Panel defaultSize={panelSize} minSize={15}>
-                {renderPanelContent(panel)}
-              </Panel>
-            </React.Fragment>
-          );
-        })}
-      </PanelGroup>
-    );
-  };
-
-  // Loading state
-  if (loading) {
-    return (
-      <div className="flex-1 flex items-center justify-center">
-        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
-      </div>
-    );
-  }
-
-  // Error state
-  if (error) {
-    return (
-      <div className="flex-1 flex flex-col items-center justify-center text-center p-6">
-        <div className="p-4 rounded-full bg-destructive/10 mb-4">
-          <AlertCircle className="h-12 w-12 text-destructive" />
-        </div>
-        <h2 className="text-lg font-medium mb-2">Terminal Unavailable</h2>
-        <p className="text-muted-foreground max-w-md mb-4">{error}</p>
-        <Button variant="outline" onClick={fetchStatus}>
-          <RefreshCw className="h-4 w-4 mr-2" />
-          Retry
-        </Button>
-      </div>
-    );
-  }
-
-  // Disabled state
-  if (!status?.enabled) {
-    return (
-      <div className="flex-1 flex flex-col items-center justify-center text-center p-6">
-        <div className="p-4 rounded-full bg-muted/50 mb-4">
-          <TerminalIcon className="h-12 w-12 text-muted-foreground" />
-        </div>
-        <h2 className="text-lg font-medium mb-2">Terminal Disabled</h2>
-        <p className="text-muted-foreground max-w-md">
-          Terminal access has been disabled. Set <code className="px-1.5 py-0.5 rounded bg-muted">TERMINAL_ENABLED=true</code> in your server .env file to enable it.
-        </p>
-      </div>
-    );
-  }
-
-  // Password gate
-  if (status.passwordRequired && !terminalState.isUnlocked) {
-    return (
-      <div className="flex-1 flex flex-col items-center justify-center text-center p-6">
-        <div className="p-4 rounded-full bg-muted/50 mb-4">
-          <Lock className="h-12 w-12 text-muted-foreground" />
-        </div>
-        <h2 className="text-lg font-medium mb-2">Terminal Protected</h2>
-        <p className="text-muted-foreground max-w-md mb-6">
-          Terminal access requires authentication. Enter the password to unlock.
-        </p>
-
-        <form onSubmit={handleAuth} className="w-full max-w-xs space-y-4">
-          <Input
-            type="password"
-            placeholder="Enter password"
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-            disabled={authLoading}
-            autoFocus
-          />
-          {authError && (
-            <p className="text-sm text-destructive">{authError}</p>
-          )}
-          <Button type="submit" className="w-full" disabled={authLoading || !password}>
-            {authLoading ? (
-              <Loader2 className="h-4 w-4 mr-2 animate-spin" />
-            ) : (
-              <Unlock className="h-4 w-4 mr-2" />
-            )}
-            Unlock Terminal
-          </Button>
-        </form>
-
-        {status.platform && (
-          <p className="text-xs text-muted-foreground mt-6">
-            Platform: {status.platform.platform}
-            {status.platform.isWSL && " (WSL)"}
-            {" | "}Shell: {status.platform.defaultShell}
-          </p>
-        )}
-      </div>
-    );
-  }
-
-  // No terminals yet - show welcome screen
-  if (terminalState.tabs.length === 0) {
-    return (
-      <div className="flex-1 flex flex-col items-center justify-center text-center p-6">
-        <div className="p-4 rounded-full bg-brand-500/10 mb-4">
-          <TerminalIcon className="h-12 w-12 text-brand-500" />
-        </div>
-        <h2 className="text-lg font-medium mb-2">Terminal</h2>
-        <p className="text-muted-foreground max-w-md mb-6">
-          Create a new terminal session to start executing commands.
-          {currentProject && (
-            <span className="block mt-2 text-sm">
-              Working directory: <code className="px-1.5 py-0.5 rounded bg-muted">{currentProject.path}</code>
-            </span>
-          )}
-        </p>
-
-        <Button onClick={() => createTerminal()}>
-          <Plus className="h-4 w-4 mr-2" />
-          New Terminal
-        </Button>
-
-        {status?.platform && (
-          <p className="text-xs text-muted-foreground mt-6">
-            Platform: {status.platform.platform}
-            {status.platform.isWSL && " (WSL)"}
-            {" | "}Shell: {status.platform.defaultShell}
-          </p>
-        )}
-      </div>
-    );
-  }
-
-  // Terminal view with tabs
-  return (
-    <DndContext
-      sensors={sensors}
-      collisionDetection={closestCenter}
-      onDragStart={handleDragStart}
-      onDragOver={handleDragOver}
-      onDragEnd={handleDragEnd}
-    >
-      <div className="flex-1 flex flex-col overflow-hidden">
-        {/* Tab bar */}
-        <div className="flex items-center bg-card border-b border-border px-2">
-          {/* Tabs */}
-          <div className="flex items-center gap-1 flex-1 overflow-x-auto py-1">
-            {terminalState.tabs.map((tab) => (
-              <TerminalTabButton
-                key={tab.id}
-                tab={tab}
-                isActive={tab.id === terminalState.activeTabId}
-                onClick={() => setActiveTerminalTab(tab.id)}
-                onClose={() => removeTerminalTab(tab.id)}
-                isDropTarget={activeDragId !== null}
-              />
-            ))}
-
-            {/* New tab drop zone (visible when dragging) */}
-            {activeDragId && (
-              <NewTabDropZone isDropTarget={true} />
-            )}
-
-            {/* New tab button */}
-            <button
-              className="flex items-center justify-center p-1.5 rounded hover:bg-accent text-muted-foreground hover:text-foreground"
-              onClick={createTerminalInNewTab}
-              title="New Tab"
-            >
-              <Plus className="h-4 w-4" />
-            </button>
-          </div>
-
-          {/* Toolbar buttons */}
-          <div className="flex items-center gap-1 pl-2 border-l border-border">
-            <Button
-              variant="ghost"
-              size="sm"
-              className="h-7 px-2 text-muted-foreground hover:text-foreground"
-              onClick={() => createTerminal("horizontal")}
-              title="Split Right"
-            >
-              <SplitSquareHorizontal className="h-4 w-4" />
-            </Button>
-            <Button
-              variant="ghost"
-              size="sm"
-              className="h-7 px-2 text-muted-foreground hover:text-foreground"
-              onClick={() => createTerminal("vertical")}
-              title="Split Down"
-            >
-              <SplitSquareVertical className="h-4 w-4" />
-            </Button>
-          </div>
-        </div>
-
-        {/* Active tab content */}
-        <div className="flex-1 overflow-hidden bg-background">
-          {activeTab?.layout ? (
-            renderPanelContent(activeTab.layout)
-          ) : (
-            <div className="flex-1 flex flex-col items-center justify-center text-center p-6">
-              <p className="text-muted-foreground mb-4">This tab is empty</p>
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => createTerminal()}
-              >
-                <Plus className="h-4 w-4 mr-2" />
-                New Terminal
-              </Button>
-            </div>
-          )}
-        </div>
-      </div>
-
-      {/* Drag overlay */}
-      <DragOverlay dropAnimation={null} zIndex={1000}>
-        {activeDragId ? (
-          <div className="relative inline-flex items-center gap-2 px-3.5 py-2 bg-card border-2 border-brand-500 rounded-lg shadow-xl pointer-events-none overflow-hidden">
-            <TerminalIcon className="h-4 w-4 text-brand-500 shrink-0" />
-            <span className="text-sm font-medium text-foreground whitespace-nowrap">
-              {dragOverTabId === "new"
-                ? "New tab"
-                : dragOverTabId
-                ? "Move to tab"
-                : "Terminal"}
-            </span>
-          </div>
-        ) : null}
-      </DragOverlay>
-    </DndContext>
-  );
-}

apps/app/src/components/views/terminal-view/terminal-panel.tsx

@@ -1,624 +0,0 @@
-"use client";
-
-import { useEffect, useRef, useCallback, useState } from "react";
-import {
-  X,
-  SplitSquareHorizontal,
-  SplitSquareVertical,
-  GripHorizontal,
-  Terminal,
-  ZoomIn,
-  ZoomOut,
-} from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { cn } from "@/lib/utils";
-import { useDraggable, useDroppable } from "@dnd-kit/core";
-import { useAppStore } from "@/store/app-store";
-import { getTerminalTheme } from "@/config/terminal-themes";
-
-// Font size constraints
-const MIN_FONT_SIZE = 8;
-const MAX_FONT_SIZE = 32;
-const DEFAULT_FONT_SIZE = 14;
-
-interface TerminalPanelProps {
-  sessionId: string;
-  authToken: string | null;
-  isActive: boolean;
-  onFocus: () => void;
-  onClose: () => void;
-  onSplitHorizontal: () => void;
-  onSplitVertical: () => void;
-  isDragging?: boolean;
-  isDropTarget?: boolean;
-  fontSize: number;
-  onFontSizeChange: (size: number) => void;
-}
-
-// Type for xterm Terminal - we'll use any since we're dynamically importing
-type XTerminal = InstanceType<typeof import("@xterm/xterm").Terminal>;
-type XFitAddon = InstanceType<typeof import("@xterm/addon-fit").FitAddon>;
-
-export function TerminalPanel({
-  sessionId,
-  authToken,
-  isActive,
-  onFocus,
-  onClose,
-  onSplitHorizontal,
-  onSplitVertical,
-  isDragging = false,
-  isDropTarget = false,
-  fontSize,
-  onFontSizeChange,
-}: TerminalPanelProps) {
-  const terminalRef = useRef<HTMLDivElement>(null);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const xtermRef = useRef<XTerminal | null>(null);
-  const fitAddonRef = useRef<XFitAddon | null>(null);
-  const wsRef = useRef<WebSocket | null>(null);
-  const reconnectTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-  const lastShortcutTimeRef = useRef<number>(0);
-  const [isTerminalReady, setIsTerminalReady] = useState(false);
-  const [shellName, setShellName] = useState("shell");
-
-  // Get effective theme from store
-  const getEffectiveTheme = useAppStore((state) => state.getEffectiveTheme);
-  const effectiveTheme = getEffectiveTheme();
-
-  // Use refs for callbacks and values to avoid effect re-runs
-  const onFocusRef = useRef(onFocus);
-  onFocusRef.current = onFocus;
-  const onCloseRef = useRef(onClose);
-  onCloseRef.current = onClose;
-  const onSplitHorizontalRef = useRef(onSplitHorizontal);
-  onSplitHorizontalRef.current = onSplitHorizontal;
-  const onSplitVerticalRef = useRef(onSplitVertical);
-  onSplitVerticalRef.current = onSplitVertical;
-  const fontSizeRef = useRef(fontSize);
-  fontSizeRef.current = fontSize;
-  const themeRef = useRef(effectiveTheme);
-  themeRef.current = effectiveTheme;
-
-  // Zoom functions - use the prop callback
-  const zoomIn = useCallback(() => {
-    onFontSizeChange(Math.min(fontSize + 1, MAX_FONT_SIZE));
-  }, [fontSize, onFontSizeChange]);
-
-  const zoomOut = useCallback(() => {
-    onFontSizeChange(Math.max(fontSize - 1, MIN_FONT_SIZE));
-  }, [fontSize, onFontSizeChange]);
-
-  const resetZoom = useCallback(() => {
-    onFontSizeChange(DEFAULT_FONT_SIZE);
-  }, [onFontSizeChange]);
-
-  const serverUrl = process.env.NEXT_PUBLIC_SERVER_URL || "http://localhost:3008";
-  const wsUrl = serverUrl.replace(/^http/, "ws");
-
-  // Draggable - only the drag handle triggers drag
-  const {
-    attributes: dragAttributes,
-    listeners: dragListeners,
-    setNodeRef: setDragRef,
-  } = useDraggable({
-    id: sessionId,
-  });
-
-  // Droppable - the entire panel is a drop target
-  const {
-    setNodeRef: setDropRef,
-    isOver,
-  } = useDroppable({
-    id: sessionId,
-  });
-
-  // Initialize terminal - dynamically import xterm to avoid SSR issues
-  useEffect(() => {
-    if (!terminalRef.current) return;
-
-    let mounted = true;
-
-    const initTerminal = async () => {
-      // Dynamically import xterm modules
-      const [
-        { Terminal },
-        { FitAddon },
-        { WebglAddon },
-      ] = await Promise.all([
-        import("@xterm/xterm"),
-        import("@xterm/addon-fit"),
-        import("@xterm/addon-webgl"),
-      ]);
-
-      // Also import CSS
-      await import("@xterm/xterm/css/xterm.css");
-
-      if (!mounted || !terminalRef.current) return;
-
-      // Get terminal theme matching the app theme
-      const terminalTheme = getTerminalTheme(themeRef.current);
-
-      // Create terminal instance with the current global font size and theme
-      const terminal = new Terminal({
-        cursorBlink: true,
-        cursorStyle: "block",
-        fontSize: fontSizeRef.current,
-        fontFamily: "Menlo, Monaco, 'Courier New', monospace",
-        theme: terminalTheme,
-        allowProposedApi: true,
-      });
-
-      // Create fit addon
-      const fitAddon = new FitAddon();
-      terminal.loadAddon(fitAddon);
-
-      // Open terminal
-      terminal.open(terminalRef.current);
-
-      // Try to load WebGL addon for better performance
-      try {
-        const webglAddon = new WebglAddon();
-        webglAddon.onContextLoss(() => {
-          webglAddon.dispose();
-        });
-        terminal.loadAddon(webglAddon);
-      } catch {
-        console.warn("[Terminal] WebGL addon not available, falling back to canvas");
-      }
-
-      // Fit terminal to container
-      setTimeout(() => {
-        fitAddon.fit();
-      }, 0);
-
-      xtermRef.current = terminal;
-      fitAddonRef.current = fitAddon;
-      setIsTerminalReady(true);
-
-      // Handle focus - use ref to avoid re-running effect
-      terminal.onData(() => {
-        onFocusRef.current();
-      });
-
-      // Custom key handler to intercept terminal shortcuts
-      // Return false to prevent xterm from handling the key
-      const SHORTCUT_COOLDOWN_MS = 300; // Prevent rapid firing
-
-      terminal.attachCustomKeyEventHandler((event) => {
-        // Only intercept keydown events
-        if (event.type !== 'keydown') return true;
-
-        // Check cooldown to prevent rapid terminal creation
-        const now = Date.now();
-        const canTrigger = now - lastShortcutTimeRef.current > SHORTCUT_COOLDOWN_MS;
-
-        // Use event.code for keyboard-layout-independent key detection
-        const code = event.code;
-
-        // Alt+D - Split right
-        if (event.altKey && !event.shiftKey && !event.ctrlKey && !event.metaKey && code === 'KeyD') {
-          event.preventDefault();
-          if (canTrigger) {
-            lastShortcutTimeRef.current = now;
-            onSplitHorizontalRef.current();
-          }
-          return false;
-        }
-
-        // Alt+S - Split down
-        if (event.altKey && !event.shiftKey && !event.ctrlKey && !event.metaKey && code === 'KeyS') {
-          event.preventDefault();
-          if (canTrigger) {
-            lastShortcutTimeRef.current = now;
-            onSplitVerticalRef.current();
-          }
-          return false;
-        }
-
-        // Alt+W - Close terminal
-        if (event.altKey && !event.shiftKey && !event.ctrlKey && !event.metaKey && code === 'KeyW') {
-          event.preventDefault();
-          if (canTrigger) {
-            lastShortcutTimeRef.current = now;
-            onCloseRef.current();
-          }
-          return false;
-        }
-
-        // Let xterm handle all other keys
-        return true;
-      });
-    };
-
-    initTerminal();
-
-    // Cleanup
-    return () => {
-      mounted = false;
-      if (xtermRef.current) {
-        xtermRef.current.dispose();
-        xtermRef.current = null;
-      }
-      fitAddonRef.current = null;
-      setIsTerminalReady(false);
-    };
-  }, []); // No dependencies - only run once on mount
-
-  // Connect WebSocket - wait for terminal to be ready
-  useEffect(() => {
-    if (!isTerminalReady || !sessionId) return;
-    const terminal = xtermRef.current;
-    if (!terminal) return;
-
-    const connect = () => {
-      // Build WebSocket URL with token
-      let url = `${wsUrl}/api/terminal/ws?sessionId=${sessionId}`;
-      if (authToken) {
-        url += `&token=${encodeURIComponent(authToken)}`;
-      }
-
-      const ws = new WebSocket(url);
-      wsRef.current = ws;
-
-      ws.onopen = () => {
-        console.log(`[Terminal] WebSocket connected for session ${sessionId}`);
-      };
-
-      ws.onmessage = (event) => {
-        try {
-          const msg = JSON.parse(event.data);
-          switch (msg.type) {
-            case "data":
-              terminal.write(msg.data);
-              break;
-            case "scrollback":
-              // Replay scrollback buffer (previous terminal output)
-              if (msg.data) {
-                terminal.write(msg.data);
-              }
-              break;
-            case "connected":
-              console.log(`[Terminal] Session connected: ${msg.shell} in ${msg.cwd}`);
-              if (msg.shell) {
-                // Extract shell name from path (e.g., "/bin/bash" -> "bash")
-                const name = msg.shell.split("/").pop() || msg.shell;
-                setShellName(name);
-              }
-              break;
-            case "exit":
-              terminal.write(`\r\n\x1b[33m[Process exited with code ${msg.exitCode}]\x1b[0m\r\n`);
-              break;
-            case "pong":
-              // Heartbeat response
-              break;
-          }
-        } catch (err) {
-          console.error("[Terminal] Message parse error:", err);
-        }
-      };
-
-      ws.onclose = (event) => {
-        console.log(`[Terminal] WebSocket closed for session ${sessionId}:`, event.code, event.reason);
-        wsRef.current = null;
-
-        // Don't reconnect if closed normally or auth failed
-        if (event.code === 1000 || event.code === 4001 || event.code === 4003) {
-          return;
-        }
-
-        // Attempt reconnect after a delay
-        reconnectTimeoutRef.current = setTimeout(() => {
-          if (xtermRef.current) {
-            console.log(`[Terminal] Attempting reconnect for session ${sessionId}`);
-            connect();
-          }
-        }, 2000);
-      };
-
-      ws.onerror = (error) => {
-        console.error(`[Terminal] WebSocket error for session ${sessionId}:`, error);
-      };
-    };
-
-    connect();
-
-    // Handle terminal input
-    const dataHandler = terminal.onData((data) => {
-      if (wsRef.current?.readyState === WebSocket.OPEN) {
-        wsRef.current.send(JSON.stringify({ type: "input", data }));
-      }
-    });
-
-    // Cleanup
-    return () => {
-      dataHandler.dispose();
-      if (reconnectTimeoutRef.current) {
-        clearTimeout(reconnectTimeoutRef.current);
-      }
-      if (wsRef.current) {
-        wsRef.current.close();
-        wsRef.current = null;
-      }
-    };
-  }, [sessionId, authToken, wsUrl, isTerminalReady]);
-
-  // Handle resize
-  const handleResize = useCallback(() => {
-    if (fitAddonRef.current && xtermRef.current) {
-      fitAddonRef.current.fit();
-      const { cols, rows } = xtermRef.current;
-
-      // Send resize to server
-      if (wsRef.current?.readyState === WebSocket.OPEN) {
-        wsRef.current.send(JSON.stringify({ type: "resize", cols, rows }));
-      }
-    }
-  }, []);
-
-  // Resize observer
-  useEffect(() => {
-    const container = terminalRef.current;
-    if (!container) return;
-
-    const resizeObserver = new ResizeObserver(() => {
-      handleResize();
-    });
-
-    resizeObserver.observe(container);
-
-    // Also handle window resize
-    window.addEventListener("resize", handleResize);
-
-    return () => {
-      resizeObserver.disconnect();
-      window.removeEventListener("resize", handleResize);
-    };
-  }, [handleResize]);
-
-  // Focus terminal when becoming active
-  useEffect(() => {
-    if (isActive && xtermRef.current) {
-      xtermRef.current.focus();
-    }
-  }, [isActive]);
-
-  // Update terminal font size when it changes
-  useEffect(() => {
-    if (xtermRef.current && isTerminalReady) {
-      xtermRef.current.options.fontSize = fontSize;
-      // Refit after font size change
-      if (fitAddonRef.current) {
-        fitAddonRef.current.fit();
-        // Notify server of new dimensions
-        const { cols, rows } = xtermRef.current;
-        if (wsRef.current?.readyState === WebSocket.OPEN) {
-          wsRef.current.send(JSON.stringify({ type: "resize", cols, rows }));
-        }
-      }
-    }
-  }, [fontSize, isTerminalReady]);
-
-  // Update terminal theme when app theme changes
-  useEffect(() => {
-    if (xtermRef.current && isTerminalReady) {
-      const terminalTheme = getTerminalTheme(effectiveTheme);
-      xtermRef.current.options.theme = terminalTheme;
-    }
-  }, [effectiveTheme, isTerminalReady]);
-
-  // Handle keyboard shortcuts for zoom (Ctrl+Plus, Ctrl+Minus, Ctrl+0)
-  useEffect(() => {
-    const container = containerRef.current;
-    if (!container) return;
-
-    const handleKeyDown = (e: KeyboardEvent) => {
-      // Only handle if Ctrl (or Cmd on Mac) is pressed
-      if (!e.ctrlKey && !e.metaKey) return;
-
-      // Ctrl/Cmd + Plus or Ctrl/Cmd + = (for keyboards without numpad)
-      if (e.key === "+" || e.key === "=") {
-        e.preventDefault();
-        e.stopPropagation();
-        zoomIn();
-        return;
-      }
-
-      // Ctrl/Cmd + Minus
-      if (e.key === "-") {
-        e.preventDefault();
-        e.stopPropagation();
-        zoomOut();
-        return;
-      }
-
-      // Ctrl/Cmd + 0 to reset
-      if (e.key === "0") {
-        e.preventDefault();
-        e.stopPropagation();
-        resetZoom();
-        return;
-      }
-    };
-
-    container.addEventListener("keydown", handleKeyDown);
-    return () => container.removeEventListener("keydown", handleKeyDown);
-  }, [zoomIn, zoomOut, resetZoom]);
-
-  // Handle mouse wheel zoom (Ctrl+Wheel)
-  useEffect(() => {
-    const container = containerRef.current;
-    if (!container) return;
-
-    const handleWheel = (e: WheelEvent) => {
-      // Only zoom if Ctrl (or Cmd on Mac) is pressed
-      if (!e.ctrlKey && !e.metaKey) return;
-
-      e.preventDefault();
-      e.stopPropagation();
-
-      if (e.deltaY < 0) {
-        // Scroll up = zoom in
-        zoomIn();
-      } else if (e.deltaY > 0) {
-        // Scroll down = zoom out
-        zoomOut();
-      }
-    };
-
-    // Use passive: false to allow preventDefault
-    container.addEventListener("wheel", handleWheel, { passive: false });
-    return () => container.removeEventListener("wheel", handleWheel);
-  }, [zoomIn, zoomOut]);
-
-  // Combine refs for the container
-  const setRefs = useCallback((node: HTMLDivElement | null) => {
-    containerRef.current = node;
-    setDropRef(node);
-  }, [setDropRef]);
-
-  // Get current terminal theme for xterm styling
-  const currentTerminalTheme = getTerminalTheme(effectiveTheme);
-
-  return (
-    <div
-      ref={setRefs}
-      className={cn(
-        "flex flex-col h-full relative",
-        isActive && "ring-1 ring-brand-500 ring-inset",
-        // Visual feedback when dragging this terminal
-        isDragging && "opacity-50",
-        // Visual feedback when hovering over as drop target
-        isOver && isDropTarget && "ring-2 ring-green-500 ring-inset"
-      )}
-      onClick={onFocus}
-      tabIndex={0}
-      data-terminal-container="true"
-    >
-      {/* Drop indicator overlay */}
-      {isOver && isDropTarget && (
-        <div className="absolute inset-0 bg-green-500/10 z-10 pointer-events-none flex items-center justify-center">
-          <div className="px-3 py-2 bg-green-500/90 rounded-md text-white text-sm font-medium">
-            Drop to swap
-          </div>
-        </div>
-      )}
-
-      {/* Header bar with drag handle - uses app theme CSS variables */}
-      <div className="flex items-center h-7 px-1 shrink-0 bg-card border-b border-border">
-        {/* Drag handle */}
-        <button
-          ref={setDragRef}
-          {...dragAttributes}
-          {...dragListeners}
-          className={cn(
-            "p-1 rounded cursor-grab active:cursor-grabbing mr-1 transition-colors text-muted-foreground hover:text-foreground hover:bg-accent",
-            isDragging && "cursor-grabbing"
-          )}
-          title="Drag to swap terminals"
-        >
-          <GripHorizontal className="h-3 w-3" />
-        </button>
-
-        {/* Terminal icon and label */}
-        <div className="flex items-center gap-1.5 flex-1 min-w-0">
-          <Terminal className="h-3 w-3 shrink-0 text-muted-foreground" />
-          <span className="text-xs truncate text-foreground">
-            {shellName}
-          </span>
-          {/* Font size indicator - only show when not default */}
-          {fontSize !== DEFAULT_FONT_SIZE && (
-            <button
-              onClick={(e) => {
-                e.stopPropagation();
-                resetZoom();
-              }}
-              className="text-[10px] px-1 rounded transition-colors text-muted-foreground hover:text-foreground hover:bg-accent"
-              title="Click to reset zoom (Ctrl+0)"
-            >
-              {fontSize}px
-            </button>
-          )}
-        </div>
-
-        {/* Zoom and action buttons */}
-        <div className="flex items-center gap-0.5">
-          {/* Zoom controls */}
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-5 w-5 text-muted-foreground hover:text-foreground"
-            onClick={(e) => {
-              e.stopPropagation();
-              zoomOut();
-            }}
-            title="Zoom Out (Ctrl+-)"
-            disabled={fontSize <= MIN_FONT_SIZE}
-          >
-            <ZoomOut className="h-3 w-3" />
-          </Button>
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-5 w-5 text-muted-foreground hover:text-foreground"
-            onClick={(e) => {
-              e.stopPropagation();
-              zoomIn();
-            }}
-            title="Zoom In (Ctrl++)"
-            disabled={fontSize >= MAX_FONT_SIZE}
-          >
-            <ZoomIn className="h-3 w-3" />
-          </Button>
-
-          <div className="w-px h-3 mx-0.5 bg-border" />
-
-          {/* Split/close buttons */}
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-5 w-5 text-muted-foreground hover:text-foreground"
-            onClick={(e) => {
-              e.stopPropagation();
-              onSplitHorizontal();
-            }}
-            title="Split Right (Cmd+D)"
-          >
-            <SplitSquareHorizontal className="h-3 w-3" />
-          </Button>
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-5 w-5 text-muted-foreground hover:text-foreground"
-            onClick={(e) => {
-              e.stopPropagation();
-              onSplitVertical();
-            }}
-            title="Split Down (Cmd+Shift+D)"
-          >
-            <SplitSquareVertical className="h-3 w-3" />
-          </Button>
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-5 w-5 text-muted-foreground hover:text-destructive"
-            onClick={(e) => {
-              e.stopPropagation();
-              onClose();
-            }}
-            title="Close Terminal (Cmd+W)"
-          >
-            <X className="h-3 w-3" />
-          </Button>
-        </div>
-      </div>
-
-      {/* Terminal container - uses terminal theme */}
-      <div
-        ref={terminalRef}
-        className="flex-1 overflow-hidden"
-        style={{ backgroundColor: currentTerminalTheme.background }}
-      />
-    </div>
-  );
-}

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

@@ -1,479 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { cn } from "@/lib/utils";
-import {
-  ChevronDown,
-  ChevronRight,
-  Rocket,
-  Layers,
-  Sparkles,
-  GitBranch,
-  FolderTree,
-  Component,
-  Settings,
-  PlayCircle,
-  Bot,
-  LayoutGrid,
-  FileText,
-  Terminal,
-  Palette,
-  Keyboard,
-  Cpu,
-  Zap,
-  Image,
-  TestTube,
-  Brain,
-  Users,
-} from "lucide-react";
-
-interface WikiSection {
-  id: string;
-  title: string;
-  icon: React.ElementType;
-  content: React.ReactNode;
-}
-
-function CollapsibleSection({
-  section,
-  isOpen,
-  onToggle,
-}: {
-  section: WikiSection;
-  isOpen: boolean;
-  onToggle: () => void;
-}) {
-  const Icon = section.icon;
-
-  return (
-    <div className="border border-border rounded-lg overflow-hidden bg-card/50 backdrop-blur-sm">
-      <button
-        onClick={onToggle}
-        className="w-full flex items-center gap-3 p-4 text-left hover:bg-accent/50 transition-colors"
-      >
-        <div className="flex items-center justify-center w-8 h-8 rounded-lg bg-brand-500/10 text-brand-500">
-          <Icon className="w-4 h-4" />
-        </div>
-        <span className="flex-1 font-medium text-foreground">{section.title}</span>
-        {isOpen ? (
-          <ChevronDown className="w-4 h-4 text-muted-foreground" />
-        ) : (
-          <ChevronRight className="w-4 h-4 text-muted-foreground" />
-        )}
-      </button>
-      {isOpen && (
-        <div className="px-4 pb-4 pt-0 border-t border-border/50">
-          <div className="pt-4 text-sm text-muted-foreground leading-relaxed">
-            {section.content}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-function CodeBlock({ children, title }: { children: string; title?: string }) {
-  return (
-    <div className="my-3 rounded-lg overflow-hidden border border-border">
-      {title && (
-        <div className="px-3 py-1.5 bg-muted/50 border-b border-border text-xs font-medium text-muted-foreground">
-          {title}
-        </div>
-      )}
-      <pre className="p-3 bg-muted/30 overflow-x-auto text-xs font-mono text-foreground">
-        {children}
-      </pre>
-    </div>
-  );
-}
-
-function FeatureList({ items }: { items: { icon: React.ElementType; title: string; description: string }[] }) {
-  return (
-    <div className="grid gap-3 mt-3">
-      {items.map((item, index) => {
-        const ItemIcon = item.icon;
-        return (
-          <div key={index} className="flex items-start gap-3 p-3 rounded-lg bg-muted/30 border border-border/50">
-            <div className="flex items-center justify-center w-6 h-6 rounded bg-brand-500/10 text-brand-500 shrink-0 mt-0.5">
-              <ItemIcon className="w-3.5 h-3.5" />
-            </div>
-            <div>
-              <div className="font-medium text-foreground text-sm">{item.title}</div>
-              <div className="text-xs text-muted-foreground mt-0.5">{item.description}</div>
-            </div>
-          </div>
-        );
-      })}
-    </div>
-  );
-}
-
-export function WikiView() {
-  const [openSections, setOpenSections] = useState<Set<string>>(new Set(["overview"]));
-
-  const toggleSection = (id: string) => {
-    setOpenSections((prev) => {
-      const newSet = new Set(prev);
-      if (newSet.has(id)) {
-        newSet.delete(id);
-      } else {
-        newSet.add(id);
-      }
-      return newSet;
-    });
-  };
-
-  const expandAll = () => {
-    setOpenSections(new Set(sections.map((s) => s.id)));
-  };
-
-  const collapseAll = () => {
-    setOpenSections(new Set());
-  };
-
-  const sections: WikiSection[] = [
-    {
-      id: "overview",
-      title: "Project Overview",
-      icon: Rocket,
-      content: (
-        <div className="space-y-3">
-          <p>
-            <strong className="text-foreground">Automaker</strong> is an autonomous AI development studio that helps developers build software faster using AI agents.
-          </p>
-          <p>
-            At its core, Automaker provides a visual Kanban board to manage features. When you're ready, AI agents automatically implement those features in your codebase, complete with git worktree isolation for safe parallel development.
-          </p>
-          <div className="p-3 rounded-lg bg-brand-500/10 border border-brand-500/20 mt-4">
-            <p className="text-brand-400 text-sm">
-              Think of it as having a team of AI developers that can work on multiple features simultaneously while you focus on the bigger picture.
-            </p>
-          </div>
-        </div>
-      ),
-    },
-    {
-      id: "architecture",
-      title: "Architecture",
-      icon: Layers,
-      content: (
-        <div className="space-y-3">
-          <p>Automaker is built as a monorepo with two main applications:</p>
-          <ul className="list-disc list-inside space-y-2 ml-2">
-            <li>
-              <strong className="text-foreground">apps/app</strong> - Next.js + Electron frontend for the desktop application
-            </li>
-            <li>
-              <strong className="text-foreground">apps/server</strong> - Express backend handling API requests and agent orchestration
-            </li>
-          </ul>
-          <div className="mt-4 space-y-2">
-            <p className="font-medium text-foreground">Key Technologies:</p>
-            <ul className="list-disc list-inside space-y-1 ml-2">
-              <li>Electron wraps Next.js for cross-platform desktop support</li>
-              <li>Real-time communication via WebSocket for live agent updates</li>
-              <li>State management with Zustand for reactive UI updates</li>
-              <li>Claude Agent SDK for AI capabilities</li>
-            </ul>
-          </div>
-        </div>
-      ),
-    },
-    {
-      id: "features",
-      title: "Key Features",
-      icon: Sparkles,
-      content: (
-        <div>
-          <FeatureList
-            items={[
-              {
-                icon: LayoutGrid,
-                title: "Kanban Board",
-                description: "4 columns: Backlog, In Progress, Waiting Approval, Verified. Drag and drop to manage feature lifecycle.",
-              },
-              {
-                icon: Bot,
-                title: "AI Agent Integration",
-                description: "Powered by Claude via the Agent SDK with full file, bash, and git access.",
-              },
-              {
-                icon: Cpu,
-                title: "Multi-Model Support",
-                description: "Claude Haiku/Sonnet/Opus models. Choose the right model for each task.",
-              },
-              {
-                icon: Brain,
-                title: "Extended Thinking",
-                description: "Configurable thinking levels (none, low, medium, high, ultrathink) for complex tasks.",
-              },
-              {
-                icon: Zap,
-                title: "Real-time Streaming",
-                description: "Watch AI agents work in real-time with live output streaming.",
-              },
-              {
-                icon: GitBranch,
-                title: "Git Worktree Isolation",
-                description: "Each feature runs in its own git worktree for safe parallel development.",
-              },
-              {
-                icon: Users,
-                title: "AI Profiles",
-                description: "Pre-configured model + thinking level combinations for different task types.",
-              },
-              {
-                icon: Terminal,
-                title: "Integrated Terminal",
-                description: "Built-in terminal with tab support and split panes.",
-              },
-              {
-                icon: Keyboard,
-                title: "Keyboard Shortcuts",
-                description: "Fully customizable shortcuts for power users.",
-              },
-              {
-                icon: Palette,
-                title: "14 Themes",
-                description: "From light to dark, retro to synthwave - pick your style.",
-              },
-              {
-                icon: Image,
-                title: "Image Support",
-                description: "Attach images to features for visual context.",
-              },
-              {
-                icon: TestTube,
-                title: "Test Integration",
-                description: "Automatic test running and TDD support for quality assurance.",
-              },
-            ]}
-          />
-        </div>
-      ),
-    },
-    {
-      id: "data-flow",
-      title: "How It Works (Data Flow)",
-      icon: GitBranch,
-      content: (
-        <div className="space-y-3">
-          <p>Here's what happens when you use Automaker to implement a feature:</p>
-          <ol className="list-decimal list-inside space-y-3 ml-2 mt-4">
-            <li className="text-foreground">
-              <strong>Create Feature</strong>
-              <p className="text-muted-foreground ml-5 mt-1">Add a new feature card to the Kanban board with description and steps</p>
-            </li>
-            <li className="text-foreground">
-              <strong>Feature Saved</strong>
-              <p className="text-muted-foreground ml-5 mt-1">Feature saved to <code className="px-1 py-0.5 bg-muted rounded text-xs">.automaker/features/&#123;id&#125;/feature.json</code></p>
-            </li>
-            <li className="text-foreground">
-              <strong>Start Work</strong>
-              <p className="text-muted-foreground ml-5 mt-1">Drag to "In Progress" or enable auto mode to start implementation</p>
-            </li>
-            <li className="text-foreground">
-              <strong>Git Worktree Created</strong>
-              <p className="text-muted-foreground ml-5 mt-1">Backend AutoModeService creates isolated git worktree (if enabled)</p>
-            </li>
-            <li className="text-foreground">
-              <strong>Agent Executes</strong>
-              <p className="text-muted-foreground ml-5 mt-1">Claude Agent SDK runs with file/bash/git tool access</p>
-            </li>
-            <li className="text-foreground">
-              <strong>Progress Streamed</strong>
-              <p className="text-muted-foreground ml-5 mt-1">Real-time updates via WebSocket as agent works</p>
-            </li>
-            <li className="text-foreground">
-              <strong>Completion</strong>
-              <p className="text-muted-foreground ml-5 mt-1">On success, feature moves to "waiting_approval" for your review</p>
-            </li>
-            <li className="text-foreground">
-              <strong>Verify</strong>
-              <p className="text-muted-foreground ml-5 mt-1">Review changes and move to "verified" when satisfied</p>
-            </li>
-          </ol>
-        </div>
-      ),
-    },
-    {
-      id: "structure",
-      title: "Project Structure",
-      icon: FolderTree,
-      content: (
-        <div>
-          <p className="mb-3">The Automaker codebase is organized as follows:</p>
-          <CodeBlock title="Directory Structure">
-{`/automaker/
-├── apps/
-│   ├── app/              # Frontend (Next.js + Electron)
-│   │   ├── electron/     # Electron main process
-│   │   └── src/
-│   │       ├── app/      # Next.js App Router pages
-│   │       ├── components/  # React components
-│   │       ├── store/    # Zustand state management
-│   │       ├── hooks/    # Custom React hooks
-│   │       └── lib/      # Utilities and helpers
-│   └── server/           # Backend (Express)
-│       └── src/
-│           ├── routes/   # API endpoints
-│           └── services/ # Business logic (AutoModeService, etc.)
-├── docs/                 # Documentation
-└── package.json          # Workspace root`}
-          </CodeBlock>
-        </div>
-      ),
-    },
-    {
-      id: "components",
-      title: "Key Components",
-      icon: Component,
-      content: (
-        <div className="space-y-3">
-          <p>The main UI components that make up Automaker:</p>
-          <div className="grid gap-2 mt-4">
-            {[
-              { file: "sidebar.tsx", desc: "Main navigation with project picker and view switching" },
-              { file: "board-view.tsx", desc: "Kanban board with drag-and-drop cards" },
-              { file: "agent-view.tsx", desc: "AI chat interface for conversational development" },
-              { file: "spec-view.tsx", desc: "Project specification editor" },
-              { file: "context-view.tsx", desc: "Context file manager for AI context" },
-              { file: "terminal-view.tsx", desc: "Integrated terminal with splits and tabs" },
-              { file: "profiles-view.tsx", desc: "AI profile management (model + thinking presets)" },
-              { file: "app-store.ts", desc: "Central Zustand state management" },
-            ].map((item) => (
-              <div key={item.file} className="flex items-center gap-3 p-2 rounded bg-muted/30 border border-border/50">
-                <code className="text-xs font-mono text-brand-400 bg-brand-500/10 px-2 py-0.5 rounded">{item.file}</code>
-                <span className="text-xs text-muted-foreground">{item.desc}</span>
-              </div>
-            ))}
-          </div>
-        </div>
-      ),
-    },
-    {
-      id: "configuration",
-      title: "Configuration",
-      icon: Settings,
-      content: (
-        <div className="space-y-3">
-          <p>Automaker stores project configuration in the <code className="px-1 py-0.5 bg-muted rounded text-xs">.automaker/</code> directory:</p>
-          <div className="grid gap-2 mt-4">
-            {[
-              { file: "app_spec.txt", desc: "Project specification describing your app for AI context" },
-              { file: "context/", desc: "Additional context files (docs, examples) for AI" },
-              { file: "features/", desc: "Feature definitions with descriptions and steps" },
-            ].map((item) => (
-              <div key={item.file} className="flex items-center gap-3 p-2 rounded bg-muted/30 border border-border/50">
-                <code className="text-xs font-mono text-brand-400 bg-brand-500/10 px-2 py-0.5 rounded">{item.file}</code>
-                <span className="text-xs text-muted-foreground">{item.desc}</span>
-              </div>
-            ))}
-          </div>
-          <div className="mt-4 p-3 rounded-lg bg-muted/30 border border-border/50">
-            <p className="text-sm text-foreground font-medium mb-2">Tip: App Spec Best Practices</p>
-            <ul className="list-disc list-inside space-y-1 text-xs text-muted-foreground">
-              <li>Include your tech stack and key dependencies</li>
-              <li>Describe the project structure and conventions</li>
-              <li>List any important patterns or architectural decisions</li>
-              <li>Note testing requirements and coding standards</li>
-            </ul>
-          </div>
-        </div>
-      ),
-    },
-    {
-      id: "getting-started",
-      title: "Getting Started",
-      icon: PlayCircle,
-      content: (
-        <div className="space-y-3">
-          <p>Follow these steps to start building with Automaker:</p>
-          <ol className="list-decimal list-inside space-y-4 ml-2 mt-4">
-            <li className="text-foreground">
-              <strong>Create or Open a Project</strong>
-              <p className="text-muted-foreground ml-5 mt-1">Use the sidebar to create a new project or open an existing folder</p>
-            </li>
-            <li className="text-foreground">
-              <strong>Write an App Spec</strong>
-              <p className="text-muted-foreground ml-5 mt-1">Go to Spec Editor and describe your project. This helps AI understand your codebase.</p>
-            </li>
-            <li className="text-foreground">
-              <strong>Add Context (Optional)</strong>
-              <p className="text-muted-foreground ml-5 mt-1">Add relevant documentation or examples to the Context view for better AI results</p>
-            </li>
-            <li className="text-foreground">
-              <strong>Create Features</strong>
-              <p className="text-muted-foreground ml-5 mt-1">Add feature cards to your Kanban board with clear descriptions and implementation steps</p>
-            </li>
-            <li className="text-foreground">
-              <strong>Configure AI Profile</strong>
-              <p className="text-muted-foreground ml-5 mt-1">Choose an AI profile or customize model/thinking settings per feature</p>
-            </li>
-            <li className="text-foreground">
-              <strong>Start Implementation</strong>
-              <p className="text-muted-foreground ml-5 mt-1">Drag features to "In Progress" or enable auto mode to let AI work</p>
-            </li>
-            <li className="text-foreground">
-              <strong>Review and Verify</strong>
-              <p className="text-muted-foreground ml-5 mt-1">Check completed features, review changes, and mark as verified</p>
-            </li>
-          </ol>
-          <div className="mt-6 p-4 rounded-lg bg-brand-500/10 border border-brand-500/20">
-            <p className="text-brand-400 text-sm font-medium mb-2">Pro Tips:</p>
-            <ul className="list-disc list-inside space-y-1 text-xs text-brand-400/80">
-              <li>Use keyboard shortcuts for faster navigation (press <code className="px-1 py-0.5 bg-brand-500/20 rounded">?</code> to see all)</li>
-              <li>Enable git worktree isolation for parallel feature development</li>
-              <li>Start with "Quick Edit" profile for simple tasks, use "Heavy Task" for complex work</li>
-              <li>Keep your app spec up to date as your project evolves</li>
-            </ul>
-          </div>
-        </div>
-      ),
-    },
-  ];
-
-  return (
-    <div className="flex-1 flex flex-col overflow-hidden bg-background">
-      {/* Header */}
-      <div className="border-b border-border bg-card/30 backdrop-blur-sm px-6 py-4 shrink-0">
-        <div className="flex items-center justify-between">
-          <div>
-            <h1 className="text-xl font-semibold text-foreground">Wiki</h1>
-            <p className="text-sm text-muted-foreground mt-1">
-              Learn how Automaker works and how to use it effectively
-            </p>
-          </div>
-          <div className="flex items-center gap-2">
-            <button
-              onClick={expandAll}
-              className="px-3 py-1.5 text-xs font-medium text-muted-foreground hover:text-foreground hover:bg-accent rounded-md transition-colors"
-            >
-              Expand All
-            </button>
-            <button
-              onClick={collapseAll}
-              className="px-3 py-1.5 text-xs font-medium text-muted-foreground hover:text-foreground hover:bg-accent rounded-md transition-colors"
-            >
-              Collapse All
-            </button>
-          </div>
-        </div>
-      </div>
-
-      {/* Content */}
-      <div className="flex-1 overflow-y-auto">
-        <div className="max-w-4xl mx-auto px-6 py-6 space-y-3">
-          {sections.map((section) => (
-            <CollapsibleSection
-              key={section.id}
-              section={section}
-              isOpen={openSections.has(section.id)}
-              onToggle={() => toggleSection(section.id)}
-            />
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}

apps/app/src/config/api-providers.ts

@@ -1,114 +0,0 @@
-import type { Dispatch, SetStateAction } from "react";
-import type { LucideIcon } from "lucide-react";
-import type { ApiKeys } from "@/store/app-store";
-
-export type ProviderKey = "anthropic" | "google";
-
-export interface ProviderConfig {
-  key: ProviderKey;
-  label: string;
-  inputId: string;
-  placeholder: string;
-  value: string;
-  setValue: Dispatch<SetStateAction<string>>;
-  showValue: boolean;
-  setShowValue: Dispatch<SetStateAction<boolean>>;
-  hasStoredKey: string | null | undefined;
-  inputTestId: string;
-  toggleTestId: string;
-  testButton: {
-    onClick: () => Promise<void> | void;
-    disabled: boolean;
-    loading: boolean;
-    testId: string;
-  };
-  result: { success: boolean; message: string } | null;
-  resultTestId: string;
-  resultMessageTestId: string;
-  descriptionPrefix: string;
-  descriptionLinkHref: string;
-  descriptionLinkText: string;
-  descriptionSuffix?: string;
-}
-
-export interface ProviderConfigParams {
-  apiKeys: ApiKeys;
-  anthropic: {
-    value: string;
-    setValue: Dispatch<SetStateAction<string>>;
-    show: boolean;
-    setShow: Dispatch<SetStateAction<boolean>>;
-    testing: boolean;
-    onTest: () => Promise<void>;
-    result: { success: boolean; message: string } | null;
-  };
-  google: {
-    value: string;
-    setValue: Dispatch<SetStateAction<string>>;
-    show: boolean;
-    setShow: Dispatch<SetStateAction<boolean>>;
-    testing: boolean;
-    onTest: () => Promise<void>;
-    result: { success: boolean; message: string } | null;
-  };
-}
-
-export const buildProviderConfigs = ({
-  apiKeys,
-  anthropic,
-  google,
-}: ProviderConfigParams): ProviderConfig[] => [
-  {
-    key: "anthropic",
-    label: "Anthropic API Key (Claude)",
-    inputId: "anthropic-key",
-    placeholder: "sk-ant-...",
-    value: anthropic.value,
-    setValue: anthropic.setValue,
-    showValue: anthropic.show,
-    setShowValue: anthropic.setShow,
-    hasStoredKey: apiKeys.anthropic,
-    inputTestId: "anthropic-api-key-input",
-    toggleTestId: "toggle-anthropic-visibility",
-    testButton: {
-      onClick: anthropic.onTest,
-      disabled: !anthropic.value || anthropic.testing,
-      loading: anthropic.testing,
-      testId: "test-claude-connection",
-    },
-    result: anthropic.result,
-    resultTestId: "test-connection-result",
-    resultMessageTestId: "test-connection-message",
-    descriptionPrefix: "Used for Claude AI features. Get your key at",
-    descriptionLinkHref: "https://console.anthropic.com/account/keys",
-    descriptionLinkText: "console.anthropic.com",
-    descriptionSuffix:
-      ". Alternatively, the CLAUDE_CODE_OAUTH_TOKEN environment variable can be used.",
-  },
-  {
-    key: "google",
-    label: "Google API Key (Gemini)",
-    inputId: "google-key",
-    placeholder: "AIza...",
-    value: google.value,
-    setValue: google.setValue,
-    showValue: google.show,
-    setShowValue: google.setShow,
-    hasStoredKey: apiKeys.google,
-    inputTestId: "google-api-key-input",
-    toggleTestId: "toggle-google-visibility",
-    testButton: {
-      onClick: google.onTest,
-      disabled: !google.value || google.testing,
-      loading: google.testing,
-      testId: "test-gemini-connection",
-    },
-    result: google.result,
-    resultTestId: "gemini-test-connection-result",
-    resultMessageTestId: "gemini-test-connection-message",
-    descriptionPrefix:
-      "Used for Gemini AI features (including image/design prompts). Get your key at",
-    descriptionLinkHref: "https://makersuite.google.com/app/apikey",
-    descriptionLinkText: "makersuite.google.com",
-  },
-];

apps/app/src/config/model-config.ts

@@ -1,93 +0,0 @@
-/**
- * Model Configuration - Centralized model settings for the app
- *
- * Models can be overridden via environment variables:
- * - AUTOMAKER_MODEL_CHAT: Model for chat interactions
- * - AUTOMAKER_MODEL_DEFAULT: Fallback model for all operations
- */
-
-/**
- * Claude model aliases for convenience
- */
-export const CLAUDE_MODEL_MAP: Record<string, string> = {
-  haiku: "claude-haiku-4-5",
-  sonnet: "claude-sonnet-4-20250514",
-  opus: "claude-opus-4-5-20251101",
-} as const;
-
-/**
- * Default models per use case
- */
-export const DEFAULT_MODELS = {
-  chat: "claude-opus-4-5-20251101",
-  default: "claude-opus-4-5-20251101",
-} as const;
-
-/**
- * Resolve a model alias to a full model string
- */
-export function resolveModelString(
-  modelKey?: string,
-  defaultModel: string = DEFAULT_MODELS.default
-): string {
-  if (!modelKey) {
-    return defaultModel;
-  }
-
-  // Full Claude model string - pass through
-  if (modelKey.includes("claude-")) {
-    return modelKey;
-  }
-
-  // Check alias map
-  const resolved = CLAUDE_MODEL_MAP[modelKey];
-  if (resolved) {
-    return resolved;
-  }
-
-  // Unknown key - use default
-  return defaultModel;
-}
-
-/**
- * Get the model for chat operations
- *
- * Priority:
- * 1. Explicit model parameter
- * 2. AUTOMAKER_MODEL_CHAT environment variable
- * 3. AUTOMAKER_MODEL_DEFAULT environment variable
- * 4. Default chat model
- */
-export function getChatModel(explicitModel?: string): string {
-  if (explicitModel) {
-    return resolveModelString(explicitModel);
-  }
-
-  const envModel =
-    process.env.AUTOMAKER_MODEL_CHAT || process.env.AUTOMAKER_MODEL_DEFAULT;
-
-  if (envModel) {
-    return resolveModelString(envModel);
-  }
-
-  return DEFAULT_MODELS.chat;
-}
-
-/**
- * Default allowed tools for chat interactions
- */
-export const CHAT_TOOLS = [
-  "Read",
-  "Write",
-  "Edit",
-  "Glob",
-  "Grep",
-  "Bash",
-  "WebSearch",
-  "WebFetch",
-] as const;
-
-/**
- * Default max turns for chat
- */
-export const CHAT_MAX_TURNS = 1000;

apps/app/src/config/terminal-themes.ts

@@ -1,393 +0,0 @@
-/**
- * Terminal themes that match the app themes
- * Each theme provides colors for xterm.js terminal emulator
- */
-
-import type { ThemeMode } from "@/store/app-store";
-
-export interface TerminalTheme {
-  background: string;
-  foreground: string;
-  cursor: string;
-  cursorAccent: string;
-  selectionBackground: string;
-  selectionForeground?: string;
-  black: string;
-  red: string;
-  green: string;
-  yellow: string;
-  blue: string;
-  magenta: string;
-  cyan: string;
-  white: string;
-  brightBlack: string;
-  brightRed: string;
-  brightGreen: string;
-  brightYellow: string;
-  brightBlue: string;
-  brightMagenta: string;
-  brightCyan: string;
-  brightWhite: string;
-}
-
-// Dark theme (default)
-const darkTheme: TerminalTheme = {
-  background: "#0a0a0a",
-  foreground: "#d4d4d4",
-  cursor: "#d4d4d4",
-  cursorAccent: "#0a0a0a",
-  selectionBackground: "#264f78",
-  black: "#1e1e1e",
-  red: "#f44747",
-  green: "#6a9955",
-  yellow: "#dcdcaa",
-  blue: "#569cd6",
-  magenta: "#c586c0",
-  cyan: "#4ec9b0",
-  white: "#d4d4d4",
-  brightBlack: "#808080",
-  brightRed: "#f44747",
-  brightGreen: "#6a9955",
-  brightYellow: "#dcdcaa",
-  brightBlue: "#569cd6",
-  brightMagenta: "#c586c0",
-  brightCyan: "#4ec9b0",
-  brightWhite: "#ffffff",
-};
-
-// Light theme
-const lightTheme: TerminalTheme = {
-  background: "#ffffff",
-  foreground: "#383a42",
-  cursor: "#383a42",
-  cursorAccent: "#ffffff",
-  selectionBackground: "#add6ff",
-  black: "#383a42",
-  red: "#e45649",
-  green: "#50a14f",
-  yellow: "#c18401",
-  blue: "#4078f2",
-  magenta: "#a626a4",
-  cyan: "#0184bc",
-  white: "#fafafa",
-  brightBlack: "#4f525e",
-  brightRed: "#e06c75",
-  brightGreen: "#98c379",
-  brightYellow: "#e5c07b",
-  brightBlue: "#61afef",
-  brightMagenta: "#c678dd",
-  brightCyan: "#56b6c2",
-  brightWhite: "#ffffff",
-};
-
-// Retro / Cyberpunk theme - neon green on black
-const retroTheme: TerminalTheme = {
-  background: "#000000",
-  foreground: "#39ff14",
-  cursor: "#39ff14",
-  cursorAccent: "#000000",
-  selectionBackground: "#39ff14",
-  selectionForeground: "#000000",
-  black: "#000000",
-  red: "#ff0055",
-  green: "#39ff14",
-  yellow: "#ffff00",
-  blue: "#00ffff",
-  magenta: "#ff00ff",
-  cyan: "#00ffff",
-  white: "#39ff14",
-  brightBlack: "#555555",
-  brightRed: "#ff5555",
-  brightGreen: "#55ff55",
-  brightYellow: "#ffff55",
-  brightBlue: "#55ffff",
-  brightMagenta: "#ff55ff",
-  brightCyan: "#55ffff",
-  brightWhite: "#ffffff",
-};
-
-// Dracula theme
-const draculaTheme: TerminalTheme = {
-  background: "#282a36",
-  foreground: "#f8f8f2",
-  cursor: "#f8f8f2",
-  cursorAccent: "#282a36",
-  selectionBackground: "#44475a",
-  black: "#21222c",
-  red: "#ff5555",
-  green: "#50fa7b",
-  yellow: "#f1fa8c",
-  blue: "#bd93f9",
-  magenta: "#ff79c6",
-  cyan: "#8be9fd",
-  white: "#f8f8f2",
-  brightBlack: "#6272a4",
-  brightRed: "#ff6e6e",
-  brightGreen: "#69ff94",
-  brightYellow: "#ffffa5",
-  brightBlue: "#d6acff",
-  brightMagenta: "#ff92df",
-  brightCyan: "#a4ffff",
-  brightWhite: "#ffffff",
-};
-
-// Nord theme
-const nordTheme: TerminalTheme = {
-  background: "#2e3440",
-  foreground: "#d8dee9",
-  cursor: "#d8dee9",
-  cursorAccent: "#2e3440",
-  selectionBackground: "#434c5e",
-  black: "#3b4252",
-  red: "#bf616a",
-  green: "#a3be8c",
-  yellow: "#ebcb8b",
-  blue: "#81a1c1",
-  magenta: "#b48ead",
-  cyan: "#88c0d0",
-  white: "#e5e9f0",
-  brightBlack: "#4c566a",
-  brightRed: "#bf616a",
-  brightGreen: "#a3be8c",
-  brightYellow: "#ebcb8b",
-  brightBlue: "#81a1c1",
-  brightMagenta: "#b48ead",
-  brightCyan: "#8fbcbb",
-  brightWhite: "#eceff4",
-};
-
-// Monokai theme
-const monokaiTheme: TerminalTheme = {
-  background: "#272822",
-  foreground: "#f8f8f2",
-  cursor: "#f8f8f2",
-  cursorAccent: "#272822",
-  selectionBackground: "#49483e",
-  black: "#272822",
-  red: "#f92672",
-  green: "#a6e22e",
-  yellow: "#f4bf75",
-  blue: "#66d9ef",
-  magenta: "#ae81ff",
-  cyan: "#a1efe4",
-  white: "#f8f8f2",
-  brightBlack: "#75715e",
-  brightRed: "#f92672",
-  brightGreen: "#a6e22e",
-  brightYellow: "#f4bf75",
-  brightBlue: "#66d9ef",
-  brightMagenta: "#ae81ff",
-  brightCyan: "#a1efe4",
-  brightWhite: "#f9f8f5",
-};
-
-// Tokyo Night theme
-const tokyonightTheme: TerminalTheme = {
-  background: "#1a1b26",
-  foreground: "#a9b1d6",
-  cursor: "#c0caf5",
-  cursorAccent: "#1a1b26",
-  selectionBackground: "#33467c",
-  black: "#15161e",
-  red: "#f7768e",
-  green: "#9ece6a",
-  yellow: "#e0af68",
-  blue: "#7aa2f7",
-  magenta: "#bb9af7",
-  cyan: "#7dcfff",
-  white: "#a9b1d6",
-  brightBlack: "#414868",
-  brightRed: "#f7768e",
-  brightGreen: "#9ece6a",
-  brightYellow: "#e0af68",
-  brightBlue: "#7aa2f7",
-  brightMagenta: "#bb9af7",
-  brightCyan: "#7dcfff",
-  brightWhite: "#c0caf5",
-};
-
-// Solarized Dark theme
-const solarizedTheme: TerminalTheme = {
-  background: "#002b36",
-  foreground: "#839496",
-  cursor: "#839496",
-  cursorAccent: "#002b36",
-  selectionBackground: "#073642",
-  black: "#073642",
-  red: "#dc322f",
-  green: "#859900",
-  yellow: "#b58900",
-  blue: "#268bd2",
-  magenta: "#d33682",
-  cyan: "#2aa198",
-  white: "#eee8d5",
-  brightBlack: "#002b36",
-  brightRed: "#cb4b16",
-  brightGreen: "#586e75",
-  brightYellow: "#657b83",
-  brightBlue: "#839496",
-  brightMagenta: "#6c71c4",
-  brightCyan: "#93a1a1",
-  brightWhite: "#fdf6e3",
-};
-
-// Gruvbox Dark theme
-const gruvboxTheme: TerminalTheme = {
-  background: "#282828",
-  foreground: "#ebdbb2",
-  cursor: "#ebdbb2",
-  cursorAccent: "#282828",
-  selectionBackground: "#504945",
-  black: "#282828",
-  red: "#cc241d",
-  green: "#98971a",
-  yellow: "#d79921",
-  blue: "#458588",
-  magenta: "#b16286",
-  cyan: "#689d6a",
-  white: "#a89984",
-  brightBlack: "#928374",
-  brightRed: "#fb4934",
-  brightGreen: "#b8bb26",
-  brightYellow: "#fabd2f",
-  brightBlue: "#83a598",
-  brightMagenta: "#d3869b",
-  brightCyan: "#8ec07c",
-  brightWhite: "#ebdbb2",
-};
-
-// Catppuccin Mocha theme
-const catppuccinTheme: TerminalTheme = {
-  background: "#1e1e2e",
-  foreground: "#cdd6f4",
-  cursor: "#f5e0dc",
-  cursorAccent: "#1e1e2e",
-  selectionBackground: "#45475a",
-  black: "#45475a",
-  red: "#f38ba8",
-  green: "#a6e3a1",
-  yellow: "#f9e2af",
-  blue: "#89b4fa",
-  magenta: "#cba6f7",
-  cyan: "#94e2d5",
-  white: "#bac2de",
-  brightBlack: "#585b70",
-  brightRed: "#f38ba8",
-  brightGreen: "#a6e3a1",
-  brightYellow: "#f9e2af",
-  brightBlue: "#89b4fa",
-  brightMagenta: "#cba6f7",
-  brightCyan: "#94e2d5",
-  brightWhite: "#a6adc8",
-};
-
-// One Dark theme
-const onedarkTheme: TerminalTheme = {
-  background: "#282c34",
-  foreground: "#abb2bf",
-  cursor: "#528bff",
-  cursorAccent: "#282c34",
-  selectionBackground: "#3e4451",
-  black: "#282c34",
-  red: "#e06c75",
-  green: "#98c379",
-  yellow: "#e5c07b",
-  blue: "#61afef",
-  magenta: "#c678dd",
-  cyan: "#56b6c2",
-  white: "#abb2bf",
-  brightBlack: "#5c6370",
-  brightRed: "#e06c75",
-  brightGreen: "#98c379",
-  brightYellow: "#e5c07b",
-  brightBlue: "#61afef",
-  brightMagenta: "#c678dd",
-  brightCyan: "#56b6c2",
-  brightWhite: "#ffffff",
-};
-
-// Synthwave '84 theme
-const synthwaveTheme: TerminalTheme = {
-  background: "#262335",
-  foreground: "#ffffff",
-  cursor: "#ff7edb",
-  cursorAccent: "#262335",
-  selectionBackground: "#463465",
-  black: "#262335",
-  red: "#fe4450",
-  green: "#72f1b8",
-  yellow: "#fede5d",
-  blue: "#03edf9",
-  magenta: "#ff7edb",
-  cyan: "#03edf9",
-  white: "#ffffff",
-  brightBlack: "#614d85",
-  brightRed: "#fe4450",
-  brightGreen: "#72f1b8",
-  brightYellow: "#f97e72",
-  brightBlue: "#03edf9",
-  brightMagenta: "#ff7edb",
-  brightCyan: "#03edf9",
-  brightWhite: "#ffffff",
-};
-
-// Red theme - Dark theme with red accents
-const redTheme: TerminalTheme = {
-  background: "#1a0a0a",
-  foreground: "#c8b0b0",
-  cursor: "#ff4444",
-  cursorAccent: "#1a0a0a",
-  selectionBackground: "#5a2020",
-  black: "#2a1010",
-  red: "#ff4444",
-  green: "#6a9a6a",
-  yellow: "#ccaa55",
-  blue: "#6688aa",
-  magenta: "#aa5588",
-  cyan: "#558888",
-  white: "#b0a0a0",
-  brightBlack: "#6a4040",
-  brightRed: "#ff6666",
-  brightGreen: "#88bb88",
-  brightYellow: "#ddbb66",
-  brightBlue: "#88aacc",
-  brightMagenta: "#cc77aa",
-  brightCyan: "#77aaaa",
-  brightWhite: "#d0c0c0",
-};
-
-// Theme mapping
-const terminalThemes: Record<ThemeMode, TerminalTheme> = {
-  light: lightTheme,
-  dark: darkTheme,
-  system: darkTheme, // Will be resolved at runtime
-  retro: retroTheme,
-  dracula: draculaTheme,
-  nord: nordTheme,
-  monokai: monokaiTheme,
-  tokyonight: tokyonightTheme,
-  solarized: solarizedTheme,
-  gruvbox: gruvboxTheme,
-  catppuccin: catppuccinTheme,
-  onedark: onedarkTheme,
-  synthwave: synthwaveTheme,
-  red: redTheme,
-};
-
-/**
- * Get terminal theme for the given app theme
- * For "system" theme, it checks the user's system preference
- */
-export function getTerminalTheme(theme: ThemeMode): TerminalTheme {
-  if (theme === "system") {
-    // Check system preference
-    if (typeof window !== "undefined") {
-      const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-      return prefersDark ? darkTheme : lightTheme;
-    }
-    return darkTheme; // Default to dark for SSR
-  }
-  return terminalThemes[theme] || darkTheme;
-}
-
-export default terminalThemes;

apps/app/src/config/theme-options.ts

@@ -1,95 +0,0 @@
-import {
-  type LucideIcon,
-  Atom,
-  Cat,
-  Eclipse,
-  Flame,
-  Ghost,
-  Heart,
-  Moon,
-  Radio,
-  Snowflake,
-  Sparkles,
-  Sun,
-  Terminal,
-  Trees,
-} from "lucide-react";
-import { Theme } from "@/components/views/settings-view/shared/types";
-
-export interface ThemeOption {
-  value: Theme;
-  label: string;
-  Icon: LucideIcon;
-  testId: string;
-}
-
-export const themeOptions: ReadonlyArray<ThemeOption> = [
-  { value: "dark", label: "Dark", Icon: Moon, testId: "dark-mode-button" },
-  { value: "light", label: "Light", Icon: Sun, testId: "light-mode-button" },
-  {
-    value: "retro",
-    label: "Retro",
-    Icon: Terminal,
-    testId: "retro-mode-button",
-  },
-  {
-    value: "dracula",
-    label: "Dracula",
-    Icon: Ghost,
-    testId: "dracula-mode-button",
-  },
-  {
-    value: "nord",
-    label: "Nord",
-    Icon: Snowflake,
-    testId: "nord-mode-button",
-  },
-  {
-    value: "monokai",
-    label: "Monokai",
-    Icon: Flame,
-    testId: "monokai-mode-button",
-  },
-  {
-    value: "tokyonight",
-    label: "Tokyo Night",
-    Icon: Sparkles,
-    testId: "tokyonight-mode-button",
-  },
-  {
-    value: "solarized",
-    label: "Solarized",
-    Icon: Eclipse,
-    testId: "solarized-mode-button",
-  },
-  {
-    value: "gruvbox",
-    label: "Gruvbox",
-    Icon: Trees,
-    testId: "gruvbox-mode-button",
-  },
-  {
-    value: "catppuccin",
-    label: "Catppuccin",
-    Icon: Cat,
-    testId: "catppuccin-mode-button",
-  },
-  {
-    value: "onedark",
-    label: "One Dark",
-    Icon: Atom,
-    testId: "onedark-mode-button",
-  },
-  {
-    value: "synthwave",
-    label: "Synthwave",
-    Icon: Radio,
-    testId: "synthwave-mode-button",
-  },
-  {
-    value: "red",
-    label: "Red",
-    Icon: Heart,
-    testId: "red-mode-button",
-  },
-];

apps/app/src/hooks/use-auto-mode.ts

@@ -1,391 +0,0 @@
-import { useEffect, useCallback, useMemo } from "react";
-import { useShallow } from "zustand/react/shallow";
-import { useAppStore } from "@/store/app-store";
-import { getElectronAPI } from "@/lib/electron";
-import type { AutoModeEvent } from "@/types/electron";
-
-/**
- * Hook for managing auto mode (scoped per project)
- */
-export function useAutoMode() {
-  const {
-    autoModeByProject,
-    setAutoModeRunning,
-    addRunningTask,
-    removeRunningTask,
-    clearRunningTasks,
-    currentProject,
-    addAutoModeActivity,
-    maxConcurrency,
-    projects,
-  } = useAppStore(
-    useShallow((state) => ({
-      autoModeByProject: state.autoModeByProject,
-      setAutoModeRunning: state.setAutoModeRunning,
-      addRunningTask: state.addRunningTask,
-      removeRunningTask: state.removeRunningTask,
-      clearRunningTasks: state.clearRunningTasks,
-      currentProject: state.currentProject,
-      addAutoModeActivity: state.addAutoModeActivity,
-      maxConcurrency: state.maxConcurrency,
-      projects: state.projects,
-    }))
-  );
-
-  // Helper to look up project ID from path
-  const getProjectIdFromPath = useCallback(
-    (path: string): string | undefined => {
-      const project = projects.find((p) => p.path === path);
-      return project?.id;
-    },
-    [projects]
-  );
-
-  // Get project-specific auto mode state
-  const projectId = currentProject?.id;
-  const projectAutoModeState = useMemo(() => {
-    if (!projectId) return { isRunning: false, runningTasks: [] };
-    return (
-      autoModeByProject[projectId] || { isRunning: false, runningTasks: [] }
-    );
-  }, [autoModeByProject, projectId]);
-
-  const isAutoModeRunning = projectAutoModeState.isRunning;
-  const runningAutoTasks = projectAutoModeState.runningTasks;
-
-  // Check if we can start a new task based on concurrency limit
-  const canStartNewTask = runningAutoTasks.length < maxConcurrency;
-
-  // Handle auto mode events - listen globally for all projects
-  useEffect(() => {
-    const api = getElectronAPI();
-    if (!api?.autoMode) return;
-
-    const unsubscribe = api.autoMode.onEvent((event: AutoModeEvent) => {
-      console.log("[AutoMode Event]", event);
-
-      // Events include projectPath from backend - use it to look up project ID
-      // Fall back to current projectId if not provided in event
-      let eventProjectId: string | undefined;
-      if ("projectPath" in event && event.projectPath) {
-        eventProjectId = getProjectIdFromPath(event.projectPath);
-      }
-      if (!eventProjectId && "projectId" in event && event.projectId) {
-        eventProjectId = event.projectId;
-      }
-      if (!eventProjectId) {
-        eventProjectId = projectId;
-      }
-
-      // Skip event if we couldn't determine the project
-      if (!eventProjectId) {
-        console.warn(
-          "[AutoMode] Could not determine project for event:",
-          event
-        );
-        return;
-      }
-
-      switch (event.type) {
-        case "auto_mode_feature_start":
-          if (event.featureId) {
-            addRunningTask(eventProjectId, event.featureId);
-            addAutoModeActivity({
-              featureId: event.featureId,
-              type: "start",
-              message: `Started working on feature`,
-            });
-          }
-          break;
-
-        case "auto_mode_feature_complete":
-          // Feature completed - remove from running tasks and UI will reload features on its own
-          if (event.featureId) {
-            console.log(
-              "[AutoMode] Feature completed:",
-              event.featureId,
-              "passes:",
-              event.passes
-            );
-            removeRunningTask(eventProjectId, event.featureId);
-            addAutoModeActivity({
-              featureId: event.featureId,
-              type: "complete",
-              message: event.passes
-                ? "Feature completed successfully"
-                : "Feature completed with failures",
-              passes: event.passes,
-            });
-          }
-          break;
-
-        case "auto_mode_stopped":
-          // Auto mode was explicitly stopped (by user or error)
-          setAutoModeRunning(eventProjectId, false);
-          clearRunningTasks(eventProjectId);
-          console.log("[AutoMode] Auto mode stopped");
-          break;
-
-        case "auto_mode_started":
-          // Auto mode started - ensure UI reflects running state
-          console.log("[AutoMode] Auto mode started:", event.message);
-          break;
-
-        case "auto_mode_idle":
-          // Auto mode is running but has no pending features to pick up
-          // This is NOT a stop - auto mode keeps running and will pick up new features
-          console.log("[AutoMode] Auto mode idle - waiting for new features");
-          break;
-
-        case "auto_mode_complete":
-          // Legacy event - only handle if it looks like a stop (for backwards compatibility)
-          if (event.message === "Auto mode stopped") {
-            setAutoModeRunning(eventProjectId, false);
-            clearRunningTasks(eventProjectId);
-            console.log("[AutoMode] Auto mode stopped (legacy event)");
-          }
-          break;
-
-        case "auto_mode_error":
-          console.error("[AutoMode Error]", event.error);
-          if (event.featureId && event.error) {
-            // Check for authentication errors and provide a more helpful message
-            const isAuthError =
-              event.errorType === "authentication" ||
-              event.error.includes("Authentication failed") ||
-              event.error.includes("Invalid API key");
-
-            const errorMessage = isAuthError
-              ? `Authentication failed: Please check your API key in Settings or run 'claude login' in terminal to re-authenticate.`
-              : event.error;
-
-            addAutoModeActivity({
-              featureId: event.featureId,
-              type: "error",
-              message: errorMessage,
-              errorType: isAuthError ? "authentication" : "execution",
-            });
-
-            // Remove the task from running since it failed
-            if (eventProjectId) {
-              removeRunningTask(eventProjectId, event.featureId);
-            }
-          }
-          break;
-
-        case "auto_mode_progress":
-          // Log progress updates (throttle to avoid spam)
-          if (event.featureId && event.content && event.content.length > 10) {
-            addAutoModeActivity({
-              featureId: event.featureId,
-              type: "progress",
-              message: event.content.substring(0, 200), // Limit message length
-            });
-          }
-          break;
-
-        case "auto_mode_tool":
-          // Log tool usage
-          if (event.featureId && event.tool) {
-            addAutoModeActivity({
-              featureId: event.featureId,
-              type: "tool",
-              message: `Using tool: ${event.tool}`,
-              tool: event.tool,
-            });
-          }
-          break;
-
-        case "auto_mode_phase":
-          // Log phase transitions (Planning, Action, Verification)
-          if (event.featureId && event.phase && event.message) {
-            console.log(
-              `[AutoMode] Phase: ${event.phase} for ${event.featureId}`
-            );
-            addAutoModeActivity({
-              featureId: event.featureId,
-              type: event.phase,
-              message: event.message,
-              phase: event.phase,
-            });
-          }
-          break;
-      }
-    });
-
-    return unsubscribe;
-  }, [
-    projectId,
-    addRunningTask,
-    removeRunningTask,
-    clearRunningTasks,
-    setAutoModeRunning,
-    addAutoModeActivity,
-    getProjectIdFromPath,
-  ]);
-
-  // Restore auto mode for all projects that were running when app was closed
-  // This runs once on mount to restart auto loops for persisted running states
-  useEffect(() => {
-    const api = getElectronAPI();
-    if (!api?.autoMode) return;
-
-    // Find all projects that have auto mode marked as running
-    const projectsToRestart: Array<{ projectId: string; projectPath: string }> =
-      [];
-    for (const [projectId, state] of Object.entries(autoModeByProject)) {
-      if (state.isRunning) {
-        // Find the project path for this project ID
-        const project = projects.find((p) => p.id === projectId);
-        if (project) {
-          projectsToRestart.push({ projectId, projectPath: project.path });
-        }
-      }
-    }
-
-    // Restart auto mode for each project
-    for (const { projectId, projectPath } of projectsToRestart) {
-      console.log(`[AutoMode] Restoring auto mode for project: ${projectPath}`);
-      api.autoMode
-        .start(projectPath, maxConcurrency)
-        .then((result) => {
-          if (!result.success) {
-            console.error(
-              `[AutoMode] Failed to restore auto mode for ${projectPath}:`,
-              result.error
-            );
-            // Mark as not running if we couldn't restart
-            setAutoModeRunning(projectId, false);
-          } else {
-            console.log(`[AutoMode] Restored auto mode for ${projectPath}`);
-          }
-        })
-        .catch((error) => {
-          console.error(
-            `[AutoMode] Error restoring auto mode for ${projectPath}:`,
-            error
-          );
-          setAutoModeRunning(projectId, false);
-        });
-    }
-    // Only run once on mount - intentionally empty dependency array
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  // Start auto mode
-  const start = useCallback(async () => {
-    if (!currentProject) {
-      console.error("No project selected");
-      return;
-    }
-
-    try {
-      const api = getElectronAPI();
-      if (!api?.autoMode) {
-        throw new Error("Auto mode API not available");
-      }
-
-      const result = await api.autoMode.start(
-        currentProject.path,
-        maxConcurrency
-      );
-
-      if (result.success) {
-        setAutoModeRunning(currentProject.id, true);
-        console.log(
-          `[AutoMode] Started successfully with maxConcurrency: ${maxConcurrency}`
-        );
-      } else {
-        console.error("[AutoMode] Failed to start:", result.error);
-        throw new Error(result.error || "Failed to start auto mode");
-      }
-    } catch (error) {
-      console.error("[AutoMode] Error starting:", error);
-      if (currentProject) {
-        setAutoModeRunning(currentProject.id, false);
-      }
-      throw error;
-    }
-  }, [currentProject, setAutoModeRunning, maxConcurrency]);
-
-  // Stop auto mode - only turns off the toggle, running tasks continue
-  const stop = useCallback(async () => {
-    if (!currentProject) {
-      console.error("No project selected");
-      return;
-    }
-
-    try {
-      const api = getElectronAPI();
-      if (!api?.autoMode) {
-        throw new Error("Auto mode API not available");
-      }
-
-      const result = await api.autoMode.stop(currentProject.path);
-
-      if (result.success) {
-        setAutoModeRunning(currentProject.id, false);
-        // NOTE: We intentionally do NOT clear running tasks here.
-        // Stopping auto mode only turns off the toggle to prevent new features
-        // from being picked up. Running tasks will complete naturally and be
-        // removed via the auto_mode_feature_complete event.
-        console.log(
-          "[AutoMode] Stopped successfully - running tasks will continue"
-        );
-      } else {
-        console.error("[AutoMode] Failed to stop:", result.error);
-        throw new Error(result.error || "Failed to stop auto mode");
-      }
-    } catch (error) {
-      console.error("[AutoMode] Error stopping:", error);
-      throw error;
-    }
-  }, [currentProject, setAutoModeRunning]);
-
-  // Stop a specific feature
-  const stopFeature = useCallback(
-    async (featureId: string) => {
-      if (!currentProject) {
-        console.error("No project selected");
-        return;
-      }
-
-      try {
-        const api = getElectronAPI();
-        if (!api?.autoMode?.stopFeature) {
-          throw new Error("Stop feature API not available");
-        }
-
-        const result = await api.autoMode.stopFeature(featureId);
-
-        if (result.success) {
-          removeRunningTask(currentProject.id, featureId);
-          console.log("[AutoMode] Feature stopped successfully:", featureId);
-          addAutoModeActivity({
-            featureId,
-            type: "complete",
-            message: "Feature stopped by user",
-            passes: false,
-          });
-        } else {
-          console.error("[AutoMode] Failed to stop feature:", result.error);
-          throw new Error(result.error || "Failed to stop feature");
-        }
-      } catch (error) {
-        console.error("[AutoMode] Error stopping feature:", error);
-        throw error;
-      }
-    },
-    [currentProject, removeRunningTask, addAutoModeActivity]
-  );
-
-  return {
-    isRunning: isAutoModeRunning,
-    runningTasks: runningAutoTasks,
-    maxConcurrency,
-    canStartNewTask,
-    start,
-    stop,
-    stopFeature,
-  };
-}

apps/app/src/hooks/use-keyboard-shortcuts.ts

@@ -1,149 +0,0 @@
-"use client";
-
-import { useEffect, useCallback } from "react";
-import { useAppStore, parseShortcut } from "@/store/app-store";
-
-export interface KeyboardShortcut {
-  key: string;  // Can be simple "K" or with modifiers "Shift+N", "Cmd+K"
-  action: () => void;
-  description?: string;
-}
-
-/**
- * Check if the currently focused element is an input, textarea, or contenteditable element
- * or if an autocomplete/typeahead dropdown is open
- */
-function isInputFocused(): boolean {
-  const activeElement = document.activeElement;
-  if (!activeElement) return false;
-
-  // Check if it's a form input element
-  const tagName = activeElement.tagName.toLowerCase();
-  if (tagName === "input" || tagName === "textarea" || tagName === "select") {
-    return true;
-  }
-
-  // Check if it's a contenteditable element
-  if (activeElement.getAttribute("contenteditable") === "true") {
-    return true;
-  }
-
-  // Check if it has a role of textbox or searchbox
-  const role = activeElement.getAttribute("role");
-  if (role === "textbox" || role === "searchbox" || role === "combobox") {
-    return true;
-  }
-
-  // Check if focus is inside an xterm terminal (they use a hidden textarea)
-  const xtermContainer = activeElement.closest(".xterm");
-  if (xtermContainer) {
-    return true;
-  }
-
-  // Also check if any parent has data-terminal-container attribute
-  const terminalContainer = activeElement.closest("[data-terminal-container]");
-  if (terminalContainer) {
-    return true;
-  }
-
-  // Check for autocomplete/typeahead dropdowns being open
-  const autocompleteList = document.querySelector(
-    '[data-testid="category-autocomplete-list"]'
-  );
-  if (autocompleteList) {
-    return true;
-  }
-
-  // Check for any open dialogs
-  const dialog = document.querySelector('[role="dialog"][data-state="open"]');
-  if (dialog) {
-    return true;
-  }
-
-  // Check for project picker dropdown being open
-  const projectPickerDropdown = document.querySelector(
-    '[data-testid="project-picker-dropdown"]'
-  );
-  if (projectPickerDropdown) {
-    return true;
-  }
-
-  return false;
-}
-
-/**
- * Check if a keyboard event matches a shortcut definition
- */
-function matchesShortcut(event: KeyboardEvent, shortcutStr: string): boolean {
-  const shortcut = parseShortcut(shortcutStr);
-
-  // Check if the key matches (case-insensitive)
-  if (event.key.toLowerCase() !== shortcut.key.toLowerCase()) {
-    return false;
-  }
-
-  // Check modifier keys
-  const cmdCtrlPressed = event.metaKey || event.ctrlKey;
-  const shiftPressed = event.shiftKey;
-  const altPressed = event.altKey;
-
-  // If shortcut requires cmdCtrl, it must be pressed
-  if (shortcut.cmdCtrl && !cmdCtrlPressed) return false;
-  // If shortcut doesn't require cmdCtrl, it shouldn't be pressed
-  if (!shortcut.cmdCtrl && cmdCtrlPressed) return false;
-
-  // If shortcut requires shift, it must be pressed
-  if (shortcut.shift && !shiftPressed) return false;
-  // If shortcut doesn't require shift, it shouldn't be pressed
-  if (!shortcut.shift && shiftPressed) return false;
-
-  // If shortcut requires alt, it must be pressed
-  if (shortcut.alt && !altPressed) return false;
-  // If shortcut doesn't require alt, it shouldn't be pressed
-  if (!shortcut.alt && altPressed) return false;
-
-  return true;
-}
-
-/**
- * Hook to manage keyboard shortcuts
- * Shortcuts won't fire when user is typing in inputs, textareas, or when dialogs are open
- * Supports modifier keys: Shift, Cmd/Ctrl, Alt/Option
- */
-export function useKeyboardShortcuts(shortcuts: KeyboardShortcut[]) {
-  const handleKeyDown = useCallback(
-    (event: KeyboardEvent) => {
-      // Don't trigger shortcuts when typing in inputs
-      if (isInputFocused()) {
-        return;
-      }
-
-      // Find matching shortcut
-      const matchingShortcut = shortcuts.find(
-        (shortcut) => matchesShortcut(event, shortcut.key)
-      );
-
-      if (matchingShortcut) {
-        event.preventDefault();
-        matchingShortcut.action();
-      }
-    },
-    [shortcuts]
-  );
-
-  useEffect(() => {
-    window.addEventListener("keydown", handleKeyDown);
-    return () => {
-      window.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [handleKeyDown]);
-}
-
-/**
- * Hook to get current keyboard shortcuts from store
- * This replaces the static constants and allows customization
- */
-export function useKeyboardShortcutsConfig() {
-  const keyboardShortcuts = useAppStore((state) => state.keyboardShortcuts);
-  return keyboardShortcuts;
-}

apps/app/src/lib/http-api-client.ts

@@ -1,771 +0,0 @@
-/**
- * HTTP API Client for web mode
- *
- * This client provides the same API as the Electron IPC bridge,
- * but communicates with the backend server via HTTP/WebSocket.
- */
-
-import type {
-  ElectronAPI,
-  FileResult,
-  WriteResult,
-  ReaddirResult,
-  StatResult,
-  DialogResult,
-  SaveImageResult,
-  AutoModeAPI,
-  FeaturesAPI,
-  SuggestionsAPI,
-  SpecRegenerationAPI,
-  AutoModeEvent,
-  SuggestionsEvent,
-  SpecRegenerationEvent,
-  FeatureSuggestion,
-  SuggestionType,
-} from "./electron";
-import type { Message, SessionListItem } from "@/types/electron";
-import type { Feature } from "@/store/app-store";
-import type {
-  WorktreeAPI,
-  GitAPI,
-  ModelDefinition,
-  ProviderStatus,
-} from "@/types/electron";
-import { getGlobalFileBrowser } from "@/contexts/file-browser-context";
-
-// Server URL - configurable via environment variable
-const getServerUrl = (): string => {
-  if (typeof window !== "undefined") {
-    const envUrl = process.env.NEXT_PUBLIC_SERVER_URL;
-    if (envUrl) return envUrl;
-  }
-  return "http://localhost:3008";
-};
-
-// Get API key from environment variable
-const getApiKey = (): string | null => {
-  if (typeof window !== "undefined") {
-    return process.env.NEXT_PUBLIC_AUTOMAKER_API_KEY || null;
-  }
-  return null;
-};
-
-type EventType =
-  | "agent:stream"
-  | "auto-mode:event"
-  | "suggestions:event"
-  | "spec-regeneration:event";
-
-type EventCallback = (payload: unknown) => void;
-
-/**
- * HTTP API Client that implements ElectronAPI interface
- */
-export class HttpApiClient implements ElectronAPI {
-  private serverUrl: string;
-  private ws: WebSocket | null = null;
-  private eventCallbacks: Map<EventType, Set<EventCallback>> = new Map();
-  private reconnectTimer: NodeJS.Timeout | null = null;
-  private isConnecting = false;
-
-  constructor() {
-    this.serverUrl = getServerUrl();
-    this.connectWebSocket();
-  }
-
-  private connectWebSocket(): void {
-    if (
-      this.isConnecting ||
-      (this.ws && this.ws.readyState === WebSocket.OPEN)
-    ) {
-      return;
-    }
-
-    this.isConnecting = true;
-
-    try {
-      const wsUrl = this.serverUrl.replace(/^http/, "ws") + "/api/events";
-      this.ws = new WebSocket(wsUrl);
-
-      this.ws.onopen = () => {
-        console.log("[HttpApiClient] WebSocket connected");
-        this.isConnecting = false;
-        if (this.reconnectTimer) {
-          clearTimeout(this.reconnectTimer);
-          this.reconnectTimer = null;
-        }
-      };
-
-      this.ws.onmessage = (event) => {
-        try {
-          const data = JSON.parse(event.data);
-          const callbacks = this.eventCallbacks.get(data.type);
-          if (callbacks) {
-            callbacks.forEach((cb) => cb(data.payload));
-          }
-        } catch (error) {
-          console.error(
-            "[HttpApiClient] Failed to parse WebSocket message:",
-            error
-          );
-        }
-      };
-
-      this.ws.onclose = () => {
-        console.log("[HttpApiClient] WebSocket disconnected");
-        this.isConnecting = false;
-        this.ws = null;
-        // Attempt to reconnect after 5 seconds
-        if (!this.reconnectTimer) {
-          this.reconnectTimer = setTimeout(() => {
-            this.reconnectTimer = null;
-            this.connectWebSocket();
-          }, 5000);
-        }
-      };
-
-      this.ws.onerror = (error) => {
-        console.error("[HttpApiClient] WebSocket error:", error);
-        this.isConnecting = false;
-      };
-    } catch (error) {
-      console.error("[HttpApiClient] Failed to create WebSocket:", error);
-      this.isConnecting = false;
-    }
-  }
-
-  private subscribeToEvent(
-    type: EventType,
-    callback: EventCallback
-  ): () => void {
-    if (!this.eventCallbacks.has(type)) {
-      this.eventCallbacks.set(type, new Set());
-    }
-    this.eventCallbacks.get(type)!.add(callback);
-
-    // Ensure WebSocket is connected
-    this.connectWebSocket();
-
-    return () => {
-      const callbacks = this.eventCallbacks.get(type);
-      if (callbacks) {
-        callbacks.delete(callback);
-      }
-    };
-  }
-
-  private getHeaders(): Record<string, string> {
-    const headers: Record<string, string> = {
-      "Content-Type": "application/json",
-    };
-    const apiKey = getApiKey();
-    if (apiKey) {
-      headers["X-API-Key"] = apiKey;
-    }
-    return headers;
-  }
-
-  private async post<T>(endpoint: string, body?: unknown): Promise<T> {
-    const response = await fetch(`${this.serverUrl}${endpoint}`, {
-      method: "POST",
-      headers: this.getHeaders(),
-      body: body ? JSON.stringify(body) : undefined,
-    });
-    return response.json();
-  }
-
-  private async get<T>(endpoint: string): Promise<T> {
-    const headers = this.getHeaders();
-    const response = await fetch(`${this.serverUrl}${endpoint}`, { headers });
-    return response.json();
-  }
-
-  private async put<T>(endpoint: string, body?: unknown): Promise<T> {
-    const response = await fetch(`${this.serverUrl}${endpoint}`, {
-      method: "PUT",
-      headers: this.getHeaders(),
-      body: body ? JSON.stringify(body) : undefined,
-    });
-    return response.json();
-  }
-
-  private async httpDelete<T>(endpoint: string): Promise<T> {
-    const response = await fetch(`${this.serverUrl}${endpoint}`, {
-      method: "DELETE",
-      headers: this.getHeaders(),
-    });
-    return response.json();
-  }
-
-  // Basic operations
-  async ping(): Promise<string> {
-    const result = await this.get<{ status: string }>("/api/health");
-    return result.status === "ok" ? "pong" : "error";
-  }
-
-  async openExternalLink(
-    url: string
-  ): Promise<{ success: boolean; error?: string }> {
-    // Open in new tab
-    window.open(url, "_blank", "noopener,noreferrer");
-    return { success: true };
-  }
-
-  // File picker - uses server-side file browser dialog
-  async openDirectory(): Promise<DialogResult> {
-    const fileBrowser = getGlobalFileBrowser();
-
-    if (!fileBrowser) {
-      console.error("File browser not initialized");
-      return { canceled: true, filePaths: [] };
-    }
-
-    const path = await fileBrowser();
-
-    if (!path) {
-      return { canceled: true, filePaths: [] };
-    }
-
-    // Validate with server
-    const result = await this.post<{
-      success: boolean;
-      path?: string;
-      error?: string;
-    }>("/api/fs/validate-path", { filePath: path });
-
-    if (result.success && result.path) {
-      return { canceled: false, filePaths: [result.path] };
-    }
-
-    console.error("Invalid directory:", result.error);
-    return { canceled: true, filePaths: [] };
-  }
-
-  async openFile(options?: object): Promise<DialogResult> {
-    const fileBrowser = getGlobalFileBrowser();
-
-    if (!fileBrowser) {
-      console.error("File browser not initialized");
-      return { canceled: true, filePaths: [] };
-    }
-
-    // For now, use the same directory browser (could be enhanced for file selection)
-    const path = await fileBrowser();
-
-    if (!path) {
-      return { canceled: true, filePaths: [] };
-    }
-
-    const result = await this.post<{ success: boolean; exists: boolean }>(
-      "/api/fs/exists",
-      { filePath: path }
-    );
-
-    if (result.success && result.exists) {
-      return { canceled: false, filePaths: [path] };
-    }
-
-    console.error("File not found");
-    return { canceled: true, filePaths: [] };
-  }
-
-  // File system operations
-  async readFile(filePath: string): Promise<FileResult> {
-    return this.post("/api/fs/read", { filePath });
-  }
-
-  async writeFile(filePath: string, content: string): Promise<WriteResult> {
-    return this.post("/api/fs/write", { filePath, content });
-  }
-
-  async mkdir(dirPath: string): Promise<WriteResult> {
-    return this.post("/api/fs/mkdir", { dirPath });
-  }
-
-  async readdir(dirPath: string): Promise<ReaddirResult> {
-    return this.post("/api/fs/readdir", { dirPath });
-  }
-
-  async exists(filePath: string): Promise<boolean> {
-    const result = await this.post<{ success: boolean; exists: boolean }>(
-      "/api/fs/exists",
-      { filePath }
-    );
-    return result.exists;
-  }
-
-  async stat(filePath: string): Promise<StatResult> {
-    return this.post("/api/fs/stat", { filePath });
-  }
-
-  async deleteFile(filePath: string): Promise<WriteResult> {
-    return this.post("/api/fs/delete", { filePath });
-  }
-
-  async trashItem(filePath: string): Promise<WriteResult> {
-    // In web mode, trash is just delete
-    return this.deleteFile(filePath);
-  }
-
-  async getPath(name: string): Promise<string> {
-    // Server provides data directory
-    if (name === "userData") {
-      const result = await this.get<{ dataDir: string }>(
-        "/api/health/detailed"
-      );
-      return result.dataDir || "/data";
-    }
-    return `/data/${name}`;
-  }
-
-  async saveImageToTemp(
-    data: string,
-    filename: string,
-    mimeType: string,
-    projectPath?: string
-  ): Promise<SaveImageResult> {
-    return this.post("/api/fs/save-image", {
-      data,
-      filename,
-      mimeType,
-      projectPath,
-    });
-  }
-
-  async saveBoardBackground(
-    data: string,
-    filename: string,
-    mimeType: string,
-    projectPath: string
-  ): Promise<{ success: boolean; path?: string; error?: string }> {
-    return this.post("/api/fs/save-board-background", {
-      data,
-      filename,
-      mimeType,
-      projectPath,
-    });
-  }
-
-  async deleteBoardBackground(
-    projectPath: string
-  ): Promise<{ success: boolean; error?: string }> {
-    return this.post("/api/fs/delete-board-background", { projectPath });
-  }
-
-  // CLI checks - server-side
-  async checkClaudeCli(): Promise<{
-    success: boolean;
-    status?: string;
-    method?: string;
-    version?: string;
-    path?: string;
-    recommendation?: string;
-    installCommands?: {
-      macos?: string;
-      windows?: string;
-      linux?: string;
-      npm?: string;
-    };
-    error?: string;
-  }> {
-    return this.get("/api/setup/claude-status");
-  }
-
-  // Model API
-  model = {
-    getAvailable: async (): Promise<{
-      success: boolean;
-      models?: ModelDefinition[];
-      error?: string;
-    }> => {
-      return this.get("/api/models/available");
-    },
-    checkProviders: async (): Promise<{
-      success: boolean;
-      providers?: Record<string, ProviderStatus>;
-      error?: string;
-    }> => {
-      return this.get("/api/models/providers");
-    },
-  };
-
-  // Setup API
-  setup = {
-    getClaudeStatus: (): Promise<{
-      success: boolean;
-      status?: string;
-      installed?: boolean;
-      method?: string;
-      version?: string;
-      path?: string;
-      auth?: {
-        authenticated: boolean;
-        method: string;
-        hasCredentialsFile?: boolean;
-        hasToken?: boolean;
-        hasStoredOAuthToken?: boolean;
-        hasStoredApiKey?: boolean;
-        hasEnvApiKey?: boolean;
-        hasEnvOAuthToken?: boolean;
-        hasCliAuth?: boolean;
-        hasRecentActivity?: boolean;
-      };
-      error?: string;
-    }> => this.get("/api/setup/claude-status"),
-
-    installClaude: (): Promise<{
-      success: boolean;
-      message?: string;
-      error?: string;
-    }> => this.post("/api/setup/install-claude"),
-
-    authClaude: (): Promise<{
-      success: boolean;
-      token?: string;
-      requiresManualAuth?: boolean;
-      terminalOpened?: boolean;
-      command?: string;
-      error?: string;
-      message?: string;
-      output?: string;
-    }> => this.post("/api/setup/auth-claude"),
-
-    storeApiKey: (
-      provider: string,
-      apiKey: string
-    ): Promise<{
-      success: boolean;
-      error?: string;
-    }> => this.post("/api/setup/store-api-key", { provider, apiKey }),
-
-    getApiKeys: (): Promise<{
-      success: boolean;
-      hasAnthropicKey: boolean;
-      hasGoogleKey: boolean;
-    }> => this.get("/api/setup/api-keys"),
-
-    getPlatform: (): Promise<{
-      success: boolean;
-      platform: string;
-      arch: string;
-      homeDir: string;
-      isWindows: boolean;
-      isMac: boolean;
-      isLinux: boolean;
-    }> => this.get("/api/setup/platform"),
-
-    onInstallProgress: (callback: (progress: unknown) => void) => {
-      return this.subscribeToEvent("agent:stream", callback);
-    },
-
-    onAuthProgress: (callback: (progress: unknown) => void) => {
-      return this.subscribeToEvent("agent:stream", callback);
-    },
-  };
-
-  // Features API
-  features: FeaturesAPI = {
-    getAll: (projectPath: string) =>
-      this.post("/api/features/list", { projectPath }),
-    get: (projectPath: string, featureId: string) =>
-      this.post("/api/features/get", { projectPath, featureId }),
-    create: (projectPath: string, feature: Feature) =>
-      this.post("/api/features/create", { projectPath, feature }),
-    update: (
-      projectPath: string,
-      featureId: string,
-      updates: Partial<Feature>
-    ) => this.post("/api/features/update", { projectPath, featureId, updates }),
-    delete: (projectPath: string, featureId: string) =>
-      this.post("/api/features/delete", { projectPath, featureId }),
-    getAgentOutput: (projectPath: string, featureId: string) =>
-      this.post("/api/features/agent-output", { projectPath, featureId }),
-  };
-
-  // Auto Mode API
-  autoMode: AutoModeAPI = {
-    start: (projectPath: string, maxConcurrency?: number) =>
-      this.post("/api/auto-mode/start", { projectPath, maxConcurrency }),
-    stop: (projectPath: string) =>
-      this.post("/api/auto-mode/stop", { projectPath }),
-    stopFeature: (featureId: string) =>
-      this.post("/api/auto-mode/stop-feature", { featureId }),
-    status: (projectPath?: string) =>
-      this.post("/api/auto-mode/status", { projectPath }),
-    runFeature: (
-      projectPath: string,
-      featureId: string,
-      useWorktrees?: boolean
-    ) =>
-      this.post("/api/auto-mode/run-feature", {
-        projectPath,
-        featureId,
-        useWorktrees,
-      }),
-    verifyFeature: (projectPath: string, featureId: string) =>
-      this.post("/api/auto-mode/verify-feature", { projectPath, featureId }),
-    resumeFeature: (projectPath: string, featureId: string) =>
-      this.post("/api/auto-mode/resume-feature", { projectPath, featureId }),
-    contextExists: (projectPath: string, featureId: string) =>
-      this.post("/api/auto-mode/context-exists", { projectPath, featureId }),
-    analyzeProject: (projectPath: string) =>
-      this.post("/api/auto-mode/analyze-project", { projectPath }),
-    followUpFeature: (
-      projectPath: string,
-      featureId: string,
-      prompt: string,
-      imagePaths?: string[]
-    ) =>
-      this.post("/api/auto-mode/follow-up-feature", {
-        projectPath,
-        featureId,
-        prompt,
-        imagePaths,
-      }),
-    commitFeature: (projectPath: string, featureId: string) =>
-      this.post("/api/auto-mode/commit-feature", { projectPath, featureId }),
-    onEvent: (callback: (event: AutoModeEvent) => void) => {
-      return this.subscribeToEvent(
-        "auto-mode:event",
-        callback as EventCallback
-      );
-    },
-  };
-
-  // Worktree API
-  worktree: WorktreeAPI = {
-    revertFeature: (projectPath: string, featureId: string) =>
-      this.post("/api/worktree/revert", { projectPath, featureId }),
-    mergeFeature: (projectPath: string, featureId: string, options?: object) =>
-      this.post("/api/worktree/merge", { projectPath, featureId, options }),
-    getInfo: (projectPath: string, featureId: string) =>
-      this.post("/api/worktree/info", { projectPath, featureId }),
-    getStatus: (projectPath: string, featureId: string) =>
-      this.post("/api/worktree/status", { projectPath, featureId }),
-    list: (projectPath: string) =>
-      this.post("/api/worktree/list", { projectPath }),
-    getDiffs: (projectPath: string, featureId: string) =>
-      this.post("/api/worktree/diffs", { projectPath, featureId }),
-    getFileDiff: (projectPath: string, featureId: string, filePath: string) =>
-      this.post("/api/worktree/file-diff", {
-        projectPath,
-        featureId,
-        filePath,
-      }),
-  };
-
-  // Git API
-  git: GitAPI = {
-    getDiffs: (projectPath: string) =>
-      this.post("/api/git/diffs", { projectPath }),
-    getFileDiff: (projectPath: string, filePath: string) =>
-      this.post("/api/git/file-diff", { projectPath, filePath }),
-  };
-
-  // Suggestions API
-  suggestions: SuggestionsAPI = {
-    generate: (projectPath: string, suggestionType?: SuggestionType) =>
-      this.post("/api/suggestions/generate", { projectPath, suggestionType }),
-    stop: () => this.post("/api/suggestions/stop"),
-    status: () => this.get("/api/suggestions/status"),
-    onEvent: (callback: (event: SuggestionsEvent) => void) => {
-      return this.subscribeToEvent(
-        "suggestions:event",
-        callback as EventCallback
-      );
-    },
-  };
-
-  // Spec Regeneration API
-  specRegeneration: SpecRegenerationAPI = {
-    create: (
-      projectPath: string,
-      projectOverview: string,
-      generateFeatures?: boolean,
-      analyzeProject?: boolean,
-      maxFeatures?: number
-    ) =>
-      this.post("/api/spec-regeneration/create", {
-        projectPath,
-        projectOverview,
-        generateFeatures,
-        analyzeProject,
-        maxFeatures,
-      }),
-    generate: (
-      projectPath: string,
-      projectDefinition: string,
-      generateFeatures?: boolean,
-      analyzeProject?: boolean,
-      maxFeatures?: number
-    ) =>
-      this.post("/api/spec-regeneration/generate", {
-        projectPath,
-        projectDefinition,
-        generateFeatures,
-        analyzeProject,
-        maxFeatures,
-      }),
-    generateFeatures: (projectPath: string, maxFeatures?: number) =>
-      this.post("/api/spec-regeneration/generate-features", { projectPath, maxFeatures }),
-    stop: () => this.post("/api/spec-regeneration/stop"),
-    status: () => this.get("/api/spec-regeneration/status"),
-    onEvent: (callback: (event: SpecRegenerationEvent) => void) => {
-      return this.subscribeToEvent(
-        "spec-regeneration:event",
-        callback as EventCallback
-      );
-    },
-  };
-
-  // Running Agents API
-  runningAgents = {
-    getAll: (): Promise<{
-      success: boolean;
-      runningAgents?: Array<{
-        featureId: string;
-        projectPath: string;
-        projectName: string;
-        isAutoMode: boolean;
-      }>;
-      totalCount?: number;
-      autoLoopRunning?: boolean;
-      error?: string;
-    }> => this.get("/api/running-agents"),
-  };
-
-  // Workspace API
-  workspace = {
-    getConfig: (): Promise<{
-      success: boolean;
-      configured: boolean;
-      workspaceDir?: string;
-      error?: string;
-    }> => this.get("/api/workspace/config"),
-
-    getDirectories: (): Promise<{
-      success: boolean;
-      directories?: Array<{ name: string; path: string }>;
-      error?: string;
-    }> => this.get("/api/workspace/directories"),
-  };
-
-  // Agent API
-  agent = {
-    start: (
-      sessionId: string,
-      workingDirectory?: string
-    ): Promise<{
-      success: boolean;
-      messages?: Message[];
-      error?: string;
-    }> => this.post("/api/agent/start", { sessionId, workingDirectory }),
-
-    send: (
-      sessionId: string,
-      message: string,
-      workingDirectory?: string,
-      imagePaths?: string[]
-    ): Promise<{ success: boolean; error?: string }> =>
-      this.post("/api/agent/send", {
-        sessionId,
-        message,
-        workingDirectory,
-        imagePaths,
-      }),
-
-    getHistory: (
-      sessionId: string
-    ): Promise<{
-      success: boolean;
-      messages?: Message[];
-      isRunning?: boolean;
-      error?: string;
-    }> => this.post("/api/agent/history", { sessionId }),
-
-    stop: (sessionId: string): Promise<{ success: boolean; error?: string }> =>
-      this.post("/api/agent/stop", { sessionId }),
-
-    clear: (sessionId: string): Promise<{ success: boolean; error?: string }> =>
-      this.post("/api/agent/clear", { sessionId }),
-
-    onStream: (callback: (data: unknown) => void): (() => void) => {
-      return this.subscribeToEvent("agent:stream", callback as EventCallback);
-    },
-  };
-
-  // Templates API
-  templates = {
-    clone: (
-      repoUrl: string,
-      projectName: string,
-      parentDir: string
-    ): Promise<{
-      success: boolean;
-      projectPath?: string;
-      projectName?: string;
-      error?: string;
-    }> =>
-      this.post("/api/templates/clone", { repoUrl, projectName, parentDir }),
-  };
-
-  // Sessions API
-  sessions = {
-    list: (
-      includeArchived?: boolean
-    ): Promise<{
-      success: boolean;
-      sessions?: SessionListItem[];
-      error?: string;
-    }> => this.get(`/api/sessions?includeArchived=${includeArchived || false}`),
-
-    create: (
-      name: string,
-      projectPath: string,
-      workingDirectory?: string
-    ): Promise<{
-      success: boolean;
-      session?: {
-        id: string;
-        name: string;
-        projectPath: string;
-        workingDirectory?: string;
-        createdAt: string;
-        updatedAt: string;
-      };
-      error?: string;
-    }> => this.post("/api/sessions", { name, projectPath, workingDirectory }),
-
-    update: (
-      sessionId: string,
-      name?: string,
-      tags?: string[]
-    ): Promise<{ success: boolean; error?: string }> =>
-      this.put(`/api/sessions/${sessionId}`, { name, tags }),
-
-    archive: (
-      sessionId: string
-    ): Promise<{ success: boolean; error?: string }> =>
-      this.post(`/api/sessions/${sessionId}/archive`, {}),
-
-    unarchive: (
-      sessionId: string
-    ): Promise<{ success: boolean; error?: string }> =>
-      this.post(`/api/sessions/${sessionId}/unarchive`, {}),
-
-    delete: (
-      sessionId: string
-    ): Promise<{ success: boolean; error?: string }> =>
-      this.httpDelete(`/api/sessions/${sessionId}`),
-  };
-}
-
-// Singleton instance
-let httpApiClientInstance: HttpApiClient | null = null;
-
-export function getHttpApiClient(): HttpApiClient {
-  if (!httpApiClientInstance) {
-    httpApiClientInstance = new HttpApiClient();
-  }
-  return httpApiClientInstance;
-}

apps/app/src/lib/log-parser.ts

@@ -1,434 +0,0 @@
-/**
- * Log Parser Utility
- * Parses agent output into structured sections for display
- */
-
-export type LogEntryType =
-  | "prompt"
-  | "tool_call"
-  | "tool_result"
-  | "phase"
-  | "error"
-  | "success"
-  | "info"
-  | "debug"
-  | "warning"
-  | "thinking";
-
-export interface LogEntry {
-  id: string;
-  type: LogEntryType;
-  title: string;
-  content: string;
-  timestamp?: string;
-  collapsed?: boolean;
-  metadata?: {
-    toolName?: string;
-    phase?: string;
-    [key: string]: string | undefined;
-  };
-}
-
-/**
- * Generates a deterministic ID based on content and position
- * This ensures the same log entry always gets the same ID,
- * preserving expanded/collapsed state when new logs stream in
- *
- * Uses only the first 200 characters of content to ensure stability
- * even when entries are merged (which appends content at the end)
- */
-const generateDeterministicId = (content: string, lineIndex: number): string => {
-  // Use first 200 chars to ensure stability when entries are merged
-  const stableContent = content.slice(0, 200);
-  // Simple hash function for the content
-  let hash = 0;
-  const str = stableContent + '|' + lineIndex.toString();
-  for (let i = 0; i < str.length; i++) {
-    const char = str.charCodeAt(i);
-    hash = ((hash << 5) - hash) + char;
-    hash = hash & hash; // Convert to 32bit integer
-  }
-  return 'log_' + Math.abs(hash).toString(36);
-};
-
-/**
- * Detects the type of log entry based on content patterns
- */
-function detectEntryType(content: string): LogEntryType {
-  const trimmed = content.trim();
-
-  // Tool calls
-  if (trimmed.startsWith("🔧 Tool:") || trimmed.match(/^Tool:\s*/)) {
-    return "tool_call";
-  }
-
-  // Tool results / Input
-  if (trimmed.startsWith("Input:") || trimmed.startsWith("Result:") || trimmed.startsWith("Output:")) {
-    return "tool_result";
-  }
-
-  // Phase changes
-  if (
-    trimmed.startsWith("📋") ||
-    trimmed.startsWith("⚡") ||
-    trimmed.startsWith("✅") ||
-    trimmed.match(/^(Planning|Action|Verification)/i) ||
-    trimmed.match(/\[Phase:\s*([^\]]+)\]/) ||
-    trimmed.match(/Phase:\s*\w+/i)
-  ) {
-    return "phase";
-  }
-  
-  // Feature creation events
-  if (
-    trimmed.match(/\[Feature Creation\]/i) ||
-    trimmed.match(/Feature Creation/i) ||
-    trimmed.match(/Creating feature/i)
-  ) {
-    return "success";
-  }
-
-  // Errors
-  if (trimmed.startsWith("❌") || trimmed.toLowerCase().includes("error:")) {
-    return "error";
-  }
-
-  // Success messages
-  if (
-    trimmed.startsWith("✅") ||
-    trimmed.toLowerCase().includes("success") ||
-    trimmed.toLowerCase().includes("completed")
-  ) {
-    return "success";
-  }
-
-  // Warnings
-  if (trimmed.startsWith("⚠️") || trimmed.toLowerCase().includes("warning:")) {
-    return "warning";
-  }
-
-  // Thinking/Preparation info
-  if (
-    trimmed.toLowerCase().includes("ultrathink") ||
-    trimmed.toLowerCase().includes("thinking level") ||
-    trimmed.toLowerCase().includes("estimated cost") ||
-    trimmed.toLowerCase().includes("estimated time") ||
-    trimmed.toLowerCase().includes("budget tokens") ||
-    trimmed.match(/thinking.*preparation/i)
-  ) {
-    return "thinking";
-  }
-
-  // Debug info (JSON, stack traces, etc.)
-  if (
-    trimmed.startsWith("{") ||
-    trimmed.startsWith("[") ||
-    trimmed.includes("at ") ||
-    trimmed.match(/^\s*\d+\s*\|/)
-  ) {
-    return "debug";
-  }
-
-  // Default to info
-  return "info";
-}
-
-/**
- * Extracts tool name from a tool call entry
- */
-function extractToolName(content: string): string | undefined {
-  const match = content.match(/🔧\s*Tool:\s*(\S+)/);
-  return match?.[1];
-}
-
-/**
- * Extracts phase name from a phase entry
- */
-function extractPhase(content: string): string | undefined {
-  if (content.includes("📋")) return "planning";
-  if (content.includes("⚡")) return "action";
-  if (content.includes("✅")) return "verification";
-
-  // Extract from [Phase: ...] format
-  const phaseMatch = content.match(/\[Phase:\s*([^\]]+)\]/);
-  if (phaseMatch) {
-    return phaseMatch[1].toLowerCase();
-  }
-
-  const match = content.match(/^(Planning|Action|Verification)/i);
-  return match?.[1]?.toLowerCase();
-}
-
-/**
- * Generates a title for a log entry
- */
-function generateTitle(type: LogEntryType, content: string): string {
-  switch (type) {
-    case "tool_call": {
-      const toolName = extractToolName(content);
-      return toolName ? `Tool Call: ${toolName}` : "Tool Call";
-    }
-    case "tool_result":
-      return "Tool Input/Result";
-    case "phase": {
-      const phase = extractPhase(content);
-      if (phase) {
-        // Capitalize first letter of each word
-        const formatted = phase.split(/\s+/).map(word => 
-          word.charAt(0).toUpperCase() + word.slice(1)
-        ).join(" ");
-        return `Phase: ${formatted}`;
-      }
-      return "Phase Change";
-    }
-    case "error":
-      return "Error";
-    case "success":
-      return "Success";
-    case "warning":
-      return "Warning";
-    case "thinking":
-      return "Thinking Level";
-    case "debug":
-      return "Debug Info";
-    case "prompt":
-      return "Prompt";
-    default:
-      return "Info";
-  }
-}
-
-/**
- * Parses raw log output into structured entries
- */
-export function parseLogOutput(rawOutput: string): LogEntry[] {
-  if (!rawOutput || !rawOutput.trim()) {
-    return [];
-  }
-
-  const entries: LogEntry[] = [];
-  const lines = rawOutput.split("\n");
-
-  let currentEntry: Omit<LogEntry, 'id'> & { id?: string } | null = null;
-  let currentContent: string[] = [];
-  let entryStartLine = 0; // Track the starting line for deterministic ID generation
-
-  const finalizeEntry = () => {
-    if (currentEntry && currentContent.length > 0) {
-      currentEntry.content = currentContent.join("\n").trim();
-      if (currentEntry.content) {
-        // Generate deterministic ID based on content and position
-        const entryWithId: LogEntry = {
-          ...currentEntry as Omit<LogEntry, 'id'>,
-          id: generateDeterministicId(currentEntry.content, entryStartLine),
-        };
-        entries.push(entryWithId);
-      }
-    }
-    currentContent = [];
-  };
-
-  let lineIndex = 0;
-  for (const line of lines) {
-    const trimmedLine = line.trim();
-
-    // Skip empty lines at the beginning
-    if (!trimmedLine && !currentEntry) {
-      lineIndex++;
-      continue;
-    }
-
-    // Detect if this line starts a new entry
-    const lineType = detectEntryType(trimmedLine);
-    const isNewEntry =
-      trimmedLine.startsWith("🔧") ||
-      trimmedLine.startsWith("📋") ||
-      trimmedLine.startsWith("⚡") ||
-      trimmedLine.startsWith("✅") ||
-      trimmedLine.startsWith("❌") ||
-      trimmedLine.startsWith("⚠️") ||
-      trimmedLine.startsWith("🧠") ||
-      trimmedLine.match(/\[Phase:\s*([^\]]+)\]/) ||
-      trimmedLine.match(/\[Feature Creation\]/i) ||
-      trimmedLine.match(/\[Tool\]/i) ||
-      trimmedLine.match(/\[Agent\]/i) ||
-      trimmedLine.match(/\[Complete\]/i) ||
-      trimmedLine.match(/\[ERROR\]/i) ||
-      trimmedLine.match(/\[Status\]/i) ||
-      trimmedLine.toLowerCase().includes("ultrathink preparation") ||
-      trimmedLine.toLowerCase().includes("thinking level") ||
-      (trimmedLine.startsWith("Input:") && currentEntry?.type === "tool_call");
-
-    if (isNewEntry) {
-      // Finalize previous entry
-      finalizeEntry();
-
-      // Track starting line for deterministic ID
-      entryStartLine = lineIndex;
-
-      // Start new entry (ID will be generated when finalizing)
-      currentEntry = {
-        type: lineType,
-        title: generateTitle(lineType, trimmedLine),
-        content: "",
-        metadata: {
-          toolName: extractToolName(trimmedLine),
-          phase: extractPhase(trimmedLine),
-        },
-      };
-      currentContent.push(trimmedLine);
-    } else if (currentEntry) {
-      // Continue current entry
-      currentContent.push(line);
-    } else {
-      // Track starting line for deterministic ID
-      entryStartLine = lineIndex;
-
-      // No current entry, create a default info entry
-      currentEntry = {
-        type: "info",
-        title: "Info",
-        content: "",
-      };
-      currentContent.push(line);
-    }
-    lineIndex++;
-  }
-
-  // Finalize last entry
-  finalizeEntry();
-
-  // Merge consecutive entries of the same type if they're both debug or info
-  const mergedEntries = mergeConsecutiveEntries(entries);
-
-  return mergedEntries;
-}
-
-/**
- * Merges consecutive entries of the same type for cleaner display
- */
-function mergeConsecutiveEntries(entries: LogEntry[]): LogEntry[] {
-  if (entries.length <= 1) return entries;
-
-  const merged: LogEntry[] = [];
-  let current: LogEntry | null = null;
-  let mergeIndex = 0;
-
-  for (const entry of entries) {
-    if (
-      current &&
-      (current.type === "debug" || current.type === "info") &&
-      current.type === entry.type
-    ) {
-      // Merge into current - regenerate ID based on merged content
-      current.content += "\n\n" + entry.content;
-      current.id = generateDeterministicId(current.content, mergeIndex);
-    } else {
-      if (current) {
-        merged.push(current);
-      }
-      current = { ...entry };
-      mergeIndex = merged.length;
-    }
-  }
-
-  if (current) {
-    merged.push(current);
-  }
-
-  return merged;
-}
-
-/**
- * Gets the color classes for a log entry type
- */
-export function getLogTypeColors(type: LogEntryType): {
-  bg: string;
-  border: string;
-  text: string;
-  icon: string;
-  badge: string;
-} {
-  switch (type) {
-    case "prompt":
-      return {
-        bg: "bg-blue-500/10",
-        border: "border-l-blue-500",
-        text: "text-blue-300",
-        icon: "text-blue-400",
-        badge: "bg-blue-500/20 text-blue-300",
-      };
-    case "tool_call":
-      return {
-        bg: "bg-amber-500/10",
-        border: "border-l-amber-500",
-        text: "text-amber-300",
-        icon: "text-amber-400",
-        badge: "bg-amber-500/20 text-amber-300",
-      };
-    case "tool_result":
-      return {
-        bg: "bg-slate-500/10",
-        border: "border-l-slate-400",
-        text: "text-slate-300",
-        icon: "text-slate-400",
-        badge: "bg-slate-500/20 text-slate-300",
-      };
-    case "phase":
-      return {
-        bg: "bg-cyan-500/10",
-        border: "border-l-cyan-500",
-        text: "text-cyan-300",
-        icon: "text-cyan-400",
-        badge: "bg-cyan-500/20 text-cyan-300",
-      };
-    case "error":
-      return {
-        bg: "bg-red-500/10",
-        border: "border-l-red-500",
-        text: "text-red-300",
-        icon: "text-red-400",
-        badge: "bg-red-500/20 text-red-300",
-      };
-    case "success":
-      return {
-        bg: "bg-emerald-500/10",
-        border: "border-l-emerald-500",
-        text: "text-emerald-300",
-        icon: "text-emerald-400",
-        badge: "bg-emerald-500/20 text-emerald-300",
-      };
-    case "warning":
-      return {
-        bg: "bg-orange-500/10",
-        border: "border-l-orange-500",
-        text: "text-orange-300",
-        icon: "text-orange-400",
-        badge: "bg-orange-500/20 text-orange-300",
-      };
-    case "thinking":
-      return {
-        bg: "bg-indigo-500/10",
-        border: "border-l-indigo-500",
-        text: "text-indigo-300",
-        icon: "text-indigo-400",
-        badge: "bg-indigo-500/20 text-indigo-300",
-      };
-    case "debug":
-      return {
-        bg: "bg-primary/10",
-        border: "border-l-primary",
-        text: "text-primary",
-        icon: "text-primary",
-        badge: "bg-primary/20 text-primary",
-      };
-    default:
-      return {
-        bg: "bg-zinc-500/10",
-        border: "border-l-zinc-500",
-        text: "text-zinc-300",
-        icon: "text-zinc-400",
-        badge: "bg-zinc-500/20 text-zinc-300",
-      };
-  }
-}

apps/app/src/lib/templates.ts

@@ -1,62 +0,0 @@
-/**
- * Starter Kit Templates
- *
- * Define GitHub templates that users can clone when creating new projects.
- */
-
-export interface StarterTemplate {
-  id: string;
-  name: string;
-  description: string;
-  repoUrl: string;
-  techStack: string[];
-  features: string[];
-  category: "fullstack" | "frontend" | "backend" | "ai" | "other";
-  author: string;
-}
-
-export const starterTemplates: StarterTemplate[] = [
-  {
-    id: "agentic-jumpstart",
-    name: "Agentic Jumpstart",
-    description: "A starter template for building agentic AI applications with a pre-configured development environment including database setup, Docker support, and TypeScript configuration.",
-    repoUrl: "https://github.com/webdevcody/agentic-jumpstart-starter-kit",
-    techStack: ["TypeScript", "Vite", "Drizzle ORM", "Docker", "PostCSS"],
-    features: [
-      "Pre-configured VS Code settings",
-      "Docker Compose setup",
-      "Database migrations with Drizzle",
-      "Type-safe development",
-      "Environment setup with .env.example"
-    ],
-    category: "ai",
-    author: "webdevcody"
-  },
-  {
-    id: "full-stack-campus",
-    name: "Full Stack Campus",
-    description: "A feature-driven development template for building community platforms. Includes authentication, Stripe payments, file uploads, and real-time features using TanStack Start.",
-    repoUrl: "https://github.com/webdevcody/full-stack-campus",
-    techStack: ["TanStack Start", "PostgreSQL", "Drizzle ORM", "Better Auth", "Tailwind CSS", "Radix UI", "Stripe", "AWS S3/R2"],
-    features: [
-      "Community posts with comments and reactions",
-      "User profiles and portfolios",
-      "Calendar event management",
-      "Direct messaging",
-      "Member discovery directory",
-      "Real-time notifications",
-      "Tiered subscriptions (free/basic/pro)",
-      "File uploads with presigned URLs"
-    ],
-    category: "fullstack",
-    author: "webdevcody"
-  }
-];
-
-export function getTemplateById(id: string): StarterTemplate | undefined {
-  return starterTemplates.find(t => t.id === id);
-}
-
-export function getTemplatesByCategory(category: StarterTemplate["category"]): StarterTemplate[] {
-  return starterTemplates.filter(t => t.category === category);
-}