IDK

.claude/commands/gh-issue.md

@@ -1,74 +0,0 @@
-# GitHub Issue Fix Command
-
-Fetch a GitHub issue by number, verify it's a real issue, and fix it if valid.
-
-## Usage
-
-This command accepts a GitHub issue number as input (e.g., `123`).
-
-## Instructions
-
-1. **Get the issue number from the user**
-   - The issue number should be provided as an argument to this command
-   - If no number is provided, ask the user for it
-
-2. **Fetch the GitHub issue**
-   - Determine the current project path (check if there's a current project context)
-   - Verify the project has a GitHub remote:
-     ```bash
-     git remote get-url origin
-     ```
-   - Fetch the issue details using GitHub CLI:
-     ```bash
-     gh issue view <ISSUE_NUMBER> --json number,title,state,author,createdAt,labels,url,body,assignees
-     ```
-   - If the command fails, report the error and stop
-
-3. **Verify the issue is real and valid**
-   - Check that the issue exists (not 404)
-   - Check the issue state:
-     - If **closed**: Inform the user and ask if they still want to proceed
-     - If **open**: Proceed with validation
-   - Review the issue content:
-     - Read the title and body to understand what needs to be fixed
-     - Check labels for context (bug, enhancement, etc.)
-     - Note any assignees or linked PRs
-
-4. **Validate the issue**
-   - Determine if this is a legitimate issue that needs fixing:
-     - Is the description clear and actionable?
-     - Does it describe a real problem or feature request?
-     - Are there any obvious signs it's spam or invalid?
-   - If the issue seems invalid or unclear:
-     - Report findings to the user
-     - Ask if they want to proceed anyway
-     - Stop if user confirms it's not valid
-
-5. **If the issue is valid, proceed to fix it**
-   - Analyze what needs to be done based on the issue description
-   - Check the current codebase state:
-     - Run relevant tests to see current behavior
-     - Check if the issue is already fixed
-     - Look for related code that might need changes
-   - Implement the fix:
-     - Make necessary code changes
-     - Update or add tests as needed
-     - Ensure the fix addresses the issue description
-   - Verify the fix:
-     - Run tests to ensure nothing broke
-     - If possible, manually verify the fix addresses the issue
-
-6. **Report summary**
-   - Issue number and title
-   - Issue state (open/closed)
-   - Whether the issue was validated as real
-   - What was fixed (if anything)
-   - Any tests that were updated or added
-   - Next steps (if any)
-
-## Error Handling
-
-- If GitHub CLI (`gh`) is not installed or authenticated, report error and stop
-- If the project doesn't have a GitHub remote, report error and stop
-- If the issue number doesn't exist, report error and stop
-- If the issue is unclear or invalid, report findings and ask user before proceeding

.claude/commands/release.md

@@ -1,77 +0,0 @@
-# Release Command
-
-Bump the package.json version (major, minor, or patch) and build the Electron app with the new version.
-
-## Usage
-
-This command accepts a version bump type as input:
-
-- `patch` - Bump patch version (0.1.0 -> 0.1.1)
-- `minor` - Bump minor version (0.1.0 -> 0.2.0)
-- `major` - Bump major version (0.1.0 -> 1.0.0)
-
-## Instructions
-
-1. **Get the bump type from the user**
-   - The bump type should be provided as an argument (patch, minor, or major)
-   - If no type is provided, ask the user which type they want
-
-2. **Bump the version**
-   - Run the version bump script:
-     ```bash
-     node apps/ui/scripts/bump-version.mjs <type>
-     ```
-   - This updates both `apps/ui/package.json` and `apps/server/package.json` with the new version (keeps them in sync)
-   - Verify the version was updated correctly by checking the output
-
-3. **Build the Electron app**
-   - Run the electron build:
-     ```bash
-     npm run build:electron --workspace=apps/ui
-     ```
-   - The build process automatically:
-     - Uses the version from `package.json` for artifact names (e.g., `Automaker-1.2.3-x64.zip`)
-     - Injects the version into the app via Vite's `__APP_VERSION__` constant
-     - Displays the version below the logo in the sidebar
-
-4. **Commit the version bump**
-   - Stage the updated package.json files:
-     ```bash
-     git add apps/ui/package.json apps/server/package.json
-     ```
-   - Commit with a release message:
-     ```bash
-     git commit -m "chore: release v<version>"
-     ```
-
-5. **Create and push the git tag**
-   - Create an annotated tag for the release:
-     ```bash
-     git tag -a v<version> -m "Release v<version>"
-     ```
-   - Push the commit and tag to remote:
-     ```bash
-     git push && git push --tags
-     ```
-
-6. **Verify the release**
-   - Check that the build completed successfully
-   - Confirm the version appears correctly in the built artifacts
-   - The version will be displayed in the app UI below the logo
-   - Verify the tag is visible on the remote repository
-
-## Version Centralization
-
-The version is centralized and synchronized in both `apps/ui/package.json` and `apps/server/package.json`:
-
-- **Electron builds**: Automatically read from `apps/ui/package.json` via electron-builder's `${version}` variable in `artifactName`
-- **App display**: Injected at build time via Vite's `define` config as `__APP_VERSION__` constant (defined in `apps/ui/vite.config.mts`)
-- **Server API**: Read from `apps/server/package.json` via `apps/server/src/lib/version.ts` utility (used in health check endpoints)
-- **Type safety**: Defined in `apps/ui/src/vite-env.d.ts` as `declare const __APP_VERSION__: string`
-
-This ensures consistency across:
-
-- Build artifact names (e.g., `Automaker-1.2.3-x64.zip`)
-- App UI display (shown as `v1.2.3` below the logo in `apps/ui/src/components/layout/sidebar/components/automaker-logo.tsx`)
-- Server health endpoints (`/` and `/detailed`)
-- Package metadata (both UI and server packages stay in sync)

.claude/commands/validate-build.md

@@ -1,49 +0,0 @@
-# Project Build and Fix Command
-
-Run all builds and intelligently fix any failures based on what changed.
-
-## Instructions
-
-1. **Run the build**
-
-   ```bash
-   npm run build
-   ```
-
-   This builds all packages and the UI application.
-
-2. **If the build succeeds**, report success and stop.
-
-3. **If the build fails**, analyze the failures:
-   - Note which build step failed and the error messages
-   - Check for TypeScript compilation errors, missing dependencies, or configuration issues
-   - Run `git diff main` to see what code has changed
-
-4. **Determine the nature of the failure**:
-   - **If the failure is due to intentional changes** (new features, refactoring, dependency updates):
-     - Fix any TypeScript type errors introduced by the changes
-     - Update build configuration if needed (e.g., tsconfig.json, vite.config.mts)
-     - Ensure all new dependencies are properly installed
-     - Fix import paths or module resolution issues
-
-   - **If the failure appears to be a regression** (broken imports, missing files, configuration errors):
-     - Fix the source code to restore the build
-     - Check for accidentally deleted files or broken references
-     - Verify build configuration files are correct
-
-5. **Common build issues to check**:
-   - **TypeScript errors**: Fix type mismatches, missing types, or incorrect imports
-   - **Missing dependencies**: Run `npm install` if packages are missing
-   - **Import/export errors**: Fix incorrect import paths or missing exports
-   - **Build configuration**: Check tsconfig.json, vite.config.mts, or other build configs
-   - **Package build order**: Ensure `build:packages` completes before building apps
-
-6. **How to decide if it's intentional vs regression**:
-   - Look at the git diff and commit messages
-   - If the change was deliberate and introduced new code that needs fixing → fix the new code
-   - If the change broke existing functionality that should still build → fix the regression
-   - When in doubt, ask the user
-
-7. **After making fixes**, re-run the build to verify everything compiles successfully.
-
-8. **Report summary** of what was fixed (TypeScript errors, configuration issues, missing dependencies, etc.).

.claude/commands/validate-tests.md

@@ -1,36 +0,0 @@
-# Project Test and Fix Command
-
-Run all tests and intelligently fix any failures based on what changed.
-
-## Instructions
-
-1. **Run all tests**
-
-   ```bash
-   npm run test:all
-   ```
-
-2. **If all tests pass**, report success and stop.
-
-3. **If any tests fail**, analyze the failures:
-   - Note which tests failed and their error messages
-   - Run `git diff main` to see what code has changed
-
-4. **Determine the nature of the change**:
-   - **If the logic change is intentional** (new feature, refactor, behavior change):
-     - Update the failing tests to match the new expected behavior
-     - The tests should reflect what the code NOW does correctly
-
-   - **If the logic change appears to be a bug** (regression, unintended side effect):
-     - Fix the source code to restore the expected behavior
-     - Do NOT modify the tests - they are catching a real bug
-
-5. **How to decide if it's a bug vs intentional change**:
-   - Look at the git diff and commit messages
-   - If the change was deliberate and the test expectations are now outdated → update tests
-   - If the change broke existing functionality that should still work → fix the code
-   - When in doubt, ask the user
-
-6. **After making fixes**, re-run the tests to verify everything passes.
-
-7. **Report summary** of what was fixed (tests updated vs code fixed).

.claude_settings.json

@@ -0,0 +1,24 @@
+{
+  "sandbox": {
+    "enabled": true,
+    "autoAllowBashIfSandboxed": true
+  },
+  "permissions": {
+    "defaultMode": "acceptEdits",
+    "allow": [
+      "Read(./**)",
+      "Write(./**)",
+      "Edit(./**)",
+      "Glob(./**)",
+      "Grep(./**)",
+      "Bash(*)",
+      "mcp__puppeteer__puppeteer_navigate",
+      "mcp__puppeteer__puppeteer_screenshot",
+      "mcp__puppeteer__puppeteer_click",
+      "mcp__puppeteer__puppeteer_fill",
+      "mcp__puppeteer__puppeteer_select",
+      "mcp__puppeteer__puppeteer_hover",
+      "mcp__puppeteer__puppeteer_evaluate"
+    ]
+  }
+}

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,117 +0,0 @@
-name: Bug Report
-description: File a bug report to help us improve Automaker
-title: '[Bug]: '
-labels: ['bug']
-body:
-  - type: markdown
-    attributes:
-      value: |
-        Thanks for taking the time to report a bug! Please fill out the form below with as much detail as possible.
-
-  - type: dropdown
-    id: operating-system
-    attributes:
-      label: Operating System
-      description: What operating system are you using?
-      options:
-        - macOS
-        - Windows
-        - Linux
-        - Other
-      default: 0
-    validations:
-      required: true
-
-  - type: dropdown
-    id: run-mode
-    attributes:
-      label: Run Mode
-      description: How are you running Automaker?
-      options:
-        - Electron (Desktop App)
-        - Web (Browser)
-        - Docker
-      default: 0
-    validations:
-      required: true
-
-  - type: input
-    id: app-version
-    attributes:
-      label: App Version
-      description: What version of Automaker are you using? (e.g., 0.1.0)
-      placeholder: '0.1.0'
-    validations:
-      required: true
-
-  - type: textarea
-    id: bug-description
-    attributes:
-      label: Bug Description
-      description: A clear and concise description of what the bug is.
-      placeholder: Describe the bug...
-    validations:
-      required: true
-
-  - type: textarea
-    id: steps-to-reproduce
-    attributes:
-      label: Steps to Reproduce
-      description: Steps to reproduce the behavior
-      placeholder: |
-        1. Go to '...'
-        2. Click on '...'
-        3. Scroll down to '...'
-        4. See error
-    validations:
-      required: true
-
-  - type: textarea
-    id: expected-behavior
-    attributes:
-      label: Expected Behavior
-      description: A clear and concise description of what you expected to happen.
-      placeholder: What should have happened?
-    validations:
-      required: true
-
-  - type: textarea
-    id: actual-behavior
-    attributes:
-      label: Actual Behavior
-      description: A clear and concise description of what actually happened.
-      placeholder: What actually happened?
-    validations:
-      required: true
-
-  - type: textarea
-    id: screenshots
-    attributes:
-      label: Screenshots
-      description: If applicable, add screenshots to help explain your problem.
-      placeholder: Drag and drop screenshots here or paste image URLs
-
-  - type: textarea
-    id: logs
-    attributes:
-      label: Relevant Logs
-      description: If applicable, paste relevant logs or error messages.
-      placeholder: Paste logs here...
-      render: shell
-
-  - type: textarea
-    id: additional-context
-    attributes:
-      label: Additional Context
-      description: Add any other context about the problem here.
-      placeholder: Any additional information that might be helpful...
-
-  - type: checkboxes
-    id: terms
-    attributes:
-      label: Checklist
-      options:
-        - label: I have searched existing issues to ensure this bug hasn't been reported already
-          required: true
-        - label: I have provided all required information above
-          required: true

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

@@ -1,71 +0,0 @@
-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,11 +1,15 @@
-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,
@@ -24,14 +28,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;
@@ -81,7 +85,7 @@ async function checkUrlAccessible(url, maxRetries = 10, initialDelay = 1000) {
               resolve({
                 accessible: false,
                 statusCode,
-                error: 'Redirect without location header',
+                error: "Redirect without location header",
               });
               return;
             }
@@ -89,16 +93,18 @@ 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,
@@ -107,38 +113,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,
@@ -146,12 +152,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",
           });
         });
       });
@@ -162,14 +168,22 @@ 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}`);
@@ -177,7 +191,9 @@ 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));
     }
   }
@@ -191,7 +207,12 @@ 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) {
@@ -199,33 +220,39 @@ 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}`));
     });
@@ -233,8 +260,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)) {
@@ -265,30 +292,40 @@ 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)) {
@@ -308,11 +345,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",
     };
   }
 
@@ -327,7 +364,9 @@ 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);
@@ -337,19 +376,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

@@ -1,49 +0,0 @@
-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,15 +18,34 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v4
 
-      - name: Setup project
-        uses: ./.github/actions/setup-project
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
         with:
-          check-lockfile: 'true'
-          rebuild-node-pty-path: 'apps/server'
+          node-version: "22"
+          cache: "npm"
+          cache-dependency-path: package-lock.json
+
+      - name: Configure Git for HTTPS
+        # Convert SSH URLs to HTTPS for git dependencies (e.g., @electron/node-gyp)
+        # This is needed because SSH authentication isn't available in CI
+        run: git config --global url."https://github.com/".insteadOf "git@github.com:"
+
+      - name: Install dependencies
+        # Use npm install instead of npm ci to correctly resolve platform-specific
+        # optional dependencies (e.g., @tailwindcss/oxide, lightningcss binaries)
+        run: npm install
+
+      - name: Install Linux native bindings
+        # Workaround for npm optional dependencies bug (npm/cli#4828)
+        # Explicitly install Linux bindings needed for build tools
+        run: |
+          npm install --no-save --force \
+            @rollup/rollup-linux-x64-gnu@4.53.3 \
+            @tailwindcss/oxide-linux-x64-gnu@4.1.17
 
       - name: Install Playwright browsers
         run: npx playwright install --with-deps chromium
-        working-directory: apps/ui
+        working-directory: apps/app
 
       - name: Build server
         run: npm run build --workspace=apps/server
@@ -52,20 +71,20 @@ jobs:
           exit 1
 
       - name: Run E2E tests
-        # 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
+        # Playwright automatically starts the Next.js frontend via webServer config
+        # (see apps/app/playwright.config.ts) - no need to start it manually
+        run: npm run test --workspace=apps/app
         env:
           CI: true
-          VITE_SERVER_URL: http://localhost:3008
-          VITE_SKIP_SETUP: 'true'
+          NEXT_PUBLIC_SERVER_URL: http://localhost:3008
+          NEXT_PUBLIC_SKIP_SETUP: "true"
 
       - name: Upload Playwright report
         uses: actions/upload-artifact@v4
         if: always()
         with:
           name: playwright-report
-          path: apps/ui/playwright-report/
+          path: apps/app/playwright-report/
           retention-days: 7
 
       - name: Upload test results
@@ -73,5 +92,5 @@ jobs:
         if: failure()
         with:
           name: test-results
-          path: apps/ui/test-results/
+          path: apps/app/test-results/
           retention-days: 7

.github/workflows/format-check.yml

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

.github/workflows/release.yml

@@ -1,111 +1,180 @@
-name: Release Build
+name: Build and Release Electron App
 
 on:
-  release:
-    types: [published]
+  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"
 
 jobs:
-  build:
+  build-and-release:
     strategy:
+      fail-fast: false
       matrix:
-        os: [ubuntu-latest, macos-latest, windows-latest]
+        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
+
     runs-on: ${{ matrix.os }}
 
+    permissions:
+      contents: write
+
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
 
-      - name: Extract version from tag
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "22"
+          cache: "npm"
+          cache-dependency-path: package-lock.json
+
+      - name: Configure Git for HTTPS
+        # Convert SSH URLs to HTTPS for git dependencies (e.g., @electron/node-gyp)
+        # This is needed because SSH authentication isn't available in CI
+        run: git config --global url."https://github.com/".insteadOf "git@github.com:"
+
+      - name: Install dependencies
+        # Use npm install instead of npm ci to correctly resolve platform-specific
+        # optional dependencies (e.g., @tailwindcss/oxide, lightningcss binaries)
+        run: npm install
+
+      - name: Install Linux native bindings
+        # Workaround for npm optional dependencies bug (npm/cli#4828)
+        # Only needed on Linux - macOS and Windows get their bindings automatically
+        if: matrix.os == 'ubuntu-latest'
+        run: |
+          npm install --no-save --force \
+            @rollup/rollup-linux-x64-gnu@4.53.3 \
+            @tailwindcss/oxide-linux-x64-gnu@4.1.17
+
+      - name: Extract and set version
         id: version
         shell: bash
         run: |
-          # 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}"
+          VERSION_TAG="${{ github.event.inputs.version || github.ref_name }}"
+          # Remove 'v' prefix if present (e.g., v1.0.0 -> 1.0.0)
+          VERSION="${VERSION_TAG#v}"
+          echo "version=$VERSION" >> $GITHUB_OUTPUT
+          echo "Extracted version: $VERSION from tag: $VERSION_TAG"
+          # Update the app's package.json version
+          cd apps/app
+          npm version $VERSION --no-git-tag-version
+          cd ../..
+          echo "Updated apps/app/package.json to version $VERSION"
 
-      - name: Update package.json version
-        shell: bash
-        run: |
-          node apps/ui/scripts/update-version.mjs "${{ steps.version.outputs.version }}"
-
-      - name: Setup project
-        uses: ./.github/actions/setup-project
-        with:
-          check-lockfile: 'true'
-
-      - name: Build Electron app (macOS)
+      - 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
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: npm run build:electron -- --mac --x64 --arm64
 
-      - name: Build Electron app (Windows)
+      - name: Build Electron App (Windows)
         if: matrix.os == 'windows-latest'
-        shell: bash
-        run: npm run build:electron:win --workspace=apps/ui
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: npm run build:electron -- --win --x64
 
-      - name: Build Electron app (Linux)
+      - name: Build Electron App (Linux)
         if: matrix.os == 'ubuntu-latest'
-        shell: bash
-        run: npm run build:electron:linux --workspace=apps/ui
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: npm run build:electron -- --linux --x64
 
