chore: update project management and API integration

- Added new scripts for server development and full application startup in package.json. - Enhanced project management by checking for existing projects to avoid duplicates. - Improved API integration with better error handling and connection checks in the Electron API. - Updated UI components to reflect changes in project and session management. - Refactored authentication status display to include more detailed information on methods used.
2026-01-31 06:42:03 +00:00 · 2025-12-12 00:23:43 -05:00
parent 02a1af3314
commit 4b9bd2641f
44 changed files with 8287 additions and 703 deletions
--- a/apps/app/electron/main-simplified.js
+++ b/apps/app/electron/main-simplified.js
@@ -0,0 +1,241 @@
+/**
+ * Simplified Electron main process
+ *
+ * This version spawns the backend server and uses HTTP API for most operations.
+ * Only native features (dialogs, shell) use IPC.
+ */
+
+const path = require("path");
+const { spawn } = require("child_process");
+
+// Load environment variables from .env file
+require("dotenv").config({ path: path.join(__dirname, "../.env") });
+
+const { app, BrowserWindow, ipcMain, dialog, shell } = require("electron");
+
+let mainWindow = null;
+let serverProcess = null;
+const SERVER_PORT = 3008;
+
+// Get icon path - works in both dev and production
+function getIconPath() {
+  return app.isPackaged
+    ? path.join(process.resourcesPath, "app", "public", "logo.png")
+    : path.join(__dirname, "../public/logo.png");
+}
+
+/**
+ * Start the backend server
+ */
+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");
+
+  // Set environment variables for server
+  const env = {
+    ...process.env,
+    PORT: SERVER_PORT.toString(),
+    DATA_DIR: app.getPath("userData"),
+  };
+
+  console.log("[Electron] Starting backend server...");
+
+  serverProcess = spawn("node", [serverPath], {
+    env,
+    stdio: ["ignore", "pipe", "pipe"],
+  });
+
+  serverProcess.stdout.on("data", (data) => {
+    console.log(`[Server] ${data.toString().trim()}`);
+  });
+
+  serverProcess.stderr.on("data", (data) => {
+    console.error(`[Server Error] ${data.toString().trim()}`);
+  });
+
+  serverProcess.on("close", (code) => {
+    console.log(`[Server] Process exited with code ${code}`);
+    serverProcess = null;
+  });
+
+  // Wait for server to be ready
+  await waitForServer();
+}
+
+/**
+ * Wait for server to be available
+ */
+async function waitForServer(maxAttempts = 30) {
+  const http = require("http");
+
+  for (let i = 0; i < maxAttempts; i++) {
+    try {
+      await new Promise((resolve, reject) => {
+        const req = http.get(`http://localhost:${SERVER_PORT}/api/health`, (res) => {
+          if (res.statusCode === 200) {
+            resolve();
+          } else {
+            reject(new Error(`Status: ${res.statusCode}`));
+          }
+        });
+        req.on("error", reject);
+        req.setTimeout(1000, () => {
+          req.destroy();
+          reject(new Error("Timeout"));
+        });
+      });
+      console.log("[Electron] Server is ready");
+      return;
+    } catch {
+      await new Promise((r) => setTimeout(r, 500));
+    }
+  }
+
+  throw new Error("Server failed to start");
+}
+
+/**
+ * Create the main window
+ */
+function createWindow() {
+  mainWindow = new BrowserWindow({
+    width: 1400,
+    height: 900,
+    minWidth: 1024,
+    minHeight: 700,
+    icon: getIconPath(),
+    webPreferences: {
+      preload: path.join(__dirname, "preload-simplified.js"),
+      contextIsolation: true,
+      nodeIntegration: false,
+    },
+    titleBarStyle: "hiddenInset",
+    backgroundColor: "#0a0a0a",
+  });
+
+  // Load Next.js dev server in development or production build
+  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.on("closed", () => {
+    mainWindow = null;
+  });
+}
+
+// App lifecycle
+app.whenReady().then(async () => {
+  // Set app icon (dock icon on macOS)
+  if (process.platform === "darwin" && app.dock) {
+    app.dock.setIcon(getIconPath());
+  }
+
+  try {
+    // Start backend server
+    await startServer();
+
+    // Create window
+    createWindow();
+  } catch (error) {
+    console.error("[Electron] Failed to start:", error);
+    app.quit();
+  }
+
+  app.on("activate", () => {
+    if (BrowserWindow.getAllWindows().length === 0) {
+      createWindow();
+    }
+  });
+});
+
+app.on("window-all-closed", () => {
+  if (process.platform !== "darwin") {
+    app.quit();
+  }
+});
+
+app.on("before-quit", () => {
+  // Kill server process
+  if (serverProcess) {
+    console.log("[Electron] Stopping server...");
+    serverProcess.kill();
+    serverProcess = null;
+  }
+});
+
+// ============================================
+// IPC Handlers - Only native features
+// ============================================
+
+// Native file dialogs
+ipcMain.handle("dialog:openDirectory", async () => {
+  const result = await dialog.showOpenDialog(mainWindow, {
+    properties: ["openDirectory", "createDirectory"],
+  });
+  return result;
+});
+
+ipcMain.handle("dialog:openFile", async (_, options = {}) => {
+  const result = await dialog.showOpenDialog(mainWindow, {
+    properties: ["openFile"],
+    ...options,
+  });
+  return result;
+});
+
+ipcMain.handle("dialog:saveFile", async (_, options = {}) => {
+  const result = await dialog.showSaveDialog(mainWindow, options);
+  return result;
+});
+
+// Shell operations
+ipcMain.handle("shell:openExternal", async (_, url) => {
+  try {
+    await shell.openExternal(url);
+    return { success: true };
+  } catch (error) {
+    return { success: false, error: error.message };
+  }
+});
+
+ipcMain.handle("shell:openPath", async (_, filePath) => {
+  try {
+    await shell.openPath(filePath);
+    return { success: true };
+  } catch (error) {
+    return { success: false, error: error.message };
+  }
+});
+
+// App info
+ipcMain.handle("app:getPath", async (_, name) => {
+  return app.getPath(name);
+});
+
+ipcMain.handle("app:getVersion", async () => {
+  return app.getVersion();
+});
+
+ipcMain.handle("app:isPackaged", async () => {
+  return app.isPackaged;
+});
+
+// Ping - for connection check
+ipcMain.handle("ping", async () => {
+  return "pong";
+});
+
+// Get server URL for HTTP client
+ipcMain.handle("server:getUrl", async () => {
+  return `http://localhost:${SERVER_PORT}`;
+});
--- a/apps/app/electron/preload-simplified.js
+++ b/apps/app/electron/preload-simplified.js
@@ -0,0 +1,37 @@
+/**
+ * Simplified Electron preload script
+ *
+ * Only exposes native features (dialogs, shell) and server URL.
+ * All other operations go through HTTP API.
+ */
+
+const { contextBridge, ipcRenderer } = require("electron");
+
+// Expose minimal API for native features
+contextBridge.exposeInMainWorld("electronAPI", {
+  // Platform info
+  platform: process.platform,
+  isElectron: true,
+
+  // Connection check
+  ping: () => ipcRenderer.invoke("ping"),
+
+  // Get server URL for HTTP client
+  getServerUrl: () => ipcRenderer.invoke("server:getUrl"),
+
+  // Native dialogs - better UX than prompt()
+  openDirectory: () => ipcRenderer.invoke("dialog:openDirectory"),
+  openFile: (options) => ipcRenderer.invoke("dialog:openFile", options),
+  saveFile: (options) => ipcRenderer.invoke("dialog:saveFile", options),
+
+  // Shell operations
+  openExternalLink: (url) => ipcRenderer.invoke("shell:openExternal", url),
+  openPath: (filePath) => ipcRenderer.invoke("shell:openPath", filePath),
+
+  // App info
+  getPath: (name) => ipcRenderer.invoke("app:getPath", name),
+  getVersion: () => ipcRenderer.invoke("app:getVersion"),
+  isPackaged: () => ipcRenderer.invoke("app:isPackaged"),
+});
+
+console.log("[Preload] Electron API exposed (simplified mode)");
--- a/apps/app/src/app/page.tsx
+++ b/apps/app/src/app/page.tsx
@@ -94,7 +94,7 @@ export default function Home() {
      try {
        const api = getElectronAPI();
        const result = await api.ping();
-        setIpcConnected(result === "pong" || result === "pong (mock)");
+        setIpcConnected(result === "pong");
      } catch (error) {
        console.error("IPC connection failed:", error);
        setIpcConnected(false);
@@ -193,8 +193,8 @@ export default function Home() {
        <SetupView />
        {/* Environment indicator */}
        {isMounted && !isElectron() && (
-          <div className="fixed bottom-4 right-4 px-3 py-1.5 bg-yellow-500/10 text-yellow-500 text-xs rounded-full border border-yellow-500/20 pointer-events-none">
-            Web Mode (Mock IPC)
+          <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>
@@ -210,8 +210,8 @@ export default function Home() {

      {/* 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-yellow-500/10 text-yellow-500 text-xs rounded-full border border-yellow-500/20 pointer-events-none">
-          Web Mode (Mock IPC)
+        <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>
      )}

--- a/apps/app/src/components/layout/sidebar.tsx
+++ b/apps/app/src/components/layout/sidebar.tsx
@@ -413,14 +413,33 @@ export function Sidebar() {
          return;
        }

-        const project = {
-          id: `project-${Date.now()}`,
-          name,
-          path,
-          lastOpened: new Date().toISOString(),
-        };
+        // 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
+          );
+          useAppStore.setState({ projects: updatedProjects });
+        } else {
+          // Create new project
+          project = {
+            id: `project-${Date.now()}`,
+            name,
+            path,
+            lastOpened: new Date().toISOString(),
+          };
+          addProject(project);
+        }

-        addProject(project);
        setCurrentProject(project);

        // Check if app_spec.txt exists
@@ -455,7 +474,7 @@ export function Sidebar() {
        });
      }
    }
-  }, [addProject, setCurrentProject]);
+  }, [projects, addProject, setCurrentProject]);

  const handleRestoreProject = useCallback(
    (projectId: string) => {
--- a/apps/app/src/components/session-manager.tsx
+++ b/apps/app/src/components/session-manager.tsx
@@ -4,14 +4,13 @@ import { useState, useEffect } from "react";
 import {
  Card,
  CardContent,
-  CardDescription,
  CardHeader,
  CardTitle,
 } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { HotkeyButton } from "@/components/ui/hotkey-button";
 import { Input } from "@/components/ui/input";
-import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import {
  Plus,
  MessageSquare,
@@ -26,7 +25,6 @@ import {
 import { cn } from "@/lib/utils";
 import type { SessionListItem } from "@/types/electron";
 import { useKeyboardShortcutsConfig } from "@/hooks/use-keyboard-shortcuts";
-import { useAppStore } from "@/store/app-store";

 // Random session name generator
 const adjectives = [
--- a/apps/app/src/components/ui/description-image-dropzone.tsx
+++ b/apps/app/src/components/ui/description-image-dropzone.tsx
@@ -1,6 +1,6 @@
 "use client";

-import React, { useState, useRef, useCallback, useEffect } from "react";
+import React, { useState, useRef, useCallback } from "react";
 import { cn } from "@/lib/utils";
 import { ImageIcon, X, Loader2 } from "lucide-react";
 import { Textarea } from "@/components/ui/textarea";
@@ -98,7 +98,7 @@ export function DescriptionImageDropZone({
    });
  };

-  const saveImageToTemp = async (
+  const saveImageToTemp = useCallback(async (
    base64Data: string,
    filename: string,
    mimeType: string
@@ -107,8 +107,8 @@ export function DescriptionImageDropZone({
      const api = getElectronAPI();
      // Check if saveImageToTemp method exists
      if (!api.saveImageToTemp) {
-        // Fallback for mock API - return a mock path in .automaker/images
-        console.log("[DescriptionImageDropZone] Using mock path for image");
+        // Fallback path when saveImageToTemp is not available
+        console.log("[DescriptionImageDropZone] Using fallback path for image");
        return `.automaker/images/${Date.now()}_${filename}`;
      }

@@ -124,7 +124,7 @@ export function DescriptionImageDropZone({
      console.error("[DescriptionImageDropZone] Error saving image:", error);
      return null;
    }
-  };
+  }, [currentProject?.path]);

  const processFiles = useCallback(
    async (files: FileList) => {
@@ -193,7 +193,7 @@ export function DescriptionImageDropZone({

      setIsProcessing(false);
    },
-    [disabled, isProcessing, images, maxFiles, maxFileSize, onImagesChange, previewImages]
+    [disabled, isProcessing, images, maxFiles, maxFileSize, onImagesChange, previewImages, saveImageToTemp]
  );

  const handleDrop = useCallback(
--- a/apps/app/src/components/views/agent-tools-view.tsx
+++ b/apps/app/src/components/views/agent-tools-view.tsx
@@ -149,12 +149,12 @@ export function AgentToolsView() {
    setTerminalResult(null);

    try {
-      // Simulate agent requesting terminal command execution
-      console.log(`[Agent Tool] Requesting to run command: ${terminalCommand}`);
+      // Terminal command simulation for demonstration purposes
+      console.log(`[Agent Tool] Simulating command: ${terminalCommand}`);

-      // In mock mode, simulate terminal output
-      // In real Electron mode, this would use child_process
-      const mockOutputs: Record<string, string> = {
+      // Simulated outputs for common commands (preview mode)
+      // In production, the agent executes commands via Claude SDK
+      const simulatedOutputs: Record<string, string> = {
        ls: "app_spec.txt\nfeatures\nnode_modules\npackage.json\nsrc\ntests\ntsconfig.json",
        pwd: currentProject?.path || "/Users/demo/project",
        "echo hello": "hello",
@@ -168,8 +168,8 @@ export function AgentToolsView() {
      await new Promise((resolve) => setTimeout(resolve, 500));

      const output =
-        mockOutputs[terminalCommand.toLowerCase()] ||
-        `Command executed: ${terminalCommand}\n(Mock output - real execution requires Electron mode)`;
+        simulatedOutputs[terminalCommand.toLowerCase()] ||
+        `[Preview] ${terminalCommand}\n(Terminal commands are executed by the agent during feature implementation)`;

      setTerminalResult({
        success: true,
--- a/apps/app/src/components/views/board-view.tsx
+++ b/apps/app/src/components/views/board-view.tsx
@@ -394,22 +394,25 @@ export function BoardView() {
  }, []);

  // Load features using features API
+  // IMPORTANT: Do NOT add 'features' to dependency array - it would cause infinite reload loop
  const loadFeatures = useCallback(async () => {
    if (!currentProject) return;

    const currentPath = currentProject.path;
    const previousPath = prevProjectPathRef.current;
+    const isProjectSwitch = previousPath !== null && currentPath !== previousPath;

-    // If project switched, clear features first to prevent cross-contamination
-    // Also treat this as an initial load for the new project
-    if (previousPath !== null && currentPath !== previousPath) {
+    // Get cached features from store (without adding to dependencies)
+    const cachedFeatures = useAppStore.getState().features;
+
+    // If project switched, mark it but don't clear features yet
+    // We'll clear after successful API load to prevent data loss
+    if (isProjectSwitch) {
      console.log(
-        `[BoardView] Project switch detected: ${previousPath} -> ${currentPath}, clearing features`
+        `[BoardView] Project switch detected: ${previousPath} -> ${currentPath}`
      );
      isSwitchingProjectRef.current = true;
      isInitialLoadRef.current = true;
-      setFeatures([]);
-      setPersistedCategories([]); // Also clear categories
    }

    // Update the ref to track current project
@@ -424,6 +427,7 @@ export function BoardView() {
      const api = getElectronAPI();
      if (!api.features) {
        console.error("[BoardView] Features API not available");
+        // Keep cached features if API is unavailable
        return;
      }

@@ -441,10 +445,31 @@ export function BoardView() {
            thinkingLevel: f.thinkingLevel || "none",
          })
        );
+        // Successfully loaded features - now safe to set them
        setFeatures(featuresWithIds);
+
+        // Only clear categories on project switch AFTER successful load
+        if (isProjectSwitch) {
+          setPersistedCategories([]);
+        }
+      } else if (!result.success && result.error) {
+        console.error("[BoardView] API returned error:", result.error);
+        // If it's a new project or the error indicates no features found,
+        // that's expected - start with empty array
+        if (isProjectSwitch) {
+          setFeatures([]);
+          setPersistedCategories([]);
+        }
+        // Otherwise keep cached features
      }
    } catch (error) {
      console.error("Failed to load features:", error);
+      // On error, keep existing cached features for the current project
+      // Only clear on project switch if we have no features from server
+      if (isProjectSwitch && cachedFeatures.length === 0) {
+        setFeatures([]);
+        setPersistedCategories([]);
+      }
    } finally {
      setIsLoading(false);
      isInitialLoadRef.current = false;
@@ -1475,8 +1500,14 @@ export function BoardView() {
      if (isRunning) {
        map.in_progress.push(f);
      } else {
-        // Otherwise, use the feature's status
-        map[f.status].push(f);
+        // Otherwise, use the feature's status (fallback to backlog for unknown statuses)
+        const status = f.status as ColumnId;
+        if (map[status]) {
+          map[status].push(f);
+        } else {
+          // Unknown status, default to backlog
+          map.backlog.push(f);
+        }
      }
    });

--- a/apps/app/src/components/views/settings-view/api-keys/authentication-status-display.tsx
+++ b/apps/app/src/components/views/settings-view/api-keys/authentication-status-display.tsx
@@ -61,12 +61,14 @@ export function AuthenticationStatusDisplay({
                    {claudeAuthStatus.method === "oauth_token_env"
                      ? "Using CLAUDE_CODE_OAUTH_TOKEN"
                      : claudeAuthStatus.method === "oauth_token"
-                      ? "Using stored OAuth token"
+                      ? "Using stored OAuth token (claude login)"
                      : claudeAuthStatus.method === "api_key_env"
                      ? "Using ANTHROPIC_API_KEY"
                      : claudeAuthStatus.method === "api_key"
                      ? "Using stored API key"
-                      : "Unknown method"}
+                      : claudeAuthStatus.method === "credentials_file"
+                      ? "Using credentials file"
+                      : `Using ${claudeAuthStatus.method || "detected"} authentication`}
                  </span>
                </div>
              </>
@@ -107,14 +109,16 @@ export function AuthenticationStatusDisplay({
                <div className="flex items-center gap-2 text-muted-foreground">
                  <Info className="w-3 h-3 shrink-0" />
                  <span>
-                    {codexAuthStatus.method === "cli_verified" ||
-                    codexAuthStatus.method === "cli_tokens"
+                    {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"
-                      : "Unknown method"}
+                      : `Using ${codexAuthStatus.method || "unknown"} authentication`}
                  </span>
                </div>
              </>
--- a/apps/app/src/components/views/settings-view/hooks/use-cli-status.ts
+++ b/apps/app/src/components/views/settings-view/hooks/use-cli-status.ts
@@ -68,19 +68,24 @@ export function useCliStatus() {
        try {
          const result = await api.setup.getClaudeStatus();
          if (result.success && result.auth) {
-            const auth = result.auth;
-            // Validate method is one of the expected values, default to "none"
-            const validMethods = ["oauth_token_env", "oauth_token", "api_key", "api_key_env", "none"] as const;
+            // Cast to extended type that includes server-added fields
+            const auth = result.auth as typeof result.auth & {
+              oauthTokenValid?: boolean;
+              apiKeyValid?: boolean;
+            };
+            // Map server method names to client method types
+            // Server returns: oauth_token_env, oauth_token, api_key_env, api_key, credentials_file, none
+            const validMethods = ["oauth_token_env", "oauth_token", "api_key", "api_key_env", "credentials_file", "none"] as const;
            type AuthMethod = typeof validMethods[number];
            const method: AuthMethod = validMethods.includes(auth.method as AuthMethod)
              ? (auth.method as AuthMethod)
-              : "none";
+              : auth.authenticated ? "api_key" : "none"; // Default authenticated to api_key, not none
            const authStatus = {
              authenticated: auth.authenticated,
              method,
              hasCredentialsFile: auth.hasCredentialsFile ?? false,
-              oauthTokenValid: auth.hasStoredOAuthToken || auth.hasEnvOAuthToken,
-              apiKeyValid: auth.hasStoredApiKey || auth.hasEnvApiKey,
+              oauthTokenValid: auth.oauthTokenValid || auth.hasStoredOAuthToken || auth.hasEnvOAuthToken,
+              apiKeyValid: auth.apiKeyValid || auth.hasStoredApiKey || auth.hasEnvApiKey,
              hasEnvOAuthToken: auth.hasEnvOAuthToken,
              hasEnvApiKey: auth.hasEnvApiKey,
            };
@@ -96,27 +101,30 @@ export function useCliStatus() {
        try {
          const result = await api.setup.getCodexStatus();
          if (result.success && result.auth) {
-            const auth = result.auth;
-            // Determine method - prioritize cli_verified and cli_tokens over auth_file
-            const method =
-              auth.method === "cli_verified" || auth.method === "cli_tokens"
-                ? auth.method === "cli_verified"
-                  ? ("cli_verified" as const)
-                  : ("cli_tokens" as const)
-                : auth.method === "auth_file"
-                ? ("api_key" as const)
-                : auth.method === "env_var"
-                ? ("env" as const)
-                : ("none" as const);
+            // 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
+              // Only set apiKeyValid for actual API key methods, not CLI login or subscription
              apiKeyValid:
-                method === "cli_verified" || method === "cli_tokens"
+                method === "cli_verified" || method === "cli_tokens" || method === "subscription"
                  ? undefined
-                  : auth.hasAuthFile || auth.hasEnvKey,
+                  : auth.hasAuthFile || auth.hasEnvKey || auth.hasEnvApiKey,
+              hasSubscription: auth.hasSubscription,
+              cliLoggedIn: auth.cliLoggedIn,
            };
            setCodexAuthStatus(authStatus);
          }
--- a/apps/app/src/components/views/welcome-view.tsx
+++ b/apps/app/src/components/views/welcome-view.tsx
@@ -21,7 +21,7 @@ import {
  CardTitle,
 } from "@/components/ui/card";
 import { useAppStore } from "@/store/app-store";
-import { getElectronAPI } from "@/lib/electron";
+import { getElectronAPI, type Project } from "@/lib/electron";
 import { initializeProject } from "@/lib/project-init";
 import {
  FolderOpen,
@@ -105,14 +105,34 @@ export function WelcomeView() {
          return;
        }

-        const project = {
-          id: `project-${Date.now()}`,
-          name,
-          path,
-          lastOpened: new Date().toISOString(),
-        };
+        // 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);
+        }

-        addProject(project);
        setCurrentProject(project);

        // Show initialization dialog if files were created
@@ -148,7 +168,7 @@ export function WelcomeView() {
        setIsOpening(false);
      }
    },
-    [addProject, setCurrentProject, analyzeProject]
+    [projects, addProject, setCurrentProject, analyzeProject]
  );

  const handleOpenProject = useCallback(async () => {
--- a/apps/app/src/lib/electron.ts
+++ b/apps/app/src/lib/electron.ts
@@ -443,13 +443,109 @@ export const isElectron = (): boolean => {
  return typeof window !== "undefined" && window.isElectron === true;
 };

-// Get the Electron API or a mock for web development
+// Check if backend server is available
+let serverAvailable: boolean | null = null;
+let serverCheckPromise: Promise<boolean> | null = null;
+
+export const checkServerAvailable = async (): Promise<boolean> => {
+  if (serverAvailable !== null) return serverAvailable;
+  if (serverCheckPromise) return serverCheckPromise;
+
+  serverCheckPromise = (async () => {
+    try {
+      const serverUrl =
+        process.env.NEXT_PUBLIC_SERVER_URL || "http://localhost:3008";
+      const response = await fetch(`${serverUrl}/api/health`, {
+        method: "GET",
+        signal: AbortSignal.timeout(2000),
+      });
+      serverAvailable = response.ok;
+    } catch {
+      serverAvailable = false;
+    }
+    return serverAvailable;
+  })();
+
+  return serverCheckPromise;
+};
+
+// Reset server check (useful for retrying connection)
+export const resetServerCheck = (): void => {
+  serverAvailable = null;
+  serverCheckPromise = null;
+};
+
+// Cached HTTP client instance
+let httpClientInstance: ElectronAPI | null = null;
+
+// Check if we're in simplified Electron mode (HTTP backend instead of IPC)
+const isSimplifiedElectronMode = (): boolean => {
+  if (typeof window === "undefined") return false;
+  const api = window.electronAPI as any;
+  // Simplified mode has isElectron flag and getServerUrl but NOT readFile
+  return api?.isElectron === true &&
+         typeof api?.getServerUrl === "function" &&
+         typeof api?.readFile !== "function";
+};
+
+// Get the Electron API or HTTP client for web mode
+// In simplified Electron mode and web mode, uses HTTP client
 export const getElectronAPI = (): ElectronAPI => {
+  // Check if we're in simplified Electron mode (uses HTTP backend)
+  if (isSimplifiedElectronMode()) {
+    if (typeof window !== "undefined" && !httpClientInstance) {
+      const { getHttpApiClient } = require("./http-api-client");
+      httpClientInstance = getHttpApiClient();
+    }
+    return httpClientInstance!;
+  }
+
+  // Full Electron API with IPC
  if (isElectron() && window.electronAPI) {
    return window.electronAPI;
  }

-  // Return mock API for web development
+  // Web mode: use HTTP API client
+  if (typeof window !== "undefined") {
+    if (!httpClientInstance) {
+      const { getHttpApiClient } = require("./http-api-client");
+      httpClientInstance = getHttpApiClient();
+    }
+    return httpClientInstance!;
+  }
+
+  // SSR fallback - this shouldn't be called during actual operation
+  throw new Error("Cannot get Electron API during SSR");
+};
+
+// Async version that checks server availability first
+export const getElectronAPIAsync = async (): Promise<ElectronAPI> => {
+  // Simplified Electron mode or web mode: use HTTP client
+  if (isSimplifiedElectronMode() || !isElectron()) {
+    if (typeof window !== "undefined") {
+      const { getHttpApiClient } = await import("./http-api-client");
+      return getHttpApiClient();
+    }
+  }
+
+  // Full Electron API with IPC
+  if (isElectron() && window.electronAPI) {
+    return window.electronAPI;
+  }
+
+  throw new Error("Cannot get Electron API during SSR");
+};
+
+// Check if backend is connected (for showing connection status in UI)
+export const isBackendConnected = async (): Promise<boolean> => {
+  // Full Electron mode: backend is built-in
+  if (isElectron() && !isSimplifiedElectronMode()) return true;
+  // Simplified Electron or web mode: check server availability
+  return await checkServerAvailable();
+};
+
+// Mock API for development/fallback when no backend is available
+const getMockElectronAPI = (): ElectronAPI => {
  return {
    ping: async () => "pong (mock)",

--- a/apps/app/src/lib/http-api-client.ts
+++ b/apps/app/src/lib/http-api-client.ts
@@ -0,0 +1,664 @@
+/**
+ * HTTP API Client for web mode
+ *
+ * This client provides the same API as the Electron IPC bridge,
+ * but communicates with the backend server via HTTP/WebSocket.
+ */
+
+import type {
+  ElectronAPI,
+  FileResult,
+  WriteResult,
+  ReaddirResult,
+  StatResult,
+  DialogResult,
+  SaveImageResult,
+  AutoModeAPI,
+  FeaturesAPI,
+  SuggestionsAPI,
+  SpecRegenerationAPI,
+  AutoModeEvent,
+  SuggestionsEvent,
+  SpecRegenerationEvent,
+  FeatureSuggestion,
+  SuggestionType,
+} from "./electron";
+import type { Feature } from "@/store/app-store";
+import type {
+  WorktreeAPI,
+  GitAPI,
+  ModelDefinition,
+  ProviderStatus,
+} from "@/types/electron";
+
+// Check if we're in simplified Electron mode (Electron with HTTP backend)
+const isSimplifiedElectronMode = (): boolean => {
+  if (typeof window === "undefined") return false;
+  const api = (window as any).electronAPI;
+  // Simplified mode has isElectron flag but limited methods
+  return api?.isElectron === true && typeof api?.getServerUrl === "function";
+};
+
+// Check if native Electron dialogs are available
+const hasNativeDialogs = (): boolean => {
+  if (typeof window === "undefined") return false;
+  const api = (window as any).electronAPI;
+  return typeof api?.openDirectory === "function";
+};
+
+// Server URL - configurable via environment variable or Electron
+const getServerUrl = async (): Promise<string> => {
+  if (typeof window !== "undefined") {
+    // In simplified Electron mode, get URL from main process
+    const api = (window as any).electronAPI;
+    if (api?.getServerUrl) {
+      try {
+        return await api.getServerUrl();
+      } catch {
+        // Fall through to defaults
+      }
+    }
+
+    // Check for environment variable
+    const envUrl = process.env.NEXT_PUBLIC_SERVER_URL;
+    if (envUrl) return envUrl;
+
+    // Default to localhost for development
+    return "http://localhost:3008";
+  }
+  return "http://localhost:3008";
+};
+
+// Synchronous version for constructor (uses default, then updates)
+const getServerUrlSync = (): string => {
+  if (typeof window !== "undefined") {
+    const envUrl = process.env.NEXT_PUBLIC_SERVER_URL;
+    if (envUrl) return envUrl;
+  }
+  return "http://localhost:3008";
+};
+
+// Get API key from environment variable
+const getApiKey = (): string | null => {
+  if (typeof window !== "undefined") {
+    return process.env.NEXT_PUBLIC_AUTOMAKER_API_KEY || null;
+  }
+  return null;
+};
+
+type EventType =
+  | "agent:stream"
+  | "auto-mode:event"
+  | "suggestions:event"
+  | "spec-regeneration:event";
+
+type EventCallback = (payload: unknown) => void;
+
+/**
+ * HTTP API Client that implements ElectronAPI interface
+ */
+export class HttpApiClient implements ElectronAPI {
+  private serverUrl: string;
+  private ws: WebSocket | null = null;
+  private eventCallbacks: Map<EventType, Set<EventCallback>> = new Map();
+  private reconnectTimer: NodeJS.Timeout | null = null;
+  private isConnecting = false;
+
+  constructor() {
+    this.serverUrl = getServerUrlSync();
+    // Update server URL asynchronously if in Electron
+    this.initServerUrl();
+    this.connectWebSocket();
+  }
+
+  private async initServerUrl(): Promise<void> {
+    const url = await getServerUrl();
+    if (url !== this.serverUrl) {
+      this.serverUrl = url;
+      // Reconnect WebSocket with new URL
+      if (this.ws) {
+        this.ws.close();
+        this.ws = null;
+      }
+      this.connectWebSocket();
+    }
+  }
+
+  private connectWebSocket(): void {
+    if (this.isConnecting || (this.ws && this.ws.readyState === WebSocket.OPEN)) {
+      return;
+    }
+
+    this.isConnecting = true;
+
+    try {
+      const wsUrl = this.serverUrl.replace(/^http/, "ws") + "/api/events";
+      this.ws = new WebSocket(wsUrl);
+
+      this.ws.onopen = () => {
+        console.log("[HttpApiClient] WebSocket connected");
+        this.isConnecting = false;
+        if (this.reconnectTimer) {
+          clearTimeout(this.reconnectTimer);
+          this.reconnectTimer = null;
+        }
+      };
+
+      this.ws.onmessage = (event) => {
+        try {
+          const data = JSON.parse(event.data);
+          const callbacks = this.eventCallbacks.get(data.type);
+          if (callbacks) {
+            callbacks.forEach((cb) => cb(data.payload));
+          }
+        } catch (error) {
+          console.error("[HttpApiClient] Failed to parse WebSocket message:", error);
+        }
+      };
+
+      this.ws.onclose = () => {
+        console.log("[HttpApiClient] WebSocket disconnected");
+        this.isConnecting = false;
+        this.ws = null;
+        // Attempt to reconnect after 5 seconds
+        if (!this.reconnectTimer) {
+          this.reconnectTimer = setTimeout(() => {
+            this.reconnectTimer = null;
+            this.connectWebSocket();
+          }, 5000);
+        }
+      };
+
+      this.ws.onerror = (error) => {
+        console.error("[HttpApiClient] WebSocket error:", error);
+        this.isConnecting = false;
+      };
+    } catch (error) {
+      console.error("[HttpApiClient] Failed to create WebSocket:", error);
+      this.isConnecting = false;
+    }
+  }
+
+  private subscribeToEvent(type: EventType, callback: EventCallback): () => void {
+    if (!this.eventCallbacks.has(type)) {
+      this.eventCallbacks.set(type, new Set());
+    }
+    this.eventCallbacks.get(type)!.add(callback);
+
+    // Ensure WebSocket is connected
+    this.connectWebSocket();
+
+    return () => {
+      const callbacks = this.eventCallbacks.get(type);
+      if (callbacks) {
+        callbacks.delete(callback);
+      }
+    };
+  }
+
+  private getHeaders(): Record<string, string> {
+    const headers: Record<string, string> = {
+      "Content-Type": "application/json",
+    };
+    const apiKey = getApiKey();
+    if (apiKey) {
+      headers["X-API-Key"] = apiKey;
+    }
+    return headers;
+  }
+
+  private async post<T>(endpoint: string, body?: unknown): Promise<T> {
+    const response = await fetch(`${this.serverUrl}${endpoint}`, {
+      method: "POST",
+      headers: this.getHeaders(),
+      body: body ? JSON.stringify(body) : undefined,
+    });
+    return response.json();
+  }
+
+  private async get<T>(endpoint: string): Promise<T> {
+    const headers = this.getHeaders();
+    const response = await fetch(`${this.serverUrl}${endpoint}`, { headers });
+    return response.json();
+  }
+
+  // Basic operations
+  async ping(): Promise<string> {
+    const result = await this.get<{ status: string }>("/api/health");
+    return result.status === "ok" ? "pong" : "error";
+  }
+
+  async openExternalLink(url: string): Promise<{ success: boolean; error?: string }> {
+    // Use native Electron shell if available (better UX)
+    if (hasNativeDialogs()) {
+      const api = (window as any).electronAPI;
+      if (api.openExternalLink) {
+        return api.openExternalLink(url);
+      }
+    }
+    // Web mode: open in new tab
+    window.open(url, "_blank", "noopener,noreferrer");
+    return { success: true };
+  }
+
+  // File picker - uses native Electron dialogs when available, otherwise prompt
+  async openDirectory(): Promise<DialogResult> {
+    // Use native Electron dialog if available
+    if (hasNativeDialogs()) {
+      const api = (window as any).electronAPI;
+      return api.openDirectory();
+    }
+
+    // Web mode: show a modal to let user type/paste path
+    const path = prompt("Enter project directory path:");
+    if (!path) {
+      return { canceled: true, filePaths: [] };
+    }
+
+    // Validate with server
+    const result = await this.post<{
+      success: boolean;
+      path?: string;
+      error?: string;
+    }>("/api/fs/validate-path", { filePath: path });
+
+    if (result.success && result.path) {
+      return { canceled: false, filePaths: [result.path] };
+    }
+
+    alert(result.error || "Invalid path");
+    return { canceled: true, filePaths: [] };
+  }
+
+  async openFile(options?: object): Promise<DialogResult> {
+    // Use native Electron dialog if available
+    if (hasNativeDialogs()) {
+      const api = (window as any).electronAPI;
+      return api.openFile(options);
+    }
+
+    // Web mode: prompt for file path
+    const path = prompt("Enter file path:");
+    if (!path) {
+      return { canceled: true, filePaths: [] };
+    }
+
+    const result = await this.post<{ success: boolean; exists: boolean }>(
+      "/api/fs/exists",
+      { filePath: path }
+    );
+
+    if (result.success && result.exists) {
+      return { canceled: false, filePaths: [path] };
+    }
+
+    alert("File does not exist");
+    return { canceled: true, filePaths: [] };
+  }
+
+  // File system operations
+  async readFile(filePath: string): Promise<FileResult> {
+    return this.post("/api/fs/read", { filePath });
+  }
+
+  async writeFile(filePath: string, content: string): Promise<WriteResult> {
+    return this.post("/api/fs/write", { filePath, content });
+  }
+
+  async mkdir(dirPath: string): Promise<WriteResult> {
+    return this.post("/api/fs/mkdir", { dirPath });
+  }
+
+  async readdir(dirPath: string): Promise<ReaddirResult> {
+    return this.post("/api/fs/readdir", { dirPath });
+  }
+
+  async exists(filePath: string): Promise<boolean> {
+    const result = await this.post<{ success: boolean; exists: boolean }>(
+      "/api/fs/exists",
+      { filePath }
+    );
+    return result.exists;
+  }
+
+  async stat(filePath: string): Promise<StatResult> {
+    return this.post("/api/fs/stat", { filePath });
+  }
+
+  async deleteFile(filePath: string): Promise<WriteResult> {
+    return this.post("/api/fs/delete", { filePath });
+  }
+
+  async trashItem(filePath: string): Promise<WriteResult> {
+    // In web mode, trash is just delete
+    return this.deleteFile(filePath);
+  }
+
+  async getPath(name: string): Promise<string> {
+    // Server provides data directory
+    if (name === "userData") {
+      const result = await this.get<{ dataDir: string }>("/api/health/detailed");
+      return result.dataDir || "/data";
+    }
+    return `/data/${name}`;
+  }
+
+  async saveImageToTemp(
+    data: string,
+    filename: string,
+    mimeType: string,
+    projectPath?: string
+  ): Promise<SaveImageResult> {
+    return this.post("/api/fs/save-image", { data, filename, mimeType, projectPath });
+  }
+
+  // CLI checks - server-side
+  async checkClaudeCli(): Promise<{
+    success: boolean;
+    status?: string;
+    method?: string;
+    version?: string;
+    path?: string;
+    recommendation?: string;
+    installCommands?: {
+      macos?: string;
+      windows?: string;
+      linux?: string;
+      npm?: string;
+    };
+    error?: string;
+  }> {
+    return this.get("/api/setup/claude-status");
+  }
+
+  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<{
+      success: boolean;
+      models?: ModelDefinition[];
+      error?: string;
+    }> => {
+      return this.get("/api/models/available");
+    },
+    checkProviders: async (): Promise<{
+      success: boolean;
+      providers?: Record<string, ProviderStatus>;
+      error?: string;
+    }> => {
+      return this.get("/api/models/providers");
+    },
+  };
+
+  async testOpenAIConnection(apiKey?: string): Promise<{
+    success: boolean;
+    message?: string;
+    error?: string;
+  }> {
+    return this.post("/api/setup/test-openai", { apiKey });
+  }
+
+  // Setup API
+  setup = {
+    getClaudeStatus: (): Promise<{
+      success: boolean;
+      status?: string;
+      installed?: boolean;
+      method?: string;
+      version?: string;
+      path?: string;
+      auth?: {
+        authenticated: boolean;
+        method: string;
+        hasCredentialsFile?: boolean;
+        hasToken?: boolean;
+        hasStoredOAuthToken?: boolean;
+        hasStoredApiKey?: boolean;
+        hasEnvApiKey?: boolean;
+        hasEnvOAuthToken?: boolean;
+      };
+      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;
+      requiresManualAuth?: boolean;
+      terminalOpened?: boolean;
+      command?: string;
+      error?: string;
+      message?: string;
+      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<{
+      success: boolean;
+      error?: string;
+    }> => this.post("/api/setup/store-api-key", { provider, apiKey }),
+
+    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;
+      arch: string;
+      homeDir: string;
+      isWindows: boolean;
+      isMac: boolean;
+      isLinux: boolean;
+    }> => this.get("/api/setup/platform"),
+
+    onInstallProgress: (callback: (progress: unknown) => void) => {
+      return this.subscribeToEvent("agent:stream", callback);
+    },
+
+    onAuthProgress: (callback: (progress: unknown) => void) => {
+      return this.subscribeToEvent("agent:stream", callback);
+    },
+  };
+
+  // Features API
+  features: FeaturesAPI = {
+    getAll: (projectPath: string) =>
+      this.post("/api/features/list", { projectPath }),
+    get: (projectPath: string, featureId: string) =>
+      this.post("/api/features/get", { projectPath, featureId }),
+    create: (projectPath: string, feature: Feature) =>
+      this.post("/api/features/create", { projectPath, feature }),
+    update: (projectPath: string, featureId: string, updates: Partial<Feature>) =>
+      this.post("/api/features/update", { projectPath, featureId, updates }),
+    delete: (projectPath: string, featureId: string) =>
+      this.post("/api/features/delete", { projectPath, featureId }),
+    getAgentOutput: (projectPath: string, featureId: string) =>
+      this.post("/api/features/agent-output", { projectPath, featureId }),
+  };
+
+  // Auto Mode API
+  autoMode: AutoModeAPI = {
+    start: (projectPath: string, maxConcurrency?: number) =>
+      this.post("/api/auto-mode/start", { projectPath, maxConcurrency }),
+    stop: (projectPath: string) =>
+      this.post("/api/auto-mode/stop", { projectPath }),
+    stopFeature: (featureId: string) =>
+      this.post("/api/auto-mode/stop-feature", { featureId }),
+    status: (projectPath?: string) =>
+      this.post("/api/auto-mode/status", { projectPath }),
+    runFeature: (projectPath: string, featureId: string, useWorktrees?: boolean) =>
+      this.post("/api/auto-mode/run-feature", { projectPath, featureId, useWorktrees }),
+    verifyFeature: (projectPath: string, featureId: string) =>
+      this.post("/api/auto-mode/verify-feature", { projectPath, featureId }),
+    resumeFeature: (projectPath: string, featureId: string) =>
+      this.post("/api/auto-mode/resume-feature", { projectPath, featureId }),
+    contextExists: (projectPath: string, featureId: string) =>
+      this.post("/api/auto-mode/context-exists", { projectPath, featureId }),
+    analyzeProject: (projectPath: string) =>
+      this.post("/api/auto-mode/analyze-project", { projectPath }),
+    followUpFeature: (
+      projectPath: string,
+      featureId: string,
+      prompt: string,
+      imagePaths?: string[]
+    ) =>
+      this.post("/api/auto-mode/follow-up-feature", {
+        projectPath,
+        featureId,
+        prompt,
+        imagePaths,
+      }),
+    commitFeature: (projectPath: string, featureId: string) =>
+      this.post("/api/auto-mode/commit-feature", { projectPath, featureId }),
+    onEvent: (callback: (event: AutoModeEvent) => void) => {
+      return this.subscribeToEvent("auto-mode:event", callback as EventCallback);
+    },
+  };
+
+  // Worktree API
+  worktree: WorktreeAPI = {
+    revertFeature: (projectPath: string, featureId: string) =>
+      this.post("/api/worktree/revert", { projectPath, featureId }),
+    mergeFeature: (projectPath: string, featureId: string, options?: object) =>
+      this.post("/api/worktree/merge", { projectPath, featureId, options }),
+    getInfo: (projectPath: string, featureId: string) =>
+      this.post("/api/worktree/info", { projectPath, featureId }),
+    getStatus: (projectPath: string, featureId: string) =>
+      this.post("/api/worktree/status", { projectPath, featureId }),
+    list: (projectPath: string) =>
+      this.post("/api/worktree/list", { projectPath }),
+    getDiffs: (projectPath: string, featureId: string) =>
+      this.post("/api/worktree/diffs", { projectPath, featureId }),
+    getFileDiff: (projectPath: string, featureId: string, filePath: string) =>
+      this.post("/api/worktree/file-diff", { projectPath, featureId, filePath }),
+  };
+
+  // Git API
+  git: GitAPI = {
+    getDiffs: (projectPath: string) =>
+      this.post("/api/git/diffs", { projectPath }),
+    getFileDiff: (projectPath: string, filePath: string) =>
+      this.post("/api/git/file-diff", { projectPath, filePath }),
+  };
+
+  // Suggestions API
+  suggestions: SuggestionsAPI = {
+    generate: (projectPath: string, suggestionType?: SuggestionType) =>
+      this.post("/api/suggestions/generate", { projectPath, suggestionType }),
+    stop: () => this.post("/api/suggestions/stop"),
+    status: () => this.get("/api/suggestions/status"),
+    onEvent: (callback: (event: SuggestionsEvent) => void) => {
+      return this.subscribeToEvent("suggestions:event", callback as EventCallback);
+    },
+  };
+
+  // Spec Regeneration API
+  specRegeneration: SpecRegenerationAPI = {
+    create: (projectPath: string, projectOverview: string, generateFeatures?: boolean) =>
+      this.post("/api/spec-regeneration/create", {
+        projectPath,
+        projectOverview,
+        generateFeatures,
+      }),
+    generate: (projectPath: string, projectDefinition: string) =>
+      this.post("/api/spec-regeneration/generate", { projectPath, projectDefinition }),
+    generateFeatures: (projectPath: string) =>
+      this.post("/api/spec-regeneration/generate-features", { projectPath }),
+    stop: () => this.post("/api/spec-regeneration/stop"),
+    status: () => this.get("/api/spec-regeneration/status"),
+    onEvent: (callback: (event: SpecRegenerationEvent) => void) => {
+      return this.subscribeToEvent(
+        "spec-regeneration:event",
+        callback as EventCallback
+      );
+    },
+  };
+
+  // Running Agents API
+  runningAgents = {
+    getAll: (): Promise<{
+      success: boolean;
+      runningAgents?: Array<{
+        featureId: string;
+        projectPath: string;
+        projectName: string;
+        isAutoMode: boolean;
+      }>;
+      totalCount?: number;
+      autoLoopRunning?: boolean;
+      error?: string;
+    }> => this.get("/api/running-agents"),
+  };
+}
+
+// Singleton instance
+let httpApiClientInstance: HttpApiClient | null = null;
+
+export function getHttpApiClient(): HttpApiClient {
+  if (!httpApiClientInstance) {
+    httpApiClientInstance = new HttpApiClient();
+  }
+  return httpApiClientInstance;
+}
--- a/apps/app/src/store/app-store.ts
+++ b/apps/app/src/store/app-store.ts
@@ -1138,26 +1138,32 @@ export const useAppStore = create<AppState & AppActions>()(
    {
      name: "automaker-storage",
      partialize: (state) => ({
+        // Project management
        projects: state.projects,
        currentProject: state.currentProject,
        trashedProjects: state.trashedProjects,
        projectHistory: state.projectHistory,
        projectHistoryIndex: state.projectHistoryIndex,
+        // Features - cached locally for faster hydration (authoritative source is server)
+        features: state.features,
+        // UI state
        currentView: state.currentView,
        theme: state.theme,
        sidebarOpen: state.sidebarOpen,
-        apiKeys: state.apiKeys,
-        chatSessions: state.chatSessions,
        chatHistoryOpen: state.chatHistoryOpen,
+        kanbanCardDetailLevel: state.kanbanCardDetailLevel,
+        // Settings
+        apiKeys: state.apiKeys,
        maxConcurrency: state.maxConcurrency,
        autoModeByProject: state.autoModeByProject,
-        kanbanCardDetailLevel: state.kanbanCardDetailLevel,
        defaultSkipTests: state.defaultSkipTests,
        useWorktrees: state.useWorktrees,
        showProfilesOnly: state.showProfilesOnly,
        keyboardShortcuts: state.keyboardShortcuts,
        muteDoneSound: state.muteDoneSound,
+        // Profiles and sessions
        aiProfiles: state.aiProfiles,
+        chatSessions: state.chatSessions,
        lastSelectedSessionByProject: state.lastSelectedSessionByProject,
      }),
    }
--- a/apps/app/src/store/setup-store.ts
+++ b/apps/app/src/store/setup-store.ts
@@ -10,10 +10,19 @@ export interface CliStatus {
  error?: string;
 }

+// Claude Auth Method - all possible authentication sources
+export type ClaudeAuthMethod =
+  | "oauth_token_env"    // CLAUDE_CODE_OAUTH_TOKEN environment variable
+  | "oauth_token"        // Stored OAuth token from claude login
+  | "api_key_env"        // ANTHROPIC_API_KEY environment variable
+  | "api_key"            // Manually stored API key
+  | "credentials_file"   // Generic credentials file detection
+  | "none";
+
 // Claude Auth Status
 export interface ClaudeAuthStatus {
  authenticated: boolean;
-  method: "oauth_token_env" | "oauth_token" | "api_key" | "api_key_env" | "none";
+  method: ClaudeAuthMethod;
  hasCredentialsFile?: boolean;
  oauthTokenValid?: boolean;
  apiKeyValid?: boolean;
@@ -22,12 +31,23 @@ export interface ClaudeAuthStatus {
  error?: string;
 }

+// Codex Auth Method - all possible authentication sources
+export type CodexAuthMethod =
+  | "subscription"       // Codex/OpenAI Plus or Team subscription
+  | "cli_verified"       // CLI logged in with OpenAI account
+  | "cli_tokens"         // CLI with stored access tokens
+  | "api_key"            // Manually stored API key
+  | "env"                // OPENAI_API_KEY environment variable
+  | "none";
+
 // Codex Auth Status
 export interface CodexAuthStatus {
  authenticated: boolean;
-  method: "api_key" | "env" | "cli_verified" | "cli_tokens" | "none";
+  method: CodexAuthMethod;
  apiKeyValid?: boolean;
  mcpConfigured?: boolean;
+  hasSubscription?: boolean;
+  cliLoggedIn?: boolean;
  error?: string;
 }