feat: add terminal support

.gitignore

@@ -1,3 +1,7 @@
+# Vim swap files
+*.swp
+*.swo
+*~
 # Font files (copied from node_modules during build)
 public/fonts/
 

Makefile

@@ -112,7 +112,7 @@ dev: node_modules/.installed build-main ## Start development server (Vite + node
 		"bun x nodemon --watch src --watch tsconfig.main.json --watch tsconfig.json --ext ts,tsx,json --ignore dist --ignore node_modules --exec node scripts/build-main-watch.js" \
 		"vite"
 else
-dev: node_modules/.installed build-main ## Start development server (Vite + tsgo watcher for 10x faster type checking)
+dev: node_modules/.installed build-main build-preload## Start development server (Vite + tsgo watcher for 10x faster type checking)
 	@bun x concurrently -k \
 		"bun x concurrently \"$(TSGO) -w -p tsconfig.main.json\" \"bun x tsc-alias -w -p tsconfig.main.json\"" \
 		"vite"

package.json

@@ -47,6 +47,7 @@
     "@ai-sdk/anthropic": "^2.0.44",
     "@ai-sdk/openai": "^2.0.66",
     "@openrouter/ai-sdk-provider": "^1.2.2",
+    "ghostty-web": "^0.1.1",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-scroll-area": "^1.2.10",
@@ -71,6 +72,7 @@
     "minimist": "^1.2.8",
     "motion": "^12.23.24",
     "ollama-ai-provider-v2": "^1.5.4",
+    "node-pty": "1.1.0-beta39",
     "rehype-harden": "^1.1.5",
     "shescape": "^2.1.6",
     "source-map-support": "^0.5.21",
@@ -120,6 +122,7 @@
     "electron-builder": "^24.6.0",
     "electron-devtools-installer": "^4.0.0",
     "electron-mock-ipc": "^0.3.12",
+    "electron-rebuild": "^3.2.9",
     "esbuild": "^0.25.11",
     "escape-html": "^1.0.3",
     "eslint": "^9.36.0",
@@ -211,6 +214,7 @@
       "target": "nsis",
       "icon": "build/icon.png",
       "artifactName": "${productName}-${version}-${arch}.${ext}"
-    }
+    },
+    "npmRebuild": false
   }
 }

src/App.stories.tsx

