{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 (
diff --git a/apps/app/src/components/views/terminal-view.tsx b/apps/app/src/components/views/terminal-view.tsx
new file mode 100644
index 00000000..27d548c2
--- /dev/null
+++ b/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 (
+
+
+ {tab.name}
+
+
+ );
+}
+
+// New tab drop zone
+function NewTabDropZone({ isDropTarget }: { isDropTarget: boolean }) {
+ const { setNodeRef, isOver } = useDroppable({
+ id: "new-tab-zone",
+ data: { type: "new-tab" },
+ });
+
+ return (
+
+
+
+ );
+}
+
+export function TerminalView() {
+ const {
+ terminalState,
+ setTerminalUnlocked,
+ addTerminalToLayout,
+ removeTerminalFromLayout,
+ setActiveTerminalSession,
+ swapTerminals,
+ currentProject,
+ addTerminalTab,
+ removeTerminalTab,
+ setActiveTerminalTab,
+ moveTerminalToTab,
+ setTerminalPanelFontSize,
+ } = useAppStore();
+
+ const [status, setStatus] = useState
(null);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const [password, setPassword] = useState("");
+ const [authLoading, setAuthLoading] = useState(false);
+ const [authError, setAuthError] = useState(null);
+ const [activeDragId, setActiveDragId] = useState(null);
+ const [dragOverTabId, setDragOverTabId] = useState(null);
+ const lastCreateTimeRef = useRef(0);
+ const isCreatingRef = useRef(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 = {
+ "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 = {
+ "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 = {};
+ 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 (
+ 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 (
+
+ {content.panels.map((panel, index) => {
+ const panelSize = panel.type === "terminal" && panel.size
+ ? panel.size
+ : defaultSizePerPanel;
+
+ return (
+
+ {index > 0 && (
+
+ )}
+
+ {renderPanelContent(panel)}
+
+
+ );
+ })}
+
+ );
+ };
+
+ // Loading state
+ if (loading) {
+ return (
+
+
+
+ );
+ }
+
+ // Error state
+ if (error) {
+ return (
+
+
+
Terminal Unavailable
+
{error}
+
+
+
+
+
+
Terminal Disabled
+
+ Terminal access has been disabled. Set TERMINAL_ENABLED=true in your server .env file to enable it.
+
+
+
+
+
+
Terminal Protected
+
+ Terminal access requires authentication. Enter the password to unlock.
+
+
+
+
+ {status.platform && (
+
+ Platform: {status.platform.platform}
+ {status.platform.isWSL && " (WSL)"}
+ {" | "}Shell: {status.platform.defaultShell}
+
+ )}
+
+
+
+
+
Terminal
+
+ Create a new terminal session to start executing commands.
+ {currentProject && (
+
+ Working directory: {currentProject.path}
+
+ )}
+
+
+
+
+ {status?.platform && (
+
+ Platform: {status.platform.platform}
+ {status.platform.isWSL && " (WSL)"}
+ {" | "}Shell: {status.platform.defaultShell}
+
+ )}
+
+ {/* Tab bar */}
+
+ {/* Tabs */}
+
+ {terminalState.tabs.map((tab) => (
+
setActiveTerminalTab(tab.id)}
+ onClose={() => removeTerminalTab(tab.id)}
+ isDropTarget={activeDragId !== null}
+ />
+ ))}
+
+ {/* New tab drop zone (visible when dragging) */}
+ {activeDragId && (
+
+ )}
+
+ {/* New tab button */}
+
+
+
+ {/* Toolbar buttons */}
+
+
+
+
+
+
+ {/* Active tab content */}
+
+ {activeTab?.layout ? (
+ renderPanelContent(activeTab.layout)
+ ) : (
+
+
This tab is empty
+
+
+ )}
+
+
+
+
+ {dragOverTabId === "new"
+ ? "New tab"
+ : dragOverTabId
+ ? "Move to tab"
+ : "Terminal"}
+
+
+ ) : null}
+
+
+ );
+}
diff --git a/apps/app/src/components/views/terminal-view/terminal-panel.tsx b/apps/app/src/components/views/terminal-view/terminal-panel.tsx
new file mode 100644
index 00000000..fee8ecf3
--- /dev/null
+++ b/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;
+type XFitAddon = InstanceType;
+
+export function TerminalPanel({
+ sessionId,
+ authToken,
+ isActive,
+ onFocus,
+ onClose,
+ onSplitHorizontal,
+ onSplitVertical,
+ isDragging = false,
+ isDropTarget = false,
+ fontSize,
+ onFontSizeChange,
+}: TerminalPanelProps) {
+ const terminalRef = useRef(null);
+ const containerRef = useRef(null);
+ const xtermRef = useRef(null);
+ const fitAddonRef = useRef(null);
+ const wsRef = useRef(null);
+ const reconnectTimeoutRef = useRef(null);
+ const lastShortcutTimeRef = useRef(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 (
+
+ {/* Drop indicator overlay */}
+ {isOver && isDropTarget && (
+
+ )}
+
+ {/* Header bar with drag handle - uses app theme CSS variables */}
+
+ {/* Drag handle */}
+
+
+ {/* Terminal icon and label */}
+
+
+
+ {shellName}
+
+ {/* Font size indicator - only show when not default */}
+ {fontSize !== DEFAULT_FONT_SIZE && (
+
+ )}
+
+
+ {/* Zoom and action buttons */}
+
+ {/* Zoom controls */}
+
+
+
+
+
+ {/* Split/close buttons */}
+
+
+
+
+
+
+ {/* Terminal container - uses terminal theme */}
+
+
+
+ {isOpen && (
+
+
+ {section.content}
+
+
+ )}
+
+ {title && (
+
+ {title}
+
+ )}
+
+ {children}
+
+
+ {items.map((item, index) => {
+ const ItemIcon = item.icon;
+ return (
+
+
+
+
+
+
{item.title}
+
{item.description}
+
+
+ );
+ })}
+
+
+ Automaker is an autonomous AI development studio that helps developers build software faster using AI agents.
+
+
+ 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.
+
+
+
+ Think of it as having a team of AI developers that can work on multiple features simultaneously while you focus on the bigger picture.
+
+
+
+
Automaker is built as a monorepo with two main applications:
+
+ -
+ apps/app - Next.js + Electron frontend for the desktop application
+
+ -
+ apps/server - Express backend handling API requests and agent orchestration
+
+
+
+
Key Technologies:
+
+ - Electron wraps Next.js for cross-platform desktop support
+ - Real-time communication via WebSocket for live agent updates
+ - State management with Zustand for reactive UI updates
+ - Claude Agent SDK for AI capabilities
+
+
+
+
+
+ ),
+ },
+ {
+ id: "data-flow",
+ title: "How It Works (Data Flow)",
+ icon: GitBranch,
+ content: (
+
+
Here's what happens when you use Automaker to implement a feature:
+
+ -
+ Create Feature
+
Add a new feature card to the Kanban board with description and steps
+
+ -
+ Feature Saved
+
Feature saved to .automaker/features/{id}/feature.json
+
+ -
+ Start Work
+
Drag to "In Progress" or enable auto mode to start implementation
+
+ -
+ Git Worktree Created
+
Backend AutoModeService creates isolated git worktree (if enabled)
+
+ -
+ Agent Executes
+
Claude Agent SDK runs with file/bash/git tool access
+
+ -
+ Progress Streamed
+
Real-time updates via WebSocket as agent works
+
+ -
+ Completion
+
On success, feature moves to "waiting_approval" for your review
+
+ -
+ Verify
+
Review changes and move to "verified" when satisfied
+
+
+
+
The Automaker codebase is organized as follows:
+
+{`/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`}
+
+
+
The main UI components that make up Automaker:
+
+ {[
+ { 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) => (
+
+ {item.file}
+ {item.desc}
+
+ ))}
+
+
+
Automaker stores project configuration in the .automaker/ directory:
+
+ {[
+ { 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) => (
+
+ {item.file}
+ {item.desc}
+
+ ))}
+
+
+
Tip: App Spec Best Practices
+
+ - Include your tech stack and key dependencies
+ - Describe the project structure and conventions
+ - List any important patterns or architectural decisions
+ - Note testing requirements and coding standards
+
+
+
+
Follow these steps to start building with Automaker:
+
+ -
+ Create or Open a Project
+
Use the sidebar to create a new project or open an existing folder
+
+ -
+ Write an App Spec
+
Go to Spec Editor and describe your project. This helps AI understand your codebase.
+
+ -
+ Add Context (Optional)
+
Add relevant documentation or examples to the Context view for better AI results
+
+ -
+ Create Features
+
Add feature cards to your Kanban board with clear descriptions and implementation steps
+
+ -
+ Configure AI Profile
+
Choose an AI profile or customize model/thinking settings per feature
+
+ -
+ Start Implementation
+
Drag features to "In Progress" or enable auto mode to let AI work
+
+ -
+ Review and Verify
+
Check completed features, review changes, and mark as verified
+
+
+
+
Pro Tips:
+
+ - Use keyboard shortcuts for faster navigation (press
? to see all)
+ - Enable git worktree isolation for parallel feature development
+ - Start with "Quick Edit" profile for simple tasks, use "Heavy Task" for complex work
+ - Keep your app spec up to date as your project evolves
+
+
+
+ {/* Header */}
+
+
+
+
Wiki
+
+ Learn how Automaker works and how to use it effectively
+
+
+
+
+
+
+
+
+
+ {/* Content */}
+
+
+ {sections.map((section) => (
+ toggleSection(section.id)}
+ />
+ ))}
+
+
+