@atercates/claude-deck 0.2.1

package/components/Terminal/constants.ts

@@ -0,0 +1,20 @@
+/**
+ * Terminal constants and theme configuration
+ */
+
+import { getTerminalTheme, type TerminalTheme } from "@/lib/terminal-themes";
+
+// Reconnection constants
+export const WS_RECONNECT_BASE_DELAY = 1000; // 1 second
+export const WS_RECONNECT_MAX_DELAY = 30000; // 30 seconds
+export const WS_INACTIVITY_TIMEOUT = 45000; // 45 seconds - force reconnect if no data
+
+// Get terminal theme for current app theme
+export function getTerminalThemeForApp(theme: string): TerminalTheme {
+  return getTerminalTheme(theme);
+}
+
+// Legacy exports for compatibility - default dark themes
+export const TERMINAL_THEME_DARK = getTerminalTheme("dark");
+export const TERMINAL_THEME_LIGHT = getTerminalTheme("light");
+export const TERMINAL_THEME = TERMINAL_THEME_DARK;

package/components/Terminal/hooks/index.ts

@@ -0,0 +1,5 @@
+"use client";
+
+export { useTerminalConnection } from "./useTerminalConnection";
+export { useTerminalSearch } from "./useTerminalSearch";
+export type { TerminalScrollState } from "./useTerminalConnection";

package/components/Terminal/hooks/resize-handlers.ts

@@ -0,0 +1,140 @@
+"use client";
+
+import type { Terminal as XTerm } from "@xterm/xterm";
+import type { FitAddon } from "@xterm/addon-fit";
+
+interface ResizeHandlersConfig {
+  term: XTerm;
+  fitAddon: FitAddon;
+  containerRef: React.RefObject<HTMLDivElement | null>;
+  isMobile: boolean;
+  sendResize: (cols: number, rows: number) => void;
+}
+
+export function setupResizeHandlers(config: ResizeHandlersConfig): () => void {
+  const { term, fitAddon, containerRef, isMobile, sendResize } = config;
+
+  let resizeTimeout: NodeJS.Timeout | null = null;
+  let fitTimeouts: NodeJS.Timeout[] = [];
+  const mqListeners: { mq: MediaQueryList; handler: () => void }[] = [];
+  let resizeObserver: ResizeObserver | null = null;
+
+  // Workaround for FitAddon bug: it reserves 14px for scrollbar even when hidden
+  // FitAddon uses `overviewRuler?.width || 14` which doesn't work with 0 (falsy)
+  // On mobile we hide the scrollbar via CSS, so manually expand xterm-screen to full width
+  const fixMobileScrollbarWidth = () => {
+    if (!isMobile || !containerRef.current) return;
+
+    const xtermScreen = containerRef.current.querySelector(
+      ".xterm-screen"
+    ) as HTMLElement | null;
+    if (xtermScreen) {
+      const containerWidth = containerRef.current.clientWidth;
+      xtermScreen.style.width = `${containerWidth}px`;
+    }
+  };
+
+  const doFit = () => {
+    // Clear any pending fit timeouts
+    fitTimeouts.forEach(clearTimeout);
+    fitTimeouts = [];
+
+    // On mobile, save scroll position before fit to prevent keyboard open/close scroll
+    const savedScrollLine = isMobile ? term.buffer.active.viewportY : null;
+
+    const restoreScroll = () => {
+      if (savedScrollLine !== null) {
+        term.scrollToLine(savedScrollLine);
+      }
+    };
+
+    requestAnimationFrame(() => {
+      // First fit - immediate
+      fitAddon.fit();
+      fixMobileScrollbarWidth();
+      restoreScroll();
+      sendResize(term.cols, term.rows);
+
+      // Second fit - after 100ms (handles most delayed layout updates)
+      fitTimeouts.push(
+        setTimeout(() => {
+          fitAddon.fit();
+          fixMobileScrollbarWidth();
+          restoreScroll();
+          sendResize(term.cols, term.rows);
+        }, 100)
+      );
+
+      // Third fit - after 250ms (handles slow layout updates, e.g., DevTools toggle)
+      fitTimeouts.push(
+        setTimeout(() => {
+          fitAddon.fit();
+          fixMobileScrollbarWidth();
+          restoreScroll();
+          sendResize(term.cols, term.rows);
+        }, 250)
+      );
+    });
+  };
+
+  const handleResize = () => {
+    if (resizeTimeout) clearTimeout(resizeTimeout);
+    resizeTimeout = setTimeout(doFit, isMobile ? 100 : 50);
+  };
+
+  // Window resize
+  window.addEventListener("resize", handleResize);
+
+  // Media query listeners for Chrome DevTools mobile toggle
+  const mediaQueries = [
+    "(max-width: 640px)",
+    "(max-width: 768px)",
+    "(max-width: 1024px)",
+  ];
+  mediaQueries.forEach((query) => {
+    const mq = window.matchMedia(query);
+    const handler = () => handleResize();
+    mq.addEventListener("change", handler);
+    mqListeners.push({ mq, handler });
+  });
+
+  // Handle orientation change on mobile
+  if (isMobile && "orientation" in screen) {
+    screen.orientation.addEventListener("change", handleResize);
+  }
+
+  // Handle visual viewport changes (for mobile keyboard)
+  if (isMobile && window.visualViewport) {
+    window.visualViewport.addEventListener("resize", handleResize);
+  }
+
+  // ResizeObserver for container changes
+  if (containerRef.current) {
+    resizeObserver = new ResizeObserver(() => handleResize());
+    resizeObserver.observe(containerRef.current);
+  }
+
+  // Return cleanup function
+  return () => {
+    if (resizeTimeout) clearTimeout(resizeTimeout);
+    fitTimeouts.forEach(clearTimeout);
+
+    window.removeEventListener("resize", handleResize);
+
+    mqListeners.forEach(({ mq, handler }) => {
+      mq.removeEventListener("change", handler);
+    });
+
+    if (isMobile && "orientation" in screen) {
+      screen.orientation.removeEventListener("change", handleResize);
+    }
+
+    if (isMobile && window.visualViewport) {
+      window.visualViewport.removeEventListener("resize", handleResize);
+    }
+
+    if (resizeObserver) {
+      resizeObserver.disconnect();
+    }
+  };
+}

