@atercates/claude-deck 0.2.1

package/components/Terminal/hooks/useTerminalConnection.ts

@@ -0,0 +1,282 @@
+"use client";
+
+import { useEffect, useRef, useState, useCallback } from "react";
+import type { Terminal as XTerm } from "@xterm/xterm";
+import type { FitAddon } from "@xterm/addon-fit";
+import type { SearchAddon } from "@xterm/addon-search";
+import { WS_RECONNECT_BASE_DELAY } from "../constants";
+import type {
+  TerminalScrollState,
+  UseTerminalConnectionProps,
+  UseTerminalConnectionReturn,
+} from "./useTerminalConnection.types";
+import {
+  createTerminal,
+  updateTerminalForMobile,
+  updateTerminalTheme,
+} from "./terminal-init";
+import { setupTouchScroll } from "./touch-scroll";
+import { createWebSocketConnection } from "./websocket-connection";
+import { setupResizeHandlers } from "./resize-handlers";
+
+export type { TerminalScrollState } from "./useTerminalConnection.types";
+
+export function useTerminalConnection({
+  terminalRef,
+  onConnected,
+  onDisconnected,
+  onBeforeUnmount,
+  initialScrollState,
+  isMobile = false,
+  theme = "dark",
+  selectMode = false,
+}: UseTerminalConnectionProps): UseTerminalConnectionReturn {
+  const [connected, setConnected] = useState(false);
+  const [isAtBottom, setIsAtBottom] = useState(true);
+  const [connectionState, setConnectionState] = useState<
+    "connecting" | "connected" | "disconnected" | "reconnecting"
+  >("connecting");
+
+  const wsRef = useRef<WebSocket | null>(null);
+  const xtermRef = useRef<XTerm | null>(null);
+  const fitAddonRef = useRef<FitAddon | null>(null);
+  const searchAddonRef = useRef<SearchAddon | null>(null);
+  const reconnectFnRef = useRef<(() => void) | null>(null);
+
+  // Reconnection tracking
+  const reconnectTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const reconnectDelayRef = useRef<number>(WS_RECONNECT_BASE_DELAY);
+  const intentionalCloseRef = useRef<boolean>(false);
+
+  // Store callbacks and state in refs
+  const callbacksRef = useRef({ onConnected, onDisconnected, onBeforeUnmount });
+  callbacksRef.current = { onConnected, onDisconnected, onBeforeUnmount };
+  const initialScrollStateRef = useRef(initialScrollState);
+  const selectModeRef = useRef(selectMode);
+  selectModeRef.current = selectMode;
+
+  // Simple callbacks
+  const scrollToBottom = useCallback(
+    () => xtermRef.current?.scrollToBottom(),
+    []
+  );
+
+  const copySelection = useCallback(() => {
+    const selection = xtermRef.current?.getSelection();
+    if (selection) {
+      navigator.clipboard.writeText(selection);
+      return true;
+    }
+    return false;
+  }, []);
+
+  const sendInput = useCallback((data: string) => {
+    if (wsRef.current?.readyState === WebSocket.OPEN) {
+      wsRef.current.send(JSON.stringify({ type: "input", data }));
+    }
+  }, []);
+
+  const sendCommand = useCallback((command: string) => {
+    if (wsRef.current?.readyState === WebSocket.OPEN) {
+      wsRef.current.send(JSON.stringify({ type: "command", data: command }));
+    }
+  }, []);
+
+  const focus = useCallback(() => xtermRef.current?.focus(), []);
+
+  const getScrollState = useCallback((): TerminalScrollState | null => {
+    if (!xtermRef.current || !terminalRef.current) return null;
+    const buffer = xtermRef.current.buffer.active;
+    const viewport = terminalRef.current.querySelector(
+      ".xterm-viewport"
+    ) as HTMLElement;
+    return {
+      scrollTop: viewport?.scrollTop ?? 0,
+      cursorY: buffer.cursorY,
+      baseY: buffer.baseY,
+    };
+  }, [terminalRef]);
+
+  const restoreScrollState = useCallback(
+    (state: TerminalScrollState) => {
+      const viewport = terminalRef.current?.querySelector(
+        ".xterm-viewport"
+      ) as HTMLElement;
+      if (viewport) {
+        requestAnimationFrame(() => {
+          viewport.scrollTop = state.scrollTop;
+        });
+      }
+    },
+    [terminalRef]
+  );
+
+  const triggerResize = useCallback(() => {
+    const fitAddon = fitAddonRef.current;
+    const term = xtermRef.current;
+    if (!fitAddon || !term) return;
+    fitAddon.fit();
+    if (wsRef.current?.readyState === WebSocket.OPEN) {
+      wsRef.current.send(
+        JSON.stringify({ type: "resize", cols: term.cols, rows: term.rows })
+      );
+    }
+  }, []);
+
+  const reconnect = useCallback(() => {
+    reconnectFnRef.current?.();
+  }, []);
+
+  // Main setup effect
+  useEffect(() => {
+    if (!terminalRef.current) return;
+
+    let cancelled = false;
+    // Reset intentional close flag (may be true from previous cleanup)
+    intentionalCloseRef.current = false;
+    let cleanupTouchScroll: (() => void) | null = null;
+    let cleanupResizeHandlers: (() => void) | null = null;
+    let cleanupWebSocket: (() => void) | null = null;
+    let cleanupTerminal: (() => void) | null = null;
+
+    const connectTimeout = setTimeout(() => {
+      if (cancelled || !terminalRef.current) return;
+
+      // Initialize terminal
+      const { term, fitAddon, searchAddon, cleanup } = createTerminal(
+        terminalRef.current,
+        isMobile,
+        theme
+      );
+      xtermRef.current = term;
+      fitAddonRef.current = fitAddon;
+      searchAddonRef.current = searchAddon;
+      cleanupTerminal = cleanup;
+
+      // Scroll tracking
+      term.onScroll(() => {
+        const buffer = term.buffer.active;
+        setIsAtBottom(buffer.viewportY >= buffer.baseY);
+      });
+
+      // Setup touch scroll
+      cleanupTouchScroll = setupTouchScroll({ term, selectModeRef });
+
+      // Setup WebSocket
+      const wsManager = createWebSocketConnection(
+        term,
+        {
+          onConnected: () => {
+            callbacksRef.current.onConnected?.();
+            // Restore scroll state after connection
+            if (initialScrollStateRef.current && terminalRef.current) {
+              setTimeout(() => {
+                const viewport = terminalRef.current?.querySelector(
+                  ".xterm-viewport"
+                ) as HTMLElement;
+                if (viewport)
+                  viewport.scrollTop = initialScrollStateRef.current!.scrollTop;
+              }, 200);
+            }
+          },
+          onDisconnected: () => callbacksRef.current.onDisconnected?.(),
+          onConnectionStateChange: setConnectionState,
+          onSetConnected: setConnected,
+        },
+        wsRef,
+        reconnectTimeoutRef,
+        reconnectDelayRef,
+        intentionalCloseRef
+      );
+      cleanupWebSocket = wsManager.cleanup;
+      reconnectFnRef.current = wsManager.reconnect;
+
+      // Setup resize handlers
+      cleanupResizeHandlers = setupResizeHandlers({
+        term,
+        fitAddon,
+        containerRef: terminalRef,
+        isMobile,
+        sendResize: wsManager.sendResize,
+      });
+    }, 150);
+
+    return () => {
+      cancelled = true;
+      clearTimeout(connectTimeout);
+      intentionalCloseRef.current = true;
+
+      // Save scroll state before unmount
+      const term = xtermRef.current;
+      if (term && callbacksRef.current.onBeforeUnmount && terminalRef.current) {
+        const buffer = term.buffer.active;
+        const viewport = terminalRef.current.querySelector(
+          ".xterm-viewport"
+        ) as HTMLElement;
+        callbacksRef.current.onBeforeUnmount({
+          scrollTop: viewport?.scrollTop ?? 0,
+          cursorY: buffer.cursorY,
+          baseY: buffer.baseY,
+        });
+      }
+
+      // Cleanup in reverse order
+      cleanupResizeHandlers?.();
+      cleanupWebSocket?.();
+      cleanupTouchScroll?.();
+      cleanupTerminal?.();
+
+      // Reset refs
+      reconnectDelayRef.current = WS_RECONNECT_BASE_DELAY;
+
+      if (wsRef.current) wsRef.current = null;
+      if (xtermRef.current) {
+        try {
+          xtermRef.current.dispose();
+        } catch {
+          /* ignore */
+        }
+        xtermRef.current = null;
+      }
+      fitAddonRef.current = null;
+      searchAddonRef.current = null;
+    };
+  }, [isMobile, terminalRef, theme]);
+
+  // Handle isMobile changes dynamically
+  useEffect(() => {
+    const term = xtermRef.current;
+    const fitAddon = fitAddonRef.current;
+    if (!term || !fitAddon) return;
+
+    updateTerminalForMobile(term, fitAddon, isMobile, (cols, rows) => {
+      if (wsRef.current?.readyState === WebSocket.OPEN) {
+        wsRef.current.send(JSON.stringify({ type: "resize", cols, rows }));
+      }
+    });
+  }, [isMobile]);
+
+  // Handle theme changes dynamically
+  useEffect(() => {
+    if (xtermRef.current) {
+      updateTerminalTheme(xtermRef.current, theme);
+    }
+  }, [theme]);
+
+  return {
+    connected,
+    connectionState,
+    isAtBottom,
+    xtermRef,
+    searchAddonRef,
+    scrollToBottom,
+    copySelection,
+    sendInput,
+    sendCommand,
+    focus,
+    getScrollState,
+    restoreScrollState,
+    triggerResize,
+    reconnect,
+  };
+}

