feat(web): integrate xterm.js with WebSocket terminal backend (#518)

Co-authored-by: Jason Woltje <jason@diversecanvas.com>
Co-committed-by: Jason Woltje <jason@diversecanvas.com>

apps/web/src/hooks/useTerminal.test.ts

@@ -0,0 +1,462 @@
+/**
+ * @file useTerminal.test.ts
+ * @description Unit tests for the useTerminal hook
+ */
+
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { renderHook, act, waitFor } from "@testing-library/react";
+import { useTerminal } from "./useTerminal";
+import type { Socket } from "socket.io-client";
+
+// ==========================================
+// Mock socket.io-client
+// ==========================================
+
+vi.mock("socket.io-client");
+
+// ==========================================
+// Mock lib/config
+// ==========================================
+
+vi.mock("@/lib/config", () => ({
+  API_BASE_URL: "http://localhost:3001",
+}));
+
+// ==========================================
+// Helpers
+// ==========================================
+
+interface MockSocket {
+  on: ReturnType<typeof vi.fn>;
+  off: ReturnType<typeof vi.fn>;
+  emit: ReturnType<typeof vi.fn>;
+  disconnect: ReturnType<typeof vi.fn>;
+  connected: boolean;
+}
+
+describe("useTerminal", () => {
+  let mockSocket: MockSocket;
+  let socketEventHandlers: Record<string, (data: unknown) => void>;
+  let mockIo: ReturnType<typeof vi.fn>;
+
+  beforeEach(async () => {
+    socketEventHandlers = {};
+
+    mockSocket = {
+      on: vi.fn((event: string, handler: (data: unknown) => void) => {
+        socketEventHandlers[event] = handler;
+        return mockSocket;
+      }),
+      off: vi.fn(),
+      emit: vi.fn(),
+      disconnect: vi.fn(),
+      connected: true,
+    };
+
+    const socketIo = await import("socket.io-client");
+    mockIo = vi.mocked(socketIo.io);
+    mockIo.mockReturnValue(mockSocket as unknown as Socket);
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  // ==========================================
+  // Connection
+  // ==========================================
+
+  describe("connection lifecycle", () => {
+    it("should connect to the /terminal namespace with auth token", () => {
+      renderHook(() =>
+        useTerminal({
+          token: "test-token",
+        })
+      );
+
+      expect(mockIo).toHaveBeenCalledWith(
+        expect.stringContaining("/terminal"),
+        expect.objectContaining({
+          auth: { token: "test-token" },
+        })
+      );
+    });
+
+    it("should start disconnected and update when connected event fires", async () => {
+      const { result } = renderHook(() =>
+        useTerminal({
+          token: "test-token",
+        })
+      );
+
+      expect(result.current.isConnected).toBe(false);
+
+      act(() => {
+        socketEventHandlers.connect?.(undefined);
+      });
+
+      await waitFor(() => {
+        expect(result.current.isConnected).toBe(true);
+      });
+    });
+
+    it("should update sessionId when terminal:created event fires", async () => {
+      const { result } = renderHook(() =>
+        useTerminal({
+          token: "test-token",
+        })
+      );
+
+      act(() => {
+        socketEventHandlers.connect?.(undefined);
+        socketEventHandlers["terminal:created"]?.({
+          sessionId: "session-abc",
+          name: "main",
+          cols: 80,
+          rows: 24,
+        });
+      });
+
+      await waitFor(() => {
+        expect(result.current.sessionId).toBe("session-abc");
+      });
+    });
+
+    it("should clear sessionId when disconnect event fires", async () => {
+      const { result } = renderHook(() =>
+        useTerminal({
+          token: "test-token",
+        })
+      );
+
+      act(() => {
+        socketEventHandlers.connect?.(undefined);
+        socketEventHandlers["terminal:created"]?.({
+          sessionId: "session-abc",
+          name: "main",
+          cols: 80,
+          rows: 24,
+        });
+      });
+
+      await waitFor(() => {
+        expect(result.current.sessionId).toBe("session-abc");
+      });
+
+      act(() => {
+        socketEventHandlers.disconnect?.(undefined);
+      });
+
+      await waitFor(() => {
+        expect(result.current.isConnected).toBe(false);
+        expect(result.current.sessionId).toBeNull();
+      });
+    });
+
+    it("should set connectionError when connect_error fires", async () => {
+      const { result } = renderHook(() =>
+        useTerminal({
+          token: "test-token",
+        })
+      );
+
+      act(() => {
+        socketEventHandlers.connect_error?.(new Error("Connection refused"));
+      });
+
+      await waitFor(() => {
+        expect(result.current.connectionError).toBe("Connection refused");
+        expect(result.current.isConnected).toBe(false);
+      });
+    });
+
+    it("should not connect when token is empty", () => {
+      renderHook(() =>
+        useTerminal({
+          token: "",
+        })
+      );
+
+      expect(mockIo).not.toHaveBeenCalled();
+    });
+  });
+
+  // ==========================================
+  // Output and exit callbacks
+  // ==========================================
+
+  describe("event callbacks", () => {
+    it("should call onOutput when terminal:output fires", () => {
+      const onOutput = vi.fn();
+
+      renderHook(() =>
+        useTerminal({
+          token: "test-token",
+          onOutput,
+        })
+      );
+
+      act(() => {
+        socketEventHandlers["terminal:output"]?.({
+          sessionId: "session-abc",
+          data: "hello world\r\n",
+        });
+      });
+
+      expect(onOutput).toHaveBeenCalledWith("session-abc", "hello world\r\n");
+    });
+
+    it("should call onExit when terminal:exit fires and clear sessionId", async () => {
+      const onExit = vi.fn();
+
+      const { result } = renderHook(() =>
+        useTerminal({
+          token: "test-token",
+          onExit,
+        })
+      );
+
+      act(() => {
+        socketEventHandlers.connect?.(undefined);
+        socketEventHandlers["terminal:created"]?.({
+          sessionId: "session-abc",
+          name: "main",
+          cols: 80,
+          rows: 24,
+        });
+      });
+
+      act(() => {
+        socketEventHandlers["terminal:exit"]?.({
+          sessionId: "session-abc",
+          exitCode: 0,
+        });
+      });
+
+      await waitFor(() => {
+        expect(onExit).toHaveBeenCalledWith({ sessionId: "session-abc", exitCode: 0 });
+        expect(result.current.sessionId).toBeNull();
+      });
+    });
+
+    it("should call onError when terminal:error fires", () => {
+      const onError = vi.fn();
+
+      renderHook(() =>
+        useTerminal({
+          token: "test-token",
+          onError,
+        })
+      );
+
+      act(() => {
+        socketEventHandlers["terminal:error"]?.({
+          message: "PTY spawn failed",
+        });
+      });
+
+      expect(onError).toHaveBeenCalledWith("PTY spawn failed");
+    });
+  });
+
+  // ==========================================
+  // Control functions
+  // ==========================================
+
+  describe("createSession", () => {
+    it("should emit terminal:create with options when connected", () => {
+      const { result } = renderHook(() =>
+        useTerminal({
+          token: "test-token",
+        })
+      );
+
+      act(() => {
+        socketEventHandlers.connect?.(undefined);
+      });
+
+      act(() => {
+        result.current.createSession({ cols: 120, rows: 40, name: "test" });
+      });
+
+      expect(mockSocket.emit).toHaveBeenCalledWith("terminal:create", {
+        cols: 120,
+        rows: 40,
+        name: "test",
+      });
+    });
+
+    it("should not emit terminal:create when disconnected", () => {
+      mockSocket.connected = false;
+
+      const { result } = renderHook(() =>
+        useTerminal({
+          token: "test-token",
+        })
+      );
+
+      act(() => {
+        result.current.createSession({ cols: 80, rows: 24 });
+      });
+
+      expect(mockSocket.emit).not.toHaveBeenCalledWith("terminal:create", expect.anything());
+    });
+  });
+
+  describe("sendInput", () => {
+    it("should emit terminal:input with sessionId and data", () => {
+      const { result } = renderHook(() =>
+        useTerminal({
+          token: "test-token",
+        })
+      );
+
+      act(() => {
+        socketEventHandlers.connect?.(undefined);
+        socketEventHandlers["terminal:created"]?.({
+          sessionId: "session-abc",
+          name: "main",
+          cols: 80,
+          rows: 24,
+        });
+      });
+
+      act(() => {
+        result.current.sendInput("ls -la\n");
+      });
+
+      expect(mockSocket.emit).toHaveBeenCalledWith("terminal:input", {
+        sessionId: "session-abc",
+        data: "ls -la\n",
+      });
+    });
+
+    it("should not emit when no sessionId is set", () => {
+      const { result } = renderHook(() =>
+        useTerminal({
+          token: "test-token",
+        })
+      );
+
+      act(() => {
+        socketEventHandlers.connect?.(undefined);
+      });
+
+      act(() => {
+        result.current.sendInput("ls -la\n");
+      });
+
+      expect(mockSocket.emit).not.toHaveBeenCalledWith("terminal:input", expect.anything());
+    });
+  });
+
+  describe("resize", () => {
+    it("should emit terminal:resize with sessionId, cols, and rows", () => {
+      const { result } = renderHook(() =>
+        useTerminal({
+          token: "test-token",
+        })
+      );
+
+      act(() => {
+        socketEventHandlers.connect?.(undefined);
+        socketEventHandlers["terminal:created"]?.({
+          sessionId: "session-abc",
+          name: "main",
+          cols: 80,
+          rows: 24,
+        });
+      });
+
+      act(() => {
+        result.current.resize(100, 30);
+      });
+
+      expect(mockSocket.emit).toHaveBeenCalledWith("terminal:resize", {
+        sessionId: "session-abc",
+        cols: 100,
+        rows: 30,
+      });
+    });
+  });
+
+  describe("closeSession", () => {
+    it("should emit terminal:close and clear sessionId", async () => {
+      const { result } = renderHook(() =>
+        useTerminal({
+          token: "test-token",
+        })
+      );
+
+      act(() => {
+        socketEventHandlers.connect?.(undefined);
+        socketEventHandlers["terminal:created"]?.({
+          sessionId: "session-abc",
+          name: "main",
+          cols: 80,
+          rows: 24,
+        });
+      });
+
+      await waitFor(() => {
+        expect(result.current.sessionId).toBe("session-abc");
+      });
+
+      act(() => {
+        result.current.closeSession();
+      });
+
+      expect(mockSocket.emit).toHaveBeenCalledWith("terminal:close", {
+        sessionId: "session-abc",
+      });
+
+      await waitFor(() => {
+        expect(result.current.sessionId).toBeNull();
+      });
+    });
+  });
+
+  // ==========================================
+  // Cleanup
+  // ==========================================
+
+  describe("cleanup", () => {
+    it("should disconnect socket on unmount", () => {
+      const { unmount } = renderHook(() =>
+        useTerminal({
+          token: "test-token",
+        })
+      );
+
+      unmount();
+
+      expect(mockSocket.disconnect).toHaveBeenCalled();
+    });
+
+    it("should emit terminal:close for active session on unmount", () => {
+      const { result, unmount } = renderHook(() =>
+        useTerminal({
+          token: "test-token",
+        })
+      );
+
+      act(() => {
+        socketEventHandlers.connect?.(undefined);
+        socketEventHandlers["terminal:created"]?.({
+          sessionId: "session-abc",
+          name: "main",
+          cols: 80,
+          rows: 24,
+        });
+      });
+
+      expect(result.current.sessionId).toBe("session-abc");
+
+      unmount();
+
+      expect(mockSocket.emit).toHaveBeenCalledWith("terminal:close", {
+        sessionId: "session-abc",
+      });
+    });
+  });
+});

apps/web/src/hooks/useTerminal.ts

@@ -0,0 +1,294 @@
+/**
+ * useTerminal hook
+ *
+ * Manages a WebSocket connection to the /terminal namespace and a PTY terminal session.
+ * Follows the same patterns as useVoiceInput and useWebSocket.
+ *
+ * Protocol (from terminal.gateway.ts):
+ * 1. Connect with auth token in handshake
+ * 2. Emit terminal:create → receive terminal:created { sessionId, name, cols, rows }
+ * 3. Emit terminal:input { sessionId, data } to send keystrokes
+ * 4. Receive terminal:output { sessionId, data } for stdout/stderr
+ * 5. Emit terminal:resize { sessionId, cols, rows } on window resize
+ * 6. Emit terminal:close { sessionId } to terminate the PTY
+ * 7. Receive terminal:exit { sessionId, exitCode, signal } on PTY exit
+ * 8. Receive terminal:error { message } on errors
+ */
+
+import { useEffect, useRef, useState, useCallback } from "react";
+import type { Socket } from "socket.io-client";
+import { io } from "socket.io-client";
+import { API_BASE_URL } from "@/lib/config";
+
+// ==========================================
+// Types
+// ==========================================
+
+export interface CreateSessionOptions {
+  name?: string;
+  cols?: number;
+  rows?: number;
+  cwd?: string;
+}
+
+export interface TerminalSession {
+  sessionId: string;
+  name: string;
+  cols: number;
+  rows: number;
+}
+
+export interface TerminalExitEvent {
+  sessionId: string;
+  exitCode: number;
+  signal?: string;
+}
+
+export interface UseTerminalOptions {
+  /** Authentication token for WebSocket handshake */
+  token: string;
+  /** Callback fired when terminal output is received */
+  onOutput?: (sessionId: string, data: string) => void;
+  /** Callback fired when a terminal session exits */
+  onExit?: (event: TerminalExitEvent) => void;
+  /** Callback fired on terminal errors */
+  onError?: (message: string) => void;
+}
+
+export interface UseTerminalReturn {
+  /** Whether the WebSocket is connected */
+  isConnected: boolean;
+  /** The current terminal session ID, or null if no session is active */
+  sessionId: string | null;
+  /** Create a new PTY session */
+  createSession: (options?: CreateSessionOptions) => void;
+  /** Send input data to the terminal */
+  sendInput: (data: string) => void;
+  /** Resize the terminal PTY */
+  resize: (cols: number, rows: number) => void;
+  /** Close the current PTY session */
+  closeSession: () => void;
+  /** Connection error message, if any */
+  connectionError: string | null;
+}
+
+// ==========================================
+// Payload shapes matching terminal.dto.ts
+// ==========================================
+
+interface TerminalCreatedPayload {
+  sessionId: string;
+  name: string;
+  cols: number;
+  rows: number;
+}
+
+interface TerminalOutputPayload {
+  sessionId: string;
+  data: string;
+}
+
+interface TerminalExitPayload {
+  sessionId: string;
+  exitCode: number;
+  signal?: string;
+}
+
+interface TerminalErrorPayload {
+  message: string;
+}
+
+// ==========================================
+// Security validation
+// ==========================================
+
+function validateWebSocketSecurity(url: string): void {
+  const isProduction = process.env.NODE_ENV === "production";
+  const isSecure = url.startsWith("https://") || url.startsWith("wss://");
+
+  if (isProduction && !isSecure) {
+    console.warn(
+      "[Security Warning] Terminal WebSocket using insecure protocol (ws://). " +
+        "Authentication tokens may be exposed. Use wss:// in production."
+    );
+  }
+}
+
+// ==========================================
+// Hook
+// ==========================================
+
+/**
+ * Hook for managing a real PTY terminal session over WebSocket.
+ *
+ * @param options - Configuration including auth token and event callbacks
+ * @returns Terminal state and control functions
+ */
+export function useTerminal(options: UseTerminalOptions): UseTerminalReturn {
+  const { token, onOutput, onExit, onError } = options;
+
+  const [isConnected, setIsConnected] = useState(false);
+  const [sessionId, setSessionId] = useState<string | null>(null);
+  const [connectionError, setConnectionError] = useState<string | null>(null);
+
+  const socketRef = useRef<Socket | null>(null);
+  const sessionIdRef = useRef<string | null>(null);
+
+  // Keep callbacks in refs to avoid stale closures without causing reconnects
+  const onOutputRef = useRef(onOutput);
+  const onExitRef = useRef(onExit);
+  const onErrorRef = useRef(onError);
+
+  useEffect(() => {
+    onOutputRef.current = onOutput;
+  }, [onOutput]);
+
+  useEffect(() => {
+    onExitRef.current = onExit;
+  }, [onExit]);
+
+  useEffect(() => {
+    onErrorRef.current = onError;
+  }, [onError]);
+
+  // Connect to the /terminal namespace
+  useEffect(() => {
+    if (!token) {
+      return;
+    }
+
+    const wsUrl = API_BASE_URL;
+    validateWebSocketSecurity(wsUrl);
+
+    setConnectionError(null);
+
+    const socket = io(`${wsUrl}/terminal`, {
+      auth: { token },
+      transports: ["websocket", "polling"],
+    });
+
+    socketRef.current = socket;
+
+    const handleConnect = (): void => {
+      setIsConnected(true);
+      setConnectionError(null);
+    };
+
+    const handleDisconnect = (): void => {
+      setIsConnected(false);
+      setSessionId(null);
+      sessionIdRef.current = null;
+    };
+
+    const handleConnectError = (error: Error): void => {
+      setConnectionError(error.message || "Terminal connection failed");
+      setIsConnected(false);
+    };
+
+    const handleTerminalCreated = (payload: TerminalCreatedPayload): void => {
+      setSessionId(payload.sessionId);
+      sessionIdRef.current = payload.sessionId;
+    };
+
+    const handleTerminalOutput = (payload: TerminalOutputPayload): void => {
+      onOutputRef.current?.(payload.sessionId, payload.data);
+    };
+
+    const handleTerminalExit = (payload: TerminalExitPayload): void => {
+      onExitRef.current?.(payload);
+      setSessionId(null);
+      sessionIdRef.current = null;
+    };
+
+    const handleTerminalError = (payload: TerminalErrorPayload): void => {
+      onErrorRef.current?.(payload.message);
+    };
+
+    socket.on("connect", handleConnect);
+    socket.on("disconnect", handleDisconnect);
+    socket.on("connect_error", handleConnectError);
+    socket.on("terminal:created", handleTerminalCreated);
+    socket.on("terminal:output", handleTerminalOutput);
+    socket.on("terminal:exit", handleTerminalExit);
+    socket.on("terminal:error", handleTerminalError);
+
+    return (): void => {
+      socket.off("connect", handleConnect);
+      socket.off("disconnect", handleDisconnect);
+      socket.off("connect_error", handleConnectError);
+      socket.off("terminal:created", handleTerminalCreated);
+      socket.off("terminal:output", handleTerminalOutput);
+      socket.off("terminal:exit", handleTerminalExit);
+      socket.off("terminal:error", handleTerminalError);
+
+      // Close active session before disconnecting
+      const currentSessionId = sessionIdRef.current;
+      if (currentSessionId) {
+        socket.emit("terminal:close", { sessionId: currentSessionId });
+      }
+
+      socket.disconnect();
+      socketRef.current = null;
+    };
+  }, [token]);
+
+  const createSession = useCallback((createOptions: CreateSessionOptions = {}): void => {
+    const socket = socketRef.current;
+    if (!socket?.connected) {
+      return;
+    }
+
+    const payload: Record<string, unknown> = {};
+    if (createOptions.name !== undefined) payload.name = createOptions.name;
+    if (createOptions.cols !== undefined) payload.cols = createOptions.cols;
+    if (createOptions.rows !== undefined) payload.rows = createOptions.rows;
+    if (createOptions.cwd !== undefined) payload.cwd = createOptions.cwd;
+
+    socket.emit("terminal:create", payload);
+  }, []);
+
+  const sendInput = useCallback((data: string): void => {
+    const socket = socketRef.current;
+    const currentSessionId = sessionIdRef.current;
+
+    if (!socket?.connected || !currentSessionId) {
+      return;
+    }
+
+    socket.emit("terminal:input", { sessionId: currentSessionId, data });
+  }, []);
+
+  const resize = useCallback((cols: number, rows: number): void => {
+    const socket = socketRef.current;
+    const currentSessionId = sessionIdRef.current;
+
+    if (!socket?.connected || !currentSessionId) {
+      return;
+    }
+
+    socket.emit("terminal:resize", { sessionId: currentSessionId, cols, rows });
+  }, []);
+
+  const closeSession = useCallback((): void => {
+    const socket = socketRef.current;
+    const currentSessionId = sessionIdRef.current;
+
+    if (!socket?.connected || !currentSessionId) {
+      return;
+    }
+
+    socket.emit("terminal:close", { sessionId: currentSessionId });
+    setSessionId(null);
+    sessionIdRef.current = null;
+  }, []);
+
+  return {
+    isConnected,
+    sessionId,
+    createSession,
+    sendInput,
+    resize,
+    closeSession,
+    connectionError,
+  };
+}