package/components/Terminal/hooks/terminal-init.ts

@@ -0,0 +1,151 @@
+"use client";
+
+import { Terminal as XTerm } from "@xterm/xterm";
+import { FitAddon } from "@xterm/addon-fit";
+import { WebLinksAddon } from "@xterm/addon-web-links";
+import { SearchAddon } from "@xterm/addon-search";
+import { CanvasAddon } from "@xterm/addon-canvas";
+import { getTerminalThemeForApp } from "../constants";
+
+export interface TerminalInstance {
+  term: XTerm;
+  fitAddon: FitAddon;
+  searchAddon: SearchAddon;
+  cleanup: () => void;
+}
+
+export function createTerminal(
+  container: HTMLElement,
+  isMobile: boolean,
+  theme: string
+): TerminalInstance {
+  const fontSize = isMobile ? 11 : 14;
+  const terminalTheme = getTerminalThemeForApp(theme || "dark");
+
+  const term = new XTerm({
+    cursorBlink: true,
+    fontSize,
+    fontFamily:
+      '"JetBrains Mono", "Fira Code", Menlo, Monaco, "Courier New", monospace',
+    fontWeight: "400",
+    fontWeightBold: "600",
+    letterSpacing: 0,
+    lineHeight: isMobile ? 1.15 : 1.2,
+    scrollback: 15000,
+    scrollSensitivity: isMobile ? 3 : 1,
+    fastScrollSensitivity: 5,
+    smoothScrollDuration: 100,
+    cursorStyle: "bar",
+    cursorWidth: 2,
+    allowProposedApi: true,
+    theme: terminalTheme,
+  });
+
+  const fitAddon = new FitAddon();
+  const searchAddon = new SearchAddon();
+
+  term.loadAddon(fitAddon);
+  term.loadAddon(new WebLinksAddon());
+  term.loadAddon(searchAddon);
+  term.open(container);
+  term.loadAddon(new CanvasAddon());
+  fitAddon.fit();
+
+  // Helper to copy text to clipboard with fallback
+  const copyToClipboard = (text: string) => {
+    if (navigator.clipboard?.writeText) {
+      navigator.clipboard.writeText(text).catch(() => {
+        // Fallback if clipboard API fails
+        execCommandCopy(text);
+      });
+    } else {
+      // Fallback for non-secure contexts
+      execCommandCopy(text);
+    }
+  };
+
+  const execCommandCopy = (text: string) => {
+    const textarea = document.createElement("textarea");
+    textarea.value = text;
+    textarea.style.position = "fixed";
+    textarea.style.opacity = "0";
+    document.body.appendChild(textarea);
+    textarea.select();
+    document.execCommand("copy");
+    document.body.removeChild(textarea);
+  };
+
+  // Handle Cmd+A and Cmd+C via document event listener (more reliable than attachCustomKeyEventHandler)
+  const handleKeyDown = (event: KeyboardEvent) => {
+    // Only handle when terminal is focused (xterm creates its textarea inside the container)
+    if (!container.contains(document.activeElement)) return;
+
+    const key = event.key.toLowerCase();
+
+    // Cmd+A (macOS) / Ctrl+A for select all
+    if ((event.metaKey || event.ctrlKey) && key === "a") {
+      event.preventDefault();
+      event.stopPropagation();
+      term.selectAll();
+      return;
+    }
+
+    // Cmd+C (macOS) / Ctrl+C for copy when text is selected
+    if ((event.metaKey || event.ctrlKey) && key === "c") {
+      const selection = term.getSelection();
+      if (selection) {
+        event.preventDefault();
+        event.stopPropagation();
+        copyToClipboard(selection);
+      }
+    }
+  };
+
+  // Use capture phase to intercept before browser default
+  document.addEventListener("keydown", handleKeyDown, true);
+
+  // Handle OSC 52 (clipboard) sequences from tmux
+  const osc52Disposable = term.parser.registerOscHandler(52, (data) => {
+    const parts = data.split(";");
+    if (parts.length >= 2) {
+      const base64 = parts[parts.length - 1];
+      if (base64 && base64 !== "?") {
+        try {
+          const text = atob(base64);
+          copyToClipboard(text);
+        } catch {}
+      }
+    }
+    return true;
+  });
+
+  const cleanup = () => {
+    document.removeEventListener("keydown", handleKeyDown, true);
+    osc52Disposable.dispose();
+  };
+
+  return { term, fitAddon, searchAddon, cleanup };
+}
+
+export function updateTerminalForMobile(
+  term: XTerm,
+  fitAddon: FitAddon,
+  isMobile: boolean,
+  sendResize: (cols: number, rows: number) => void
+): void {
+  const newFontSize = isMobile ? 11 : 14;
+  const newLineHeight = isMobile ? 1.15 : 1.2;
+
+  if (term.options.fontSize !== newFontSize) {
+    term.options.fontSize = newFontSize;
+    term.options.lineHeight = newLineHeight;
+    term.refresh(0, term.rows - 1);
+    fitAddon.fit();
+    sendResize(term.cols, term.rows);
+  }
+}
+
+export function updateTerminalTheme(term: XTerm, theme: string): void {
+  const terminalTheme = getTerminalThemeForApp(theme || "dark");
+  term.options.theme = terminalTheme;
+}