-      - name: Upload macOS artifacts
-        if: matrix.os == 'macos-latest'
-        uses: actions/upload-artifact@v4
-        with:
-          name: macos-builds
-          path: apps/ui/release/*.{dmg,zip}
-          retention-days: 30
-
-      - name: Upload Windows artifacts
-        if: matrix.os == 'windows-latest'
-        uses: actions/upload-artifact@v4
-        with:
-          name: windows-builds
-          path: apps/ui/release/*.exe
-          retention-days: 30
-
-      - name: Upload Linux artifacts
-        if: matrix.os == 'ubuntu-latest'
-        uses: actions/upload-artifact@v4
-        with:
-          name: linux-builds
-          path: apps/ui/release/*.{AppImage,deb}
-          retention-days: 30
-
-  upload:
-    needs: build
-    runs-on: ubuntu-latest
-    if: github.event.release.draft == false
-
-    steps:
-      - name: Download macOS artifacts
-        uses: actions/download-artifact@v4
-        with:
-          name: macos-builds
-          path: artifacts/macos-builds
-
-      - name: Download Windows artifacts
-        uses: actions/download-artifact@v4
-        with:
-          name: windows-builds
-          path: artifacts/windows-builds
-
-      - name: Download Linux artifacts
-        uses: actions/download-artifact@v4
-        with:
-          name: linux-builds
-          path: artifacts/linux-builds
-
-      - name: Upload to GitHub Release
-        uses: softprops/action-gh-release@v2
+      - name: Upload Release Assets
+        uses: softprops/action-gh-release@v1
         with:
+          tag_name: ${{ github.event.inputs.version || github.ref_name }}
           files: |
-            artifacts/macos-builds/*
-            artifacts/windows-builds/*
-            artifacts/linux-builds/*
+            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 }}
+
+      - name: Upload macOS artifacts for R2
+        if: matrix.os == 'macos-latest'
+        uses: actions/upload-artifact@v4
+        with:
+          name: ${{ matrix.artifact-name }}
+          path: apps/app/dist/*.dmg
+          retention-days: 1
+
+      - name: Upload Windows artifacts for R2
+        if: matrix.os == 'windows-latest'
+        uses: actions/upload-artifact@v4
+        with:
+          name: ${{ matrix.artifact-name }}
+          path: apps/app/dist/*.exe
+          retention-days: 1
+
+      - name: Upload Linux artifacts for R2
+        if: matrix.os == 'ubuntu-latest'
+        uses: actions/upload-artifact@v4
+        with:
+          name: ${{ matrix.artifact-name }}
+          path: apps/app/dist/*.AppImage
+          retention-days: 1
+
+  upload-to-r2:
+    needs: build-and-release
+    runs-on: ubuntu-latest
+
+    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
+        uses: actions/download-artifact@v4
+        with:
+          path: artifacts
+
+      - name: Install AWS SDK
+        run: npm install @aws-sdk/client-s3
+
+      - name: Extract version
+        id: version
+        shell: bash
+        run: |
+          VERSION_TAG="${{ github.event.inputs.version || github.ref_name }}"
+          # Remove 'v' prefix if present (e.g., v1.0.0 -> 1.0.0)
+          VERSION="${VERSION_TAG#v}"
+          echo "version=$VERSION" >> $GITHUB_OUTPUT
+          echo "version_tag=$VERSION_TAG" >> $GITHUB_OUTPUT
+          echo "Extracted version: $VERSION from tag: $VERSION_TAG"
+
+      - name: Upload to R2 and update releases.json
+        env:
+          R2_ENDPOINT: ${{ secrets.R2_ENDPOINT }}
+          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/workflows/security-audit.yml

@@ -1,30 +0,0 @@
-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,16 +17,30 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v4
 
-      - name: Setup project
-        uses: ./.github/actions/setup-project
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
         with:
-          check-lockfile: 'true'
-          rebuild-node-pty-path: 'apps/server'
+          node-version: "22"
+          cache: "npm"
+          cache-dependency-path: package-lock.json
 
-      - name: Run package tests
-        run: npm run test:packages
-        env:
-          NODE_ENV: test
+      - name: Configure Git for HTTPS
+        # Convert SSH URLs to HTTPS for git dependencies (e.g., @electron/node-gyp)
+        # This is needed because SSH authentication isn't available in CI
+        run: git config --global url."https://github.com/".insteadOf "git@github.com:"
+
+      - name: Install dependencies
+        # Use npm install instead of npm ci to correctly resolve platform-specific
+        # optional dependencies (e.g., @tailwindcss/oxide, lightningcss binaries)
+        run: npm install
+
+      - name: Install Linux native bindings
+        # Workaround for npm optional dependencies bug (npm/cli#4828)
+        # Explicitly install Linux bindings needed for build tools
+        run: |
+          npm install --no-save --force \
+            @rollup/rollup-linux-x64-gnu@4.53.3 \
+            @tailwindcss/oxide-linux-x64-gnu@4.1.17
 
       - name: Run server tests with coverage
         run: npm run test:server:coverage

.gitignore

@@ -78,9 +78,3 @@ blob-report/
 
 # Misc
 *.pem
-
-docker-compose.override.yml
-.claude/docker-compose.override.yml
-
-pnpm-lock.yaml
-yarn.lock

.husky/pre-commit

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

.nvmrc

@@ -1,2 +0,0 @@
-22
-

.prettierignore

@@ -1,39 +0,0 @@
-# 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

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

CLAUDE.md

@@ -1,172 +0,0 @@
-# CLAUDE.md
-
-This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
-
-## Project Overview
-
-Automaker is an autonomous AI development studio built as an npm workspace monorepo. It provides a Kanban-based workflow where AI agents (powered by Claude Agent SDK) implement features in isolated git worktrees.
-
-## Common Commands
-
-```bash
-# Development
-npm run dev                 # Interactive launcher (choose web or electron)
-npm run dev:web             # Web browser mode (localhost:3007)
-npm run dev:electron        # Desktop app mode
-npm run dev:electron:debug  # Desktop with DevTools open
-
-# Building
-npm run build               # Build web application
-npm run build:packages      # Build all shared packages (required before other builds)
-npm run build:electron      # Build desktop app for current platform
-npm run build:server        # Build server only
-
-# Testing
-npm run test                # E2E tests (Playwright, headless)
-npm run test:headed         # E2E tests with browser visible
-npm run test:server         # Server unit tests (Vitest)
-npm run test:packages       # All shared package tests
-npm run test:all            # All tests (packages + server)
-
-# Single test file
-npm run test:server -- tests/unit/specific.test.ts
-
-# Linting and formatting
-npm run lint                # ESLint
-npm run format              # Prettier write
-npm run format:check        # Prettier check
-```
-
-## Architecture
-
-### Monorepo Structure
-
-```
-automaker/
-├── apps/
-│   ├── ui/           # React + Vite + Electron frontend (port 3007)
-│   └── server/       # Express + WebSocket backend (port 3008)
-└── libs/             # Shared packages (@automaker/*)
-    ├── types/        # Core TypeScript definitions (no dependencies)
-    ├── utils/        # Logging, errors, image processing, context loading
-    ├── prompts/      # AI prompt templates
-    ├── platform/     # Path management, security, process spawning
-    ├── model-resolver/    # Claude model alias resolution
-    ├── dependency-resolver/  # Feature dependency ordering
-    └── git-utils/    # Git operations & worktree management
-```
-
-### Package Dependency Chain
-
-Packages can only depend on packages above them:
-
-```
-@automaker/types (no dependencies)
-    ↓
-@automaker/utils, @automaker/prompts, @automaker/platform, @automaker/model-resolver, @automaker/dependency-resolver
-    ↓
-@automaker/git-utils
-    ↓
-@automaker/server, @automaker/ui
-```
-
-### Key Technologies
-
-- **Frontend**: React 19, Vite 7, Electron 39, TanStack Router, Zustand 5, Tailwind CSS 4
-- **Backend**: Express 5, WebSocket (ws), Claude Agent SDK, node-pty
-- **Testing**: Playwright (E2E), Vitest (unit)
-
-### Server Architecture
-
-The server (`apps/server/src/`) follows a modular pattern:
-
-- `routes/` - Express route handlers organized by feature (agent, features, auto-mode, worktree, etc.)
-- `services/` - Business logic (AgentService, AutoModeService, FeatureLoader, TerminalService)
-- `providers/` - AI provider abstraction (currently Claude via Claude Agent SDK)
-- `lib/` - Utilities (events, auth, worktree metadata)
-
-### Frontend Architecture
-
-The UI (`apps/ui/src/`) uses:
-
-- `routes/` - TanStack Router file-based routing
-- `components/views/` - Main view components (board, settings, terminal, etc.)
-- `store/` - Zustand stores with persistence (app-store.ts, setup-store.ts)
-- `hooks/` - Custom React hooks
-- `lib/` - Utilities and API client
-
-## Data Storage
-
-### Per-Project Data (`.automaker/`)
-
-```
-.automaker/
-├── features/              # Feature JSON files and images
-│   └── {featureId}/
-│       ├── feature.json
-│       ├── agent-output.md
-│       └── images/
-├── context/               # Context files for AI agents (CLAUDE.md, etc.)
-├── settings.json          # Project-specific settings
-├── spec.md               # Project specification
-└── analysis.json         # Project structure analysis
-```
-
-### Global Data (`DATA_DIR`, default `./data`)
-
-```
-data/
-├── settings.json          # Global settings, profiles, shortcuts
-├── credentials.json       # API keys
-├── sessions-metadata.json # Chat session metadata
-└── agent-sessions/        # Conversation histories
-```
-
-## Import Conventions
-
-Always import from shared packages, never from old paths:
-
-```typescript
-// ✅ Correct
-import type { Feature, ExecuteOptions } from '@automaker/types';
-import { createLogger, classifyError } from '@automaker/utils';
-import { getEnhancementPrompt } from '@automaker/prompts';
-import { getFeatureDir, ensureAutomakerDir } from '@automaker/platform';
-import { resolveModelString } from '@automaker/model-resolver';
-import { resolveDependencies } from '@automaker/dependency-resolver';
-import { getGitRepositoryDiffs } from '@automaker/git-utils';
-
-// ❌ Never import from old paths
-import { Feature } from '../services/feature-loader'; // Wrong
-import { createLogger } from '../lib/logger'; // Wrong
-```
-
-## Key Patterns
-
-### Event-Driven Architecture
-
-All server operations emit events that stream to the frontend via WebSocket. Events are created using `createEventEmitter()` from `lib/events.ts`.
-
-### Git Worktree Isolation
-
-Each feature executes in an isolated git worktree, created via `@automaker/git-utils`. This protects the main branch during AI agent execution.
-
-### Context Files
-
-Project-specific rules are stored in `.automaker/context/` and automatically loaded into agent prompts via `loadContextFiles()` from `@automaker/utils`.
-
-### Model Resolution
-
-Use `resolveModelString()` from `@automaker/model-resolver` to convert model aliases:
-
-- `haiku` → `claude-haiku-4-5`
-- `sonnet` → `claude-sonnet-4-20250514`
-- `opus` → `claude-opus-4-5-20251101`
-
-## Environment Variables
-
-- `ANTHROPIC_API_KEY` - Anthropic API key (or use Claude Code CLI auth)
-- `PORT` - Server port (default: 3008)
-- `DATA_DIR` - Data storage directory (default: ./data)
-- `ALLOWED_ROOT_DIRECTORY` - Restrict file operations to specific directory
-- `AUTOMAKER_MOCK_AGENT=true` - Enable mock agent mode for CI testing

CONTRIBUTING.md

@@ -1,685 +0,0 @@
-# Contributing to Automaker
-
-Thank you for your interest in contributing to Automaker! We're excited to have you join our community of developers building the future of autonomous AI development.
-
-Automaker is an autonomous AI development studio that provides a Kanban-based workflow where AI agents implement features in isolated git worktrees. Whether you're fixing bugs, adding features, improving documentation, or suggesting ideas, your contributions help make this project better for everyone.
-
-This guide will help you get started with contributing to Automaker. Please take a moment to read through these guidelines to ensure a smooth contribution process.
-
-## Contribution License Agreement
-
-**Important:** By submitting, pushing, or contributing any code, documentation, pull requests, issues, or other materials to the Automaker project, you agree to assign all right, title, and interest in and to your contributions, including all copyrights, patents, and other intellectual property rights, to the Core Contributors of Automaker. This assignment is irrevocable and includes the right to use, modify, distribute, and monetize your contributions in any manner.
-
-**You understand and agree that you will have no right to receive any royalties, compensation, or other financial benefits from any revenue, income, or commercial use generated from your contributed code or any derivative works thereof.** All contributions are made without expectation of payment or financial return.
-
-For complete details on contribution terms and rights assignment, please review [Section 5 (CONTRIBUTIONS AND RIGHTS ASSIGNMENT) of the LICENSE](LICENSE#5-contributions-and-rights-assignment).
-
-## Table of Contents
-
-- [Contributing to Automaker](#contributing-to-automaker)
-  - [Table of Contents](#table-of-contents)
-  - [Getting Started](#getting-started)
-    - [Prerequisites](#prerequisites)
-    - [Fork and Clone](#fork-and-clone)
-    - [Development Setup](#development-setup)
-    - [Project Structure](#project-structure)
-  - [Pull Request Process](#pull-request-process)
-    - [Branch Naming Convention](#branch-naming-convention)
-    - [Commit Message Format](#commit-message-format)
-    - [Submitting a Pull Request](#submitting-a-pull-request)
-      - [1. Prepare Your Changes](#1-prepare-your-changes)
-      - [2. Run Pre-submission Checks](#2-run-pre-submission-checks)
-      - [3. Push Your Changes](#3-push-your-changes)
-      - [4. Open a Pull Request](#4-open-a-pull-request)
-      - [PR Requirements Checklist](#pr-requirements-checklist)
-    - [Review Process](#review-process)
-      - [What to Expect](#what-to-expect)
-      - [Review Focus Areas](#review-focus-areas)
-      - [Responding to Feedback](#responding-to-feedback)
-      - [Approval Criteria](#approval-criteria)
-      - [Getting Help](#getting-help)
-  - [Code Style Guidelines](#code-style-guidelines)
-  - [Testing Requirements](#testing-requirements)
-    - [Running Tests](#running-tests)
-    - [Test Frameworks](#test-frameworks)
-      - [End-to-End Tests (Playwright)](#end-to-end-tests-playwright)
-      - [Unit Tests (Vitest)](#unit-tests-vitest)
-    - [Writing Tests](#writing-tests)
-      - [When to Write Tests](#when-to-write-tests)
-    - [CI/CD Pipeline](#cicd-pipeline)
-      - [CI Checks](#ci-checks)
-      - [CI Testing Environment](#ci-testing-environment)
-      - [Viewing CI Results](#viewing-ci-results)
-      - [Common CI Failures](#common-ci-failures)
-    - [Coverage Requirements](#coverage-requirements)
-  - [Issue Reporting](#issue-reporting)
-    - [Bug Reports](#bug-reports)
-      - [Before Reporting](#before-reporting)
-      - [Bug Report Template](#bug-report-template)
-    - [Feature Requests](#feature-requests)
-      - [Before Requesting](#before-requesting)
-      - [Feature Request Template](#feature-request-template)
-    - [Security Issues](#security-issues)
-
----
-
-## Getting Started
-
-### Prerequisites
-
-Before contributing to Automaker, ensure you have the following installed on your system:
-
-- **Node.js 18+** (tested with Node.js 22)
-  - Download from [nodejs.org](https://nodejs.org/)
-  - Verify installation: `node --version`
-- **npm** (comes with Node.js)
-  - Verify installation: `npm --version`
-- **Git** for version control
-  - Verify installation: `git --version`
-- **Claude Code CLI** or **Anthropic API Key** (for AI agent functionality)
-  - Required to run the AI development features
-
-**Optional but recommended:**
-
-- A code editor with TypeScript support (VS Code recommended)
-- GitHub CLI (`gh`) for easier PR management
-
-### Fork and Clone
-
-1. **Fork the repository** on GitHub
-   - Navigate to [https://github.com/AutoMaker-Org/automaker](https://github.com/AutoMaker-Org/automaker)
-   - Click the "Fork" button in the top-right corner
-   - This creates your own copy of the repository
-
-2. **Clone your fork locally**
-
-   ```bash
-   git clone https://github.com/YOUR_USERNAME/automaker.git
-   cd automaker
-   ```
-
-3. **Add the upstream remote** to keep your fork in sync
-
-   ```bash
-   git remote add upstream https://github.com/AutoMaker-Org/automaker.git
-   ```
-
-4. **Verify remotes**
-   ```bash
-   git remote -v
-   # Should show:
-   # origin    https://github.com/YOUR_USERNAME/automaker.git (fetch)
-   # origin    https://github.com/YOUR_USERNAME/automaker.git (push)
-   # upstream  https://github.com/AutoMaker-Org/automaker.git (fetch)
-   # upstream  https://github.com/AutoMaker-Org/automaker.git (push)
-   ```
-
-### Development Setup
-
-1. **Install dependencies**
-
-   ```bash
-   npm install
-   ```
-
-2. **Build shared packages** (required before running the app)
-
-   ```bash
-   npm run build:packages
-   ```
-
-3. **Start the development server**
-   ```bash
-   npm run dev          # Interactive launcher - choose mode
-   npm run dev:web      # Browser mode (web interface)
-   npm run dev:electron # Desktop app mode
-   ```
-
-**Common development commands:**
-
-| Command                  | Description                      |
-| ------------------------ | -------------------------------- |
-| `npm run dev`            | Interactive development launcher |
-| `npm run dev:web`        | Start in browser mode            |
-| `npm run dev:electron`   | Start desktop app                |
-| `npm run build`          | Build all packages and apps      |
-| `npm run build:packages` | Build shared packages only       |
-| `npm run lint`           | Run ESLint checks                |
-| `npm run format`         | Format code with Prettier        |
-| `npm run format:check`   | Check formatting without changes |
-| `npm run test`           | Run E2E tests (Playwright)       |
-| `npm run test:server`    | Run server unit tests            |
-| `npm run test:packages`  | Run package tests                |
-| `npm run test:all`       | Run all tests                    |
-
-### Project Structure
-
-Automaker is organized as an npm workspace monorepo:
-
-```
-automaker/
-├── apps/
-│   ├── ui/              # React + Vite + Electron frontend
-│   └── server/          # Express + WebSocket backend
-├── libs/
-│   ├── @automaker/types/            # Shared TypeScript types
-│   ├── @automaker/utils/            # Utility functions
-│   ├── @automaker/prompts/          # AI prompt templates
-│   ├── @automaker/platform/         # Platform abstractions
-│   ├── @automaker/model-resolver/   # AI model resolution
-│   ├── @automaker/dependency-resolver/ # Dependency management
-│   └── @automaker/git-utils/        # Git operations
-├── docs/                # Documentation
-└── package.json         # Root package configuration
-```
-
-**Key conventions:**
-
-- Always import from `@automaker/*` shared packages, never use relative paths to `libs/`
-- Frontend code lives in `apps/ui/`
-- Backend code lives in `apps/server/`
-- Shared logic should be in the appropriate `libs/` package
-
----
-
-## Pull Request Process
-
-This section covers everything you need to know about contributing changes through pull requests, from creating your branch to getting your code merged.
-
-### Branch Naming Convention
-
-We use a consistent branch naming pattern to keep our repository organized:
-
-```
-<type>/<description>
-```
-
-**Branch types:**
-
-| Type       | Purpose                  | Example                           |
-| ---------- | ------------------------ | --------------------------------- |
-| `feature`  | New functionality        | `feature/add-user-authentication` |
-| `fix`      | Bug fixes                | `fix/resolve-memory-leak`         |
-| `docs`     | Documentation changes    | `docs/update-contributing-guide`  |
-| `refactor` | Code restructuring       | `refactor/simplify-api-handlers`  |
-| `test`     | Adding or updating tests | `test/add-utils-unit-tests`       |
-| `chore`    | Maintenance tasks        | `chore/update-dependencies`       |
-
-**Guidelines:**
-
-- Use lowercase letters and hyphens (no underscores or spaces)
-- Keep descriptions short but descriptive
-- Include issue number when applicable: `feature/123-add-login`
-
-```bash
-# Create and checkout a new feature branch
-git checkout -b feature/add-dark-mode
-
-# Create a fix branch with issue reference
-git checkout -b fix/456-resolve-login-error
-```
-
-### Commit Message Format
-
-We follow the **Conventional Commits** style for clear, readable commit history:
-
-```
-<type>: <description>
-
-[optional body]
-```
-
-**Commit types:**
-
-| Type       | Purpose                     |
-| ---------- | --------------------------- |
-| `feat`     | New feature                 |
-| `fix`      | Bug fix                     |
-| `docs`     | Documentation only          |
-| `style`    | Formatting (no code change) |
-| `refactor` | Code restructuring          |
-| `test`     | Adding or updating tests    |
-| `chore`    | Maintenance tasks           |
-
-**Guidelines:**
-
-- Use **imperative mood** ("Add feature" not "Added feature")
-- Keep first line under **72 characters**
-- Capitalize the first letter after the type prefix
-- No period at the end of the subject line
-- Add a blank line before the body for detailed explanations
-
-**Examples:**
-
-```bash
-# Simple commit
-git commit -m "feat: Add user authentication flow"
-
-# Commit with body for more context
-git commit -m "fix: Resolve memory leak in WebSocket handler
-
-The connection cleanup was not being called when clients
-disconnected unexpectedly. Added proper cleanup in the
-error handler to prevent memory accumulation."
-
-# Documentation update
-git commit -m "docs: Update API documentation"
-
-# Refactoring
-git commit -m "refactor: Simplify state management logic"
-```
-
-### Submitting a Pull Request
-
-Follow these steps to submit your contribution:
-
-#### 1. Prepare Your Changes
-
-Ensure you've synced with the latest upstream changes:
-
-```bash
-# Fetch latest changes from upstream
-git fetch upstream
-
-# Rebase your branch on main (if needed)
-git rebase upstream/main
-```
-
-#### 2. Run Pre-submission Checks
-
-Before opening your PR, verify everything passes locally:
-
-```bash
-# Run all tests
-npm run test:all
-
-# Check formatting
-npm run format:check
-
-# Run linter
-npm run lint
-
-# Build to verify no compile errors
-npm run build
-```
-
-#### 3. Push Your Changes
-
-```bash
-# Push your branch to your fork
-git push origin feature/your-feature-name
-```
-
-#### 4. Open a Pull Request
-
-1. Go to your fork on GitHub
-2. Click "Compare & pull request" for your branch
-3. Ensure the base repository is `AutoMaker-Org/automaker` and base branch is `main`
-4. Fill out the PR template completely
-
-#### PR Requirements Checklist
-
-Your PR should include:
-
-- [ ] **Clear title** describing the change (use conventional commit format)
-- [ ] **Description** explaining what changed and why
-- [ ] **Link to related issue** (if applicable): `Closes #123` or `Fixes #456`
-- [ ] **All CI checks passing** (format, lint, build, tests)
-- [ ] **No merge conflicts** with main branch
-- [ ] **Tests included** for new functionality
-- [ ] **Documentation updated** if adding/changing public APIs
-
-**Example PR Description:**
-
-```markdown
-## Summary
-
-This PR adds dark mode support to the Automaker UI.
-
-- Implements theme toggle in settings panel
-- Adds CSS custom properties for theme colors
-- Persists theme preference to localStorage
-
-## Related Issue
-
-Closes #123
-
-## Testing
-
-- [x] Tested toggle functionality in Chrome and Firefox
-- [x] Verified theme persists across page reloads
-- [x] Checked accessibility contrast ratios
-
-## Screenshots
-
-[Include before/after screenshots for UI changes]
-```
-
-### Review Process
-
-All contributions go through code review to maintain quality:
-
-#### What to Expect
-
-1. **CI Checks Run First** - Automated checks (format, lint, build, tests) must pass before review
-2. **Maintainer Review** - The project maintainers will review your PR and decide whether to merge it
-3. **Feedback & Discussion** - The reviewer may ask questions or request changes
-4. **Iteration** - Make requested changes and push updates to the same branch
-5. **Approval & Merge** - Once approved and checks pass, your PR will be merged
-
-#### Review Focus Areas
-
-The reviewer checks for:
-
-- **Correctness** - Does the code work as intended?
-- **Clean Code** - Does it follow our [code style guidelines](#code-style-guidelines)?
-- **Test Coverage** - Are new features properly tested?
-- **Documentation** - Are public APIs documented?
-- **Breaking Changes** - Are any breaking changes discussed first?
-
-#### Responding to Feedback
-
-- Respond to **all** review comments, even if just to acknowledge
-- Ask questions if feedback is unclear
-- Push additional commits to address feedback (don't force-push during review)
-- Mark conversations as resolved once addressed
-
-#### Approval Criteria
-
-Your PR is ready to merge when:
-
-- ✅ All CI checks pass
-- ✅ The maintainer has approved the changes
-- ✅ All review comments are addressed
-- ✅ No unresolved merge conflicts
-
-#### Getting Help
-
-If your PR seems stuck:
-
-- Comment asking for status update (mention @webdevcody if needed)
-- Reach out on [Discord](https://discord.gg/jjem7aEDKU)
-- Make sure all checks are passing and you've responded to all feedback
-
----
-
-## Code Style Guidelines
-
-Automaker uses automated tooling to enforce code style. Run `npm run format` to format code and `npm run lint` to check for issues. Pre-commit hooks automatically format staged files before committing.
-
----
-
-## Testing Requirements
-
-Testing helps prevent regressions. Automaker uses **Playwright** for end-to-end testing and **Vitest** for unit tests.
-
-### Running Tests
-
-Use these commands to run tests locally:
-
-| Command                        | Description                           |
-| ------------------------------ | ------------------------------------- |
-| `npm run test`                 | Run E2E tests (Playwright)            |
-| `npm run test:server`          | Run server unit tests (Vitest)        |
-| `npm run test:packages`        | Run shared package tests              |
-| `npm run test:all`             | Run all tests                         |
-| `npm run test:server:coverage` | Run server tests with coverage report |
-
-**Before submitting a PR**, always run the full test suite:
-
-```bash
-npm run test:all
-```
-
-### Test Frameworks
-
-#### End-to-End Tests (Playwright)
-
-E2E tests verify the entire application works correctly from a user's perspective.
-
-- **Framework:** [Playwright](https://playwright.dev/)
-- **Location:** `e2e/` directory
-- **Test ports:** UI on port 3007, Server on port 3008
-
-**Running E2E tests:**
-
-```bash
-# Run all E2E tests
-npm run test
-
-# Run with headed browser (useful for debugging)
-npx playwright test --headed
-
-# Run a specific test file
-npm test --workspace=@automaker/ui -- tests/example.spec.ts
-```
-
-**E2E Test Guidelines:**
-
-- Write tests from a user's perspective
-- Use descriptive test names that explain the scenario
-- Clean up test data after each test
-- Use appropriate timeouts for async operations
-- Prefer `locator` over direct selectors for resilience
-
-#### Unit Tests (Vitest)
-
-Unit tests verify individual functions and modules work correctly in isolation.
-
-- **Framework:** [Vitest](https://vitest.dev/)
-- **Location:** In the `tests/` directory within each package (e.g., `apps/server/tests/`)
-
-**Running unit tests:**
-
-```bash
-# Run all server unit tests
-npm run test:server
-
-# Run with coverage report
-npm run test:server:coverage
-
-# Run package tests
-npm run test:packages
-
-# Run in watch mode during development
-npx vitest --watch
-```
-
-**Unit Test Guidelines:**
-
-- Keep tests small and focused on one behavior
-- Use descriptive test names: `it('should return null when user is not found')`
-- Follow the AAA pattern: Arrange, Act, Assert
-- Mock external dependencies to isolate the unit under test
-- Aim for meaningful coverage, not just line coverage
-
-### Writing Tests
-
-#### When to Write Tests
-
-- **New features:** All new features should include tests
-- **Bug fixes:** Add a test that reproduces the bug before fixing
-- **Refactoring:** Ensure existing tests pass after refactoring
-- **Public APIs:** All public APIs must have test coverage
-
-### CI/CD Pipeline
-
-Automaker uses **GitHub Actions** for continuous integration. Every pull request triggers automated checks.
-
-#### CI Checks
-
-The following checks must pass before your PR can be merged:
-
-| Check             | Description                                   |
-| ----------------- | --------------------------------------------- |
-| **Format**        | Verifies code is formatted with Prettier      |
-| **Build**         | Ensures the project compiles without errors   |
-| **Package Tests** | Runs tests for shared `@automaker/*` packages |
-| **Server Tests**  | Runs server unit tests with coverage          |
-
-#### CI Testing Environment
-
-For CI environments, Automaker supports a mock agent mode:
-
-```bash
-# Enable mock agent mode for CI testing
-AUTOMAKER_MOCK_AGENT=true npm run test
-```
-
-This allows tests to run without requiring a real Claude API connection.
-
-#### Viewing CI Results
-
-1. Go to your PR on GitHub
-2. Scroll to the "Checks" section at the bottom
-3. Click on any failed check to see detailed logs
-4. Fix issues locally and push updates
-
-#### Common CI Failures
-
-| Issue               | Solution                                      |
-| ------------------- | --------------------------------------------- |
-| Format check failed | Run `npm run format` locally                  |
-| Build failed        | Run `npm run build` and fix TypeScript errors |
-| Tests failed        | Run `npm run test:all` locally to reproduce   |
-| Coverage decreased  | Add tests for new code paths                  |
-
-### Coverage Requirements
-
-While we don't enforce strict coverage percentages, we expect:
-
-- **New features:** Should include comprehensive tests
-- **Bug fixes:** Should include a regression test
-- **Critical paths:** Must have test coverage (authentication, data persistence, etc.)
-
-To view coverage reports locally:
-
-```bash
-npm run test:server:coverage
-```
-
-This generates an HTML report you can open in your browser to see which lines are covered.
-
----
-
-## Issue Reporting
-
-Found a bug or have an idea for a new feature? We'd love to hear from you! This section explains how to report issues effectively.
-
-### Bug Reports
-
-When reporting a bug, please provide as much information as possible to help us understand and reproduce the issue.
-
-#### Before Reporting
-
-1. **Search existing issues** - Check if the bug has already been reported
-2. **Try the latest version** - Make sure you're running the latest version of Automaker
-3. **Reproduce the issue** - Verify you can consistently reproduce the bug
-
-#### Bug Report Template
-
-When creating a bug report, include:
-
-- **Title:** A clear, descriptive title summarizing the issue
-- **Environment:**
-  - Operating System and version
-  - Node.js version (`node --version`)
-  - Automaker version or commit hash
-- **Steps to Reproduce:** Numbered list of steps to reproduce the bug
-- **Expected Behavior:** What you expected to happen
-- **Actual Behavior:** What actually happened
-- **Logs/Screenshots:** Any relevant error messages, console output, or screenshots
-
-**Example Bug Report:**
-
-```markdown
-## Bug: WebSocket connection drops after 5 minutes of inactivity
-
-### Environment
-
-- OS: Windows 11
-- Node.js: 22.11.0
-- Automaker: commit abc1234
-
-### Steps to Reproduce
-
-1. Start the application with `npm run dev:web`
-2. Open the Kanban board
-3. Leave the browser tab open for 5+ minutes without interaction
-4. Try to move a card
-
-### Expected Behavior
-
-The card should move to the new column.
-
-### Actual Behavior
-
-The UI shows "Connection lost" and the card doesn't move.
-
-### Logs
-
-[WebSocket] Connection closed: 1006
-```
-
-### Feature Requests
-
-We welcome ideas for improving Automaker! Here's how to submit a feature request:
-
-#### Before Requesting
-
-1. **Check existing issues** - Your idea may already be proposed or in development
-2. **Consider scope** - Think about whether the feature fits Automaker's mission as an autonomous AI development studio
-
-#### Feature Request Template
-
-A good feature request includes:
-
-- **Title:** A brief, descriptive title
-- **Problem Statement:** What problem does this feature solve?
-- **Proposed Solution:** How do you envision this working?
-- **Alternatives Considered:** What other approaches did you consider?
-- **Additional Context:** Mockups, examples, or references that help explain your idea
-
-**Example Feature Request:**
-
-```markdown
-## Feature: Dark Mode Support
-
-### Problem Statement
-
-Working late at night, the bright UI causes eye strain and doesn't match
-my system's dark theme preference.
-
-### Proposed Solution
-
-Add a theme toggle in the settings panel that allows switching between
-light and dark modes. Ideally, it should also detect system preference.
-
-### Alternatives Considered
-
-- Browser extension to force dark mode (doesn't work well with custom styling)
-- Custom CSS override (breaks with updates)
-
-### Additional Context
-
-Similar to how VS Code handles themes - a dropdown in settings with
-immediate preview.
-```
-
-### Security Issues
-
-**Important:** If you discover a security vulnerability, please do NOT open a public issue. Instead:
-
-1. Join our [Discord server](https://discord.gg/jjem7aEDKU) and send a direct message to the user `@webdevcody`
-2. Include detailed steps to reproduce
-3. Allow time for us to address the issue before public disclosure
-
-We take security seriously and appreciate responsible disclosure.
-
----
-
-For license and contribution terms, see the [LICENSE](LICENSE) file in the repository root and the [README.md](README.md#license) for more details.
-
----
-
-Thank you for contributing to Automaker!

DISCLAIMER.md

@@ -30,26 +30,6 @@ 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:

Dockerfile

@@ -1,154 +0,0 @@
-# Automaker Multi-Stage Dockerfile
-# Single Dockerfile for both server and UI builds
-# Usage:
-#   docker build --target server -t automaker-server .
-#   docker build --target ui -t automaker-ui .
-# Or use docker-compose which selects targets automatically
-
-# =============================================================================
-# BASE STAGE - Common setup for all builds (DRY: defined once, used by all)
-# =============================================================================
-FROM node:22-alpine AS base
-
-# Install build dependencies for native modules (node-pty)
-RUN apk add --no-cache python3 make g++
-
-WORKDIR /app
-
-# Copy root package files
-COPY package*.json ./
-
-# Copy all libs package.json files (centralized - add new libs here)
-COPY libs/types/package*.json ./libs/types/
-COPY libs/utils/package*.json ./libs/utils/
-COPY libs/prompts/package*.json ./libs/prompts/
-COPY libs/platform/package*.json ./libs/platform/
-COPY libs/model-resolver/package*.json ./libs/model-resolver/
-COPY libs/dependency-resolver/package*.json ./libs/dependency-resolver/
-COPY libs/git-utils/package*.json ./libs/git-utils/
-
-# Copy scripts (needed by npm workspace)
-COPY scripts ./scripts
-
-# =============================================================================
-# SERVER BUILD STAGE
-# =============================================================================
-FROM base AS server-builder
-
-# Copy server-specific package.json
-COPY apps/server/package*.json ./apps/server/
-
-# Install dependencies (--ignore-scripts to skip husky/prepare, then rebuild native modules)
-RUN npm ci --ignore-scripts && npm rebuild node-pty
-
-# Copy all source files
-COPY libs ./libs
-COPY apps/server ./apps/server
-
-# Build packages in dependency order, then build server
-RUN npm run build:packages && npm run build --workspace=apps/server
-
-# =============================================================================
-# SERVER PRODUCTION STAGE
-# =============================================================================
-FROM node:22-alpine AS server
-
-# Install git, curl, bash (for terminal), and GitHub CLI (pinned version, multi-arch)
-RUN apk add --no-cache git curl bash && \
-    GH_VERSION="2.63.2" && \
-    ARCH=$(uname -m) && \
-    case "$ARCH" in \
-        x86_64) GH_ARCH="amd64" ;; \
-        aarch64|arm64) GH_ARCH="arm64" ;; \
-        *) echo "Unsupported architecture: $ARCH" && exit 1 ;; \
-    esac && \
-    curl -L "https://github.com/cli/cli/releases/download/v${GH_VERSION}/gh_${GH_VERSION}_linux_${GH_ARCH}.tar.gz" -o gh.tar.gz && \
-    tar -xzf gh.tar.gz && \
-    mv gh_${GH_VERSION}_linux_${GH_ARCH}/bin/gh /usr/local/bin/gh && \
-    rm -rf gh.tar.gz gh_${GH_VERSION}_linux_${GH_ARCH}
-
-# Install Claude CLI globally
-RUN npm install -g @anthropic-ai/claude-code
-
-WORKDIR /app
-
-# Create non-root user
-RUN addgroup -g 1001 -S automaker && \
-    adduser -S automaker -u 1001
-
-# Copy root package.json (needed for workspace resolution)
-COPY --from=server-builder /app/package*.json ./
-
-# Copy built libs (workspace packages are symlinked in node_modules)
-COPY --from=server-builder /app/libs ./libs
-
-# Copy built server
-COPY --from=server-builder /app/apps/server/dist ./apps/server/dist
-COPY --from=server-builder /app/apps/server/package*.json ./apps/server/
-
-# Copy node_modules (includes symlinks to libs)
-COPY --from=server-builder /app/node_modules ./node_modules
-
-# Create data and projects directories
-RUN mkdir -p /data /projects && chown automaker:automaker /data /projects
-
-# Configure git for mounted volumes and authentication
-# Use --system so it's not overwritten by mounted user .gitconfig
-RUN git config --system --add safe.directory '*' && \
-    # Use gh as credential helper (works with GH_TOKEN env var)
-    git config --system credential.helper '!gh auth git-credential'
-
-# Switch to non-root user
-USER automaker
-
-# Environment variables
-ENV PORT=3008
-ENV DATA_DIR=/data
-
-# Expose port
-EXPOSE 3008
-
-# Health check (using curl since it's already installed, more reliable than busybox wget)
-HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
-    CMD curl -f http://localhost:3008/api/health || exit 1
-
-# Start server
-CMD ["node", "apps/server/dist/index.js"]
-
-# =============================================================================
-# UI BUILD STAGE
-# =============================================================================
-FROM base AS ui-builder
-
-# Copy UI-specific package.json
-COPY apps/ui/package*.json ./apps/ui/
-
-# Install dependencies (--ignore-scripts to skip husky and build:packages in prepare script)
-RUN npm ci --ignore-scripts
-
-# Copy all source files
-COPY libs ./libs
-COPY apps/ui ./apps/ui
-
-# Build packages in dependency order, then build UI
-# VITE_SERVER_URL tells the UI where to find the API server
-# Use ARG to allow overriding at build time: --build-arg VITE_SERVER_URL=http://api.example.com
-ARG VITE_SERVER_URL=http://localhost:3008
-ENV VITE_SKIP_ELECTRON=true
-ENV VITE_SERVER_URL=${VITE_SERVER_URL}
-RUN npm run build:packages && npm run build --workspace=apps/ui
-
-# =============================================================================
-# UI PRODUCTION STAGE
-# =============================================================================
-FROM nginx:alpine AS ui
-
-# Copy built files
-COPY --from=ui-builder /app/apps/ui/dist /usr/share/nginx/html
-
-# Copy nginx config for SPA routing
-COPY apps/ui/nginx.conf /etc/nginx/conf.d/default.conf
-
-EXPOSE 80
-
-CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <img src="apps/ui/public/readme_logo.svg" alt="Automaker Logo" height="80" />
+  <img src="apps/app/public/readme_logo.png" alt="Automaker Logo" height="80" />
 </p>
 
 > **[!TIP]**
@@ -8,7 +8,7 @@
 >
 > 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-gh).
+> **Learn how:** Master these same techniques and workflows in the [Agentic Jumpstart course](https://agenticjumpstart.com/?utm=automaker).
 
 # Automaker
 
@@ -19,7 +19,7 @@
 
 - [What Makes Automaker Different?](#what-makes-automaker-different)
   - [The Workflow](#the-workflow)
-  - [Powered by Claude Agent SDK](#powered-by-claude-agent-sdk)
+  - [Powered by Claude Code](#powered-by-claude-code)
   - [Why This Matters](#why-this-matters)
 - [Security Disclaimer](#security-disclaimer)
 - [Community & Support](#community--support)
@@ -28,36 +28,22 @@
   - [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)
-  - [Environment Configuration](#environment-configuration)
-  - [Authentication Setup](#authentication-setup)
+  - [Authentication Options](#authentication-options)
+  - [Persistent Setup (Optional)](#persistent-setup-optional)
 - [Features](#features)
-  - [Core Workflow](#core-workflow)
-  - [AI & Planning](#ai--planning)
-  - [Project Management](#project-management)
-  - [Collaboration & Review](#collaboration--review)
-  - [Developer Tools](#developer-tools)
-  - [Advanced Features](#advanced-features)
 - [Tech Stack](#tech-stack)
-  - [Frontend](#frontend)
-  - [Backend](#backend)
-  - [Testing & Quality](#testing--quality)
-  - [Shared Libraries](#shared-libraries)
-- [Available Views](#available-views)
-- [Architecture](#architecture)
-  - [Monorepo Structure](#monorepo-structure)
-  - [How It Works](#how-it-works)
-  - [Key Architectural Patterns](#key-architectural-patterns)
-  - [Security & Isolation](#security--isolation)
-  - [Data Storage](#data-storage)
 - [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 Agent SDK automatically implement them. Built with React, Vite, Electron, and Express, Automaker provides a complete workflow for managing AI agents through a desktop application (or web browser), with features like real-time streaming, git worktree isolation, plan approval, and multi-agent task execution.
+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)
 
@@ -73,27 +59,43 @@ Traditional development tools help you write code. Automaker helps you **orchest
 4. **Review & Verify** - Review the changes, run tests, and approve when ready
 5. **Ship Faster** - Build entire applications in days, not weeks
 
-### Powered by Claude Agent SDK
+### Powered by Claude Code
 
-Automaker leverages the [Claude Agent SDK](https://www.npmjs.com/package/@anthropic-ai/claude-agent-sdk) 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. The SDK provides autonomous AI agents that can use tools, make decisions, and complete complex multi-step tasks without constant human intervention.
+Automaker leverages the [Claude Agent SDK](https://docs.anthropic.com/en/docs/claude-code) to give AI agents full access to your codebase. Agents can read files, write code, execute commands, run tests, and make git commits—all while working in isolated git worktrees to keep your main branch safe.
 
 ### Why This Matters
 
 The future of software development is **agentic coding**—where developers become architects directing AI agents rather than manual coders. Automaker puts this future in your hands today, letting you experience what it's like to build software 10x faster with AI agents handling the implementation while you focus on architecture and business logic.
 
+---
+
+> **[!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)**
+
+---
+
 ## 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:** [Agentic Jumpstart Discord](https://discord.gg/jjem7aEDKU)
+👉 **Join the Discord:**  
+https://discord.gg/jjem7aEDKU
 
 ---
 
@@ -101,49 +103,25 @@ In the Discord, you can:
 
 ### Prerequisites
 
-- **Node.js 18+** (tested with Node.js 22)
-- **npm** (comes with Node.js)
-- **Authentication** (choose one):
-  - **[Claude Code CLI](https://code.claude.com/docs/en/overview)** (recommended) - Install and authenticate, credentials used automatically
-  - **Anthropic API Key** - Direct API key for Claude Agent SDK ([get one here](https://console.anthropic.com/))
+- Node.js 18+
+- npm
+- [Claude Code CLI](https://docs.anthropic.com/en/docs/claude-code) installed and authenticated
 
 ### Quick Start
 
 ```bash
-# 1. Clone the repository
+# 1. Clone the repo
 git clone https://github.com/AutoMaker-Org/automaker.git
 cd automaker
 
 # 2. Install dependencies
 npm install
 
-# 3. Build shared packages (Now can be skipped npm install / run dev does it automaticly)
-npm run build:packages
-
-# 4. Set up authentication (skip if using Claude Code CLI)
-# If using Claude Code CLI: credentials are detected automatically
-# If using API key directly, choose one method:
-
-# Option A: Environment variable
-export ANTHROPIC_API_KEY="sk-ant-..."
-
-# Option B: Create .env file in project root
-echo "ANTHROPIC_API_KEY=sk-ant-..." > .env
-
-# 5. Start Automaker (interactive launcher)
+# 3. Run Automaker (pick your mode)
 npm run dev
-# Choose between:
-#   1. Web Application (browser at localhost:3007)
-#   2. Desktop Application (Electron - recommended)
+# Then choose your run mode when prompted, or use specific commands below
 ```
 
-**Note:** The `npm run dev` command will:
-
-- Check for dependencies and install if needed
-- Install Playwright browsers for E2E tests
-- Kill any processes on ports 3007/3008
-- Present an interactive menu to choose your run mode
-
 ## How to Run
 
 ### Development Mode
@@ -181,162 +159,31 @@ npm run dev:web
 
 ### Building for Production
 
-#### Web Application
-
 ```bash
-# Build for web deployment (uses Vite)
+# Build Next.js app
 npm run build
 
-# Run production build
+# Build Electron app for distribution
+npm run build:electron
+```
+
+### Running Production Build
+
+```bash
+# Start production Next.js server
 npm run start
 ```
 
-#### Desktop Application
-
-```bash
-# Build for current platform (macOS/Windows/Linux)
-npm run build:electron
-
-# Platform-specific builds
-npm run build:electron:mac     # macOS (DMG + ZIP, x64 + arm64)
-npm run build:electron:win     # Windows (NSIS installer, x64)
-npm run build:electron:linux   # Linux (AppImage + DEB, x64)
-
-# Output directory: apps/ui/release/
-```
-
-#### Docker Deployment
-
-Docker provides the most secure way to run Automaker by isolating it from your host filesystem.
-
-```bash
-# Build and run with Docker Compose
-docker-compose up -d
-
-# Access UI at http://localhost:3007
-# API at http://localhost:3008
-
-# View logs
-docker-compose logs -f
-
-# Stop containers
-docker-compose down
-```
-
-##### Configuration
-
-Create a `.env` file in the project root if using API key authentication:
-
-```bash
-# Optional: Anthropic API key (not needed if using Claude CLI authentication)
-ANTHROPIC_API_KEY=sk-ant-...
-```
-
-**Note:** Most users authenticate via Claude CLI instead of API keys. See [Claude CLI Authentication](#claude-cli-authentication-optional) below.
-
-##### Working with Projects (Host Directory Access)
-
-By default, the container is isolated from your host filesystem. To work on projects from your host machine, create a `docker-compose.override.yml` file (gitignored):
-
-```yaml
-services:
-  server:
-    volumes:
-      # Mount your project directories
-      - /path/to/your/project:/projects/your-project
-```
-
-##### Claude CLI Authentication (Optional)
-
-To use Claude Code CLI authentication instead of an API key, mount your Claude CLI config directory:
-
-```yaml
-services:
-  server:
-    volumes:
-      # Linux/macOS
-      - ~/.claude:/home/automaker/.claude
-      # Windows
-      - C:/Users/YourName/.claude:/home/automaker/.claude
-```
-
-**Note:** The Claude CLI config must be writable (do not use `:ro` flag) as the CLI writes debug files.
-
-##### GitHub CLI Authentication (For Git Push/PR Operations)
-
-To enable git push and GitHub CLI operations inside the container:
-
-```yaml
-services:
-  server:
-    volumes:
-      # Mount GitHub CLI config
-      # Linux/macOS
-      - ~/.config/gh:/home/automaker/.config/gh
-      # Windows
-      - 'C:/Users/YourName/AppData/Roaming/GitHub CLI:/home/automaker/.config/gh'
-
-      # Mount git config for user identity (name, email)
-      - ~/.gitconfig:/home/automaker/.gitconfig:ro
-    environment:
-      # GitHub token (required on Windows where tokens are in Credential Manager)
-      # Get your token with: gh auth token
-      - GH_TOKEN=${GH_TOKEN}
-```
-
-Then add `GH_TOKEN` to your `.env` file:
-
-```bash
-GH_TOKEN=gho_your_github_token_here
-```
-
-##### Complete docker-compose.override.yml Example
-
-```yaml
-services:
-  server:
-    volumes:
-      # Your projects
-      - /path/to/project1:/projects/project1
-      - /path/to/project2:/projects/project2
-
-      # Authentication configs
-      - ~/.claude:/home/automaker/.claude
-      - ~/.config/gh:/home/automaker/.config/gh
-      - ~/.gitconfig:/home/automaker/.gitconfig:ro
-    environment:
-      - GH_TOKEN=${GH_TOKEN}
-```
-
-##### Architecture Support
-
-The Docker image supports both AMD64 and ARM64 architectures. The GitHub CLI and Claude CLI are automatically downloaded for the correct architecture during build.
-
 ### Testing
 
-#### End-to-End Tests (Playwright)
-
 ```bash
-npm run test            # Headless E2E tests
-npm run test:headed     # Browser visible E2E tests
+# Run tests headless
+npm run test
+
+# Run tests with browser visible
+npm run test:headed
 ```
 
-#### Unit Tests (Vitest)
-
-```bash
-npm run test:server              # Server unit tests
-npm run test:server:coverage     # Server tests with coverage
-npm run test:packages            # All shared package tests
-npm run test:all                 # Packages + server tests
-```
-
-#### Test Configuration
-
-- E2E tests run on ports 3007 (UI) and 3008 (server)
-- Automatically starts test servers before running
-- Uses Chromium browser via Playwright
-- Mock agent mode available in CI with `AUTOMAKER_MOCK_AGENT=true`
-
 ### Linting
 
 ```bash
@@ -344,300 +191,59 @@ npm run test:all                 # Packages + server tests
 npm run lint
 ```
 
-### Environment Configuration
+### Authentication Options
 
-#### Authentication (if not using Claude Code CLI)
+Automaker supports multiple authentication methods (in order of priority):
 
-- `ANTHROPIC_API_KEY` - Your Anthropic API key for Claude Agent SDK (not needed if using Claude Code CLI)
+| Method           | Environment Variable | Description                     |
+| ---------------- | -------------------- | ------------------------------- |
+| API Key (env)    | `ANTHROPIC_API_KEY`  | Anthropic API key               |
+| API Key (stored) | —                    | Anthropic API key stored in app |
 
-#### Optional - Server
-
-- `PORT` - Server port (default: 3008)
-- `DATA_DIR` - Data storage directory (default: ./data)
-- `ENABLE_REQUEST_LOGGING` - HTTP request logging (default: true)
-
-#### Optional - Security
-
-- `AUTOMAKER_API_KEY` - Optional API authentication for the server
-- `ALLOWED_ROOT_DIRECTORY` - Restrict file operations to specific directory
-- `CORS_ORIGIN` - CORS policy (default: \*)
-
-#### Optional - Development
-
-- `VITE_SKIP_ELECTRON` - Skip Electron in dev mode
-- `OPEN_DEVTOOLS` - Auto-open DevTools in Electron
-
-### Authentication Setup
-
-#### Option 1: Claude Code CLI (Recommended)
-
-Install and authenticate the Claude Code CLI following the [official quickstart guide](https://code.claude.com/docs/en/quickstart).
-
-Once authenticated, Automaker will automatically detect and use your CLI credentials. No additional configuration needed!
-
-#### Option 2: Direct API Key
-
-If you prefer not to use the CLI, you can provide an Anthropic API key directly using one of these methods:
-
-##### 2a. Shell Configuration
+### Persistent Setup (Optional)
 
 Add to your `~/.bashrc` or `~/.zshrc`:
 
 ```bash
-export ANTHROPIC_API_KEY="sk-ant-..."
+export ANTHROPIC_API_KEY="YOUR_API_KEY_HERE"
 ```
 
-Then restart your terminal or run `source ~/.bashrc` (or `source ~/.zshrc`).
-
-##### 2b. .env File
-
-Create a `.env` file in the project root (gitignored):
-
-```bash
-ANTHROPIC_API_KEY=sk-ant-...
-PORT=3008
-DATA_DIR=./data
-```
-
-##### 2c. In-App Storage
-
-The application can store your API key securely in the settings UI. The key is persisted in the `DATA_DIR` directory.
+Then restart your terminal or run `source ~/.bashrc`.
 
 ## Features
 
-### Core Workflow
-
 - 📋 **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"
-- 🔀 **Git Worktree Isolation** - Each feature executes in isolated git worktrees to protect your main branch
-- 📡 **Real-time Streaming** - Watch AI agents work in real-time with live tool usage, progress updates, and task completion
-- 🔄 **Follow-up Instructions** - Send additional instructions to running agents without stopping them
-
-### AI & Planning
-
-- 🧠 **Multi-Model Support** - Choose from Claude Opus, Sonnet, and Haiku per feature
-- 💭 **Extended Thinking** - Enable thinking modes (none, medium, deep, ultra) for complex problem-solving
-- 📝 **Planning Modes** - Four planning levels: skip (direct implementation), lite (quick plan), spec (task breakdown), full (phased execution)
-- ✅ **Plan Approval** - Review and approve AI-generated plans before implementation begins
-- 📊 **Multi-Agent Task Execution** - Spec mode spawns dedicated agents per task for focused implementation
-
-### Project Management
-
-- 🔍 **Project Analysis** - AI-powered codebase analysis to understand your project structure
-- 💡 **Feature Suggestions** - AI-generated feature suggestions based on project analysis
-- 📁 **Context Management** - Add markdown, images, and documentation files that agents automatically reference
-- 🔗 **Dependency Blocking** - Features can depend on other features, enforcing execution order
-- 🌳 **Graph View** - Visualize feature dependencies with interactive graph visualization
-- 📋 **GitHub Integration** - Import issues, validate feasibility, and convert to tasks automatically
-
-### Collaboration & Review
-
-- 🧪 **Verification Workflow** - Features move to "Waiting Approval" for review and testing
-- 💬 **Agent Chat** - Interactive chat sessions with AI agents for exploratory work
-- 👤 **AI Profiles** - Create custom agent configurations with different prompts, models, and settings
-- 📜 **Session History** - Persistent chat sessions across restarts with full conversation history
-- 🔍 **Git Diff Viewer** - Review changes made by agents before approving
-
-### Developer Tools
-
-- 🖥️ **Integrated Terminal** - Full terminal access with tabs, splits, and persistent sessions
-- 🖼️ **Image Support** - Attach screenshots and diagrams to feature descriptions for visual context
-- ⚡ **Concurrent Execution** - Configure how many features can run simultaneously (default: 3)
-- ⌨️ **Keyboard Shortcuts** - Fully customizable shortcuts for navigation and actions
-- 🎨 **Theme System** - 25+ themes including Dark, Light, Dracula, Nord, Catppuccin, and more
-- 🖥️ **Cross-Platform** - Desktop app for macOS (x64, arm64), Windows (x64), and Linux (x64)
-- 🌐 **Web Mode** - Run in browser or as Electron desktop app
-
-### Advanced Features
-
-- 🔐 **Docker Isolation** - Security-focused Docker deployment with no host filesystem access
-- 🎯 **Worktree Management** - Create, switch, commit, and create PRs from worktrees
-- 📊 **Usage Tracking** - Monitor Claude API usage with detailed metrics
-- 🔊 **Audio Notifications** - Optional completion sounds (mutable in settings)
-- 💾 **Auto-save** - All work automatically persisted to `.automaker/` directory
+- 🧠 **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
 
-### Frontend
-
-- **React 19** - UI framework
-- **Vite 7** - Build tool and development server
-- **Electron 39** - Desktop application framework
-- **TypeScript 5.9** - Type safety
-- **TanStack Router** - File-based routing
-- **Zustand 5** - State management with persistence
-- **Tailwind CSS 4** - Utility-first styling with 25+ themes
-- **Radix UI** - Accessible component primitives
-- **dnd-kit** - Drag and drop for Kanban board
-- **@xyflow/react** - Graph visualization for dependencies
-- **xterm.js** - Integrated terminal emulator
-- **CodeMirror 6** - Code editor for XML/syntax highlighting
-- **Lucide Icons** - Icon library
-
-### Backend
-
-- **Node.js** - JavaScript runtime with ES modules
-- **Express 5** - HTTP server framework
-- **TypeScript 5.9** - Type safety
-- **Claude Agent SDK** - AI agent integration (@anthropic-ai/claude-agent-sdk)
-- **WebSocket (ws)** - Real-time event streaming
-- **node-pty** - PTY terminal sessions
-
-### Testing & Quality
-
-- **Playwright** - End-to-end testing
-- **Vitest** - Unit testing framework
-- **ESLint 9** - Code linting
-- **Prettier 3** - Code formatting
-- **Husky** - Git hooks for pre-commit formatting
-
-### Shared Libraries
-
-- **@automaker/types** - Shared TypeScript definitions
-- **@automaker/utils** - Logging, error handling, image processing
-- **@automaker/prompts** - AI prompt templates
-- **@automaker/platform** - Path management and security
-- **@automaker/model-resolver** - Claude model alias resolution
-- **@automaker/dependency-resolver** - Feature dependency ordering
-- **@automaker/git-utils** - Git operations and worktree management
-
-## Available Views
-
-Automaker provides several specialized views accessible via the sidebar or keyboard shortcuts:
-
-| View               | Shortcut | Description                                                                                      |
-| ------------------ | -------- | ------------------------------------------------------------------------------------------------ |
-| **Board**          | `K`      | Kanban board for managing feature workflow (Backlog → In Progress → Waiting Approval → Verified) |
-| **Agent**          | `A`      | Interactive chat sessions with AI agents for exploratory work and questions                      |
-| **Spec**           | `D`      | Project specification editor with AI-powered generation and feature suggestions                  |
-| **Context**        | `C`      | Manage context files (markdown, images) that AI agents automatically reference                   |
-| **Profiles**       | `M`      | Create and manage AI agent profiles with custom prompts and configurations                       |
-| **Settings**       | `S`      | Configure themes, shortcuts, defaults, authentication, and more                                  |
-| **Terminal**       | `T`      | Integrated terminal with tabs, splits, and persistent sessions                                   |
-| **GitHub Issues**  | -        | Import and validate GitHub issues, convert to tasks                                              |
-| **Running Agents** | -        | View all active agents across projects with status and progress                                  |
-
-### Keyboard Navigation
-
-All shortcuts are customizable in Settings. Default shortcuts:
-
-- **Navigation:** `K` (Board), `A` (Agent), `D` (Spec), `C` (Context), `S` (Settings), `M` (Profiles), `T` (Terminal)
-- **UI:** `` ` `` (Toggle sidebar)
-- **Actions:** `N` (New item in current view), `G` (Start next features), `O` (Open project), `P` (Project picker)
-- **Projects:** `Q`/`E` (Cycle previous/next project)
-
-## Architecture
-
-### Monorepo Structure
-
-Automaker is built as an npm workspace monorepo with two main applications and seven shared packages:
-
-```text
-automaker/
-├── apps/
-│   ├── ui/          # React + Vite + Electron frontend
-│   └── server/      # Express + WebSocket backend
-└── libs/            # Shared packages
-    ├── types/                  # Core TypeScript definitions
-    ├── utils/                  # Logging, errors, utilities
-    ├── prompts/                # AI prompt templates
-    ├── platform/               # Path management, security
-    ├── model-resolver/         # Claude model aliasing
-    ├── dependency-resolver/    # Feature dependency ordering
-    └── git-utils/              # Git operations & worktree management
-```
-
-### How It Works
-
-1. **Feature Definition** - Users create feature cards on the Kanban board with descriptions, images, and configuration
-2. **Git Worktree Creation** - When a feature starts, a git worktree is created for isolated development
-3. **Agent Execution** - Claude Agent SDK executes in the worktree with full file system and command access
-4. **Real-time Streaming** - Agent output streams via WebSocket to the frontend for live monitoring
-5. **Plan Approval** (optional) - For spec/full planning modes, agents generate plans that require user approval
-6. **Multi-Agent Tasks** (spec mode) - Each task in the spec gets a dedicated agent for focused implementation
-7. **Verification** - Features move to "Waiting Approval" where changes can be reviewed via git diff
-8. **Integration** - After approval, changes can be committed and PRs created from the worktree
-
-### Key Architectural Patterns
-
-- **Event-Driven Architecture** - All server operations emit events that stream to the frontend
-- **Provider Pattern** - Extensible AI provider system (currently Claude, designed for future providers)
-- **Service-Oriented Backend** - Modular services for agent management, features, terminals, settings
-- **State Management** - Zustand with persistence for frontend state across restarts
-- **File-Based Storage** - No database; features stored as JSON files in `.automaker/` directory
-
-### Security & Isolation
-
-- **Git Worktrees** - Each feature executes in an isolated git worktree, protecting your main branch
-- **Path Sandboxing** - Optional `ALLOWED_ROOT_DIRECTORY` restricts file access
-- **Docker Isolation** - Recommended deployment uses Docker with no host filesystem access
-- **Plan Approval** - Optional plan review before implementation prevents unwanted changes
-
-### Data Storage
-
-Automaker uses a file-based storage system (no database required):
-
-#### Per-Project Data
-
-Stored in `{projectPath}/.automaker/`:
-
-```text
-.automaker/
-├── features/              # Feature JSON files and images
-│   └── {featureId}/
-│       ├── feature.json   # Feature metadata
-│       ├── agent-output.md # AI agent output log
-│       └── images/        # Attached images
-├── context/               # Context files for AI agents
-├── settings.json          # Project-specific settings
-├── spec.md               # Project specification
-├── analysis.json         # Project structure analysis
-└── feature-suggestions.json # AI-generated suggestions
-```
-
-#### Global Data
-
-Stored in `DATA_DIR` (default `./data`):
-
-```text
-data/
-├── settings.json          # Global settings, profiles, shortcuts
-├── credentials.json       # API keys (encrypted)
-├── sessions-metadata.json # Chat session metadata
-└── agent-sessions/        # Conversation histories
-    └── {sessionId}.json
-```
-
----
-
-> **[!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)**
-
----
+- [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
 
-### Documentation
+To learn more about Next.js, take a look at the following resources:
 
-- [Contributing Guide](./CONTRIBUTING.md) - How to contribute to Automaker
-- [Project Documentation](./docs/) - Architecture guides, patterns, and developer docs
-- [Docker Isolation Guide](./docs/docker-isolation.md) - Security-focused Docker deployment
-- [Shared Packages Guide](./docs/llm-shared-packages.md) - Using monorepo packages
-
-### Community
-
-Join the **Agentic Jumpstart** Discord to connect with other builders exploring **agentic coding**:
-
-👉 [Agentic Jumpstart Discord](https://discord.gg/jjem7aEDKU)
+- [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
 
@@ -646,16 +252,19 @@ 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:**

REFACTORING_CANDIDATES.md

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

apps/app/.gitignore

@@ -13,9 +13,12 @@
 # testing
 /coverage
 
-# Vite
-/dist/
-/dist-electron/
+# next.js
+/.next/
+/out/
+
+# production
+/build
 
 # misc
 .DS_Store
@@ -30,8 +33,12 @@ yarn-error.log*
 # env files (can opt-in for committing if needed)
 .env*
 
+# vercel
+.vercel
+
 # typescript
 *.tsbuildinfo
+next-env.d.ts
 
 # Playwright
 /test-results/
@@ -40,8 +47,5 @@ yarn-error.log*
 /playwright/.cache/
 
 # Electron
-/release/
+/dist/
 /server-bundle/
-
-# TanStack Router generated
-src/routeTree.gen.ts

apps/app/docs/AGENT_ARCHITECTURE.md

@@ -90,9 +90,9 @@ const {
   clearHistory, // Clear conversation
   error, // Error state
 } = useElectronAgent({
-  sessionId: 'project_xyz',
-  workingDirectory: '/path/to/project',
-  onToolUse: (tool) => console.log('Using:', tool),
+  sessionId: "project_xyz",
+  workingDirectory: "/path/to/project",
+  onToolUse: (tool) => console.log("Using:", tool),
 });
 ```
 
@@ -160,7 +160,7 @@ Each session file contains:
 Session IDs are generated from project paths:
 
 ```typescript
-const sessionId = `project_${projectPath.replace(/[^a-zA-Z0-9]/g, '_')}`;
+const sessionId = `project_${projectPath.replace(/[^a-zA-Z0-9]/g, "_")}`;
 ```
 
 This ensures:

apps/app/docs/SESSION_MANAGEMENT.md

@@ -7,28 +7,24 @@ The Automaker Agent Chat now supports multiple concurrent sessions, allowing you
 ## Features
 
 ### ✨ Multiple Sessions
-
 - Create unlimited agent sessions per project
 - Each session has its own conversation history
 - Switch between sessions instantly
 - Sessions persist across app restarts
 
 ### 📋 Session Organization
-
 - Custom names for easy identification
 - Last message preview
 - Message count tracking
 - Sort by most recently updated
 
 ### 🗄️ Archive & Delete
-
 - Archive old sessions to declutter
 - Unarchive when needed
 - Permanently delete sessions
 - Confirm before destructive actions
 
 ### 💾 Automatic Persistence
-
 - All sessions auto-save to disk
 - Survive Next.js restarts
 - Survive Electron app restarts
@@ -71,7 +67,6 @@ Click the panel icon in the header to show/hide the session manager.
 4. The new session is immediately active
 
 **Example session names:**
-
 - "Feature: Dark Mode"
 - "Bug: Login redirect"
 - "Refactor: API layer"
@@ -98,7 +93,6 @@ Click the **"Clear"** button in the chat header to delete all messages from the
 3. Toggle **"Show Archived"** to view archived sessions
 
 **When to archive:**
-
 - Completed features
 - Resolved bugs
 - Old experiments
@@ -123,19 +117,16 @@ Click the **"Clear"** button in the chat header to delete all messages from the
 Sessions are stored in your user data directory:
 
 **macOS:**
-
 ```
 ~/Library/Application Support/automaker/agent-sessions/
 ```
 
 **Windows:**
-
 ```
 %APPDATA%/automaker/agent-sessions/
 ```
 
 **Linux:**
-
 ```
 ~/.config/automaker/agent-sessions/
 ```
@@ -224,14 +215,12 @@ Use prefixes to organize sessions by type:
 ### When to Create Multiple Sessions
 
 **Do create separate sessions for:**
-
 - ✅ Different features
 - ✅ Unrelated bugs
 - ✅ Experimental work
 - ✅ Different contexts or approaches
 
 **Don't create separate sessions for:**
-
 - ❌ Same feature, different iterations
 - ❌ Related bug fixes
 - ❌ Continuation of previous work
@@ -283,7 +272,7 @@ Use prefixes to organize sessions by type:
 
 ## Keyboard Shortcuts
 
-_(Coming soon)_
+*(Coming soon)*
 
 - `Cmd/Ctrl + K` - Create new session
 - `Cmd/Ctrl + [` - Previous session
@@ -295,13 +284,11 @@ _(Coming soon)_
 ### Session Not Saving
 
 **Check:**
-
 - Electron has write permissions
 - Disk space available
 - Check Electron console for errors
 
 **Solution:**
-
 ```bash
 # macOS - Check permissions
 ls -la ~/Library/Application\ Support/automaker/
@@ -313,13 +300,11 @@ chmod -R u+w ~/Library/Application\ Support/automaker/
 ### Can't Switch Sessions
 
 **Check:**
-
 - Session is not archived
 - No errors in console
 - Agent is not currently processing
 
 **Solution:**
-
 - Wait for current message to complete
 - Check for error messages
 - Try clearing and reloading
@@ -327,13 +312,11 @@ chmod -R u+w ~/Library/Application\ Support/automaker/
 ### Session Disappeared
 
 **Check:**
-
 - Not filtered by archive status
 - Not accidentally deleted
 - Check backup files
 
 **Recovery:**
-
 - Toggle "Show Archived"
 - Check filesystem for `.json` files
 - Restore from backup if available
@@ -343,17 +326,15 @@ chmod -R u+w ~/Library/Application\ Support/automaker/
 For developers integrating session management:
 
 ### Create Session
-
 ```typescript
 const result = await window.electronAPI.sessions.create(
-  'Session Name',
-  '/project/path',
-  '/working/directory'
+  "Session Name",
+  "/project/path",
+  "/working/directory"
 );
 ```
 
 ### List Sessions
-
 ```typescript
 const { sessions } = await window.electronAPI.sessions.list(
   false // includeArchived
@@ -361,20 +342,21 @@ const { sessions } = await window.electronAPI.sessions.list(
 ```
 
 ### Update Session
-
 ```typescript
-await window.electronAPI.sessions.update(sessionId, 'New Name', ['tag1', 'tag2']);
+await window.electronAPI.sessions.update(
+  sessionId,
+  "New Name",
+  ["tag1", "tag2"]
+);
 ```
 
 ### Archive/Unarchive
-
 ```typescript
 await window.electronAPI.sessions.archive(sessionId);
 await window.electronAPI.sessions.unarchive(sessionId);
 ```
 
 ### Delete Session
-
 ```typescript
 await window.electronAPI.sessions.delete(sessionId);
 ```

apps/app/electron/.eslintrc.js

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

apps/app/electron/main.js

@@ -0,0 +1,435 @@
+/**
+ * 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

@@ -0,0 +1,37 @@
+/**
+ * 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

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  output: "export",
+};
+
+export default nextConfig;

apps/app/package.json

@@ -0,0 +1,194 @@
+{
+  "name": "@automaker/app",
+  "version": "0.1.0",
+  "description": "An autonomous AI development studio that helps you build software faster using AI-powered agents",
+  "homepage": "https://github.com/AutoMaker-Org/automaker",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/AutoMaker-Org/automaker.git"
+  },
+  "author": {
+    "name": "Cody Seibert",
+    "email": "webdevcody@gmail.com"
+  },
+  "private": true,
+  "license": "Unlicense",
+  "main": "electron/main.js",
+  "scripts": {
+    "dev": "next dev -p 3007",
+    "dev:web": "next dev -p 3007",
+    "dev:electron": "concurrently \"next dev -p 3007\" \"wait-on http://localhost:3007 && electron .\"",
+    "dev:electron:debug": "concurrently \"next dev -p 3007\" \"wait-on http://localhost:3007 && OPEN_DEVTOOLS=true electron .\"",
+    "build": "next build",
+    "build:electron": "node scripts/prepare-server.js && next build && electron-builder",
+    "build:electron:win": "node scripts/prepare-server.js && next build && electron-builder --win",
+    "build:electron:mac": "node scripts/prepare-server.js && next build && electron-builder --mac",
+    "build:electron:linux": "node scripts/prepare-server.js && next build && electron-builder --linux",
+    "postinstall": "electron-builder install-app-deps",
+    "start": "next start",
+    "lint": "eslint",
+    "pretest": "node scripts/setup-e2e-fixtures.js",
+    "test": "playwright test",
+    "test:headed": "playwright test --headed",
+    "dev:electron:wsl": "concurrently \"next dev -p 3007\" \"wait-on http://localhost:3007 && electron . --no-sandbox --disable-gpu\"",
+    "dev:electron:wsl:gpu": "concurrently \"next dev -p 3007\" \"wait-on http://localhost:3007 && MESA_D3D12_DEFAULT_ADAPTER_NAME=NVIDIA electron . --no-sandbox --disable-gpu-sandbox\""
+  },
+  "dependencies": {
+    "@codemirror/lang-xml": "^6.1.0",
+    "@codemirror/theme-one-dark": "^6.1.3",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@lezer/highlight": "^1.2.3",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-slider": "^1.3.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@tanstack/react-query": "^5.90.12",
+    "@uiw/react-codemirror": "^4.25.4",
+    "@xterm/addon-fit": "^0.10.0",
+    "@xterm/addon-webgl": "^0.18.0",
+    "@xterm/xterm": "^5.5.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "dotenv": "^17.2.3",
+    "geist": "^1.5.1",
+    "lucide-react": "^0.556.0",
+    "next": "^16.0.10",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "react-markdown": "^10.1.0",
+    "react-resizable-panels": "^3.0.6",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.4.0",
+    "zustand": "^5.0.9"
+  },
+  "optionalDependencies": {
+    "lightningcss-darwin-arm64": "^1.29.2",
+    "lightningcss-darwin-x64": "^1.29.2",
+    "lightningcss-linux-arm-gnueabihf": "^1.29.2",
+    "lightningcss-linux-arm64-gnu": "^1.29.2",
+    "lightningcss-linux-arm64-musl": "^1.29.2",
+    "lightningcss-linux-x64-gnu": "^1.29.2",
+    "lightningcss-linux-x64-musl": "^1.29.2",
+    "lightningcss-win32-arm64-msvc": "^1.29.2",
+    "lightningcss-win32-x64-msvc": "^1.29.2"
+  },
+  "devDependencies": {
+    "@electron/rebuild": "^4.0.2",
+    "@playwright/test": "^1.57.0",
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "concurrently": "^9.2.1",
+    "electron": "39.2.7",
+    "electron-builder": "^26.0.12",
+    "eslint": "^9",
+    "eslint-config-next": "16.0.7",
+    "tailwindcss": "^4",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "5.9.3",
+    "wait-on": "^9.0.3"
+  },
+  "build": {
+    "appId": "com.automaker.app",
+    "productName": "Automaker",
+    "artifactName": "${productName}-${version}-${arch}.${ext}",
+    "afterPack": "./scripts/rebuild-server-natives.js",
+    "directories": {
+      "output": "dist"
+    },
+    "files": [
+      "electron/**/*",
+      "out/**/*",
+      "public/**/*",
+      "!node_modules/**/*"
+    ],
+    "extraResources": [
+      {
+        "from": "server-bundle/dist",
+        "to": "server"
+      },
+      {
+        "from": "server-bundle/node_modules",
+        "to": "server/node_modules"
+      },
+      {
+        "from": "server-bundle/package.json",
+        "to": "server/package.json"
+      },
+      {
+        "from": "../../.env",
+        "to": ".env",
+        "filter": [
+          "**/*"
+        ]
+      }
+    ],
+    "mac": {
+      "category": "public.app-category.developer-tools",
+      "target": [
+        {
+          "target": "dmg",
+          "arch": [
+            "x64",
+            "arm64"
+          ]
+        },
+        {
+          "target": "zip",
+          "arch": [
+            "x64",
+            "arm64"
+          ]
+        }
+      ],
+      "icon": "public/logo_larger.png"
+    },
+    "win": {
+      "target": [
+        {
+          "target": "nsis",
+          "arch": [
+            "x64"
+          ]
+        }
+      ],
+      "icon": "public/icon.ico"
+    },
+    "linux": {
+      "target": [
+        {
+          "target": "AppImage",
+          "arch": [
+            "x64"
+          ]
+        },
+        {
+          "target": "deb",
+          "arch": [
+            "x64"
+          ]
+        }
+      ],
+      "category": "Development",
+      "icon": "public/logo_larger.png",
+      "maintainer": "webdevcody@gmail.com",
+      "executableName": "automaker"
+    },
+    "nsis": {
+      "oneClick": false,
+      "allowToChangeInstallationDirectory": true,
+      "createDesktopShortcut": true,
+      "createStartMenuShortcut": true
+    }
+  }
+}