package/components/Terminal/hooks/useTerminalConnection.types.ts

@@ -0,0 +1,39 @@
+"use client";
+
+import type { RefObject } from "react";
+import type { Terminal as XTerm } from "@xterm/xterm";
+import type { SearchAddon } from "@xterm/addon-search";
+
+export interface TerminalScrollState {
+  scrollTop: number;
+  cursorY: number;
+  baseY: number;
+}
+
+export interface UseTerminalConnectionProps {
+  terminalRef: RefObject<HTMLDivElement | null>;
+  onConnected?: () => void;
+  onDisconnected?: () => void;
+  onBeforeUnmount?: (scrollState: TerminalScrollState) => void;
+  initialScrollState?: TerminalScrollState;
+  isMobile?: boolean;
+  theme?: string;
+  selectMode?: boolean;
+}
+
+export interface UseTerminalConnectionReturn {
+  connected: boolean;
+  connectionState: "connecting" | "connected" | "disconnected" | "reconnecting";
+  isAtBottom: boolean;
+  xtermRef: RefObject<XTerm | null>;
+  searchAddonRef: RefObject<SearchAddon | null>;
+  scrollToBottom: () => void;
+  copySelection: () => boolean;
+  sendInput: (data: string) => void;
+  sendCommand: (command: string) => void;
+  focus: () => void;
+  getScrollState: () => TerminalScrollState | null;
+  restoreScrollState: (state: TerminalScrollState) => void;
+  triggerResize: () => void;
+  reconnect: () => void;
+}