package/components/Terminal/hooks/touch-scroll.ts

@@ -0,0 +1,155 @@
+"use client";
+
+import type { Terminal as XTerm } from "@xterm/xterm";
+import type { RefObject } from "react";
+
+interface TouchScrollConfig {
+  term: XTerm;
+  selectModeRef: RefObject<boolean>;
+}
+
+export function setupTouchScroll(config: TouchScrollConfig): () => void {
+  const { term, selectModeRef } = config;
+
+  if (!term.element) return () => {};
+
+  let touchElement: HTMLElement | null = null;
+  let handleTouchStart: ((e: TouchEvent) => void) | null = null;
+  let handleTouchMove: ((e: TouchEvent) => void) | null = null;
+  let handleTouchEnd: (() => void) | null = null;
+  let handleTouchCancel: (() => void) | null = null;
+  let setupTimeout: NodeJS.Timeout | null = null;
+
+  const setupTouchScrollInner = () => {
+    const xtermScreen = term.element?.querySelector(
+      ".xterm-screen"
+    ) as HTMLElement | null;
+    if (!xtermScreen) {
+      setupTimeout = setTimeout(setupTouchScrollInner, 50);
+      return;
+    }
+
+    xtermScreen.style.touchAction = "none";
+    xtermScreen.style.userSelect = "none";
+    (
+      xtermScreen.style as CSSStyleDeclaration & { webkitUserSelect?: string }
+    ).webkitUserSelect = "none";
+
+    const canvases = xtermScreen.querySelectorAll("canvas");
+    canvases.forEach((canvas) => {
+      (canvas as HTMLElement).style.touchAction = "none";
+    });
+
+    // Prevent native scroll on the xterm-viewport and scrollable-element wrappers
+    // which can intercept touch events on mobile before they reach .xterm-screen
+    const viewport = term.element?.querySelector(
+      ".xterm-viewport"
+    ) as HTMLElement | null;
+    if (viewport) {
+      viewport.style.touchAction = "none";
+      viewport.style.overflowY = "hidden";
+    }
+    const scrollableEl = term.element?.querySelector(
+      ".xterm-scrollable-element"
+    ) as HTMLElement | null;
+    if (scrollableEl) {
+      scrollableEl.style.touchAction = "none";
+    }
+
+    let startX = 0;
+    let startY = 0;
+    let lastY = 0;
+    let scrollDirection: "vertical" | "horizontal" | null = null;
+    let scrollAccumulator = 0;
+
+    handleTouchStart = (e: TouchEvent) => {
+      if (selectModeRef.current || e.touches.length === 0) return;
+      const touch = e.touches[0];
+      startX = touch.clientX;
+      startY = touch.clientY;
+      lastY = touch.clientY;
+      scrollDirection = null;
+      scrollAccumulator = 0;
+    };
+
+    handleTouchMove = (e: TouchEvent) => {
+      if (selectModeRef.current || e.touches.length === 0) return;
+      if (scrollDirection === null && startX === 0 && startY === 0) return;
+
+      const touch = e.touches[0];
+
+      if (scrollDirection === null) {
+        const deltaX = Math.abs(touch.clientX - startX);
+        const deltaY = Math.abs(touch.clientY - startY);
+        if (deltaX > 8 || deltaY > 8) {
+          scrollDirection = deltaX > deltaY ? "horizontal" : "vertical";
+        }
+      }
+
+      if (scrollDirection === "horizontal") return;
+
+      if (scrollDirection === "vertical") {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+
+      const deltaY = touch.clientY - lastY;
+      lastY = touch.clientY;
+
+      if (Math.abs(deltaY) < 1) return;
+
+      scrollAccumulator += deltaY;
+      const step = 20;
+
+      while (Math.abs(scrollAccumulator) >= step) {
+        const wheelDelta = scrollAccumulator > 0 ? -100 : 100;
+        const syntheticWheel = new WheelEvent("wheel", {
+          deltaY: wheelDelta,
+          deltaMode: WheelEvent.DOM_DELTA_PIXEL,
+          bubbles: true,
+          cancelable: true,
+          clientX: touch.clientX,
+          clientY: touch.clientY,
+        });
+        xtermScreen.dispatchEvent(syntheticWheel);
+        scrollAccumulator += scrollAccumulator > 0 ? -step : step;
+      }
+    };
+
+    handleTouchEnd = () => {
+      startX = 0;
+      startY = 0;
+      lastY = 0;
+      scrollDirection = null;
+      scrollAccumulator = 0;
+    };
+    handleTouchCancel = handleTouchEnd;
+
+    xtermScreen.addEventListener("touchstart", handleTouchStart, {
+      passive: true,
+    });
+    xtermScreen.addEventListener("touchmove", handleTouchMove, {
+      passive: false,
+    });
+    xtermScreen.addEventListener("touchend", handleTouchEnd);
+    xtermScreen.addEventListener("touchcancel", handleTouchCancel);
+
+    touchElement = xtermScreen;
+  };
+
+  setupTouchScrollInner();
+
+  return () => {
+    if (setupTimeout) clearTimeout(setupTimeout);
+    if (touchElement) {
+      if (handleTouchStart)
+        touchElement.removeEventListener("touchstart", handleTouchStart);
+      if (handleTouchMove)
+        touchElement.removeEventListener("touchmove", handleTouchMove);
+      if (handleTouchEnd)
+        touchElement.removeEventListener("touchend", handleTouchEnd);
+      if (handleTouchCancel)
+        touchElement.removeEventListener("touchcancel", handleTouchCancel);
+    }
+  };
+}