apps/app/playwright.config.ts

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

apps/app/postcss.config.mjs

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

apps/app/scripts/prepare-server.js

@@ -16,20 +16,8 @@ const __dirname = dirname(__filename);
 
 const APP_DIR = join(__dirname, '..');
 const SERVER_DIR = join(APP_DIR, '..', 'server');
-const LIBS_DIR = join(APP_DIR, '..', '..', 'libs');
 const BUNDLE_DIR = join(APP_DIR, 'server-bundle');
 
-// Local workspace packages that need to be bundled
-const LOCAL_PACKAGES = [
-  '@automaker/types',
-  '@automaker/utils',
-  '@automaker/prompts',
-  '@automaker/platform',
-  '@automaker/model-resolver',
-  '@automaker/dependency-resolver',
-  '@automaker/git-utils',
-];
-
 console.log('🔧 Preparing server for Electron bundling...\n');
 
 // Step 1: Clean up previous bundle
@@ -47,60 +35,24 @@ execSync('npm run build', { cwd: SERVER_DIR, stdio: 'inherit' });
 console.log('📋 Copying server dist...');
 cpSync(join(SERVER_DIR, 'dist'), join(BUNDLE_DIR, 'dist'), { recursive: true });
 
-// Step 4: Copy local workspace packages
-console.log('📦 Copying local workspace packages...');
-const bundleLibsDir = join(BUNDLE_DIR, 'libs');
-mkdirSync(bundleLibsDir, { recursive: true });
-
-for (const pkgName of LOCAL_PACKAGES) {
-  const pkgDir = pkgName.replace('@automaker/', '');
-  const srcDir = join(LIBS_DIR, pkgDir);
-  const destDir = join(bundleLibsDir, pkgDir);
-
-  if (!existsSync(srcDir)) {
-    console.warn(`⚠️  Warning: Package ${pkgName} not found at ${srcDir}`);
-    continue;
-  }
-
-  mkdirSync(destDir, { recursive: true });
-
-  // Copy dist folder
-  if (existsSync(join(srcDir, 'dist'))) {
-    cpSync(join(srcDir, 'dist'), join(destDir, 'dist'), { recursive: true });
-  }
-
-  // Copy package.json
-  if (existsSync(join(srcDir, 'package.json'))) {
-    cpSync(join(srcDir, 'package.json'), join(destDir, 'package.json'));
-  }
-
-  console.log(`   ✓ ${pkgName}`);
-}
-
-// Step 5: Create a minimal package.json for the server
+// Step 4: Create a minimal package.json for the server
 console.log('📝 Creating server package.json...');
 const serverPkg = JSON.parse(readFileSync(join(SERVER_DIR, 'package.json'), 'utf-8'));
 
-// Replace local package versions with file: references
-const dependencies = { ...serverPkg.dependencies };
-for (const pkgName of LOCAL_PACKAGES) {
-  if (dependencies[pkgName]) {
-    const pkgDir = pkgName.replace('@automaker/', '');
-    dependencies[pkgName] = `file:libs/${pkgDir}`;
-  }
-}
-
 const bundlePkg = {
   name: '@automaker/server-bundle',
   version: serverPkg.version,
   type: 'module',
   main: 'dist/index.js',
-  dependencies,
+  dependencies: serverPkg.dependencies
 };
 
-writeFileSync(join(BUNDLE_DIR, 'package.json'), JSON.stringify(bundlePkg, null, 2));
+writeFileSync(
+  join(BUNDLE_DIR, 'package.json'),
+  JSON.stringify(bundlePkg, null, 2)
+);
 