package/components/Terminal/hooks/useTerminalSearch.ts

@@ -0,0 +1,103 @@
+"use client";
+
+import { useState, useCallback, useEffect, useRef } from "react";
+import type { SearchAddon } from "@xterm/addon-search";
+import type { Terminal as XTerm } from "@xterm/xterm";
+
+export function useTerminalSearch(
+  searchAddonRef: React.RefObject<SearchAddon | null>,
+  xtermRef: React.RefObject<XTerm | null>
+) {
+  const [searchVisible, setSearchVisible] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const searchInputRef = useRef<HTMLInputElement>(null);
+
+  const findNext = useCallback(() => {
+    if (searchAddonRef.current && searchQuery) {
+      searchAddonRef.current.findNext(searchQuery, {
+        regex: false,
+        caseSensitive: false,
+        incremental: true,
+      });
+    }
+  }, [searchQuery, searchAddonRef]);
+
+  const findPrevious = useCallback(() => {
+    if (searchAddonRef.current && searchQuery) {
+      searchAddonRef.current.findPrevious(searchQuery, {
+        regex: false,
+        caseSensitive: false,
+      });
+    }
+  }, [searchQuery, searchAddonRef]);
+
+  const closeSearch = useCallback(() => {
+    setSearchVisible(false);
+    setSearchQuery("");
+    if (searchAddonRef.current) {
+      searchAddonRef.current.clearDecorations();
+    }
+    xtermRef.current?.focus();
+  }, [searchAddonRef, xtermRef]);
+
+  const openSearch = useCallback(() => {
+    setSearchVisible(true);
+    setTimeout(() => searchInputRef.current?.focus(), 0);
+  }, []);
+
+  // Keyboard shortcuts
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Ctrl/Cmd + Shift + F = Open search
+      if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === "f") {
+        e.preventDefault();
+        openSearch();
+      }
+      // Escape = Close search
+      if (e.key === "Escape" && searchVisible) {
+        closeSearch();
+      }
+      // Enter in search = Find next
+      if (
+        e.key === "Enter" &&
+        searchVisible &&
+        document.activeElement === searchInputRef.current
+      ) {
+        e.preventDefault();
+        if (e.shiftKey) {
+          findPrevious();
+        } else {
+          findNext();
+        }
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [searchVisible, findNext, findPrevious, closeSearch, openSearch]);
+
+  // Auto-search when query changes
+  useEffect(() => {
+    if (searchQuery && searchAddonRef.current) {
+      findNext();
+    }
+  }, [searchQuery, findNext, searchAddonRef]);
+
+  return {
+    searchVisible,
+    searchQuery,
+    setSearchQuery,
+    searchInputRef,
+    openSearch,
+    closeSearch,
+    findNext,
+    findPrevious,
+    toggleSearch: () => {
+      if (searchVisible) {
+        closeSearch();
+      } else {
+        openSearch();
+      }
+    },
+  };
+}