@@ -97,6 +97,22 @@ function setupMockAPI(options: {
     window: {
       setTitle: () => Promise.resolve(undefined),
     },
+    terminal: {
+      create: () =>
+        Promise.resolve({
+          sessionId: "mock-session",
+          workspaceId: "mock-workspace",
+          cols: 80,
+          rows: 24,
+        }),
+      close: () => Promise.resolve(undefined),
+      resize: () => Promise.resolve(undefined),
+      sendInput: () => undefined,
+      onOutput: () => () => undefined,
+      onExit: () => () => undefined,
+      openWindow: () => Promise.resolve(undefined),
+      closeWindow: () => Promise.resolve(undefined),
+    },
     update: {
       check: () => Promise.resolve(undefined),
       download: () => Promise.resolve(undefined),

src/App.tsx

@@ -169,7 +169,7 @@ function AppInner() {
   }, [selectedWorkspace, workspaceMetadata, setSelectedWorkspace]);
 
   const openWorkspaceInTerminal = useCallback((workspaceId: string) => {
-    void window.api.workspace.openTerminal(workspaceId);
+    void window.api.terminal.openWindow(workspaceId);
   }, []);
 
   const handleRemoveProject = useCallback(

src/browser/api.ts

@@ -249,6 +249,33 @@ const webApi: IPCApi = {
       return Promise.resolve();
     },
   },
+  terminal: {
+    create: (params) => invokeIPC(IPC_CHANNELS.TERMINAL_CREATE, params),
+    close: (sessionId) => invokeIPC(IPC_CHANNELS.TERMINAL_CLOSE, sessionId),
+    resize: (params) => invokeIPC(IPC_CHANNELS.TERMINAL_RESIZE, params),
+    sendInput: (sessionId: string, data: string) => {
+      // Send via IPC - in browser mode this becomes an HTTP POST
+      void invokeIPC(IPC_CHANNELS.TERMINAL_INPUT, sessionId, data);
+    },
+    onOutput: (sessionId: string, callback: (data: string) => void) => {
+      // Subscribe to terminal output events via WebSocket
+      const channel = `terminal:output:${sessionId}`;
+      return wsManager.on(channel, callback as (data: unknown) => void);
+    },
+    onExit: (sessionId: string, callback: (exitCode: number) => void) => {
+      // Subscribe to terminal exit events via WebSocket
+      const channel = `terminal:exit:${sessionId}`;
+      return wsManager.on(channel, callback as (data: unknown) => void);
+    },
+    openWindow: (workspaceId) => {
+      // In browser mode, open a new window/tab with the terminal page
+      // Use a unique name with timestamp to create a new window each time
+      const url = `/terminal.html?workspaceId=${encodeURIComponent(workspaceId)}`;
+      window.open(url, `terminal-${workspaceId}-${Date.now()}`, "width=1000,height=600");
+      return invokeIPC(IPC_CHANNELS.TERMINAL_WINDOW_OPEN, workspaceId);
+    },
+    closeWindow: (workspaceId) => invokeIPC(IPC_CHANNELS.TERMINAL_WINDOW_CLOSE, workspaceId),
+  },
   update: {
     check: () => invokeIPC(IPC_CHANNELS.UPDATE_CHECK),
     download: () => invokeIPC(IPC_CHANNELS.UPDATE_DOWNLOAD),
@@ -263,6 +290,9 @@ const webApi: IPCApi = {
   server: {
     getLaunchProject: () => invokeIPC("server:getLaunchProject"),
   },
+  // In browser mode, set platform to "browser" to differentiate from Electron
+  platform: "browser" as const,
+  versions: {},
 };
 
 if (typeof window.api === "undefined") {

src/components/AIView.tsx

@@ -50,6 +50,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
   // Track active tab to conditionally enable resize functionality
   // RightSidebar notifies us of tab changes via onTabChange callback
   const [activeTab, setActiveTab] = useState<TabType>("costs");
+
   const isReviewTabActive = activeTab === "review";
 
   // Resizable sidebar for Review tab only
@@ -195,7 +196,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
   );
 
   const handleOpenTerminal = useCallback(() => {
-    void window.api.workspace.openTerminal(workspaceId);
+    void window.api.terminal.openWindow(workspaceId);
   }, [workspaceId]);
 
   // Auto-scroll when messages or todos update (during streaming)

src/components/TerminalView.tsx

@@ -0,0 +1,248 @@
+import { useRef, useEffect, useState } from "react";
+import { Terminal, FitAddon } from "ghostty-web";
+import { useTerminalSession } from "@/hooks/useTerminalSession";
+
+interface TerminalViewProps {
+  workspaceId: string;
+  sessionId?: string;
+  visible: boolean;
+}
+
+export function TerminalView({ workspaceId, sessionId, visible }: TerminalViewProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const termRef = useRef<Terminal | null>(null);
+  const fitAddonRef = useRef<FitAddon | null>(null);
+  const [terminalError, setTerminalError] = useState<string | null>(null);
+  const [terminalReady, setTerminalReady] = useState(false);
+  const [terminalSize, setTerminalSize] = useState<{ cols: number; rows: number } | null>(null);
+
+  // Handler for terminal output
+  const handleOutput = (data: string) => {
+    const term = termRef.current;
+    if (term) {
+      term.write(data);
+    }
+  };
+
+  // Handler for terminal exit
+  const handleExit = (exitCode: number) => {
+    const term = termRef.current;
+    if (term) {
+      term.write(`\r\n[Process exited with code ${exitCode}]\r\n`);
+    }
+  };
+
+  const {
+    sendInput,
+    resize,
+    error: sessionError,
+  } = useTerminalSession(workspaceId, sessionId, visible, terminalSize, handleOutput, handleExit);
+
+  // Keep refs to latest functions so callbacks always use current version
+  const sendInputRef = useRef(sendInput);
+  const resizeRef = useRef(resize);
+
+  useEffect(() => {
+    sendInputRef.current = sendInput;
+    resizeRef.current = resize;
+  }, [sendInput, resize]);
+
+  // Initialize terminal when visible
+  useEffect(() => {
+    if (!containerRef.current || !visible) {
+      return;
+    }
+
+    let terminal: Terminal | null = null;
+
+    const initTerminal = async () => {
+      try {
+        terminal = new Terminal({
+          fontSize: 13,
+          fontFamily: "Monaco, Menlo, 'Courier New', monospace",
+          cursorBlink: true,
+          theme: {
+            background: "#1e1e1e",
+            foreground: "#d4d4d4",
+            cursor: "#d4d4d4",
+            cursorAccent: "#1e1e1e",
+            selectionBackground: "#264f78",
+            black: "#000000",
+            red: "#cd3131",
+            green: "#0dbc79",
+            yellow: "#e5e510",
+            blue: "#2472c8",
+            magenta: "#bc3fbc",
+            cyan: "#11a8cd",
+            white: "#e5e5e5",
+            brightBlack: "#666666",
+            brightRed: "#f14c4c",
+            brightGreen: "#23d18b",
+            brightYellow: "#f5f543",
+            brightBlue: "#3b8eea",
+            brightMagenta: "#d670d6",
+            brightCyan: "#29b8db",
+            brightWhite: "#ffffff",
+          },
+        });
+
+        const fitAddon = new FitAddon();
+        terminal.loadAddon(fitAddon);
+
+        await terminal.open(containerRef.current!);
+        fitAddon.fit();
+
+        const { cols, rows } = terminal;
+
+        // Set terminal size so PTY session can be created with matching dimensions
+        // Use stable object reference to prevent unnecessary effect re-runs
+        setTerminalSize((prev) => {
+          if (prev?.cols === cols && prev?.rows === rows) {
+            return prev;
+          }
+          return { cols, rows };
+        });
+
+        // User input → IPC (use ref to always get latest sendInput)
+        terminal.onData((data: string) => {
+          sendInputRef.current(data);
+        });
+
+        termRef.current = terminal;
+        fitAddonRef.current = fitAddon;
+        setTerminalReady(true);
+      } catch (err) {
+        console.error("Failed to initialize terminal:", err);
+        setTerminalError(err instanceof Error ? err.message : "Failed to initialize terminal");
+      }
+    };
+
+    void initTerminal();
+
+    return () => {
+      if (terminal) {
+        terminal.dispose();
+      }
+      termRef.current = null;
+      fitAddonRef.current = null;
+      setTerminalReady(false);
+      setTerminalSize(null);
+    };
+    // Note: sendInput and resize are intentionally not in deps
+    // They're used in callbacks, not during effect execution
+  }, [visible, workspaceId]);
+
+  // Resize on container size change
+  useEffect(() => {
+    if (!visible || !fitAddonRef.current || !containerRef.current || !termRef.current) {
+      return;
+    }
+
+    let lastCols = 0;
+    let lastRows = 0;
+    let resizeTimeoutId: ReturnType<typeof setTimeout> | null = null;
+    let pendingResize: { cols: number; rows: number } | null = null;
+
+    // Use both ResizeObserver (for container changes) and window resize (as backup)
+    const handleResize = () => {
+      if (fitAddonRef.current && termRef.current) {
+        try {
+          // Resize terminal UI to fit container immediately for responsive UX
+          fitAddonRef.current.fit();
+
+          // Get new dimensions
+          const { cols, rows } = termRef.current;
+
+          // Only process if dimensions actually changed
+          if (cols === lastCols && rows === lastRows) {
+            return;
+          }
+
+          lastCols = cols;
+          lastRows = rows;
+
+          // Update state (with stable reference to prevent unnecessary re-renders)
+          setTerminalSize((prev) => {
+            if (prev?.cols === cols && prev?.rows === rows) {
+              return prev;
+            }
+            return { cols, rows };
+          });
+
+          // Store pending resize
+          pendingResize = { cols, rows };
+
+          // Always debounce PTY resize to prevent vim corruption
+          // Clear any pending timeout and set a new one
+          if (resizeTimeoutId !== null) {
+            clearTimeout(resizeTimeoutId);
+          }
+
+          resizeTimeoutId = setTimeout(() => {
+            if (pendingResize) {
+              console.log(
+                `[TerminalView] Sending resize to PTY: ${pendingResize.cols}x${pendingResize.rows}`
+              );
+              // Double requestAnimationFrame to ensure vim is ready
+              requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                  if (pendingResize) {
+                    resizeRef.current(pendingResize.cols, pendingResize.rows);
+                    pendingResize = null;
+                  }
+                });
+              });
+            }
+            resizeTimeoutId = null;
+          }, 300); // 300ms debounce - enough time for vim to stabilize
+        } catch (err) {
+          console.error("[TerminalView] Error fitting terminal:", err);
+        }
+      }
+    };
+
+    const resizeObserver = new ResizeObserver(handleResize);
+    resizeObserver.observe(containerRef.current);
+
+    // Also listen to window resize as backup
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      if (resizeTimeoutId !== null) {
+        clearTimeout(resizeTimeoutId);
+      }
+      resizeObserver.disconnect();
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [visible, terminalReady]); // terminalReady ensures ResizeObserver is set up after terminal is initialized
+
+  if (!visible) return null;
+
+  const errorMessage = terminalError ?? sessionError;
+
+  return (
+    <div
+      className="terminal-view"
+      style={{
+        width: "100%",
+        height: "100%",
+        backgroundColor: "#1e1e1e",
+      }}
+    >
+      {errorMessage && (
+        <div className="border-b border-red-900/30 bg-red-900/20 p-2 text-sm text-red-400">
+          Terminal Error: {errorMessage}
+        </div>
+      )}
+      <div
+        ref={containerRef}
+        className="terminal-container"
+        style={{
+          width: "100%",
+          height: "100%",
+          overflow: "hidden",
+        }}
+      />
+    </div>
+  );
+}