-// Step 6: Install production dependencies
+// Step 5: Install production dependencies
 console.log('📥 Installing server production dependencies...');
 execSync('npm install --omit=dev', {
   cwd: BUNDLE_DIR,
@@ -108,23 +60,21 @@ execSync('npm install --omit=dev', {
   env: {
     ...process.env,
     // Prevent npm from using workspace resolution
-    npm_config_workspace: '',
-  },
+    npm_config_workspace: ''
+  }
 });
 
-// Step 7: Rebuild native modules for current architecture
+// Step 6: Rebuild native modules for current architecture
 // This is critical for modules like node-pty that have native bindings
 console.log('🔨 Rebuilding native modules for current architecture...');
 try {
   execSync('npm rebuild', {
     cwd: BUNDLE_DIR,
-    stdio: 'inherit',
+    stdio: 'inherit'
   });
   console.log('✅ Native modules rebuilt successfully');
 } catch (error) {
-  console.warn(
-    '⚠️  Warning: Failed to rebuild native modules. Terminal functionality may not work.'
-  );
+  console.warn('⚠️  Warning: Failed to rebuild native modules. Terminal functionality may not work.');
   console.warn('   Error:', error.message);
 }
 

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

@@ -11,7 +11,7 @@ const path = require('path');
 
 const execAsync = promisify(exec);
 
-exports.default = async function (context) {
+exports.default = async function(context) {
   const { appOutDir, electronPlatformName, arch, packager } = context;
   const electronVersion = packager.config.electronVersion;
 
@@ -33,9 +33,19 @@ exports.default = async function (context) {
       'node_modules'
     );
   } else if (electronPlatformName === 'win32') {
-    serverNodeModulesPath = path.join(appOutDir, 'resources', 'server', 'node_modules');
+    serverNodeModulesPath = path.join(
+      appOutDir,
+      'resources',
+      'server',
+      'node_modules'
+    );
   } else {
-    serverNodeModulesPath = path.join(appOutDir, 'resources', 'server', 'node_modules');
+    serverNodeModulesPath = path.join(
+      appOutDir,
+      'resources',
+      'server',
+      'node_modules'
+    );
   }
 
   try {

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

@@ -5,17 +5,17 @@
  * Creates the necessary test fixture directories and files before running Playwright tests
  */
 
-import * as fs from 'fs';
-import * as path from 'path';
-import { fileURLToPath } from 'url';
+import * as fs from "fs";
+import * as path from "path";
+import { fileURLToPath } from "url";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
-// Resolve workspace root (apps/ui/scripts -> workspace root)
-const WORKSPACE_ROOT = path.resolve(__dirname, '../../..');
-const FIXTURE_PATH = path.join(WORKSPACE_ROOT, 'test/fixtures/projectA');
-const SPEC_FILE_PATH = path.join(FIXTURE_PATH, '.automaker/app_spec.txt');
+// Resolve workspace root (apps/app/scripts -> workspace root)
+const WORKSPACE_ROOT = path.resolve(__dirname, "../../..");
+const FIXTURE_PATH = path.join(WORKSPACE_ROOT, "test/fixtures/projectA");
+const SPEC_FILE_PATH = path.join(FIXTURE_PATH, ".automaker/app_spec.txt");
 
 const SPEC_CONTENT = `<app_spec>
   <name>Test Project A</name>
@@ -28,7 +28,7 @@ const SPEC_CONTENT = `<app_spec>
 `;
 
 function setupFixtures() {
-  console.log('Setting up E2E test fixtures...');
+  console.log("Setting up E2E test fixtures...");
   console.log(`Workspace root: ${WORKSPACE_ROOT}`);
   console.log(`Fixture path: ${FIXTURE_PATH}`);
 
@@ -43,7 +43,7 @@ function setupFixtures() {
   fs.writeFileSync(SPEC_FILE_PATH, SPEC_CONTENT);
   console.log(`Created fixture file: ${SPEC_FILE_PATH}`);
 
-  console.log('E2E test fixtures setup complete!');
+  console.log("E2E test fixtures setup complete!");
 }
 
 setupFixtures();

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

@@ -0,0 +1,97 @@
+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;
+
+    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

@@ -0,0 +1,191 @@
+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

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

apps/app/src/app/page.tsx

@@ -0,0 +1,235 @@
+"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;
+    const themeClasses = [
+      "dark",
+      "light",
+      "retro",
+      "dracula",
+      "nord",
+      "monokai",
+      "tokyonight",
+      "solarized",
+      "gruvbox",
+      "catppuccin",
+      "onedark",
+      "synthwave",
+      "red",
+      "cream",
+      "sunset",
+      "gray",
+      "clean",
+    ];
+
+    // Remove all theme classes
+    root.classList.remove(...themeClasses);
+
+    // Apply the effective theme
+    if (themeClasses.includes(effectiveTheme)) {
+      root.classList.add(effectiveTheme);
+    } else if (effectiveTheme === "system") {
+      // System theme - detect OS preference
+      const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+      root.classList.add(isDark ? "dark" : "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/delete-all-archived-sessions-dialog.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   Dialog,
   DialogContent,
@@ -5,9 +7,9 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from '@/components/ui/dialog';
-import { Button } from '@/components/ui/button';
-import { Trash2 } from 'lucide-react';
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Trash2 } from "lucide-react";
 
 interface DeleteAllArchivedSessionsDialogProps {
   open: boolean;
@@ -28,7 +30,8 @@ export function DeleteAllArchivedSessionsDialog({
         <DialogHeader>
           <DialogTitle>Delete All Archived Sessions</DialogTitle>
           <DialogDescription>
-            Are you sure you want to delete all archived sessions? This action cannot be undone.
+            Are you sure you want to delete all archived sessions? This action
+            cannot be undone.
             {archivedCount > 0 && (
               <span className="block mt-2 text-yellow-500">
                 {archivedCount} session(s) will be deleted.

apps/app/src/components/delete-session-dialog.tsx

@@ -1,6 +1,6 @@
-import { MessageSquare } from 'lucide-react';
-import { DeleteConfirmDialog } from '@/components/ui/delete-confirm-dialog';
-import type { SessionListItem } from '@/types/electron';
+import { MessageSquare } from "lucide-react";
+import { DeleteConfirmDialog } from "@/components/ui/delete-confirm-dialog";
+import type { SessionListItem } from "@/types/electron";
 
 interface DeleteSessionDialogProps {
   open: boolean;
@@ -38,8 +38,12 @@ export function DeleteSessionDialog({
             <MessageSquare className="w-5 h-5 text-brand-500" />
           </div>
           <div className="min-w-0">
-            <p className="font-medium text-foreground truncate">{session.name}</p>
-            <p className="text-xs text-muted-foreground">{session.messageCount} messages</p>
+            <p className="font-medium text-foreground truncate">
+              {session.name}
+            </p>
+            <p className="text-xs text-muted-foreground">
+              {session.messageCount} messages
+            </p>
           </div>
         </div>
       )}

apps/app/src/components/dialogs/board-background-modal.tsx

@@ -1,36 +1,44 @@
-import { useState, useRef, useCallback, useEffect } from 'react';
-import { ImageIcon, Upload, Loader2, Trash2 } from 'lucide-react';
+"use client";
+
+import { useState, useRef, useCallback, useEffect } from "react";
+import { ImageIcon, Upload, Loader2, Trash2 } from "lucide-react";
 import {
   Sheet,
   SheetContent,
   SheetDescription,
   SheetHeader,
   SheetTitle,
-} from '@/components/ui/sheet';
-import { Button } from '@/components/ui/button';
-import { Slider } from '@/components/ui/slider';
-import { Label } from '@/components/ui/label';
-import { Checkbox } from '@/components/ui/checkbox';
-import { cn } from '@/lib/utils';
-import { useAppStore, defaultBackgroundSettings } from '@/store/app-store';
-import { getHttpApiClient, getServerUrlSync } from '@/lib/http-api-client';
-import { useBoardBackgroundSettings } from '@/hooks/use-board-background-settings';
-import { toast } from 'sonner';
-import {
-  fileToBase64,
-  validateImageFile,
-  ACCEPTED_IMAGE_TYPES,
-  DEFAULT_MAX_FILE_SIZE,
-} from '@/lib/image-utils';
+} from "@/components/ui/sheet";
+import { Button } from "@/components/ui/button";
+import { Slider } from "@/components/ui/slider";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+import { cn } from "@/lib/utils";
+import { useAppStore, defaultBackgroundSettings } from "@/store/app-store";
+import { getHttpApiClient } from "@/lib/http-api-client";
+import { toast } from "sonner";
+
+const ACCEPTED_IMAGE_TYPES = [
+  "image/jpeg",
+  "image/jpg",
+  "image/png",
+  "image/gif",
+  "image/webp",
+];
+const DEFAULT_MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
 
 interface BoardBackgroundModalProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
 }
 
-export function BoardBackgroundModal({ open, onOpenChange }: BoardBackgroundModalProps) {
-  const { currentProject, boardBackgroundByProject } = useAppStore();
+export function BoardBackgroundModal({
+  open,
+  onOpenChange,
+}: BoardBackgroundModalProps) {
   const {
+    currentProject,
+    boardBackgroundByProject,
     setBoardBackground,
     setCardOpacity,
     setColumnOpacity,
@@ -40,7 +48,7 @@ export function BoardBackgroundModal({ open, onOpenChange }: BoardBackgroundModa
     setCardBorderOpacity,
     setHideScrollbar,
     clearBoardBackground,
-  } = useBoardBackgroundSettings();
+  } = useAppStore();
   const [isDragOver, setIsDragOver] = useState(false);
   const [isProcessing, setIsProcessing] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
@@ -48,7 +56,8 @@ export function BoardBackgroundModal({ open, onOpenChange }: BoardBackgroundModa
 
   // Get current background settings (live from store)
   const backgroundSettings =
-    (currentProject && boardBackgroundByProject[currentProject.path]) || defaultBackgroundSettings;
+    (currentProject && boardBackgroundByProject[currentProject.path]) ||
+    defaultBackgroundSettings;
 
   const cardOpacity = backgroundSettings.cardOpacity;
   const columnOpacity = backgroundSettings.columnOpacity;
@@ -62,9 +71,12 @@ export function BoardBackgroundModal({ open, onOpenChange }: BoardBackgroundModa
   // Update preview image when background settings change
   useEffect(() => {
     if (currentProject && backgroundSettings.imagePath) {
-      const serverUrl = import.meta.env.VITE_SERVER_URL || getServerUrlSync();
+      const serverUrl =
+        process.env.NEXT_PUBLIC_SERVER_URL || "http://localhost:3008";
       // Add cache-busting query parameter to force browser to reload image
-      const cacheBuster = imageVersion ? `&v=${imageVersion}` : `&v=${Date.now()}`;
+      const cacheBuster = imageVersion
+        ? `&v=${imageVersion}`
+        : `&v=${Date.now()}`;
       const imagePath = `${serverUrl}/api/fs/image?path=${encodeURIComponent(
         backgroundSettings.imagePath
       )}&projectPath=${encodeURIComponent(currentProject.path)}${cacheBuster}`;
@@ -74,17 +86,40 @@ export function BoardBackgroundModal({ open, onOpenChange }: BoardBackgroundModa
     }
   }, [currentProject, backgroundSettings.imagePath, imageVersion]);
 
+  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 processFile = useCallback(
     async (file: File) => {
       if (!currentProject) {
-        toast.error('No project selected');
+        toast.error("No project selected");
         return;
       }
 
-      // Validate file
-      const validation = validateImageFile(file, DEFAULT_MAX_FILE_SIZE);
-      if (!validation.isValid) {
-        toast.error(validation.error);
+      // Validate file type
+      if (!ACCEPTED_IMAGE_TYPES.includes(file.type)) {
+        toast.error(
+          "Unsupported file type. Please use JPG, PNG, GIF, or WebP."
+        );
+        return;
+      }
+
+      // Validate file size
+      if (file.size > DEFAULT_MAX_FILE_SIZE) {
+        const maxSizeMB = DEFAULT_MAX_FILE_SIZE / (1024 * 1024);
+        toast.error(`File too large. Maximum size is ${maxSizeMB}MB.`);
         return;
       }
 
@@ -105,16 +140,16 @@ export function BoardBackgroundModal({ open, onOpenChange }: BoardBackgroundModa
         );
 
         if (result.success && result.path) {
-          // Update store and persist to server
-          await setBoardBackground(currentProject.path, result.path);
-          toast.success('Background image saved');
+          // Update store with the relative path (live update)
+          setBoardBackground(currentProject.path, result.path);
+          toast.success("Background image saved");
         } else {
-          toast.error(result.error || 'Failed to save background image');
+          toast.error(result.error || "Failed to save background image");
           setPreviewImage(null);
         }
       } catch (error) {
-        console.error('Failed to process image:', error);
-        toast.error('Failed to process image');
+        console.error("Failed to process image:", error);
+        toast.error("Failed to process image");
         setPreviewImage(null);
       } finally {
         setIsProcessing(false);
@@ -157,7 +192,7 @@ export function BoardBackgroundModal({ open, onOpenChange }: BoardBackgroundModa
       }
       // Reset the input so the same file can be selected again
       if (fileInputRef.current) {
-        fileInputRef.current.value = '';
+        fileInputRef.current.value = "";
       }
     },
     [processFile]
@@ -175,76 +210,78 @@ export function BoardBackgroundModal({ open, onOpenChange }: BoardBackgroundModa
     try {
       setIsProcessing(true);
       const httpClient = getHttpApiClient();
-      const result = await httpClient.deleteBoardBackground(currentProject.path);
+      const result = await httpClient.deleteBoardBackground(
+        currentProject.path
+      );
 
       if (result.success) {
-        await clearBoardBackground(currentProject.path);
+        clearBoardBackground(currentProject.path);
         setPreviewImage(null);
-        toast.success('Background image cleared');
+        toast.success("Background image cleared");
       } else {
-        toast.error(result.error || 'Failed to clear background image');
+        toast.error(result.error || "Failed to clear background image");
       }
     } catch (error) {
-      console.error('Failed to clear background:', error);
-      toast.error('Failed to clear background');
+      console.error("Failed to clear background:", error);
+      toast.error("Failed to clear background");
     } finally {
       setIsProcessing(false);
     }
   }, [currentProject, clearBoardBackground]);
 
-  // Live update opacity when sliders change (with persistence)
+  // Live update opacity when sliders change
   const handleCardOpacityChange = useCallback(
-    async (value: number[]) => {
+    (value: number[]) => {
       if (!currentProject) return;
-      await setCardOpacity(currentProject.path, value[0]);
+      setCardOpacity(currentProject.path, value[0]);
     },
     [currentProject, setCardOpacity]
   );
 
   const handleColumnOpacityChange = useCallback(
-    async (value: number[]) => {
+    (value: number[]) => {
       if (!currentProject) return;
-      await setColumnOpacity(currentProject.path, value[0]);
+      setColumnOpacity(currentProject.path, value[0]);
     },
     [currentProject, setColumnOpacity]
   );
 
   const handleColumnBorderToggle = useCallback(
-    async (checked: boolean) => {
+    (checked: boolean) => {
       if (!currentProject) return;
-      await setColumnBorderEnabled(currentProject.path, checked);
+      setColumnBorderEnabled(currentProject.path, checked);
     },
     [currentProject, setColumnBorderEnabled]
   );
 
   const handleCardGlassmorphismToggle = useCallback(
-    async (checked: boolean) => {
+    (checked: boolean) => {
       if (!currentProject) return;
-      await setCardGlassmorphism(currentProject.path, checked);
+      setCardGlassmorphism(currentProject.path, checked);
     },
     [currentProject, setCardGlassmorphism]
   );
 
   const handleCardBorderToggle = useCallback(
-    async (checked: boolean) => {
+    (checked: boolean) => {
       if (!currentProject) return;
-      await setCardBorderEnabled(currentProject.path, checked);
+      setCardBorderEnabled(currentProject.path, checked);
     },
     [currentProject, setCardBorderEnabled]
   );
 
   const handleCardBorderOpacityChange = useCallback(
-    async (value: number[]) => {
+    (value: number[]) => {
       if (!currentProject) return;
-      await setCardBorderOpacity(currentProject.path, value[0]);
+      setCardBorderOpacity(currentProject.path, value[0]);
     },
     [currentProject, setCardBorderOpacity]
   );
 
   const handleHideScrollbarToggle = useCallback(
-    async (checked: boolean) => {
+    (checked: boolean) => {
       if (!currentProject) return;
-      await setHideScrollbar(currentProject.path, checked);
+      setHideScrollbar(currentProject.path, checked);
     },
     [currentProject, setHideScrollbar]
   );
@@ -262,7 +299,8 @@ export function BoardBackgroundModal({ open, onOpenChange }: BoardBackgroundModa
             Board Background Settings
           </SheetTitle>
           <SheetDescription className="text-muted-foreground">
-            Set a custom background image for your kanban board and adjust card/column opacity
+            Set a custom background image for your kanban board and adjust
+            card/column opacity
           </SheetDescription>
         </SheetHeader>
 
@@ -275,7 +313,7 @@ export function BoardBackgroundModal({ open, onOpenChange }: BoardBackgroundModa
             <input
               ref={fileInputRef}
               type="file"
-              accept={ACCEPTED_IMAGE_TYPES.join(',')}
+              accept={ACCEPTED_IMAGE_TYPES.join(",")}
               onChange={handleFileSelect}
               className="hidden"
               disabled={isProcessing}
@@ -287,13 +325,14 @@ export function BoardBackgroundModal({ open, onOpenChange }: BoardBackgroundModa
               onDragOver={handleDragOver}
               onDragLeave={handleDragLeave}
               className={cn(
-                'relative rounded-lg border-2 border-dashed transition-all duration-200',
+                "relative rounded-lg border-2 border-dashed transition-all duration-200",
                 {
-                  'border-brand-500/60 bg-brand-500/5 dark:bg-brand-500/10':
+                  "border-brand-500/60 bg-brand-500/5 dark:bg-brand-500/10":
                     isDragOver && !isProcessing,
-                  'border-muted-foreground/25': !isDragOver && !isProcessing,
-                  'border-muted-foreground/10 opacity-50 cursor-not-allowed': isProcessing,
-                  'hover:border-brand-500/40 hover:bg-brand-500/5 dark:hover:bg-brand-500/5':
+                  "border-muted-foreground/25": !isDragOver && !isProcessing,
+                  "border-muted-foreground/10 opacity-50 cursor-not-allowed":
+                    isProcessing,
+                  "hover:border-brand-500/40 hover:bg-brand-500/5 dark:hover:bg-brand-500/5":
                     !isProcessing && !isDragOver,
                 }
               )}
@@ -341,10 +380,10 @@ export function BoardBackgroundModal({ open, onOpenChange }: BoardBackgroundModa
                 >
                   <div
                     className={cn(
-                      'rounded-full p-3 mb-3',
+                      "rounded-full p-3 mb-3",
                       isDragOver && !isProcessing
-                        ? 'bg-brand-500/10 dark:bg-brand-500/20'
-                        : 'bg-muted'
+                        ? "bg-brand-500/10 dark:bg-brand-500/20"
+                        : "bg-muted"
                     )}
                   >
                     {isProcessing ? (
@@ -355,12 +394,12 @@ export function BoardBackgroundModal({ open, onOpenChange }: BoardBackgroundModa
                   </div>
                   <p className="text-sm text-muted-foreground">
                     {isDragOver && !isProcessing
-                      ? 'Drop image here'
-                      : 'Click to upload or drag and drop'}
+                      ? "Drop image here"
+                      : "Click to upload or drag and drop"}
                   </p>
                   <p className="text-xs text-muted-foreground mt-1">
-                    JPG, PNG, GIF, or WebP (max {Math.round(DEFAULT_MAX_FILE_SIZE / (1024 * 1024))}
-                    MB)
+                    JPG, PNG, GIF, or WebP (max{" "}
+                    {Math.round(DEFAULT_MAX_FILE_SIZE / (1024 * 1024))}MB)
                   </p>
                 </div>
               )}
@@ -372,7 +411,9 @@ export function BoardBackgroundModal({ open, onOpenChange }: BoardBackgroundModa
             <div className="space-y-2">
               <div className="flex items-center justify-between">
                 <Label>Card Opacity</Label>
-                <span className="text-sm text-muted-foreground">{cardOpacity}%</span>
+                <span className="text-sm text-muted-foreground">
+                  {cardOpacity}%
+                </span>
               </div>
               <Slider
                 value={[cardOpacity]}
@@ -387,7 +428,9 @@ export function BoardBackgroundModal({ open, onOpenChange }: BoardBackgroundModa
             <div className="space-y-2">
               <div className="flex items-center justify-between">
                 <Label>Column Opacity</Label>
-                <span className="text-sm text-muted-foreground">{columnOpacity}%</span>
+                <span className="text-sm text-muted-foreground">
+                  {columnOpacity}%
+                </span>
               </div>
               <Slider
                 value={[columnOpacity]}
@@ -418,7 +461,10 @@ export function BoardBackgroundModal({ open, onOpenChange }: BoardBackgroundModa
                 checked={cardGlassmorphism}
                 onCheckedChange={handleCardGlassmorphismToggle}
               />
-              <Label htmlFor="card-glassmorphism-toggle" className="cursor-pointer">
+              <Label
+                htmlFor="card-glassmorphism-toggle"
+                className="cursor-pointer"
+              >
                 Card Glassmorphism (blur effect)
               </Label>
             </div>
@@ -440,7 +486,9 @@ export function BoardBackgroundModal({ open, onOpenChange }: BoardBackgroundModa
               <div className="space-y-2">
                 <div className="flex items-center justify-between">
                   <Label>Card Border Opacity</Label>
-                  <span className="text-sm text-muted-foreground">{cardBorderOpacity}%</span>
+                  <span className="text-sm text-muted-foreground">
+                    {cardBorderOpacity}%
+                  </span>
                 </div>
                 <Slider
                   value={[cardBorderOpacity]}

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

@@ -1,5 +1,17 @@
-import { useState, useEffect, useCallback } from 'react';
-import { FolderOpen, Folder, ChevronRight, HardDrive, Clock, X } from 'lucide-react';
+"use client";
+
+import { useState, useEffect, useRef, useCallback } from "react";
+import {
+  FolderOpen,
+  Folder,
+  ChevronRight,
+  Home,
+  ArrowLeft,
+  HardDrive,
+  CornerDownLeft,
+  Clock,
+  X,
+} from "lucide-react";
 import {
   Dialog,
   DialogContent,
@@ -7,14 +19,9 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from '@/components/ui/dialog';
-import { Button } from '@/components/ui/button';
-import { PathInput } from '@/components/ui/path-input';
-import { Kbd, KbdGroup } from '@/components/ui/kbd';
-import { getJSON, setJSON } from '@/lib/storage';
-import { getDefaultWorkspaceDirectory, saveLastProjectDirectory } from '@/lib/workspace-config';
-import { useOSDetection } from '@/hooks';
-import { apiPost } from '@/lib/api-fetch';
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
 
 interface DirectoryEntry {
   name: string;
@@ -40,45 +47,62 @@ interface FileBrowserDialogProps {
   initialPath?: string;
 }
 
-const RECENT_FOLDERS_KEY = 'file-browser-recent-folders';
+const RECENT_FOLDERS_KEY = "file-browser-recent-folders";
 const MAX_RECENT_FOLDERS = 5;
 
 function getRecentFolders(): string[] {
-  return getJSON<string[]>(RECENT_FOLDERS_KEY) ?? [];
+  if (typeof window === "undefined") return [];
+  try {
+    const stored = localStorage.getItem(RECENT_FOLDERS_KEY);
+    return stored ? JSON.parse(stored) : [];
+  } catch {
+    return [];
+  }
 }
 
 function addRecentFolder(path: string): void {
-  const recent = getRecentFolders();
-  // Remove if already exists, then add to front
-  const filtered = recent.filter((p) => p !== path);
-  const updated = [path, ...filtered].slice(0, MAX_RECENT_FOLDERS);
-  setJSON(RECENT_FOLDERS_KEY, updated);
+  if (typeof window === "undefined") return;
+  try {
+    const recent = getRecentFolders();
+    // Remove if already exists, then add to front
+    const filtered = recent.filter((p) => p !== path);
+    const updated = [path, ...filtered].slice(0, MAX_RECENT_FOLDERS);
+    localStorage.setItem(RECENT_FOLDERS_KEY, JSON.stringify(updated));
+  } catch {
+    // Ignore localStorage errors
+  }
 }
 
 function removeRecentFolder(path: string): string[] {
-  const recent = getRecentFolders();
-  const updated = recent.filter((p) => p !== path);
-  setJSON(RECENT_FOLDERS_KEY, updated);
-  return updated;
+  if (typeof window === "undefined") return [];
+  try {
+    const recent = getRecentFolders();
+    const updated = recent.filter((p) => p !== path);
+    localStorage.setItem(RECENT_FOLDERS_KEY, JSON.stringify(updated));
+    return updated;
+  } catch {
+    return [];
+  }
 }
 
 export function FileBrowserDialog({
   open,
   onOpenChange,
   onSelect,
-  title = 'Select Project Directory',
-  description = 'Navigate to your project folder or paste a path directly',
+  title = "Select Project Directory",
+  description = "Navigate to your project folder or paste a path directly",
   initialPath,
 }: FileBrowserDialogProps) {
-  const { isMac } = useOSDetection();
-  const [currentPath, setCurrentPath] = useState<string>('');
+  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 [error, setError] = useState("");
+  const [warning, setWarning] = useState("");
   const [recentFolders, setRecentFolders] = useState<string[]>([]);
+  const pathInputRef = useRef<HTMLInputElement>(null);
 
   // Load recent folders when dialog opens
   useEffect(() => {
@@ -93,131 +117,105 @@ export function FileBrowserDialog({
     setRecentFolders(updated);
   }, []);
 
-  const browseDirectory = useCallback(async (dirPath?: string) => {
+  const handleSelectRecent = useCallback((path: string) => {
+    browseDirectory(path);
+  }, []);
+
+  const browseDirectory = async (dirPath?: string) => {
     setLoading(true);
-    setError('');
-    setWarning('');
+    setError("");
+    setWarning("");
 
     try {
-      const result = await apiPost<BrowseResult>('/api/fs/browse', { dirPath });
+      // 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 || '');
+        setWarning(result.warning || "");
       } else {
-        setError(result.error || 'Failed to browse directory');
+        setError(result.error || "Failed to browse directory");
       }
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to load directories');
+      setError(
+        err instanceof Error ? err.message : "Failed to load directories"
+      );
     } finally {
       setLoading(false);
     }
-  }, []);
+  };
 
-  const handleSelectRecent = useCallback(
-    (path: string) => {
-      browseDirectory(path);
-    },
-    [browseDirectory]
-  );
-
-  // Reset state when dialog closes
+  // Reset current path when dialog closes
   useEffect(() => {
     if (!open) {
-      setCurrentPath('');
+      setCurrentPath("");
+      setPathInput("");
       setParentPath(null);
       setDirectories([]);
-      setError('');
-      setWarning('');
+      setError("");
+      setWarning("");
     }
   }, [open]);
 
-  // Load initial path or workspace directory when dialog opens
+  // Load initial path or home directory when dialog opens
   useEffect(() => {
     if (open && !currentPath) {
-      // Priority order:
-      // 1. Last selected directory from this file browser (from localStorage)
-      // 2. initialPath prop (from parent component)
-      // 3. Default workspace directory
-      // 4. Home directory
-      const loadInitialPath = async () => {
-        try {
-          // First, check for last selected directory from getDefaultWorkspaceDirectory
-          // which already implements the priority: last used > Documents/Automaker > DATA_DIR
-          const defaultDir = await getDefaultWorkspaceDirectory();
-
-          // If we have a default directory, use it (unless initialPath is explicitly provided and different)
-          const pathToUse = initialPath || defaultDir;
-
-          if (pathToUse) {
-            browseDirectory(pathToUse);
-          } else {
-            // No default directory, browse home directory
-            browseDirectory();
-          }
-        } catch {
-          // If config fetch fails, try initialPath or fall back to home directory
-          if (initialPath) {
-            browseDirectory(initialPath);
-          } else {
-            browseDirectory();
-          }
-        }
-      };
-
-      loadInitialPath();
+      browseDirectory(initialPath);
     }
-  }, [open, initialPath, currentPath, browseDirectory]);
+  }, [open, initialPath]);
 
   const handleSelectDirectory = (dir: DirectoryEntry) => {
     browseDirectory(dir.path);
   };
 
-  const handleGoHome = useCallback(() => {
-    browseDirectory();
-  }, [browseDirectory]);
+  const handleGoToParent = () => {
+    if (parentPath) {
+      browseDirectory(parentPath);
+    }
+  };
 
-  const handleNavigate = useCallback(
-    (path: string) => {
-      browseDirectory(path);
-    },
-    [browseDirectory]
-  );
+  const handleGoHome = () => {
+    browseDirectory();
+  };
 
   const handleSelectDrive = (drivePath: string) => {
     browseDirectory(drivePath);
   };
 
-  const handleSelect = useCallback(() => {
+  const handleGoToPath = () => {
+    const trimmedPath = pathInput.trim();
+    if (trimmedPath) {
+      browseDirectory(trimmedPath);
+    }
+  };
+
+  const handlePathInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      handleGoToPath();
+    }
+  };
+
+  const handleSelect = () => {
     if (currentPath) {
       addRecentFolder(currentPath);
-      // Save to last project directory so it's used as default next time
-      saveLastProjectDirectory(currentPath);
       onSelect(currentPath);
       onOpenChange(false);
     }
-  }, [currentPath, onSelect, onOpenChange]);
-
-  // Handle Command/Ctrl+Enter keyboard shortcut to select current folder
-  useEffect(() => {
-    if (!open) return;
-
-    const handleKeyDown = (e: KeyboardEvent) => {
-      // Check for Command+Enter (Mac) or Ctrl+Enter (Windows/Linux)
-      if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
-        e.preventDefault();
-        if (currentPath && !loading) {
-          handleSelect();
-        }
-      }
-    };
-
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [open, currentPath, loading, handleSelect]);
+  };
 
   // Helper to get folder name from path
   const getFolderName = (path: string) => {
@@ -227,7 +225,7 @@ export function FileBrowserDialog({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="bg-popover border-border max-w-3xl max-h-[85vh] overflow-hidden flex flex-col p-4 focus:outline-none focus-visible:outline-none">
+      <DialogContent className="bg-popover border-border max-w-3xl max-h-[85vh] overflow-hidden flex flex-col p-4">
         <DialogHeader className="pb-1">
           <DialogTitle className="flex items-center gap-2 text-base">
             <FolderOpen className="w-4 h-4 text-brand-500" />
@@ -239,21 +237,31 @@ export function FileBrowserDialog({
         </DialogHeader>
 
         <div className="flex flex-col gap-2 min-h-[350px] flex-1 overflow-hidden py-1">
-          {/* Path navigation */}
-          <PathInput
-            currentPath={currentPath}
-            parentPath={parentPath}
-            loading={loading}
-            error={!!error}
-            onNavigate={handleNavigate}
-            onHome={handleGoHome}
-            entries={directories.map((dir) => ({ ...dir, isDirectory: true }))}
-            onSelectEntry={(entry) => {
-              if (entry.isDirectory) {
-                handleSelectDirectory(entry);
-              }
-            }}
-          />
+          {/* Direct path input */}
+          <div className="flex items-center gap-1.5">
+            <Input
+              ref={pathInputRef}
+              type="text"
+              placeholder="Paste or type a full path (e.g., /home/user/projects/myapp)"
+              value={pathInput}
+              onChange={(e) => setPathInput(e.target.value)}
+              onKeyDown={handlePathInputKeyDown}
+              className="flex-1 font-mono text-xs h-8"
+              data-testid="path-input"
+              disabled={loading}
+            />
+            <Button
+              variant="secondary"
+              size="sm"
+              onClick={handleGoToPath}
+              disabled={loading || !pathInput.trim()}
+              data-testid="go-to-path-button"
+              className="h-8 px-2"
+            >
+              <CornerDownLeft className="w-3.5 h-3.5 mr-1" />
+              Go
+            </Button>
+          </div>
 
           {/* Recent folders */}
           {recentFolders.length > 0 && (
@@ -294,23 +302,54 @@ export function FileBrowserDialog({
               {drives.map((drive) => (
                 <Button
                   key={drive}
-                  variant={currentPath.startsWith(drive) ? 'default' : 'outline'}
+                  variant={
+                    currentPath.startsWith(drive) ? "default" : "outline"
+                  }
                   size="sm"
                   onClick={() => handleSelectDrive(drive)}
                   className="h-6 px-2 text-xs"
                   disabled={loading}
                 >
-                  {drive.replace('\\', '')}
+                  {drive.replace("\\", "")}
                 </Button>
               ))}
             </div>
           )}
 
+          {/* Current path breadcrumb */}
+          <div className="flex items-center gap-1.5 p-2 rounded-md bg-sidebar-accent/10 border border-sidebar-border">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleGoHome}
+              className="h-6 px-1.5"
+              disabled={loading}
+            >
+              <Home className="w-3.5 h-3.5" />
+            </Button>
+            {parentPath && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={handleGoToParent}
+                className="h-6 px-1.5"
+                disabled={loading}
+              >
+                <ArrowLeft className="w-3.5 h-3.5" />
+              </Button>
+            )}
+            <div className="flex-1 font-mono text-xs truncate text-muted-foreground">
+              {currentPath || "Loading..."}
+            </div>
+          </div>
+
           {/* Directory list */}
-          <div className="flex-1 overflow-y-auto border border-sidebar-border rounded-md scrollbar-styled">
+          <div className="flex-1 overflow-y-auto border border-sidebar-border rounded-md">
             {loading && (
               <div className="flex items-center justify-center h-full p-4">
-                <div className="text-xs text-muted-foreground">Loading directories...</div>
+                <div className="text-xs text-muted-foreground">
+                  Loading directories...
+                </div>
               </div>
             )}
 
@@ -328,7 +367,9 @@ export function FileBrowserDialog({
 
             {!loading && !error && !warning && directories.length === 0 && (
               <div className="flex items-center justify-center h-full p-4">
-                <div className="text-xs text-muted-foreground">No subdirectories found</div>
+                <div className="text-xs text-muted-foreground">
+                  No subdirectories found
+                </div>
               </div>
             )}
 
@@ -350,8 +391,8 @@ export function FileBrowserDialog({
           </div>
 
           <div className="text-[10px] text-muted-foreground">
-            Paste a full path above, or click on folders to navigate. Press Enter or click → to jump
-            to a path.
+            Paste a full path above, or click on folders to navigate. Press
+            Enter or click Go to jump to a path.
           </div>
         </div>
 
@@ -359,18 +400,9 @@ export function FileBrowserDialog({
           <Button variant="ghost" size="sm" onClick={() => onOpenChange(false)}>
             Cancel
           </Button>
-          <Button
-            size="sm"
-            onClick={handleSelect}
-            disabled={!currentPath || loading}
-            title="Select current folder (Cmd+Enter / Ctrl+Enter)"
-          >
+          <Button size="sm" onClick={handleSelect} disabled={!currentPath || loading}>
             <FolderOpen className="w-3.5 h-3.5 mr-1.5" />
             Select Current Folder
-            <KbdGroup className="ml-1">
-              <Kbd>{isMac ? '⌘' : 'Ctrl'}</Kbd>
-              <Kbd>↵</Kbd>
-            </KbdGroup>
           </Button>
         </DialogFooter>
       </DialogContent>

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

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

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

@@ -1,4 +1,6 @@
-import { useState, useEffect } from 'react';
+"use client";
+
+import { useState, useEffect } from "react";
 import {
   Dialog,
   DialogContent,
@@ -6,13 +8,13 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from '@/components/ui/dialog';
-import { Button } from '@/components/ui/button';
-import { HotkeyButton } from '@/components/ui/hotkey-button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { Badge } from '@/components/ui/badge';
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { HotkeyButton } from "@/components/ui/hotkey-button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Badge } from "@/components/ui/badge";
 import {
   FolderPlus,
   FolderOpen,
@@ -22,12 +24,14 @@ import {
   Loader2,
   Link,
   Folder,
-} from 'lucide-react';
-import { starterTemplates, type StarterTemplate } from '@/lib/templates';
-import { getElectronAPI } from '@/lib/electron';
-import { cn } from '@/lib/utils';
-import { useFileBrowser } from '@/contexts/file-browser-context';
-import { getDefaultWorkspaceDirectory, saveLastProjectDirectory } from '@/lib/workspace-config';
+} from "lucide-react";
+import { starterTemplates, type StarterTemplate } from "@/lib/templates";
+import { getElectronAPI } from "@/lib/electron";
+import { getHttpApiClient } from "@/lib/http-api-client";
+import { cn } from "@/lib/utils";
+import { useFileBrowser } from "@/contexts/file-browser-context";
+
+const LAST_PROJECT_DIR_KEY = "automaker:lastProjectDir";
 
 interface ValidationErrors {
   projectName?: boolean;
@@ -39,13 +43,20 @@ interface ValidationErrors {
 interface NewProjectModalProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
-  onCreateBlankProject: (projectName: string, parentDir: string) => Promise<void>;
+  onCreateBlankProject: (
+    projectName: string,
+    parentDir: string
+  ) => Promise<void>;
   onCreateFromTemplate: (
     template: StarterTemplate,
     projectName: string,
     parentDir: string
   ) => Promise<void>;
-  onCreateFromCustomUrl: (repoUrl: string, projectName: string, parentDir: string) => Promise<void>;
+  onCreateFromCustomUrl: (
+    repoUrl: string,
+    projectName: string,
+    parentDir: string
+  ) => Promise<void>;
   isCreating: boolean;
 }
 
@@ -57,28 +68,39 @@ export function NewProjectModal({
   onCreateFromCustomUrl,
   isCreating,
 }: NewProjectModalProps) {
-  const [activeTab, setActiveTab] = useState<'blank' | 'template'>('blank');
-  const [projectName, setProjectName] = useState('');
-  const [workspaceDir, setWorkspaceDir] = useState<string>('');
+  const [activeTab, setActiveTab] = useState<"blank" | "template">("blank");
+  const [projectName, setProjectName] = useState("");
+  const [workspaceDir, setWorkspaceDir] = useState<string>("");
   const [isLoadingWorkspace, setIsLoadingWorkspace] = useState(false);
-  const [selectedTemplate, setSelectedTemplate] = useState<StarterTemplate | null>(null);
+  const [selectedTemplate, setSelectedTemplate] =
+    useState<StarterTemplate | null>(null);
   const [useCustomUrl, setUseCustomUrl] = useState(false);
-  const [customUrl, setCustomUrl] = useState('');
+  const [customUrl, setCustomUrl] = useState("");
   const [errors, setErrors] = useState<ValidationErrors>({});
   const { openFileBrowser } = useFileBrowser();
 
   // Fetch workspace directory when modal opens
   useEffect(() => {
     if (open) {
+      // First, check localStorage for last used directory
+      const lastUsedDir = localStorage.getItem(LAST_PROJECT_DIR_KEY);
+      if (lastUsedDir) {
+        setWorkspaceDir(lastUsedDir);
+        return;
+      }
+
+      // Fall back to server config if no saved directory
       setIsLoadingWorkspace(true);
-      getDefaultWorkspaceDirectory()
-        .then((defaultDir) => {
-          if (defaultDir) {
-            setWorkspaceDir(defaultDir);
+      const httpClient = getHttpApiClient();
+      httpClient.workspace
+        .getConfig()
+        .then((result) => {
+          if (result.success && result.workspaceDir) {
+            setWorkspaceDir(result.workspaceDir);
           }
         })
         .catch((error) => {
-          console.error('Failed to get default workspace directory:', error);
+          console.error("Failed to get workspace config:", error);
         })
         .finally(() => {
           setIsLoadingWorkspace(false);
@@ -89,11 +111,11 @@ export function NewProjectModal({
   // Reset form when modal closes
   useEffect(() => {
     if (!open) {
-      setProjectName('');
+      setProjectName("");
       setSelectedTemplate(null);
       setUseCustomUrl(false);
-      setCustomUrl('');
-      setActiveTab('blank');
+      setCustomUrl("");
+      setActiveTab("blank");
       setErrors({});
     }
   }, [open]);
@@ -106,7 +128,10 @@ export function NewProjectModal({
   }, [projectName, errors.projectName]);
 
   useEffect(() => {
-    if ((selectedTemplate || (useCustomUrl && customUrl)) && errors.templateSelection) {
+    if (
+      (selectedTemplate || (useCustomUrl && customUrl)) &&
+      errors.templateSelection
+    ) {
       setErrors((prev) => ({ ...prev, templateSelection: false }));
     }
   }, [selectedTemplate, useCustomUrl, customUrl, errors.templateSelection]);
@@ -131,7 +156,7 @@ export function NewProjectModal({
     }
 
     // Check template selection (only for template tab)
-    if (activeTab === 'template') {
+    if (activeTab === "template") {
       if (useCustomUrl) {
         if (!customUrl.trim()) {
           newErrors.customUrl = true;
@@ -150,7 +175,7 @@ export function NewProjectModal({
     // Clear errors and proceed
     setErrors({});
 
-    if (activeTab === 'blank') {
+    if (activeTab === "blank") {
       await onCreateBlankProject(projectName, workspaceDir);
     } else if (useCustomUrl && customUrl) {
       await onCreateFromCustomUrl(customUrl, projectName, workspaceDir);
@@ -167,7 +192,7 @@ export function NewProjectModal({
   const handleSelectTemplate = (template: StarterTemplate) => {
     setSelectedTemplate(template);
     setUseCustomUrl(false);
-    setCustomUrl('');
+    setCustomUrl("");
   };
 
   const handleToggleCustomUrl = () => {
@@ -179,14 +204,15 @@ export function NewProjectModal({
 
   const handleBrowseDirectory = async () => {
     const selectedPath = await openFileBrowser({
-      title: 'Select Base Project Directory',
-      description: 'Choose the parent directory where your project will be created',
+      title: "Select Base Project Directory",
+      description:
+        "Choose the parent directory where your project will be created",
       initialPath: workspaceDir || undefined,
     });
     if (selectedPath) {
       setWorkspaceDir(selectedPath);
       // Save to localStorage for next time
-      saveLastProjectDirectory(selectedPath);
+      localStorage.setItem(LAST_PROJECT_DIR_KEY, selectedPath);
       // Clear any workspace error when a valid directory is selected
       if (errors.workspaceDir) {
         setErrors((prev) => ({ ...prev, workspaceDir: false }));
@@ -196,12 +222,15 @@ export function NewProjectModal({
 
   // Use platform-specific path separator
   const pathSep =
-    typeof window !== 'undefined' && (window as any).electronAPI
-      ? navigator.platform.indexOf('Win') !== -1
-        ? '\\'
-        : '/'
-      : '/';
-  const projectPath = workspaceDir && projectName ? `${workspaceDir}${pathSep}${projectName}` : '';
+    typeof window !== "undefined" && (window as any).electronAPI
+      ? navigator.platform.indexOf("Win") !== -1
+        ? "\\"
+        : "/"
+      : "/";
+  const projectPath =
+    workspaceDir && projectName
+      ? `${workspaceDir}${pathSep}${projectName}`
+      : "";
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
@@ -210,7 +239,9 @@ export function NewProjectModal({
         data-testid="new-project-modal"
       >
         <DialogHeader className="pb-2">
-          <DialogTitle className="text-foreground">Create New Project</DialogTitle>
+          <DialogTitle className="text-foreground">
+            Create New Project
+          </DialogTitle>
           <DialogDescription className="text-muted-foreground">
             Start with a blank project or choose from a starter template.
           </DialogDescription>
@@ -221,9 +252,13 @@ export function NewProjectModal({
           <div className="space-y-2">
             <Label
               htmlFor="project-name"
-              className={cn('text-foreground', errors.projectName && 'text-red-500')}
+              className={cn(
+                "text-foreground",
+                errors.projectName && "text-red-500"
+              )}
             >
-              Project Name {errors.projectName && <span className="text-red-500">*</span>}
+              Project Name{" "}
+              {errors.projectName && <span className="text-red-500">*</span>}
             </Label>
             <Input
               id="project-name"
@@ -231,39 +266,40 @@ export function NewProjectModal({
               value={projectName}
               onChange={(e) => setProjectName(e.target.value)}
               className={cn(
-                'bg-input text-foreground placeholder:text-muted-foreground',
+                "bg-input text-foreground placeholder:text-muted-foreground",
                 errors.projectName
-                  ? 'border-red-500 focus:border-red-500 focus:ring-red-500/20'
-                  : 'border-border'
+                  ? "border-red-500 focus:border-red-500 focus:ring-red-500/20"
+                  : "border-border"
               )}
               data-testid="project-name-input"
               autoFocus
             />
-            {errors.projectName && <p className="text-xs text-red-500">Project name is required</p>}
+            {errors.projectName && (
+              <p className="text-xs text-red-500">Project name is required</p>
+            )}
           </div>
 
           {/* Workspace Directory Display */}
           <div
             className={cn(
-              'flex items-start gap-2 text-sm',
-              errors.workspaceDir ? 'text-red-500' : 'text-muted-foreground'
+              "flex items-center gap-2 text-sm",
+              errors.workspaceDir ? "text-red-500" : "text-muted-foreground"
             )}
           >
-            <Folder className="w-4 h-4 shrink-0 mt-0.5" />
-            <span className="flex-1 min-w-0 flex flex-col gap-1">
+            <Folder className="w-4 h-4 shrink-0" />
+            <span className="flex-1 min-w-0">
               {isLoadingWorkspace ? (
-                'Loading workspace...'
+                "Loading workspace..."
               ) : workspaceDir ? (
                 <>
-                  <span>Will be created at:</span>
-                  <code
-                    className="text-xs bg-muted px-1.5 py-0.5 rounded truncate block max-w-full"
-                    title={projectPath || workspaceDir}
-                  >
+                  Will be created at:{" "}
+                  <code className="text-xs bg-muted px-1.5 py-0.5 rounded truncate">
                     {projectPath || workspaceDir}
                   </code>
                 </>
-              ) : null}
+              ) : (
+                <span className="text-red-500">No workspace configured</span>
+              )}
             </span>
             <Button
               type="button"
@@ -282,7 +318,7 @@ export function NewProjectModal({
 
         <Tabs
           value={activeTab}
-          onValueChange={(v) => setActiveTab(v as 'blank' | 'template')}
+          onValueChange={(v) => setActiveTab(v as "blank" | "template")}
           className="flex-1 flex flex-col overflow-hidden"
         >
           <TabsList className="w-full justify-start">
@@ -300,8 +336,9 @@ export function NewProjectModal({
             <TabsContent value="blank" className="mt-0">
               <div className="p-4 rounded-lg bg-muted/50 border border-border">
                 <p className="text-sm text-muted-foreground">
-                  Create an empty project with the standard .automaker directory structure. Perfect
-                  for starting from scratch or importing an existing codebase.
+                  Create an empty project with the standard .automaker directory
+                  structure. Perfect for starting from scratch or importing an
+                  existing codebase.
                 </p>
               </div>
             </TabsContent>
@@ -318,18 +355,18 @@ export function NewProjectModal({
                 {/* Preset Templates */}
                 <div
                   className={cn(
-                    'space-y-3 rounded-lg p-1 -m-1',
-                    errors.templateSelection && 'ring-2 ring-red-500/50'
+                    "space-y-3 rounded-lg p-1 -m-1",
+                    errors.templateSelection && "ring-2 ring-red-500/50"
                   )}
                 >
                   {starterTemplates.map((template) => (
                     <div
                       key={template.id}
                       className={cn(
-                        'p-4 rounded-lg border cursor-pointer transition-all',
+                        "p-4 rounded-lg border cursor-pointer transition-all",
                         selectedTemplate?.id === template.id && !useCustomUrl
-                          ? 'border-brand-500 bg-brand-500/10'
-                          : 'border-border bg-muted/30 hover:border-border-glass hover:bg-muted/50'
+                          ? "border-brand-500 bg-brand-500/10"
+                          : "border-border bg-muted/30 hover:border-border-glass hover:bg-muted/50"
                       )}
                       onClick={() => handleSelectTemplate(template)}
                       data-testid={`template-${template.id}`}
@@ -337,10 +374,13 @@ export function NewProjectModal({
                       <div className="flex items-start justify-between gap-4">
                         <div className="flex-1 min-w-0">
                           <div className="flex items-center gap-2 mb-1">
-                            <h4 className="font-medium text-foreground">{template.name}</h4>
-                            {selectedTemplate?.id === template.id && !useCustomUrl && (
-                              <Check className="w-4 h-4 text-brand-500" />
-                            )}
+                            <h4 className="font-medium text-foreground">
+                              {template.name}
+                            </h4>
+                            {selectedTemplate?.id === template.id &&
+                              !useCustomUrl && (
+                                <Check className="w-4 h-4 text-brand-500" />
+                              )}
                           </div>
                           <p className="text-sm text-muted-foreground mb-3">
                             {template.description}
@@ -349,7 +389,11 @@ export function NewProjectModal({
                           {/* Tech Stack */}
                           <div className="flex flex-wrap gap-1.5 mb-3">
                             {template.techStack.slice(0, 6).map((tech) => (
-                              <Badge key={tech} variant="secondary" className="text-xs">
+                              <Badge
+                                key={tech}
+                                variant="secondary"
+                                className="text-xs"
+                              >
                                 {tech}
                               </Badge>
                             ))}
@@ -363,7 +407,7 @@ export function NewProjectModal({
                           {/* Key Features */}
                           <div className="text-xs text-muted-foreground">
                             <span className="font-medium">Features: </span>
-                            {template.features.slice(0, 3).join(' · ')}
+                            {template.features.slice(0, 3).join(" · ")}
                             {template.features.length > 3 &&
                               ` · +${template.features.length - 3} more`}
                           </div>
@@ -388,38 +432,47 @@ export function NewProjectModal({
                   {/* Custom URL Option */}
                   <div
                     className={cn(
-                      'p-4 rounded-lg border cursor-pointer transition-all',
+                      "p-4 rounded-lg border cursor-pointer transition-all",
                       useCustomUrl
-                        ? 'border-brand-500 bg-brand-500/10'
-                        : 'border-border bg-muted/30 hover:border-border-glass hover:bg-muted/50'
+                        ? "border-brand-500 bg-brand-500/10"
+                        : "border-border bg-muted/30 hover:border-border-glass hover:bg-muted/50"
                     )}
                     onClick={handleToggleCustomUrl}
                   >
                     <div className="flex items-center gap-2 mb-2">
                       <Link className="w-4 h-4 text-muted-foreground" />
-                      <h4 className="font-medium text-foreground">Custom GitHub URL</h4>
-                      {useCustomUrl && <Check className="w-4 h-4 text-brand-500" />}
+                      <h4 className="font-medium text-foreground">
+                        Custom GitHub URL
+                      </h4>
+                      {useCustomUrl && (
+                        <Check className="w-4 h-4 text-brand-500" />
+                      )}
                     </div>
                     <p className="text-sm text-muted-foreground mb-3">
                       Clone any public GitHub repository as a starting point.
                     </p>
 
                     {useCustomUrl && (
-                      <div onClick={(e) => e.stopPropagation()} className="space-y-1">
+                      <div
+                        onClick={(e) => e.stopPropagation()}
+                        className="space-y-1"
+                      >
                         <Input
                           placeholder="https://github.com/username/repository"
                           value={customUrl}
                           onChange={(e) => setCustomUrl(e.target.value)}
                           className={cn(
-                            'bg-input text-foreground placeholder:text-muted-foreground',
+                            "bg-input text-foreground placeholder:text-muted-foreground",
                             errors.customUrl
-                              ? 'border-red-500 focus:border-red-500 focus:ring-red-500/20'
-                              : 'border-border'
+                              ? "border-red-500 focus:border-red-500 focus:ring-red-500/20"
+                              : "border-border"
                           )}
                           data-testid="custom-url-input"
                         />
                         {errors.customUrl && (
-                          <p className="text-xs text-red-500">GitHub URL is required</p>
+                          <p className="text-xs text-red-500">
+                            GitHub URL is required
+                          </p>
                         )}
                       </div>
                     )}
@@ -442,14 +495,14 @@ export function NewProjectModal({
             onClick={validateAndCreate}
             disabled={isCreating}
             className="bg-gradient-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-600 text-white border-0"
-            hotkey={{ key: 'Enter', cmdCtrl: true }}
+            hotkey={{ key: "Enter", cmdCtrl: true }}
             hotkeyActive={open}
             data-testid="confirm-create-project"
           >
             {isCreating ? (
               <>
                 <Loader2 className="w-4 h-4 mr-2 animate-spin" />
-                {activeTab === 'template' ? 'Cloning...' : 'Creating...'}
+                {activeTab === "template" ? "Cloning..." : "Creating..."}
               </>
             ) : (
               <>Create Project</>

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

@@ -1,9 +1,16 @@
-import { useState, useEffect } from 'react';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { HotkeyButton } from '@/components/ui/hotkey-button';
-import { Input } from '@/components/ui/input';
-import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
+"use client";
+
+import { useState, useEffect } from "react";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { HotkeyButton } from "@/components/ui/hotkey-button";
+import { Input } from "@/components/ui/input";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import {
   Plus,
   MessageSquare,
@@ -14,66 +21,66 @@ import {
   X,
   ArchiveRestore,
   Loader2,
-} from 'lucide-react';
-import { cn } from '@/lib/utils';
-import type { SessionListItem } from '@/types/electron';
-import { useKeyboardShortcutsConfig } from '@/hooks/use-keyboard-shortcuts';
-import { getElectronAPI } from '@/lib/electron';
-import { DeleteSessionDialog } from '@/components/dialogs/delete-session-dialog';
-import { DeleteAllArchivedSessionsDialog } from '@/components/dialogs/delete-all-archived-sessions-dialog';
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import type { SessionListItem } from "@/types/electron";
+import { useKeyboardShortcutsConfig } from "@/hooks/use-keyboard-shortcuts";
+import { getElectronAPI } from "@/lib/electron";
+import { DeleteSessionDialog } from "@/components/delete-session-dialog";
+import { DeleteAllArchivedSessionsDialog } from "@/components/delete-all-archived-sessions-dialog";
 
 // Random session name generator
 const adjectives = [
-  'Swift',
-  'Bright',
-  'Clever',
-  'Dynamic',
-  'Eager',
-  'Focused',
-  'Gentle',
-  'Happy',
-  'Inventive',
-  'Jolly',
-  'Keen',
-  'Lively',
-  'Mighty',
-  'Noble',
-  'Optimal',
-  'Peaceful',
-  'Quick',
-  'Radiant',
-  'Smart',
-  'Tranquil',
-  'Unique',
-  'Vibrant',
-  'Wise',
-  'Zealous',
+  "Swift",
+  "Bright",
+  "Clever",
+  "Dynamic",
+  "Eager",
+  "Focused",
+  "Gentle",
+  "Happy",
+  "Inventive",
+  "Jolly",
+  "Keen",
+  "Lively",
+  "Mighty",
+  "Noble",
+  "Optimal",
+  "Peaceful",
+  "Quick",
+  "Radiant",
+  "Smart",
+  "Tranquil",
+  "Unique",
+  "Vibrant",
+  "Wise",
+  "Zealous",
 ];
 
 const nouns = [
-  'Agent',
-  'Builder',
-  'Coder',
-  'Developer',
-  'Explorer',
-  'Forge',
-  'Garden',
-  'Helper',
-  'Innovator',
-  'Journey',
-  'Kernel',
-  'Lighthouse',
-  'Mission',
-  'Navigator',
-  'Oracle',
-  'Project',
-  'Quest',
-  'Runner',
-  'Spark',
-  'Task',
-  'Unicorn',
-  'Voyage',
-  'Workshop',
+  "Agent",
+  "Builder",
+  "Coder",
+  "Developer",
+  "Explorer",
+  "Forge",
+  "Garden",
+  "Helper",
+  "Innovator",
+  "Journey",
+  "Kernel",
+  "Lighthouse",
+  "Mission",
+  "Navigator",
+  "Oracle",
+  "Project",
+  "Quest",
+  "Runner",
+  "Spark",
+  "Task",
+  "Unicorn",
+  "Voyage",
+  "Workshop",
 ];
 
 function generateRandomSessionName(): string {
@@ -100,12 +107,14 @@ export function SessionManager({
 }: SessionManagerProps) {
   const shortcuts = useKeyboardShortcutsConfig();
   const [sessions, setSessions] = useState<SessionListItem[]>([]);
-  const [activeTab, setActiveTab] = useState<'active' | 'archived'>('active');
+  const [activeTab, setActiveTab] = useState<"active" | "archived">("active");
   const [editingSessionId, setEditingSessionId] = useState<string | null>(null);
-  const [editingName, setEditingName] = useState('');
+  const [editingName, setEditingName] = useState("");
   const [isCreating, setIsCreating] = useState(false);
-  const [newSessionName, setNewSessionName] = useState('');
-  const [runningSessions, setRunningSessions] = useState<Set<string>>(new Set());
+  const [newSessionName, setNewSessionName] = useState("");
+  const [runningSessions, setRunningSessions] = useState<Set<string>>(
+    new Set()
+  );
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
   const [sessionToDelete, setSessionToDelete] = useState<SessionListItem | null>(null);
   const [isDeleteAllArchivedDialogOpen, setIsDeleteAllArchivedDialogOpen] = useState(false);
@@ -126,7 +135,10 @@ export function SessionManager({
         }
       } catch (err) {
         // Ignore errors for individual session checks
-        console.warn(`[SessionManager] Failed to check running state for ${session.id}:`, err);
+        console.warn(
+          `[SessionManager] Failed to check running state for ${session.id}:`,
+          err
+        );
       }
     }
 
@@ -172,10 +184,14 @@ export function SessionManager({
 
     const sessionName = newSessionName.trim() || generateRandomSessionName();
 
-    const result = await api.sessions.create(sessionName, projectPath, projectPath);
+    const result = await api.sessions.create(
+      sessionName,
+      projectPath,
+      projectPath
+    );
 
     if (result.success && result.session?.id) {
-      setNewSessionName('');
+      setNewSessionName("");
       setIsCreating(false);
       await loadSessions();
       onSelectSession(result.session.id);
@@ -189,7 +205,11 @@ export function SessionManager({
 
     const sessionName = generateRandomSessionName();
 
-    const result = await api.sessions.create(sessionName, projectPath, projectPath);
+    const result = await api.sessions.create(
+      sessionName,
+      projectPath,
+      projectPath
+    );
 
     if (result.success && result.session?.id) {
       await loadSessions();
@@ -214,11 +234,15 @@ export function SessionManager({
     const api = getElectronAPI();
     if (!editingName.trim() || !api?.sessions) return;
 
-    const result = await api.sessions.update(sessionId, editingName, undefined);
+    const result = await api.sessions.update(
+      sessionId,
+      editingName,
+      undefined
+    );
 
     if (result.success) {
       setEditingSessionId(null);
-      setEditingName('');
+      setEditingName("");
       await loadSessions();
     }
   };
@@ -227,7 +251,7 @@ export function SessionManager({
   const handleArchiveSession = async (sessionId: string) => {
     const api = getElectronAPI();
     if (!api?.sessions) {
-      console.error('[SessionManager] Sessions API not available');
+      console.error("[SessionManager] Sessions API not available");
       return;
     }
 
@@ -240,10 +264,10 @@ export function SessionManager({
         }
         await loadSessions();
       } else {
-        console.error('[SessionManager] Archive failed:', result.error);
+        console.error("[SessionManager] Archive failed:", result.error);
       }
     } catch (error) {
-      console.error('[SessionManager] Archive error:', error);
+      console.error("[SessionManager] Archive error:", error);
     }
   };
 
@@ -251,7 +275,7 @@ export function SessionManager({
   const handleUnarchiveSession = async (sessionId: string) => {
     const api = getElectronAPI();
     if (!api?.sessions) {
-      console.error('[SessionManager] Sessions API not available');
+      console.error("[SessionManager] Sessions API not available");
       return;
     }
 
@@ -260,10 +284,10 @@ export function SessionManager({
       if (result.success) {
         await loadSessions();
       } else {
-        console.error('[SessionManager] Unarchive failed:', result.error);
+        console.error("[SessionManager] Unarchive failed:", result.error);
       }
     } catch (error) {
-      console.error('[SessionManager] Unarchive error:', error);
+      console.error("[SessionManager] Unarchive error:", error);
     }
   };
 
@@ -308,7 +332,8 @@ export function SessionManager({
 
   const activeSessions = sessions.filter((s) => !s.isArchived);
   const archivedSessions = sessions.filter((s) => s.isArchived);
-  const displayedSessions = activeTab === 'active' ? activeSessions : archivedSessions;
+  const displayedSessions =
+    activeTab === "active" ? activeSessions : archivedSessions;
 
   return (
     <Card className="h-full flex flex-col rounded-none">
@@ -320,8 +345,8 @@ export function SessionManager({
             size="sm"
             onClick={() => {
               // Switch to active tab if on archived tab
-              if (activeTab === 'archived') {
-                setActiveTab('active');
+              if (activeTab === "archived") {
+                setActiveTab("active");
               }
               handleQuickCreateSession();
             }}
@@ -337,7 +362,9 @@ export function SessionManager({
 
         <Tabs
           value={activeTab}
-          onValueChange={(value) => setActiveTab(value as 'active' | 'archived')}
+          onValueChange={(value) =>
+            setActiveTab(value as "active" | "archived")
+          }
           className="w-full"
         >
           <TabsList className="w-full">
@@ -353,7 +380,10 @@ export function SessionManager({
         </Tabs>
       </CardHeader>
 
-      <CardContent className="flex-1 overflow-y-auto space-y-2" data-testid="session-list">
+      <CardContent
+        className="flex-1 overflow-y-auto space-y-2"
+        data-testid="session-list"
+      >
         {/* Create new session */}
         {isCreating && (
           <div className="p-3 border rounded-lg bg-muted/50">
@@ -363,10 +393,10 @@ export function SessionManager({
                 value={newSessionName}
                 onChange={(e) => setNewSessionName(e.target.value)}
                 onKeyDown={(e) => {
-                  if (e.key === 'Enter') handleCreateSession();
-                  if (e.key === 'Escape') {
+                  if (e.key === "Enter") handleCreateSession();
+                  if (e.key === "Escape") {
                     setIsCreating(false);
-                    setNewSessionName('');
+                    setNewSessionName("");
                   }
                 }}
                 autoFocus
@@ -379,7 +409,7 @@ export function SessionManager({
                 variant="ghost"
                 onClick={() => {
                   setIsCreating(false);
-                  setNewSessionName('');
+                  setNewSessionName("");
                 }}
               >
                 <X className="w-4 h-4" />
@@ -389,7 +419,7 @@ export function SessionManager({
         )}
 
         {/* Delete All Archived button - shown at the top of archived sessions */}
-        {activeTab === 'archived' && archivedSessions.length > 0 && (
+        {activeTab === "archived" && archivedSessions.length > 0 && (
           <div className="pb-2 border-b mb-2">
             <Button
               variant="destructive"
@@ -409,9 +439,9 @@ export function SessionManager({
           <div
             key={session.id}
             className={cn(
-              'p-3 border rounded-lg cursor-pointer transition-colors hover:bg-accent/50',
-              currentSessionId === session.id && 'bg-primary/10 border-primary',
-              session.isArchived && 'opacity-60'
+              "p-3 border rounded-lg cursor-pointer transition-colors hover:bg-accent/50",
+              currentSessionId === session.id && "bg-primary/10 border-primary",
+              session.isArchived && "opacity-60"
             )}
             onClick={() => !session.isArchived && onSelectSession(session.id)}
             data-testid={`session-item-${session.id}`}
@@ -424,10 +454,10 @@ export function SessionManager({
                       value={editingName}
                       onChange={(e) => setEditingName(e.target.value)}
                       onKeyDown={(e) => {
-                        if (e.key === 'Enter') handleRenameSession(session.id);
-                        if (e.key === 'Escape') {
+                        if (e.key === "Enter") handleRenameSession(session.id);
+                        if (e.key === "Escape") {
                           setEditingSessionId(null);
-                          setEditingName('');
+                          setEditingName("");
                         }
                       }}
                       onClick={(e) => e.stopPropagation()}
@@ -450,7 +480,7 @@ export function SessionManager({
                       onClick={(e) => {
                         e.stopPropagation();
                         setEditingSessionId(null);
-                        setEditingName('');
+                        setEditingName("");
                       }}
                       className="h-7"
                     >
@@ -461,14 +491,16 @@ export function SessionManager({
                   <>
                     <div className="flex items-center gap-2 mb-1">
                       {/* Show loading indicator if this session is running (either current session thinking or any session in runningSessions) */}
-                      {(currentSessionId === session.id && isCurrentSessionThinking) ||
+                      {(currentSessionId === session.id &&
+                        isCurrentSessionThinking) ||
                       runningSessions.has(session.id) ? (
                         <Loader2 className="w-4 h-4 text-primary animate-spin shrink-0" />
                       ) : (
                         <MessageSquare className="w-4 h-4 text-muted-foreground shrink-0" />
                       )}
                       <h3 className="font-medium truncate">{session.name}</h3>
-                      {((currentSessionId === session.id && isCurrentSessionThinking) ||
+                      {((currentSessionId === session.id &&
+                        isCurrentSessionThinking) ||
                         runningSessions.has(session.id)) && (
                         <span className="text-xs text-primary bg-primary/10 px-2 py-0.5 rounded-full">
                           thinking...
@@ -476,7 +508,9 @@ export function SessionManager({
                       )}
                     </div>
                     {session.preview && (
-                      <p className="text-xs text-muted-foreground truncate">{session.preview}</p>
+                      <p className="text-xs text-muted-foreground truncate">
+                        {session.preview}
+                      </p>
                     )}
                     <div className="flex items-center gap-2 mt-2">
                       <span className="text-xs text-muted-foreground">
@@ -493,7 +527,10 @@ export function SessionManager({
 
               {/* Actions */}
               {!session.isArchived && (
-                <div className="flex gap-1" onClick={(e) => e.stopPropagation()}>
+                <div
+                  className="flex gap-1"
+                  onClick={(e) => e.stopPropagation()}
+                >
                   <Button
                     size="sm"
                     variant="ghost"
@@ -518,7 +555,10 @@ export function SessionManager({
               )}
 
               {session.isArchived && (
-                <div className="flex gap-1" onClick={(e) => e.stopPropagation()}>
+                <div
+                  className="flex gap-1"
+                  onClick={(e) => e.stopPropagation()}
+                >
                   <Button
                     size="sm"
                     variant="ghost"
@@ -546,12 +586,14 @@ export function SessionManager({
           <div className="text-center py-8 text-muted-foreground">
             <MessageSquare className="w-12 h-12 mx-auto mb-2 opacity-50" />
             <p className="text-sm">
-              {activeTab === 'active' ? 'No active sessions' : 'No archived sessions'}
+              {activeTab === "active"
+                ? "No active sessions"
+                : "No archived sessions"}
             </p>
             <p className="text-xs">
-              {activeTab === 'active'
-                ? 'Create your first session to get started'
-                : 'Archive sessions to see them here'}
+              {activeTab === "active"
+                ? "Create your first session to get started"
+                : "Archive sessions to see them here"}
             </p>
           </div>
         )}

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

@@ -1,10 +1,10 @@
-/* eslint-disable @typescript-eslint/no-empty-object-type */
+"use client";
 
-import * as React from 'react';
-import { ChevronDown } from 'lucide-react';
-import { cn } from '@/lib/utils';
+import * as React from "react";
+import { ChevronDown } from "lucide-react";
+import { cn } from "@/lib/utils";
 
-type AccordionType = 'single' | 'multiple';
+type AccordionType = "single" | "multiple";
 
 interface AccordionContextValue {
   type: AccordionType;
@@ -13,10 +13,12 @@ interface AccordionContextValue {
   collapsible?: boolean;
 }
 
-const AccordionContext = React.createContext<AccordionContextValue | null>(null);
+const AccordionContext = React.createContext<AccordionContextValue | null>(
+  null
+);
 
 interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
-  type?: 'single' | 'multiple';
+  type?: "single" | "multiple";
   value?: string | string[];
   defaultValue?: string | string[];
   onValueChange?: (value: string | string[]) => void;
@@ -26,7 +28,7 @@ interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
 const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(
   (
     {
-      type = 'single',
+      type = "single",
       value,
       defaultValue,
       onValueChange,
@@ -37,11 +39,13 @@ const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(
     },
     ref
   ) => {
-    const [internalValue, setInternalValue] = React.useState<string | string[]>(() => {
-      if (value !== undefined) return value;
-      if (defaultValue !== undefined) return defaultValue;
-      return type === 'single' ? '' : [];
-    });
+    const [internalValue, setInternalValue] = React.useState<string | string[]>(
+      () => {
+        if (value !== undefined) return value;
+        if (defaultValue !== undefined) return defaultValue;
+        return type === "single" ? "" : [];
+      }
+    );
 
     const currentValue = value !== undefined ? value : internalValue;
 
@@ -49,9 +53,9 @@ const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(
       (itemValue: string) => {
         let newValue: string | string[];
 
-        if (type === 'single') {
+        if (type === "single") {
           if (currentValue === itemValue && collapsible) {
-            newValue = '';
+            newValue = "";
           } else if (currentValue === itemValue && !collapsible) {
             return;
           } else {
@@ -88,21 +92,27 @@ const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(
 
     return (
       <AccordionContext.Provider value={contextValue}>
-        <div ref={ref} data-slot="accordion" className={cn('w-full', className)} {...props}>
+        <div
+          ref={ref}
+          data-slot="accordion"
+          className={cn("w-full", className)}
+          {...props}
+        >
           {children}
         </div>
       </AccordionContext.Provider>
     );
   }
 );
-Accordion.displayName = 'Accordion';
+Accordion.displayName = "Accordion";
 
 interface AccordionItemContextValue {
   value: string;
   isOpen: boolean;
 }
 
-const AccordionItemContext = React.createContext<AccordionItemContextValue | null>(null);
+const AccordionItemContext =
+  React.createContext<AccordionItemContextValue | null>(null);
 
 interface AccordionItemProps extends React.HTMLAttributes<HTMLDivElement> {
   value: string;
@@ -113,22 +123,25 @@ const AccordionItem = React.forwardRef<HTMLDivElement, AccordionItemProps>(
     const accordionContext = React.useContext(AccordionContext);
 
     if (!accordionContext) {
-      throw new Error('AccordionItem must be used within an Accordion');
+      throw new Error("AccordionItem must be used within an Accordion");
     }
 
     const isOpen = Array.isArray(accordionContext.value)
       ? accordionContext.value.includes(value)
       : accordionContext.value === value;
 
-    const contextValue = React.useMemo(() => ({ value, isOpen }), [value, isOpen]);
+    const contextValue = React.useMemo(
+      () => ({ value, isOpen }),
+      [value, isOpen]
+    );
 
     return (
       <AccordionItemContext.Provider value={contextValue}>
         <div
           ref={ref}
           data-slot="accordion-item"
-          data-state={isOpen ? 'open' : 'closed'}
-          className={cn('border-b border-border', className)}
+          data-state={isOpen ? "open" : "closed"}
+          className={cn("border-b border-border", className)}
           {...props}
         >
           {children}
@@ -137,45 +150,47 @@ const AccordionItem = React.forwardRef<HTMLDivElement, AccordionItemProps>(
     );
   }
 );
-AccordionItem.displayName = 'AccordionItem';
+AccordionItem.displayName = "AccordionItem";
 
-interface AccordionTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}
+interface AccordionTriggerProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {}
 
-const AccordionTrigger = React.forwardRef<HTMLButtonElement, AccordionTriggerProps>(
-  ({ className, children, ...props }, ref) => {
-    const accordionContext = React.useContext(AccordionContext);
-    const itemContext = React.useContext(AccordionItemContext);
+const AccordionTrigger = React.forwardRef<
+  HTMLButtonElement,
+  AccordionTriggerProps
+>(({ className, children, ...props }, ref) => {
+  const accordionContext = React.useContext(AccordionContext);
+  const itemContext = React.useContext(AccordionItemContext);
 
-    if (!accordionContext || !itemContext) {
-      throw new Error('AccordionTrigger must be used within an AccordionItem');
-    }
-
-    const { onValueChange } = accordionContext;
-    const { value, isOpen } = itemContext;
-
-    return (
-      <div data-slot="accordion-header" className="flex">
-        <button
-          ref={ref}
-          type="button"
-          data-slot="accordion-trigger"
-          data-state={isOpen ? 'open' : 'closed'}
-          aria-expanded={isOpen}
-          onClick={() => onValueChange(value)}
-          className={cn(
-            'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
-            className
-          )}
-          {...props}
-        >
-          {children}
-          <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
-        </button>
-      </div>
-    );
+  if (!accordionContext || !itemContext) {
+    throw new Error("AccordionTrigger must be used within an AccordionItem");
   }
-);
-AccordionTrigger.displayName = 'AccordionTrigger';
+
+  const { onValueChange } = accordionContext;
+  const { value, isOpen } = itemContext;
+
+  return (
+    <div data-slot="accordion-header" className="flex">
+      <button
+        ref={ref}
+        type="button"
+        data-slot="accordion-trigger"
+        data-state={isOpen ? "open" : "closed"}
+        aria-expanded={isOpen}
+        onClick={() => onValueChange(value)}
+        className={cn(
+          "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+      </button>
+    </div>
+  );
+});
+AccordionTrigger.displayName = "AccordionTrigger";
 
 interface AccordionContentProps extends React.HTMLAttributes<HTMLDivElement> {}
 
@@ -186,7 +201,7 @@ const AccordionContent = React.forwardRef<HTMLDivElement, AccordionContentProps>
     const [height, setHeight] = React.useState<number | undefined>(undefined);
 
     if (!itemContext) {
-      throw new Error('AccordionContent must be used within an AccordionItem');
+      throw new Error("AccordionContent must be used within an AccordionItem");
     }
 
     const { isOpen } = itemContext;
@@ -206,16 +221,16 @@ const AccordionContent = React.forwardRef<HTMLDivElement, AccordionContentProps>
     return (
       <div
         data-slot="accordion-content"
-        data-state={isOpen ? 'open' : 'closed'}
+        data-state={isOpen ? "open" : "closed"}
         className="overflow-hidden text-sm transition-all duration-200 ease-out"
         style={{
-          height: isOpen ? (height !== undefined ? `${height}px` : 'auto') : 0,
+          height: isOpen ? (height !== undefined ? `${height}px` : "auto") : 0,
           opacity: isOpen ? 1 : 0,
         }}
         {...props}
       >
         <div ref={contentRef}>
-          <div ref={ref} className={cn('pb-4 pt-0', className)}>
+          <div ref={ref} className={cn("pb-4 pt-0", className)}>
             {children}
           </div>
         </div>
@@ -223,6 +238,6 @@ const AccordionContent = React.forwardRef<HTMLDivElement, AccordionContentProps>
     );
   }
 );
-AccordionContent.displayName = 'AccordionContent';
+AccordionContent.displayName = "AccordionContent";
 
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

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

@@ -1,8 +1,10 @@
-import * as React from 'react';
-import { Check, ChevronsUpDown, LucideIcon } from 'lucide-react';
+"use client";
 
-import { cn } from '@/lib/utils';
-import { Button } from '@/components/ui/button';
+import * as React from "react";
+import { Check, ChevronsUpDown, LucideIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
 import {
   Command,
   CommandEmpty,
@@ -10,8 +12,12 @@ import {
   CommandInput,
   CommandItem,
   CommandList,
-} from '@/components/ui/command';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 
 export interface AutocompleteOption {
   value: string;
@@ -29,16 +35,15 @@ interface AutocompleteProps {
   emptyMessage?: string;
   className?: string;
   disabled?: boolean;
-  error?: boolean;
   icon?: LucideIcon;
   allowCreate?: boolean;
   createLabel?: (value: string) => string;
-  'data-testid'?: string;
+  "data-testid"?: string;
   itemTestIdPrefix?: string;
 }
 
 function normalizeOption(opt: string | AutocompleteOption): AutocompleteOption {
-  if (typeof opt === 'string') {
+  if (typeof opt === "string") {
     return { value: opt, label: opt };
   }
   return { ...opt, label: opt.label ?? opt.value };
@@ -48,24 +53,26 @@ export function Autocomplete({
   value,
   onChange,
   options,
-  placeholder = 'Select an option...',
-  searchPlaceholder = 'Search...',
-  emptyMessage = 'No results found.',
+  placeholder = "Select an option...",
+  searchPlaceholder = "Search...",
+  emptyMessage = "No results found.",
   className,
   disabled = false,
-  error = false,
   icon: Icon,
   allowCreate = false,
   createLabel = (v) => `Create "${v}"`,
-  'data-testid': testId,
-  itemTestIdPrefix = 'option',
+  "data-testid": testId,
+  itemTestIdPrefix = "option",
 }: AutocompleteProps) {
   const [open, setOpen] = React.useState(false);
-  const [inputValue, setInputValue] = React.useState('');
+  const [inputValue, setInputValue] = React.useState("");
   const [triggerWidth, setTriggerWidth] = React.useState<number>(0);
   const triggerRef = React.useRef<HTMLButtonElement>(null);
 
-  const normalizedOptions = React.useMemo(() => options.map(normalizeOption), [options]);
+  const normalizedOptions = React.useMemo(
+    () => options.map(normalizeOption),
+    [options]
+  );
 
   // Update trigger width when component mounts or value changes
   React.useEffect(() => {
@@ -90,7 +97,9 @@ export function Autocomplete({
     if (!inputValue) return normalizedOptions;
     const lower = inputValue.toLowerCase();
     return normalizedOptions.filter(
-      (opt) => opt.value.toLowerCase().includes(lower) || opt.label?.toLowerCase().includes(lower)
+      (opt) =>
+        opt.value.toLowerCase().includes(lower) ||
+        opt.label?.toLowerCase().includes(lower)
     );
   }, [normalizedOptions, inputValue]);
 
@@ -98,7 +107,9 @@ export function Autocomplete({
   const isNewValue =
     allowCreate &&
     inputValue.trim() &&
-    !normalizedOptions.some((opt) => opt.value.toLowerCase() === inputValue.toLowerCase());
+    !normalizedOptions.some(
+      (opt) => opt.value.toLowerCase() === inputValue.toLowerCase()
+    );
 
   // Get display value
   const displayValue = React.useMemo(() => {
@@ -117,15 +128,16 @@ export function Autocomplete({
           aria-expanded={open}
           disabled={disabled}
           className={cn(
-            'w-full justify-between',
-            Icon && 'font-mono text-sm',
-            error && 'border-destructive focus-visible:ring-destructive',
+            "w-full justify-between",
+            Icon && "font-mono text-sm",
             className
           )}
           data-testid={testId}
         >
           <span className="flex items-center gap-2 truncate">
-            {Icon && <Icon className="w-4 h-4 shrink-0 text-muted-foreground" />}
+            {Icon && (
+              <Icon className="w-4 h-4 shrink-0 text-muted-foreground" />
+            )}
             {displayValue || placeholder}
           </span>
           <ChevronsUpDown className="opacity-50 shrink-0" />
@@ -149,7 +161,8 @@ export function Autocomplete({
             <CommandEmpty>
               {isNewValue ? (
                 <div className="py-2 px-3 text-sm">
-                  Press enter to create <code className="bg-muted px-1 rounded">{inputValue}</code>
+                  Press enter to create{" "}
+                  <code className="bg-muted px-1 rounded">{inputValue}</code>
                 </div>
               ) : (
                 emptyMessage
@@ -162,7 +175,7 @@ export function Autocomplete({
                   value={inputValue}
                   onSelect={() => {
                     onChange(inputValue);
-                    setInputValue('');
+                    setInputValue("");
                     setOpen(false);
                   }}
                   className="text-[var(--status-success)]"
@@ -170,7 +183,9 @@ export function Autocomplete({
                 >
                   {Icon && <Icon className="w-4 h-4 mr-2" />}
                   {createLabel(inputValue)}
-                  <span className="ml-auto text-xs text-muted-foreground">(new)</span>
+                  <span className="ml-auto text-xs text-muted-foreground">
+                    (new)
+                  </span>
                 </CommandItem>
               )}
               {filteredOptions.map((option) => (
@@ -178,19 +193,24 @@ export function Autocomplete({
                   key={option.value}
                   value={option.value}
                   onSelect={(currentValue) => {
-                    onChange(currentValue === value ? '' : currentValue);
-                    setInputValue('');
+                    onChange(currentValue === value ? "" : currentValue);
+                    setInputValue("");
                     setOpen(false);
                   }}
-                  data-testid={`${itemTestIdPrefix}-${option.value.toLowerCase().replace(/[\s/\\]+/g, '-')}`}
+                  data-testid={`${itemTestIdPrefix}-${option.value.toLowerCase().replace(/[\s/\\]+/g, "-")}`}
                 >
                   {Icon && <Icon className="w-4 h-4 mr-2" />}
                   {option.label}
                   <Check
-                    className={cn('ml-auto', value === option.value ? 'opacity-100' : 'opacity-0')}
+                    className={cn(
+                      "ml-auto",
+                      value === option.value ? "opacity-100" : "opacity-0"
+                    )}
                   />
                   {option.badge && (
-                    <span className="ml-2 text-xs text-muted-foreground">({option.badge})</span>
+                    <span className="ml-2 text-xs text-muted-foreground">
+                      ({option.badge})
+                    </span>
                   )}
                 </CommandItem>
               ))}

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

@@ -0,0 +1,57 @@
+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/branch-autocomplete.tsx

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

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

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

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

@@ -0,0 +1,100 @@
+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,5 +1,7 @@
-import { Tag } from 'lucide-react';
-import { Autocomplete } from '@/components/ui/autocomplete';
+"use client";
+
+import * as React from "react";
+import { Autocomplete } from "@/components/ui/autocomplete";
 
 interface CategoryAutocompleteProps {
   value: string;
@@ -8,19 +10,17 @@ interface CategoryAutocompleteProps {
   placeholder?: string;
   className?: string;
   disabled?: boolean;
-  error?: boolean;
-  'data-testid'?: string;
+  "data-testid"?: string;
 }
 
 export function CategoryAutocomplete({
   value,
   onChange,
   suggestions,
-  placeholder = 'Select or type a category...',
+  placeholder = "Select or type a category...",
   className,
   disabled = false,
-  error = false,
-  'data-testid': testId,
+  "data-testid": testId,
 }: CategoryAutocompleteProps) {
   return (
     <Autocomplete
@@ -28,14 +28,10 @@ export function CategoryAutocomplete({
       onChange={onChange}
       options={suggestions}
       placeholder={placeholder}
-      searchPlaceholder="Search or type new category..."
+      searchPlaceholder="Search category..."
       emptyMessage="No category found."
       className={className}
       disabled={disabled}
-      error={error}
-      icon={Tag}
-      allowCreate
-      createLabel={(v) => `Create "${v}"`}
       data-testid={testId}
       itemTestIdPrefix="category-option"
     />

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

@@ -1,15 +1,14 @@
-import * as React from 'react';
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import { Check } from 'lucide-react';
+"use client";
 
-import { cn } from '@/lib/utils';
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check } from "lucide-react";
 
-interface CheckboxProps extends Omit<
-  React.ButtonHTMLAttributes<HTMLButtonElement>,
-  'checked' | 'defaultChecked'
-> {
-  checked?: boolean | 'indeterminate';
-  defaultChecked?: boolean | 'indeterminate';
+import { cn } from "@/lib/utils";
+
+interface CheckboxProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "checked" | "defaultChecked"> {
+  checked?: boolean | "indeterminate";
+  defaultChecked?: boolean | "indeterminate";
   onCheckedChange?: (checked: boolean) => void;
   required?: boolean;
 }
@@ -33,7 +32,7 @@ const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
     <CheckboxRoot
       ref={ref}
       className={cn(
-        'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground hover:border-primary/80',
+        "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground hover:border-primary/80",
         className
       )}
       onCheckedChange={(checked) => {
@@ -44,7 +43,9 @@ const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
       }}
       {...props}
     >
-      <CheckboxIndicator className={cn('flex items-center justify-center text-current')}>
+      <CheckboxIndicator
+        className={cn("flex items-center justify-center text-current")}
+      >
         <Check className="h-4 w-4" />
       </CheckboxIndicator>
     </CheckboxRoot>

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

@@ -1,41 +1,46 @@
-import * as React from 'react';
-import { Command as CommandPrimitive } from 'cmdk';
-import { SearchIcon } from 'lucide-react';
+"use client"
 
-import { cn } from '@/lib/utils';
+import * as React from "react"
+import { Command as CommandPrimitive } from "cmdk"
+import { SearchIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
 import {
   Dialog,
   DialogContent,
   DialogDescription,
   DialogHeader,
   DialogTitle,
-} from '@/components/ui/dialog';
+} from "@/components/ui/dialog"
 
-function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
   return (
     <CommandPrimitive
       data-slot="command"
       className={cn(
-        'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
+        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
         className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function CommandDialog({
-  title = 'Command Palette',
-  description = 'Search for a command to run...',
+  title = "Command Palette",
+  description = "Search for a command to run...",
   children,
   className,
   showCloseButton = true,
   ...props
 }: React.ComponentProps<typeof Dialog> & {
-  title?: string;
-  description?: string;
-  className?: string;
-  showCloseButton?: boolean;
+  title?: string
+  description?: string
+  className?: string
+  showCloseButton?: boolean
 }) {
   return (
     <Dialog {...props}>
@@ -44,7 +49,7 @@ function CommandDialog({
         <DialogDescription>{description}</DialogDescription>
       </DialogHeader>
       <DialogContent
-        className={cn('overflow-hidden p-0', className)}
+        className={cn("overflow-hidden p-0", className)}
         showCloseButton={showCloseButton}
       >
         <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
@@ -52,7 +57,7 @@ function CommandDialog({
         </Command>
       </DialogContent>
     </Dialog>
-  );
+  )
 }
 
 function CommandInput({
@@ -60,38 +65,49 @@ function CommandInput({
   ...props
 }: React.ComponentProps<typeof CommandPrimitive.Input>) {
   return (
-    <div data-slot="command-input-wrapper" className="flex h-9 items-center gap-2 border-b px-3">
+    <div
+      data-slot="command-input-wrapper"
+      className="flex h-9 items-center gap-2 border-b px-3"
+    >
       <SearchIcon className="size-4 shrink-0 opacity-50" />
       <CommandPrimitive.Input
         data-slot="command-input"
         className={cn(
-          'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
+          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}
         {...props}
       />
     </div>
-  );
+  )
 }
 
-function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
   return (
     <CommandPrimitive.List
       data-slot="command-list"
-      className={cn('max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto', className)}
+      className={cn(
+        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+        className
+      )}
       {...props}
     />
-  );
+  )
 }
 
-function CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+function CommandEmpty({
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
   return (
     <CommandPrimitive.Empty
       data-slot="command-empty"
       className="py-6 text-center text-sm"
       {...props}
     />
-  );
+  )
 }
 
 function CommandGroup({
@@ -102,12 +118,12 @@ function CommandGroup({
     <CommandPrimitive.Group
       data-slot="command-group"
       className={cn(
-        'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
+        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
         className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function CommandSeparator({
@@ -117,13 +133,16 @@ function CommandSeparator({
   return (
     <CommandPrimitive.Separator
       data-slot="command-separator"
-      className={cn('bg-border -mx-1 h-px', className)}
+      className={cn("bg-border -mx-1 h-px", className)}
       {...props}
     />
-  );
+  )
 }
 
-function CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {
+function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
   return (
     <CommandPrimitive.Item
       data-slot="command-item"
@@ -133,17 +152,23 @@ function CommandItem({ className, ...props }: React.ComponentProps<typeof Comman
       )}
       {...props}
     />
-  );
+  )
 }
 
-function CommandShortcut({ className, ...props }: React.ComponentProps<'span'>) {
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
   return (
     <span
       data-slot="command-shortcut"
-      className={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)}
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
       {...props}
     />
-  );
+  )
 }
 
 export {
@@ -156,4 +181,4 @@ export {
   CommandItem,
   CommandShortcut,
   CommandSeparator,
-};
+}

apps/app/src/components/ui/count-up-timer.tsx

@@ -1,5 +1,7 @@
-import { useState, useEffect } from 'react';
-import { Clock } from 'lucide-react';
+"use client";
+
+import { useState, useEffect } from "react";
+import { Clock } from "lucide-react";
 
 interface CountUpTimerProps {
   startedAt: string; // ISO timestamp string
@@ -15,8 +17,8 @@ function formatElapsedTime(seconds: number): string {
   const minutes = Math.floor(seconds / 60);
   const remainingSeconds = seconds % 60;
 
-  const paddedMinutes = minutes.toString().padStart(2, '0');
-  const paddedSeconds = remainingSeconds.toString().padStart(2, '0');
+  const paddedMinutes = minutes.toString().padStart(2, "0");
+  const paddedSeconds = remainingSeconds.toString().padStart(2, "0");
 
   return `${paddedMinutes}:${paddedSeconds}`;
 }
@@ -25,7 +27,7 @@ function formatElapsedTime(seconds: number): string {
  * CountUpTimer component that displays elapsed time since a given start time
  * Updates every second to show the current elapsed time in MM:SS format
  */
-export function CountUpTimer({ startedAt, className = '' }: CountUpTimerProps) {
+export function CountUpTimer({ startedAt, className = "" }: CountUpTimerProps) {
   const [elapsedSeconds, setElapsedSeconds] = useState(0);
 
   useEffect(() => {

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

@@ -0,0 +1,88 @@
+"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/delete-confirm-dialog.tsx

@@ -1,4 +1,4 @@
-import { Trash2 } from 'lucide-react';
+import { Trash2 } from "lucide-react";
 import {
   Dialog,
   DialogContent,
@@ -6,10 +6,10 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from '@/components/ui/dialog';
-import { Button } from '@/components/ui/button';
-import { HotkeyButton } from '@/components/ui/hotkey-button';
-import type { ReactNode } from 'react';
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { HotkeyButton } from "@/components/ui/hotkey-button";
+import type { ReactNode } from "react";
 
 interface DeleteConfirmDialogProps {
   open: boolean;
@@ -34,9 +34,9 @@ export function DeleteConfirmDialog({
   title,
   description,
   children,
-  confirmText = 'Delete',
-  testId = 'delete-confirm-dialog',
-  confirmTestId = 'confirm-delete-button',
+  confirmText = "Delete",
+  testId = "delete-confirm-dialog",
+  confirmTestId = "confirm-delete-button",
 }: DeleteConfirmDialogProps) {
   const handleConfirm = () => {
     onConfirm();
@@ -45,13 +45,18 @@ export function DeleteConfirmDialog({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="bg-popover border-border max-w-md" data-testid={testId}>
+      <DialogContent
+        className="bg-popover border-border max-w-md"
+        data-testid={testId}
+      >
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
             <Trash2 className="w-5 h-5 text-destructive" />
             {title}
           </DialogTitle>
-          <DialogDescription className="text-muted-foreground">{description}</DialogDescription>
+          <DialogDescription className="text-muted-foreground">
+            {description}
+          </DialogDescription>
         </DialogHeader>
 
         {children}
@@ -69,7 +74,7 @@ export function DeleteConfirmDialog({
             variant="destructive"
             onClick={handleConfirm}
             data-testid={confirmTestId}
-            hotkey={{ key: 'Enter', cmdCtrl: true }}
+            hotkey={{ key: "Enter", cmdCtrl: true }}
             hotkeyActive={open}
             className="px-4"
           >

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

@@ -1,39 +1,27 @@
-import React, { useState, useRef, useCallback } from 'react';
-import { cn } from '@/lib/utils';
-import { ImageIcon, X, Loader2, FileText } from 'lucide-react';
-import { Textarea } from '@/components/ui/textarea';
-import { getElectronAPI } from '@/lib/electron';
-import { getServerUrlSync } from '@/lib/http-api-client';
-import { useAppStore, type FeatureImagePath, type FeatureTextFilePath } from '@/store/app-store';
-import {
-  sanitizeFilename,
-  fileToBase64,
-  fileToText,
-  isTextFile,
-  isImageFile,
-  validateTextFile,
-  getTextFileMimeType,
-  generateFileId,
-  ACCEPTED_IMAGE_TYPES,
-  ACCEPTED_TEXT_EXTENSIONS,
-  DEFAULT_MAX_FILE_SIZE,
-  DEFAULT_MAX_TEXT_FILE_SIZE,
-  formatFileSize,
-} from '@/lib/image-utils';
+"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>;
 
-// Re-export for convenience
-export type { FeatureImagePath, FeatureTextFilePath };
-
 interface DescriptionImageDropZoneProps {
   value: string;
   onChange: (value: string) => void;
   images: FeatureImagePath[];
   onImagesChange: (images: FeatureImagePath[]) => void;
-  textFiles?: FeatureTextFilePath[];
-  onTextFilesChange?: (textFiles: FeatureTextFilePath[]) => void;
   placeholder?: string;
   className?: string;
   disabled?: boolean;
@@ -46,14 +34,21 @@ interface DescriptionImageDropZoneProps {
   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,
-  textFiles = [],
-  onTextFilesChange,
-  placeholder = 'Describe the feature...',
+  placeholder = "Describe the feature...",
   className,
   disabled = false,
   maxFiles = 5,
@@ -72,61 +67,71 @@ export function DescriptionImageDropZone({
 
   // 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 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 = import.meta.env.VITE_SERVER_URL || getServerUrlSync();
-      const projectPath = currentProject?.path || '';
-      return `${serverUrl}/api/fs/image?path=${encodeURIComponent(imagePath)}&projectPath=${encodeURIComponent(projectPath)}`;
-    },
-    [currentProject?.path]
-  );
+  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 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}`;
+  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);
+    });
+  };
 