package/components/Terminal/hooks/websocket-connection.ts

@@ -0,0 +1,274 @@
+"use client";
+
+import type { Terminal as XTerm } from "@xterm/xterm";
+import {
+  WS_RECONNECT_BASE_DELAY,
+  WS_RECONNECT_MAX_DELAY,
+  WS_INACTIVITY_TIMEOUT,
+} from "../constants";
+
+export interface WebSocketCallbacks {
+  onConnected?: () => void;
+  onDisconnected?: () => void;
+  onConnectionStateChange: (
+    state: "connecting" | "connected" | "disconnected" | "reconnecting"
+  ) => void;
+  onSetConnected: (connected: boolean) => void;
+}
+
+export interface WebSocketManager {
+  ws: WebSocket;
+  sendInput: (data: string) => void;
+  sendCommand: (command: string) => void;
+  sendResize: (cols: number, rows: number) => void;
+  reconnect: () => void;
+  cleanup: () => void;
+}
+
+export function createWebSocketConnection(
+  term: XTerm,
+  callbacks: WebSocketCallbacks,
+  wsRef: React.MutableRefObject<WebSocket | null>,
+  reconnectTimeoutRef: React.MutableRefObject<NodeJS.Timeout | null>,
+  reconnectDelayRef: React.MutableRefObject<number>,
+  intentionalCloseRef: React.MutableRefObject<boolean>
+): WebSocketManager {
+  const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+  const ws = new WebSocket(`${protocol}//${window.location.host}/ws/terminal`);
+  wsRef.current = ws;
+
+  const sendResize = (cols: number, rows: number) => {
+    if (wsRef.current?.readyState === WebSocket.OPEN) {
+      wsRef.current.send(JSON.stringify({ type: "resize", cols, rows }));
+    }
+  };
+
+  const sendInput = (data: string) => {
+    if (wsRef.current?.readyState === WebSocket.OPEN) {
+      wsRef.current.send(JSON.stringify({ type: "input", data }));
+    }
+  };
+
+  const sendCommand = (command: string) => {
+    if (wsRef.current?.readyState === WebSocket.OPEN) {
+      wsRef.current.send(JSON.stringify({ type: "command", data: command }));
+    }
+  };
+
+  // Force reconnect - kills any existing connection and creates fresh one
+  // Note: savedHandlers is populated after handlers are defined below
+  let savedHandlers: {
+    onopen: typeof ws.onopen;
+    onmessage: typeof ws.onmessage;
+    onclose: typeof ws.onclose;
+    onerror: typeof ws.onerror;
+  };
+
+  const forceReconnect = () => {
+    if (intentionalCloseRef.current) return;
+
+    // Clear any pending reconnect
+    if (reconnectTimeoutRef.current) {
+      clearTimeout(reconnectTimeoutRef.current);
+      reconnectTimeoutRef.current = null;
+    }
+
+    // Force close existing socket regardless of state (handles hung sockets)
+    const oldWs = wsRef.current;
+    if (oldWs) {
+      // Remove handlers to prevent callbacks
+      oldWs.onopen = null;
+      oldWs.onmessage = null;
+      oldWs.onclose = null;
+      oldWs.onerror = null;
+      try {
+        oldWs.close();
+      } catch {
+        /* ignore */
+      }
+      wsRef.current = null;
+    }
+
+    callbacks.onConnectionStateChange("reconnecting");
+    reconnectDelayRef.current = WS_RECONNECT_BASE_DELAY;
+
+    // Create fresh connection with saved handlers
+    const newWs = new WebSocket(
+      `${protocol}//${window.location.host}/ws/terminal`
+    );
+    wsRef.current = newWs;
+    newWs.onopen = savedHandlers.onopen;
+    newWs.onmessage = savedHandlers.onmessage;
+    newWs.onclose = savedHandlers.onclose;
+    newWs.onerror = savedHandlers.onerror;
+  };
+
+  // Soft reconnect - only if not already connected
+  const attemptReconnect = () => {
+    if (intentionalCloseRef.current) return;
+    if (wsRef.current?.readyState === WebSocket.OPEN) return;
+    forceReconnect();
+  };
+
+  let inactivityTimer: ReturnType<typeof setTimeout> | null = null;
+  const resetInactivityTimer = () => {
+    if (inactivityTimer) clearTimeout(inactivityTimer);
+    inactivityTimer = setTimeout(() => {
+      if (ws.readyState === WebSocket.OPEN) {
+        forceReconnect();
+      }
+    }, WS_INACTIVITY_TIMEOUT);
+  };
+
+  ws.onopen = () => {
+    callbacks.onSetConnected(true);
+    callbacks.onConnectionStateChange("connected");
+    reconnectDelayRef.current = WS_RECONNECT_BASE_DELAY;
+    callbacks.onConnected?.();
+    sendResize(term.cols, term.rows);
+    term.focus();
+    resetInactivityTimer();
+  };
+
+  ws.onmessage = (event) => {
+    resetInactivityTimer();
+    try {
+      const msg = JSON.parse(event.data);
+      if (msg.type === "output") {
+        const buffer = term.buffer.active;
+        const scrollYBefore = buffer.viewportY;
+        const wasAtTop = scrollYBefore <= 0;
+        const wasAtBottom = scrollYBefore >= buffer.baseY;
+
+        term.write(msg.data);
+
+        // After write, check if scroll jumped to top unexpectedly
+        // Give it a moment for the write to complete
+        requestAnimationFrame(() => {
+          const scrollYAfter = term.buffer.active.viewportY;
+          const isNowAtTop = scrollYAfter <= 0;
+
+          // If we jumped to top but weren't at top before, and weren't at bottom
+          // (at bottom means we want to follow output), restore position
+          if (isNowAtTop && !wasAtTop && !wasAtBottom && scrollYBefore > 5) {
+            term.scrollToLine(scrollYBefore);
+          }
+        });
+      } else if (msg.type === "exit") {
+        term.write("\r\n\x1b[33m[Session ended]\x1b[0m\r\n");
+      }
+    } catch {
+      term.write(event.data);
+    }
+  };
+
+  ws.onclose = () => {
+    callbacks.onSetConnected(false);
+    callbacks.onDisconnected?.();
+
+    if (intentionalCloseRef.current) {
+      callbacks.onConnectionStateChange("disconnected");
+      return;
+    }
+
+    callbacks.onConnectionStateChange("disconnected");
+
+    const currentDelay = reconnectDelayRef.current;
+    reconnectDelayRef.current = Math.min(
+      currentDelay * 2,
+      WS_RECONNECT_MAX_DELAY
+    );
+    reconnectTimeoutRef.current = setTimeout(attemptReconnect, currentDelay);
+  };
+
+  ws.onerror = () => {
+    // Errors are handled by onclose
+  };
+
+  // Save handlers now that they're defined (for reconnection)
+  savedHandlers = {
+    onopen: ws.onopen,
+    onmessage: ws.onmessage,
+    onclose: ws.onclose,
+    onerror: ws.onerror,
+  };
+
+  // Handle terminal input
+  term.onData((data) => {
+    sendInput(data);
+  });
+
+  // Handle Shift+Enter for multi-line input
+  term.attachCustomKeyEventHandler((event) => {
+    if (event.type === "keydown" && event.key === "Enter" && event.shiftKey) {
+      sendInput("\n");
+      return false;
+    }
+    return true;
+  });
+
+  // Track when page was last hidden (for detecting long sleeps)
+  let hiddenAt: number | null = null;
+
+  // Handle visibility change for reconnection
+  const handleVisibilityChange = () => {
+    if (intentionalCloseRef.current) return;
+
+    if (document.visibilityState === "hidden") {
+      hiddenAt = Date.now();
+      return;
+    }
+
+    // Page became visible
+    if (document.visibilityState !== "visible") return;
+
+    const wasHiddenFor = hiddenAt ? Date.now() - hiddenAt : 0;
+    hiddenAt = null;
+
+    // If hidden for more than 5 seconds, force reconnect (iOS Safari kills sockets)
+    // This handles the "hung socket" problem where readyState says OPEN but it's dead
+    if (wasHiddenFor > 5000) {
+      forceReconnect();
+      return;
+    }
+
+    // Otherwise only reconnect if actually disconnected
+    const currentWs = wsRef.current;
+    const isDisconnected =
+      !currentWs ||
+      currentWs.readyState === WebSocket.CLOSED ||
+      currentWs.readyState === WebSocket.CLOSING;
+    const isStaleConnection = currentWs?.readyState === WebSocket.CONNECTING;
+
+    if (isDisconnected || isStaleConnection) {
+      forceReconnect();
+    }
+  };
+  document.addEventListener("visibilitychange", handleVisibilityChange);
+
+  const cleanup = () => {
+    if (inactivityTimer) clearTimeout(inactivityTimer);
+    document.removeEventListener("visibilitychange", handleVisibilityChange);
+    if (reconnectTimeoutRef.current) {
+      clearTimeout(reconnectTimeoutRef.current);
+      reconnectTimeoutRef.current = null;
+    }
+    const currentWs = wsRef.current;
+    if (
+      currentWs &&
+      (currentWs.readyState === WebSocket.OPEN ||
+        currentWs.readyState === WebSocket.CONNECTING)
+    ) {
+      currentWs.close(1000, "Component unmounting");
+    }
+  };
+
+  return {
+    ws,
+    sendInput,
+    sendCommand,
+    sendResize,
+    reconnect: forceReconnect,
+    cleanup,
+  };
+}