Merge pull request #99 from AutoMaker-Org/feat/ai-profiles-view-enhancement

Enhanced AI profiles view with better UX and comprehensive test coverage.

.claude/settings.local.json

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

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

@@ -1,10 +1,16 @@
-const { S3Client, PutObjectCommand, GetObjectCommand } = require('@aws-sdk/client-s3');
-const fs = require('fs');
-const path = require('path');
+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',
-  endpoint: `https://${process.env.R2_ACCOUNT_ID}.r2.cloudflarestorage.com`,
+  region: "auto",
+  endpoint: process.env.R2_ENDPOINT,
   credentials: {
     accessKeyId: process.env.R2_ACCESS_KEY_ID,
     secretAccessKey: process.env.R2_SECRET_ACCESS_KEY,
@@ -14,19 +20,22 @@ const s3Client = new S3Client({
 const BUCKET = process.env.R2_BUCKET_NAME;
 const PUBLIC_URL = process.env.R2_PUBLIC_URL;
 const VERSION = process.env.RELEASE_VERSION;
+const RELEASE_TAG = process.env.RELEASE_TAG || `v${VERSION}`;
 const GITHUB_REPO = process.env.GITHUB_REPOSITORY;
 
 async function fetchExistingReleases() {
   try {
-    const response = await s3Client.send(new GetObjectCommand({
-      Bucket: BUCKET,
-      Key: 'releases.json',
-    }));
+    const response = await s3Client.send(
+      new GetObjectCommand({
+        Bucket: BUCKET,
+        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;
@@ -37,12 +46,14 @@ async function uploadFile(localPath, r2Key, contentType) {
   const fileBuffer = fs.readFileSync(localPath);
   const stats = fs.statSync(localPath);
 
-  await s3Client.send(new PutObjectCommand({
-    Bucket: BUCKET,
-    Key: r2Key,
-    Body: fileBuffer,
-    ContentType: contentType,
-  }));
+  await s3Client.send(
+    new PutObjectCommand({
+      Bucket: BUCKET,
+      Key: r2Key,
+      Body: fileBuffer,
+      ContentType: contentType,
+    })
+  );
 
   console.log(`Uploaded: ${r2Key} (${stats.size} bytes)`);
   return stats.size;
@@ -51,44 +62,270 @@ async function uploadFile(localPath, r2Key, contentType) {
 function findArtifacts(dir, pattern) {
   if (!fs.existsSync(dir)) return [];
   const files = fs.readdirSync(dir);
-  return files.filter(f => pattern.test(f)).map(f => path.join(dir, f));
+  return files.filter((f) => pattern.test(f)).map((f) => path.join(dir, f));
+}
+
+async function checkUrlAccessible(url, maxRetries = 10, initialDelay = 1000) {
+  for (let attempt = 0; attempt < maxRetries; attempt++) {
+    try {
+      const result = await new Promise((resolve, reject) => {
+        const request = https.get(url, { timeout: 10000 }, (response) => {
+          const statusCode = response.statusCode;
+
+          // Follow redirects
+          if (
+            statusCode === 302 ||
+            statusCode === 301 ||
+            statusCode === 307 ||
+            statusCode === 308
+          ) {
+            const redirectUrl = response.headers.location;
+            response.destroy();
+            if (!redirectUrl) {
+              resolve({
+                accessible: false,
+                statusCode,
+                error: "Redirect without location header",
+              });
+              return;
+            }
+            // Follow the redirect URL
+            return https
+              .get(redirectUrl, { timeout: 10000 }, (redirectResponse) => {
+                const redirectStatus = redirectResponse.statusCode;
+                const contentType =
+                  redirectResponse.headers["content-type"] || "";
+                // Check if it's actually a file (zip/tar.gz) and not HTML
+                const isFile =
+                  contentType.includes("application/zip") ||
+                  contentType.includes("application/gzip") ||
+                  contentType.includes("application/x-gzip") ||
+                  contentType.includes("application/x-tar") ||
+                  redirectUrl.includes(".zip") ||
+                  redirectUrl.includes(".tar.gz");
+                const isGood =
+                  redirectStatus >= 200 && redirectStatus < 300 && isFile;
+                redirectResponse.destroy();
+                resolve({
+                  accessible: isGood,
+                  statusCode: redirectStatus,
+                  finalUrl: redirectUrl,
+                  contentType,
+                });
+              })
+              .on("error", (error) => {
+                resolve({
+                  accessible: false,
+                  statusCode,
+                  error: error.message,
+                });
+              })
+              .on("timeout", function () {
+                this.destroy();
+                resolve({
+                  accessible: false,
+                  statusCode,
+                  error: "Timeout following redirect",
+                });
+              });
+          }
+
+          // Check if status is good (200-299 range) and it's actually a file
+          const contentType = response.headers["content-type"] || "";
+          const isFile =
+            contentType.includes("application/zip") ||
+            contentType.includes("application/gzip") ||
+            contentType.includes("application/x-gzip") ||
+            contentType.includes("application/x-tar") ||
+            url.includes(".zip") ||
+            url.includes(".tar.gz");
+          const isGood = statusCode >= 200 && statusCode < 300 && isFile;
+          response.destroy();
+          resolve({ accessible: isGood, statusCode, contentType });
+        });
+
+        request.on("error", (error) => {
+          resolve({
+            accessible: false,
+            statusCode: null,
+            error: error.message,
+          });
+        });
+
+        request.on("timeout", () => {
+          request.destroy();
+          resolve({
+            accessible: false,
+            statusCode: null,
+            error: "Request timeout",
+          });
+        });
+      });
+
+      if (result.accessible) {
+        if (attempt > 0) {
+          console.log(
+            `✓ URL ${url} is now accessible after ${attempt} retries (status: ${result.statusCode})`
+          );
+        } else {
+          console.log(
+            `✓ URL ${url} is accessible (status: ${result.statusCode})`
+          );
+        }
+        return result.finalUrl || url; // Return the final URL (after redirects) if available
+      } else {
+        const errorMsg = result.error ? ` - ${result.error}` : "";
+        const statusMsg = result.statusCode
+          ? ` (status: ${result.statusCode})`
+          : "";
+        const contentTypeMsg = result.contentType
+          ? ` [content-type: ${result.contentType}]`
+          : "";
+        console.log(
+          `✗ URL ${url} not accessible${statusMsg}${contentTypeMsg}${errorMsg}`
+        );
+      }
+    } catch (error) {
+      console.log(`✗ URL ${url} check failed: ${error.message}`);
+    }
+
+    if (attempt < maxRetries - 1) {
+      const delay = initialDelay * Math.pow(2, attempt);
+      console.log(
+        `  Retrying in ${delay}ms... (attempt ${attempt + 1}/${maxRetries})`
+      );
+      await new Promise((resolve) => setTimeout(resolve, delay));
+    }
+  }
+
+  throw new Error(`URL ${url} is not accessible after ${maxRetries} attempts`);
+}
+
+async function downloadFromGitHub(url, outputPath) {
+  return new Promise((resolve, reject) => {
+    const request = https.get(url, { timeout: 30000 }, (response) => {
+      const statusCode = response.statusCode;
+
+      // Follow redirects (all redirect types)
+      if (
+        statusCode === 301 ||
+        statusCode === 302 ||
+        statusCode === 307 ||
+        statusCode === 308
+      ) {
+        const redirectUrl = response.headers.location;
+        response.destroy();
+        if (!redirectUrl) {
+          reject(new Error(`Redirect without location header for ${url}`));
+          return;
+        }
+        // Resolve relative redirects
+        const finalRedirectUrl = redirectUrl.startsWith("http")
+          ? redirectUrl
+          : new URL(redirectUrl, url).href;
+        console.log(`  Following redirect: ${finalRedirectUrl}`);
+        return downloadFromGitHub(finalRedirectUrl, outputPath)
+          .then(resolve)
+          .catch(reject);
+      }
+
+      if (statusCode !== 200) {
+        response.destroy();
+        reject(
+          new Error(
+            `Failed to download ${url}: ${statusCode} ${response.statusMessage}`
+          )
+        );
+        return;
+      }
+
+      const fileStream = fs.createWriteStream(outputPath);
+      response.pipe(fileStream);
+      fileStream.on("finish", () => {
+        fileStream.close();
+        resolve();
+      });
+      fileStream.on("error", (error) => {
+        response.destroy();
+        reject(error);
+      });
+    });
+
+    request.on("error", reject);
+    request.on("timeout", () => {
+      request.destroy();
+      reject(new Error(`Request timeout for ${url}`));
+    });
+  });
 }
 
 async function main() {
-  const artifactsDir = 'artifacts';
+  const artifactsDir = "artifacts";
+  const tempDir = path.join(artifactsDir, "temp");
+
+  // Create temp directory for downloaded GitHub archives
+  if (!fs.existsSync(tempDir)) {
+    fs.mkdirSync(tempDir, { recursive: true });
+  }
+
+  // Download source archives from GitHub
+  const githubZipUrl = `https://github.com/${GITHUB_REPO}/archive/refs/tags/${RELEASE_TAG}.zip`;
+  const githubTarGzUrl = `https://github.com/${GITHUB_REPO}/archive/refs/tags/${RELEASE_TAG}.tar.gz`;
+
+  const sourceZipPath = path.join(tempDir, `automaker-${VERSION}.zip`);
+  const sourceTarGzPath = path.join(tempDir, `automaker-${VERSION}.tar.gz`);
+
+  console.log(`Waiting for source archives to be available on GitHub...`);
+  console.log(`  ZIP: ${githubZipUrl}`);
+  console.log(`  TAR.GZ: ${githubTarGzUrl}`);
+
+  // Wait for archives to be accessible with exponential backoff
+  // This returns the final URL after following redirects
+  const finalZipUrl = await checkUrlAccessible(githubZipUrl);
+  const finalTarGzUrl = await checkUrlAccessible(githubTarGzUrl);
+
+  console.log(`Downloading source archives from GitHub...`);
+  await downloadFromGitHub(finalZipUrl, sourceZipPath);
+  await downloadFromGitHub(finalTarGzUrl, sourceTarGzPath);
+
+  console.log(`Downloaded source archives successfully`);
 
   // Find all artifacts
   const artifacts = {
-    windows: findArtifacts(
-      path.join(artifactsDir, 'windows-builds'),
-      /\.exe$/
-    ),
-    macos: findArtifacts(
-      path.join(artifactsDir, 'macos-builds'),
-      /-x64\.dmg$/
-    ),
+    windows: findArtifacts(path.join(artifactsDir, "windows-builds"), /\.exe$/),
+    macos: findArtifacts(path.join(artifactsDir, "macos-builds"), /-x64\.dmg$/),
     macosArm: findArtifacts(
-      path.join(artifactsDir, 'macos-builds'),
+      path.join(artifactsDir, "macos-builds"),
       /-arm64\.dmg$/
     ),
     linux: findArtifacts(
-      path.join(artifactsDir, 'linux-builds'),
+      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'}`);
+    console.log(
+      `  ${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',
+    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)) {
@@ -107,7 +344,12 @@ async function main() {
       url: `${PUBLIC_URL}/releases/${VERSION}/${filename}`,
       filename,
       size,
-      arch: platform === 'macosArm' ? 'arm64' : 'x64',
+      arch:
+        platform === "macosArm"
+          ? "arm64"
+          : platform === "sourceZip" || platform === "sourceTarGz"
+          ? "source"
+          : "x64",
     };
   }
 
@@ -118,31 +360,35 @@ async function main() {
     version: VERSION,
     date: new Date().toISOString(),
     assets,
-    githubReleaseUrl: `https://github.com/${GITHUB_REPO}/releases/tag/${VERSION}`,
+    githubReleaseUrl: `https://github.com/${GITHUB_REPO}/releases/tag/${RELEASE_TAG}`,
   };
 
   // Remove existing entry for this version if re-running
-  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);
   releasesData.latestVersion = VERSION;
 
   // Upload updated releases.json
-  await s3Client.send(new PutObjectCommand({
-    Bucket: BUCKET,
-    Key: 'releases.json',
-    Body: JSON.stringify(releasesData, null, 2),
-    ContentType: 'application/json',
-    CacheControl: 'public, max-age=60',
-  }));
+  await s3Client.send(
+    new PutObjectCommand({
+      Bucket: BUCKET,
+      Key: "releases.json",
+      Body: JSON.stringify(releasesData, null, 2),
+      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);
+main().catch((err) => {
+  console.error("Failed to upload to R2:", err);
   process.exit(1);
 });

.github/workflows/e2e-tests.yml

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

.github/workflows/pr-check.yml

@@ -29,5 +29,13 @@ jobs:
         # 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

@@ -48,6 +48,30 @@ jobs:
         # optional dependencies (e.g., @tailwindcss/oxide, lightningcss binaries)
         run: npm install
 
+      - name: Install Linux native bindings
+        # Workaround for npm optional dependencies bug (npm/cli#4828)
+        # Only needed on Linux - macOS and Windows get their bindings automatically
+        if: matrix.os == 'ubuntu-latest'
+        run: |
+          npm install --no-save --force \
+            @rollup/rollup-linux-x64-gnu@4.53.3 \
+            @tailwindcss/oxide-linux-x64-gnu@4.1.17
+
+      - name: Extract and set version
+        id: version
+        shell: bash
+        run: |
+          VERSION_TAG="${{ github.event.inputs.version || github.ref_name }}"
+          # Remove 'v' prefix if present (e.g., v1.0.0 -> 1.0.0)
+          VERSION="${VERSION_TAG#v}"
+          echo "version=$VERSION" >> $GITHUB_OUTPUT
+          echo "Extracted version: $VERSION from tag: $VERSION_TAG"
+          # Update the app's package.json version
+          cd apps/app
+          npm version $VERSION --no-git-tag-version
+          cd ../..
+          echo "Updated apps/app/package.json to version $VERSION"
+
       - name: Build Electron App (macOS)
         if: matrix.os == 'macos-latest'
         env:
@@ -127,13 +151,25 @@ jobs:
       - name: Install AWS SDK
         run: npm install @aws-sdk/client-s3
 
+      - name: Extract version
+        id: version
+        shell: bash
+        run: |
+          VERSION_TAG="${{ github.event.inputs.version || github.ref_name }}"
+          # Remove 'v' prefix if present (e.g., v1.0.0 -> 1.0.0)
+          VERSION="${VERSION_TAG#v}"
+          echo "version=$VERSION" >> $GITHUB_OUTPUT
+          echo "version_tag=$VERSION_TAG" >> $GITHUB_OUTPUT
+          echo "Extracted version: $VERSION from tag: $VERSION_TAG"
+
       - name: Upload to R2 and update releases.json
         env:
-          R2_ACCOUNT_ID: ${{ secrets.R2_ACCOUNT_ID }}
+          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: ${{ github.event.inputs.version || github.ref_name }}
+          RELEASE_VERSION: ${{ steps.version.outputs.version }}
+          RELEASE_TAG: ${{ steps.version.outputs.version_tag }}
           GITHUB_REPOSITORY: ${{ github.repository }}
         run: node .github/scripts/upload-to-r2.js

.github/workflows/test.yml

@@ -0,0 +1,53 @@
+name: Test Suite
+
+on:
+  pull_request:
+    branches:
+      - "*"
+  push:
+    branches:
+      - main
+      - master
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "npm"
+          cache-dependency-path: package-lock.json
+
+      - name: Install dependencies
+        # Use npm install instead of npm ci to correctly resolve platform-specific
+        # optional dependencies (e.g., @tailwindcss/oxide, lightningcss binaries)
+        run: npm install
+
+      - name: Install Linux native bindings
+        # Workaround for npm optional dependencies bug (npm/cli#4828)
+        # Explicitly install Linux bindings needed for build tools
+        run: |
+          npm install --no-save --force \
+            @rollup/rollup-linux-x64-gnu@4.53.3 \
+            @tailwindcss/oxide-linux-x64-gnu@4.1.17
+
+      - name: Run server tests with coverage
+        run: npm run test:server:coverage
+        env:
+          NODE_ENV: test
+
+      # - name: Upload coverage reports
+      #   uses: codecov/codecov-action@v4
+      #   if: always()
+      #   with:
+      #     files: ./apps/server/coverage/coverage-final.json
+      #     flags: server
+      #     name: server-coverage
+      #   env:
+      #     CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}

.gitignore

@@ -7,8 +7,9 @@ node_modules/
 # Build outputs
 dist/
 .next/
-node_modules
 .automaker/images/
 .automaker/
 /.automaker/*
 /.automaker/
+
+/logs

.npmrc

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

DISCLAIMER.md

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

LICENSE

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

README.md

@@ -1,6 +1,36 @@
+> **[!TIP]**
+>
+> **Learn more about Agentic Coding!**
+>
+> Automaker itself was built by a group of engineers using AI and agentic coding techniques to build features faster than ever. By leveraging tools like Cursor IDE and Claude Code CLI, the team orchestrated AI agents to implement complex functionality in days instead of weeks.
+>
+> **Learn how:** Master these same techniques and workflows in the [Agentic Jumpstart course](https://agenticjumpstart.com/?utm=automaker).
+
 # Automaker
 
-Automaker is an autonomous AI development studio that helps you build software faster using AI-powered agents. It provides a visual Kanban board interface to manage features, automatically assigns AI agents to implement them, and tracks progress through an intuitive workflow from backlog to verified completion.
+**Stop typing code. Start directing AI agents.**
+
+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.
+
+## What Makes Automaker Different?
+
+Traditional development tools help you write code. Automaker helps you **orchestrate AI agents** to build entire features autonomously. Think of it as having a team of AI developers working for you—you define what needs to be built, and Automaker handles the implementation.
+
+### The Workflow
+
+1. **Add Features** - Describe features you want built (with text, images, or screenshots)
+2. **Move to "In Progress"** - Automaker automatically assigns an AI agent to implement the feature
+3. **Watch It Build** - See real-time progress as the agent writes code, runs tests, and makes changes
+4. **Review & Verify** - Review the changes, run tests, and approve when ready
+5. **Ship Faster** - Build entire applications in days, not weeks
+
+### Powered by Claude Code
+
+Automaker leverages the [Claude Agent SDK](https://docs.anthropic.com/en/docs/claude-code) to give AI agents full access to your codebase. Agents can read files, write code, execute commands, run tests, and make git commits—all while working in isolated git worktrees to keep your main branch safe.
+
+### Why This Matters
+
+The future of software development is **agentic coding**—where developers become architects directing AI agents rather than manual coders. Automaker puts this future in your hands today, letting you experience what it's like to build software 10x faster with AI agents handling the implementation while you focus on architecture and business logic.
 
 ---
 
@@ -36,20 +66,22 @@ cd automaker
 # 2. Install dependencies
 npm install
 
-# 3. Get your Claude Code OAuth token
-claude setup-token
-# ⚠️ This prints your token - don't share your screen!
-
-# 4. Set the token and run
-export CLAUDE_CODE_OAUTH_TOKEN="sk-ant-oat01-..."
-npm run dev:electron
+# 3. Run Automaker (pick your mode)
+npm run dev
+# Then choose your run mode when prompted, or use specific commands below
 ```
 
 ## How to Run
 
-### Development Modes
+### Development Mode
 
-Automaker can be run in several modes:
+Start Automaker in development mode:
+
+```bash
+npm run dev
+```
+
+This will prompt you to choose your run mode, or you can specify a mode directly:
 
 #### Electron Desktop App (Recommended)
 
@@ -72,8 +104,6 @@ npm run dev:electron:wsl:gpu
 ```bash
 # Run in web browser (http://localhost:3007)
 npm run dev:web
-# or
-npm run dev
 ```
 
 ### Building for Production
@@ -170,4 +200,27 @@ To learn more about Next.js, take a look at the following resources:
 
 ## License
 
-See [LICENSE](../LICENSE) for details.
+This project is licensed under the **Automaker License Agreement**. See [LICENSE](LICENSE) for the full text.
+
+**Summary of Terms:**
+
+- **Allowed:**
+
+  - **Build Anything:** You can clone and use Automaker locally or in your organization to build ANY product (commercial or free).
+  - **Internal Use:** You can use it internally within your company (commercial or non-profit) without restriction.
+  - **Modify:** You can modify the code for internal use within your organization (commercial or non-profit).
+
+- **Restricted (The "No Monetization of the Tool" Rule):**
+
+  - **No Resale:** You cannot resell Automaker itself.
+  - **No SaaS:** You cannot host Automaker as a service for others.
+  - **No Monetizing Mods:** You cannot distribute modified versions of Automaker for money.
+
+- **Liability:**
+
+  - **Use at Own Risk:** This tool uses AI. We are **NOT** responsible if it breaks your computer, deletes your files, or generates bad code. You assume all risk.
+
+- **Contributing:**
+  - By contributing to this repository, you grant the Core Contributors full, irrevocable rights to your code (copyright assignment).
+
+**Core Contributors** (Cody Seibert (webdevcody), SuperComboGamer (SCG), Kacper Lachowicz (Shironex, Shirone), and Ben Scott (trueheads)) are granted perpetual, royalty-free licenses for any use, including monetization.

apps/app/.gitignore

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

apps/app/electron/main.js

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

apps/app/next.config.ts

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

apps/app/package.json

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

apps/app/playwright.config.ts

@@ -30,6 +30,10 @@ export default defineConfig({
           url: `http://localhost:${port}`,
           reuseExistingServer: !process.env.CI,
           timeout: 120000,
+          env: {
+            ...process.env,
+            NEXT_PUBLIC_SKIP_SETUP: "true",
+          },
         },
       }),
 });

apps/app/public/automaker.svg

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

apps/app/scripts/prepare-server.js

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

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

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

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

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

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

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

apps/app/src/app/globals.css

@@ -12,6 +12,7 @@
 @custom-variant catppuccin (&:is(.catppuccin *));
 @custom-variant onedark (&:is(.onedark *));
 @custom-variant synthwave (&:is(.synthwave *));
+@custom-variant red (&:is(.red *));
 
 @theme inline {
   --color-background: var(--background);
@@ -78,6 +79,19 @@
   --color-running-indicator: var(--running-indicator);
   --color-running-indicator-text: var(--running-indicator-text);
 
+  /* Status colors */
+  --color-status-success: var(--status-success);
+  --color-status-success-bg: var(--status-success-bg);
+  --color-status-warning: var(--status-warning);
+  --color-status-warning-bg: var(--status-warning-bg);
+  --color-status-error: var(--status-error);
+  --color-status-error-bg: var(--status-error-bg);
+  --color-status-info: var(--status-info);
+  --color-status-info-bg: var(--status-info-bg);
+  --color-status-backlog: var(--status-backlog);
+  --color-status-in-progress: var(--status-in-progress);
+  --color-status-waiting: var(--status-waiting);
+
   /* Border radius */
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
@@ -141,6 +155,31 @@
   /* Running indicator - Purple */
   --running-indicator: oklch(0.55 0.25 265);
   --running-indicator-text: oklch(0.6 0.22 265);
+
+  /* Status colors - Light mode */
+  --status-success: oklch(0.55 0.2 140);
+  --status-success-bg: oklch(0.55 0.2 140 / 0.15);
+  --status-warning: oklch(0.7 0.15 70);
+  --status-warning-bg: oklch(0.7 0.15 70 / 0.15);
+  --status-error: oklch(0.55 0.22 25);
+  --status-error-bg: oklch(0.55 0.22 25 / 0.15);
+  --status-info: oklch(0.55 0.2 230);
+  --status-info-bg: oklch(0.55 0.2 230 / 0.15);
+  --status-backlog: oklch(0.5 0 0);
+  --status-in-progress: oklch(0.7 0.15 70);
+  --status-waiting: oklch(0.65 0.18 50);
+
+  /* Shadow tokens */
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+
+  /* Transition tokens */
+  --transition-fast: 150ms ease;
+  --transition-normal: 200ms ease;
+  --transition-slow: 300ms ease-out;
 }
 
 /* Apply dark mode immediately based on system preference (before JS runs) */
@@ -214,6 +253,26 @@
     /* Running indicator - Purple */
     --running-indicator: oklch(0.6 0.25 265);
     --running-indicator-text: oklch(0.65 0.22 265);
+
+    /* Status colors - Dark mode */
+    --status-success: oklch(0.65 0.2 140);
+    --status-success-bg: oklch(0.65 0.2 140 / 0.2);
+    --status-warning: oklch(0.75 0.15 70);
+    --status-warning-bg: oklch(0.75 0.15 70 / 0.2);
+    --status-error: oklch(0.65 0.22 25);
+    --status-error-bg: oklch(0.65 0.22 25 / 0.2);
+    --status-info: oklch(0.65 0.2 230);
+    --status-info-bg: oklch(0.65 0.2 230 / 0.2);
+    --status-backlog: oklch(0.6 0 0);
+    --status-in-progress: oklch(0.75 0.15 70);
+    --status-waiting: oklch(0.7 0.18 50);
+
+    /* Shadow tokens - darker for dark mode */
+    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
+    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
+    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
   }
 }
 
@@ -343,6 +402,26 @@
   /* Running indicator - Purple */
   --running-indicator: oklch(0.6 0.25 265);
   --running-indicator-text: oklch(0.65 0.22 265);
+
+  /* Status colors - Dark mode */
+  --status-success: oklch(0.65 0.2 140);
+  --status-success-bg: oklch(0.65 0.2 140 / 0.2);
+  --status-warning: oklch(0.75 0.15 70);
+  --status-warning-bg: oklch(0.75 0.15 70 / 0.2);
+  --status-error: oklch(0.65 0.22 25);
+  --status-error-bg: oklch(0.65 0.22 25 / 0.2);
+  --status-info: oklch(0.65 0.2 230);
+  --status-info-bg: oklch(0.65 0.2 230 / 0.2);
+  --status-backlog: oklch(0.6 0 0);
+  --status-in-progress: oklch(0.75 0.15 70);
+  --status-waiting: oklch(0.7 0.18 50);
+
+  /* Shadow tokens - darker for dark mode */
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
 }
 
 .retro {
@@ -1072,6 +1151,75 @@
   --running-indicator-text: oklch(0.75 0.26 350);
 }
 
+/* Red Theme - Bold crimson/red aesthetic */
+.red {
+  --background: oklch(0.12 0.03 15); /* Deep dark red-tinted black */
+  --background-50: oklch(0.12 0.03 15 / 0.5);
+  --background-80: oklch(0.12 0.03 15 / 0.8);
+
+  --foreground: oklch(0.95 0.01 15); /* Off-white with warm tint */
+  --foreground-secondary: oklch(0.7 0.02 15);
+  --foreground-muted: oklch(0.5 0.03 15);
+
+  --card: oklch(0.18 0.04 15); /* Slightly lighter dark red */
+  --card-foreground: oklch(0.95 0.01 15);
+  --popover: oklch(0.15 0.035 15);
+  --popover-foreground: oklch(0.95 0.01 15);
+
+  --primary: oklch(0.55 0.25 25); /* Vibrant crimson red */
+  --primary-foreground: oklch(0.98 0 0);
+
+  --brand-400: oklch(0.6 0.23 25);
+  --brand-500: oklch(0.55 0.25 25); /* Crimson */
+  --brand-600: oklch(0.5 0.27 25);
+
+  --secondary: oklch(0.22 0.05 15);
+  --secondary-foreground: oklch(0.95 0.01 15);
+
+  --muted: oklch(0.22 0.05 15);
+  --muted-foreground: oklch(0.5 0.03 15);
+
+  --accent: oklch(0.28 0.06 15);
+  --accent-foreground: oklch(0.95 0.01 15);
+
+  --destructive: oklch(0.6 0.28 30); /* Bright orange-red for destructive */
+
+  --border: oklch(0.35 0.08 15);
+  --border-glass: oklch(0.55 0.25 25 / 0.3);
+
+  --input: oklch(0.18 0.04 15);
+  --ring: oklch(0.55 0.25 25);
+
+  --chart-1: oklch(0.55 0.25 25); /* Crimson */
+  --chart-2: oklch(0.7 0.2 50); /* Orange */
+  --chart-3: oklch(0.8 0.18 80); /* Gold */
+  --chart-4: oklch(0.6 0.22 0); /* Pure red */
+  --chart-5: oklch(0.65 0.2 350); /* Pink-red */
+
+  --sidebar: oklch(0.1 0.025 15);
+  --sidebar-foreground: oklch(0.95 0.01 15);
+  --sidebar-primary: oklch(0.55 0.25 25);
+  --sidebar-primary-foreground: oklch(0.98 0 0);
+  --sidebar-accent: oklch(0.22 0.05 15);
+  --sidebar-accent-foreground: oklch(0.95 0.01 15);
+  --sidebar-border: oklch(0.35 0.08 15);
+  --sidebar-ring: oklch(0.55 0.25 25);
+
+  /* Action button colors - Red theme */
+  --action-view: oklch(0.55 0.25 25); /* Crimson */
+  --action-view-hover: oklch(0.5 0.27 25);
+  --action-followup: oklch(0.7 0.2 50); /* Orange */
+  --action-followup-hover: oklch(0.65 0.22 50);
+  --action-commit: oklch(0.6 0.2 140); /* Green for positive actions */
+  --action-commit-hover: oklch(0.55 0.22 140);
+  --action-verify: oklch(0.6 0.2 140); /* Green */
+  --action-verify-hover: oklch(0.55 0.22 140);
+
+  /* Running indicator - Crimson */
+  --running-indicator: oklch(0.55 0.25 25);
+  --running-indicator-text: oklch(0.6 0.23 25);
+}
+
 @layer base {
   * {
     @apply border-border outline-ring/50;
@@ -1107,12 +1255,12 @@
 }
 
 /* Custom scrollbar for dark themes */
-:is(.dark, .retro, .dracula, .nord, .monokai, .tokyonight, .solarized, .gruvbox, .catppuccin, .onedark, .synthwave) ::-webkit-scrollbar {
+:is(.dark, .retro, .dracula, .nord, .monokai, .tokyonight, .solarized, .gruvbox, .catppuccin, .onedark, .synthwave, .red) ::-webkit-scrollbar {
   width: 8px;
   height: 8px;
 }
 
-:is(.dark, .retro, .dracula, .nord, .monokai, .tokyonight, .solarized, .gruvbox, .catppuccin, .onedark, .synthwave) ::-webkit-scrollbar-track {
+:is(.dark, .retro, .dracula, .nord, .monokai, .tokyonight, .solarized, .gruvbox, .catppuccin, .onedark, .synthwave, .red) ::-webkit-scrollbar-track {
   background: var(--muted);
 }
 
@@ -1134,6 +1282,20 @@
     background: var(--background);
 }
 
+/* Red theme scrollbar */
+.red ::-webkit-scrollbar-thumb {
+  background: oklch(0.35 0.15 25);
+  border-radius: 4px;
+}
+
+.red ::-webkit-scrollbar-thumb:hover {
+  background: oklch(0.45 0.18 25);
+}
+
+.red ::-webkit-scrollbar-track {
+  background: oklch(0.15 0.05 25);
+}
+
 /* Always visible scrollbar for file diffs and code blocks */
 .scrollbar-visible {
   overflow-y: auto !important;
@@ -1327,6 +1489,39 @@
   .text-running-indicator {
     color: var(--running-indicator-text);
   }
+
+  /* Animated border for in-progress cards */
+  @keyframes border-rotate {
+    0% {
+      background-position: 0% 50%;
+    }
+    50% {
+      background-position: 100% 50%;
+    }
+    100% {
+      background-position: 0% 50%;
+    }
+  }
+
+  .animated-border-wrapper {
+    position: relative;
+    border-radius: 0.75rem;
+    padding: 2px;
+    background: linear-gradient(
+      90deg,
+      var(--running-indicator),
+      color-mix(in oklch, var(--running-indicator), transparent 50%),
+      var(--running-indicator),
+      color-mix(in oklch, var(--running-indicator), transparent 50%),
+      var(--running-indicator)
+    );
+    background-size: 200% 100%;
+    animation: border-rotate 3s ease infinite;
+  }
+
+  .animated-border-wrapper > * {
+    border-radius: calc(0.75rem - 2px);
+  }
 }
 
 /* Retro Overrides for Utilities */

apps/app/src/app/page.tsx

@@ -12,10 +12,16 @@ 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";
+import {
+  FileBrowserProvider,
+  useFileBrowser,
+  setGlobalFileBrowser,
+} from "@/contexts/file-browser-context";
 
 function HomeContent() {
   const {
@@ -24,6 +30,8 @@ function HomeContent() {
     setIpcConnected,
     theme,
     currentProject,
+    previewTheme,
+    getEffectiveTheme,
   } = useAppStore();
   const { isFirstRun, setupComplete } = useSetupStore();
   const [isMounted, setIsMounted] = useState(false);
@@ -72,9 +80,9 @@ function HomeContent() {
     };
   }, [handleStreamerPanelShortcut]);
 
-  // Compute the effective theme: project theme takes priority over global theme
-  // This is reactive because it depends on currentProject and theme from the store
-  const effectiveTheme = currentProject?.theme || theme;
+  // 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(() => {
@@ -122,7 +130,7 @@ function HomeContent() {
     testConnection();
   }, [setIpcConnected]);
 
-  // Apply theme class to document (uses effective theme - project-specific or global)
+  // Apply theme class to document (uses effective theme - preview, project-specific, or global)
   useEffect(() => {
     const root = document.documentElement;
     root.classList.remove(
@@ -137,7 +145,8 @@ function HomeContent() {
       "gruvbox",
       "catppuccin",
       "onedark",
-      "synthwave"
+      "synthwave",
+      "red"
     );
 
     if (effectiveTheme === "dark") {
@@ -162,6 +171,8 @@ function HomeContent() {
       root.classList.add("onedark");
     } else if (effectiveTheme === "synthwave") {
       root.classList.add("synthwave");
+    } else if (effectiveTheme === "red") {
+      root.classList.add("red");
     } else if (effectiveTheme === "light") {
       root.classList.add("light");
     } else if (effectiveTheme === "system") {
@@ -173,7 +184,7 @@ function HomeContent() {
         root.classList.add("light");
       }
     }
-  }, [effectiveTheme]);
+  }, [effectiveTheme, previewTheme, currentProject, theme]);
 
   const renderView = () => {
     switch (currentView) {
@@ -197,6 +208,10 @@ function HomeContent() {
         return <ProfilesView />;
       case "running-agents":
         return <RunningAgentsView />;
+      case "terminal":
+        return <TerminalView />;
+      case "wiki":
+        return <WikiView />;
       default:
         return <WelcomeView />;
     }
@@ -207,12 +222,6 @@ function HomeContent() {
     return (
       <main className="h-screen overflow-hidden" data-testid="app-container">
         <SetupView />
-        {/* Environment indicator */}
-        {isMounted && !isElectron() && (
-          <div className="fixed bottom-4 right-4 px-3 py-1.5 bg-blue-500/10 text-blue-500 text-xs rounded-full border border-blue-500/20 pointer-events-none">
-            Web Mode
-          </div>
-        )}
       </main>
     );
   }
@@ -227,13 +236,6 @@ function HomeContent() {
         {renderView()}
       </div>
 
-      {/* Environment indicator - only show after mount to prevent hydration issues */}
-      {isMounted && !isElectron() && (
-        <div className="fixed bottom-4 right-4 px-3 py-1.5 bg-blue-500/10 text-blue-500 text-xs rounded-full border border-blue-500/20 pointer-events-none">
-          Web Mode
-        </div>
-      )}
-
       {/* Hidden streamer panel - opens with "\" key, pushes content */}
       <div
         className={`fixed top-0 right-0 h-full w-[250px] bg-background border-l border-border transition-transform duration-300 ${

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

@@ -0,0 +1,520 @@
+"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 } 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,
+    setBoardBackground,
+    setCardOpacity,
+    setColumnOpacity,
+    setColumnBorderEnabled,
+    setCardGlassmorphism,
+    setCardBorderEnabled,
+    setCardBorderOpacity,
+    setHideScrollbar,
+    clearBoardBackground,
+  } = useAppStore();
+  const [isDragOver, setIsDragOver] = useState(false);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+
+  // Get current background settings (live from store)
+  const backgroundSettings =
+    (currentProject && boardBackgroundByProject[currentProject.path]) ||
+    defaultBackgroundSettings;
+
+  const cardOpacity = backgroundSettings.cardOpacity;
+  const columnOpacity = backgroundSettings.columnOpacity;
+  const columnBorderEnabled = backgroundSettings.columnBorderEnabled;
+  const cardGlassmorphism = backgroundSettings.cardGlassmorphism;
+  const cardBorderEnabled = backgroundSettings.cardBorderEnabled;
+  const cardBorderOpacity = backgroundSettings.cardBorderOpacity;
+  const hideScrollbar = backgroundSettings.hideScrollbar;
+  const imageVersion = backgroundSettings.imageVersion;
+
+  // Update preview image when background settings change
+  useEffect(() => {
+    if (currentProject && backgroundSettings.imagePath) {
+      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 imagePath = `${serverUrl}/api/fs/image?path=${encodeURIComponent(
+        backgroundSettings.imagePath
+      )}&projectPath=${encodeURIComponent(currentProject.path)}${cacheBuster}`;
+      setPreviewImage(imagePath);
+    } else {
+      setPreviewImage(null);
+    }
+  }, [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");
+        return;
+      }
+
+      // 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;
+      }
+
+      setIsProcessing(true);
+      try {
+        const base64 = await fileToBase64(file);
+
+        // Set preview immediately
+        setPreviewImage(base64);
+
+        // Save to server
+        const httpClient = getHttpApiClient();
+        const result = await httpClient.saveBoardBackground(
+          base64,
+          file.name,
+          file.type,
+          currentProject.path
+        );
+
+        if (result.success && result.path) {
+          // 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");
+          setPreviewImage(null);
+        }
+      } catch (error) {
+        console.error("Failed to process image:", error);
+        toast.error("Failed to process image");
+        setPreviewImage(null);
+      } finally {
+        setIsProcessing(false);
+      }
+    },
+    [currentProject, setBoardBackground]
+  );
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragOver(false);
+
+      const files = e.dataTransfer.files;
+      if (files.length > 0) {
+        processFile(files[0]);
+      }
+    },
+    [processFile]
+  );
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(true);
+  }, []);
+
+  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) {
+        processFile(files[0]);
+      }
+      // Reset the input so the same file can be selected again
+      if (fileInputRef.current) {
+        fileInputRef.current.value = "";
+      }
+    },
+    [processFile]
+  );
+
+  const handleBrowseClick = useCallback(() => {
+    if (fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  }, []);
+
+  const handleClear = useCallback(async () => {
+    if (!currentProject) return;
+
+    try {
+      setIsProcessing(true);
+      const httpClient = getHttpApiClient();
+      const result = await httpClient.deleteBoardBackground(
+        currentProject.path
+      );
+
+      if (result.success) {
+        clearBoardBackground(currentProject.path);
+        setPreviewImage(null);
+        toast.success("Background image cleared");
+      } else {
+        toast.error(result.error || "Failed to clear background image");
+      }
+    } catch (error) {
+      console.error("Failed to clear background:", error);
+      toast.error("Failed to clear background");
+    } finally {
+      setIsProcessing(false);
+    }
+  }, [currentProject, clearBoardBackground]);
+
+  // Live update opacity when sliders change
+  const handleCardOpacityChange = useCallback(
+    (value: number[]) => {
+      if (!currentProject) return;
+      setCardOpacity(currentProject.path, value[0]);
+    },
+    [currentProject, setCardOpacity]
+  );
+
+  const handleColumnOpacityChange = useCallback(
+    (value: number[]) => {
+      if (!currentProject) return;
+      setColumnOpacity(currentProject.path, value[0]);
+    },
+    [currentProject, setColumnOpacity]
+  );
+
+  const handleColumnBorderToggle = useCallback(
+    (checked: boolean) => {
+      if (!currentProject) return;
+      setColumnBorderEnabled(currentProject.path, checked);
+    },
+    [currentProject, setColumnBorderEnabled]
+  );
+
+  const handleCardGlassmorphismToggle = useCallback(
+    (checked: boolean) => {
+      if (!currentProject) return;
+      setCardGlassmorphism(currentProject.path, checked);
+    },
+    [currentProject, setCardGlassmorphism]
+  );
+
+  const handleCardBorderToggle = useCallback(
+    (checked: boolean) => {
+      if (!currentProject) return;
+      setCardBorderEnabled(currentProject.path, checked);
+    },
+    [currentProject, setCardBorderEnabled]
+  );
+
+  const handleCardBorderOpacityChange = useCallback(
+    (value: number[]) => {
+      if (!currentProject) return;
+      setCardBorderOpacity(currentProject.path, value[0]);
+    },
+    [currentProject, setCardBorderOpacity]
+  );
+
+  const handleHideScrollbarToggle = useCallback(
+    (checked: boolean) => {
+      if (!currentProject) return;
+      setHideScrollbar(currentProject.path, checked);
+    },
+    [currentProject, setHideScrollbar]
+  );
+
+  if (!currentProject) {
+    return null;
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent side="right" className="w-full sm:max-w-md overflow-y-auto">
+        <SheetHeader className="px-6 pt-6">
+          <SheetTitle className="flex items-center gap-2">
+            <ImageIcon className="w-5 h-5 text-brand-500" />
+            Board Background Settings
+          </SheetTitle>
+          <SheetDescription className="text-muted-foreground">
+            Set a custom background image for your kanban board and adjust
+            card/column opacity
+          </SheetDescription>
+        </SheetHeader>
+
+        <div className="space-y-6 px-6 pb-6">
+          {/* Image Upload Section */}
+          <div className="space-y-3">
+            <Label>Background Image</Label>
+
+            {/* Hidden file input */}
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept={ACCEPTED_IMAGE_TYPES.join(",")}
+              onChange={handleFileSelect}
+              className="hidden"
+              disabled={isProcessing}
+            />
+
+            {/* Drop zone */}
+            <div
+              onDrop={handleDrop}
+              onDragOver={handleDragOver}
+              onDragLeave={handleDragLeave}
+              className={cn(
+                "relative rounded-lg border-2 border-dashed transition-all duration-200",
+                {
+                  "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":
+                    !isProcessing && !isDragOver,
+                }
+              )}
+            >
+              {previewImage ? (
+                <div className="relative p-4">
+                  <div className="relative w-full h-48 rounded-md overflow-hidden border border-border bg-muted">
+                    <img
+                      src={previewImage}
+                      alt="Background preview"
+                      className="w-full h-full object-cover"
+                    />
+                    {isProcessing && (
+                      <div className="absolute inset-0 flex items-center justify-center bg-background/80">
+                        <Loader2 className="w-6 h-6 animate-spin text-brand-500" />
+                      </div>
+                    )}
+                  </div>
+                  <div className="flex gap-2 mt-3">
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={handleBrowseClick}
+                      disabled={isProcessing}
+                      className="flex-1"
+                    >
+                      <Upload className="w-4 h-4 mr-2" />
+                      Change Image
+                    </Button>
+                    <Button
+                      variant="destructive"
+                      size="sm"
+                      onClick={handleClear}
+                      disabled={isProcessing}
+                    >
+                      <Trash2 className="w-4 h-4 mr-2" />
+                      Clear
+                    </Button>
+                  </div>
+                </div>
+              ) : (
+                <div
+                  onClick={handleBrowseClick}
+                  className="flex flex-col items-center justify-center p-8 text-center cursor-pointer"
+                >
+                  <div
+                    className={cn(
+                      "rounded-full p-3 mb-3",
+                      isDragOver && !isProcessing
+                        ? "bg-brand-500/10 dark:bg-brand-500/20"
+                        : "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 text-muted-foreground">
+                    {isDragOver && !isProcessing
+                      ? "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)
+                  </p>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Opacity Controls */}
+          <div className="space-y-4">
+            <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>
+              </div>
+              <Slider
+                value={[cardOpacity]}
+                onValueChange={handleCardOpacityChange}
+                min={0}
+                max={100}
+                step={1}
+                className="w-full"
+              />
+            </div>
+
+            <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>
+              </div>
+              <Slider
+                value={[columnOpacity]}
+                onValueChange={handleColumnOpacityChange}
+                min={0}
+                max={100}
+                step={1}
+                className="w-full"
+              />
+            </div>
+
+            {/* Column Border Toggle */}
+            <div className="flex items-center gap-2">
+              <Checkbox
+                id="column-border-toggle"
+                checked={columnBorderEnabled}
+                onCheckedChange={handleColumnBorderToggle}
+              />
+              <Label htmlFor="column-border-toggle" className="cursor-pointer">
+                Show Column Borders
+              </Label>
+            </div>
+
+            {/* Card Glassmorphism Toggle */}
+            <div className="flex items-center gap-2">
+              <Checkbox
+                id="card-glassmorphism-toggle"
+                checked={cardGlassmorphism}
+                onCheckedChange={handleCardGlassmorphismToggle}
+              />
+              <Label
+                htmlFor="card-glassmorphism-toggle"
+                className="cursor-pointer"
+              >
+                Card Glassmorphism (blur effect)
+              </Label>
+            </div>
+
+            {/* Card Border Toggle */}
+            <div className="flex items-center gap-2">
+              <Checkbox
+                id="card-border-toggle"
+                checked={cardBorderEnabled}
+                onCheckedChange={handleCardBorderToggle}
+              />
+              <Label htmlFor="card-border-toggle" className="cursor-pointer">
+                Show Card Borders
+              </Label>
+            </div>
+
+            {/* Card Border Opacity - only show when border is enabled */}
+            {cardBorderEnabled && (
+              <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>
+                </div>
+                <Slider
+                  value={[cardBorderOpacity]}
+                  onValueChange={handleCardBorderOpacityChange}
+                  min={0}
+                  max={100}
+                  step={1}
+                  className="w-full"
+                />
+              </div>
+            )}
+
+            {/* Hide Scrollbar Toggle */}
+            <div className="flex items-center gap-2">
+              <Checkbox
+                id="hide-scrollbar-toggle"
+                checked={hideScrollbar}
+                onCheckedChange={handleHideScrollbarToggle}
+              />
+              <Label htmlFor="hide-scrollbar-toggle" className="cursor-pointer">
+                Hide Board Scrollbar
+              </Label>
+            </div>
+          </div>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}

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

@@ -1,7 +1,15 @@
 "use client";
 
-import { useState, useEffect } from "react";
-import { FolderOpen, Folder, ChevronRight, Home, ArrowLeft, HardDrive } from "lucide-react";
+import { useState, useEffect, useRef } from "react";
+import {
+  FolderOpen,
+  Folder,
+  ChevronRight,
+  Home,
+  ArrowLeft,
+  HardDrive,
+  CornerDownLeft,
+} from "lucide-react";
 import {
   Dialog,
   DialogContent,
@@ -11,6 +19,7 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
 
 interface DirectoryEntry {
   name: string;
@@ -24,6 +33,7 @@ interface BrowseResult {
   directories: DirectoryEntry[];
   drives?: string[];
   error?: string;
+  warning?: string;
 }
 
 interface FileBrowserDialogProps {
@@ -32,6 +42,7 @@ interface FileBrowserDialogProps {
   onSelect: (path: string) => void;
   title?: string;
   description?: string;
+  initialPath?: string;
 }
 
 export function FileBrowserDialog({
@@ -39,22 +50,28 @@ export function FileBrowserDialog({
   onOpenChange,
   onSelect,
   title = "Select Project Directory",
-  description = "Navigate to your project folder",
+  description = "Navigate to your project folder or paste a path directly",
+  initialPath,
 }: FileBrowserDialogProps) {
   const [currentPath, setCurrentPath] = useState<string>("");
+  const [pathInput, setPathInput] = useState<string>("");
   const [parentPath, setParentPath] = useState<string | null>(null);
   const [directories, setDirectories] = useState<DirectoryEntry[]>([]);
   const [drives, setDrives] = useState<string[]>([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
+  const [warning, setWarning] = useState("");
+  const pathInputRef = useRef<HTMLInputElement>(null);
 
   const browseDirectory = async (dirPath?: string) => {
     setLoading(true);
     setError("");
+    setWarning("");
 
     try {
       // Get server URL from environment or default
-      const serverUrl = process.env.NEXT_PUBLIC_SERVER_URL || "http://localhost:3008";
+      const serverUrl =
+        process.env.NEXT_PUBLIC_SERVER_URL || "http://localhost:3008";
 
       const response = await fetch(`${serverUrl}/api/fs/browse`, {
         method: "POST",
@@ -66,26 +83,42 @@ export function FileBrowserDialog({
 
       if (result.success) {
         setCurrentPath(result.currentPath);
+        setPathInput(result.currentPath);
         setParentPath(result.parentPath);
         setDirectories(result.directories);
         setDrives(result.drives || []);
+        setWarning(result.warning || "");
       } else {
         setError(result.error || "Failed to browse directory");
       }
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to load directories");
+      setError(
+        err instanceof Error ? err.message : "Failed to load directories"
+      );
     } finally {
       setLoading(false);
     }
   };
 
-  // Load home directory on mount
+  // Reset current path when dialog closes
   useEffect(() => {
-    if (open && !currentPath) {
-      browseDirectory();
+    if (!open) {
+      setCurrentPath("");
+      setPathInput("");
+      setParentPath(null);
+      setDirectories([]);
+      setError("");
+      setWarning("");
     }
   }, [open]);
 
+  // Load initial path or home directory when dialog opens
+  useEffect(() => {
+    if (open && !currentPath) {
+      browseDirectory(initialPath);
+    }
+  }, [open, initialPath]);
+
   const handleSelectDirectory = (dir: DirectoryEntry) => {
     browseDirectory(dir.path);
   };
@@ -104,6 +137,20 @@ export function FileBrowserDialog({
     browseDirectory(drivePath);
   };
 
+  const handleGoToPath = () => {
+    const trimmedPath = pathInput.trim();
+    if (trimmedPath) {
+      browseDirectory(trimmedPath);
+    }
+  };
+
+  const handlePathInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      handleGoToPath();
+    }
+  };
+
   const handleSelect = () => {
     if (currentPath) {
       onSelect(currentPath);
@@ -113,8 +160,8 @@ export function FileBrowserDialog({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="bg-popover border-border max-w-2xl max-h-[80vh]">
-        <DialogHeader>
+      <DialogContent className="bg-popover border-border max-w-2xl max-h-[80vh] overflow-hidden flex flex-col">
+        <DialogHeader className="pb-2">
           <DialogTitle className="flex items-center gap-2">
             <FolderOpen className="w-5 h-5 text-brand-500" />
             {title}
@@ -124,7 +171,32 @@ export function FileBrowserDialog({
           </DialogDescription>
         </DialogHeader>
 
-        <div className="flex flex-col gap-3 min-h-[400px]">
+        <div className="flex flex-col gap-3 min-h-[400px] flex-1 overflow-hidden py-2">
+          {/* Direct path input */}
+          <div className="flex items-center gap-2">
+            <Input
+              ref={pathInputRef}
+              type="text"
+              placeholder="Paste or type a full path (e.g., /home/user/projects/myapp)"
+              value={pathInput}
+              onChange={(e) => setPathInput(e.target.value)}
+              onKeyDown={handlePathInputKeyDown}
+              className="flex-1 font-mono text-sm"
+              data-testid="path-input"
+              disabled={loading}
+            />
+            <Button
+              variant="secondary"
+              size="sm"
+              onClick={handleGoToPath}
+              disabled={loading || !pathInput.trim()}
+              data-testid="go-to-path-button"
+            >
+              <CornerDownLeft className="w-4 h-4 mr-1" />
+              Go
+            </Button>
+          </div>
+
           {/* Drives selector (Windows only) */}
           {drives.length > 0 && (
             <div className="flex flex-wrap gap-2 p-3 rounded-lg bg-sidebar-accent/10 border border-sidebar-border">
@@ -135,7 +207,9 @@ 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-7 px-3 text-xs"
@@ -178,7 +252,9 @@ export function FileBrowserDialog({
           <div className="flex-1 overflow-y-auto border border-sidebar-border rounded-lg">
             {loading && (
               <div className="flex items-center justify-center h-full p-8">
-                <div className="text-sm text-muted-foreground">Loading directories...</div>
+                <div className="text-sm text-muted-foreground">
+                  Loading directories...
+                </div>
               </div>
             )}
 
@@ -188,9 +264,17 @@ export function FileBrowserDialog({
               </div>
             )}
 
-            {!loading && !error && directories.length === 0 && (
+            {warning && (
+              <div className="p-3 bg-yellow-500/10 border border-yellow-500/30 rounded-lg mb-2">
+                <div className="text-sm text-yellow-500">{warning}</div>
+              </div>
+            )}
+
+            {!loading && !error && !warning && directories.length === 0 && (
               <div className="flex items-center justify-center h-full p-8">
-                <div className="text-sm text-muted-foreground">No subdirectories found</div>
+                <div className="text-sm text-muted-foreground">
+                  No subdirectories found
+                </div>
               </div>
             )}
 
@@ -212,11 +296,12 @@ export function FileBrowserDialog({
           </div>
 
           <div className="text-xs text-muted-foreground">
-            Click on a folder to navigate. Select the current folder or navigate to a subfolder.
+            Paste a full path above, or click on folders to navigate. Press
+            Enter or click Go to jump to a path.
           </div>
         </div>
 
-        <DialogFooter className="gap-2 sm:gap-0">
+        <DialogFooter className="border-t border-border pt-4 gap-2">
           <Button variant="ghost" onClick={() => onOpenChange(false)}>
             Cancel
           </Button>

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

@@ -0,0 +1,515 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { 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,
+  Rocket,
+  ExternalLink,
+  Check,
+  Loader2,
+  Link,
+  Folder,
+} 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;
+  workspaceDir?: boolean;
+  templateSelection?: boolean;
+  customUrl?: boolean;
+}
+
+interface NewProjectModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => 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>;
+  isCreating: boolean;
+}
+
+export function NewProjectModal({
+  open,
+  onOpenChange,
+  onCreateBlankProject,
+  onCreateFromTemplate,
+  onCreateFromCustomUrl,
+  isCreating,
+}: NewProjectModalProps) {
+  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 [useCustomUrl, setUseCustomUrl] = useState(false);
+  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);
+      const httpClient = getHttpApiClient();
+      httpClient.workspace
+        .getConfig()
+        .then((result) => {
+          if (result.success && result.workspaceDir) {
+            setWorkspaceDir(result.workspaceDir);
+          }
+        })
+        .catch((error) => {
+          console.error("Failed to get workspace config:", error);
+        })
+        .finally(() => {
+          setIsLoadingWorkspace(false);
+        });
+    }
+  }, [open]);
+
+  // Reset form when modal closes
+  useEffect(() => {
+    if (!open) {
+      setProjectName("");
+      setSelectedTemplate(null);
+      setUseCustomUrl(false);
+      setCustomUrl("");
+      setActiveTab("blank");
+      setErrors({});
+    }
+  }, [open]);
+
+  // Clear specific errors when user fixes them
+  useEffect(() => {
+    if (projectName && errors.projectName) {
+      setErrors((prev) => ({ ...prev, projectName: false }));
+    }
+  }, [projectName, errors.projectName]);
+
+  useEffect(() => {
+    if (
+      (selectedTemplate || (useCustomUrl && customUrl)) &&
+      errors.templateSelection
+    ) {
+      setErrors((prev) => ({ ...prev, templateSelection: false }));
+    }
+  }, [selectedTemplate, useCustomUrl, customUrl, errors.templateSelection]);
+
+  useEffect(() => {
+    if (customUrl && errors.customUrl) {
+      setErrors((prev) => ({ ...prev, customUrl: false }));
+    }
+  }, [customUrl, errors.customUrl]);
+
+  const validateAndCreate = async () => {
+    const newErrors: ValidationErrors = {};
+
+    // Check project name
+    if (!projectName.trim()) {
+      newErrors.projectName = true;
+    }
+
+    // Check workspace dir
+    if (!workspaceDir) {
+      newErrors.workspaceDir = true;
+    }
+
+    // Check template selection (only for template tab)
+    if (activeTab === "template") {
+      if (useCustomUrl) {
+        if (!customUrl.trim()) {
+          newErrors.customUrl = true;
+        }
+      } else if (!selectedTemplate) {
+        newErrors.templateSelection = true;
+      }
+    }
+
+    // If there are errors, show them and don't proceed
+    if (Object.values(newErrors).some(Boolean)) {
+      setErrors(newErrors);
+      return;
+    }
+
+    // Clear errors and proceed
+    setErrors({});
+
+    if (activeTab === "blank") {
+      await onCreateBlankProject(projectName, workspaceDir);
+    } else if (useCustomUrl && customUrl) {
+      await onCreateFromCustomUrl(customUrl, projectName, workspaceDir);
+    } else if (selectedTemplate) {
+      await onCreateFromTemplate(selectedTemplate, projectName, workspaceDir);
+    }
+  };
+
+  const handleOpenRepo = (url: string) => {
+    const api = getElectronAPI();
+    api.openExternalLink(url);
+  };
+
+  const handleSelectTemplate = (template: StarterTemplate) => {
+    setSelectedTemplate(template);
+    setUseCustomUrl(false);
+    setCustomUrl("");
+  };
+
+  const handleToggleCustomUrl = () => {
+    setUseCustomUrl(!useCustomUrl);
+    if (!useCustomUrl) {
+      setSelectedTemplate(null);
+    }
+  };
+
+  const handleBrowseDirectory = async () => {
+    const selectedPath = await openFileBrowser({
+      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
+      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 }));
+      }
+    }
+  };
+
+  // Use platform-specific path separator
+  const pathSep =
+    typeof window !== "undefined" && (window as any).electronAPI
+      ? navigator.platform.indexOf("Win") !== -1
+        ? "\\"
+        : "/"
+      : "/";
+  const projectPath =
+    workspaceDir && projectName
+      ? `${workspaceDir}${pathSep}${projectName}`
+      : "";
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        className="bg-card border-border max-w-2xl max-h-[85vh] overflow-hidden flex flex-col"
+        data-testid="new-project-modal"
+      >
+        <DialogHeader className="pb-2">
+          <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>
+        </DialogHeader>
+
+        {/* Project Name Input - Always visible at top */}
+        <div className="space-y-3 pb-4 border-b border-border">
+          <div className="space-y-2">
+            <Label
+              htmlFor="project-name"
+              className={cn(
+                "text-foreground",
+                errors.projectName && "text-red-500"
+              )}
+            >
+              Project Name{" "}
+              {errors.projectName && <span className="text-red-500">*</span>}
+            </Label>
+            <Input
+              id="project-name"
+              placeholder="my-awesome-project"
+              value={projectName}
+              onChange={(e) => setProjectName(e.target.value)}
+              className={cn(
+                "bg-input text-foreground placeholder:text-muted-foreground",
+                errors.projectName
+                  ? "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>
+            )}
+          </div>
+
+          {/* Workspace Directory Display */}
+          <div
+            className={cn(
+              "flex items-center gap-2 text-sm",
+              errors.workspaceDir ? "text-red-500" : "text-muted-foreground"
+            )}
+          >
+            <Folder className="w-4 h-4 shrink-0" />
+            <span className="flex-1 min-w-0">
+              {isLoadingWorkspace ? (
+                "Loading workspace..."
+              ) : workspaceDir ? (
+                <>
+                  Will be created at:{" "}
+                  <code className="text-xs bg-muted px-1.5 py-0.5 rounded truncate">
+                    {projectPath || workspaceDir}
+                  </code>
+                </>
+              ) : (
+                <span className="text-red-500">No workspace configured</span>
+              )}
+            </span>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={handleBrowseDirectory}
+              disabled={isLoadingWorkspace}
+              className="shrink-0 h-7 px-2 text-xs"
+              data-testid="browse-directory-button"
+            >
+              <FolderOpen className="w-3.5 h-3.5 mr-1" />
+              Browse
+            </Button>
+          </div>
+        </div>
+
+        <Tabs
+          value={activeTab}
+          onValueChange={(v) => setActiveTab(v as "blank" | "template")}
+          className="flex-1 flex flex-col overflow-hidden"
+        >
+          <TabsList className="w-full justify-start">
+            <TabsTrigger value="blank" className="gap-2">
+              <FolderPlus className="w-4 h-4" />
+              Blank Project
+            </TabsTrigger>
+            <TabsTrigger value="template" className="gap-2">
+              <Rocket className="w-4 h-4" />
+              Starter Kit
+            </TabsTrigger>
+          </TabsList>
+
+          <div className="flex-1 overflow-y-auto py-4">
+            <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.
+                </p>
+              </div>
+            </TabsContent>
+
+            <TabsContent value="template" className="mt-0">
+              <div className="space-y-4">
+                {/* Error message for template selection */}
+                {errors.templateSelection && (
+                  <p className="text-sm text-red-500">
+                    Please select a template or enter a custom GitHub URL
+                  </p>
+                )}
+
+                {/* Preset Templates */}
+                <div
+                  className={cn(
+                    "space-y-3 rounded-lg p-1 -m-1",
+                    errors.templateSelection && "ring-2 ring-red-500/50"
+                  )}
+                >
+                  {starterTemplates.map((template) => (
+                    <div
+                      key={template.id}
+                      className={cn(
+                        "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"
+                      )}
+                      onClick={() => handleSelectTemplate(template)}
+                      data-testid={`template-${template.id}`}
+                    >
+                      <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" />
+                              )}
+                          </div>
+                          <p className="text-sm text-muted-foreground mb-3">
+                            {template.description}
+                          </p>
+
+                          {/* 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"
+                              >
+                                {tech}
+                              </Badge>
+                            ))}
+                            {template.techStack.length > 6 && (
+                              <Badge variant="secondary" className="text-xs">
+                                +{template.techStack.length - 6} more
+                              </Badge>
+                            )}
+                          </div>
+
+                          {/* Key Features */}
+                          <div className="text-xs text-muted-foreground">
+                            <span className="font-medium">Features: </span>
+                            {template.features.slice(0, 3).join(" · ")}
+                            {template.features.length > 3 &&
+                              ` · +${template.features.length - 3} more`}
+                          </div>
+                        </div>
+
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="shrink-0"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            handleOpenRepo(template.repoUrl);
+                          }}
+                        >
+                          <ExternalLink className="w-4 h-4 mr-1" />
+                          View
+                        </Button>
+                      </div>
+                    </div>
+                  ))}
+
+                  {/* Custom URL Option */}
+                  <div
+                    className={cn(
+                      "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"
+                    )}
+                    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" />
+                      )}
+                    </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"
+                      >
+                        <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",
+                            errors.customUrl
+                              ? "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>
+                        )}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
+            </TabsContent>
+          </div>
+        </Tabs>
+
+        <DialogFooter className="border-t border-border pt-4">
+          <Button
+            variant="ghost"
+            onClick={() => onOpenChange(false)}
+            className="text-muted-foreground hover:text-foreground hover:bg-accent"
+          >
+            Cancel
+          </Button>
+          <HotkeyButton
+            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 }}
+            hotkeyActive={open}
+            data-testid="confirm-create-project"
+          >
+            {isCreating ? (
+              <>
+                <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                {activeTab === "template" ? "Cloning..." : "Creating..."}
+              </>
+            ) : (
+              <>Create Project</>
+            )}
+          </HotkeyButton>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -320,7 +320,7 @@ export function SessionManager({
     activeTab === "active" ? activeSessions : archivedSessions;
 
   return (
-    <Card className="h-full flex flex-col">
+    <Card className="h-full flex flex-col rounded-none">
       <CardHeader className="pb-3">
         <div className="flex items-center justify-between mb-4">
           <CardTitle>Agent Sessions</CardTitle>

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

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

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

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

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

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

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

@@ -38,7 +38,10 @@ function DialogOverlay({
     <DialogPrimitive.Overlay
       data-slot="dialog-overlay"
       className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        "fixed inset-0 z-50 bg-black/60 backdrop-blur-sm",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out",
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "duration-200",
         className
       )}
       {...props}
@@ -66,7 +69,17 @@ function DialogContent({
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 flex flex-col w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] rounded-lg border shadow-lg duration-200 max-h-[calc(100vh-4rem)]",
+          "fixed top-[50%] left-[50%] z-50 translate-x-[-50%] translate-y-[-50%]",
+          "flex flex-col w-full max-w-[calc(100%-2rem)] max-h-[calc(100vh-4rem)]",
+          "bg-card border border-border rounded-xl shadow-2xl",
+          // Premium shadow
+          "shadow-[0_25px_50px_-12px_rgba(0,0,0,0.25)]",
+          // Animations - smoother with scale
+          "data-[state=open]:animate-in data-[state=closed]:animate-out",
+          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+          "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+          "data-[state=closed]:slide-out-to-top-[2%] data-[state=open]:slide-in-from-top-[2%]",
+          "duration-200",
           compact
             ? "max-w-4xl p-4"
             : !hasCustomMaxWidth
@@ -81,8 +94,13 @@ function DialogContent({
           <DialogPrimitive.Close
             data-slot="dialog-close"
             className={cn(
-              "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute rounded-xs opacity-70 transition-opacity cursor-pointer hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-              compact ? "top-2 right-3" : "top-3 right-5"
+              "absolute rounded-lg opacity-60 transition-all duration-200 cursor-pointer",
+              "hover:opacity-100 hover:bg-muted",
+              "focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-none",
+              "disabled:pointer-events-none disabled:cursor-not-allowed",
+              "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4",
+              "p-1.5",
+              compact ? "top-2 right-3" : "top-4 right-4"
             )}
           >
             <XIcon />
@@ -109,7 +127,7 @@ function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="dialog-footer"
       className={cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end mt-6",
         className
       )}
       {...props}
@@ -124,7 +142,7 @@ function DialogTitle({
   return (
     <DialogPrimitive.Title
       data-slot="dialog-title"
-      className={cn("text-lg leading-none font-semibold", className)}
+      className={cn("text-lg leading-none font-semibold tracking-tight", className)}
       {...props}
     />
   );
@@ -137,7 +155,7 @@ function DialogDescription({
   return (
     <DialogPrimitive.Description
       data-slot="dialog-description"
-      className={cn("text-muted-foreground text-sm", className)}
+      className={cn("text-muted-foreground text-sm leading-relaxed", className)}
       {...props}
     />
   );

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

@@ -43,14 +43,16 @@ const DropdownMenuSubContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
 >(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    )}
-    {...props}
-  />
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.SubContent
+      ref={ref}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
 ))
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName
 

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

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

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

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

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

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

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

@@ -14,13 +14,23 @@ const TooltipTrigger = TooltipPrimitive.Trigger
 const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
+>(({ className, sideOffset = 6, ...props }, ref) => (
   <TooltipPrimitive.Portal>
     <TooltipPrimitive.Content
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 overflow-hidden rounded-lg border border-border bg-popover px-3 py-1.5 text-xs font-medium text-popover-foreground",
+        // Premium shadow
+        "shadow-lg shadow-black/10",
+        // Faster, snappier animations
+        "animate-in fade-in-0 zoom-in-95 duration-150",
+        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:duration-100",
+        // Slide from edge
+        "data-[side=bottom]:slide-in-from-top-1",
+        "data-[side=left]:slide-in-from-right-1",
+        "data-[side=right]:slide-in-from-left-1",
+        "data-[side=top]:slide-in-from-bottom-1",
         className
       )}
       {...props}

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

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

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

@@ -2,7 +2,6 @@
 
 import { useState, useCallback, useRef, useEffect, useMemo } from "react";
 import { useAppStore } from "@/store/app-store";
-import { Card, CardContent } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { ImageDropZone } from "@/components/ui/image-drop-zone";
@@ -222,11 +221,6 @@ export function AgentView() {
       e.stopPropagation();
       if (isProcessing || !isConnected) return;
 
-      console.log(
-        "[agent-view] Drag enter types:",
-        Array.from(e.dataTransfer.types)
-      );
-
       // Check if dragged items contain files
       if (e.dataTransfer.types.includes("Files")) {
         setIsDragOver(true);
@@ -262,39 +256,21 @@ export function AgentView() {
 
       if (isProcessing || !isConnected) return;
 
-      console.log("[agent-view] Drop event:", {
-        filesCount: e.dataTransfer.files.length,
-        itemsCount: e.dataTransfer.items.length,
-        types: Array.from(e.dataTransfer.types),
-      });
-
       // Check if we have files
       const files = e.dataTransfer.files;
       if (files && files.length > 0) {
-        console.log("[agent-view] Processing files from dataTransfer.files");
         processDroppedFiles(files);
         return;
       }
 
       // Handle file paths (from screenshots or other sources)
-      // This is common on macOS when dragging screenshots
       const items = e.dataTransfer.items;
       if (items && items.length > 0) {
-        console.log("[agent-view] Processing items");
         for (let i = 0; i < items.length; i++) {
           const item = items[i];
-          console.log(`[agent-view] Item ${i}:`, {
-            kind: item.kind,
-            type: item.type,
-          });
           if (item.kind === "file") {
             const file = item.getAsFile();
             if (file) {
-              console.log("[agent-view] Got file from item:", {
-                name: file.name,
-                type: file.type,
-                size: file.size,
-              });
               const dataTransfer = new DataTransfer();
               dataTransfer.items.add(file);
               processDroppedFiles(dataTransfer.files);
@@ -315,10 +291,6 @@ export function AgentView() {
 
         for (let i = 0; i < items.length; i++) {
           const item = items[i];
-          console.log("[agent-view] Paste item:", {
-            kind: item.kind,
-            type: item.type,
-          });
 
           if (item.kind === "file") {
             const file = item.getAsFile();
@@ -330,10 +302,6 @@ export function AgentView() {
         }
 
         if (files.length > 0) {
-          console.log(
-            "[agent-view] Processing pasted image files:",
-            files.length
-          );
           const dataTransfer = new DataTransfer();
           files.forEach((file) => dataTransfer.items.add(file));
           await processDroppedFiles(dataTransfer.files);
@@ -442,13 +410,15 @@ export function AgentView() {
   if (!currentProject) {
     return (
       <div
-        className="flex-1 flex items-center justify-center"
+        className="flex-1 flex items-center justify-center bg-background"
         data-testid="agent-view-no-project"
       >
-        <div className="text-center">
-          <Sparkles className="w-12 h-12 text-muted-foreground mx-auto mb-4" />
-          <h2 className="text-xl font-semibold mb-2">No Project Selected</h2>
-          <p className="text-muted-foreground">
+        <div className="text-center max-w-md">
+          <div className="w-16 h-16 rounded-2xl bg-primary/10 flex items-center justify-center mx-auto mb-6">
+            <Sparkles className="w-8 h-8 text-primary" />
+          </div>
+          <h2 className="text-xl font-semibold mb-3 text-foreground">No Project Selected</h2>
+          <p className="text-muted-foreground leading-relaxed">
             Open or create a project to start working with the AI agent.
           </p>
         </div>
@@ -472,12 +442,12 @@ export function AgentView() {
 
   return (
     <div
-      className="flex-1 flex overflow-hidden content-bg"
+      className="flex-1 flex overflow-hidden bg-background"
       data-testid="agent-view"
     >
       {/* Session Manager Sidebar */}
       {showSessionManager && currentProject && (
-        <div className="w-80 border-r flex-shrink-0">
+        <div className="w-80 border-r border-border flex-shrink-0 bg-card/50">
           <SessionManager
             currentSessionId={currentSessionId}
             onSelectSession={handleSelectSession}
@@ -491,13 +461,13 @@ export function AgentView() {
       {/* Chat Area */}
       <div className="flex-1 flex flex-col overflow-hidden">
         {/* Header */}
-        <div className="flex items-center justify-between p-4 border-b border-border bg-glass backdrop-blur-md">
-          <div className="flex items-center gap-3">
+        <div className="flex items-center justify-between px-6 py-4 border-b border-border bg-card/50 backdrop-blur-sm">
+          <div className="flex items-center gap-4">
             <Button
               variant="ghost"
               size="sm"
               onClick={() => setShowSessionManager(!showSessionManager)}
-              className="h-8 w-8 p-0"
+              className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
             >
               {showSessionManager ? (
                 <PanelLeftClose className="w-4 h-4" />
@@ -505,26 +475,28 @@ export function AgentView() {
                 <PanelLeft className="w-4 h-4" />
               )}
             </Button>
-            <Bot className="w-5 h-5 text-primary" />
+            <div className="w-9 h-9 rounded-xl bg-primary/10 flex items-center justify-center">
+              <Bot className="w-5 h-5 text-primary" />
+            </div>
             <div>
-              <h1 className="text-xl font-bold">AI Agent</h1>
+              <h1 className="text-lg font-semibold text-foreground">AI Agent</h1>
               <p className="text-sm text-muted-foreground">
                 {currentProject.name}
-                {currentSessionId && !isConnected && " · Connecting..."}
+                {currentSessionId && !isConnected && " - Connecting..."}
               </p>
             </div>
           </div>
 
           {/* Status indicators & actions */}
-          <div className="flex items-center gap-2">
+          <div className="flex items-center gap-3">
             {currentTool && (
-              <div className="flex items-center gap-1 text-xs text-muted-foreground bg-muted px-2 py-1 rounded">
-                <Wrench className="w-3 h-3" />
-                <span>{currentTool}</span>
+              <div className="flex items-center gap-2 text-xs text-muted-foreground bg-muted/50 px-3 py-1.5 rounded-full border border-border">
+                <Wrench className="w-3 h-3 text-primary" />
+                <span className="font-medium">{currentTool}</span>
               </div>
             )}
             {agentError && (
-              <span className="text-xs text-destructive">{agentError}</span>
+              <span className="text-xs text-destructive font-medium">{agentError}</span>
             )}
             {currentSessionId && messages.length > 0 && (
               <Button
@@ -532,8 +504,9 @@ export function AgentView() {
                 size="sm"
                 onClick={handleClearChat}
                 disabled={isProcessing}
+                className="text-muted-foreground hover:text-foreground"
               >
-                <Trash2 className="w-4 h-4 mr-1" />
+                <Trash2 className="w-4 h-4 mr-2" />
                 Clear
               </Button>
             )}
@@ -543,22 +516,25 @@ export function AgentView() {
         {/* Messages */}
         {!currentSessionId ? (
           <div
-            className="flex-1 flex items-center justify-center"
+            className="flex-1 flex items-center justify-center bg-background"
             data-testid="no-session-placeholder"
           >
-            <div className="text-center">
-              <Bot className="w-12 h-12 text-muted-foreground mx-auto mb-4 opacity-50" />
-              <h2 className="text-lg font-semibold mb-2">
+            <div className="text-center max-w-md">
+              <div className="w-16 h-16 rounded-2xl bg-muted/50 flex items-center justify-center mx-auto mb-6">
+                <Bot className="w-8 h-8 text-muted-foreground" />
+              </div>
+              <h2 className="text-lg font-semibold mb-3 text-foreground">
                 No Session Selected
               </h2>
-              <p className="text-sm text-muted-foreground mb-4">
-                Create or select a session to start chatting
+              <p className="text-sm text-muted-foreground mb-6 leading-relaxed">
+                Create or select a session to start chatting with the AI agent
               </p>
               <Button
                 onClick={() => setShowSessionManager(true)}
                 variant="outline"
+                className="gap-2"
               >
-                <PanelLeft className="w-4 h-4 mr-2" />
+                <PanelLeft className="w-4 h-4" />
                 {showSessionManager ? "View" : "Show"} Sessions
               </Button>
             </div>
@@ -566,7 +542,7 @@ export function AgentView() {
         ) : (
           <div
             ref={messagesContainerRef}
-            className="flex-1 overflow-y-auto p-4 space-y-4"
+            className="flex-1 overflow-y-auto px-6 py-6 space-y-6 scroll-smooth"
             data-testid="message-list"
             onScroll={handleScroll}
           >
@@ -574,95 +550,156 @@ export function AgentView() {
               <div
                 key={message.id}
                 className={cn(
-                  "flex gap-3",
-                  message.role === "user" && "flex-row-reverse"
+                  "flex gap-4 max-w-4xl",
+                  message.role === "user" ? "flex-row-reverse ml-auto" : ""
                 )}
               >
+                {/* Avatar */}
                 <div
                   className={cn(
-                    "w-8 h-8 rounded-full flex items-center justify-center shrink-0",
-                    message.role === "assistant" ? "bg-primary/10" : "bg-muted"
+                    "w-9 h-9 rounded-xl flex items-center justify-center shrink-0 shadow-sm",
+                    message.role === "assistant"
+                      ? "bg-primary/10 ring-1 ring-primary/20"
+                      : "bg-muted ring-1 ring-border"
                   )}
                 >
                   {message.role === "assistant" ? (
                     <Bot className="w-4 h-4 text-primary" />
                   ) : (
-                    <User className="w-4 h-4" />
+                    <User className="w-4 h-4 text-muted-foreground" />
                   )}
                 </div>
-                <Card
+
+                {/* Message Bubble */}
+                <div
                   className={cn(
-                    "max-w-[80%] py-0",
+                    "flex-1 max-w-[85%] rounded-2xl px-4 py-3 shadow-sm",
                     message.role === "user"
-                      ? "bg-transparent border border-primary text-foreground"
-                      : "border-l-4 border-primary bg-card"
+                      ? "bg-primary text-primary-foreground"
+                      : "bg-card border border-border"
                   )}
                 >
-                  <CardContent className="px-3 py-2">
-                    {message.role === "assistant" ? (
-                      <Markdown className="text-sm text-primary prose-headings:text-primary prose-strong:text-primary prose-code:text-primary">
-                        {message.content}
-                      </Markdown>
-                    ) : (
-                      <p className="text-sm whitespace-pre-wrap">
-                        {message.content}
-                      </p>
-                    )}
-                    <p
-                      className={cn(
-                        "text-xs mt-1",
-                        message.role === "user"
-                          ? "text-muted-foreground"
-                          : "text-primary/70"
-                      )}
-                    >
-                      {new Date(message.timestamp).toLocaleTimeString()}
+                  {message.role === "assistant" ? (
+                    <Markdown className="text-sm text-foreground prose-p:leading-relaxed prose-headings:text-foreground prose-strong:text-foreground prose-code:text-primary prose-code:bg-muted prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded">
+                      {message.content}
+                    </Markdown>
+                  ) : (
+                    <p className="text-sm whitespace-pre-wrap leading-relaxed">
+                      {message.content}
                     </p>
-                  </CardContent>
-                </Card>
+                  )}
+                  <p
+                    className={cn(
+                      "text-[11px] mt-2 font-medium",
+                      message.role === "user"
+                        ? "text-primary-foreground/70"
+                        : "text-muted-foreground"
+                    )}
+                  >
+                    {new Date(message.timestamp).toLocaleTimeString([], {
+                      hour: "2-digit",
+                      minute: "2-digit",
+                    })}
+                  </p>
+                </div>
               </div>
             ))}
 
+            {/* Thinking Indicator */}
             {isProcessing && (
-              <div className="flex gap-3">
-                <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center">
+              <div className="flex gap-4 max-w-4xl">
+                <div className="w-9 h-9 rounded-xl bg-primary/10 ring-1 ring-primary/20 flex items-center justify-center shrink-0 shadow-sm">
                   <Bot className="w-4 h-4 text-primary" />
                 </div>
-                <Card className="border-l-4 border-primary bg-card py-0">
-                  <CardContent className="p-3">
-                    <div className="flex items-center gap-2">
-                      <Loader2 className="w-4 h-4 animate-spin text-primary" />
-                      <span className="text-sm text-primary">
-                        Thinking...
-                      </span>
+                <div className="bg-card border border-border rounded-2xl px-4 py-3 shadow-sm">
+                  <div className="flex items-center gap-3">
+                    <div className="flex items-center gap-1">
+                      <span className="w-2 h-2 rounded-full bg-primary animate-pulse" style={{ animationDelay: "0ms" }} />
+                      <span className="w-2 h-2 rounded-full bg-primary animate-pulse" style={{ animationDelay: "150ms" }} />
+                      <span className="w-2 h-2 rounded-full bg-primary animate-pulse" style={{ animationDelay: "300ms" }} />
                     </div>
-                  </CardContent>
-                </Card>
+                    <span className="text-sm text-muted-foreground">
+                      Thinking...
+                    </span>
+                  </div>
+                </div>
               </div>
             )}
           </div>
         )}
 
-        {/* Input */}
+        {/* Input Area */}
         {currentSessionId && (
-          <div className="border-t border-border p-4 space-y-3 bg-background">
+          <div className="border-t border-border p-4 bg-card/50 backdrop-blur-sm">
             {/* Image Drop Zone (when visible) */}
             {showImageDropZone && (
               <ImageDropZone
                 onImagesSelected={handleImagesSelected}
                 images={selectedImages}
                 maxFiles={5}
-                className="mb-3"
+                className="mb-4"
                 disabled={isProcessing || !isConnected}
               />
             )}
 
-            {/* Text Input and Controls - with drag and drop support */}
+            {/* Selected Images Preview */}
+            {selectedImages.length > 0 && (
+              <div className="mb-4 space-y-2">
+                <div className="flex items-center justify-between">
+                  <p className="text-xs font-medium text-foreground">
+                    {selectedImages.length} image
+                    {selectedImages.length > 1 ? "s" : ""} attached
+                  </p>
+                  <button
+                    onClick={() => setSelectedImages([])}
+                    className="text-xs text-muted-foreground hover:text-foreground transition-colors"
+                    disabled={isProcessing}
+                  >
+                    Clear all
+                  </button>
+                </div>
+                <div className="flex flex-wrap gap-2">
+                  {selectedImages.map((image) => (
+                    <div
+                      key={image.id}
+                      className="group relative rounded-lg border border-border bg-muted/30 p-2 flex items-center gap-2 hover:border-primary/30 transition-colors"
+                    >
+                      {/* Image thumbnail */}
+                      <div className="w-8 h-8 rounded-md overflow-hidden bg-muted flex-shrink-0">
+                        <img
+                          src={image.data}
+                          alt={image.filename}
+                          className="w-full h-full object-cover"
+                        />
+                      </div>
+                      {/* Image info */}
+                      <div className="min-w-0 flex-1">
+                        <p className="text-xs font-medium text-foreground truncate max-w-24">
+                          {image.filename}
+                        </p>
+                        <p className="text-[10px] text-muted-foreground">
+                          {formatFileSize(image.size)}
+                        </p>
+                      </div>
+                      {/* Remove button */}
+                      <button
+                        onClick={() => removeImage(image.id)}
+                        className="opacity-0 group-hover:opacity-100 transition-opacity p-1 rounded-full hover:bg-destructive/10 text-muted-foreground hover:text-destructive"
+                        disabled={isProcessing}
+                      >
+                        <X className="h-3 w-3" />
+                      </button>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Text Input and Controls */}
             <div
               className={cn(
-                "flex gap-2 transition-all duration-200 rounded-lg",
-                isDragOver &&
-                  "bg-primary/10 ring-2 ring-primary ring-offset-2 ring-offset-background"
+                "flex gap-2 transition-all duration-200 rounded-xl p-1",
+                isDragOver && "bg-primary/5 ring-2 ring-primary/30"
               )}
               onDragEnter={handleDragEnter}
               onDragLeave={handleDragLeave}
@@ -684,21 +721,19 @@ export function AgentView() {
                   disabled={isProcessing || !isConnected}
                   data-testid="agent-input"
                   className={cn(
-                    "bg-input border-border",
-                    selectedImages.length > 0 &&
-                      "border-primary/50 bg-primary/5",
-                    isDragOver &&
-                      "border-primary bg-primary/10"
+                    "h-11 bg-background border-border rounded-xl pl-4 pr-20 text-sm transition-all",
+                    "focus:ring-2 focus:ring-primary/20 focus:border-primary/50",
+                    selectedImages.length > 0 && "border-primary/30",
+                    isDragOver && "border-primary bg-primary/5"
                   )}
                 />
                 {selectedImages.length > 0 && !isDragOver && (
-                  <div className="absolute right-2 top-1/2 transform -translate-y-1/2 text-xs text-primary-foreground bg-primary px-2 py-1 rounded">
-                    {selectedImages.length} image
-                    {selectedImages.length > 1 ? "s" : ""}
+                  <div className="absolute right-3 top-1/2 -translate-y-1/2 text-xs bg-primary text-primary-foreground px-2 py-0.5 rounded-full font-medium">
+                    {selectedImages.length} image{selectedImages.length > 1 ? "s" : ""}
                   </div>
                 )}
                 {isDragOver && (
-                  <div className="absolute right-2 top-1/2 transform -translate-y-1/2 text-xs text-primary-foreground bg-primary px-2 py-1 rounded flex items-center gap-1">
+                  <div className="absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-1.5 text-xs text-primary font-medium">
                     <Paperclip className="w-3 h-3" />
                     Drop here
                   </div>
@@ -708,13 +743,13 @@ export function AgentView() {
               {/* Image Attachment Button */}
               <Button
                 variant="outline"
-                size="default"
+                size="icon"
                 onClick={toggleImageDropZone}
                 disabled={isProcessing || !isConnected}
                 className={cn(
-                  showImageDropZone &&
-                    "bg-primary/20 text-primary border-primary",
-                  selectedImages.length > 0 && "border-primary"
+                  "h-11 w-11 rounded-xl border-border",
+                  showImageDropZone && "bg-primary/10 text-primary border-primary/30",
+                  selectedImages.length > 0 && "border-primary/30 text-primary"
                 )}
                 title="Attach images"
               >
@@ -729,64 +764,17 @@ export function AgentView() {
                   isProcessing ||
                   !isConnected
                 }
+                className="h-11 px-4 rounded-xl"
                 data-testid="send-message"
               >
                 <Send className="w-4 h-4" />
               </Button>
             </div>
 
-            {/* Selected Images Preview */}
-            {selectedImages.length > 0 && (
-              <div className="space-y-2">
-                <div className="flex items-center justify-between">
-                  <p className="text-xs font-medium text-foreground">
-                    {selectedImages.length} image
-                    {selectedImages.length > 1 ? "s" : ""} attached
-                  </p>
-                  <button
-                    onClick={() => setSelectedImages([])}
-                    className="text-xs text-muted-foreground hover:text-foreground"
-                    disabled={isProcessing}
-                  >
-                    Clear all
-                  </button>
-                </div>
-                <div className="flex flex-wrap gap-2">
-                  {selectedImages.map((image) => (
-                    <div
-                      key={image.id}
-                      className="relative group rounded-md border border-muted bg-muted/50 p-2 flex items-center space-x-2"
-                    >
-                      {/* Image thumbnail */}
-                      <div className="w-8 h-8 rounded overflow-hidden bg-muted flex-shrink-0">
-                        <img
-                          src={image.data}
-                          alt={image.filename}
-                          className="w-full h-full object-cover"
-                        />
-                      </div>
-                      {/* Image info */}
-                      <div className="min-w-0 flex-1">
-                        <p className="text-xs font-medium text-foreground truncate">
-                          {image.filename}
-                        </p>
-                        <p className="text-xs text-muted-foreground">
-                          {formatFileSize(image.size)}
-                        </p>
-                      </div>
-                      {/* Remove button */}
-                      <button
-                        onClick={() => removeImage(image.id)}
-                        className="opacity-0 group-hover:opacity-100 transition-opacity p-1 rounded-full hover:bg-destructive hover:text-destructive-foreground text-muted-foreground"
-                        disabled={isProcessing}
-                      >
-                        <X className="h-3 w-3" />
-                      </button>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            )}
+            {/* Keyboard hint */}
+            <p className="text-[11px] text-muted-foreground mt-2 text-center">
+              Press <kbd className="px-1.5 py-0.5 bg-muted rounded text-[10px] font-medium">Enter</kbd> to send
+            </p>
           </div>
         )}
       </div>

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

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

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

@@ -393,6 +393,7 @@ export function ContextView() {
         className="flex-1 flex overflow-hidden"
         onDrop={handleDrop}
         onDragOver={handleDragOver}
+        data-testid="context-drop-zone"
       >
         {/* Left Panel - File List */}
         <div className="w-64 border-r border-border flex flex-col overflow-hidden">

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

@@ -18,6 +18,8 @@ import {
 import { cn } from "@/lib/utils";
 import { getElectronAPI } from "@/lib/electron";
 import { Markdown } from "@/components/ui/markdown";
+import { useFileBrowser } from "@/contexts/file-browser-context";
+import { toast } from "sonner";
 
 interface InterviewMessage {
   id: string;
@@ -65,6 +67,7 @@ const INTERVIEW_QUESTIONS = [
 export function InterviewView() {
   const { setCurrentView, addProject, setCurrentProject, setAppSpec } =
     useAppStore();
+  const { openFileBrowser } = useFileBrowser();
   const [input, setInput] = useState("");
   const [messages, setMessages] = useState<InterviewMessage[]>([]);
   const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
@@ -245,6 +248,7 @@ export function InterviewView() {
       .toLowerCase()
       .replace(/[^a-z0-9-]/g, "");
 
+    // Note: Must follow XML format as defined in apps/server/src/lib/app-spec-format.ts
     return `<project_specification>
   <project_name>${projectName || "my-project"}</project_name>
 
@@ -286,11 +290,14 @@ export function InterviewView() {
   };
 
   const handleSelectDirectory = async () => {
-    const api = getElectronAPI();
-    const result = await api.openDirectory();
+    const selectedPath = await openFileBrowser({
+      title: "Select Base Directory",
+      description:
+        "Choose the parent directory where your new project will be created",
+    });
 
-    if (!result.canceled && result.filePaths[0]) {
-      setProjectPath(result.filePaths[0]);
+    if (selectedPath) {
+      setProjectPath(selectedPath);
     }
   };
 
@@ -301,10 +308,24 @@ export function InterviewView() {
 
     try {
       const api = getElectronAPI();
-      const fullProjectPath = `${projectPath}/${projectName}`;
+      // Use platform-specific path separator
+      const pathSep =
+        typeof window !== "undefined" && (window as any).electronAPI
+          ? navigator.platform.indexOf("Win") !== -1
+            ? "\\"
+            : "/"
+          : "/";
+      const fullProjectPath = `${projectPath}${pathSep}${projectName}`;
 
       // Create project directory
-      await api.mkdir(fullProjectPath);
+      const mkdirResult = await api.mkdir(fullProjectPath);
+      if (!mkdirResult.success) {
+        toast.error("Failed to create project directory", {
+          description: mkdirResult.error || "Unknown error occurred",
+        });
+        setIsGenerating(false);
+        return;
+      }
 
       // Write app_spec.txt with generated content
       await api.writeFile(

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

@@ -8,19 +8,25 @@ import type { ReactNode } from "react";
 interface KanbanColumnProps {
   id: string;
   title: string;
-  color: string;
+  colorClass: string;
   count: number;
   children: ReactNode;
   headerAction?: ReactNode;
+  opacity?: number;
+  showBorder?: boolean;
+  hideScrollbar?: boolean;
 }
 
 export const KanbanColumn = memo(function KanbanColumn({
   id,
   title,
-  color,
+  colorClass,
   count,
   children,
   headerAction,
+  opacity = 100,
+  showBorder = true,
+  hideScrollbar = false,
 }: KanbanColumnProps) {
   const { setNodeRef, isOver } = useDroppable({ id });
 
@@ -28,25 +34,53 @@ export const KanbanColumn = memo(function KanbanColumn({
     <div
       ref={setNodeRef}
       className={cn(
-        "flex flex-col h-full rounded-lg bg-card backdrop-blur-sm border border-border transition-colors w-72",
-        isOver && "bg-accent"
+        "relative flex flex-col h-full rounded-xl transition-all duration-200 w-72",
+        showBorder && "border border-border/60",
+        isOver && "ring-2 ring-primary/30 ring-offset-1 ring-offset-background"
       )}
       data-testid={`kanban-column-${id}`}
     >
+      {/* Background layer with opacity */}
+      <div
+        className={cn(
+          "absolute inset-0 rounded-xl backdrop-blur-sm transition-colors duration-200",
+          isOver ? "bg-accent/80" : "bg-card/80"
+        )}
+        style={{ opacity: opacity / 100 }}
+      />
+
       {/* Column Header */}
-      <div className="flex items-center gap-2 p-3 border-b border-border">
-        <div className={cn("w-3 h-3 rounded-full", color)} />
-        <h3 className="font-medium text-sm flex-1">{title}</h3>
+      <div
+        className={cn(
+          "relative z-10 flex items-center gap-3 px-3 py-2.5",
+          showBorder && "border-b border-border/40"
+        )}
+      >
+        <div className={cn("w-2.5 h-2.5 rounded-full shrink-0", colorClass)} />
+        <h3 className="font-semibold text-sm text-foreground/90 flex-1 tracking-tight">{title}</h3>
         {headerAction}
-        <span className="text-xs text-muted-foreground bg-background px-2 py-0.5 rounded-full">
+        <span className="text-xs font-medium text-muted-foreground/80 bg-muted/50 px-2 py-0.5 rounded-md tabular-nums">
           {count}
         </span>
       </div>
 
       {/* Column Content */}
-      <div className="flex-1 overflow-y-auto p-2 space-y-2">
+      <div
+        className={cn(
+          "relative z-10 flex-1 overflow-y-auto p-2 space-y-2.5",
+          hideScrollbar &&
+            "[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]",
+          // Smooth scrolling
+          "scroll-smooth"
+        )}
+      >
         {children}
       </div>
+
+      {/* Drop zone indicator when dragging over */}
+      {isOver && (
+        <div className="absolute inset-0 rounded-xl bg-primary/5 pointer-events-none z-5 border-2 border-dashed border-primary/20" />
+      )}
     </div>
   );
 });

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

@@ -1,19 +1,10 @@
 "use client";
 
-import { useState, useMemo, useCallback, useEffect } from "react";
+import { useState, useMemo, useCallback } from "react";
 import {
   useAppStore,
   AIProfile,
-  AgentModel,
-  ThinkingLevel,
-  ModelProvider,
 } from "@/store/app-store";
-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 { Textarea } from "@/components/ui/textarea";
-import { cn, modelSupportsThinking } from "@/lib/utils";
 import {
   useKeyboardShortcuts,
   useKeyboardShortcutsConfig,
@@ -23,26 +14,12 @@ import {
   Dialog,
   DialogContent,
   DialogDescription,
-  DialogFooter,
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import {
-  UserCircle,
-  Plus,
-  Pencil,
-  Trash2,
-  Brain,
-  Zap,
-  Scale,
-  Cpu,
-  Rocket,
-  Sparkles,
-  GripVertical,
-  Lock,
-  Check,
-} from "lucide-react";
+import { Sparkles } from "lucide-react";
 import { toast } from "sonner";
+import { DeleteConfirmDialog } from "@/components/ui/delete-confirm-dialog";
 import {
   DndContext,
   DragEndEvent,
@@ -53,406 +30,13 @@ import {
 } from "@dnd-kit/core";
 import {
   SortableContext,
-  useSortable,
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
-
-// Icon mapping for profiles
-const PROFILE_ICONS: Record<
-  string,
-  React.ComponentType<{ className?: string }>
-> = {
-  Brain,
-  Zap,
-  Scale,
-  Cpu,
-  Rocket,
-  Sparkles,
-};
-
-// Available icons for selection
-const ICON_OPTIONS = [
-  { name: "Brain", icon: Brain },
-  { name: "Zap", icon: Zap },
-  { name: "Scale", icon: Scale },
-  { name: "Cpu", icon: Cpu },
-  { name: "Rocket", icon: Rocket },
-  { name: "Sparkles", icon: Sparkles },
-];
-
-// Model options for the form
-const CLAUDE_MODELS: { id: AgentModel; label: string }[] = [
-  { id: "haiku", label: "Claude Haiku" },
-  { id: "sonnet", label: "Claude Sonnet" },
-  { id: "opus", label: "Claude Opus" },
-];
-
-const CODEX_MODELS: { id: AgentModel; label: string }[] = [
-  { id: "gpt-5.1-codex-max", label: "GPT-5.1 Codex Max" },
-  { id: "gpt-5.1-codex", label: "GPT-5.1 Codex" },
-  { id: "gpt-5.1-codex-mini", label: "GPT-5.1 Codex Mini" },
-  { id: "gpt-5.1", label: "GPT-5.1" },
-];
-
-const THINKING_LEVELS: { id: ThinkingLevel; label: string }[] = [
-  { id: "none", label: "None" },
-  { id: "low", label: "Low" },
-  { id: "medium", label: "Medium" },
-  { id: "high", label: "High" },
-  { id: "ultrathink", label: "Ultrathink" },
-];
-
-// Helper to determine provider from model
-function getProviderFromModel(model: AgentModel): ModelProvider {
-  if (model.startsWith("gpt")) {
-    return "codex";
-  }
-  return "claude";
-}
-
-// Sortable Profile Card Component
-function SortableProfileCard({
-  profile,
-  onEdit,
-  onDelete,
-}: {
-  profile: AIProfile;
-  onEdit: () => void;
-  onDelete: () => void;
-}) {
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-    isDragging,
-  } = useSortable({ id: profile.id });
-
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-    opacity: isDragging ? 0.5 : 1,
-  };
-
-  const IconComponent = profile.icon ? PROFILE_ICONS[profile.icon] : Brain;
-  const isCodex = profile.provider === "codex";
-
-  return (
-    <div
-      ref={setNodeRef}
-      style={style}
-      className={cn(
-        "group relative flex items-start gap-4 p-4 rounded-xl border bg-card transition-all",
-        isDragging && "shadow-lg",
-        profile.isBuiltIn
-          ? "border-border/50"
-          : "border-border hover:border-primary/50 hover:shadow-sm"
-      )}
-      data-testid={`profile-card-${profile.id}`}
-    >
-      {/* Drag Handle */}
-      <button
-        {...attributes}
-        {...listeners}
-        className="p-1 rounded hover:bg-accent cursor-grab active:cursor-grabbing flex-shrink-0 mt-1"
-        data-testid={`profile-drag-handle-${profile.id}`}
-        onClick={(e) => e.stopPropagation()}
-      >
-        <GripVertical className="h-4 w-4 text-muted-foreground" />
-      </button>
-
-      {/* Icon */}
-      <div
-        className={cn(
-          "flex-shrink-0 w-10 h-10 rounded-lg flex items-center justify-center",
-          isCodex ? "bg-emerald-500/10" : "bg-primary/10"
-        )}
-      >
-        {IconComponent && (
-          <IconComponent
-            className={cn(
-              "w-5 h-5",
-              isCodex ? "text-emerald-500" : "text-primary"
-            )}
-          />
-        )}
-      </div>
-
-      {/* Content */}
-      <div className="flex-1 min-w-0">
-        <div className="flex items-center gap-2">
-          <h3 className="font-semibold text-foreground">{profile.name}</h3>
-          {profile.isBuiltIn && (
-            <span className="flex items-center gap-1 text-[10px] px-1.5 py-0.5 rounded-full bg-muted text-muted-foreground">
-              <Lock className="w-2.5 h-2.5" />
-              Built-in
-            </span>
-          )}
-        </div>
-        <p className="text-sm text-muted-foreground mt-0.5 line-clamp-2">
-          {profile.description}
-        </p>
-        <div className="flex items-center gap-2 mt-2 flex-wrap">
-          <span
-            className={cn(
-              "text-xs px-2 py-0.5 rounded-full border",
-              isCodex
-                ? "border-emerald-500/30 text-emerald-600 dark:text-emerald-400 bg-emerald-500/10"
-                : "border-primary/30 text-primary bg-primary/10"
-            )}
-          >
-            {profile.model}
-          </span>
-          {profile.thinkingLevel !== "none" && (
-            <span className="text-xs px-2 py-0.5 rounded-full border border-amber-500/30 text-amber-600 dark:text-amber-400 bg-amber-500/10">
-              {profile.thinkingLevel}
-            </span>
-          )}
-        </div>
-      </div>
-
-      {/* Actions */}
-      {!profile.isBuiltIn && (
-        <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={onEdit}
-            className="h-8 w-8 p-0"
-            data-testid={`edit-profile-${profile.id}`}
-          >
-            <Pencil className="w-4 h-4" />
-          </Button>
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={onDelete}
-            className="h-8 w-8 p-0 text-destructive hover:text-destructive"
-            data-testid={`delete-profile-${profile.id}`}
-          >
-            <Trash2 className="w-4 h-4" />
-          </Button>
-        </div>
-      )}
-    </div>
-  );
-}
-
-// Profile Form Component
-function ProfileForm({
-  profile,
-  onSave,
-  onCancel,
-  isEditing,
-  hotkeyActive,
-}: {
-  profile: Partial<AIProfile>;
-  onSave: (profile: Omit<AIProfile, "id">) => void;
-  onCancel: () => void;
-  isEditing: boolean;
-  hotkeyActive: boolean;
-}) {
-  const [formData, setFormData] = useState({
-    name: profile.name || "",
-    description: profile.description || "",
-    model: profile.model || ("opus" as AgentModel),
-    thinkingLevel: profile.thinkingLevel || ("none" as ThinkingLevel),
-    icon: profile.icon || "Brain",
-  });
-
-  const provider = getProviderFromModel(formData.model);
-  const supportsThinking = modelSupportsThinking(formData.model);
-
-  const handleModelChange = (model: AgentModel) => {
-    const newProvider = getProviderFromModel(model);
-    setFormData({
-      ...formData,
-      model,
-      // Reset thinking level when switching to Codex (doesn't support thinking)
-      thinkingLevel: newProvider === "codex" ? "none" : formData.thinkingLevel,
-    });
-  };
-
-  const handleSubmit = () => {
-    if (!formData.name.trim()) {
-      toast.error("Please enter a profile name");
-      return;
-    }
-
-    onSave({
-      name: formData.name.trim(),
-      description: formData.description.trim(),
-      model: formData.model,
-      thinkingLevel: supportsThinking ? formData.thinkingLevel : "none",
-      provider,
-      isBuiltIn: false,
-      icon: formData.icon,
-    });
-  };
-
-  return (
-    <div className="space-y-4">
-      {/* Name */}
-      <div className="space-y-2">
-        <Label htmlFor="profile-name">Profile Name</Label>
-        <Input
-          id="profile-name"
-          value={formData.name}
-          onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-          placeholder="e.g., Heavy Task, Quick Fix"
-          data-testid="profile-name-input"
-        />
-      </div>
-
-      {/* Description */}
-      <div className="space-y-2">
-        <Label htmlFor="profile-description">Description</Label>
-        <Textarea
-          id="profile-description"
-          value={formData.description}
-          onChange={(e) =>
-            setFormData({ ...formData, description: e.target.value })
-          }
-          placeholder="Describe when to use this profile..."
-          rows={2}
-          data-testid="profile-description-input"
-        />
-      </div>
-
-      {/* Icon Selection */}
-      <div className="space-y-2">
-        <Label>Icon</Label>
-        <div className="flex gap-2 flex-wrap">
-          {ICON_OPTIONS.map(({ name, icon: Icon }) => (
-            <button
-              key={name}
-              type="button"
-              onClick={() => setFormData({ ...formData, icon: name })}
-              className={cn(
-                "w-10 h-10 rounded-lg flex items-center justify-center border transition-colors",
-                formData.icon === name
-                  ? "bg-primary text-primary-foreground border-primary"
-                  : "bg-background hover:bg-accent border-input"
-              )}
-              data-testid={`icon-select-${name}`}
-            >
-              <Icon className="w-5 h-5" />
-            </button>
-          ))}
-        </div>
-      </div>
-
-      {/* Model Selection - Claude */}
-      <div className="space-y-2">
-        <Label className="flex items-center gap-2">
-          <Brain className="w-4 h-4 text-primary" />
-          Claude Models
-        </Label>
-        <div className="flex gap-2 flex-wrap">
-          {CLAUDE_MODELS.map(({ id, label }) => (
-            <button
-              key={id}
-              type="button"
-              onClick={() => handleModelChange(id)}
-              className={cn(
-                "flex-1 min-w-[100px] px-3 py-2 rounded-md border text-sm font-medium transition-colors",
-                formData.model === id
-                  ? "bg-primary text-primary-foreground border-primary"
-                  : "bg-background hover:bg-accent border-input"
-              )}
-              data-testid={`model-select-${id}`}
-            >
-              {label.replace("Claude ", "")}
-            </button>
-          ))}
-        </div>
-      </div>
-
-      {/* Model Selection - Codex */}
-      <div className="space-y-2">
-        <Label className="flex items-center gap-2">
-          <Zap className="w-4 h-4 text-emerald-500" />
-          Codex Models
-        </Label>
-        <div className="flex gap-2 flex-wrap">
-          {CODEX_MODELS.map(({ id, label }) => (
-            <button
-              key={id}
-              type="button"
-              onClick={() => handleModelChange(id)}
-              className={cn(
-                "flex-1 min-w-[100px] px-3 py-2 rounded-md border text-sm font-medium transition-colors",
-                formData.model === id
-                  ? "bg-emerald-600 text-white border-emerald-500"
-                  : "bg-background hover:bg-accent border-input"
-              )}
-              data-testid={`model-select-${id}`}
-            >
-              {label.replace("GPT-5.1 ", "").replace("Codex ", "")}
-            </button>
-          ))}
-        </div>
-      </div>
-
-      {/* Thinking Level - Only for Claude models */}
-      {supportsThinking && (
-        <div className="space-y-2">
-          <Label className="flex items-center gap-2">
-            <Brain className="w-4 h-4 text-amber-500" />
-            Thinking Level
-          </Label>
-          <div className="flex gap-2 flex-wrap">
-            {THINKING_LEVELS.map(({ id, label }) => (
-              <button
-                key={id}
-                type="button"
-                onClick={() => {
-                  setFormData({ ...formData, thinkingLevel: id });
-                  if (id === "ultrathink") {
-                    toast.warning("Ultrathink uses extensive reasoning", {
-                      description:
-                        "Best for complex architecture, migrations, or deep debugging (~$0.48/task).",
-                      duration: 4000,
-                    });
-                  }
-                }}
-                className={cn(
-                  "flex-1 min-w-[70px] px-3 py-2 rounded-md border text-sm font-medium transition-colors",
-                  formData.thinkingLevel === id
-                    ? "bg-amber-500 text-white border-amber-400"
-                    : "bg-background hover:bg-accent border-input"
-                )}
-                data-testid={`thinking-select-${id}`}
-              >
-                {label}
-              </button>
-            ))}
-          </div>
-          <p className="text-xs text-muted-foreground">
-            Higher levels give more time to reason through complex problems.
-          </p>
-        </div>
-      )}
-
-      {/* Actions */}
-      <DialogFooter className="pt-4">
-        <Button variant="ghost" onClick={onCancel}>
-          Cancel
-        </Button>
-        <HotkeyButton
-          onClick={handleSubmit}
-          hotkey={{ key: "Enter", cmdCtrl: true }}
-          hotkeyActive={hotkeyActive}
-          data-testid="save-profile-button"
-        >
-          {isEditing ? "Save Changes" : "Create Profile"}
-        </HotkeyButton>
-      </DialogFooter>
-    </div>
-  );
-}
+import {
+  SortableProfileCard,
+  ProfileForm,
+  ProfilesHeader,
+} from "./profiles-view/components";
 
 export function ProfilesView() {
   const {
@@ -461,11 +45,13 @@ export function ProfilesView() {
     updateAIProfile,
     removeAIProfile,
     reorderAIProfiles,
+    resetAIProfiles,
   } = useAppStore();
   const shortcuts = useKeyboardShortcutsConfig();
 
   const [showAddDialog, setShowAddDialog] = useState(false);
   const [editingProfile, setEditingProfile] = useState<AIProfile | null>(null);
+  const [profileToDelete, setProfileToDelete] = useState<AIProfile | null>(null);
 
   // Sensors for drag-and-drop
   const sensors = useSensors(
@@ -520,12 +106,20 @@ export function ProfilesView() {
     }
   };
 
-  const handleDeleteProfile = (profile: AIProfile) => {
-    if (profile.isBuiltIn) return;
+  const confirmDeleteProfile = () => {
+    if (!profileToDelete) return;
 
-    removeAIProfile(profile.id);
+    removeAIProfile(profileToDelete.id);
     toast.success("Profile deleted", {
-      description: `Deleted "${profile.name}" profile`,
+      description: `Deleted "${profileToDelete.name}" profile`,
+    });
+    setProfileToDelete(null);
+  };
+
+  const handleResetProfiles = () => {
+    resetAIProfiles();
+    toast.success("Profiles refreshed", {
+      description: "Default profiles have been updated to the latest version",
     });
   };
 
@@ -552,34 +146,11 @@ export function ProfilesView() {
       data-testid="profiles-view"
     >
       {/* Header Section */}
-      <div className="shrink-0 border-b border-border bg-glass backdrop-blur-md">
-        <div className="px-8 py-6">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-3">
-              <div className="w-10 h-10 rounded-xl bg-linear-to-br from-brand-500 to-brand-600 shadow-lg shadow-brand-500/20 flex items-center justify-center">
-                <UserCircle className="w-5 h-5 text-primary-foreground" />
-              </div>
-              <div>
-                <h1 className="text-2xl font-bold text-foreground">
-                  AI Profiles
-                </h1>
-                <p className="text-sm text-muted-foreground">
-                  Create and manage model configuration presets
-                </p>
-              </div>
-            </div>
-            <HotkeyButton
-              onClick={() => setShowAddDialog(true)}
-              hotkey={shortcuts.addProfile}
-              hotkeyActive={false}
-              data-testid="add-profile-button"
-            >
-              <Plus className="w-4 h-4 mr-2" />
-              New Profile
-            </HotkeyButton>
-          </div>
-        </div>
-      </div>
+      <ProfilesHeader
+        onResetProfiles={handleResetProfiles}
+        onAddProfile={() => setShowAddDialog(true)}
+        addProfileHotkey={shortcuts.addProfile}
+      />
 
       {/* Content */}
       <div className="flex-1 overflow-y-auto p-8">
@@ -595,19 +166,14 @@ export function ProfilesView() {
               </span>
             </div>
             {customProfiles.length === 0 ? (
-              <div className="rounded-xl border border-dashed border-border p-8 text-center">
-                <Sparkles className="w-10 h-10 text-muted-foreground mx-auto mb-3 opacity-50" />
-                <p className="text-muted-foreground">
+              <div
+                className="group rounded-xl border border-dashed border-border p-8 text-center transition-all duration-300 hover:border-primary hover:bg-primary/5 cursor-pointer"
+                onClick={() => setShowAddDialog(true)}
+              >
+                <Sparkles className="w-10 h-10 text-muted-foreground mx-auto mb-3 opacity-50 transition-all duration-300 group-hover:text-primary group-hover:opacity-100 group-hover:scale-110 group-hover:rotate-12" />
+                <p className="text-muted-foreground transition-colors duration-300 group-hover:text-foreground">
                   No custom profiles yet. Create one to get started!
                 </p>
-                <Button
-                  variant="outline"
-                  className="mt-4"
-                  onClick={() => setShowAddDialog(true)}
-                >
-                  <Plus className="w-4 h-4 mr-2" />
-                  Create Profile
-                </Button>
               </div>
             ) : (
               <DndContext
@@ -625,7 +191,7 @@ export function ProfilesView() {
                         key={profile.id}
                         profile={profile}
                         onEdit={() => setEditingProfile(profile)}
-                        onDelete={() => handleDeleteProfile(profile)}
+                        onDelete={() => setProfileToDelete(profile)}
                       />
                     ))}
                   </div>
@@ -675,8 +241,8 @@ export function ProfilesView() {
 
       {/* Add Profile Dialog */}
       <Dialog open={showAddDialog} onOpenChange={setShowAddDialog}>
-        <DialogContent data-testid="add-profile-dialog">
-          <DialogHeader>
+        <DialogContent data-testid="add-profile-dialog" className="flex flex-col max-h-[calc(100vh-4rem)]">
+          <DialogHeader className="shrink-0">
             <DialogTitle>Create New Profile</DialogTitle>
             <DialogDescription>
               Define a reusable model configuration preset.
@@ -697,8 +263,8 @@ export function ProfilesView() {
         open={!!editingProfile}
         onOpenChange={() => setEditingProfile(null)}
       >
-        <DialogContent data-testid="edit-profile-dialog">
-          <DialogHeader>
+        <DialogContent data-testid="edit-profile-dialog" className="flex flex-col max-h-[calc(100vh-4rem)]">
+          <DialogHeader className="shrink-0">
             <DialogTitle>Edit Profile</DialogTitle>
             <DialogDescription>Modify your profile settings.</DialogDescription>
           </DialogHeader>
@@ -713,6 +279,22 @@ export function ProfilesView() {
           )}
         </DialogContent>
       </Dialog>
+
+      {/* Delete Confirmation Dialog */}
+      <DeleteConfirmDialog
+        open={!!profileToDelete}
+        onOpenChange={(open) => !open && setProfileToDelete(null)}
+        onConfirm={confirmDeleteProfile}
+        title="Delete Profile"
+        description={
+          profileToDelete
+            ? `Are you sure you want to delete "${profileToDelete.name}"? This action cannot be undone.`
+            : ""
+        }
+        confirmText="Delete Profile"
+        testId="delete-profile-confirm-dialog"
+        confirmTestId="confirm-delete-profile-button"
+      />
     </div>
   );
 }

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

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

apps/app/src/components/views/profiles-view/components/profile-form.tsx

@@ -0,0 +1,204 @@
+"use client";
+
+import { useState } from "react";
+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 { Textarea } from "@/components/ui/textarea";
+import { cn, modelSupportsThinking } from "@/lib/utils";
+import { DialogFooter } from "@/components/ui/dialog";
+import { Brain } from "lucide-react";
+import { toast } from "sonner";
+import type { AIProfile, AgentModel, ThinkingLevel } from "@/store/app-store";
+import { CLAUDE_MODELS, THINKING_LEVELS, ICON_OPTIONS } from "../constants";
+import { getProviderFromModel } from "../utils";
+
+interface ProfileFormProps {
+  profile: Partial<AIProfile>;
+  onSave: (profile: Omit<AIProfile, "id">) => void;
+  onCancel: () => void;
+  isEditing: boolean;
+  hotkeyActive: boolean;
+}
+
+export function ProfileForm({
+  profile,
+  onSave,
+  onCancel,
+  isEditing,
+  hotkeyActive,
+}: ProfileFormProps) {
+  const [formData, setFormData] = useState({
+    name: profile.name || "",
+    description: profile.description || "",
+    model: profile.model || ("opus" as AgentModel),
+    thinkingLevel: profile.thinkingLevel || ("none" as ThinkingLevel),
+    icon: profile.icon || "Brain",
+  });
+
+  const provider = getProviderFromModel(formData.model);
+  const supportsThinking = modelSupportsThinking(formData.model);
+
+  const handleModelChange = (model: AgentModel) => {
+    setFormData({
+      ...formData,
+      model,
+    });
+  };
+
+  const handleSubmit = () => {
+    if (!formData.name.trim()) {
+      toast.error("Please enter a profile name");
+      return;
+    }
+
+    onSave({
+      name: formData.name.trim(),
+      description: formData.description.trim(),
+      model: formData.model,
+      thinkingLevel: supportsThinking ? formData.thinkingLevel : "none",
+      provider,
+      isBuiltIn: false,
+      icon: formData.icon,
+    });
+  };
+
+  return (
+    <>
+      <div className="overflow-y-auto flex-1 min-h-0 space-y-4 pr-3 -mr-3 pl-1">
+        {/* Name */}
+        <div className="mt-2 space-y-2">
+          <Label htmlFor="profile-name">Profile Name</Label>
+          <Input
+            id="profile-name"
+            value={formData.name}
+            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            placeholder="e.g., Heavy Task, Quick Fix"
+            data-testid="profile-name-input"
+          />
+        </div>
+
+        {/* Description */}
+        <div className="space-y-2">
+          <Label htmlFor="profile-description">Description</Label>
+          <Textarea
+            id="profile-description"
+            value={formData.description}
+            onChange={(e) =>
+              setFormData({ ...formData, description: e.target.value })
+            }
+            placeholder="Describe when to use this profile..."
+            rows={2}
+            data-testid="profile-description-input"
+          />
+        </div>
+
+        {/* Icon Selection */}
+        <div className="space-y-2">
+          <Label>Icon</Label>
+          <div className="flex gap-2 flex-wrap">
+            {ICON_OPTIONS.map(({ name, icon: Icon }) => (
+              <button
+                key={name}
+                type="button"
+                onClick={() => setFormData({ ...formData, icon: name })}
+                className={cn(
+                  "w-10 h-10 rounded-lg flex items-center justify-center border transition-colors",
+                  formData.icon === name
+                    ? "bg-primary text-primary-foreground border-primary"
+                    : "bg-background hover:bg-accent border-border"
+                )}
+                data-testid={`icon-select-${name}`}
+              >
+                <Icon className="w-5 h-5" />
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Model Selection */}
+        <div className="space-y-2">
+          <Label className="flex items-center gap-2">
+            <Brain className="w-4 h-4 text-primary" />
+            Model
+          </Label>
+          <div className="flex gap-2 flex-wrap">
+            {CLAUDE_MODELS.map(({ id, label }) => (
+              <button
+                key={id}
+                type="button"
+                onClick={() => handleModelChange(id)}
+                className={cn(
+                  "flex-1 min-w-[100px] px-3 py-2 rounded-md border text-sm font-medium transition-colors",
+                  formData.model === id
+                    ? "bg-primary text-primary-foreground border-primary"
+                    : "bg-background hover:bg-accent border-border"
+                )}
+                data-testid={`model-select-${id}`}
+              >
+                {label.replace("Claude ", "")}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Thinking Level */}
+        {supportsThinking && (
+          <div className="space-y-2">
+            <Label className="flex items-center gap-2">
+              <Brain className="w-4 h-4 text-amber-500" />
+              Thinking Level
+            </Label>
+            <div className="flex gap-2 flex-wrap">
+              {THINKING_LEVELS.map(({ id, label }) => (
+                <button
+                  key={id}
+                  type="button"
+                  onClick={() => {
+                    setFormData({ ...formData, thinkingLevel: id });
+                    if (id === "ultrathink") {
+                      toast.warning("Ultrathink uses extensive reasoning", {
+                        description:
+                          "Best for complex architecture, migrations, or deep debugging (~$0.48/task).",
+                        duration: 4000,
+                      });
+                    }
+                  }}
+                  className={cn(
+                    "flex-1 min-w-[70px] px-3 py-2 rounded-md border text-sm font-medium transition-colors",
+                    formData.thinkingLevel === id
+                      ? "bg-amber-500 text-white border-amber-400"
+                      : "bg-background hover:bg-accent border-border"
+                  )}
+                  data-testid={`thinking-select-${id}`}
+                >
+                  {label}
+                </button>
+              ))}
+            </div>
+            <p className="text-xs text-muted-foreground">
+              Higher levels give more time to reason through complex problems.
+            </p>
+          </div>
+        )}
+      </div>
+
+      {/* Actions */}
+      <DialogFooter className="pt-4 border-t border-border mt-4 shrink-0">
+        <Button variant="ghost" onClick={onCancel}>
+          Cancel
+        </Button>
+        <HotkeyButton
+          onClick={handleSubmit}
+          hotkey={{ key: "Enter", cmdCtrl: true }}
+          hotkeyActive={hotkeyActive}
+          data-testid="save-profile-button"
+        >
+          {isEditing ? "Save Changes" : "Create Profile"}
+        </HotkeyButton>
+      </DialogFooter>
+    </>
+  );
+}
+

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

@@ -0,0 +1,58 @@
+import { Button } from "@/components/ui/button";
+import { HotkeyButton } from "@/components/ui/hotkey-button";
+import { UserCircle, Plus, RefreshCw } from "lucide-react";
+
+interface ProfilesHeaderProps {
+  onResetProfiles: () => void;
+  onAddProfile: () => void;
+  addProfileHotkey: string;
+}
+
+export function ProfilesHeader({
+  onResetProfiles,
+  onAddProfile,
+  addProfileHotkey,
+}: ProfilesHeaderProps) {
+  return (
+    <div className="shrink-0 border-b border-border bg-glass backdrop-blur-md">
+      <div className="px-8 py-6">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="w-10 h-10 rounded-xl bg-linear-to-br from-brand-500 to-brand-600 shadow-lg shadow-brand-500/20 flex items-center justify-center">
+              <UserCircle className="w-5 h-5 text-primary-foreground" />
+            </div>
+            <div>
+              <h1 className="text-2xl font-bold text-foreground">
+                AI Profiles
+              </h1>
+              <p className="text-sm text-muted-foreground">
+                Create and manage model configuration presets
+              </p>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              onClick={onResetProfiles}
+              data-testid="refresh-profiles-button"
+              className="gap-2"
+            >
+              <RefreshCw className="w-4 h-4" />
+              Refresh Defaults
+            </Button>
+            <HotkeyButton
+              onClick={onAddProfile}
+              hotkey={addProfileHotkey}
+              hotkeyActive={false}
+              data-testid="add-profile-button"
+            >
+              <Plus className="w-4 h-4 mr-2" />
+              New Profile
+            </HotkeyButton>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+

apps/app/src/components/views/profiles-view/components/sortable-profile-card.tsx

@@ -0,0 +1,127 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { GripVertical, Lock, Pencil, Trash2, Brain } from "lucide-react";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import type { AIProfile } from "@/store/app-store";
+import { PROFILE_ICONS } from "../constants";
+
+interface SortableProfileCardProps {
+  profile: AIProfile;
+  onEdit: () => void;
+  onDelete: () => void;
+}
+
+export function SortableProfileCard({
+  profile,
+  onEdit,
+  onDelete,
+}: SortableProfileCardProps) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: profile.id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  const IconComponent = profile.icon ? PROFILE_ICONS[profile.icon] : Brain;
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={cn(
+        "group relative flex items-start gap-4 p-4 rounded-xl border bg-card transition-all",
+        isDragging && "shadow-lg",
+        profile.isBuiltIn
+          ? "border-border/50"
+          : "border-border hover:border-primary/50 hover:shadow-sm"
+      )}
+      data-testid={`profile-card-${profile.id}`}
+    >
+      {/* Drag Handle */}
+      <button
+        {...attributes}
+        {...listeners}
+        className="p-1 rounded hover:bg-accent cursor-grab active:cursor-grabbing flex-shrink-0 mt-1"
+        data-testid={`profile-drag-handle-${profile.id}`}
+        onClick={(e) => e.stopPropagation()}
+        aria-label={`Reorder ${profile.name} profile`}
+      >
+        <GripVertical className="h-4 w-4 text-muted-foreground" />
+      </button>
+
+      {/* Icon */}
+      <div
+        className="flex-shrink-0 w-10 h-10 rounded-lg flex items-center justify-center bg-primary/10"
+      >
+        {IconComponent && (
+          <IconComponent className="w-5 h-5 text-primary" />
+        )}
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2">
+          <h3 className="font-semibold text-foreground">{profile.name}</h3>
+          {profile.isBuiltIn && (
+            <span className="flex items-center gap-1 text-[10px] px-1.5 py-0.5 rounded-full bg-muted text-muted-foreground">
+              <Lock className="w-2.5 h-2.5" />
+              Built-in
+            </span>
+          )}
+        </div>
+        <p className="text-sm text-muted-foreground mt-0.5 line-clamp-2">
+          {profile.description}
+        </p>
+        <div className="flex items-center gap-2 mt-2 flex-wrap">
+          <span
+            className="text-xs px-2 py-0.5 rounded-full border border-primary/30 text-primary bg-primary/10"
+          >
+            {profile.model}
+          </span>
+          {profile.thinkingLevel !== "none" && (
+            <span className="text-xs px-2 py-0.5 rounded-full border border-amber-500/30 text-amber-600 dark:text-amber-400 bg-amber-500/10">
+              {profile.thinkingLevel}
+            </span>
+          )}
+        </div>
+      </div>
+
+      {/* Actions */}
+      {!profile.isBuiltIn && (
+        <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={onEdit}
+            className="h-8 w-8 p-0"
+            data-testid={`edit-profile-${profile.id}`}
+            aria-label={`Edit ${profile.name} profile`}
+          >
+            <Pencil className="w-4 h-4" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={onDelete}
+            className="h-8 w-8 p-0 text-destructive hover:text-destructive"
+            data-testid={`delete-profile-${profile.id}`}
+            aria-label={`Delete ${profile.name} profile`}
+          >
+            <Trash2 className="w-4 h-4" />
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}
+

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

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

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

@@ -0,0 +1,7 @@
+import type { AgentModel, ModelProvider } from "@/store/app-store";
+
+// Helper to determine provider from model
+export function getProviderFromModel(model: AgentModel): ModelProvider {
+  return "claude";
+}
+

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

@@ -7,7 +7,6 @@ import {
   Key,
   Palette,
   Terminal,
-  Atom,
   FlaskConical,
   Trash2,
   Settings2,
@@ -24,7 +23,6 @@ import { DeleteProjectDialog } from "./settings-view/components/delete-project-d
 import { SettingsNavigation } from "./settings-view/components/settings-navigation";
 import { ApiKeysSection } from "./settings-view/api-keys/api-keys-section";
 import { ClaudeCliStatus } from "./settings-view/cli-status/claude-cli-status";
-import { CodexCliStatus } from "./settings-view/cli-status/codex-cli-status";
 import { AppearanceSection } from "./settings-view/appearance/appearance-section";
 import { KeyboardShortcutsSection } from "./settings-view/keyboard-shortcuts/keyboard-shortcuts-section";
 import { FeatureDefaultsSection } from "./settings-view/feature-defaults/feature-defaults-section";
@@ -39,7 +37,6 @@ import type { Project as ElectronProject } from "@/lib/electron";
 const NAV_ITEMS = [
   { id: "api-keys", label: "API Keys", icon: Key },
   { id: "claude", label: "Claude", icon: Terminal },
-  { id: "codex", label: "Codex", icon: Atom },
   { id: "appearance", label: "Appearance", icon: Palette },
   { id: "audio", label: "Audio", icon: Volume2 },
   { id: "keyboard", label: "Keyboard Shortcuts", icon: Settings2 },
@@ -96,11 +93,8 @@ export function SettingsView() {
   // Use CLI status hook
   const {
     claudeCliStatus,
-    codexCliStatus,
     isCheckingClaudeCli,
-    isCheckingCodexCli,
     handleRefreshClaudeCli,
-    handleRefreshCodexCli,
   } = useCliStatus();
 
   // Use scroll tracking hook
@@ -147,15 +141,6 @@ export function SettingsView() {
               />
             )}
 
-            {/* Codex CLI Status Section */}
-            {codexCliStatus && (
-              <CodexCliStatus
-                status={codexCliStatus}
-                isChecking={isCheckingCodexCli}
-                onRefresh={handleRefreshCodexCli}
-              />
-            )}
-
             {/* Appearance Section */}
             <AppearanceSection
               effectiveTheme={effectiveTheme}
@@ -172,47 +157,47 @@ export function SettingsView() {
             {/* Audio Section */}
             <div
               id="audio"
-              className="rounded-xl border border-border bg-card backdrop-blur-md overflow-hidden scroll-mt-6"
+              className="rounded-2xl border border-border/50 bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl shadow-sm shadow-black/5 overflow-hidden scroll-mt-6"
             >
-              <div className="p-6 border-b border-border">
-                <div className="flex items-center gap-2 mb-2">
-                  <Volume2 className="w-5 h-5 text-brand-500" />
-                  <h2 className="text-lg font-semibold text-foreground">
+              <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+                <div className="flex items-center gap-3 mb-2">
+                  <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
+                    <Volume2 className="w-5 h-5 text-brand-500" />
+                  </div>
+                  <h2 className="text-lg font-semibold text-foreground tracking-tight">
                     Audio
                   </h2>
                 </div>
-                <p className="text-sm text-muted-foreground">
+                <p className="text-sm text-muted-foreground/80 ml-12">
                   Configure audio and notification settings.
                 </p>
               </div>
               <div className="p-6 space-y-4">
                 {/* Mute Done Sound Setting */}
-                <div className="space-y-3">
-                  <div className="flex items-start space-x-3">
-                    <Checkbox
-                      id="mute-done-sound"
-                      checked={muteDoneSound}
-                      onCheckedChange={(checked) =>
-                        setMuteDoneSound(checked === true)
-                      }
-                      className="mt-0.5"
-                      data-testid="mute-done-sound-checkbox"
-                    />
-                    <div className="space-y-1">
-                      <Label
-                        htmlFor="mute-done-sound"
-                        className="text-foreground cursor-pointer font-medium flex items-center gap-2"
-                      >
-                        <VolumeX className="w-4 h-4 text-brand-500" />
-                        Mute notification sound when agents complete
-                      </Label>
-                      <p className="text-xs text-muted-foreground">
-                        When enabled, disables the &quot;ding&quot; sound that
-                        plays when an agent completes a feature. The feature
-                        will still move to the completed column, but without
-                        audio notification.
-                      </p>
-                    </div>
+                <div className="group flex items-start space-x-3 p-3 rounded-xl hover:bg-accent/30 transition-colors duration-200 -mx-3">
+                  <Checkbox
+                    id="mute-done-sound"
+                    checked={muteDoneSound}
+                    onCheckedChange={(checked) =>
+                      setMuteDoneSound(checked === true)
+                    }
+                    className="mt-1"
+                    data-testid="mute-done-sound-checkbox"
+                  />
+                  <div className="space-y-1.5">
+                    <Label
+                      htmlFor="mute-done-sound"
+                      className="text-foreground cursor-pointer font-medium flex items-center gap-2"
+                    >
+                      <VolumeX className="w-4 h-4 text-brand-500" />
+                      Mute notification sound when agents complete
+                    </Label>
+                    <p className="text-xs text-muted-foreground/80 leading-relaxed">
+                      When enabled, disables the &quot;ding&quot; sound that
+                      plays when an agent completes a feature. The feature
+                      will still move to the completed column, but without
+                      audio notification.
+                    </p>
                   </div>
                 </div>
               </div>

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

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

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

@@ -4,29 +4,24 @@ import {
   AlertCircle,
   Info,
   Terminal,
-  Atom,
   Sparkles,
 } from "lucide-react";
-import type { ClaudeAuthStatus, CodexAuthStatus } from "@/store/setup-store";
+import type { ClaudeAuthStatus } from "@/store/setup-store";
 
 interface AuthenticationStatusDisplayProps {
   claudeAuthStatus: ClaudeAuthStatus | null;
-  codexAuthStatus: CodexAuthStatus | null;
   apiKeyStatus: {
     hasAnthropicKey: boolean;
-    hasOpenAIKey: boolean;
     hasGoogleKey: boolean;
   } | null;
   apiKeys: {
     anthropic: string;
     google: string;
-    openai: string;
   };
 }
 
 export function AuthenticationStatusDisplay({
   claudeAuthStatus,
-  codexAuthStatus,
   apiKeyStatus,
   apiKeys,
 }: AuthenticationStatusDisplayProps) {
@@ -93,56 +88,6 @@ export function AuthenticationStatusDisplay({
           </div>
         </div>
 
-        {/* Codex/OpenAI Authentication Status */}
-        <div className="p-3 rounded-lg bg-card border border-border">
-          <div className="flex items-center gap-2 mb-1.5">
-            <Atom className="w-4 h-4 text-green-500" />
-            <span className="text-sm font-medium text-foreground">
-              Codex (OpenAI)
-            </span>
-          </div>
-          <div className="space-y-1.5 text-xs min-h-12">
-            {codexAuthStatus?.authenticated ? (
-              <>
-                <div className="flex items-center gap-2">
-                  <CheckCircle2 className="w-3 h-3 text-green-500 shrink-0" />
-                  <span className="text-green-400 font-medium">Authenticated</span>
-                </div>
-                <div className="flex items-center gap-2 text-muted-foreground">
-                  <Info className="w-3 h-3 shrink-0" />
-                  <span>
-                    {codexAuthStatus.method === "subscription"
-                      ? "Using Codex subscription (Plus/Team)"
-                      : codexAuthStatus.method === "cli_verified" ||
-                        codexAuthStatus.method === "cli_tokens"
-                      ? "Using CLI login (OpenAI account)"
-                      : codexAuthStatus.method === "api_key"
-                      ? "Using stored API key"
-                      : codexAuthStatus.method === "env"
-                      ? "Using OPENAI_API_KEY"
-                      : `Using ${codexAuthStatus.method || "unknown"} authentication`}
-                  </span>
-                </div>
-              </>
-            ) : apiKeyStatus?.hasOpenAIKey ? (
-              <div className="flex items-center gap-2 text-blue-400">
-                <Info className="w-3 h-3 shrink-0" />
-                <span>Using environment variable (OPENAI_API_KEY)</span>
-              </div>
-            ) : apiKeys.openai ? (
-              <div className="flex items-center gap-2 text-blue-400">
-                <Info className="w-3 h-3 shrink-0" />
-                <span>Using manual API key from settings</span>
-              </div>
-            ) : (
-              <div className="flex items-center gap-1.5 text-yellow-500 py-0.5">
-                <AlertCircle className="w-3 h-3 shrink-0" />
-                <span className="text-xs">Not configured</span>
-              </div>
-            )}
-          </div>
-        </div>
-
         {/* Google/Gemini Authentication Status */}
         <div className="p-3 rounded-lg bg-card border border-border">
           <div className="flex items-center gap-2 mb-1.5">

apps/app/src/components/views/settings-view/api-keys/hooks/use-api-key-management.ts

@@ -10,7 +10,6 @@ interface TestResult {
 
 interface ApiKeyStatus {
   hasAnthropicKey: boolean;
-  hasOpenAIKey: boolean;
   hasGoogleKey: boolean;
 }
 
@@ -24,12 +23,10 @@ export function useApiKeyManagement() {
   // API key values
   const [anthropicKey, setAnthropicKey] = useState(apiKeys.anthropic);
   const [googleKey, setGoogleKey] = useState(apiKeys.google);
-  const [openaiKey, setOpenaiKey] = useState(apiKeys.openai);
 
   // Visibility toggles
   const [showAnthropicKey, setShowAnthropicKey] = useState(false);
   const [showGoogleKey, setShowGoogleKey] = useState(false);
-  const [showOpenaiKey, setShowOpenaiKey] = useState(false);
 
   // Test connection states
   const [testingConnection, setTestingConnection] = useState(false);
@@ -38,10 +35,6 @@ export function useApiKeyManagement() {
   const [geminiTestResult, setGeminiTestResult] = useState<TestResult | null>(
     null
   );
-  const [testingOpenaiConnection, setTestingOpenaiConnection] = useState(false);
-  const [openaiTestResult, setOpenaiTestResult] = useState<TestResult | null>(
-    null
-  );
 
   // API key status from environment
   const [apiKeyStatus, setApiKeyStatus] = useState<ApiKeyStatus | null>(null);
@@ -53,7 +46,6 @@ export function useApiKeyManagement() {
   useEffect(() => {
     setAnthropicKey(apiKeys.anthropic);
     setGoogleKey(apiKeys.google);
-    setOpenaiKey(apiKeys.openai);
   }, [apiKeys]);
 
   // Check API key status from environment on mount
@@ -66,7 +58,6 @@ export function useApiKeyManagement() {
           if (status.success) {
             setApiKeyStatus({
               hasAnthropicKey: status.hasAnthropicKey,
-              hasOpenAIKey: status.hasOpenAIKey,
               hasGoogleKey: status.hasGoogleKey,
             });
           }
@@ -152,68 +143,11 @@ export function useApiKeyManagement() {
     }
   };
 
-  // Test OpenAI connection
-  const handleTestOpenaiConnection = async () => {
-    setTestingOpenaiConnection(true);
-    setOpenaiTestResult(null);
-
-    try {
-      const api = getElectronAPI();
-      if (api?.testOpenAIConnection) {
-        const result = await api.testOpenAIConnection(openaiKey);
-        if (result.success) {
-          setOpenaiTestResult({
-            success: true,
-            message:
-              result.message || "Connection successful! OpenAI API responded.",
-          });
-        } else {
-          setOpenaiTestResult({
-            success: false,
-            message: result.error || "Failed to connect to OpenAI API.",
-          });
-        }
-      } else {
-        // Fallback to web API test
-        const response = await fetch("/api/openai/test", {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify({ apiKey: openaiKey }),
-        });
-
-        const data = await response.json();
-
-        if (response.ok && data.success) {
-          setOpenaiTestResult({
-            success: true,
-            message:
-              data.message || "Connection successful! OpenAI API responded.",
-          });
-        } else {
-          setOpenaiTestResult({
-            success: false,
-            message: data.error || "Failed to connect to OpenAI API.",
-          });
-        }
-      }
-    } catch {
-      setOpenaiTestResult({
-        success: false,
-        message: "Network error. Please check your connection.",
-      });
-    } finally {
-      setTestingOpenaiConnection(false);
-    }
-  };
-
   // Save API keys
   const handleSave = () => {
     setApiKeys({
       anthropic: anthropicKey,
       google: googleKey,
-      openai: openaiKey,
     });
     setSaved(true);
     setTimeout(() => setSaved(false), 2000);
@@ -240,15 +174,6 @@ export function useApiKeyManagement() {
       onTest: handleTestGeminiConnection,
       result: geminiTestResult,
     },
-    openai: {
-      value: openaiKey,
-      setValue: setOpenaiKey,
-      show: showOpenaiKey,
-      setShow: setShowOpenaiKey,
-      testing: testingOpenaiConnection,
-      onTest: handleTestOpenaiConnection,
-      result: openaiTestResult,
-    },
   };
 
   return {

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

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

apps/app/src/components/views/settings-view/cli-status/claude-cli-status.tsx

@@ -5,6 +5,7 @@ import {
   AlertCircle,
   RefreshCw,
 } from "lucide-react";
+import { cn } from "@/lib/utils";
 import type { CliStatus } from "../shared/types";
 
 interface CliStatusProps {
@@ -23,13 +24,20 @@ export function ClaudeCliStatus({
   return (
     <div
       id="claude"
-      className="rounded-xl border border-border bg-card backdrop-blur-md overflow-hidden scroll-mt-6"
+      className={cn(
+        "rounded-2xl overflow-hidden scroll-mt-6",
+        "border border-border/50",
+        "bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl",
+        "shadow-sm shadow-black/5"
+      )}
     >
-      <div className="p-6 border-b border-border">
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
         <div className="flex items-center justify-between mb-2">
-          <div className="flex items-center gap-2">
-            <Terminal className="w-5 h-5 text-brand-500" />
-            <h2 className="text-lg font-semibold text-foreground">
+          <div className="flex items-center gap-3">
+            <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
+              <Terminal className="w-5 h-5 text-brand-500" />
+            </div>
+            <h2 className="text-lg font-semibold text-foreground tracking-tight">
               Claude Code CLI
             </h2>
           </div>
@@ -40,13 +48,18 @@ export function ClaudeCliStatus({
             disabled={isChecking}
             data-testid="refresh-claude-cli"
             title="Refresh Claude CLI detection"
+            className={cn(
+              "h-9 w-9 rounded-lg",
+              "hover:bg-accent/50 hover:scale-105",
+              "transition-all duration-200"
+            )}
           >
             <RefreshCw
-              className={`w-4 h-4 ${isChecking ? "animate-spin" : ""}`}
+              className={cn("w-4 h-4", isChecking && "animate-spin")}
             />
           </Button>
         </div>
-        <p className="text-sm text-muted-foreground">
+        <p className="text-sm text-muted-foreground/80 ml-12">
           Claude Code CLI provides better performance for long-running tasks,
           especially with ultrathink.
         </p>
@@ -54,13 +67,15 @@ export function ClaudeCliStatus({
       <div className="p-6 space-y-4">
         {status.success && status.status === "installed" ? (
           <div className="space-y-3">
-            <div className="flex items-center gap-2 p-3 rounded-lg bg-green-500/10 border border-green-500/20">
-              <CheckCircle2 className="w-5 h-5 text-green-500 shrink-0" />
-              <div className="flex-1">
-                <p className="text-sm font-medium text-green-400">
+            <div className="flex items-center gap-3 p-4 rounded-xl bg-emerald-500/10 border border-emerald-500/20">
+              <div className="w-10 h-10 rounded-xl bg-emerald-500/15 flex items-center justify-center border border-emerald-500/20 shrink-0">
+                <CheckCircle2 className="w-5 h-5 text-emerald-500" />
+              </div>
+              <div className="flex-1 min-w-0">
+                <p className="text-sm font-medium text-emerald-400">
                   Claude Code CLI Installed
                 </p>
-                <div className="text-xs text-green-400/80 mt-1 space-y-1">
+                <div className="text-xs text-emerald-400/70 mt-1.5 space-y-0.5">
                   {status.method && (
                     <p>
                       Method: <span className="font-mono">{status.method}</span>
@@ -68,71 +83,65 @@ export function ClaudeCliStatus({
                   )}
                   {status.version && (
                     <p>
-                      Version:{" "}
-                      <span className="font-mono">{status.version}</span>
+                      Version: <span className="font-mono">{status.version}</span>
                     </p>
                   )}
                   {status.path && (
                     <p className="truncate" title={status.path}>
-                      Path:{" "}
-                      <span className="font-mono text-[10px]">
-                        {status.path}
-                      </span>
+                      Path: <span className="font-mono text-[10px]">{status.path}</span>
                     </p>
                   )}
                 </div>
               </div>
             </div>
             {status.recommendation && (
-              <p className="text-xs text-muted-foreground">
+              <p className="text-xs text-muted-foreground/70 ml-1">
                 {status.recommendation}
               </p>
             )}
           </div>
         ) : (
-          <div className="space-y-3">
-            <div className="flex items-start gap-3 p-3 rounded-lg bg-yellow-500/10 border border-yellow-500/20">
-              <AlertCircle className="w-5 h-5 text-yellow-500 mt-0.5 shrink-0" />
+          <div className="space-y-4">
+            <div className="flex items-start gap-3 p-4 rounded-xl bg-amber-500/10 border border-amber-500/20">
+              <div className="w-10 h-10 rounded-xl bg-amber-500/15 flex items-center justify-center border border-amber-500/20 shrink-0 mt-0.5">
+                <AlertCircle className="w-5 h-5 text-amber-500" />
+              </div>
               <div className="flex-1">
-                <p className="text-sm font-medium text-yellow-400">
+                <p className="text-sm font-medium text-amber-400">
                   Claude Code CLI Not Detected
                 </p>
-                <p className="text-xs text-yellow-400/80 mt-1">
+                <p className="text-xs text-amber-400/70 mt-1">
                   {status.recommendation ||
                     "Consider installing Claude Code CLI for optimal performance with ultrathink."}
                 </p>
               </div>
             </div>
             {status.installCommands && (
-              <div className="space-y-2">
-                <p className="text-xs font-medium text-foreground-secondary">
+              <div className="space-y-3">
+                <p className="text-xs font-medium text-foreground/80">
                   Installation Commands:
                 </p>
-                <div className="space-y-1">
+                <div className="space-y-2">
                   {status.installCommands.npm && (
-                    <div className="p-2 rounded bg-background border border-border-glass">
-                      <p className="text-xs text-muted-foreground mb-1">npm:</p>
-                      <code className="text-xs text-foreground-secondary font-mono break-all">
+                    <div className="p-3 rounded-xl bg-accent/30 border border-border/50">
+                      <p className="text-[10px] text-muted-foreground mb-1.5 font-medium uppercase tracking-wider">npm</p>
+                      <code className="text-xs text-foreground/80 font-mono break-all">
                         {status.installCommands.npm}
                       </code>
                     </div>
                   )}
                   {status.installCommands.macos && (
-                    <div className="p-2 rounded bg-background border border-border-glass">
-                      <p className="text-xs text-muted-foreground mb-1">
-                        macOS/Linux:
-                      </p>
-                      <code className="text-xs text-foreground-secondary font-mono break-all">
+                    <div className="p-3 rounded-xl bg-accent/30 border border-border/50">
+                      <p className="text-[10px] text-muted-foreground mb-1.5 font-medium uppercase tracking-wider">macOS/Linux</p>
+                      <code className="text-xs text-foreground/80 font-mono break-all">
                         {status.installCommands.macos}
                       </code>
                     </div>
                   )}
                   {status.installCommands.windows && (
-                    <div className="p-2 rounded bg-background border border-border-glass">
-                      <p className="text-xs text-muted-foreground mb-1">
-                        Windows (PowerShell):
-                      </p>
-                      <code className="text-xs text-foreground-secondary font-mono break-all">
+                    <div className="p-3 rounded-xl bg-accent/30 border border-border/50">
+                      <p className="text-[10px] text-muted-foreground mb-1.5 font-medium uppercase tracking-wider">Windows (PowerShell)</p>
+                      <code className="text-xs text-foreground/80 font-mono break-all">
                         {status.installCommands.windows}
                       </code>
                     </div>

apps/app/src/components/views/settings-view/cli-status/codex-cli-status.tsx

@@ -1,169 +0,0 @@
-import { Button } from "@/components/ui/button";
-import {
-  Terminal,
-  CheckCircle2,
-  AlertCircle,
-  RefreshCw,
-} from "lucide-react";
-import type { CliStatus } from "../shared/types";
-
-interface CliStatusProps {
-  status: CliStatus | null;
-  isChecking: boolean;
-  onRefresh: () => void;
-}
-
-export function CodexCliStatus({
-  status,
-  isChecking,
-  onRefresh,
-}: CliStatusProps) {
-  if (!status) return null;
-
-  return (
-    <div
-      id="codex"
-      className="rounded-xl border border-border bg-card backdrop-blur-md overflow-hidden scroll-mt-6"
-    >
-      <div className="p-6 border-b border-border">
-        <div className="flex items-center justify-between mb-2">
-          <div className="flex items-center gap-2">
-            <Terminal className="w-5 h-5 text-green-500" />
-            <h2 className="text-lg font-semibold text-foreground">
-              OpenAI Codex CLI
-            </h2>
-          </div>
-          <Button
-            variant="ghost"
-            size="icon"
-            onClick={onRefresh}
-            disabled={isChecking}
-            data-testid="refresh-codex-cli"
-            title="Refresh Codex CLI detection"
-          >
-            <RefreshCw
-              className={`w-4 h-4 ${isChecking ? "animate-spin" : ""}`}
-            />
-          </Button>
-        </div>
-        <p className="text-sm text-muted-foreground">
-          Codex CLI enables GPT-5.1 Codex models for autonomous coding tasks.
-        </p>
-      </div>
-      <div className="p-6 space-y-4">
-        {status.success && status.status === "installed" ? (
-          <div className="space-y-3">
-            <div className="flex items-center gap-2 p-3 rounded-lg bg-green-500/10 border border-green-500/20">
-              <CheckCircle2 className="w-5 h-5 text-green-500 shrink-0" />
-              <div className="flex-1">
-                <p className="text-sm font-medium text-green-400">
-                  Codex CLI Installed
-                </p>
-                <div className="text-xs text-green-400/80 mt-1 space-y-1">
-                  {status.method && (
-                    <p>
-                      Method: <span className="font-mono">{status.method}</span>
-                    </p>
-                  )}
-                  {status.version && (
-                    <p>
-                      Version:{" "}
-                      <span className="font-mono">{status.version}</span>
-                    </p>
-                  )}
-                  {status.path && (
-                    <p className="truncate" title={status.path}>
-                      Path:{" "}
-                      <span className="font-mono text-[10px]">
-                        {status.path}
-                      </span>
-                    </p>
-                  )}
-                </div>
-              </div>
-            </div>
-            {status.recommendation && (
-              <p className="text-xs text-muted-foreground">
-                {status.recommendation}
-              </p>
-            )}
-          </div>
-        ) : status.status === "api_key_only" ? (
-          <div className="space-y-3">
-            <div className="flex items-start gap-3 p-3 rounded-lg bg-blue-500/10 border border-blue-500/20">
-              <AlertCircle className="w-5 h-5 text-blue-500 mt-0.5 shrink-0" />
-              <div className="flex-1">
-                <p className="text-sm font-medium text-blue-400">
-                  API Key Detected - CLI Not Installed
-                </p>
-                <p className="text-xs text-blue-400/80 mt-1">
-                  {status.recommendation ||
-                    "OPENAI_API_KEY found but Codex CLI not installed. Install the CLI for full agentic capabilities."}
-                </p>
-              </div>
-            </div>
-            {status.installCommands && (
-              <div className="space-y-2">
-                <p className="text-xs font-medium text-foreground-secondary">
-                  Installation Commands:
-                </p>
-                <div className="space-y-1">
-                  {status.installCommands.npm && (
-                    <div className="p-2 rounded bg-background border border-border-glass">
-                      <p className="text-xs text-muted-foreground mb-1">npm:</p>
-                      <code className="text-xs text-foreground-secondary font-mono break-all">
-                        {status.installCommands.npm}
-                      </code>
-                    </div>
-                  )}
-                </div>
-              </div>
-            )}
-          </div>
-        ) : (
-          <div className="space-y-3">
-            <div className="flex items-start gap-3 p-3 rounded-lg bg-yellow-500/10 border border-yellow-500/20">
-              <AlertCircle className="w-5 h-5 text-yellow-500 mt-0.5 shrink-0" />
-              <div className="flex-1">
-                <p className="text-sm font-medium text-yellow-400">
-                  Codex CLI Not Detected
-                </p>
-                <p className="text-xs text-yellow-400/80 mt-1">
-                  {status.recommendation ||
-                    "Install OpenAI Codex CLI to use GPT-5.1 Codex models for autonomous coding."}
-                </p>
-              </div>
-            </div>
-            {status.installCommands && (
-              <div className="space-y-2">
-                <p className="text-xs font-medium text-foreground-secondary">
-                  Installation Commands:
-                </p>
-                <div className="space-y-1">
-                  {status.installCommands.npm && (
-                    <div className="p-2 rounded bg-background border border-border-glass">
-                      <p className="text-xs text-muted-foreground mb-1">npm:</p>
-                      <code className="text-xs text-foreground-secondary font-mono break-all">
-                        {status.installCommands.npm}
-                      </code>
-                    </div>
-                  )}
-                  {status.installCommands.macos && (
-                    <div className="p-2 rounded bg-background border border-border-glass">
-                      <p className="text-xs text-muted-foreground mb-1">
-                        macOS (Homebrew):
-                      </p>
-                      <code className="text-xs text-foreground-secondary font-mono break-all">
-                        {status.installCommands.macos}
-                      </code>
-                    </div>
-                  )}
-                </div>
-              </div>
-            )}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

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

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

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

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

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

@@ -2,7 +2,6 @@ import type { LucideIcon } from "lucide-react";
 import {
   Key,
   Terminal,
-  Atom,
   Palette,
   LayoutGrid,
   Settings2,
@@ -20,7 +19,6 @@ export interface NavigationItem {
 export const NAV_ITEMS: NavigationItem[] = [
   { id: "api-keys", label: "API Keys", icon: Key },
   { id: "claude", label: "Claude", icon: Terminal },
-  { id: "codex", label: "Codex", icon: Atom },
   { id: "appearance", label: "Appearance", icon: Palette },
   { id: "kanban", label: "Kanban Display", icon: LayoutGrid },
   { id: "keyboard", label: "Keyboard Shortcuts", icon: Settings2 },

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

@@ -1,5 +1,6 @@
 import { Button } from "@/components/ui/button";
-import { Trash2, Folder } from "lucide-react";
+import { Trash2, Folder, AlertTriangle } from "lucide-react";
+import { cn } from "@/lib/utils";
 import type { Project } from "../shared/types";
 
 interface DangerZoneSectionProps {
@@ -16,28 +17,35 @@ export function DangerZoneSection({
   return (
     <div
       id="danger"
-      className="rounded-xl border border-destructive/30 bg-card backdrop-blur-md overflow-hidden scroll-mt-6"
+      className={cn(
+        "rounded-2xl overflow-hidden scroll-mt-6",
+        "border border-destructive/30",
+        "bg-gradient-to-br from-destructive/5 via-card/70 to-card/80 backdrop-blur-xl",
+        "shadow-sm shadow-destructive/5"
+      )}
     >
-      <div className="p-6 border-b border-destructive/30">
-        <div className="flex items-center gap-2 mb-2">
-          <Trash2 className="w-5 h-5 text-destructive" />
-          <h2 className="text-lg font-semibold text-foreground">Danger Zone</h2>
+      <div className="p-6 border-b border-destructive/20 bg-gradient-to-r from-destructive/5 via-transparent to-transparent">
+        <div className="flex items-center gap-3 mb-2">
+          <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-destructive/20 to-destructive/10 flex items-center justify-center border border-destructive/20">
+            <AlertTriangle className="w-5 h-5 text-destructive" />
+          </div>
+          <h2 className="text-lg font-semibold text-foreground tracking-tight">Danger Zone</h2>
         </div>
-        <p className="text-sm text-muted-foreground">
+        <p className="text-sm text-muted-foreground/80 ml-12">
           Permanently remove this project from Automaker.
         </p>
       </div>
       <div className="p-6">
-        <div className="flex items-center justify-between gap-4">
-          <div className="flex items-center gap-3 min-w-0">
-            <div className="w-10 h-10 rounded-lg bg-sidebar-accent/20 border border-sidebar-border flex items-center justify-center shrink-0">
+        <div className="flex items-center justify-between gap-4 p-4 rounded-xl bg-destructive/5 border border-destructive/10">
+          <div className="flex items-center gap-3.5 min-w-0">
+            <div className="w-11 h-11 rounded-xl bg-gradient-to-br from-brand-500/15 to-brand-600/10 border border-brand-500/20 flex items-center justify-center shrink-0">
               <Folder className="w-5 h-5 text-brand-500" />
             </div>
             <div className="min-w-0">
               <p className="font-medium text-foreground truncate">
                 {project.name}
               </p>
-              <p className="text-xs text-muted-foreground truncate">
+              <p className="text-xs text-muted-foreground/70 truncate mt-0.5">
                 {project.path}
               </p>
             </div>
@@ -46,6 +54,12 @@ export function DangerZoneSection({
             variant="destructive"
             onClick={onDeleteClick}
             data-testid="delete-project-button"
+            className={cn(
+              "shrink-0",
+              "shadow-md shadow-destructive/20 hover:shadow-lg hover:shadow-destructive/25",
+              "transition-all duration-200 ease-out",
+              "hover:scale-[1.02] active:scale-[0.98]"
+            )}
           >
             <Trash2 className="w-4 h-4 mr-2" />
             Delete Project

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

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

apps/app/src/components/views/settings-view/hooks/use-cli-status.ts

@@ -18,25 +18,17 @@ interface CliStatusResult {
   error?: string;
 }
 
-interface CodexCliStatusResult extends CliStatusResult {
-  hasApiKey?: boolean;
-}
-
 /**
- * Custom hook for managing Claude and Codex CLI status
+ * Custom hook for managing Claude CLI status
  * Handles checking CLI installation, authentication, and refresh functionality
  */
 export function useCliStatus() {
-  const { setClaudeAuthStatus, setCodexAuthStatus } = useSetupStore();
+  const { setClaudeAuthStatus } = useSetupStore();
 
   const [claudeCliStatus, setClaudeCliStatus] =
     useState<CliStatusResult | null>(null);
 
-  const [codexCliStatus, setCodexCliStatus] =
-    useState<CodexCliStatusResult | null>(null);
-
   const [isCheckingClaudeCli, setIsCheckingClaudeCli] = useState(false);
-  const [isCheckingCodexCli, setIsCheckingCodexCli] = useState(false);
 
   // Check CLI status on mount
   useEffect(() => {
@@ -53,16 +45,6 @@ export function useCliStatus() {
         }
       }
 
-      // Check Codex CLI
-      if (api?.checkCodexCli) {
-        try {
-          const status = await api.checkCodexCli();
-          setCodexCliStatus(status);
-        } catch (error) {
-          console.error("Failed to check Codex CLI status:", error);
-        }
-      }
-
       // Check Claude auth status (re-fetch on mount to ensure persistence)
       if (api?.setup?.getClaudeStatus) {
         try {
@@ -95,47 +77,10 @@ export function useCliStatus() {
           console.error("Failed to check Claude auth status:", error);
         }
       }
-
-      // Check Codex auth status (re-fetch on mount to ensure persistence)
-      if (api?.setup?.getCodexStatus) {
-        try {
-          const result = await api.setup.getCodexStatus();
-          if (result.success && result.auth) {
-            // Cast to extended type that includes server-added fields
-            const auth = result.auth as typeof result.auth & {
-              hasSubscription?: boolean;
-              cliLoggedIn?: boolean;
-              hasEnvApiKey?: boolean;
-            };
-            // Map server method names to client method types
-            // Server returns: subscription, cli_verified, cli_tokens, api_key, env, none
-            const validMethods = ["subscription", "cli_verified", "cli_tokens", "api_key", "env", "none"] as const;
-            type CodexMethod = typeof validMethods[number];
-            const method: CodexMethod = validMethods.includes(auth.method as CodexMethod)
-              ? (auth.method as CodexMethod)
-              : auth.authenticated ? "api_key" : "none"; // Default authenticated to api_key
-
-            const authStatus = {
-              authenticated: auth.authenticated,
-              method,
-              // Only set apiKeyValid for actual API key methods, not CLI login or subscription
-              apiKeyValid:
-                method === "cli_verified" || method === "cli_tokens" || method === "subscription"
-                  ? undefined
-                  : auth.hasAuthFile || auth.hasEnvKey || auth.hasEnvApiKey,
-              hasSubscription: auth.hasSubscription,
-              cliLoggedIn: auth.cliLoggedIn,
-            };
-            setCodexAuthStatus(authStatus);
-          }
-        } catch (error) {
-          console.error("Failed to check Codex auth status:", error);
-        }
-      }
     };
 
     checkCliStatus();
-  }, [setClaudeAuthStatus, setCodexAuthStatus]);
+  }, [setClaudeAuthStatus]);
 
   // Refresh Claude CLI status
   const handleRefreshClaudeCli = useCallback(async () => {
@@ -153,28 +98,9 @@ export function useCliStatus() {
     }
   }, []);
 
-  // Refresh Codex CLI status
-  const handleRefreshCodexCli = useCallback(async () => {
-    setIsCheckingCodexCli(true);
-    try {
-      const api = getElectronAPI();
-      if (api?.checkCodexCli) {
-        const status = await api.checkCodexCli();
-        setCodexCliStatus(status);
-      }
-    } catch (error) {
-      console.error("Failed to refresh Codex CLI status:", error);
-    } finally {
-      setIsCheckingCodexCli(false);
-    }
-  }, []);
-
   return {
     claudeCliStatus,
-    codexCliStatus,
     isCheckingClaudeCli,
-    isCheckingCodexCli,
     handleRefreshClaudeCli,
-    handleRefreshCodexCli,
   };
 }

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

@@ -1,5 +1,6 @@
 import { Button } from "@/components/ui/button";
 import { Settings2, Keyboard } from "lucide-react";
+import { cn } from "@/lib/utils";
 
 interface KeyboardShortcutsSectionProps {
   onOpenKeyboardMap: () => void;
@@ -11,43 +12,58 @@ export function KeyboardShortcutsSection({
   return (
     <div
       id="keyboard"
-      className="rounded-xl border border-border bg-card backdrop-blur-md overflow-hidden scroll-mt-6"
+      className={cn(
+        "rounded-2xl overflow-hidden scroll-mt-6",
+        "border border-border/50",
+        "bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl",
+        "shadow-sm shadow-black/5"
+      )}
     >
-      <div className="p-6 border-b border-border">
-        <div className="flex items-center gap-2 mb-2">
-          <Settings2 className="w-5 h-5 text-brand-500" />
-          <h2 className="text-lg font-semibold text-foreground">
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+        <div className="flex items-center gap-3 mb-2">
+          <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
+            <Settings2 className="w-5 h-5 text-brand-500" />
+          </div>
+          <h2 className="text-lg font-semibold text-foreground tracking-tight">
             Keyboard Shortcuts
           </h2>
         </div>
-        <p className="text-sm text-muted-foreground">
+        <p className="text-sm text-muted-foreground/80 ml-12">
           Customize keyboard shortcuts for navigation and actions using the
           visual keyboard map.
         </p>
       </div>
       <div className="p-6">
         {/* Centered message directing to keyboard map */}
-        <div className="flex flex-col items-center justify-center py-16 text-center space-y-4">
+        <div className="flex flex-col items-center justify-center py-12 text-center space-y-5">
           <div className="relative">
-            <Keyboard className="w-16 h-16 text-brand-500/30" />
-            <div className="absolute inset-0 bg-brand-500/10 blur-xl rounded-full" />
+            <div className="w-20 h-20 rounded-2xl bg-gradient-to-br from-brand-500/10 to-brand-600/5 flex items-center justify-center border border-brand-500/20">
+              <Keyboard className="w-10 h-10 text-brand-500/60" />
+            </div>
+            <div className="absolute inset-0 bg-brand-500/10 blur-2xl rounded-full -z-10" />
           </div>
           <div className="space-y-2 max-w-md">
             <h3 className="text-lg font-semibold text-foreground">
               Use the Visual Keyboard Map
             </h3>
-            <p className="text-sm text-muted-foreground">
-              Click the &quot;View Keyboard Map&quot; button above to customize
-              your keyboard shortcuts. The visual interface shows all available
-              keys and lets you easily edit shortcuts with single-modifier
-              restrictions.
+            <p className="text-sm text-muted-foreground/80">
+              Click the button below to customize your keyboard shortcuts. The visual
+              interface shows all available keys and lets you easily edit shortcuts.
             </p>
           </div>
           <Button
             variant="default"
             size="lg"
             onClick={onOpenKeyboardMap}
-            className="gap-2 mt-4"
+            className={cn(
+              "gap-2.5 mt-2 h-11 px-6",
+              "bg-gradient-to-r from-brand-500 to-brand-600",
+              "hover:from-brand-600 hover:to-brand-600",
+              "text-white font-medium border-0",
+              "shadow-md shadow-brand-500/20 hover:shadow-lg hover:shadow-brand-500/25",
+              "transition-all duration-200 ease-out",
+              "hover:scale-[1.02] active:scale-[0.98]"
+            )}
           >
             <Keyboard className="w-5 h-5" />
             Open Keyboard Map

apps/app/src/components/views/settings-view/shared/types.ts

@@ -29,7 +29,8 @@ export type Theme =
   | "gruvbox"
   | "catppuccin"
   | "onedark"
-  | "synthwave";
+  | "synthwave"
+  | "red";
 
 export type KanbanDetailLevel = "minimal" | "standard" | "detailed";
 

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

@@ -7,7 +7,6 @@ import {
   WelcomeStep,
   CompleteStep,
   ClaudeSetupStep,
-  CodexSetupStep,
 } from "./setup-view/steps";
 
 // Main Setup View
@@ -17,17 +16,14 @@ export function SetupView() {
     setCurrentStep,
     completeSetup,
     setSkipClaudeSetup,
-    setSkipCodexSetup,
   } = useSetupStore();
   const { setCurrentView } = useAppStore();
 
-  const steps = ["welcome", "claude", "codex", "complete"] as const;
+  const steps = ["welcome", "claude", "complete"] as const;
   type StepName = (typeof steps)[number];
   const getStepName = (): StepName => {
     if (currentStep === "claude_detect" || currentStep === "claude_auth")
       return "claude";
-    if (currentStep === "codex_detect" || currentStep === "codex_auth")
-      return "codex";
     if (currentStep === "welcome") return "welcome";
     return "complete";
   };
@@ -46,10 +42,6 @@ export function SetupView() {
         setCurrentStep("claude_detect");
         break;
       case "claude":
-        console.log("[Setup Flow] Moving to codex_detect step");
-        setCurrentStep("codex_detect");
-        break;
-      case "codex":
         console.log("[Setup Flow] Moving to complete step");
         setCurrentStep("complete");
         break;
@@ -62,21 +54,12 @@ export function SetupView() {
       case "claude":
         setCurrentStep("welcome");
         break;
-      case "codex":
-        setCurrentStep("claude_detect");
-        break;
     }
   };
 
   const handleSkipClaude = () => {
     console.log("[Setup Flow] Skipping Claude setup");
     setSkipClaudeSetup(true);
-    setCurrentStep("codex_detect");
-  };
-
-  const handleSkipCodex = () => {
-    console.log("[Setup Flow] Skipping Codex setup");
-    setSkipCodexSetup(true);
     setCurrentStep("complete");
   };
 
@@ -127,15 +110,6 @@ export function SetupView() {
                 />
               )}
 
-              {(currentStep === "codex_detect" ||
-                currentStep === "codex_auth") && (
-                <CodexSetupStep
-                  onNext={() => handleNext("codex")}
-                  onBack={() => handleBack("codex")}
-                  onSkip={handleSkipCodex}
-                />
-              )}
-
               {currentStep === "complete" && (
                 <CompleteStep onFinish={handleFinish} />
               )}

apps/app/src/components/views/setup-view/hooks/use-cli-installation.ts

@@ -2,7 +2,7 @@ import { useState, useCallback } from "react";
 import { toast } from "sonner";
 
 interface UseCliInstallationOptions {
-  cliType: "claude" | "codex";
+  cliType: "claude";
   installApi: () => Promise<any>;
   onProgressEvent?: (callback: (progress: any) => void) => (() => void) | undefined;
   onSuccess?: () => void;

apps/app/src/components/views/setup-view/hooks/use-cli-status.ts

@@ -1,7 +1,7 @@
 import { useState, useCallback } from "react";
 
 interface UseCliStatusOptions {
-  cliType: "claude" | "codex";
+  cliType: "claude";
   statusApi: () => Promise<any>;
   setCliStatus: (status: any) => void;
   setAuthStatus: (status: any) => void;
@@ -33,65 +33,35 @@ export function useCliStatus({
         setCliStatus(cliStatus);
 
         if (result.auth) {
-          if (cliType === "claude") {
-            // Validate method is one of the expected values, default to "none"
-            const validMethods = [
-              "oauth_token_env",
-              "oauth_token",
-              "api_key",
-              "api_key_env",
-              "credentials_file",
-              "cli_authenticated",
-              "none",
-            ] as const;
-            type AuthMethod = (typeof validMethods)[number];
-            const method: AuthMethod = validMethods.includes(
-              result.auth.method as AuthMethod
-            )
-              ? (result.auth.method as AuthMethod)
-              : "none";
-            const authStatus = {
-              authenticated: result.auth.authenticated,
-              method,
-              hasCredentialsFile: false,
-              oauthTokenValid:
-                result.auth.hasStoredOAuthToken ||
-                result.auth.hasEnvOAuthToken,
-              apiKeyValid:
-                result.auth.hasStoredApiKey || result.auth.hasEnvApiKey,
-              hasEnvOAuthToken: result.auth.hasEnvOAuthToken,
-              hasEnvApiKey: result.auth.hasEnvApiKey,
-            };
-            setAuthStatus(authStatus);
-          } else {
-            // Codex auth status mapping
-            const mapAuthMethod = (method?: string): any => {
-              switch (method) {
-                case "cli_verified":
-                  return "cli_verified";
-                case "cli_tokens":
-                  return "cli_tokens";
-                case "auth_file":
-                  return "api_key";
-                case "env_var":
-                  return "env";
-                default:
-                  return "none";
-              }
-            };
-
-            const method = mapAuthMethod(result.auth.method);
-            const authStatus = {
-              authenticated: result.auth.authenticated,
-              method,
-              apiKeyValid:
-                method === "cli_verified" || method === "cli_tokens"
-                  ? undefined
-                  : result.auth.authenticated,
-            };
-            console.log(`[${cliType} Setup] Auth Status:`, authStatus);
-            setAuthStatus(authStatus);
-          }
+          // Validate method is one of the expected values, default to "none"
+          const validMethods = [
+            "oauth_token_env",
+            "oauth_token",
+            "api_key",
+            "api_key_env",
+            "credentials_file",
+            "cli_authenticated",
+            "none",
+          ] as const;
+          type AuthMethod = (typeof validMethods)[number];
+          const method: AuthMethod = validMethods.includes(
+            result.auth.method as AuthMethod
+          )
+            ? (result.auth.method as AuthMethod)
+            : "none";
+          const authStatus = {
+            authenticated: result.auth.authenticated,
+            method,
+            hasCredentialsFile: false,
+            oauthTokenValid:
+              result.auth.hasStoredOAuthToken ||
+              result.auth.hasEnvOAuthToken,
+            apiKeyValid:
+              result.auth.hasStoredApiKey || result.auth.hasEnvApiKey,
+            hasEnvOAuthToken: result.auth.hasEnvOAuthToken,
+            hasEnvApiKey: result.auth.hasEnvApiKey,
+          };
+          setAuthStatus(authStatus);
         }
       }
     } catch (error) {

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

@@ -4,7 +4,7 @@ import { getElectronAPI } from "@/lib/electron";
 type AuthState = "idle" | "running" | "success" | "error" | "manual";
 
 interface UseOAuthAuthenticationOptions {
-  cliType: "claude" | "codex";
+  cliType: "claude";
   enabled?: boolean;
 }
 
@@ -70,11 +70,8 @@ export function useOAuthAuthentication({
     }
 
     try {
-      // Call the appropriate auth API based on cliType
-      const result =
-        cliType === "claude"
-          ? await api.setup.authClaude()
-          : await api.setup.authCodex?.();
+      // Call the auth API
+      const result = await api.setup.authClaude();
 
       // Cleanup subscription
       if (unsubscribeRef.current) {

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

@@ -1,445 +0,0 @@
-"use client";
-
-import { useState, useEffect, useCallback } from "react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { useSetupStore } from "@/store/setup-store";
-import { useAppStore } from "@/store/app-store";
-import { getElectronAPI } from "@/lib/electron";
-import {
-  CheckCircle2,
-  Loader2,
-  Terminal,
-  Key,
-  ArrowRight,
-  ArrowLeft,
-  ExternalLink,
-  Copy,
-  AlertCircle,
-  RefreshCw,
-  Download,
-} from "lucide-react";
-import { toast } from "sonner";
-import { StatusBadge, TerminalOutput } from "../components";
-import {
-  useCliStatus,
-  useCliInstallation,
-  useTokenSave,
-} from "../hooks";
-
-interface CodexSetupStepProps {
-  onNext: () => void;
-  onBack: () => void;
-  onSkip: () => void;
-}
-
-export function CodexSetupStep({
-  onNext,
-  onBack,
-  onSkip,
-}: CodexSetupStepProps) {
-  const {
-    codexCliStatus,
-    codexAuthStatus,
-    setCodexCliStatus,
-    setCodexAuthStatus,
-    setCodexInstallProgress,
-  } = useSetupStore();
-  const { setApiKeys, apiKeys } = useAppStore();
-
-  const [showApiKeyInput, setShowApiKeyInput] = useState(false);
-  const [apiKey, setApiKey] = useState("");
-
-  // Memoize API functions to prevent infinite loops
-  const statusApi = useCallback(
-    () => getElectronAPI().setup?.getCodexStatus() || Promise.reject(),
-    []
-  );
-
-  const installApi = useCallback(
-    () => getElectronAPI().setup?.installCodex() || Promise.reject(),
-    []
-  );
-
-  // Use custom hooks
-  const { isChecking, checkStatus } = useCliStatus({
-    cliType: "codex",
-    statusApi,
-    setCliStatus: setCodexCliStatus,
-    setAuthStatus: setCodexAuthStatus,
-  });
-
-  const onInstallSuccess = useCallback(() => {
-    checkStatus();
-  }, [checkStatus]);
-
-  const { isInstalling, installProgress, install } = useCliInstallation({
-    cliType: "codex",
-    installApi,
-    onProgressEvent: getElectronAPI().setup?.onInstallProgress,
-    onSuccess: onInstallSuccess,
-  });
-
-  const { isSaving: isSavingKey, saveToken: saveApiKeyToken } = useTokenSave({
-    provider: "openai",
-    onSuccess: () => {
-      setCodexAuthStatus({
-        authenticated: true,
-        method: "api_key",
-        apiKeyValid: true,
-      });
-      setApiKeys({ ...apiKeys, openai: apiKey });
-      setShowApiKeyInput(false);
-      checkStatus();
-    },
-  });
-
-  // Sync install progress to store
-  useEffect(() => {
-    setCodexInstallProgress({
-      isInstalling,
-      output: installProgress.output,
-    });
-  }, [isInstalling, installProgress, setCodexInstallProgress]);
-
-  // Check status on mount
-  useEffect(() => {
-    checkStatus();
-  }, [checkStatus]);
-
-  const copyCommand = (command: string) => {
-    navigator.clipboard.writeText(command);
-    toast.success("Command copied to clipboard");
-  };
-
-  const isAuthenticated = codexAuthStatus?.authenticated || apiKeys.openai;
-
-  const getAuthMethodLabel = () => {
-    if (!isAuthenticated) return null;
-    if (apiKeys.openai) return "API Key (Manual)";
-    if (codexAuthStatus?.method === "api_key") return "API Key (Auth File)";
-    if (codexAuthStatus?.method === "env") return "API Key (Environment)";
-    if (codexAuthStatus?.method === "cli_verified")
-      return "CLI Login (ChatGPT)";
-    return "Authenticated";
-  };
-
-  return (
-    <div className="space-y-6">
-      <div className="text-center mb-8">
-        <div className="w-16 h-16 rounded-xl bg-green-500/10 flex items-center justify-center mx-auto mb-4">
-          <Terminal className="w-8 h-8 text-green-500" />
-        </div>
-        <h2 className="text-2xl font-bold text-foreground mb-2">
-          Codex CLI Setup
-        </h2>
-        <p className="text-muted-foreground">
-          OpenAI&apos;s GPT-5.1 Codex for advanced code generation
-        </p>
-      </div>
-
-      {/* Status Card */}
-      <Card className="bg-card border-border">
-        <CardHeader>
-          <div className="flex items-center justify-between">
-            <CardTitle className="text-lg">Installation Status</CardTitle>
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={checkStatus}
-              disabled={isChecking}
-            >
-              <RefreshCw
-                className={`w-4 h-4 ${isChecking ? "animate-spin" : ""}`}
-              />
-            </Button>
-          </div>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <div className="flex items-center justify-between">
-            <span className="text-sm text-foreground">CLI Installation</span>
-            {isChecking ? (
-              <StatusBadge status="checking" label="Checking..." />
-            ) : codexCliStatus?.installed ? (
-              <StatusBadge status="installed" label="Installed" />
-            ) : (
-              <StatusBadge status="not_installed" label="Not Installed" />
-            )}
-          </div>
-
-          {codexCliStatus?.version && (
-            <div className="flex items-center justify-between">
-              <span className="text-sm text-muted-foreground">Version</span>
-              <span className="text-sm font-mono text-foreground">
-                {codexCliStatus.version}
-              </span>
-            </div>
-          )}
-
-          <div className="flex items-center justify-between">
-            <span className="text-sm text-foreground">Authentication</span>
-            {isAuthenticated ? (
-              <div className="flex items-center gap-2">
-                <StatusBadge status="authenticated" label="Authenticated" />
-                {getAuthMethodLabel() && (
-                  <span className="text-xs text-muted-foreground">
-                    ({getAuthMethodLabel()})
-                  </span>
-                )}
-              </div>
-            ) : (
-              <StatusBadge
-                status="not_authenticated"
-                label="Not Authenticated"
-              />
-            )}
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Installation Section */}
-      {!codexCliStatus?.installed && (
-        <Card className="bg-card border-border">
-          <CardHeader>
-            <CardTitle className="text-lg flex items-center gap-2">
-              <Download className="w-5 h-5" />
-              Install Codex CLI
-            </CardTitle>
-            <CardDescription>
-              Install via npm (Node.js required)
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="space-y-2">
-              <Label className="text-sm text-muted-foreground">
-                npm (Global installation)
-              </Label>
-              <div className="flex items-center gap-2">
-                <code className="flex-1 bg-muted px-3 py-2 rounded text-sm font-mono text-foreground">
-                  npm install -g @openai/codex
-                </code>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  onClick={() => copyCommand("npm install -g @openai/codex")}
-                >
-                  <Copy className="w-4 h-4" />
-                </Button>
-              </div>
-            </div>
-
-            {isInstalling && (
-              <TerminalOutput lines={installProgress.output} />
-            )}
-
-            <div className="flex gap-2">
-              <Button
-                onClick={install}
-                disabled={isInstalling}
-                className="flex-1 bg-green-500 hover:bg-green-600 text-white"
-                data-testid="install-codex-button"
-              >
-                {isInstalling ? (
-                  <>
-                    <Loader2 className="w-4 h-4 mr-2 animate-spin" />
-                    Installing...
-                  </>
-                ) : (
-                  <>
-                    <Download className="w-4 h-4 mr-2" />
-                    Auto Install
-                  </>
-                )}
-              </Button>
-            </div>
-
-            <div className="p-3 rounded-lg bg-yellow-500/10 border border-yellow-500/20">
-              <div className="flex items-start gap-2">
-                <AlertCircle className="w-4 h-4 text-yellow-500 mt-0.5" />
-                <p className="text-xs text-yellow-600 dark:text-yellow-400">
-                  Requires Node.js to be installed. If the auto-install fails,
-                  try running the command manually in your terminal.
-                </p>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-      )}
-
-      {/* Authentication Section */}
-      {!isAuthenticated && (
-        <Card className="bg-card border-border">
-          <CardHeader>
-            <CardTitle className="text-lg flex items-center gap-2">
-              <Key className="w-5 h-5" />
-              Authentication
-            </CardTitle>
-            <CardDescription>Codex requires an OpenAI API key</CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            {codexCliStatus?.installed && (
-              <div className="p-4 rounded-lg bg-muted/50 border border-border">
-                <div className="flex items-start gap-3">
-                  <Terminal className="w-5 h-5 text-green-500 mt-0.5" />
-                  <div>
-                    <p className="font-medium text-foreground">
-                      Authenticate via CLI
-                    </p>
-                    <p className="text-sm text-muted-foreground mb-2">
-                      Run this command in your terminal:
-                    </p>
-                    <div className="flex items-center gap-2">
-                      <code className="bg-muted px-3 py-1 rounded text-sm font-mono text-foreground">
-                        codex auth login
-                      </code>
-                      <Button
-                        variant="ghost"
-                        size="icon"
-                        onClick={() => copyCommand("codex auth login")}
-                      >
-                        <Copy className="w-4 h-4" />
-                      </Button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            )}
-
-            <div className="relative">
-              <div className="absolute inset-0 flex items-center">
-                <span className="w-full border-t border-border" />
-              </div>
-              <div className="relative flex justify-center text-xs uppercase">
-                <span className="bg-card px-2 text-muted-foreground">
-                  or enter API key
-                </span>
-              </div>
-            </div>
-
-            {showApiKeyInput ? (
-              <div className="space-y-3">
-                <div className="space-y-2">
-                  <Label htmlFor="openai-key" className="text-foreground">
-                    OpenAI API Key
-                  </Label>
-                  <Input
-                    id="openai-key"
-                    type="password"
-                    placeholder="sk-..."
-                    value={apiKey}
-                    onChange={(e) => setApiKey(e.target.value)}
-                    className="bg-input border-border text-foreground"
-                    data-testid="openai-api-key-input"
-                  />
-                  <p className="text-xs text-muted-foreground">
-                    Get your API key from{" "}
-                    <a
-                      href="https://platform.openai.com/api-keys"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="text-green-500 hover:underline"
-                    >
-                      platform.openai.com
-                      <ExternalLink className="w-3 h-3 inline ml-1" />
-                    </a>
-                  </p>
-                </div>
-                <div className="flex gap-2">
-                  <Button
-                    variant="outline"
-                    onClick={() => setShowApiKeyInput(false)}
-                    className="border-border"
-                  >
-                    Cancel
-                  </Button>
-                  <Button
-                    onClick={() => saveApiKeyToken(apiKey)}
-                    disabled={isSavingKey || !apiKey.trim()}
-                    className="flex-1 bg-green-500 hover:bg-green-600 text-white"
-                    data-testid="save-openai-key-button"
-                  >
-                    {isSavingKey ? (
-                      <Loader2 className="w-4 h-4 animate-spin" />
-                    ) : (
-                      "Save API Key"
-                    )}
-                  </Button>
-                </div>
-              </div>
-            ) : (
-              <Button
-                variant="outline"
-                onClick={() => setShowApiKeyInput(true)}
-                className="w-full border-border"
-                data-testid="use-openai-key-button"
-              >
-                <Key className="w-4 h-4 mr-2" />
-                Enter OpenAI API Key
-              </Button>
-            )}
-          </CardContent>
-        </Card>
-      )}
-
-      {/* Success State */}
-      {isAuthenticated && (
-        <Card className="bg-green-500/5 border-green-500/20">
-          <CardContent className="py-6">
-            <div className="flex items-center gap-4">
-              <div className="w-12 h-12 rounded-full bg-green-500/10 flex items-center justify-center">
-                <CheckCircle2 className="w-6 h-6 text-green-500" />
-              </div>
-              <div>
-                <p className="font-medium text-foreground">
-                  Codex is ready to use!
-                </p>
-                <p className="text-sm text-muted-foreground">
-                  {getAuthMethodLabel() &&
-                    `Authenticated via ${getAuthMethodLabel()}. `}
-                  You can proceed to complete setup
-                </p>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-      )}
-
-      {/* Navigation */}
-      <div className="flex justify-between pt-4">
-        <Button
-          variant="ghost"
-          onClick={onBack}
-          className="text-muted-foreground"
-        >
-          <ArrowLeft className="w-4 h-4 mr-2" />
-          Back
-        </Button>
-        <div className="flex gap-2">
-          <Button
-            variant="ghost"
-            onClick={onSkip}
-            className="text-muted-foreground"
-          >
-            Skip for now
-          </Button>
-          <Button
-            onClick={onNext}
-            className="bg-green-500 hover:bg-green-600 text-white"
-            data-testid="codex-next-button"
-          >
-            Continue
-            <ArrowRight className="w-4 h-4 ml-2" />
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-}

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

@@ -14,16 +14,13 @@ interface CompleteStepProps {
 }
 
 export function CompleteStep({ onFinish }: CompleteStepProps) {
-  const { claudeCliStatus, claudeAuthStatus, codexCliStatus, codexAuthStatus } =
+  const { claudeCliStatus, claudeAuthStatus } =
     useSetupStore();
   const { apiKeys } = useAppStore();
 
   const claudeReady =
     (claudeCliStatus?.installed && claudeAuthStatus?.authenticated) ||
     apiKeys.anthropic;
-  const codexReady =
-    (codexCliStatus?.installed && codexAuthStatus?.authenticated) ||
-    apiKeys.openai;
 
   return (
     <div className="text-center space-y-6">
@@ -41,7 +38,7 @@ export function CompleteStep({ onFinish }: CompleteStepProps) {
         </p>
       </div>
 
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-2xl mx-auto">
+      <div className="max-w-md mx-auto">
         <Card
           className={`bg-card/50 border ${
             claudeReady ? "border-green-500/50" : "border-yellow-500/50"
@@ -63,28 +60,6 @@ export function CompleteStep({ onFinish }: CompleteStepProps) {
             </div>
           </CardContent>
         </Card>
-
-        <Card
-          className={`bg-card/50 border ${
-            codexReady ? "border-green-500/50" : "border-yellow-500/50"
-          }`}
-        >
-          <CardContent className="py-4">
-            <div className="flex items-center gap-3">
-              {codexReady ? (
-                <CheckCircle2 className="w-6 h-6 text-green-500" />
-              ) : (
-                <AlertCircle className="w-6 h-6 text-yellow-500" />
-              )}
-              <div className="text-left">
-                <p className="font-medium text-foreground">Codex</p>
-                <p className="text-sm text-muted-foreground">
-                  {codexReady ? "Ready to use" : "Configure later in settings"}
-                </p>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
       </div>
 
       <div className="p-4 rounded-lg bg-muted/50 border border-border max-w-md mx-auto">

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

@@ -2,4 +2,3 @@
 export { WelcomeStep } from "./welcome-step";
 export { CompleteStep } from "./complete-step";
 export { ClaudeSetupStep } from "./claude-setup-step";
-export { CodexSetupStep } from "./codex-setup-step";

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

@@ -24,7 +24,7 @@ export function WelcomeStep({ onNext }: WelcomeStepProps) {
         </p>
       </div>
 
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-2xl mx-auto">
+      <div className="grid grid-cols-1 gap-4 max-w-md mx-auto place-items-center">
         <Card className="bg-card/50 border-border hover:border-brand-500/50 transition-colors">
           <CardHeader className="pb-3">
             <CardTitle className="text-base flex items-center gap-2">
@@ -40,19 +40,6 @@ export function WelcomeStep({ onNext }: WelcomeStepProps) {
           </CardContent>
         </Card>
 
-        <Card className="bg-card/50 border-border hover:border-brand-500/50 transition-colors">
-          <CardHeader className="pb-3">
-            <CardTitle className="text-base flex items-center gap-2">
-              <Terminal className="w-5 h-5 text-green-500" />
-              Codex CLI
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <p className="text-sm text-muted-foreground">
-              OpenAI&apos;s GPT-5.1 Codex for advanced code generation tasks
-            </p>
-          </CardContent>
-        </Card>
       </div>
 
       <Button

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

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

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

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

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

@@ -2,9 +2,6 @@
 
 import { useState, useCallback } from "react";
 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 {
   Dialog,
   DialogContent,
@@ -13,14 +10,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { useAppStore } from "@/store/app-store";
+import { useAppStore, type ThemeMode } from "@/store/app-store";
 import { getElectronAPI, type Project } from "@/lib/electron";
 import { initializeProject } from "@/lib/project-init";
 import {
@@ -41,14 +31,22 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { toast } from "sonner";
 import { WorkspacePickerModal } from "@/components/workspace-picker-modal";
+import { NewProjectModal } from "@/components/new-project-modal";
 import { getHttpApiClient } from "@/lib/http-api-client";
+import type { StarterTemplate } from "@/lib/templates";
 
 export function WelcomeView() {
-  const { projects, addProject, setCurrentProject, setCurrentView } =
-    useAppStore();
-  const [showNewProjectDialog, setShowNewProjectDialog] = useState(false);
-  const [newProjectName, setNewProjectName] = useState("");
-  const [newProjectPath, setNewProjectPath] = useState("");
+  const {
+    projects,
+    trashedProjects,
+    currentProject,
+    upsertAndSetCurrentProject,
+    addProject,
+    setCurrentProject,
+    setCurrentView,
+    theme: globalTheme,
+  } = useAppStore();
+  const [showNewProjectModal, setShowNewProjectModal] = useState(false);
   const [isCreating, setIsCreating] = useState(false);
   const [isOpening, setIsOpening] = useState(false);
   const [showInitDialog, setShowInitDialog] = useState(false);
@@ -108,35 +106,14 @@ export function WelcomeView() {
           return;
         }
 
-        // Check if project already exists (by path) to preserve theme and other settings
-        const existingProject = projects.find((p) => p.path === path);
-
-        let project: Project;
-        if (existingProject) {
-          // Update existing project, preserving theme and other properties
-          project = {
-            ...existingProject,
-            name, // Update name in case it changed
-            lastOpened: new Date().toISOString(),
-          };
-          // Update the project in the store (this will update the existing entry)
-          const updatedProjects = projects.map((p) =>
-            p.id === existingProject.id ? project : p
-          );
-          // We need to manually update projects since addProject would create a duplicate
-          useAppStore.setState({ projects: updatedProjects });
-        } else {
-          // Create new project
-          project = {
-            id: `project-${Date.now()}`,
-            name,
-            path,
-            lastOpened: new Date().toISOString(),
-          };
-          addProject(project);
-        }
-
-        setCurrentProject(project);
+        // Upsert project and set as current (handles both create and update cases)
+        // Theme preservation is handled by the store action
+        const trashedProject = trashedProjects.find((p) => p.path === path);
+        const effectiveTheme =
+          (trashedProject?.theme as ThemeMode | undefined) ||
+          (currentProject?.theme as ThemeMode | undefined) ||
+          globalTheme;
+        const project = upsertAndSetCurrentProject(path, name, effectiveTheme);
 
         // Show initialization dialog if files were created
         if (initResult.createdFiles && initResult.createdFiles.length > 0) {
@@ -171,7 +148,13 @@ export function WelcomeView() {
         setIsOpening(false);
       }
     },
-    [projects, addProject, setCurrentProject, analyzeProject]
+    [
+      trashedProjects,
+      currentProject,
+      globalTheme,
+      upsertAndSetCurrentProject,
+      analyzeProject,
+    ]
   );
 
   const handleOpenProject = useCallback(async () => {
@@ -191,7 +174,8 @@ export function WelcomeView() {
         if (!result.canceled && result.filePaths[0]) {
           const path = result.filePaths[0];
           // Extract folder name from path (works on both Windows and Mac/Linux)
-          const name = path.split(/[/\\]/).filter(Boolean).pop() || "Untitled Project";
+          const name =
+            path.split(/[/\\]/).filter(Boolean).pop() || "Untitled Project";
           await initializeAndOpenProject(path, name);
         }
       }
@@ -203,7 +187,8 @@ export function WelcomeView() {
 
       if (!result.canceled && result.filePaths[0]) {
         const path = result.filePaths[0];
-        const name = path.split(/[/\\]/).filter(Boolean).pop() || "Untitled Project";
+        const name =
+          path.split(/[/\\]/).filter(Boolean).pop() || "Untitled Project";
         await initializeAndOpenProject(path, name);
       }
     }
@@ -231,34 +216,33 @@ export function WelcomeView() {
   );
 
   const handleNewProject = () => {
-    setNewProjectName("");
-    setNewProjectPath("");
-    setShowNewProjectDialog(true);
+    setShowNewProjectModal(true);
   };
 
   const handleInteractiveMode = () => {
     setCurrentView("interview");
   };
 
-  const handleSelectDirectory = async () => {
-    const api = getElectronAPI();
-    const result = await api.openDirectory();
-
-    if (!result.canceled && result.filePaths[0]) {
-      setNewProjectPath(result.filePaths[0]);
-    }
-  };
-
-  const handleCreateProject = async () => {
-    if (!newProjectName || !newProjectPath) return;
-
+  /**
+   * Create a blank project with just .automaker directory structure
+   */
+  const handleCreateBlankProject = async (
+    projectName: string,
+    parentDir: string
+  ) => {
     setIsCreating(true);
     try {
       const api = getElectronAPI();
-      const projectPath = `${newProjectPath}/${newProjectName}`;
+      const projectPath = `${parentDir}/${projectName}`;
 
       // Create project directory
-      await api.mkdir(projectPath);
+      const mkdirResult = await api.mkdir(projectPath);
+      if (!mkdirResult.success) {
+        toast.error("Failed to create project directory", {
+          description: mkdirResult.error || "Unknown error occurred",
+        });
+        return;
+      }
 
       // Initialize .automaker directory with all necessary files
       const initResult = await initializeProject(projectPath);
@@ -271,10 +255,11 @@ export function WelcomeView() {
       }
 
       // Update the app_spec.txt with the project name
+      // Note: Must follow XML format as defined in apps/server/src/lib/app-spec-format.ts
       await api.writeFile(
         `${projectPath}/.automaker/app_spec.txt`,
         `<project_specification>
-  <project_name>${newProjectName}</project_name>
+  <project_name>${projectName}</project_name>
 
   <overview>
     Describe your project here. This file will be analyzed by an AI agent
@@ -297,24 +282,24 @@ export function WelcomeView() {
 
       const project = {
         id: `project-${Date.now()}`,
-        name: newProjectName,
+        name: projectName,
         path: projectPath,
         lastOpened: new Date().toISOString(),
       };
 
       addProject(project);
       setCurrentProject(project);
-      setShowNewProjectDialog(false);
+      setShowNewProjectModal(false);
 
       toast.success("Project created", {
-        description: `Created ${newProjectName} with .automaker directory`,
+        description: `Created ${projectName} with .automaker directory`,
       });
 
       // Set init status to show the dialog
       setInitStatus({
         isNewProject: true,
         createdFiles: initResult.createdFiles || [],
-        projectName: newProjectName,
+        projectName: projectName,
         projectPath: projectPath,
       });
       setShowInitDialog(true);
@@ -328,6 +313,212 @@ export function WelcomeView() {
     }
   };
 
+  /**
+   * Create a project from a GitHub starter template
+   */
+  const handleCreateFromTemplate = async (
+    template: StarterTemplate,
+    projectName: string,
+    parentDir: string
+  ) => {
+    setIsCreating(true);
+    try {
+      const httpClient = getHttpApiClient();
+      const api = getElectronAPI();
+
+      // Clone the template repository
+      const cloneResult = await httpClient.templates.clone(
+        template.repoUrl,
+        projectName,
+        parentDir
+      );
+
+      if (!cloneResult.success || !cloneResult.projectPath) {
+        toast.error("Failed to clone template", {
+          description: cloneResult.error || "Unknown error occurred",
+        });
+        return;
+      }
+
+      const projectPath = cloneResult.projectPath;
+
+      // Initialize .automaker directory with all necessary files
+      const initResult = await initializeProject(projectPath);
+
+      if (!initResult.success) {
+        toast.error("Failed to initialize project", {
+          description: initResult.error || "Unknown error occurred",
+        });
+        return;
+      }
+
+      // Update the app_spec.txt with template-specific info
+      // Note: Must follow XML format as defined in apps/server/src/lib/app-spec-format.ts
+      await api.writeFile(
+        `${projectPath}/.automaker/app_spec.txt`,
+        `<project_specification>
+  <project_name>${projectName}</project_name>
+
+  <overview>
+    This project was created from the "${template.name}" starter template.
+    ${template.description}
+  </overview>
+
+  <technology_stack>
+    ${template.techStack
+      .map((tech) => `<technology>${tech}</technology>`)
+      .join("\n    ")}
+  </technology_stack>
+
+  <core_capabilities>
+    ${template.features
+      .map((feature) => `<capability>${feature}</capability>`)
+      .join("\n    ")}
+  </core_capabilities>
+
+  <implemented_features>
+    <!-- The AI agent will populate this based on code analysis -->
+  </implemented_features>
+</project_specification>`
+      );
+
+      const project = {
+        id: `project-${Date.now()}`,
+        name: projectName,
+        path: projectPath,
+        lastOpened: new Date().toISOString(),
+      };
+
+      addProject(project);
+      setCurrentProject(project);
+      setShowNewProjectModal(false);
+
+      toast.success("Project created from template", {
+        description: `Created ${projectName} from ${template.name}`,
+      });
+
+      // Set init status to show the dialog
+      setInitStatus({
+        isNewProject: true,
+        createdFiles: initResult.createdFiles || [],
+        projectName: projectName,
+        projectPath: projectPath,
+      });
+      setShowInitDialog(true);
+
+      // Kick off project analysis
+      analyzeProject(projectPath);
+    } catch (error) {
+      console.error("Failed to create project from template:", error);
+      toast.error("Failed to create project", {
+        description: error instanceof Error ? error.message : "Unknown error",
+      });
+    } finally {
+      setIsCreating(false);
+    }
+  };
+
+  /**
+   * Create a project from a custom GitHub URL
+   */
+  const handleCreateFromCustomUrl = async (
+    repoUrl: string,
+    projectName: string,
+    parentDir: string
+  ) => {
+    setIsCreating(true);
+    try {
+      const httpClient = getHttpApiClient();
+      const api = getElectronAPI();
+
+      // Clone the repository
+      const cloneResult = await httpClient.templates.clone(
+        repoUrl,
+        projectName,
+        parentDir
+      );
+
+      if (!cloneResult.success || !cloneResult.projectPath) {
+        toast.error("Failed to clone repository", {
+          description: cloneResult.error || "Unknown error occurred",
+        });
+        return;
+      }
+
+      const projectPath = cloneResult.projectPath;
+
+      // Initialize .automaker directory with all necessary files
+      const initResult = await initializeProject(projectPath);
+
+      if (!initResult.success) {
+        toast.error("Failed to initialize project", {
+          description: initResult.error || "Unknown error occurred",
+        });
+        return;
+      }
+
+      // Update the app_spec.txt with basic info
+      // Note: Must follow XML format as defined in apps/server/src/lib/app-spec-format.ts
+      await api.writeFile(
+        `${projectPath}/.automaker/app_spec.txt`,
+        `<project_specification>
+  <project_name>${projectName}</project_name>
+
+  <overview>
+    This project was cloned from ${repoUrl}.
+    The AI agent will analyze the project structure.
+  </overview>
+
+  <technology_stack>
+    <!-- The AI agent will fill this in after analyzing your project -->
+  </technology_stack>
+
+  <core_capabilities>
+    <!-- List core features and capabilities -->
+  </core_capabilities>
+
+  <implemented_features>
+    <!-- The AI agent will populate this based on code analysis -->
+  </implemented_features>
+</project_specification>`
+      );
+
+      const project = {
+        id: `project-${Date.now()}`,
+        name: projectName,
+        path: projectPath,
+        lastOpened: new Date().toISOString(),
+      };
+
+      addProject(project);
+      setCurrentProject(project);
+      setShowNewProjectModal(false);
+
+      toast.success("Project created from repository", {
+        description: `Created ${projectName} from ${repoUrl}`,
+      });
+
+      // Set init status to show the dialog
+      setInitStatus({
+        isNewProject: true,
+        createdFiles: initResult.createdFiles || [],
+        projectName: projectName,
+        projectPath: projectPath,
+      });
+      setShowInitDialog(true);
+
+      // Kick off project analysis
+      analyzeProject(projectPath);
+    } catch (error) {
+      console.error("Failed to create project from custom URL:", error);
+      toast.error("Failed to create project", {
+        description: error instanceof Error ? error.message : "Unknown error",
+      });
+    } finally {
+      setIsCreating(false);
+    }
+  };
+
   const recentProjects = [...projects]
     .sort((a, b) => {
       const dateA = a.lastOpened ? new Date(a.lastOpened).getTime() : 0;
@@ -339,17 +530,17 @@ export function WelcomeView() {
   return (
     <div className="flex-1 flex flex-col content-bg" data-testid="welcome-view">
       {/* Header Section */}
-      <div className="flex-shrink-0 border-b border-border bg-glass backdrop-blur-md">
+      <div className="shrink-0 border-b border-border bg-glass backdrop-blur-md">
         <div className="px-8 py-6">
-          <div className="flex items-center gap-3 mb-2">
-            <div className="w-10 h-10 rounded-xl flex items-center justify-center">
-              <img src="/logo.png" alt="Automaker Logo" className="w-10 h-10" />
+          <div className="flex items-center gap-4 animate-in fade-in slide-in-from-top-2 duration-500">
+            <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 border border-brand-500/20 flex items-center justify-center shadow-lg shadow-brand-500/10">
+              <img src="/logo.png" alt="Automaker Logo" className="w-8 h-8" />
             </div>
             <div>
-              <h1 className="text-2xl font-bold text-foreground">
+              <h1 className="text-2xl font-bold text-foreground tracking-tight">
                 Welcome to Automaker
               </h1>
-              <p className="text-sm text-muted-foreground">
+              <p className="text-sm text-muted-foreground mt-0.5">
                 Your autonomous AI development studio
               </p>
             </div>
@@ -359,24 +550,25 @@ export function WelcomeView() {
 
       {/* Content Area */}
       <div className="flex-1 overflow-y-auto p-8">
-        <div className="max-w-6xl mx-auto">
+        <div className="max-w-5xl mx-auto">
           {/* Quick Actions */}
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12 animate-in fade-in slide-in-from-bottom-4 duration-500 delay-100">
+            {/* New Project Card */}
             <div
-              className="group relative overflow-hidden rounded-xl border border-border bg-card backdrop-blur-md hover:bg-card/70 hover:border-border-glass transition-all duration-200"
+              className="group relative rounded-xl border border-border bg-card/80 backdrop-blur-sm hover:bg-card hover:border-brand-500/30 hover:shadow-xl hover:shadow-brand-500/5 transition-all duration-300 hover:-translate-y-1"
               data-testid="new-project-card"
             >
-              <div className="absolute inset-0 bg-gradient-to-br from-brand-500/5 to-purple-600/5 opacity-0 group-hover:opacity-100 transition-opacity"></div>
+              <div className="absolute inset-0 rounded-xl bg-gradient-to-br from-brand-500/5 via-transparent to-purple-600/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
               <div className="relative p-6 h-full flex flex-col">
                 <div className="flex items-start gap-4 flex-1">
-                  <div className="w-12 h-12 rounded-lg bg-linear-to-br from-brand-500 to-brand-600 shadow-lg shadow-brand-500/20 flex items-center justify-center group-hover:scale-110 transition-transform shrink-0">
+                  <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-brand-500 to-brand-600 shadow-lg shadow-brand-500/25 flex items-center justify-center group-hover:scale-105 group-hover:shadow-brand-500/40 transition-all duration-300 shrink-0">
                     <Plus className="w-6 h-6 text-white" />
                   </div>
-                  <div className="flex-1">
-                    <h3 className="text-lg font-semibold text-foreground mb-1">
+                  <div className="flex-1 min-w-0">
+                    <h3 className="text-lg font-semibold text-foreground mb-1.5">
                       New Project
                     </h3>
-                    <p className="text-sm text-muted-foreground">
+                    <p className="text-sm text-muted-foreground leading-relaxed">
                       Create a new project from scratch with AI-powered
                       development
                     </p>
@@ -385,7 +577,7 @@ export function WelcomeView() {
                 <DropdownMenu>
                   <DropdownMenuTrigger asChild>
                     <Button
-                      className="w-full mt-4 bg-linear-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-600 text-primary-foreground border-0"
+                      className="w-full mt-5 bg-gradient-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-700 text-white border-0 shadow-md shadow-brand-500/20 hover:shadow-brand-500/30 transition-all"
                       data-testid="create-new-project"
                     >
                       <Plus className="w-4 h-4 mr-2" />
@@ -413,29 +605,30 @@ export function WelcomeView() {
               </div>
             </div>
 
+            {/* Open Project Card */}
             <div
-              className="group relative overflow-hidden rounded-xl border border-border bg-card backdrop-blur-md hover:bg-card/70 hover:border-border-glass transition-all duration-200 cursor-pointer"
+              className="group relative rounded-xl border border-border bg-card/80 backdrop-blur-sm hover:bg-card hover:border-blue-500/30 hover:shadow-xl hover:shadow-blue-500/5 transition-all duration-300 cursor-pointer hover:-translate-y-1"
               onClick={handleOpenProject}
               data-testid="open-project-card"
             >
-              <div className="absolute inset-0 bg-gradient-to-br from-blue-500/5 to-cyan-600/5 opacity-0 group-hover:opacity-100 transition-opacity"></div>
+              <div className="absolute inset-0 rounded-xl bg-gradient-to-br from-blue-500/5 via-transparent to-cyan-600/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
               <div className="relative p-6 h-full flex flex-col">
                 <div className="flex items-start gap-4 flex-1">
-                  <div className="w-12 h-12 rounded-lg bg-muted border border-border flex items-center justify-center group-hover:scale-110 transition-transform shrink-0">
-                    <FolderOpen className="w-6 h-6 text-muted-foreground group-hover:text-foreground transition-colors" />
+                  <div className="w-12 h-12 rounded-xl bg-muted border border-border flex items-center justify-center group-hover:bg-blue-500/10 group-hover:border-blue-500/30 group-hover:scale-105 transition-all duration-300 shrink-0">
+                    <FolderOpen className="w-6 h-6 text-muted-foreground group-hover:text-blue-500 transition-colors duration-300" />
                   </div>
-                  <div className="flex-1">
-                    <h3 className="text-lg font-semibold text-foreground mb-1">
+                  <div className="flex-1 min-w-0">
+                    <h3 className="text-lg font-semibold text-foreground mb-1.5">
                       Open Project
                     </h3>
-                    <p className="text-sm text-muted-foreground">
+                    <p className="text-sm text-muted-foreground leading-relaxed">
                       Open an existing project folder to continue working
                     </p>
                   </div>
                 </div>
                 <Button
                   variant="secondary"
-                  className="w-full mt-4 bg-secondary hover:bg-secondary/80 text-foreground border border-border hover:border-border-glass"
+                  className="w-full mt-5 bg-secondary/80 hover:bg-secondary text-foreground border border-border hover:border-blue-500/30 transition-all"
                   data-testid="open-existing-project"
                 >
                   <FolderOpen className="w-4 h-4 mr-2" />
@@ -447,36 +640,39 @@ export function WelcomeView() {
 
           {/* Recent Projects */}
           {recentProjects.length > 0 && (
-            <div>
-              <div className="flex items-center gap-2 mb-4">
-                <Clock className="w-5 h-5 text-muted-foreground" />
+            <div className="animate-in fade-in slide-in-from-bottom-4 duration-500 delay-200">
+              <div className="flex items-center gap-2.5 mb-5">
+                <div className="w-8 h-8 rounded-lg bg-muted/50 flex items-center justify-center">
+                  <Clock className="w-4 h-4 text-muted-foreground" />
+                </div>
                 <h2 className="text-lg font-semibold text-foreground">
                   Recent Projects
                 </h2>
               </div>
               <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-                {recentProjects.map((project) => (
+                {recentProjects.map((project, index) => (
                   <div
                     key={project.id}
-                    className="group relative overflow-hidden rounded-xl border border-border bg-card backdrop-blur-md hover:bg-card/70 hover:border-brand-500/50 transition-all duration-200 cursor-pointer"
+                    className="group relative rounded-xl border border-border bg-card/60 backdrop-blur-sm hover:bg-card hover:border-brand-500/40 hover:shadow-lg hover:shadow-brand-500/5 transition-all duration-300 cursor-pointer hover:-translate-y-0.5"
                     onClick={() => handleRecentProjectClick(project)}
                     data-testid={`recent-project-${project.id}`}
+                    style={{ animationDelay: `${index * 50}ms` }}
                   >
-                    <div className="absolute inset-0 bg-gradient-to-br from-brand-500/0 to-purple-600/0 group-hover:from-brand-500/5 group-hover:to-purple-600/5 transition-all"></div>
+                    <div className="absolute inset-0 rounded-xl bg-gradient-to-br from-brand-500/0 to-purple-600/0 group-hover:from-brand-500/5 group-hover:to-purple-600/5 transition-all duration-300" />
                     <div className="relative p-4">
                       <div className="flex items-start gap-3">
-                        <div className="w-10 h-10 rounded-lg bg-muted border border-border flex items-center justify-center group-hover:border-brand-500/50 transition-colors">
-                          <Folder className="w-5 h-5 text-muted-foreground group-hover:text-brand-500 transition-colors" />
+                        <div className="w-10 h-10 rounded-lg bg-muted/80 border border-border flex items-center justify-center group-hover:bg-brand-500/10 group-hover:border-brand-500/30 transition-all duration-300 shrink-0">
+                          <Folder className="w-5 h-5 text-muted-foreground group-hover:text-brand-500 transition-colors duration-300" />
                         </div>
                         <div className="flex-1 min-w-0">
-                          <p className="font-medium text-foreground truncate group-hover:text-brand-500 transition-colors">
+                          <p className="font-medium text-foreground truncate group-hover:text-brand-500 transition-colors duration-300">
                             {project.name}
                           </p>
-                          <p className="text-xs text-muted-foreground/70 truncate mt-0.5">
+                          <p className="text-xs text-muted-foreground/70 truncate mt-1">
                             {project.path}
                           </p>
                           {project.lastOpened && (
-                            <p className="text-xs text-muted-foreground mt-1">
+                            <p className="text-xs text-muted-foreground mt-1.5">
                               {new Date(
                                 project.lastOpened
                               ).toLocaleDateString()}
@@ -493,14 +689,14 @@ export function WelcomeView() {
 
           {/* Empty State for No Projects */}
           {recentProjects.length === 0 && (
-            <div className="flex flex-col items-center justify-center py-12 text-center">
-              <div className="w-16 h-16 rounded-2xl bg-muted border border-border flex items-center justify-center mb-4">
-                <Sparkles className="w-8 h-8 text-muted-foreground" />
+            <div className="flex flex-col items-center justify-center py-16 text-center animate-in fade-in duration-500 delay-200">
+              <div className="w-20 h-20 rounded-2xl bg-muted/50 border border-border flex items-center justify-center mb-5">
+                <Sparkles className="w-10 h-10 text-muted-foreground/50" />
               </div>
-              <h3 className="text-lg font-semibold text-foreground mb-2">
+              <h3 className="text-xl font-semibold text-foreground mb-2">
                 No projects yet
               </h3>
-              <p className="text-sm text-zinc-400 max-w-md">
+              <p className="text-sm text-muted-foreground max-w-md leading-relaxed">
                 Get started by creating a new project or opening an existing one
               </p>
             </div>
@@ -508,115 +704,50 @@ export function WelcomeView() {
         </div>
       </div>
 
-      {/* New Project Dialog */}
-      <Dialog
-        open={showNewProjectDialog}
-        onOpenChange={setShowNewProjectDialog}
-      >
-        <DialogContent
-          className="bg-card border-border"
-          data-testid="new-project-dialog"
-        >
-          <DialogHeader>
-            <DialogTitle className="text-foreground">
-              Create New Project
-            </DialogTitle>
-            <DialogDescription className="text-muted-foreground">
-              Set up a new project directory with initial configuration files.
-            </DialogDescription>
-          </DialogHeader>
-          <div className="space-y-4 py-4">
-            <div className="space-y-2">
-              <Label htmlFor="project-name" className="text-foreground">
-                Project Name
-              </Label>
-              <Input
-                id="project-name"
-                placeholder="my-awesome-project"
-                value={newProjectName}
-                onChange={(e) => setNewProjectName(e.target.value)}
-                className="bg-input border-border text-foreground placeholder:text-muted-foreground"
-                data-testid="project-name-input"
-              />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="project-path" className="text-foreground">
-                Parent Directory
-              </Label>
-              <div className="flex gap-2">
-                <Input
-                  id="project-path"
-                  placeholder="/path/to/projects"
-                  value={newProjectPath}
-                  onChange={(e) => setNewProjectPath(e.target.value)}
-                  className="flex-1 bg-input border-border text-foreground placeholder:text-muted-foreground"
-                  data-testid="project-path-input"
-                />
-                <Button
-                  variant="secondary"
-                  onClick={handleSelectDirectory}
-                  className="bg-secondary hover:bg-secondary/80 text-foreground border border-border"
-                  data-testid="browse-directory"
-                >
-                  Browse
-                </Button>
-              </div>
-            </div>
-          </div>
-          <DialogFooter>
-            <Button
-              variant="ghost"
-              onClick={() => setShowNewProjectDialog(false)}
-              className="text-muted-foreground hover:text-foreground hover:bg-accent"
-            >
-              Cancel
-            </Button>
-            <HotkeyButton
-              onClick={handleCreateProject}
-              disabled={!newProjectName || !newProjectPath || 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 }}
-              hotkeyActive={showNewProjectDialog}
-              data-testid="confirm-create-project"
-            >
-              {isCreating ? "Creating..." : "Create Project"}
-            </HotkeyButton>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+      {/* New Project Modal */}
+      <NewProjectModal
+        open={showNewProjectModal}
+        onOpenChange={setShowNewProjectModal}
+        onCreateBlankProject={handleCreateBlankProject}
+        onCreateFromTemplate={handleCreateFromTemplate}
+        onCreateFromCustomUrl={handleCreateFromCustomUrl}
+        isCreating={isCreating}
+      />
 
       {/* Project Initialization Dialog */}
       <Dialog open={showInitDialog} onOpenChange={setShowInitDialog}>
         <DialogContent
-          className="bg-card border-border"
+          className="bg-card border-border shadow-xl"
           data-testid="project-init-dialog"
         >
           <DialogHeader>
-            <DialogTitle className="text-foreground flex items-center gap-2">
-              <Sparkles className="w-5 h-5 text-brand-500" />
+            <DialogTitle className="text-foreground flex items-center gap-2.5">
+              <div className="w-8 h-8 rounded-lg bg-brand-500/10 flex items-center justify-center">
+                <Sparkles className="w-4 h-4 text-brand-500" />
+              </div>
               {initStatus?.isNewProject
                 ? "Project Initialized"
                 : "Project Updated"}
             </DialogTitle>
-            <DialogDescription className="text-muted-foreground">
+            <DialogDescription className="text-muted-foreground mt-1">
               {initStatus?.isNewProject
                 ? `Created .automaker directory structure for ${initStatus?.projectName}`
                 : `Updated missing files in .automaker for ${initStatus?.projectName}`}
             </DialogDescription>
           </DialogHeader>
           <div className="py-4">
-            <div className="space-y-2">
+            <div className="space-y-3">
               <p className="text-sm text-foreground font-medium">
                 Created files:
               </p>
-              <ul className="space-y-1.5">
+              <ul className="space-y-2">
                 {initStatus?.createdFiles.map((file) => (
                   <li
                     key={file}
-                    className="flex items-center gap-2 text-sm text-muted-foreground"
+                    className="flex items-center gap-2.5 text-sm text-muted-foreground"
                   >
-                    <div className="w-1.5 h-1.5 rounded-full bg-green-500" />
-                    <code className="text-xs bg-muted px-2 py-0.5 rounded">
+                    <div className="w-2 h-2 rounded-full bg-green-500" />
+                    <code className="text-xs bg-muted px-2.5 py-1 rounded-md font-mono">
                       {file}
                     </code>
                   </li>
@@ -625,18 +756,18 @@ export function WelcomeView() {
             </div>
 
             {initStatus?.isNewProject && (
-              <div className="mt-4 p-3 rounded-lg bg-muted/50 border border-border-glass">
+              <div className="mt-5 p-4 rounded-xl bg-muted/50 border border-border">
                 {isAnalyzing ? (
-                  <div className="flex items-center gap-2">
+                  <div className="flex items-center gap-3">
                     <Loader2 className="w-4 h-4 text-brand-500 animate-spin" />
-                    <p className="text-sm text-brand-400">
+                    <p className="text-sm text-brand-500">
                       AI agent is analyzing your project structure...
                     </p>
                   </div>
                 ) : (
-                  <p className="text-sm text-muted-foreground">
-                    <span className="text-brand-400">Tip:</span> Edit the{" "}
-                    <code className="text-xs bg-muted px-1.5 py-0.5 rounded">
+                  <p className="text-sm text-muted-foreground leading-relaxed">
+                    <span className="text-brand-500 font-medium">Tip:</span> Edit the{" "}
+                    <code className="text-xs bg-muted px-1.5 py-0.5 rounded font-mono">
                       app_spec.txt
                     </code>{" "}
                     file to describe your project. The AI agent will use this to
@@ -649,7 +780,7 @@ export function WelcomeView() {
           <DialogFooter>
             <Button
               onClick={() => setShowInitDialog(false)}
-              className="bg-gradient-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-600 text-white border-0"
+              className="bg-gradient-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-700 text-white border-0 shadow-md shadow-brand-500/20"
               data-testid="close-init-dialog"
             >
               Get Started
@@ -671,8 +802,8 @@ export function WelcomeView() {
           className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm"
           data-testid="project-opening-overlay"
         >
-          <div className="flex flex-col items-center gap-3 p-6 rounded-xl bg-card border border-border">
-            <Loader2 className="w-8 h-8 text-brand-500 animate-spin" />
+          <div className="flex flex-col items-center gap-4 p-8 rounded-2xl bg-card border border-border shadow-2xl">
+            <Loader2 className="w-10 h-10 text-brand-500 animate-spin" />
             <p className="text-foreground font-medium">
               Initializing project...
             </p>

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

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

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

@@ -2,7 +2,7 @@ import type { Dispatch, SetStateAction } from "react";
 import type { LucideIcon } from "lucide-react";
 import type { ApiKeys } from "@/store/app-store";
 
-export type ProviderKey = "anthropic" | "google" | "openai";
+export type ProviderKey = "anthropic" | "google";
 
 export interface ProviderConfig {
   key: ProviderKey;
@@ -51,22 +51,12 @@ export interface ProviderConfigParams {
     onTest: () => Promise<void>;
     result: { success: boolean; message: string } | null;
   };
-  openai: {
-    value: string;
-    setValue: Dispatch<SetStateAction<string>>;
-    show: boolean;
-    setShow: Dispatch<SetStateAction<boolean>>;
-    testing: boolean;
-    onTest: () => Promise<void>;
-    result: { success: boolean; message: string } | null;
-  };
 }
 
 export const buildProviderConfigs = ({
   apiKeys,
   anthropic,
   google,
-  openai,
 }: ProviderConfigParams): ProviderConfig[] => [
   {
     key: "anthropic",
@@ -121,29 +111,4 @@ export const buildProviderConfigs = ({
     descriptionLinkHref: "https://makersuite.google.com/app/apikey",
     descriptionLinkText: "makersuite.google.com",
   },
-  {
-    key: "openai",
-    label: "OpenAI API Key (Codex/GPT)",
-    inputId: "openai-key",
-    placeholder: "sk-...",
-    value: openai.value,
-    setValue: openai.setValue,
-    showValue: openai.show,
-    setShowValue: openai.setShow,
-    hasStoredKey: apiKeys.openai,
-    inputTestId: "openai-api-key-input",
-    toggleTestId: "toggle-openai-visibility",
-    testButton: {
-      onClick: openai.onTest,
-      disabled: !openai.value || openai.testing,
-      loading: openai.testing,
-      testId: "test-openai-connection",
-    },
-    result: openai.result,
-    resultTestId: "openai-test-connection-result",
-    resultMessageTestId: "openai-test-connection-message",
-    descriptionPrefix: "Used for OpenAI Codex CLI and GPT models. Get your key at",
-    descriptionLinkHref: "https://platform.openai.com/api-keys",
-    descriptionLinkText: "platform.openai.com",
-  },
 ];

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

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

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

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

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

@@ -5,6 +5,7 @@ import {
   Eclipse,
   Flame,
   Ghost,
+  Heart,
   Moon,
   Radio,
   Snowflake,
@@ -85,4 +86,10 @@ export const themeOptions: ReadonlyArray<ThemeOption> = [
     Icon: Radio,
     testId: "synthwave-mode-button",
   },
+  {
+    value: "red",
+    label: "Red",
+    Icon: Heart,
+    testId: "red-mode-button",
+  },
 ];

apps/app/src/contexts/file-browser-context.tsx

@@ -1,40 +1,69 @@
 "use client";
 
-import { createContext, useContext, useState, useCallback, type ReactNode } from "react";
+import {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  type ReactNode,
+} from "react";
 import { FileBrowserDialog } from "@/components/dialogs/file-browser-dialog";
 
+interface FileBrowserOptions {
+  title?: string;
+  description?: string;
+  initialPath?: string;
+}
+
 interface FileBrowserContextValue {
-  openFileBrowser: () => Promise<string | null>;
+  openFileBrowser: (options?: FileBrowserOptions) => Promise<string | null>;
 }
 
 const FileBrowserContext = createContext<FileBrowserContextValue | null>(null);
 
 export function FileBrowserProvider({ children }: { children: ReactNode }) {
   const [isOpen, setIsOpen] = useState(false);
-  const [resolver, setResolver] = useState<((value: string | null) => void) | null>(null);
+  const [resolver, setResolver] = useState<
+    ((value: string | null) => void) | null
+  >(null);
+  const [dialogOptions, setDialogOptions] = useState<FileBrowserOptions>({});
 
-  const openFileBrowser = useCallback((): Promise<string | null> => {
-    return new Promise((resolve) => {
-      setIsOpen(true);
-      setResolver(() => resolve);
-    });
-  }, []);
+  const openFileBrowser = useCallback(
+    (options?: FileBrowserOptions): Promise<string | null> => {
+      return new Promise((resolve) => {
+        setDialogOptions(options || {});
+        setIsOpen(true);
+        setResolver(() => resolve);
+      });
+    },
+    []
+  );
 
-  const handleSelect = useCallback((path: string) => {
-    if (resolver) {
-      resolver(path);
-      setResolver(null);
-    }
-    setIsOpen(false);
-  }, [resolver]);
+  const handleSelect = useCallback(
+    (path: string) => {
+      if (resolver) {
+        resolver(path);
+        setResolver(null);
+      }
+      setIsOpen(false);
+      setDialogOptions({});
+    },
+    [resolver]
+  );
 
-  const handleOpenChange = useCallback((open: boolean) => {
-    if (!open && resolver) {
-      resolver(null);
-      setResolver(null);
-    }
-    setIsOpen(open);
-  }, [resolver]);
+  const handleOpenChange = useCallback(
+    (open: boolean) => {
+      if (!open && resolver) {
+        resolver(null);
+        setResolver(null);
+      }
+      setIsOpen(open);
+      if (!open) {
+        setDialogOptions({});
+      }
+    },
+    [resolver]
+  );
 
   return (
     <FileBrowserContext.Provider value={{ openFileBrowser }}>
@@ -43,6 +72,9 @@ export function FileBrowserProvider({ children }: { children: ReactNode }) {
         open={isOpen}
         onOpenChange={handleOpenChange}
         onSelect={handleSelect}
+        title={dialogOptions.title}
+        description={dialogOptions.description}
+        initialPath={dialogOptions.initialPath}
       />
     </FileBrowserContext.Provider>
   );
@@ -57,12 +89,19 @@ export function useFileBrowser() {
 }
 
 // Global reference for non-React code (like HttpApiClient)
-let globalFileBrowserFn: (() => Promise<string | null>) | null = null;
+let globalFileBrowserFn:
+  | ((options?: FileBrowserOptions) => Promise<string | null>)
+  | null = null;
 
-export function setGlobalFileBrowser(fn: () => Promise<string | null>) {
+export function setGlobalFileBrowser(
+  fn: (options?: FileBrowserOptions) => Promise<string | null>
+) {
   globalFileBrowserFn = fn;
 }
 
 export function getGlobalFileBrowser() {
   return globalFileBrowserFn;
 }
+
+// Export the options type for consumers
+export type { FileBrowserOptions };

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

@@ -33,16 +33,21 @@ export function useAutoMode() {
   );
 
   // Helper to look up project ID from path
-  const getProjectIdFromPath = useCallback((path: string): string | undefined => {
-    const project = projects.find(p => p.path === path);
-    return project?.id;
-  }, [projects]);
+  const getProjectIdFromPath = useCallback(
+    (path: string): string | undefined => {
+      const project = projects.find((p) => p.path === path);
+      return project?.id;
+    },
+    [projects]
+  );
 
   // Get project-specific auto mode state
   const projectId = currentProject?.id;
   const projectAutoModeState = useMemo(() => {
     if (!projectId) return { isRunning: false, runningTasks: [] };
-    return autoModeByProject[projectId] || { isRunning: false, runningTasks: [] };
+    return (
+      autoModeByProject[projectId] || { isRunning: false, runningTasks: [] }
+    );
   }, [autoModeByProject, projectId]);
 
   const isAutoModeRunning = projectAutoModeState.isRunning;
@@ -62,10 +67,10 @@ export function useAutoMode() {
       // Events include projectPath from backend - use it to look up project ID
       // Fall back to current projectId if not provided in event
       let eventProjectId: string | undefined;
-      if ('projectPath' in event && event.projectPath) {
+      if ("projectPath" in event && event.projectPath) {
         eventProjectId = getProjectIdFromPath(event.projectPath);
       }
-      if (!eventProjectId && 'projectId' in event && event.projectId) {
+      if (!eventProjectId && "projectId" in event && event.projectId) {
         eventProjectId = event.projectId;
       }
       if (!eventProjectId) {
@@ -74,7 +79,10 @@ export function useAutoMode() {
 
       // Skip event if we couldn't determine the project
       if (!eventProjectId) {
-        console.warn("[AutoMode] Could not determine project for event:", event);
+        console.warn(
+          "[AutoMode] Could not determine project for event:",
+          event
+        );
         return;
       }
 
@@ -111,20 +119,41 @@ export function useAutoMode() {
           }
           break;
 
-        case "auto_mode_complete":
-          // All features completed for this project
+        case "auto_mode_stopped":
+          // Auto mode was explicitly stopped (by user or error)
           setAutoModeRunning(eventProjectId, false);
           clearRunningTasks(eventProjectId);
-          console.log("[AutoMode] All features completed!");
+          console.log("[AutoMode] Auto mode stopped");
+          break;
+
+        case "auto_mode_started":
+          // Auto mode started - ensure UI reflects running state
+          console.log("[AutoMode] Auto mode started:", event.message);
+          break;
+
+        case "auto_mode_idle":
+          // Auto mode is running but has no pending features to pick up
+          // This is NOT a stop - auto mode keeps running and will pick up new features
+          console.log("[AutoMode] Auto mode idle - waiting for new features");
+          break;
+
+        case "auto_mode_complete":
+          // Legacy event - only handle if it looks like a stop (for backwards compatibility)
+          if (event.message === "Auto mode stopped") {
+            setAutoModeRunning(eventProjectId, false);
+            clearRunningTasks(eventProjectId);
+            console.log("[AutoMode] Auto mode stopped (legacy event)");
+          }
           break;
 
         case "auto_mode_error":
           console.error("[AutoMode Error]", event.error);
           if (event.featureId && event.error) {
             // Check for authentication errors and provide a more helpful message
-            const isAuthError = event.errorType === "authentication" ||
-                               event.error.includes("Authentication failed") ||
-                               event.error.includes("Invalid API key");
+            const isAuthError =
+              event.errorType === "authentication" ||
+              event.error.includes("Authentication failed") ||
+              event.error.includes("Invalid API key");
 
             const errorMessage = isAuthError
               ? `Authentication failed: Please check your API key in Settings or run 'claude login' in terminal to re-authenticate.`
@@ -202,11 +231,12 @@ export function useAutoMode() {
     if (!api?.autoMode) return;
 
     // Find all projects that have auto mode marked as running
-    const projectsToRestart: Array<{ projectId: string; projectPath: string }> = [];
+    const projectsToRestart: Array<{ projectId: string; projectPath: string }> =
+      [];
     for (const [projectId, state] of Object.entries(autoModeByProject)) {
       if (state.isRunning) {
         // Find the project path for this project ID
-        const project = projects.find(p => p.id === projectId);
+        const project = projects.find((p) => p.id === projectId);
         if (project) {
           projectsToRestart.push({ projectId, projectPath: project.path });
         }
@@ -216,18 +246,27 @@ export function useAutoMode() {
     // Restart auto mode for each project
     for (const { projectId, projectPath } of projectsToRestart) {
       console.log(`[AutoMode] Restoring auto mode for project: ${projectPath}`);
-      api.autoMode.start(projectPath, maxConcurrency).then(result => {
-        if (!result.success) {
-          console.error(`[AutoMode] Failed to restore auto mode for ${projectPath}:`, result.error);
-          // Mark as not running if we couldn't restart
+      api.autoMode
+        .start(projectPath, maxConcurrency)
+        .then((result) => {
+          if (!result.success) {
+            console.error(
+              `[AutoMode] Failed to restore auto mode for ${projectPath}:`,
+              result.error
+            );
+            // Mark as not running if we couldn't restart
+            setAutoModeRunning(projectId, false);
+          } else {
+            console.log(`[AutoMode] Restored auto mode for ${projectPath}`);
+          }
+        })
+        .catch((error) => {
+          console.error(
+            `[AutoMode] Error restoring auto mode for ${projectPath}:`,
+            error
+          );
           setAutoModeRunning(projectId, false);
-        } else {
-          console.log(`[AutoMode] Restored auto mode for ${projectPath}`);
-        }
-      }).catch(error => {
-        console.error(`[AutoMode] Error restoring auto mode for ${projectPath}:`, error);
-        setAutoModeRunning(projectId, false);
-      });
+        });
     }
     // Only run once on mount - intentionally empty dependency array
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -246,11 +285,16 @@ export function useAutoMode() {
         throw new Error("Auto mode API not available");
       }
 
-      const result = await api.autoMode.start(currentProject.path, maxConcurrency);
+      const result = await api.autoMode.start(
+        currentProject.path,
+        maxConcurrency
+      );
 
       if (result.success) {
         setAutoModeRunning(currentProject.id, true);
-        console.log(`[AutoMode] Started successfully with maxConcurrency: ${maxConcurrency}`);
+        console.log(
+          `[AutoMode] Started successfully with maxConcurrency: ${maxConcurrency}`
+        );
       } else {
         console.error("[AutoMode] Failed to start:", result.error);
         throw new Error(result.error || "Failed to start auto mode");
@@ -285,7 +329,9 @@ export function useAutoMode() {
         // Stopping auto mode only turns off the toggle to prevent new features
         // from being picked up. Running tasks will complete naturally and be
         // removed via the auto_mode_feature_complete event.
-        console.log("[AutoMode] Stopped successfully - running tasks will continue");
+        console.log(
+          "[AutoMode] Stopped successfully - running tasks will continue"
+        );
       } else {
         console.error("[AutoMode] Failed to stop:", result.error);
         throw new Error(result.error || "Failed to stop auto mode");

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

@@ -34,6 +34,18 @@ function isInputFocused(): boolean {
     return true;
   }
 
+  // Check if focus is inside an xterm terminal (they use a hidden textarea)
+  const xtermContainer = activeElement.closest(".xterm");
+  if (xtermContainer) {
+    return true;
+  }
+
+  // Also check if any parent has data-terminal-container attribute
+  const terminalContainer = activeElement.closest("[data-terminal-container]");
+  if (terminalContainer) {
+    return true;
+  }
+
   // Check for autocomplete/typeahead dropdowns being open
   const autocompleteList = document.querySelector(
     '[data-testid="category-autocomplete-list"]'

apps/app/src/lib/electron.ts

@@ -133,22 +133,32 @@ export interface SuggestionsAPI {
 
 // Spec Regeneration types
 export type SpecRegenerationEvent =
-  | { type: "spec_regeneration_progress"; content: string }
-  | { type: "spec_regeneration_tool"; tool: string; input: unknown }
-  | { type: "spec_regeneration_complete"; message: string }
-  | { type: "spec_regeneration_error"; error: string };
+  | { type: "spec_regeneration_progress"; content: string; projectPath: string }
+  | {
+      type: "spec_regeneration_tool";
+      tool: string;
+      input: unknown;
+      projectPath: string;
+    }
+  | { type: "spec_regeneration_complete"; message: string; projectPath: string }
+  | { type: "spec_regeneration_error"; error: string; projectPath: string };
 
 export interface SpecRegenerationAPI {
   create: (
     projectPath: string,
     projectOverview: string,
-    generateFeatures?: boolean
+    generateFeatures?: boolean,
+    analyzeProject?: boolean,
+    maxFeatures?: number
   ) => Promise<{ success: boolean; error?: string }>;
   generate: (
     projectPath: string,
-    projectDefinition: string
+    projectDefinition: string,
+    generateFeatures?: boolean,
+    analyzeProject?: boolean,
+    maxFeatures?: number
   ) => Promise<{ success: boolean; error?: string }>;
-  generateFeatures: (projectPath: string) => Promise<{
+  generateFeatures: (projectPath: string, maxFeatures?: number) => Promise<{
     success: boolean;
     error?: string;
   }>;
@@ -287,22 +297,6 @@ export interface ElectronAPI {
     };
     error?: string;
   }>;
-  checkCodexCli?: () => Promise<{
-    success: boolean;
-    status?: string;
-    method?: string;
-    version?: string;
-    path?: string;
-    hasApiKey?: boolean;
-    recommendation?: string;
-    installCommands?: {
-      macos?: string;
-      windows?: string;
-      linux?: string;
-      npm?: string;
-    };
-    error?: string;
-  }>;
   model?: {
     getAvailable: () => Promise<{
       success: boolean;
@@ -315,11 +309,6 @@ export interface ElectronAPI {
       error?: string;
     }>;
   };
-  testOpenAIConnection?: (apiKey?: string) => Promise<{
-    success: boolean;
-    message?: string;
-    error?: string;
-  }>;
   worktree?: WorktreeAPI;
   git?: GitAPI;
   suggestions?: SuggestionsAPI;
@@ -347,32 +336,11 @@ export interface ElectronAPI {
       };
       error?: string;
     }>;
-    getCodexStatus: () => Promise<{
-      success: boolean;
-      status?: string;
-      method?: string;
-      version?: string;
-      path?: string;
-      auth?: {
-        authenticated: boolean;
-        method: string; // Can be: "cli_verified", "cli_tokens", "auth_file", "env_var", "none"
-        hasAuthFile: boolean;
-        hasEnvKey: boolean;
-        hasStoredApiKey?: boolean;
-        hasEnvApiKey?: boolean;
-      };
-      error?: string;
-    }>;
     installClaude: () => Promise<{
       success: boolean;
       message?: string;
       error?: string;
     }>;
-    installCodex: () => Promise<{
-      success: boolean;
-      message?: string;
-      error?: string;
-    }>;
     authClaude: () => Promise<{
       success: boolean;
       token?: string;
@@ -383,12 +351,6 @@ export interface ElectronAPI {
       message?: string;
       output?: string;
     }>;
-    authCodex: (apiKey?: string) => Promise<{
-      success: boolean;
-      requiresManualAuth?: boolean;
-      command?: string;
-      error?: string;
-    }>;
     storeApiKey: (
       provider: string,
       apiKey: string
@@ -396,12 +358,8 @@ export interface ElectronAPI {
     getApiKeys: () => Promise<{
       success: boolean;
       hasAnthropicKey: boolean;
-      hasOpenAIKey: boolean;
       hasGoogleKey: boolean;
     }>;
-    configureCodexMcp: (
-      projectPath: string
-    ) => Promise<{ success: boolean; configPath?: string; error?: string }>;
     getPlatform: () => Promise<{
       success: boolean;
       platform: string;
@@ -838,22 +796,11 @@ const getMockElectronAPI = (): ElectronAPI => {
       recommendation: "Claude CLI checks are unavailable in the web preview.",
     }),
 
-    checkCodexCli: async () => ({
-      success: false,
-      status: "not_installed",
-      recommendation: "Codex CLI checks are unavailable in the web preview.",
-    }),
-
     model: {
       getAvailable: async () => ({ success: true, models: [] }),
       checkProviders: async () => ({ success: true, providers: {} }),
     },
 
-    testOpenAIConnection: async () => ({
-      success: false,
-      error: "OpenAI connection test is only available in the Electron app.",
-    }),
-
     // Mock Setup API
     setup: createMockSetupAPI(),
 
@@ -903,32 +850,11 @@ interface SetupAPI {
     };
     error?: string;
   }>;
-  getCodexStatus: () => Promise<{
-    success: boolean;
-    status?: string;
-    method?: string;
-    version?: string;
-    path?: string;
-    auth?: {
-      authenticated: boolean;
-      method: string; // Can be: "cli_verified", "cli_tokens", "auth_file", "env_var", "none"
-      hasAuthFile: boolean;
-      hasEnvKey: boolean;
-      hasStoredApiKey?: boolean;
-      hasEnvApiKey?: boolean;
-    };
-    error?: string;
-  }>;
   installClaude: () => Promise<{
     success: boolean;
     message?: string;
     error?: string;
   }>;
-  installCodex: () => Promise<{
-    success: boolean;
-    message?: string;
-    error?: string;
-  }>;
   authClaude: () => Promise<{
     success: boolean;
     token?: string;
@@ -939,12 +865,6 @@ interface SetupAPI {
     message?: string;
     output?: string;
   }>;
-  authCodex: (apiKey?: string) => Promise<{
-    success: boolean;
-    requiresManualAuth?: boolean;
-    command?: string;
-    error?: string;
-  }>;
   storeApiKey: (
     provider: string,
     apiKey: string
@@ -952,12 +872,8 @@ interface SetupAPI {
   getApiKeys: () => Promise<{
     success: boolean;
     hasAnthropicKey: boolean;
-    hasOpenAIKey: boolean;
     hasGoogleKey: boolean;
   }>;
-  configureCodexMcp: (
-    projectPath: string
-  ) => Promise<{ success: boolean; configPath?: string; error?: string }>;
   getPlatform: () => Promise<{
     success: boolean;
     platform: string;
@@ -991,20 +907,6 @@ function createMockSetupAPI(): SetupAPI {
       };
     },
 
-    getCodexStatus: async () => {
-      console.log("[Mock] Getting Codex status");
-      return {
-        success: true,
-        status: "not_installed",
-        auth: {
-          authenticated: false,
-          method: "none",
-          hasAuthFile: false,
-          hasEnvKey: false,
-        },
-      };
-    },
-
     installClaude: async () => {
       console.log("[Mock] Installing Claude CLI");
       // Simulate installation delay
@@ -1016,16 +918,6 @@ function createMockSetupAPI(): SetupAPI {
       };
     },
 
-    installCodex: async () => {
-      console.log("[Mock] Installing Codex CLI");
-      await new Promise((resolve) => setTimeout(resolve, 1000));
-      return {
-        success: false,
-        error:
-          "CLI installation is only available in the Electron app. Please run the command manually.",
-      };
-    },
-
     authClaude: async () => {
       console.log("[Mock] Auth Claude CLI");
       return {
@@ -1035,18 +927,6 @@ function createMockSetupAPI(): SetupAPI {
       };
     },
 
-    authCodex: async (apiKey?: string) => {
-      console.log("[Mock] Auth Codex CLI", { hasApiKey: !!apiKey });
-      if (apiKey) {
-        return { success: true };
-      }
-      return {
-        success: true,
-        requiresManualAuth: true,
-        command: "codex auth login",
-      };
-    },
-
     storeApiKey: async (provider: string, apiKey: string) => {
       console.log("[Mock] Storing API key for:", provider);
       // In mock mode, we just pretend to store it (it's already in the app store)
@@ -1058,19 +938,10 @@ function createMockSetupAPI(): SetupAPI {
       return {
         success: true,
         hasAnthropicKey: false,
-        hasOpenAIKey: false,
         hasGoogleKey: false,
       };
     },
 
-    configureCodexMcp: async (projectPath: string) => {
-      console.log("[Mock] Configuring Codex MCP for:", projectPath);
-      return {
-        success: true,
-        configPath: `${projectPath}/.codex/config.toml`,
-      };
-    },
-
     getPlatform: async () => {
       return {
         success: true,
@@ -1967,7 +1838,9 @@ function createMockSpecRegenerationAPI(): SpecRegenerationAPI {
     create: async (
       projectPath: string,
       projectOverview: string,
-      generateFeatures = true
+      generateFeatures = true,
+      _analyzeProject?: boolean,
+      maxFeatures?: number
     ) => {
       if (mockSpecRegenerationRunning) {
         return { success: false, error: "Spec creation is already running" };
@@ -1975,7 +1848,7 @@ function createMockSpecRegenerationAPI(): SpecRegenerationAPI {
 
       mockSpecRegenerationRunning = true;
       console.log(
-        `[Mock] Creating initial spec for: ${projectPath}, generateFeatures: ${generateFeatures}`
+        `[Mock] Creating initial spec for: ${projectPath}, generateFeatures: ${generateFeatures}, maxFeatures: ${maxFeatures}`
       );
 
       // Simulate async spec creation
@@ -1984,7 +1857,13 @@ function createMockSpecRegenerationAPI(): SpecRegenerationAPI {
       return { success: true };
     },
 
-    generate: async (projectPath: string, projectDefinition: string) => {
+    generate: async (
+      projectPath: string,
+      projectDefinition: string,
+      generateFeatures = false,
+      _analyzeProject?: boolean,
+      maxFeatures?: number
+    ) => {
       if (mockSpecRegenerationRunning) {
         return {
           success: false,
@@ -1993,15 +1872,21 @@ function createMockSpecRegenerationAPI(): SpecRegenerationAPI {
       }
 
       mockSpecRegenerationRunning = true;
-      console.log(`[Mock] Regenerating spec for: ${projectPath}`);
+      console.log(
+        `[Mock] Regenerating spec for: ${projectPath}, generateFeatures: ${generateFeatures}, maxFeatures: ${maxFeatures}`
+      );
 
       // Simulate async spec regeneration
-      simulateSpecRegeneration(projectPath, projectDefinition);
+      simulateSpecRegeneration(
+        projectPath,
+        projectDefinition,
+        generateFeatures
+      );
 
       return { success: true };
     },
 
-    generateFeatures: async (projectPath: string) => {
+    generateFeatures: async (projectPath: string, maxFeatures?: number) => {
       if (mockSpecRegenerationRunning) {
         return {
           success: false,
@@ -2011,7 +1896,7 @@ function createMockSpecRegenerationAPI(): SpecRegenerationAPI {
 
       mockSpecRegenerationRunning = true;
       console.log(
-        `[Mock] Generating features from existing spec for: ${projectPath}`
+        `[Mock] Generating features from existing spec for: ${projectPath}, maxFeatures: ${maxFeatures}`
       );
 
       // Simulate async feature generation
@@ -2062,6 +1947,7 @@ async function simulateSpecCreation(
   emitSpecRegenerationEvent({
     type: "spec_regeneration_progress",
     content: "[Phase: initialization] Starting project analysis...\n",
+    projectPath: projectPath,
   });
 
   await new Promise((resolve) => {
@@ -2074,6 +1960,7 @@ async function simulateSpecCreation(
     type: "spec_regeneration_tool",
     tool: "Glob",
     input: { pattern: "**/*.{json,ts,tsx}" },
+    projectPath: projectPath,
   });
 
   await new Promise((resolve) => {
@@ -2085,6 +1972,7 @@ async function simulateSpecCreation(
   emitSpecRegenerationEvent({
     type: "spec_regeneration_progress",
     content: "[Phase: analysis] Detecting tech stack...\n",
+    projectPath: projectPath,
   });
 
   await new Promise((resolve) => {
@@ -2128,6 +2016,7 @@ async function simulateSpecCreation(
   emitSpecRegenerationEvent({
     type: "spec_regeneration_complete",
     message: "All tasks completed!",
+    projectPath: projectPath,
   });
 
   mockSpecRegenerationRunning = false;
@@ -2137,12 +2026,14 @@ async function simulateSpecCreation(
 
 async function simulateSpecRegeneration(
   projectPath: string,
-  projectDefinition: string
+  projectDefinition: string,
+  generateFeatures = false
 ) {
   mockSpecRegenerationPhase = "initialization";
   emitSpecRegenerationEvent({
     type: "spec_regeneration_progress",
     content: "[Phase: initialization] Starting spec regeneration...\n",
+    projectPath: projectPath,
   });
 
   await new Promise((resolve) => {
@@ -2154,6 +2045,7 @@ async function simulateSpecRegeneration(
   emitSpecRegenerationEvent({
     type: "spec_regeneration_progress",
     content: "[Phase: analysis] Analyzing codebase...\n",
+    projectPath: projectPath,
   });
 
   await new Promise((resolve) => {
@@ -2184,10 +2076,30 @@ async function simulateSpecRegeneration(
   </core_capabilities>
 </project_specification>`;
 
+  if (generateFeatures) {
+    mockSpecRegenerationPhase = "spec_complete";
+    emitSpecRegenerationEvent({
+      type: "spec_regeneration_progress",
+      content:
+        "[Phase: spec_complete] Spec regenerated! Generating features...\n",
+      projectPath: projectPath,
+    });
+
+    await new Promise((resolve) => {
+      mockSpecRegenerationTimeout = setTimeout(resolve, 500);
+    });
+    if (!mockSpecRegenerationRunning) return;
+
+    // Simulate feature generation
+    await simulateFeatureGeneration(projectPath);
+    if (!mockSpecRegenerationRunning) return;
+  }
+
   mockSpecRegenerationPhase = "complete";
   emitSpecRegenerationEvent({
     type: "spec_regeneration_complete",
     message: "All tasks completed!",
+    projectPath: projectPath,
   });
 
   mockSpecRegenerationRunning = false;
@@ -2201,6 +2113,7 @@ async function simulateFeatureGeneration(projectPath: string) {
     type: "spec_regeneration_progress",
     content:
       "[Phase: initialization] Starting feature generation from existing app_spec.txt...\n",
+    projectPath: projectPath,
   });
 
   await new Promise((resolve) => {
@@ -2211,6 +2124,7 @@ async function simulateFeatureGeneration(projectPath: string) {
   emitSpecRegenerationEvent({
     type: "spec_regeneration_progress",
     content: "[Phase: feature_generation] Reading implementation roadmap...\n",
+    projectPath: projectPath,
   });
 
   await new Promise((resolve) => {
@@ -2222,6 +2136,7 @@ async function simulateFeatureGeneration(projectPath: string) {
   emitSpecRegenerationEvent({
     type: "spec_regeneration_progress",
     content: "[Phase: feature_generation] Creating features from roadmap...\n",
+    projectPath: projectPath,
   });
 
   await new Promise((resolve) => {
@@ -2233,11 +2148,13 @@ async function simulateFeatureGeneration(projectPath: string) {
   emitSpecRegenerationEvent({
     type: "spec_regeneration_progress",
     content: "[Phase: complete] All tasks completed!\n",
+    projectPath: projectPath,
   });
 
   emitSpecRegenerationEvent({
     type: "spec_regeneration_complete",
     message: "All tasks completed!",
+    projectPath: projectPath,
   });
 
   mockSpecRegenerationRunning = false;

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

@@ -33,7 +33,6 @@ import type {
 } from "@/types/electron";
 import { getGlobalFileBrowser } from "@/contexts/file-browser-context";
 
-
 // Server URL - configurable via environment variable
 const getServerUrl = (): string => {
   if (typeof window !== "undefined") {
@@ -43,7 +42,6 @@ const getServerUrl = (): string => {
   return "http://localhost:3008";
 };
 
-
 // Get API key from environment variable
 const getApiKey = (): string | null => {
   if (typeof window !== "undefined") {
@@ -76,7 +74,10 @@ export class HttpApiClient implements ElectronAPI {
   }
 
   private connectWebSocket(): void {
-    if (this.isConnecting || (this.ws && this.ws.readyState === WebSocket.OPEN)) {
+    if (
+      this.isConnecting ||
+      (this.ws && this.ws.readyState === WebSocket.OPEN)
+    ) {
       return;
     }
 
@@ -103,7 +104,10 @@ export class HttpApiClient implements ElectronAPI {
             callbacks.forEach((cb) => cb(data.payload));
           }
         } catch (error) {
-          console.error("[HttpApiClient] Failed to parse WebSocket message:", error);
+          console.error(
+            "[HttpApiClient] Failed to parse WebSocket message:",
+            error
+          );
         }
       };
 
@@ -130,7 +134,10 @@ export class HttpApiClient implements ElectronAPI {
     }
   }
 
-  private subscribeToEvent(type: EventType, callback: EventCallback): () => void {
+  private subscribeToEvent(
+    type: EventType,
+    callback: EventCallback
+  ): () => void {
     if (!this.eventCallbacks.has(type)) {
       this.eventCallbacks.set(type, new Set());
     }
@@ -196,7 +203,9 @@ export class HttpApiClient implements ElectronAPI {
     return result.status === "ok" ? "pong" : "error";
   }
 
-  async openExternalLink(url: string): Promise<{ success: boolean; error?: string }> {
+  async openExternalLink(
+    url: string
+  ): Promise<{ success: boolean; error?: string }> {
     // Open in new tab
     window.open(url, "_blank", "noopener,noreferrer");
     return { success: true };
@@ -301,7 +310,9 @@ export class HttpApiClient implements ElectronAPI {
   async getPath(name: string): Promise<string> {
     // Server provides data directory
     if (name === "userData") {
-      const result = await this.get<{ dataDir: string }>("/api/health/detailed");
+      const result = await this.get<{ dataDir: string }>(
+        "/api/health/detailed"
+      );
       return result.dataDir || "/data";
     }
     return `/data/${name}`;
@@ -313,7 +324,32 @@ export class HttpApiClient implements ElectronAPI {
     mimeType: string,
     projectPath?: string
   ): Promise<SaveImageResult> {
-    return this.post("/api/fs/save-image", { data, filename, mimeType, projectPath });
+    return this.post("/api/fs/save-image", {
+      data,
+      filename,
+      mimeType,
+      projectPath,
+    });
+  }
+
+  async saveBoardBackground(
+    data: string,
+    filename: string,
+    mimeType: string,
+    projectPath: string
+  ): Promise<{ success: boolean; path?: string; error?: string }> {
+    return this.post("/api/fs/save-board-background", {
+      data,
+      filename,
+      mimeType,
+      projectPath,
+    });
+  }
+
+  async deleteBoardBackground(
+    projectPath: string
+  ): Promise<{ success: boolean; error?: string }> {
+    return this.post("/api/fs/delete-board-background", { projectPath });
   }
 
   // CLI checks - server-side
@@ -335,25 +371,6 @@ export class HttpApiClient implements ElectronAPI {
     return this.get("/api/setup/claude-status");
   }
 
-  async checkCodexCli(): Promise<{
-    success: boolean;
-    status?: string;
-    method?: string;
-    version?: string;
-    path?: string;
-    hasApiKey?: boolean;
-    recommendation?: string;
-    installCommands?: {
-      macos?: string;
-      windows?: string;
-      linux?: string;
-      npm?: string;
-    };
-    error?: string;
-  }> {
-    return this.get("/api/setup/codex-status");
-  }
-
   // Model API
   model = {
     getAvailable: async (): Promise<{
@@ -372,14 +389,6 @@ export class HttpApiClient implements ElectronAPI {
     },
   };
 
-  async testOpenAIConnection(apiKey?: string): Promise<{
-    success: boolean;
-    message?: string;
-    error?: string;
-  }> {
-    return this.post("/api/setup/test-openai", { apiKey });
-  }
-
   // Setup API
   setup = {
     getClaudeStatus: (): Promise<{
@@ -404,35 +413,12 @@ export class HttpApiClient implements ElectronAPI {
       error?: string;
     }> => this.get("/api/setup/claude-status"),
 
-    getCodexStatus: (): Promise<{
-      success: boolean;
-      status?: string;
-      method?: string;
-      version?: string;
-      path?: string;
-      auth?: {
-        authenticated: boolean;
-        method: string;
-        hasAuthFile: boolean;
-        hasEnvKey: boolean;
-        hasStoredApiKey?: boolean;
-        hasEnvApiKey?: boolean;
-      };
-      error?: string;
-    }> => this.get("/api/setup/codex-status"),
-
     installClaude: (): Promise<{
       success: boolean;
       message?: string;
       error?: string;
     }> => this.post("/api/setup/install-claude"),
 
-    installCodex: (): Promise<{
-      success: boolean;
-      message?: string;
-      error?: string;
-    }> => this.post("/api/setup/install-codex"),
-
     authClaude: (): Promise<{
       success: boolean;
       token?: string;
@@ -444,14 +430,10 @@ export class HttpApiClient implements ElectronAPI {
       output?: string;
     }> => this.post("/api/setup/auth-claude"),
 
-    authCodex: (apiKey?: string): Promise<{
-      success: boolean;
-      requiresManualAuth?: boolean;
-      command?: string;
-      error?: string;
-    }> => this.post("/api/setup/auth-codex", { apiKey }),
-
-    storeApiKey: (provider: string, apiKey: string): Promise<{
+    storeApiKey: (
+      provider: string,
+      apiKey: string
+    ): Promise<{
       success: boolean;
       error?: string;
     }> => this.post("/api/setup/store-api-key", { provider, apiKey }),
@@ -459,16 +441,9 @@ export class HttpApiClient implements ElectronAPI {
     getApiKeys: (): Promise<{
       success: boolean;
       hasAnthropicKey: boolean;
-      hasOpenAIKey: boolean;
       hasGoogleKey: boolean;
     }> => this.get("/api/setup/api-keys"),
 
-    configureCodexMcp: (projectPath: string): Promise<{
-      success: boolean;
-      configPath?: string;
-      error?: string;
-    }> => this.post("/api/setup/configure-codex-mcp", { projectPath }),
-
     getPlatform: (): Promise<{
       success: boolean;
       platform: string;
@@ -496,8 +471,11 @@ export class HttpApiClient implements ElectronAPI {
       this.post("/api/features/get", { projectPath, featureId }),
     create: (projectPath: string, feature: Feature) =>
       this.post("/api/features/create", { projectPath, feature }),
-    update: (projectPath: string, featureId: string, updates: Partial<Feature>) =>
-      this.post("/api/features/update", { projectPath, featureId, updates }),
+    update: (
+      projectPath: string,
+      featureId: string,
+      updates: Partial<Feature>
+    ) => this.post("/api/features/update", { projectPath, featureId, updates }),
     delete: (projectPath: string, featureId: string) =>
       this.post("/api/features/delete", { projectPath, featureId }),
     getAgentOutput: (projectPath: string, featureId: string) =>
@@ -514,8 +492,16 @@ export class HttpApiClient implements ElectronAPI {
       this.post("/api/auto-mode/stop-feature", { featureId }),
     status: (projectPath?: string) =>
       this.post("/api/auto-mode/status", { projectPath }),
-    runFeature: (projectPath: string, featureId: string, useWorktrees?: boolean) =>
-      this.post("/api/auto-mode/run-feature", { projectPath, featureId, useWorktrees }),
+    runFeature: (
+      projectPath: string,
+      featureId: string,
+      useWorktrees?: boolean
+    ) =>
+      this.post("/api/auto-mode/run-feature", {
+        projectPath,
+        featureId,
+        useWorktrees,
+      }),
     verifyFeature: (projectPath: string, featureId: string) =>
       this.post("/api/auto-mode/verify-feature", { projectPath, featureId }),
     resumeFeature: (projectPath: string, featureId: string) =>
@@ -539,7 +525,10 @@ export class HttpApiClient implements ElectronAPI {
     commitFeature: (projectPath: string, featureId: string) =>
       this.post("/api/auto-mode/commit-feature", { projectPath, featureId }),
     onEvent: (callback: (event: AutoModeEvent) => void) => {
-      return this.subscribeToEvent("auto-mode:event", callback as EventCallback);
+      return this.subscribeToEvent(
+        "auto-mode:event",
+        callback as EventCallback
+      );
     },
   };
 
@@ -558,7 +547,11 @@ export class HttpApiClient implements ElectronAPI {
     getDiffs: (projectPath: string, featureId: string) =>
       this.post("/api/worktree/diffs", { projectPath, featureId }),
     getFileDiff: (projectPath: string, featureId: string, filePath: string) =>
-      this.post("/api/worktree/file-diff", { projectPath, featureId, filePath }),
+      this.post("/api/worktree/file-diff", {
+        projectPath,
+        featureId,
+        filePath,
+      }),
   };
 
   // Git API
@@ -576,22 +569,45 @@ export class HttpApiClient implements ElectronAPI {
     stop: () => this.post("/api/suggestions/stop"),
     status: () => this.get("/api/suggestions/status"),
     onEvent: (callback: (event: SuggestionsEvent) => void) => {
-      return this.subscribeToEvent("suggestions:event", callback as EventCallback);
+      return this.subscribeToEvent(
+        "suggestions:event",
+        callback as EventCallback
+      );
     },
   };
 
   // Spec Regeneration API
   specRegeneration: SpecRegenerationAPI = {
-    create: (projectPath: string, projectOverview: string, generateFeatures?: boolean) =>
+    create: (
+      projectPath: string,
+      projectOverview: string,
+      generateFeatures?: boolean,
+      analyzeProject?: boolean,
+      maxFeatures?: number
+    ) =>
       this.post("/api/spec-regeneration/create", {
         projectPath,
         projectOverview,
         generateFeatures,
+        analyzeProject,
+        maxFeatures,
       }),
-    generate: (projectPath: string, projectDefinition: string) =>
-      this.post("/api/spec-regeneration/generate", { projectPath, projectDefinition }),
-    generateFeatures: (projectPath: string) =>
-      this.post("/api/spec-regeneration/generate-features", { projectPath }),
+    generate: (
+      projectPath: string,
+      projectDefinition: string,
+      generateFeatures?: boolean,
+      analyzeProject?: boolean,
+      maxFeatures?: number
+    ) =>
+      this.post("/api/spec-regeneration/generate", {
+        projectPath,
+        projectDefinition,
+        generateFeatures,
+        analyzeProject,
+        maxFeatures,
+      }),
+    generateFeatures: (projectPath: string, maxFeatures?: number) =>
+      this.post("/api/spec-regeneration/generate-features", { projectPath, maxFeatures }),
     stop: () => this.post("/api/spec-regeneration/stop"),
     status: () => this.get("/api/spec-regeneration/status"),
     onEvent: (callback: (event: SpecRegenerationEvent) => void) => {
@@ -636,7 +652,10 @@ export class HttpApiClient implements ElectronAPI {
 
   // Agent API
   agent = {
-    start: (sessionId: string, workingDirectory?: string): Promise<{
+    start: (
+      sessionId: string,
+      workingDirectory?: string
+    ): Promise<{
       success: boolean;
       messages?: Message[];
       error?: string;
@@ -648,9 +667,16 @@ export class HttpApiClient implements ElectronAPI {
       workingDirectory?: string,
       imagePaths?: string[]
     ): Promise<{ success: boolean; error?: string }> =>
-      this.post("/api/agent/send", { sessionId, message, workingDirectory, imagePaths }),
+      this.post("/api/agent/send", {
+        sessionId,
+        message,
+        workingDirectory,
+        imagePaths,
+      }),
 
-    getHistory: (sessionId: string): Promise<{
+    getHistory: (
+      sessionId: string
+    ): Promise<{
       success: boolean;
       messages?: Message[];
       isRunning?: boolean;
@@ -668,9 +694,26 @@ export class HttpApiClient implements ElectronAPI {
     },
   };
 
+  // Templates API
+  templates = {
+    clone: (
+      repoUrl: string,
+      projectName: string,
+      parentDir: string
+    ): Promise<{
+      success: boolean;
+      projectPath?: string;
+      projectName?: string;
+      error?: string;
+    }> =>
+      this.post("/api/templates/clone", { repoUrl, projectName, parentDir }),
+  };
+
   // Sessions API
   sessions = {
-    list: (includeArchived?: boolean): Promise<{
+    list: (
+      includeArchived?: boolean
+    ): Promise<{
       success: boolean;
       sessions?: SessionListItem[];
       error?: string;
@@ -700,13 +743,19 @@ export class HttpApiClient implements ElectronAPI {
     ): Promise<{ success: boolean; error?: string }> =>
       this.put(`/api/sessions/${sessionId}`, { name, tags }),
 
-    archive: (sessionId: string): Promise<{ success: boolean; error?: string }> =>
+    archive: (
+      sessionId: string
+    ): Promise<{ success: boolean; error?: string }> =>
       this.post(`/api/sessions/${sessionId}/archive`, {}),
 
-    unarchive: (sessionId: string): Promise<{ success: boolean; error?: string }> =>
+    unarchive: (
+      sessionId: string
+    ): Promise<{ success: boolean; error?: string }> =>
       this.post(`/api/sessions/${sessionId}/unarchive`, {}),
 
-    delete: (sessionId: string): Promise<{ success: boolean; error?: string }> =>
+    delete: (
+      sessionId: string
+    ): Promise<{ success: boolean; error?: string }> =>
       this.httpDelete(`/api/sessions/${sessionId}`),
   };
 }

apps/app/src/lib/project-init.ts

@@ -29,7 +29,9 @@ const REQUIRED_STRUCTURE: {
     ".automaker/features",
     ".automaker/images",
   ],
-  files: {},
+  files: {
+    ".automaker/categories.json": "[]",
+  },
 };
 
 /**

apps/app/src/lib/templates.ts

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

apps/app/src/lib/utils.ts

@@ -6,26 +6,12 @@ export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
 
-/**
- * Check if a model is a Codex/OpenAI model (doesn't support thinking)
- */
-export function isCodexModel(model?: AgentModel | string): boolean {
-  if (!model) return false;
-  const codexModels: string[] = [
-    "gpt-5.1-codex-max",
-    "gpt-5.1-codex",
-    "gpt-5.1-codex-mini",
-    "gpt-5.1",
-  ];
-  return codexModels.includes(model);
-}
-
 /**
  * Determine if the current model supports extended thinking controls
  */
 export function modelSupportsThinking(model?: AgentModel | string): boolean {
-  if (!model) return true;
-  return !isCodexModel(model);
+  // All Claude models support thinking
+  return true;
 }
 
 /**
@@ -36,10 +22,6 @@ export function getModelDisplayName(model: AgentModel | string): string {
     haiku: "Claude Haiku",
     sonnet: "Claude Sonnet",
     opus: "Claude Opus",
-    "gpt-5.1-codex-max": "GPT-5.1 Codex Max",
-    "gpt-5.1-codex": "GPT-5.1 Codex",
-    "gpt-5.1-codex-mini": "GPT-5.1 Codex Mini",
-    "gpt-5.1": "GPT-5.1",
   };
   return displayNames[model] || model;
 }