-        // 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;
+  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}`;
       }
-    },
-    [currentProject?.path]
-  );
+
+      // 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) => {
@@ -134,89 +139,58 @@ export function DescriptionImageDropZone({
 
       setIsProcessing(true);
       const newImages: FeatureImagePath[] = [];
-      const newTextFiles: FeatureTextFilePath[] = [];
       const newPreviews = new Map(previewImages);
       const errors: string[] = [];
 
-      // Calculate total current files
-      const currentTotalFiles = images.length + textFiles.length;
-
       for (const file of Array.from(files)) {
-        // Check if it's a text file
-        if (isTextFile(file)) {
-          const validation = validateTextFile(file, DEFAULT_MAX_TEXT_FILE_SIZE);
-          if (!validation.isValid) {
-            errors.push(validation.error!);
-            continue;
-          }
-
-          // Check if we've reached max files
-          const totalFiles = newImages.length + newTextFiles.length + currentTotalFiles;
-          if (totalFiles >= maxFiles) {
-            errors.push(`Maximum ${maxFiles} files allowed.`);
-            break;
-          }
-
-          try {
-            const content = await fileToText(file);
-            const sanitizedName = sanitizeFilename(file.name);
-            const textFilePath: FeatureTextFilePath = {
-              id: generateFileId(),
-              path: '', // Text files don't need to be saved to disk
-              filename: sanitizedName,
-              mimeType: getTextFileMimeType(file.name),
-              content,
-            };
-            newTextFiles.push(textFilePath);
-          } catch {
-            errors.push(`${file.name}: Failed to read text file.`);
-          }
+        // 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;
         }
-        // Check if it's an image file
-        else if (isImageFile(file)) {
-          // 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
-          const totalFiles = newImages.length + newTextFiles.length + currentTotalFiles;
-          if (totalFiles >= maxFiles) {
-            errors.push(`Maximum ${maxFiles} files allowed.`);
-            break;
-          }
+        // 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;
+        }
 
-          try {
-            const base64 = await fileToBase64(file);
-            const sanitizedName = sanitizeFilename(file.name);
-            const tempPath = await saveImageToTemp(base64, sanitizedName, file.type);
+        // Check if we've reached max files
+        if (newImages.length + images.length >= maxFiles) {
+          errors.push(`Maximum ${maxFiles} images allowed.`);
+          break;
+        }
 
-            if (tempPath) {
-              const imageId = `img-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`;
-              const imagePathRef: FeatureImagePath = {
-                id: imageId,
-                path: tempPath,
-                filename: sanitizedName,
-                mimeType: file.type,
-              };
-              newImages.push(imagePathRef);
-              // Store preview for display
-              newPreviews.set(imageId, base64);
-            } else {
-              errors.push(`${file.name}: Failed to save image.`);
-            }
-          } catch {
-            errors.push(`${file.name}: Failed to process image.`);
+        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.`);
           }
-        } else {
-          errors.push(`${file.name}: Unsupported file type. Use images, .txt, or .md files.`);
+        } catch (error) {
+          errors.push(`${file.name}: Failed to process image.`);
         }
       }
 
       if (errors.length > 0) {
-        console.warn('File upload errors:', errors);
+        console.warn("Image upload errors:", errors);
       }
 
       if (newImages.length > 0) {
@@ -224,24 +198,9 @@ export function DescriptionImageDropZone({
         setPreviewImages(newPreviews);
       }
 
-      if (newTextFiles.length > 0 && onTextFilesChange) {
-        onTextFilesChange([...textFiles, ...newTextFiles]);
-      }
-
       setIsProcessing(false);
     },
-    [
-      disabled,
-      isProcessing,
-      images,
-      textFiles,
-      maxFiles,
-      maxFileSize,
-      onImagesChange,
-      onTextFilesChange,
-      previewImages,
-      saveImageToTemp,
-    ]
+    [disabled, isProcessing, images, maxFiles, maxFileSize, onImagesChange, previewImages, saveImageToTemp]
   );
 
   const handleDrop = useCallback(
@@ -285,7 +244,7 @@ export function DescriptionImageDropZone({
       }
       // Reset the input so the same file can be selected again
       if (fileInputRef.current) {
-        fileInputRef.current.value = '';
+        fileInputRef.current.value = "";
       }
     },
     [processFiles]
@@ -309,15 +268,6 @@ export function DescriptionImageDropZone({
     [images, onImagesChange]
   );
 
-  const removeTextFile = useCallback(
-    (fileId: string) => {
-      if (onTextFilesChange) {
-        onTextFilesChange(textFiles.filter((file) => file.id !== fileId));
-      }
-    },
-    [textFiles, onTextFilesChange]
-  );
-
   // Handle paste events to detect and process images from clipboard
   // Works across all OS (Windows, Linux, macOS)
   const handlePaste = useCallback(
@@ -334,15 +284,17 @@ export function DescriptionImageDropZone({
         const item = clipboardItems[i];
 
         // Check if the item is an image
-        if (item.type.startsWith('image/')) {
+        if (item.type.startsWith("image/")) {
           const file = item.getAsFile();
           if (file) {
             // Generate a filename for pasted images since they don't have one
-            const extension = item.type.split('/')[1] || 'png';
-            const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
-            const renamedFile = new File([file], `pasted-image-${timestamp}.${extension}`, {
-              type: file.type,
-            });
+            const extension = item.type.split("/")[1] || "png";
+            const timestamp = new Date().toISOString().replace(/[:.]/g, "-");
+            const renamedFile = new File(
+              [file],
+              `pasted-image-${timestamp}.${extension}`,
+              { type: file.type }
+            );
             imageFiles.push(renamedFile);
           }
         }
@@ -363,17 +315,17 @@ export function DescriptionImageDropZone({
   );
 
   return (
-    <div className={cn('relative', className)}>
+    <div className={cn("relative", className)}>
       {/* Hidden file input */}
       <input
         ref={fileInputRef}
         type="file"
         multiple
-        accept={[...ACCEPTED_IMAGE_TYPES, ...ACCEPTED_TEXT_EXTENSIONS].join(',')}
+        accept={ACCEPTED_IMAGE_TYPES.join(",")}
         onChange={handleFileSelect}
         className="hidden"
         disabled={disabled}
-        data-testid="description-file-input"
+        data-testid="description-image-input"
       />
 
       {/* Drop zone wrapper */}
@@ -381,9 +333,13 @@ export function DescriptionImageDropZone({
         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,
-        })}
+        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 && (
@@ -393,7 +349,7 @@ export function DescriptionImageDropZone({
           >
             <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 files here</span>
+              <span className="text-sm font-medium">Drop images here</span>
             </div>
           </div>
         )}
@@ -407,14 +363,17 @@ export function DescriptionImageDropZone({
           disabled={disabled}
           autoFocus={autoFocus}
           aria-invalid={error}
-          className={cn('min-h-[120px]', isProcessing && 'opacity-50 pointer-events-none')}
+          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">
-        Paste, drag and drop files, or{' '}
+        Paste, drag and drop images, or{" "}
         <button
           type="button"
           onClick={handleBrowseClick}
@@ -422,34 +381,30 @@ export function DescriptionImageDropZone({
           disabled={disabled || isProcessing}
         >
           browse
-        </button>{' '}
-        to attach context (images, .txt, .md)
+        </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>Processing files...</span>
+          <span>Saving images...</span>
         </div>
       )}
 
-      {/* File previews (images and text files) */}
-      {(images.length > 0 || textFiles.length > 0) && (
-        <div className="mt-3 space-y-2" data-testid="description-file-previews">
+      {/* 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 + textFiles.length} file
-              {images.length + textFiles.length > 1 ? 's' : ''} attached
+              {images.length} image{images.length > 1 ? "s" : ""} attached
             </p>
             <button
               type="button"
               onClick={() => {
                 onImagesChange([]);
                 setPreviewImages(new Map());
-                if (onTextFilesChange) {
-                  onTextFilesChange([]);
-                }
               }}
               className="text-xs text-muted-foreground hover:text-foreground"
               disabled={disabled}
@@ -458,7 +413,6 @@ export function DescriptionImageDropZone({
             </button>
           </div>
           <div className="flex flex-wrap gap-2">
-            {/* Image previews */}
             {images.map((image) => (
               <div
                 key={image.id}
@@ -501,39 +455,9 @@ export function DescriptionImageDropZone({
                 )}
                 {/* 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>
-            ))}
-            {/* Text file previews */}
-            {textFiles.map((file) => (
-              <div
-                key={file.id}
-                className="relative group rounded-md border border-muted bg-muted/50 overflow-hidden"
-                data-testid={`description-text-file-preview-${file.id}`}
-              >
-                {/* Text file icon */}
-                <div className="w-16 h-16 flex items-center justify-center bg-zinc-800">
-                  <FileText className="w-6 h-6 text-muted-foreground" />
-                </div>
-                {/* Remove button */}
-                {!disabled && (
-                  <button
-                    type="button"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      removeTextFile(file.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-text-file-${file.id}`}
-                  >
-                    <X className="h-3 w-3" />
-                  </button>
-                )}
-                {/* Filename and size 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">{file.filename}</p>
-                  <p className="text-[9px] text-white/70">{formatFileSize(file.content.length)}</p>
+                  <p className="text-[10px] text-white truncate">
+                    {image.filename}
+                  </p>
                 </div>
               </div>
             ))}

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

@@ -0,0 +1,228 @@
+"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";
+
+// Type-safe wrappers for Radix UI primitives (React 19 compatibility)
+const DialogContentPrimitive = DialogPrimitive.Content as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+    children?: React.ReactNode;
+    className?: string;
+  } & React.RefAttributes<HTMLDivElement>
+>;
+
+const DialogClosePrimitive = DialogPrimitive.Close as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close> & {
+    children?: React.ReactNode;
+    className?: string;
+  } & React.RefAttributes<HTMLButtonElement>
+>;
+
+const DialogTitlePrimitive = DialogPrimitive.Title as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> & {
+    children?: React.ReactNode;
+    className?: string;
+  } & React.RefAttributes<HTMLHeadingElement>
+>;
+
+const DialogDescriptionPrimitive = DialogPrimitive.Description as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description> & {
+    children?: React.ReactNode;
+    className?: string;
+    title?: string;
+  } & React.RefAttributes<HTMLParagraphElement>
+>;
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  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} />;
+}
+
+const DialogOverlayPrimitive = DialogPrimitive.Overlay as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> & {
+    className?: string;
+  } & React.RefAttributes<HTMLDivElement>
+>;
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay> & {
+  className?: string;
+}) {
+  return (
+    <DialogOverlayPrimitive
+      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 />
+      <DialogContentPrimitive
+        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 && (
+          <DialogClosePrimitive
+            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>
+          </DialogClosePrimitive>
+        )}
+      </DialogContentPrimitive>
+    </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,
+  children,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title> & {
+  children?: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <DialogTitlePrimitive
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold tracking-tight", className)}
+      {...props}
+    >
+      {children}
+    </DialogTitlePrimitive>
+  );
+}
+
+function DialogDescription({
+  className,
+  children,
+  title,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description> & {
+  children?: React.ReactNode;
+  className?: string;
+  title?: string;
+}) {
+  return (
+    <DialogDescriptionPrimitive
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm leading-relaxed", className)}
+      title={title}
+      {...props}
+    >
+      {children}
+    </DialogDescriptionPrimitive>
+  );
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};

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

@@ -1,49 +1,45 @@
-import * as React from 'react';
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import { Check, ChevronRight, Circle } from 'lucide-react';
+"use client"
 
-import { cn } from '@/lib/utils';
+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"
 
 // Type-safe wrappers for Radix UI primitives (React 19 compatibility)
-const DropdownMenuTriggerPrimitive =
-  DropdownMenuPrimitive.Trigger as React.ForwardRefExoticComponent<
-    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger> & {
-      children?: React.ReactNode;
-      asChild?: boolean;
-    } & React.RefAttributes<HTMLButtonElement>
-  >;
+const DropdownMenuTriggerPrimitive = DropdownMenuPrimitive.Trigger as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger> & {
+    children?: React.ReactNode;
+    asChild?: boolean;
+  } & React.RefAttributes<HTMLButtonElement>
+>;
 
-const DropdownMenuSubTriggerPrimitive =
-  DropdownMenuPrimitive.SubTrigger as React.ForwardRefExoticComponent<
-    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-      children?: React.ReactNode;
-      className?: string;
-    } & React.RefAttributes<HTMLDivElement>
-  >;
+const DropdownMenuSubTriggerPrimitive = DropdownMenuPrimitive.SubTrigger as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    children?: React.ReactNode;
+    className?: string;
+  } & React.RefAttributes<HTMLDivElement>
+>;
 
-const DropdownMenuRadioGroupPrimitive =
-  DropdownMenuPrimitive.RadioGroup as React.ForwardRefExoticComponent<
-    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioGroup> & {
-      children?: React.ReactNode;
-    } & React.RefAttributes<HTMLDivElement>
-  >;
+const DropdownMenuRadioGroupPrimitive = DropdownMenuPrimitive.RadioGroup as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioGroup> & {
+    children?: React.ReactNode;
+  } & React.RefAttributes<HTMLDivElement>
+>;
 
 const DropdownMenuItemPrimitive = DropdownMenuPrimitive.Item as React.ForwardRefExoticComponent<
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
     children?: React.ReactNode;
     className?: string;
-  } & React.HTMLAttributes<HTMLDivElement> &
-    React.RefAttributes<HTMLDivElement>
+  } & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>
 >;
 
-const DropdownMenuRadioItemPrimitive =
-  DropdownMenuPrimitive.RadioItem as React.ForwardRefExoticComponent<
-    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> & {
-      children?: React.ReactNode;
-      className?: string;
-    } & React.HTMLAttributes<HTMLDivElement> &
-      React.RefAttributes<HTMLDivElement>
-  >;
+const DropdownMenuRadioItemPrimitive = DropdownMenuPrimitive.RadioItem as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> & {
+    children?: React.ReactNode;
+    className?: string;
+  } & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>
+>;
 
 const DropdownMenuLabelPrimitive = DropdownMenuPrimitive.Label as React.ForwardRefExoticComponent<
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
@@ -52,29 +48,26 @@ const DropdownMenuLabelPrimitive = DropdownMenuPrimitive.Label as React.ForwardR
   } & React.RefAttributes<HTMLDivElement>
 >;
 
-const DropdownMenuCheckboxItemPrimitive =
-  DropdownMenuPrimitive.CheckboxItem as React.ForwardRefExoticComponent<
-    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem> & {
-      children?: React.ReactNode;
-      className?: string;
-    } & React.RefAttributes<HTMLDivElement>
-  >;
+const DropdownMenuCheckboxItemPrimitive = DropdownMenuPrimitive.CheckboxItem as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem> & {
+    children?: React.ReactNode;
+    className?: string;
+  } & React.RefAttributes<HTMLDivElement>
+>;
 
-const DropdownMenuItemIndicatorPrimitive =
-  DropdownMenuPrimitive.ItemIndicator as React.ForwardRefExoticComponent<
-    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.ItemIndicator> & {
-      children?: React.ReactNode;
-    } & React.RefAttributes<HTMLSpanElement>
-  >;
+const DropdownMenuItemIndicatorPrimitive = DropdownMenuPrimitive.ItemIndicator as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.ItemIndicator> & {
+    children?: React.ReactNode;
+  } & React.RefAttributes<HTMLSpanElement>
+>;
 
-const DropdownMenuSeparatorPrimitive =
-  DropdownMenuPrimitive.Separator as React.ForwardRefExoticComponent<
-    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator> & {
-      className?: string;
-    } & React.RefAttributes<HTMLDivElement>
-  >;
+const DropdownMenuSeparatorPrimitive = DropdownMenuPrimitive.Separator as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator> & {
+    className?: string;
+  } & React.RefAttributes<HTMLDivElement>
+>;
 
-const DropdownMenu = DropdownMenuPrimitive.Root;
+const DropdownMenu = DropdownMenuPrimitive.Root
 
 function DropdownMenuTrigger({
   children,
@@ -88,35 +81,39 @@ function DropdownMenuTrigger({
     <DropdownMenuTriggerPrimitive asChild={asChild} {...props}>
       {children}
     </DropdownMenuTriggerPrimitive>
-  );
+  )
 }
 
-const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
 
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
 
-const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
 
 function DropdownMenuRadioGroup({
   children,
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup> & { children?: React.ReactNode }) {
-  return <DropdownMenuRadioGroupPrimitive {...props}>{children}</DropdownMenuRadioGroupPrimitive>;
+  return (
+    <DropdownMenuRadioGroupPrimitive {...props}>
+      {children}
+    </DropdownMenuRadioGroupPrimitive>
+  )
 }
 
 const DropdownMenuSubTrigger = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean;
-    children?: React.ReactNode;
-    className?: string;
+    inset?: boolean
+    children?: React.ReactNode
+    className?: string
   }
 >(({ className, inset, children, ...props }, ref) => (
   <DropdownMenuSubTriggerPrimitive
     ref={ref}
     className={cn(
-      'flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent hover:bg-accent',
-      inset && 'pl-8',
+      "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}
@@ -124,8 +121,8 @@ const DropdownMenuSubTrigger = React.forwardRef<
     {children}
     <ChevronRight className="ml-auto h-4 w-4" />
   </DropdownMenuSubTriggerPrimitive>
-));
-DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+))
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName
 
 const DropdownMenuSubContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
@@ -137,14 +134,14 @@ const DropdownMenuSubContent = React.forwardRef<
     <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',
+        "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;
+))
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName
 
 const DropdownMenuContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
@@ -157,35 +154,35 @@ const DropdownMenuContent = React.forwardRef<
       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',
+        "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;
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
 
 const DropdownMenuItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean;
-    children?: React.ReactNode;
+    inset?: boolean
+    children?: React.ReactNode
   } & React.HTMLAttributes<HTMLDivElement>
 >(({ className, inset, children, ...props }, ref) => (
   <DropdownMenuItemPrimitive
     ref={ref}
     className={cn(
-      'relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed hover:bg-accent',
-      inset && 'pl-8',
+      "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}
   >
     {children}
   </DropdownMenuItemPrimitive>
-));
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
 
 const DropdownMenuCheckboxItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
@@ -197,7 +194,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuCheckboxItemPrimitive
     ref={ref}
     className={cn(
-      'relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed hover:bg-accent',
+      "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}
@@ -210,19 +207,20 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     </span>
     {children}
   </DropdownMenuCheckboxItemPrimitive>
-));
-DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+))
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName
 
 const DropdownMenuRadioItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> & {
-    children?: React.ReactNode;
+    children?: React.ReactNode
   } & React.HTMLAttributes<HTMLDivElement>
 >(({ className, children, ...props }, ref) => (
   <DropdownMenuRadioItemPrimitive
     ref={ref}
     className={cn(
-      'relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed hover:bg-accent',
+      "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}
@@ -234,26 +232,30 @@ const DropdownMenuRadioItem = React.forwardRef<
     </span>
     {children}
   </DropdownMenuRadioItemPrimitive>
-));
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
 
 const DropdownMenuLabel = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Label>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean;
-    children?: React.ReactNode;
-    className?: string;
+    inset?: boolean
+    children?: React.ReactNode
+    className?: string
   }
 >(({ className, inset, children, ...props }, ref) => (
   <DropdownMenuLabelPrimitive
     ref={ref}
-    className={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
     {...props}
   >
     {children}
   </DropdownMenuLabelPrimitive>
-));
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
 
 const DropdownMenuSeparator = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
@@ -263,21 +265,24 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuSeparatorPrimitive
     ref={ref}
-    className={cn('-mx-1 my-1 h-px bg-muted', className)}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
     {...props}
   />
-));
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
 
-const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
     <span
-      className={cn('ml-auto text-xs tracking-widest text-brand-400/70', className)}
+      className={cn("ml-auto text-xs tracking-widest text-brand-400/70", className)}
       {...props}
     />
-  );
-};
-DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
+  )
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
 
 export {
   DropdownMenu,
@@ -295,4 +300,4 @@ export {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuRadioGroup,
-};
+}

apps/app/src/components/ui/feature-image-upload.tsx

@@ -1,14 +1,8 @@
-import React, { useState, useRef, useCallback } from 'react';
-import { cn } from '@/lib/utils';
-import { ImageIcon, X, Upload } from 'lucide-react';
-import {
-  fileToBase64,
-  generateImageId,
-  ACCEPTED_IMAGE_TYPES,
-  DEFAULT_MAX_FILE_SIZE,
-  DEFAULT_MAX_FILES,
-  validateImageFile,
-} from '@/lib/image-utils';
+"use client";
+
+import React, { useState, useRef, useCallback } from "react";
+import { cn } from "@/lib/utils";
+import { ImageIcon, X, Upload } from "lucide-react";
 
 export interface FeatureImage {
   id: string;
@@ -27,10 +21,19 @@ interface FeatureImageUploadProps {
   disabled?: boolean;
 }
 
+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 FeatureImageUpload({
   images,
   onImagesChange,
-  maxFiles = DEFAULT_MAX_FILES,
+  maxFiles = 5,
   maxFileSize = DEFAULT_MAX_FILE_SIZE,
   className,
   disabled = false,
@@ -39,6 +42,21 @@ export function FeatureImageUpload({
   const [isProcessing, setIsProcessing] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
+  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 processFiles = useCallback(
     async (files: FileList) => {
       if (disabled || isProcessing) return;
@@ -48,10 +66,20 @@ export function FeatureImageUpload({
       const errors: string[] = [];
 
       for (const file of Array.from(files)) {
-        // Validate file
-        const validation = validateImageFile(file, maxFileSize);
-        if (!validation.isValid) {
-          errors.push(validation.error!);
+        // 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;
         }
 
@@ -64,20 +92,20 @@ export function FeatureImageUpload({
         try {
           const base64 = await fileToBase64(file);
           const imageAttachment: FeatureImage = {
-            id: generateImageId(),
+            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 {
+        } catch (error) {
           errors.push(`${file.name}: Failed to process image.`);
         }
       }
 
       if (errors.length > 0) {
-        console.warn('Image upload errors:', errors);
+        console.warn("Image upload errors:", errors);
       }
 
       if (newImages.length > 0) {
@@ -130,7 +158,7 @@ export function FeatureImageUpload({
       }
       // Reset the input so the same file can be selected again
       if (fileInputRef.current) {
-        fileInputRef.current.value = '';
+        fileInputRef.current.value = "";
       }
     },
     [processFiles]
@@ -153,14 +181,22 @@ export function FeatureImageUpload({
     onImagesChange([]);
   }, [onImagesChange]);
 
+  const 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];
+  };
+
   return (
-    <div className={cn('relative', className)}>
+    <div className={cn("relative", className)}>
       {/* Hidden file input */}
       <input
         ref={fileInputRef}
         type="file"
         multiple
-        accept={ACCEPTED_IMAGE_TYPES.join(',')}
+        accept={ACCEPTED_IMAGE_TYPES.join(",")}
         onChange={handleFileSelect}
         className="hidden"
         disabled={disabled}
@@ -174,12 +210,13 @@ export function FeatureImageUpload({
         onDragLeave={handleDragLeave}
         onClick={handleBrowseClick}
         className={cn(
-          'relative rounded-lg border-2 border-dashed transition-all duration-200 cursor-pointer',
+          "relative rounded-lg border-2 border-dashed transition-all duration-200 cursor-pointer",
           {
-            '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':
+            "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,
           }
         )}
@@ -188,8 +225,10 @@ export function FeatureImageUpload({
         <div className="flex flex-col items-center justify-center p-4 text-center">
           <div
             className={cn(
-              'rounded-full p-2 mb-2',
-              isDragOver && !disabled ? 'bg-blue-100 dark:bg-blue-900/30' : 'bg-muted'
+              "rounded-full p-2 mb-2",
+              isDragOver && !disabled
+                ? "bg-blue-100 dark:bg-blue-900/30"
+                : "bg-muted"
             )}
           >
             {isProcessing ? (
@@ -199,10 +238,13 @@ export function FeatureImageUpload({
             )}
           </div>
           <p className="text-sm text-muted-foreground">
-            {isDragOver && !disabled ? 'Drop images here' : 'Click or drag images here'}
+            {isDragOver && !disabled
+              ? "Drop images here"
+              : "Click or drag images here"}
           </p>
           <p className="text-xs text-muted-foreground mt-1">
-            Up to {maxFiles} images, max {Math.round(maxFileSize / (1024 * 1024))}MB each
+            Up to {maxFiles} images, max{" "}
+            {Math.round(maxFileSize / (1024 * 1024))}MB each
           </p>
         </div>
       </div>
@@ -212,7 +254,7 @@ export function FeatureImageUpload({
         <div className="mt-3 space-y-2" data-testid="feature-image-previews">
           <div className="flex items-center justify-between">
             <p className="text-xs font-medium text-foreground">
-              {images.length} image{images.length > 1 ? 's' : ''} selected
+              {images.length} image{images.length > 1 ? "s" : ""} selected
             </p>
             <button
               type="button"
@@ -254,7 +296,9 @@ export function FeatureImageUpload({
                 )}
                 {/* 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>
+                  <p className="text-[10px] text-white truncate">
+                    {image.filename}
+                  </p>
                 </div>
               </div>
             ))}

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

@@ -1,6 +1,8 @@
-import { useState, useEffect, useMemo, useCallback } from 'react';
-import { getElectronAPI } from '@/lib/electron';
-import { cn } from '@/lib/utils';
+"use client";
+
+import { useState, useEffect, useMemo, useCallback } from "react";
+import { getElectronAPI } from "@/lib/electron";
+import { cn } from "@/lib/utils";
 import {
   File,
   FileText,
@@ -13,9 +15,9 @@ import {
   RefreshCw,
   GitBranch,
   AlertCircle,
-} from 'lucide-react';
-import { Button } from './button';
-import type { FileStatus } from '@/types/electron';
+} from "lucide-react";
+import { Button } from "./button";
+import type { FileStatus } from "@/types/electron";
 
 interface GitDiffPanelProps {
   projectPath: string;
@@ -30,7 +32,7 @@ interface GitDiffPanelProps {
 interface ParsedDiffHunk {
   header: string;
   lines: {
-    type: 'context' | 'addition' | 'deletion' | 'header';
+    type: "context" | "addition" | "deletion" | "header";
     content: string;
     lineNumber?: { old?: number; new?: number };
   }[];
@@ -46,16 +48,16 @@ interface ParsedFileDiff {
 
 const getFileIcon = (status: string) => {
   switch (status) {
-    case 'A':
-    case '?':
+    case "A":
+    case "?":
       return <FilePlus className="w-4 h-4 text-green-500" />;
-    case 'D':
+    case "D":
       return <FileX className="w-4 h-4 text-red-500" />;
-    case 'M':
-    case 'U':
+    case "M":
+    case "U":
       return <FilePen className="w-4 h-4 text-amber-500" />;
-    case 'R':
-    case 'C':
+    case "R":
+    case "C":
       return <File className="w-4 h-4 text-blue-500" />;
     default:
       return <FileText className="w-4 h-4 text-muted-foreground" />;
@@ -64,40 +66,40 @@ const getFileIcon = (status: string) => {
 
 const getStatusBadgeColor = (status: string) => {
   switch (status) {
-    case 'A':
-    case '?':
-      return 'bg-green-500/20 text-green-400 border-green-500/30';
-    case 'D':
-      return 'bg-red-500/20 text-red-400 border-red-500/30';
-    case 'M':
-    case 'U':
-      return 'bg-amber-500/20 text-amber-400 border-amber-500/30';
-    case 'R':
-    case 'C':
-      return 'bg-blue-500/20 text-blue-400 border-blue-500/30';
+    case "A":
+    case "?":
+      return "bg-green-500/20 text-green-400 border-green-500/30";
+    case "D":
+      return "bg-red-500/20 text-red-400 border-red-500/30";
+    case "M":
+    case "U":
+      return "bg-amber-500/20 text-amber-400 border-amber-500/30";
+    case "R":
+    case "C":
+      return "bg-blue-500/20 text-blue-400 border-blue-500/30";
     default:
-      return 'bg-muted text-muted-foreground border-border';
+      return "bg-muted text-muted-foreground border-border";
   }
 };
 
 const getStatusDisplayName = (status: string) => {
   switch (status) {
-    case 'A':
-      return 'Added';
-    case '?':
-      return 'Untracked';
-    case 'D':
-      return 'Deleted';
-    case 'M':
-      return 'Modified';
-    case 'U':
-      return 'Updated';
-    case 'R':
-      return 'Renamed';
-    case 'C':
-      return 'Copied';
+    case "A":
+      return "Added";
+    case "?":
+      return "Untracked";
+    case "D":
+      return "Deleted";
+    case "M":
+      return "Modified";
+    case "U":
+      return "Updated";
+    case "R":
+      return "Renamed";
+    case "C":
+      return "Copied";
     default:
-      return 'Changed';
+      return "Changed";
   }
 };
 
@@ -108,7 +110,7 @@ function parseDiff(diffText: string): ParsedFileDiff[] {
   if (!diffText) return [];
 
   const files: ParsedFileDiff[] = [];
-  const lines = diffText.split('\n');
+  const lines = diffText.split("\n");
   let currentFile: ParsedFileDiff | null = null;
   let currentHunk: ParsedDiffHunk | null = null;
   let oldLineNum = 0;
@@ -118,7 +120,7 @@ function parseDiff(diffText: string): ParsedFileDiff[] {
     const line = lines[i];
 
     // New file diff
-    if (line.startsWith('diff --git')) {
+    if (line.startsWith("diff --git")) {
       if (currentFile) {
         if (currentHunk) {
           currentFile.hunks.push(currentHunk);
@@ -128,7 +130,7 @@ function parseDiff(diffText: string): ParsedFileDiff[] {
       // Extract file path from diff header
       const match = line.match(/diff --git a\/(.*?) b\/(.*)/);
       currentFile = {
-        filePath: match ? match[2] : 'unknown',
+        filePath: match ? match[2] : "unknown",
         hunks: [],
       };
       currentHunk = null;
@@ -136,30 +138,34 @@ function parseDiff(diffText: string): ParsedFileDiff[] {
     }
 
     // New file indicator
-    if (line.startsWith('new file mode')) {
+    if (line.startsWith("new file mode")) {
       if (currentFile) currentFile.isNew = true;
       continue;
     }
 
     // Deleted file indicator
-    if (line.startsWith('deleted file mode')) {
+    if (line.startsWith("deleted file mode")) {
       if (currentFile) currentFile.isDeleted = true;
       continue;
     }
 
     // Renamed file indicator
-    if (line.startsWith('rename from') || line.startsWith('rename to')) {
+    if (line.startsWith("rename from") || line.startsWith("rename to")) {
       if (currentFile) currentFile.isRenamed = true;
       continue;
     }
 
     // Skip index, ---/+++ lines
-    if (line.startsWith('index ') || line.startsWith('--- ') || line.startsWith('+++ ')) {
+    if (
+      line.startsWith("index ") ||
+      line.startsWith("--- ") ||
+      line.startsWith("+++ ")
+    ) {
       continue;
     }
 
     // Hunk header
-    if (line.startsWith('@@')) {
+    if (line.startsWith("@@")) {
       if (currentHunk && currentFile) {
         currentFile.hunks.push(currentHunk);
       }
@@ -169,31 +175,31 @@ function parseDiff(diffText: string): ParsedFileDiff[] {
       newLineNum = hunkMatch ? parseInt(hunkMatch[2], 10) : 1;
       currentHunk = {
         header: line,
-        lines: [{ type: 'header', content: line }],
+        lines: [{ type: "header", content: line }],
       };
       continue;
     }
 
     // Diff content lines
     if (currentHunk) {
-      if (line.startsWith('+')) {
+      if (line.startsWith("+")) {
         currentHunk.lines.push({
-          type: 'addition',
+          type: "addition",
           content: line.substring(1),
           lineNumber: { new: newLineNum },
         });
         newLineNum++;
-      } else if (line.startsWith('-')) {
+      } else if (line.startsWith("-")) {
         currentHunk.lines.push({
-          type: 'deletion',
+          type: "deletion",
           content: line.substring(1),
           lineNumber: { old: oldLineNum },
         });
         oldLineNum++;
-      } else if (line.startsWith(' ') || line === '') {
+      } else if (line.startsWith(" ") || line === "") {
         currentHunk.lines.push({
-          type: 'context',
-          content: line.substring(1) || '',
+          type: "context",
+          content: line.substring(1) || "",
           lineNumber: { old: oldLineNum, new: newLineNum },
         });
         oldLineNum++;
@@ -218,52 +224,52 @@ function DiffLine({
   content,
   lineNumber,
 }: {
-  type: 'context' | 'addition' | 'deletion' | 'header';
+  type: "context" | "addition" | "deletion" | "header";
   content: string;
   lineNumber?: { old?: number; new?: number };
 }) {
   const bgClass = {
-    context: 'bg-transparent',
-    addition: 'bg-green-500/10',
-    deletion: 'bg-red-500/10',
-    header: 'bg-blue-500/10',
+    context: "bg-transparent",
+    addition: "bg-green-500/10",
+    deletion: "bg-red-500/10",
+    header: "bg-blue-500/10",
   };
 
   const textClass = {
-    context: 'text-foreground-secondary',
-    addition: 'text-green-400',
-    deletion: 'text-red-400',
-    header: 'text-blue-400',
+    context: "text-foreground-secondary",
+    addition: "text-green-400",
+    deletion: "text-red-400",
+    header: "text-blue-400",
   };
 
   const prefix = {
-    context: ' ',
-    addition: '+',
-    deletion: '-',
-    header: '',
+    context: " ",
+    addition: "+",
+    deletion: "-",
+    header: "",
   };
 
-  if (type === 'header') {
+  if (type === "header") {
     return (
-      <div className={cn('px-2 py-1 font-mono text-xs', bgClass[type], textClass[type])}>
+      <div className={cn("px-2 py-1 font-mono text-xs", bgClass[type], textClass[type])}>
         {content}
       </div>
     );
   }
 
   return (
-    <div className={cn('flex font-mono text-xs', bgClass[type])}>
+    <div className={cn("flex font-mono text-xs", bgClass[type])}>
       <span className="w-12 flex-shrink-0 text-right pr-2 text-muted-foreground select-none border-r border-border-glass">
-        {lineNumber?.old ?? ''}
+        {lineNumber?.old ?? ""}
       </span>
       <span className="w-12 flex-shrink-0 text-right pr-2 text-muted-foreground select-none border-r border-border-glass">
-        {lineNumber?.new ?? ''}
+        {lineNumber?.new ?? ""}
       </span>
-      <span className={cn('w-4 flex-shrink-0 text-center select-none', textClass[type])}>
+      <span className={cn("w-4 flex-shrink-0 text-center select-none", textClass[type])}>
         {prefix[type]}
       </span>
-      <span className={cn('flex-1 px-2 whitespace-pre-wrap break-all', textClass[type])}>
-        {content || '\u00A0'}
+      <span className={cn("flex-1 px-2 whitespace-pre-wrap break-all", textClass[type])}>
+        {content || "\u00A0"}
       </span>
     </div>
   );
@@ -279,11 +285,11 @@ function FileDiffSection({
   onToggle: () => void;
 }) {
   const additions = fileDiff.hunks.reduce(
-    (acc, hunk) => acc + hunk.lines.filter((l) => l.type === 'addition').length,
+    (acc, hunk) => acc + hunk.lines.filter((l) => l.type === "addition").length,
     0
   );
   const deletions = fileDiff.hunks.reduce(
-    (acc, hunk) => acc + hunk.lines.filter((l) => l.type === 'deletion').length,
+    (acc, hunk) => acc + hunk.lines.filter((l) => l.type === "deletion").length,
     0
   );
 
@@ -318,8 +324,12 @@ function FileDiffSection({
               renamed
             </span>
           )}
-          {additions > 0 && <span className="text-xs text-green-400">+{additions}</span>}
-          {deletions > 0 && <span className="text-xs text-red-400">-{deletions}</span>}
+          {additions > 0 && (
+            <span className="text-xs text-green-400">+{additions}</span>
+          )}
+          {deletions > 0 && (
+            <span className="text-xs text-red-400">-{deletions}</span>
+          )}
         </div>
       </button>
       {isExpanded && (
@@ -353,7 +363,7 @@ export function GitDiffPanel({
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [files, setFiles] = useState<FileStatus[]>([]);
-  const [diffContent, setDiffContent] = useState<string>('');
+  const [diffContent, setDiffContent] = useState<string>("");
   const [expandedFiles, setExpandedFiles] = useState<Set<string>>(new Set());
 
   const loadDiffs = useCallback(async () => {
@@ -365,30 +375,30 @@ export function GitDiffPanel({
       // Use worktree API if worktrees are enabled, otherwise use git API for main project
       if (useWorktrees) {
         if (!api?.worktree?.getDiffs) {
-          throw new Error('Worktree API not available');
+          throw new Error("Worktree API not available");
         }
         const result = await api.worktree.getDiffs(projectPath, featureId);
         if (result.success) {
           setFiles(result.files || []);
-          setDiffContent(result.diff || '');
+          setDiffContent(result.diff || "");
         } else {
-          setError(result.error || 'Failed to load diffs');
+          setError(result.error || "Failed to load diffs");
         }
       } else {
         // Use git API for main project diffs
         if (!api?.git?.getDiffs) {
-          throw new Error('Git API not available');
+          throw new Error("Git API not available");
         }
         const result = await api.git.getDiffs(projectPath);
         if (result.success) {
           setFiles(result.files || []);
-          setDiffContent(result.diff || '');
+          setDiffContent(result.diff || "");
         } else {
-          setError(result.error || 'Failed to load diffs');
+          setError(result.error || "Failed to load diffs");
         }
       }
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to load diffs');
+      setError(err instanceof Error ? err.message : "Failed to load diffs");
     } finally {
       setIsLoading(false);
     }
@@ -428,7 +438,8 @@ export function GitDiffPanel({
     (acc, file) =>
       acc +
       file.hunks.reduce(
-        (hAcc, hunk) => hAcc + hunk.lines.filter((l) => l.type === 'addition').length,
+        (hAcc, hunk) =>
+          hAcc + hunk.lines.filter((l) => l.type === "addition").length,
         0
       ),
     0
@@ -437,7 +448,8 @@ export function GitDiffPanel({
     (acc, file) =>
       acc +
       file.hunks.reduce(
-        (hAcc, hunk) => hAcc + hunk.lines.filter((l) => l.type === 'deletion').length,
+        (hAcc, hunk) =>
+          hAcc + hunk.lines.filter((l) => l.type === "deletion").length,
         0
       ),
     0
@@ -446,7 +458,7 @@ export function GitDiffPanel({
   return (
     <div
       className={cn(
-        'rounded-xl border border-border bg-card backdrop-blur-sm overflow-hidden',
+        "rounded-xl border border-border bg-card backdrop-blur-sm overflow-hidden",
         className
       )}
       data-testid="git-diff-panel"
@@ -470,10 +482,14 @@ export function GitDiffPanel({
           {!isExpanded && files.length > 0 && (
             <>
               <span className="text-muted-foreground">
-                {files.length} {files.length === 1 ? 'file' : 'files'}
+                {files.length} {files.length === 1 ? "file" : "files"}
               </span>
-              {totalAdditions > 0 && <span className="text-green-400">+{totalAdditions}</span>}
-              {totalDeletions > 0 && <span className="text-red-400">-{totalDeletions}</span>}
+              {totalAdditions > 0 && (
+                <span className="text-green-400">+{totalAdditions}</span>
+              )}
+              {totalDeletions > 0 && (
+                <span className="text-red-400">-{totalDeletions}</span>
+              )}
             </>
           )}
         </div>
@@ -491,7 +507,12 @@ export function GitDiffPanel({
             <div className="flex flex-col items-center justify-center gap-2 py-8 text-muted-foreground">
               <AlertCircle className="w-5 h-5 text-amber-500" />
               <span className="text-sm">{error}</span>
-              <Button variant="ghost" size="sm" onClick={loadDiffs} className="mt-2">
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={loadDiffs}
+                className="mt-2"
+              >
                 <RefreshCw className="w-4 h-4 mr-2" />
                 Retry
               </Button>
@@ -508,22 +529,19 @@ export function GitDiffPanel({
                   <div className="flex items-center gap-4 flex-wrap">
                     {(() => {
                       // Group files by status
-                      const statusGroups = files.reduce(
-                        (acc, file) => {
-                          const status = file.status;
-                          if (!acc[status]) {
-                            acc[status] = {
-                              count: 0,
-                              statusText: getStatusDisplayName(status),
-                              files: [],
-                            };
-                          }
-                          acc[status].count += 1;
-                          acc[status].files.push(file.path);
-                          return acc;
-                        },
-                        {} as Record<string, { count: number; statusText: string; files: string[] }>
-                      );
+                      const statusGroups = files.reduce((acc, file) => {
+                        const status = file.status;
+                        if (!acc[status]) {
+                          acc[status] = {
+                            count: 0,
+                            statusText: getStatusDisplayName(status),
+                            files: []
+                          };
+                        }
+                        acc[status].count += 1;
+                        acc[status].files.push(file.path);
+                        return acc;
+                      }, {} as Record<string, {count: number, statusText: string, files: string[]}>);
 
                       return Object.entries(statusGroups).map(([status, group]) => (
                         <div
@@ -535,7 +553,7 @@ export function GitDiffPanel({
                           {getFileIcon(status)}
                           <span
                             className={cn(
-                              'text-xs px-1.5 py-0.5 rounded border font-medium',
+                              "text-xs px-1.5 py-0.5 rounded border font-medium",
                               getStatusBadgeColor(status)
                             )}
                           >
@@ -562,7 +580,12 @@ export function GitDiffPanel({
                     >
                       Collapse All
                     </Button>
-                    <Button variant="ghost" size="sm" onClick={loadDiffs} className="text-xs h-7">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={loadDiffs}
+                      className="text-xs h-7"
+                    >
                       <RefreshCw className="w-3 h-3 mr-1" />
                       Refresh
                     </Button>
@@ -572,13 +595,17 @@ export function GitDiffPanel({
                 {/* Stats */}
                 <div className="flex items-center gap-4 text-sm mt-2">
                   <span className="text-muted-foreground">
-                    {files.length} {files.length === 1 ? 'file' : 'files'} changed
+                    {files.length} {files.length === 1 ? "file" : "files"} changed
                   </span>
                   {totalAdditions > 0 && (
-                    <span className="text-green-400">+{totalAdditions} additions</span>
+                    <span className="text-green-400">
+                      +{totalAdditions} additions
+                    </span>
                   )}
                   {totalDeletions > 0 && (
-                    <span className="text-red-400">-{totalDeletions} deletions</span>
+                    <span className="text-red-400">
+                      -{totalDeletions} deletions
+                    </span>
                   )}
                 </div>
               </div>
@@ -608,7 +635,7 @@ export function GitDiffPanel({
                           </span>
                           <span
                             className={cn(
-                              'text-xs px-1.5 py-0.5 rounded border font-medium',
+                              "text-xs px-1.5 py-0.5 rounded border font-medium",
                               getStatusBadgeColor(file.status)
                             )}
                           >
@@ -616,9 +643,9 @@ export function GitDiffPanel({
                           </span>
                         </div>
                         <div className="px-4 py-3 text-sm text-muted-foreground bg-background border-t border-border">
-                          {file.status === '?' ? (
+                          {file.status === "?" ? (
                             <span>New file - content preview not available</span>
-                          ) : file.status === 'D' ? (
+                          ) : file.status === "D" ? (
                             <span>File deleted</span>
                           ) : (
                             <span>Diff content not available</span>

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

@@ -1,7 +1,10 @@
-import React, { useEffect, useCallback, useRef } from 'react';
-import { Button, buttonVariants } from './button';
-import { cn } from '@/lib/utils';
-import type { VariantProps } from 'class-variance-authority';
+"use client";
+
+import * as React from "react";
+import { useEffect, useCallback, useRef } from "react";
+import { Button, buttonVariants } from "./button";
+import { cn } from "@/lib/utils";
+import type { VariantProps } from "class-variance-authority";
 
 export interface HotkeyConfig {
   /** The key to trigger the hotkey (e.g., "Enter", "s", "n") */
@@ -17,7 +20,8 @@ export interface HotkeyConfig {
 }
 
 export interface HotkeyButtonProps
-  extends React.ComponentProps<'button'>, VariantProps<typeof buttonVariants> {
+  extends React.ComponentProps<"button">,
+    VariantProps<typeof buttonVariants> {
   /** Hotkey configuration - can be a simple key string or a full config object */
   hotkey?: string | HotkeyConfig;
   /** Whether to show the hotkey indicator badge */
@@ -36,14 +40,14 @@ export interface HotkeyButtonProps
  * Get the modifier key symbol based on platform
  */
 function getModifierSymbol(isMac: boolean): string {
-  return isMac ? '⌘' : 'Ctrl';
+  return isMac ? "⌘" : "Ctrl";
 }
 
 /**
  * Parse hotkey config into a normalized format
  */
 function parseHotkeyConfig(hotkey: string | HotkeyConfig): HotkeyConfig {
-  if (typeof hotkey === 'string') {
+  if (typeof hotkey === "string") {
     return { key: hotkey };
   }
   return hotkey;
@@ -52,7 +56,10 @@ function parseHotkeyConfig(hotkey: string | HotkeyConfig): HotkeyConfig {
 /**
  * Generate the display label for the hotkey
  */
-function getHotkeyDisplayLabel(config: HotkeyConfig, isMac: boolean): React.ReactNode {
+function getHotkeyDisplayLabel(
+  config: HotkeyConfig,
+  isMac: boolean
+): React.ReactNode {
   if (config.label) {
     return config.label;
   }
@@ -69,7 +76,10 @@ function getHotkeyDisplayLabel(config: HotkeyConfig, isMac: boolean): React.Reac
 
   if (config.shift) {
     parts.push(
-      <span key="shift" className="leading-none flex items-center justify-center">
+      <span
+        key="shift"
+        className="leading-none flex items-center justify-center"
+      >
         ⇧
       </span>
     );
@@ -78,7 +88,7 @@ function getHotkeyDisplayLabel(config: HotkeyConfig, isMac: boolean): React.Reac
   if (config.alt) {
     parts.push(
       <span key="alt" className="leading-none flex items-center justify-center">
-        {isMac ? '⌥' : 'Alt'}
+        {isMac ? "⌥" : "Alt"}
       </span>
     );
   }
@@ -86,36 +96,36 @@ function getHotkeyDisplayLabel(config: HotkeyConfig, isMac: boolean): React.Reac
   // Convert key to display format
   let keyDisplay = config.key;
   switch (config.key.toLowerCase()) {
-    case 'enter':
-      keyDisplay = '↵';
+    case "enter":
+      keyDisplay = "↵";
       break;
-    case 'escape':
-    case 'esc':
-      keyDisplay = 'Esc';
+    case "escape":
+    case "esc":
+      keyDisplay = "Esc";
       break;
-    case 'arrowup':
-      keyDisplay = '↑';
+    case "arrowup":
+      keyDisplay = "↑";
       break;
-    case 'arrowdown':
-      keyDisplay = '↓';
+    case "arrowdown":
+      keyDisplay = "↓";
       break;
-    case 'arrowleft':
-      keyDisplay = '←';
+    case "arrowleft":
+      keyDisplay = "←";
       break;
-    case 'arrowright':
-      keyDisplay = '→';
+    case "arrowright":
+      keyDisplay = "→";
       break;
-    case 'backspace':
-      keyDisplay = '⌫';
+    case "backspace":
+      keyDisplay = "⌫";
       break;
-    case 'delete':
-      keyDisplay = '⌦';
+    case "delete":
+      keyDisplay = "⌦";
       break;
-    case 'tab':
-      keyDisplay = '⇥';
+    case "tab":
+      keyDisplay = "⇥";
       break;
-    case ' ':
-      keyDisplay = 'Space';
+    case " ":
+      keyDisplay = "Space";
       break;
     default:
       // Capitalize single letters
@@ -140,16 +150,16 @@ function isInputElement(element: Element | null): boolean {
   if (!element) return false;
 
   const tagName = element.tagName.toLowerCase();
-  if (tagName === 'input' || tagName === 'textarea' || tagName === 'select') {
+  if (tagName === "input" || tagName === "textarea" || tagName === "select") {
     return true;
   }
 
-  if (element.getAttribute('contenteditable') === 'true') {
+  if (element.getAttribute("contenteditable") === "true") {
     return true;
   }
 
-  const role = element.getAttribute('role');
-  if (role === 'textbox' || role === 'searchbox' || role === 'combobox') {
+  const role = element.getAttribute("role");
+  if (role === "textbox" || role === "searchbox" || role === "combobox") {
     return true;
   }
 
@@ -186,7 +196,7 @@ export function HotkeyButton({
 
   // Detect platform on mount
   useEffect(() => {
-    setIsMac(navigator.platform.toLowerCase().includes('mac'));
+    setIsMac(navigator.platform.toLowerCase().includes("mac"));
   }, []);
 
   const config = hotkey ? parseHotkeyConfig(hotkey) : null;
@@ -197,7 +207,11 @@ export function HotkeyButton({
 
       // Don't trigger when typing in inputs (unless explicitly scoped or using cmdCtrl modifier)
       // cmdCtrl shortcuts like Cmd+Enter should work even in inputs as they're intentional submit actions
-      if (!scopeRef && !config.cmdCtrl && isInputElement(document.activeElement)) {
+      if (
+        !scopeRef &&
+        !config.cmdCtrl &&
+        isInputElement(document.activeElement)
+      ) {
         return;
       }
 
@@ -221,7 +235,8 @@ export function HotkeyButton({
       if (scopeRef && scopeRef.current) {
         const scopeEl = scopeRef.current;
         const isVisible =
-          scopeEl.offsetParent !== null || getComputedStyle(scopeEl).display !== 'none';
+          scopeEl.offsetParent !== null ||
+          getComputedStyle(scopeEl).display !== "none";
         if (!isVisible) return;
       }
 
@@ -244,9 +259,9 @@ export function HotkeyButton({
   useEffect(() => {
     if (!config || !hotkeyActive) return;
 
-    window.addEventListener('keydown', handleKeyDown);
+    window.addEventListener("keydown", handleKeyDown);
     return () => {
-      window.removeEventListener('keydown', handleKeyDown);
+      window.removeEventListener("keydown", handleKeyDown);
     };
   }, [config, hotkeyActive, handleKeyDown]);
 
@@ -272,7 +287,7 @@ export function HotkeyButton({
       asChild={asChild}
       {...props}
     >
-      {typeof children === 'string' ? (
+      {typeof children === "string" ? (
         <>
           {children}
           {hotkeyIndicator}

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

@@ -0,0 +1,292 @@
+"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>
+                  {image.size !== undefined && (
+                    <p className="text-xs text-muted-foreground">
+                      {formatFileSize(image.size)}
+                    </p>
+                  )}
+                </div>
+                {/* Remove button */}
+                {!disabled && image.id && (
+                  <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/input.tsx

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

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

@@ -0,0 +1,660 @@
+"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

@@ -0,0 +1,24 @@
+"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,4 +1,6 @@
-import { useState, useMemo, useEffect, useRef } from 'react';
+"use client";
+
+import { useState, useMemo, useEffect, useRef } from "react";
 import {
   ChevronDown,
   ChevronRight,
@@ -23,8 +25,8 @@ import {
   Circle,
   Play,
   Loader2,
-} from 'lucide-react';
-import { cn } from '@/lib/utils';
+} from "lucide-react";
+import { cn } from "@/lib/utils";
 import {
   parseLogOutput,
   getLogTypeColors,
@@ -32,7 +34,7 @@ import {
   type LogEntry,
   type LogEntryType,
   type ToolCategory,
-} from '@/lib/log-parser';
+} from "@/lib/log-parser";
 
 interface LogViewerProps {
   output: string;
@@ -41,23 +43,23 @@ interface LogViewerProps {
 
 const getLogIcon = (type: LogEntryType) => {
   switch (type) {
-    case 'prompt':
+    case "prompt":
       return <MessageSquare className="w-4 h-4" />;
-    case 'tool_call':
+    case "tool_call":
       return <Wrench className="w-4 h-4" />;
-    case 'tool_result':
+    case "tool_result":
       return <FileOutput className="w-4 h-4" />;
-    case 'phase':
+    case "phase":
       return <Zap className="w-4 h-4" />;
-    case 'error':
+    case "error":
       return <AlertCircle className="w-4 h-4" />;
-    case 'success':
+    case "success":
       return <CheckCircle2 className="w-4 h-4" />;
-    case 'warning':
+    case "warning":
       return <AlertTriangle className="w-4 h-4" />;
-    case 'thinking':
+    case "thinking":
       return <Brain className="w-4 h-4" />;
-    case 'debug':
+    case "debug":
       return <Bug className="w-4 h-4" />;
     default:
       return <Info className="w-4 h-4" />;
@@ -69,19 +71,19 @@ const getLogIcon = (type: LogEntryType) => {
  */
 const getToolCategoryIcon = (category: ToolCategory | undefined) => {
   switch (category) {
-    case 'read':
+    case "read":
       return <Eye className="w-4 h-4" />;
-    case 'edit':
+    case "edit":
       return <Pencil className="w-4 h-4" />;
-    case 'write':
+    case "write":
       return <FileOutput className="w-4 h-4" />;
-    case 'bash':
+    case "bash":
       return <Terminal className="w-4 h-4" />;
-    case 'search':
+    case "search":
       return <Search className="w-4 h-4" />;
-    case 'todo':
+    case "todo":
       return <ListTodo className="w-4 h-4" />;
-    case 'task':
+    case "task":
       return <Layers className="w-4 h-4" />;
     default:
       return <Wrench className="w-4 h-4" />;
@@ -93,22 +95,22 @@ const getToolCategoryIcon = (category: ToolCategory | undefined) => {
  */
 const getToolCategoryColor = (category: ToolCategory | undefined): string => {
   switch (category) {
-    case 'read':
-      return 'text-blue-400 bg-blue-500/10 border-blue-500/30';
-    case 'edit':
-      return 'text-amber-400 bg-amber-500/10 border-amber-500/30';
-    case 'write':
-      return 'text-emerald-400 bg-emerald-500/10 border-emerald-500/30';
-    case 'bash':
-      return 'text-purple-400 bg-purple-500/10 border-purple-500/30';
-    case 'search':
-      return 'text-cyan-400 bg-cyan-500/10 border-cyan-500/30';
-    case 'todo':
-      return 'text-green-400 bg-green-500/10 border-green-500/30';
-    case 'task':
-      return 'text-indigo-400 bg-indigo-500/10 border-indigo-500/30';
+    case "read":
+      return "text-blue-400 bg-blue-500/10 border-blue-500/30";
+    case "edit":
+      return "text-amber-400 bg-amber-500/10 border-amber-500/30";
+    case "write":
+      return "text-emerald-400 bg-emerald-500/10 border-emerald-500/30";
+    case "bash":
+      return "text-purple-400 bg-purple-500/10 border-purple-500/30";
+    case "search":
+      return "text-cyan-400 bg-cyan-500/10 border-cyan-500/30";
+    case "todo":
+      return "text-green-400 bg-green-500/10 border-green-500/30";
+    case "task":
+      return "text-indigo-400 bg-indigo-500/10 border-indigo-500/30";
     default:
-      return 'text-zinc-400 bg-zinc-500/10 border-zinc-500/30';
+      return "text-zinc-400 bg-zinc-500/10 border-zinc-500/30";
   }
 };
 
@@ -117,7 +119,7 @@ const getToolCategoryColor = (category: ToolCategory | undefined): string => {
  */
 interface TodoItem {
   content: string;
-  status: 'pending' | 'in_progress' | 'completed';
+  status: "pending" | "in_progress" | "completed";
   activeForm?: string;
 }
 
@@ -143,41 +145,41 @@ function parseTodoContent(content: string): TodoItem[] | null {
  * Renders a list of todo items with status icons and colors
  */
 function TodoListRenderer({ todos }: { todos: TodoItem[] }) {
-  const getStatusIcon = (status: TodoItem['status']) => {
+  const getStatusIcon = (status: TodoItem["status"]) => {
     switch (status) {
-      case 'completed':
+      case "completed":
         return <CheckCircle2 className="w-4 h-4 text-emerald-400" />;
-      case 'in_progress':
+      case "in_progress":
         return <Loader2 className="w-4 h-4 text-amber-400 animate-spin" />;
-      case 'pending':
+      case "pending":
         return <Circle className="w-4 h-4 text-zinc-500" />;
       default:
         return <Circle className="w-4 h-4 text-zinc-500" />;
     }
   };
 
-  const getStatusColor = (status: TodoItem['status']) => {
+  const getStatusColor = (status: TodoItem["status"]) => {
     switch (status) {
-      case 'completed':
-        return 'text-emerald-300 line-through opacity-70';
-      case 'in_progress':
-        return 'text-amber-300';
-      case 'pending':
-        return 'text-zinc-400';
+      case "completed":
+        return "text-emerald-300 line-through opacity-70";
+      case "in_progress":
+        return "text-amber-300";
+      case "pending":
+        return "text-zinc-400";
       default:
-        return 'text-zinc-400';
+        return "text-zinc-400";
     }
   };
 
-  const getStatusBadge = (status: TodoItem['status']) => {
+  const getStatusBadge = (status: TodoItem["status"]) => {
     switch (status) {
-      case 'completed':
+      case "completed":
         return (
           <span className="text-[10px] px-1.5 py-0.5 rounded bg-emerald-500/20 text-emerald-400 ml-auto">
             Done
           </span>
         );
-      case 'in_progress':
+      case "in_progress":
         return (
           <span className="text-[10px] px-1.5 py-0.5 rounded bg-amber-500/20 text-amber-400 ml-auto">
             In Progress
@@ -194,17 +196,21 @@ function TodoListRenderer({ todos }: { todos: TodoItem[] }) {
         <div
           key={index}
           className={cn(
-            'flex items-start gap-2 p-2 rounded-md transition-colors',
-            todo.status === 'in_progress' && 'bg-amber-500/5 border border-amber-500/20',
-            todo.status === 'completed' && 'bg-emerald-500/5',
-            todo.status === 'pending' && 'bg-zinc-800/30'
+            "flex items-start gap-2 p-2 rounded-md transition-colors",
+            todo.status === "in_progress" && "bg-amber-500/5 border border-amber-500/20",
+            todo.status === "completed" && "bg-emerald-500/5",
+            todo.status === "pending" && "bg-zinc-800/30"
           )}
         >
           <div className="mt-0.5 flex-shrink-0">{getStatusIcon(todo.status)}</div>
           <div className="flex-1 min-w-0">
-            <p className={cn('text-sm', getStatusColor(todo.status))}>{todo.content}</p>
-            {todo.status === 'in_progress' && todo.activeForm && (
-              <p className="text-xs text-amber-400/70 mt-0.5 italic">{todo.activeForm}</p>
+            <p className={cn("text-sm", getStatusColor(todo.status))}>
+              {todo.content}
+            </p>
+            {todo.status === "in_progress" && todo.activeForm && (
+              <p className="text-xs text-amber-400/70 mt-0.5 italic">
+                {todo.activeForm}
+              </p>
             )}
           </div>
           {getStatusBadge(todo.status)}
@@ -225,12 +231,12 @@ function LogEntryItem({ entry, isExpanded, onToggle }: LogEntryItemProps) {
   const hasContent = entry.content.length > 100;
 
   // For tool_call entries, use tool-specific styling
-  const isToolCall = entry.type === 'tool_call';
+  const isToolCall = entry.type === "tool_call";
   const toolCategory = entry.metadata?.toolCategory;
-  const toolCategoryColors = isToolCall ? getToolCategoryColor(toolCategory) : '';
+  const toolCategoryColors = isToolCall ? getToolCategoryColor(toolCategory) : "";
 
   // Check if this is a TodoWrite entry and parse the todos
-  const isTodoWrite = entry.metadata?.toolName === 'TodoWrite';
+  const isTodoWrite = entry.metadata?.toolName === "TodoWrite";
   const parsedTodos = useMemo(() => {
     if (!isTodoWrite) return null;
     return parseTodoContent(entry.content);
@@ -241,7 +247,7 @@ function LogEntryItem({ entry, isExpanded, onToggle }: LogEntryItemProps) {
 
   // Get collapsed preview text - prefer smart summary for tool calls
   const collapsedPreview = useMemo(() => {
-    if (isExpanded) return '';
+    if (isExpanded) return "";
 
     // Use smart summary if available
     if (entry.metadata?.summary) {
@@ -249,7 +255,7 @@ function LogEntryItem({ entry, isExpanded, onToggle }: LogEntryItemProps) {
     }
 
     // Fallback to truncated content
-    return entry.content.slice(0, 80) + (entry.content.length > 80 ? '...' : '');
+    return entry.content.slice(0, 80) + (entry.content.length > 80 ? "..." : "");
   }, [isExpanded, entry.metadata?.summary, entry.content]);
 
   // Format content - detect and highlight JSON
@@ -260,30 +266,30 @@ function LogEntryItem({ entry, isExpanded, onToggle }: LogEntryItemProps) {
     // since we already show the tool name in the header badge
     if (isToolCall) {
       // Remove "🔧 Tool: ToolName\n" or "Tool: ToolName\n" prefix
-      content = content.replace(/^(?:🔧\s*)?Tool:\s*\w+\s*\n?/i, '');
+      content = content.replace(/^(?:🔧\s*)?Tool:\s*\w+\s*\n?/i, "");
       // Remove standalone "Input:" label (keep the JSON that follows)
-      content = content.replace(/^Input:\s*\n?/i, '');
+      content = content.replace(/^Input:\s*\n?/i, "");
       content = content.trim();
     }
 
     // For summary entries, remove the <summary> and </summary> tags
-    if (entry.title === 'Summary') {
-      content = content.replace(/^<summary>\s*/i, '');
-      content = content.replace(/\s*<\/summary>\s*$/i, '');
+    if (entry.title === "Summary") {
+      content = content.replace(/^<summary>\s*/i, "");
+      content = content.replace(/\s*<\/summary>\s*$/i, "");
       content = content.trim();
     }
 
     // Try to find and format JSON blocks
     const jsonRegex = /(\{[\s\S]*?\}|\[[\s\S]*?\])/g;
     let lastIndex = 0;
-    const parts: { type: 'text' | 'json'; content: string }[] = [];
+    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',
+          type: "text",
           content: content.slice(lastIndex, match.index),
         });
       }
@@ -292,12 +298,12 @@ function LogEntryItem({ entry, isExpanded, onToggle }: LogEntryItemProps) {
       try {
         const parsed = JSON.parse(match[1]);
         parts.push({
-          type: 'json',
+          type: "json",
           content: JSON.stringify(parsed, null, 2),
         });
       } catch {
         // Not valid JSON, treat as text
-        parts.push({ type: 'text', content: match[1] });
+        parts.push({ type: "text", content: match[1] });
       }
 
       lastIndex = match.index + match[1].length;
@@ -305,25 +311,25 @@ function LogEntryItem({ entry, isExpanded, onToggle }: LogEntryItemProps) {
 
     // Add remaining text
     if (lastIndex < content.length) {
-      parts.push({ type: 'text', content: content.slice(lastIndex) });
+      parts.push({ type: "text", content: content.slice(lastIndex) });
     }
 
-    return parts.length > 0 ? parts : [{ type: 'text' as const, content }];
+    return parts.length > 0 ? parts : [{ type: "text" as const, content }];
   }, [entry.content, entry.title, isToolCall]);
 
   // Get colors - use tool category colors for tool_call entries
-  const colorParts = toolCategoryColors.split(' ');
-  const textColor = isToolCall ? colorParts[0] || 'text-zinc-400' : colors.text;
-  const bgColor = isToolCall ? colorParts[1] || 'bg-zinc-500/10' : colors.bg;
-  const borderColor = isToolCall ? colorParts[2] || 'border-zinc-500/30' : colors.border;
+  const colorParts = toolCategoryColors.split(" ");
+  const textColor = isToolCall ? (colorParts[0] || "text-zinc-400") : colors.text;
+  const bgColor = isToolCall ? (colorParts[1] || "bg-zinc-500/10") : colors.bg;
+  const borderColor = isToolCall ? (colorParts[2] || "border-zinc-500/30") : colors.border;
 
   return (
     <div
       className={cn(
-        'rounded-lg border transition-all duration-200',
+        "rounded-lg border-l-4 transition-all duration-200",
         bgColor,
         borderColor,
-        'hover:brightness-110'
+        "hover:brightness-110"
       )}
       data-testid={`log-entry-${entry.type}`}
     >
@@ -342,18 +348,13 @@ function LogEntryItem({ entry, isExpanded, onToggle }: LogEntryItemProps) {
           <span className="w-4 flex-shrink-0" />
         )}
 
-        <span
-          className={cn(
-            'flex-shrink-0',
-            isToolCall ? toolCategoryColors.split(' ')[0] : colors.icon
-          )}
-        >
+        <span className={cn("flex-shrink-0", isToolCall ? toolCategoryColors.split(" ")[0] : colors.icon)}>
           {icon}
         </span>
 
         <span
           className={cn(
-            'text-xs font-medium px-2 py-0.5 rounded-full flex-shrink-0',
+            "text-xs font-medium px-2 py-0.5 rounded-full flex-shrink-0",
             isToolCall ? toolCategoryColors : colors.badge
           )}
           data-testid="log-entry-badge"
@@ -361,11 +362,16 @@ function LogEntryItem({ entry, isExpanded, onToggle }: LogEntryItemProps) {
           {entry.title}
         </span>
 
-        <span className="text-xs text-zinc-400 truncate flex-1 ml-2">{collapsedPreview}</span>
+        <span className="text-xs text-zinc-400 truncate flex-1 ml-2">
+          {collapsedPreview}
+        </span>
       </button>
 
       {(isExpanded || !hasContent) && (
-        <div className="px-4 pb-3 pt-1" data-testid={`log-entry-content-${entry.id}`}>
+        <div
+          className="px-4 pb-3 pt-1"
+          data-testid={`log-entry-content-${entry.id}`}
+        >
           {/* Render TodoWrite entries with special formatting */}
           {parsedTodos ? (
             <TodoListRenderer todos={parsedTodos} />
@@ -373,12 +379,17 @@ function LogEntryItem({ entry, isExpanded, onToggle }: LogEntryItemProps) {
             <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 scrollbar-styled text-xs text-primary">
+                  {part.type === "json" ? (
+                    <pre className="bg-zinc-900/50 rounded p-2 overflow-x-auto text-xs text-primary">
                       {part.content}
                     </pre>
                   ) : (
-                    <pre className={cn('whitespace-pre-wrap break-words', textColor)}>
+                    <pre
+                      className={cn(
+                        "whitespace-pre-wrap break-words",
+                        textColor
+                      )}
+                    >
                       {part.content}
                     </pre>
                   )}
@@ -405,11 +416,9 @@ interface ToolCategoryStats {
 
 export function LogViewer({ output, className }: LogViewerProps) {
   const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
-  const [searchQuery, setSearchQuery] = useState('');
+  const [searchQuery, setSearchQuery] = useState("");
   const [hiddenTypes, setHiddenTypes] = useState<Set<LogEntryType>>(new Set());
   const [hiddenCategories, setHiddenCategories] = useState<Set<ToolCategory>>(new Set());
-  // Track if user has "Expand All" mode active - new entries will auto-expand when this is true
-  const [expandAllMode, setExpandAllMode] = useState(false);
 
   // Parse entries and compute initial expanded state together
   const { entries, initialExpandedIds } = useMemo(() => {
@@ -434,31 +443,20 @@ export function LogViewer({ output, className }: LogViewerProps) {
   const appliedInitialRef = useRef<Set<string>>(new Set());
 
   // Apply initial expanded state for new entries
-  // Also auto-expand all entries when expandAllMode is active
   const effectiveExpandedIds = useMemo(() => {
     const result = new Set(expandedIds);
-
-    // If expand all mode is active, expand all filtered entries
-    if (expandAllMode) {
-      entries.forEach((entry) => {
-        result.add(entry.id);
-      });
-    } else {
-      // Otherwise, only auto-expand entries based on initial state (shouldCollapseByDefault)
-      initialExpandedIds.forEach((id) => {
-        if (!appliedInitialRef.current.has(id)) {
-          appliedInitialRef.current.add(id);
-          result.add(id);
-        }
-      });
-    }
-
+    initialExpandedIds.forEach((id) => {
+      if (!appliedInitialRef.current.has(id)) {
+        appliedInitialRef.current.add(id);
+        result.add(id);
+      }
+    });
     return result;
-  }, [expandedIds, initialExpandedIds, expandAllMode, entries]);
+  }, [expandedIds, initialExpandedIds]);
 
   // Calculate stats for tool categories
   const stats = useMemo(() => {
-    const toolCalls = entries.filter((e) => e.type === 'tool_call');
+    const toolCalls = entries.filter((e) => e.type === "tool_call");
     const byCategory: ToolCategoryStats = {
       read: 0,
       edit: 0,
@@ -471,14 +469,14 @@ export function LogViewer({ output, className }: LogViewerProps) {
     };
 
     toolCalls.forEach((tc) => {
-      const cat = tc.metadata?.toolCategory || 'other';
+      const cat = tc.metadata?.toolCategory || "other";
       byCategory[cat]++;
     });
 
     return {
       total: toolCalls.length,
       byCategory,
-      errors: entries.filter((e) => e.type === 'error').length,
+      errors: entries.filter((e) => e.type === "error").length,
     };
   }, [entries]);
 
@@ -489,7 +487,7 @@ export function LogViewer({ output, className }: LogViewerProps) {
       if (hiddenTypes.has(entry.type)) return false;
 
       // Filter by hidden tool categories (for tool_call entries)
-      if (entry.type === 'tool_call' && entry.metadata?.toolCategory) {
+      if (entry.type === "tool_call" && entry.metadata?.toolCategory) {
         if (hiddenCategories.has(entry.metadata.toolCategory)) return false;
       }
 
@@ -510,10 +508,6 @@ export function LogViewer({ output, className }: LogViewerProps) {
   }, [entries, hiddenTypes, hiddenCategories, searchQuery]);
 
   const toggleEntry = (id: string) => {
-    // When user manually collapses an entry, turn off expand all mode
-    if (effectiveExpandedIds.has(id)) {
-      setExpandAllMode(false);
-    }
     setExpandedIds((prev) => {
       const next = new Set(prev);
       if (next.has(id)) {
@@ -526,14 +520,10 @@ export function LogViewer({ output, className }: LogViewerProps) {
   };
 
   const expandAll = () => {
-    // Enable expand all mode so new entries will also be expanded
-    setExpandAllMode(true);
     setExpandedIds(new Set(filteredEntries.map((e) => e.id)));
   };
 
   const collapseAll = () => {
-    // Disable expand all mode when collapsing all
-    setExpandAllMode(false);
     setExpandedIds(new Set());
   };
 
@@ -562,7 +552,7 @@ export function LogViewer({ output, className }: LogViewerProps) {
   };
 
   const clearFilters = () => {
-    setSearchQuery('');
+    setSearchQuery("");
     setHiddenTypes(new Set());
     setHiddenCategories(new Set());
   };
@@ -576,7 +566,7 @@ export function LogViewer({ output, className }: LogViewerProps) {
           <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 scrollbar-styled">
+            <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>
           )}
@@ -586,155 +576,144 @@ export function LogViewer({ output, className }: LogViewerProps) {
   }
 
   // Count entries by type
-  const typeCounts = entries.reduce(
-    (acc, entry) => {
-      acc[entry.type] = (acc[entry.type] || 0) + 1;
-      return acc;
-    },
-    {} as Record<string, number>
-  );
+  const typeCounts = entries.reduce((acc, entry) => {
+    acc[entry.type] = (acc[entry.type] || 0) + 1;
+    return acc;
+  }, {} as Record<string, number>);
 
   // Tool categories to display in stats bar
   const toolCategoryLabels: { key: ToolCategory; label: string }[] = [
-    { key: 'read', label: 'Read' },
-    { key: 'edit', label: 'Edit' },
-    { key: 'write', label: 'Write' },
-    { key: 'bash', label: 'Bash' },
-    { key: 'search', label: 'Search' },
-    { key: 'todo', label: 'Todo' },
-    { key: 'task', label: 'Task' },
-    { key: 'other', label: 'Other' },
+    { key: "read", label: "Read" },
+    { key: "edit", label: "Edit" },
+    { key: "write", label: "Write" },
+    { key: "bash", label: "Bash" },
+    { key: "search", label: "Search" },
+    { key: "todo", label: "Todo" },
+    { key: "task", label: "Task" },
+    { key: "other", label: "Other" },
   ];
 
   return (
-    <div className={cn('flex flex-col', className)}>
+    <div className={cn("flex flex-col", className)}>
       {/* Sticky header with search, stats, and filters */}
       {/* Use -top-4 to compensate for parent's p-4 padding, pt-4 to restore visual spacing */}
       <div className="sticky -top-4 z-10 bg-zinc-950/95 backdrop-blur-sm pt-4 pb-2 space-y-2 -mx-4 px-4">
         {/* Search bar */}
         <div className="flex items-center gap-2 px-1" data-testid="log-search-bar">
-          <div className="relative flex-1">
-            <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-4 h-4 text-zinc-500" />
-            <input
-              type="text"
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              placeholder="Search logs..."
-              className="w-full pl-8 pr-8 py-1.5 text-xs bg-zinc-900/50 border border-zinc-700/50 rounded-md text-zinc-200 placeholder:text-zinc-500 focus:outline-none focus:border-zinc-600"
-              data-testid="log-search-input"
-            />
-            {searchQuery && (
-              <button
-                onClick={() => setSearchQuery('')}
-                className="absolute right-2 top-1/2 -translate-y-1/2 text-zinc-500 hover:text-zinc-300"
-                data-testid="log-search-clear"
-              >
-                <X className="w-3 h-3" />
-              </button>
-            )}
-          </div>
-          {hasActiveFilters && (
+        <div className="relative flex-1">
+          <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-4 h-4 text-zinc-500" />
+          <input
+            type="text"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            placeholder="Search logs..."
+            className="w-full pl-8 pr-8 py-1.5 text-xs bg-zinc-900/50 border border-zinc-700/50 rounded-md text-zinc-200 placeholder:text-zinc-500 focus:outline-none focus:border-zinc-600"
+            data-testid="log-search-input"
+          />
+          {searchQuery && (
             <button
-              onClick={clearFilters}
-              className="text-xs text-zinc-400 hover:text-zinc-200 px-2 py-1 rounded hover:bg-zinc-800/50 transition-colors flex items-center gap-1"
-              data-testid="log-clear-filters"
+              onClick={() => setSearchQuery("")}
+              className="absolute right-2 top-1/2 -translate-y-1/2 text-zinc-500 hover:text-zinc-300"
+              data-testid="log-search-clear"
             >
               <X className="w-3 h-3" />
-              Clear Filters
             </button>
           )}
         </div>
-
-        {/* Tool category stats bar */}
-        {stats.total > 0 && (
-          <div className="flex items-center gap-1 px-1 flex-wrap" data-testid="log-stats-bar">
-            <span className="text-xs text-zinc-500 mr-1">
-              <Wrench className="w-3 h-3 inline mr-1" />
-              {stats.total} tools:
-            </span>
-            {toolCategoryLabels.map(({ key, label }) => {
-              const count = stats.byCategory[key];
-              if (count === 0) return null;
-              const isHidden = hiddenCategories.has(key);
-              const colorClasses = getToolCategoryColor(key);
-              return (
-                <button
-                  key={key}
-                  onClick={() => toggleCategoryFilter(key)}
-                  className={cn(
-                    'text-xs px-2 py-0.5 rounded-full border transition-all flex items-center gap-1',
-                    colorClasses,
-                    isHidden && 'opacity-40 line-through'
-                  )}
-                  title={isHidden ? `Show ${label} tools` : `Hide ${label} tools`}
-                  data-testid={`log-category-filter-${key}`}
-                >
-                  {getToolCategoryIcon(key)}
-                  <span>{count}</span>
-                </button>
-              );
-            })}
-            {stats.errors > 0 && (
-              <span className="text-xs px-2 py-0.5 rounded-full bg-red-500/10 text-red-400 border border-red-500/30 flex items-center gap-1">
-                <AlertCircle className="w-3 h-3" />
-                {stats.errors}
-              </span>
-            )}
-          </div>
+        {hasActiveFilters && (
+          <button
+            onClick={clearFilters}
+            className="text-xs text-zinc-400 hover:text-zinc-200 px-2 py-1 rounded hover:bg-zinc-800/50 transition-colors flex items-center gap-1"
+            data-testid="log-clear-filters"
+          >
+            <X className="w-3 h-3" />
+            Clear Filters
+          </button>
         )}
+      </div>
 
-        {/* Header with type filters and controls */}
-        <div className="flex items-center justify-between px-1" data-testid="log-viewer-header">
-          <div className="flex items-center gap-1 flex-wrap">
-            <Filter className="w-3 h-3 text-zinc-500 mr-1" />
-            {Object.entries(typeCounts).map(([type, count]) => {
-              const colors = getLogTypeColors(type as LogEntryType);
-              const isHidden = hiddenTypes.has(type as LogEntryType);
-              return (
-                <button
-                  key={type}
-                  onClick={() => toggleTypeFilter(type as LogEntryType)}
-                  className={cn(
-                    'text-xs px-2 py-0.5 rounded-full transition-all',
-                    colors.badge,
-                    isHidden && 'opacity-40 line-through'
-                  )}
-                  title={isHidden ? `Show ${type}` : `Hide ${type}`}
-                  data-testid={`log-type-filter-${type}`}
-                >
-                  {type}: {count}
-                </button>
-              );
-            })}
-          </div>
-          <div className="flex items-center gap-1">
-            <span className="text-xs text-zinc-500">
-              {filteredEntries.length}/{entries.length}
+      {/* Tool category stats bar */}
+      {stats.total > 0 && (
+        <div className="flex items-center gap-1 px-1 flex-wrap" data-testid="log-stats-bar">
+          <span className="text-xs text-zinc-500 mr-1">
+            <Wrench className="w-3 h-3 inline mr-1" />
+            {stats.total} tools:
+          </span>
+          {toolCategoryLabels.map(({ key, label }) => {
+            const count = stats.byCategory[key];
+            if (count === 0) return null;
+            const isHidden = hiddenCategories.has(key);
+            const colorClasses = getToolCategoryColor(key);
+            return (
+              <button
+                key={key}
+                onClick={() => toggleCategoryFilter(key)}
+                className={cn(
+                  "text-xs px-2 py-0.5 rounded-full border transition-all flex items-center gap-1",
+                  colorClasses,
+                  isHidden && "opacity-40 line-through"
+                )}
+                title={isHidden ? `Show ${label} tools` : `Hide ${label} tools`}
+                data-testid={`log-category-filter-${key}`}
+              >
+                {getToolCategoryIcon(key)}
+                <span>{count}</span>
+              </button>
+            );
+          })}
+          {stats.errors > 0 && (
+            <span className="text-xs px-2 py-0.5 rounded-full bg-red-500/10 text-red-400 border border-red-500/30 flex items-center gap-1">
+              <AlertCircle className="w-3 h-3" />
+              {stats.errors}
             </span>
-            <button
-              onClick={expandAll}
-              className={cn(
-                'text-xs px-2 py-1 rounded transition-colors',
-                expandAllMode
-                  ? 'text-primary bg-primary/20 hover:bg-primary/30'
-                  : 'text-zinc-400 hover:text-zinc-200 hover:bg-zinc-800/50'
-              )}
-              data-testid="log-expand-all"
-              title={
-                expandAllMode ? 'Expand All (Active - new items will auto-expand)' : 'Expand All'
-              }
-            >
-              Expand All{expandAllMode ? ' (On)' : ''}
-            </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>
+      )}
+
+      {/* Header with type filters and controls */}
+      <div className="flex items-center justify-between px-1" data-testid="log-viewer-header">
+        <div className="flex items-center gap-1 flex-wrap">
+          <Filter className="w-3 h-3 text-zinc-500 mr-1" />
+          {Object.entries(typeCounts).map(([type, count]) => {
+            const colors = getLogTypeColors(type as LogEntryType);
+            const isHidden = hiddenTypes.has(type as LogEntryType);
+            return (
+              <button
+                key={type}
+                onClick={() => toggleTypeFilter(type as LogEntryType)}
+                className={cn(
+                  "text-xs px-2 py-0.5 rounded-full transition-all",
+                  colors.badge,
+                  isHidden && "opacity-40 line-through"
+                )}
+                title={isHidden ? `Show ${type}` : `Hide ${type}`}
+                data-testid={`log-type-filter-${type}`}
+              >
+                {type}: {count}
+              </button>
+            );
+          })}
+        </div>
+        <div className="flex items-center gap-1">
+          <span className="text-xs text-zinc-500">
+            {filteredEntries.length}/{entries.length}
+          </span>
+          <button
+            onClick={expandAll}
+            className="text-xs text-zinc-400 hover:text-zinc-200 px-2 py-1 rounded hover:bg-zinc-800/50 transition-colors"
+            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>
       </div>
 
       {/* Log entries */}
@@ -743,7 +722,10 @@ export function LogViewer({ output, className }: LogViewerProps) {
           <div className="text-center py-4 text-zinc-500 text-sm">
             No entries match your filters.
             {hasActiveFilters && (
-              <button onClick={clearFilters} className="ml-2 text-primary hover:underline">
+              <button
+                onClick={clearFilters}
+                className="ml-2 text-primary hover:underline"
+              >
                 Clear filters
               </button>
             )}

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

@@ -0,0 +1,48 @@
+"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,7 +1,9 @@
-import * as React from 'react';
-import * as PopoverPrimitive from '@radix-ui/react-popover';
+"use client"
 
-import { cn } from '@/lib/utils';
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
 
 // Type-safe wrappers for Radix UI primitives (React 19 compatibility)
 const PopoverTriggerPrimitive = PopoverPrimitive.Trigger as React.ForwardRefExoticComponent<
@@ -17,8 +19,10 @@ const PopoverContentPrimitive = PopoverPrimitive.Content as React.ForwardRefExot
   } & React.RefAttributes<HTMLDivElement>
 >;
 
-function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
-  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
 }
 
 function PopoverTrigger({
@@ -33,12 +37,12 @@ function PopoverTrigger({
     <PopoverTriggerPrimitive data-slot="popover-trigger" asChild={asChild} {...props}>
       {children}
     </PopoverTriggerPrimitive>
-  );
+  )
 }
 
 function PopoverContent({
   className,
-  align = 'center',
+  align = "center",
   sideOffset = 4,
   ...props
 }: React.ComponentProps<typeof PopoverPrimitive.Content> & {
@@ -51,17 +55,19 @@ function PopoverContent({
         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',
+          "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} />;
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
 }
 
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }

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

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

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

@@ -1,24 +1,30 @@
-/* eslint-disable @typescript-eslint/no-empty-object-type */
+"use client";
 
-import * as React from 'react';
-import * as SheetPrimitive from '@radix-ui/react-dialog';
-import { XIcon } from 'lucide-react';
+import * as React from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
 
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils";
 
 function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
   return <SheetPrimitive.Root data-slot="sheet" {...props} />;
 }
 
-function SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+function SheetTrigger({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
   return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
 }
 
-function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>) {
+function SheetClose({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
   return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
 }
 
-function SheetPortal({ ...props }: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
   return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
 }
 
@@ -28,13 +34,13 @@ interface SheetOverlayProps extends React.HTMLAttributes<HTMLDivElement> {
 
 const SheetOverlay = ({ className, ...props }: SheetOverlayProps) => {
   const Overlay = SheetPrimitive.Overlay as React.ComponentType<
-    SheetOverlayProps & { 'data-slot': string }
+    SheetOverlayProps & { "data-slot": string }
   >;
   return (
     <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',
+        "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}
@@ -43,16 +49,21 @@ const SheetOverlay = ({ className, ...props }: SheetOverlayProps) => {
 };
 
 interface SheetContentProps extends React.HTMLAttributes<HTMLDivElement> {
-  side?: 'top' | 'right' | 'bottom' | 'left';
+  side?: "top" | "right" | "bottom" | "left";
   forceMount?: true;
   onEscapeKeyDown?: (event: KeyboardEvent) => void;
   onPointerDownOutside?: (event: PointerEvent) => void;
   onInteractOutside?: (event: Event) => void;
 }
 
-const SheetContent = ({ className, children, side = 'right', ...props }: SheetContentProps) => {
+const SheetContent = ({
+  className,
+  children,
+  side = "right",
+  ...props
+}: SheetContentProps) => {
   const Content = SheetPrimitive.Content as React.ComponentType<
-    SheetContentProps & { 'data-slot': string }
+    SheetContentProps & { "data-slot": string }
   >;
   const Close = SheetPrimitive.Close as React.ComponentType<{
     className: string;
@@ -65,15 +76,15 @@ const SheetContent = ({ className, children, side = 'right', ...props }: SheetCo
       <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',
+          "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}
@@ -88,21 +99,21 @@ const SheetContent = ({ className, children, side = 'right', ...props }: SheetCo
   );
 };
 
-function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="sheet-header"
-      className={cn('flex flex-col gap-1.5 p-4', className)}
+      className={cn("flex flex-col gap-1.5 p-4", className)}
       {...props}
     />
   );
 }
 
-function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
+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)}
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
       {...props}
     />
   );
@@ -112,27 +123,28 @@ interface SheetTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {}
 
 const SheetTitle = ({ className, ...props }: SheetTitleProps) => {
   const Title = SheetPrimitive.Title as React.ComponentType<
-    SheetTitleProps & { 'data-slot': string }
+    SheetTitleProps & { "data-slot": string }
   >;
   return (
     <Title
       data-slot="sheet-title"
-      className={cn('text-foreground font-semibold', className)}
+      className={cn("text-foreground font-semibold", className)}
       {...props}
     />
   );
 };
 
-interface SheetDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {}
+interface SheetDescriptionProps
+  extends React.HTMLAttributes<HTMLParagraphElement> {}
 
 const SheetDescription = ({ className, ...props }: SheetDescriptionProps) => {
   const Description = SheetPrimitive.Description as React.ComponentType<
-    SheetDescriptionProps & { 'data-slot': string }
+    SheetDescriptionProps & { "data-slot": string }
   >;
   return (
     <Description
       data-slot="sheet-description"
-      className={cn('text-muted-foreground text-sm', className)}
+      className={cn("text-muted-foreground text-sm", className)}
       {...props}
     />
   );

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

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

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

@@ -1,7 +1,9 @@
-import * as React from 'react';
-import * as TabsPrimitive from '@radix-ui/react-tabs';
+"use client"
 
-import { cn } from '@/lib/utils';
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
 
 // Type-safe wrappers for Radix UI primitives (React 19 compatibility)
 const TabsRootPrimitive = TabsPrimitive.Root as React.ForwardRefExoticComponent<
@@ -41,10 +43,14 @@ function Tabs({
   className?: string;
 }) {
   return (
-    <TabsRootPrimitive data-slot="tabs" className={cn('flex flex-col gap-2', className)} {...props}>
+    <TabsRootPrimitive
+      data-slot="tabs"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    >
       {children}
     </TabsRootPrimitive>
-  );
+  )
 }
 
 function TabsList({
@@ -59,14 +65,14 @@ function TabsList({
     <TabsListPrimitive
       data-slot="tabs-list"
       className={cn(
-        'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px] border border-border',
+        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px] border border-border",
         className
       )}
       {...props}
     >
       {children}
     </TabsListPrimitive>
-  );
+  )
 }
 
 function TabsTrigger({
@@ -81,11 +87,11 @@ function TabsTrigger({
     <TabsTriggerPrimitive
       data-slot="tabs-trigger"
       className={cn(
-        'inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all duration-200 cursor-pointer',
-        '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',
+        "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
       )}
@@ -93,7 +99,7 @@ function TabsTrigger({
     >
       {children}
     </TabsTriggerPrimitive>
-  );
+  )
 }
 
 function TabsContent({
@@ -107,12 +113,12 @@ function TabsContent({
   return (
     <TabsContentPrimitive
       data-slot="tabs-content"
-      className={cn('flex-1 outline-none', className)}
+      className={cn("flex-1 outline-none", className)}
       {...props}
     >
       {children}
     </TabsContentPrimitive>
-  );
+  )
 }
 
-export { Tabs, TabsList, TabsTrigger, TabsContent };
+export { Tabs, TabsList, TabsTrigger, TabsContent }

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

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

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

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

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

@@ -1,7 +1,9 @@
-import * as React from 'react';
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+"use client"
 
-import { cn } from '@/lib/utils';
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
 
 // Type-safe wrappers for Radix UI primitives (React 19 compatibility)
 const TooltipTriggerPrimitive = TooltipPrimitive.Trigger as React.ForwardRefExoticComponent<
@@ -17,9 +19,9 @@ const TooltipContentPrimitive = TooltipPrimitive.Content as React.ForwardRefExot
   } & React.RefAttributes<HTMLDivElement>
 >;
 
-const TooltipProvider = TooltipPrimitive.Provider;
+const TooltipProvider = TooltipPrimitive.Provider
 
-const Tooltip = TooltipPrimitive.Root;
+const Tooltip = TooltipPrimitive.Root
 
 function TooltipTrigger({
   children,
@@ -33,7 +35,7 @@ function TooltipTrigger({
     <TooltipTriggerPrimitive asChild={asChild} {...props}>
       {children}
     </TooltipTriggerPrimitive>
-  );
+  )
 }
 
 const TooltipContent = React.forwardRef<
@@ -47,23 +49,23 @@ const TooltipContent = React.forwardRef<
       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',
+        "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',
+        "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',
+        "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',
+        "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;
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

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

@@ -0,0 +1,120 @@
+"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,9 +1,17 @@
-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';
+"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,
@@ -15,9 +23,9 @@ import {
   File,
   Pencil,
   Wrench,
-} from 'lucide-react';
-import { cn } from '@/lib/utils';
-import { getElectronAPI } from '@/lib/electron';
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { getElectronAPI } from "@/lib/electron";
 
 interface ToolResult {
   success: boolean;
@@ -38,18 +46,20 @@ export function AgentToolsView() {
   const api = getElectronAPI();
 
   // Read File Tool State
-  const [readFilePath, setReadFilePath] = useState('');
+  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 [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 [terminalCommand, setTerminalCommand] = useState("ls");
   const [terminalResult, setTerminalResult] = useState<ToolResult | null>(null);
   const [isRunningCommand, setIsRunningCommand] = useState(false);
 
@@ -76,7 +86,7 @@ export function AgentToolsView() {
       } else {
         setReadFileResult({
           success: false,
-          error: result.error || 'Failed to read file',
+          error: result.error || "Failed to read file",
           timestamp: new Date(),
         });
         console.log(`[Agent Tool] File read failed: ${result.error}`);
@@ -84,7 +94,7 @@ export function AgentToolsView() {
     } catch (error) {
       setReadFileResult({
         success: false,
-        error: error instanceof Error ? error.message : 'Unknown error',
+        error: error instanceof Error ? error.message : "Unknown error",
         timestamp: new Date(),
       });
     } finally {
@@ -115,7 +125,7 @@ export function AgentToolsView() {
       } else {
         setWriteFileResult({
           success: false,
-          error: result.error || 'Failed to write file',
+          error: result.error || "Failed to write file",
           timestamp: new Date(),
         });
         console.log(`[Agent Tool] File write failed: ${result.error}`);
@@ -123,7 +133,7 @@ export function AgentToolsView() {
     } catch (error) {
       setWriteFileResult({
         success: false,
-        error: error instanceof Error ? error.message : 'Unknown error',
+        error: error instanceof Error ? error.message : "Unknown error",
         timestamp: new Date(),
       });
     } finally {
@@ -145,12 +155,13 @@ export function AgentToolsView() {
       // 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',
+        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}',
+        "cat package.json":
+          '{\n  "name": "demo-project",\n  "version": "1.0.0"\n}',
       };
 
       // Simulate command execution delay
@@ -165,11 +176,13 @@ export function AgentToolsView() {
         output: output,
         timestamp: new Date(),
       });
-      console.log(`[Agent Tool] Command executed successfully: ${terminalCommand}`);
+      console.log(
+        `[Agent Tool] Command executed successfully: ${terminalCommand}`
+      );
     } catch (error) {
       setTerminalResult({
         success: false,
-        error: error instanceof Error ? error.message : 'Unknown error',
+        error: error instanceof Error ? error.message : "Unknown error",
         timestamp: new Date(),
       });
     } finally {
@@ -179,18 +192,26 @@ export function AgentToolsView() {
 
   if (!currentProject) {
     return (
-      <div className="flex-1 flex items-center justify-center" data-testid="agent-tools-no-project">
+      <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>
+          <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">
+    <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" />
@@ -212,7 +233,9 @@ export function AgentToolsView() {
                 <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>
+              <CardDescription>
+                Agent requests to read a file from the filesystem
+              </CardDescription>
             </CardHeader>
             <CardContent className="space-y-4">
               <div className="space-y-2">
@@ -248,10 +271,10 @@ export function AgentToolsView() {
               {readFileResult && (
                 <div
                   className={cn(
-                    'p-3 rounded-md border',
+                    "p-3 rounded-md border",
                     readFileResult.success
-                      ? 'bg-green-500/10 border-green-500/20'
-                      : 'bg-red-500/10 border-red-500/20'
+                      ? "bg-green-500/10 border-green-500/20"
+                      : "bg-red-500/10 border-red-500/20"
                   )}
                   data-testid="read-file-result"
                 >
@@ -262,11 +285,13 @@ export function AgentToolsView() {
                       <XCircle className="w-4 h-4 text-red-500" />
                     )}
                     <span className="text-sm font-medium">
-                      {readFileResult.success ? 'Success' : 'Failed'}
+                      {readFileResult.success ? "Success" : "Failed"}
                     </span>
                   </div>
                   <pre className="text-xs overflow-auto max-h-40 whitespace-pre-wrap">
-                    {readFileResult.success ? readFileResult.output : readFileResult.error}
+                    {readFileResult.success
+                      ? readFileResult.output
+                      : readFileResult.error}
                   </pre>
                 </div>
               )}
@@ -280,7 +305,9 @@ export function AgentToolsView() {
                 <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>
+              <CardDescription>
+                Agent requests to write content to a file
+              </CardDescription>
             </CardHeader>
             <CardContent className="space-y-4">
               <div className="space-y-2">
@@ -306,7 +333,11 @@ export function AgentToolsView() {
               </div>
               <Button
                 onClick={handleWriteFile}
-                disabled={isWritingFile || !writeFilePath.trim() || !writeFileContent.trim()}
+                disabled={
+                  isWritingFile ||
+                  !writeFilePath.trim() ||
+                  !writeFileContent.trim()
+                }
                 className="w-full"
                 data-testid="write-file-button"
               >
@@ -327,10 +358,10 @@ export function AgentToolsView() {
               {writeFileResult && (
                 <div
                   className={cn(
-                    'p-3 rounded-md border',
+                    "p-3 rounded-md border",
                     writeFileResult.success
-                      ? 'bg-green-500/10 border-green-500/20'
-                      : 'bg-red-500/10 border-red-500/20'
+                      ? "bg-green-500/10 border-green-500/20"
+                      : "bg-red-500/10 border-red-500/20"
                   )}
                   data-testid="write-file-result"
                 >
@@ -341,11 +372,13 @@ export function AgentToolsView() {
                       <XCircle className="w-4 h-4 text-red-500" />
                     )}
                     <span className="text-sm font-medium">
-                      {writeFileResult.success ? 'Success' : 'Failed'}
+                      {writeFileResult.success ? "Success" : "Failed"}
                     </span>
                   </div>
                   <pre className="text-xs overflow-auto max-h-40 whitespace-pre-wrap">
-                    {writeFileResult.success ? writeFileResult.output : writeFileResult.error}
+                    {writeFileResult.success
+                      ? writeFileResult.output
+                      : writeFileResult.error}
                   </pre>
                 </div>
               )}
@@ -359,7 +392,9 @@ export function AgentToolsView() {
                 <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>
+              <CardDescription>
+                Agent requests to execute a terminal command
+              </CardDescription>
             </CardHeader>
             <CardContent className="space-y-4">
               <div className="space-y-2">
@@ -395,10 +430,10 @@ export function AgentToolsView() {
               {terminalResult && (
                 <div
                   className={cn(
-                    'p-3 rounded-md border',
+                    "p-3 rounded-md border",
                     terminalResult.success
-                      ? 'bg-green-500/10 border-green-500/20'
-                      : 'bg-red-500/10 border-red-500/20'
+                      ? "bg-green-500/10 border-green-500/20"
+                      : "bg-red-500/10 border-red-500/20"
                   )}
                   data-testid="terminal-result"
                 >
@@ -409,13 +444,15 @@ export function AgentToolsView() {
                       <XCircle className="w-4 h-4 text-red-500" />
                     )}
                     <span className="text-sm font-medium">
-                      {terminalResult.success ? 'Success' : 'Failed'}
+                      {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}
+                    {"\n"}
+                    {terminalResult.success
+                      ? terminalResult.output
+                      : terminalResult.error}
                   </pre>
                 </div>
               )}
@@ -427,12 +464,15 @@ export function AgentToolsView() {
         <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>
+            <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.
+                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>