@wong2kim/wmux 1.0.0

package/src/renderer/hooks/useTerminal.ts

@@ -0,0 +1,349 @@
+import { useEffect, useRef, useCallback } from 'react';
+import { Terminal } from '@xterm/xterm';
+import { FitAddon } from '@xterm/addon-fit';
+import { WebglAddon } from '@xterm/addon-webgl';
+import { SearchAddon } from '@xterm/addon-search';
+import { useStore } from '../stores';
+import { t } from '../i18n';
+import { XTERM_THEMES, type ThemeId } from '../themes';
+
+// Lightweight copy feedback toast — injects/removes a DOM element
+let copyToastTimer: ReturnType<typeof setTimeout> | null = null;
+function showCopyToast() {
+  let el = document.getElementById('wmux-copy-toast');
+  if (!el) {
+    el = document.createElement('div');
+    el.id = 'wmux-copy-toast';
+    el.style.cssText = 'position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:#a6e3a1;color:#1e1e2e;font-family:monospace;font-size:11px;font-weight:600;padding:3px 12px;border-radius:4px;z-index:9999;pointer-events:none;opacity:0;transition:opacity 0.2s';
+    document.body.appendChild(el);
+  }
+  el.textContent = t('terminal.copied');
+  el.style.opacity = '1';
+  if (copyToastTimer) clearTimeout(copyToastTimer);
+  copyToastTimer = setTimeout(() => { el!.style.opacity = '0'; }, 1200);
+}
+
+interface UseTerminalOptions {
+  ptyId: string | null;
+  /** Combined visibility flag: true only when the terminal's workspace AND surface tab are both active.
+   *  When false the terminal DOM container may be hidden (display:none / zero-size). */
+  isVisible?: boolean;
+}
+
+export function useTerminal(containerRef: React.RefObject<HTMLDivElement | null>, options: UseTerminalOptions) {
+  const terminalRef = useRef<Terminal | null>(null);
+  const fitAddonRef = useRef<FitAddon | null>(null);
+  const searchAddonRef = useRef<SearchAddon | null>(null);
+  const { ptyId, isVisible = true } = options;
+  const terminalFontSize = useStore((s) => s.terminalFontSize);
+  const terminalFontFamily = useStore((s) => s.terminalFontFamily);
+  const scrollbackLines = useStore((s) => s.scrollbackLines);
+  const theme = useStore((s) => s.theme) as ThemeId;
+  const xtermTheme = XTERM_THEMES[theme] ?? XTERM_THEMES.catppuccin;
+
+  const fit = useCallback(() => {
+    const container = containerRef.current;
+    if (!fitAddonRef.current || !terminalRef.current || !container) return;
+    // Guard: skip fit entirely when the container is hidden (zero dimensions).
+    // Calling fit() on a display:none element produces 0 cols/rows which
+    // corrupts the xterm buffer and causes the "infinite copy downward" bug.
+    if (container.offsetWidth === 0 || container.offsetHeight === 0) return;
+    try {
+      fitAddonRef.current.fit();
+      if (ptyId) {
+        const { cols, rows } = terminalRef.current;
+        // Never send 0-size resize to PTY — that corrupts the terminal buffer.
+        if (cols > 0 && rows > 0) {
+          window.electronAPI.pty.resize(ptyId, cols, rows);
+        }
+      }
+    } catch {
+      // ignore fit errors during unmount
+    }
+  }, [ptyId, containerRef]);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container || !ptyId) return;
+
+    const terminal = new Terminal({
+      cursorBlink: true,
+      fontSize: terminalFontSize,
+      scrollback: scrollbackLines,
+      scrollOnUserInput: false,
+      fontFamily: `'${terminalFontFamily}', 'Consolas', 'Courier New', monospace`,
+      theme: xtermTheme,
+      allowProposedApi: true,
+    });
+
+    const fitAddon = new FitAddon();
+    const searchAddon = new SearchAddon();
+    terminal.loadAddon(fitAddon);
+    terminal.loadAddon(searchAddon);
+    terminal.open(container);
+
+    // Try WebGL, fall back to canvas
+    try {
+      const webglAddon = new WebglAddon();
+      webglAddon.onContextLoss(() => {
+        webglAddon.dispose();
+      });
+      terminal.loadAddon(webglAddon);
+    } catch {
+      console.warn('WebGL addon failed, using canvas renderer');
+    }
+
+    // Only fit immediately if the container is actually visible (non-zero size).
+    // If the workspace starts hidden (display:none), skip the initial fit so we
+    // don't corrupt the terminal with 0 cols/rows. The visibility-watcher effect
+    // below will trigger a proper fit when the workspace is shown.
+    if (container.offsetWidth > 0 && container.offsetHeight > 0) {
+      fitAddon.fit();
+    }
+
+    // Clipboard + shortcut handling
+    terminal.attachCustomKeyEventHandler((e) => {
+      if (e.type !== 'keydown') return true;
+
+      // Pass app shortcuts through to useKeyboard (don't let xterm consume them)
+      if (e.ctrlKey && !e.shiftKey && [',', 'b', 'k', 'i', 'n', 't'].includes(e.key)) {
+        return false; // let DOM bubble to useKeyboard
+      }
+      if (e.ctrlKey && e.shiftKey) {
+        return false; // all Ctrl+Shift combos → app shortcuts
+      }
+
+      // Custom keybindings: let function keys and matched combos pass through to useKeyboard
+      const { customKeybindings } = useStore.getState();
+      if (customKeybindings.length > 0) {
+        const parts: string[] = [];
+        if (e.ctrlKey) parts.push('Ctrl');
+        if (e.shiftKey) parts.push('Shift');
+        if (e.altKey) parts.push('Alt');
+        let k = e.key;
+        if (k.length === 1) k = k.toUpperCase();
+        parts.push(k);
+        const combo = parts.join('+');
+        if (customKeybindings.some((kb) => kb.key === combo)) {
+          return false; // let useKeyboard handle it
+        }
+      }
+
+      // Ctrl+C: copy if selection exists, otherwise send SIGINT
+      if (e.ctrlKey && !e.shiftKey && e.key === 'c') {
+        const sel = terminal.getSelection();
+        if (sel) {
+          void window.clipboardAPI.writeText(sel);
+          terminal.clearSelection();
+          showCopyToast();
+          return false;
+        }
+        return true; // no selection → SIGINT
+      }
+
+      // Ctrl+V: paste from clipboard (use our IPC clipboard, block event
+      // so xterm doesn't also paste via browser's native paste event)
+      if (e.ctrlKey && !e.shiftKey && e.key === 'v') {
+        e.preventDefault();
+        void window.clipboardAPI.readText().then((text) => {
+          if (text) window.electronAPI.pty.write(ptyId, text);
+        }).catch(() => {});
+        return false;
+      }
+
+      // Ctrl+Shift+C: copy fallback
+      if (e.ctrlKey && e.shiftKey && e.key === 'C') {
+        const sel = terminal.getSelection();
+        if (sel) {
+          void window.clipboardAPI.writeText(sel);
+          showCopyToast();
+        }
+        return false;
+      }
+      // Ctrl+Shift+V: paste fallback
+      if (e.ctrlKey && e.shiftKey && e.key === 'V') {
+        e.preventDefault();
+        void window.clipboardAPI.readText().then((text) => {
+          if (text) window.electronAPI.pty.write(ptyId, text);
+        }).catch(() => {});
+        return false;
+      }
+
+      return true;
+    });
+
+    // Right-click: always paste
+    terminal.element?.addEventListener('contextmenu', (e) => {
+      e.preventDefault();
+      void window.clipboardAPI.readText().then((text) => {
+        console.log('[wmux:clipboard] right-click paste len=', text?.length ?? 0);
+        if (text) window.electronAPI.pty.write(ptyId, text);
+      }).catch((err) => console.error('[wmux:clipboard] right-click error:', err));
+    });
+
+    // Drag-and-drop: paste file paths into terminal
+    // Use the xterm element + capture phase — xterm's internal canvas blocks
+    // normal event propagation on the container div.
+    const xtermEl = terminal.element;
+    const handleDragOver = (e: Event) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const de = e as DragEvent;
+      if (de.dataTransfer) de.dataTransfer.dropEffect = 'copy';
+    };
+    const handleDrop = (e: Event) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const de = e as DragEvent;
+      const files = de.dataTransfer?.files;
+      if (!files || files.length === 0) return;
+      const paths: string[] = [];
+      for (let i = 0; i < files.length; i++) {
+        paths.push((files[i] as File & { path: string }).path);
+      }
+      const text = paths.map((p) => (p.includes(' ') ? `"${p}"` : p)).join(' ');
+      window.electronAPI.pty.write(ptyId, text);
+    };
+    if (xtermEl) {
+      xtermEl.addEventListener('dragenter', handleDragOver, true);
+      xtermEl.addEventListener('dragover', handleDragOver, true);
+      xtermEl.addEventListener('drop', handleDrop, true);
+    }
+    // Also on container as fallback
+    container.addEventListener('dragenter', handleDragOver, true);
+    container.addEventListener('dragover', handleDragOver, true);
+    container.addEventListener('drop', handleDrop, true);
+
+    // Forward user input to PTY
+    terminal.onData((data) => {
+      window.electronAPI.pty.write(ptyId, data);
+    });
+
+    // Receive PTY output
+    const removeDataListener = window.electronAPI.pty.onData((id, data) => {
+      if (id === ptyId) {
+        terminal.write(data);
+      }
+    });
+
+    // Handle PTY exit
+    const removeExitListener = window.electronAPI.pty.onExit((id, exitCode) => {
+      if (id === ptyId) {
+        terminal.writeln(`\r\n${t('terminal.exitedBracket', { code: exitCode })}`);
+      }
+    });
+
+    // Resize PTY on initial fit — only when we actually have valid dimensions.
+    const { cols, rows } = terminal;
+    if (cols > 0 && rows > 0) {
+      window.electronAPI.pty.resize(ptyId, cols, rows);
+    }
+
+    terminalRef.current = terminal;
+    fitAddonRef.current = fitAddon;
+    searchAddonRef.current = searchAddon;
+
+    // ResizeObserver for auto-fit — preserves user scroll position across resize.
+    // IMPORTANT: skip when the container has zero dimensions (display:none workspace).
+    // Fitting a hidden terminal produces 0 cols/rows, which corrupts the PTY buffer
+    // and manifests as "infinite content duplication" when switching back to it.
+    const resizeObserver = new ResizeObserver(() => {
+      requestAnimationFrame(() => {
+        try {
+          const term = terminalRef.current;
+          if (!term) return;
+
+          // Skip entirely if container is hidden/zero-size
+          if (container.offsetWidth === 0 || container.offsetHeight === 0) return;
+
+          // Snapshot scroll state before fit() reflows the buffer
+          const prevYBase = term.buffer.active.baseY;
+          const prevYDisp = term.buffer.active.viewportY;
+          const wasScrolledUp = prevYDisp < prevYBase;
+          // How many lines from the bottom was the user?
+          const distFromBottom = prevYBase - prevYDisp;
+
+          fitAddon.fit();
+
+          // Restore scroll position if user was not at the bottom
+          if (wasScrolledUp) {
+            const newYBase = term.buffer.active.baseY;
+            const targetYDisp = Math.max(0, newYBase - distFromBottom);
+            term.scrollToLine(targetYDisp);
+          }
+
+          const { cols, rows } = term;
+          // Never send 0-size resize to PTY
+          if (cols > 0 && rows > 0) {
+            window.electronAPI.pty.resize(ptyId, cols, rows);
+          }
+        } catch {
+          // ignore fit errors during unmount
+        }
+      });
+    });
+    resizeObserver.observe(container);
+
+    return () => {
+      if (xtermEl) {
+        xtermEl.removeEventListener('dragenter', handleDragOver, true);
+        xtermEl.removeEventListener('dragover', handleDragOver, true);
+        xtermEl.removeEventListener('drop', handleDrop, true);
+      }
+      container.removeEventListener('dragenter', handleDragOver, true);
+      container.removeEventListener('dragover', handleDragOver, true);
+      container.removeEventListener('drop', handleDrop, true);
+      resizeObserver.disconnect();
+      removeDataListener();
+      removeExitListener();
+      terminal.dispose();
+      terminalRef.current = null;
+      fitAddonRef.current = null;
+      searchAddonRef.current = null;
+    };
+  }, [ptyId, containerRef, terminalFontSize, terminalFontFamily, scrollbackLines, xtermTheme]);
+
+  // Re-fit when the terminal becomes visible (workspace switch or surface tab switch).
+  // Without this, a terminal that was initialized while hidden (0-size) will display
+  // at the wrong size until the next manual resize.
+  useEffect(() => {
+    if (!isVisible) return;
+    // Defer slightly to allow the CSS display change to take effect before measuring
+    const id = requestAnimationFrame(() => {
+      fit();
+    });
+    return () => cancelAnimationFrame(id);
+  }, [isVisible, fit]);
+
+  const findNext = useCallback((text: string) => {
+    searchAddonRef.current?.findNext(text, {
+      decorations: {
+        matchBackground: '#f9e2af40',
+        matchBorder: '#f9e2af',
+        matchOverviewRuler: '#f9e2af',
+        activeMatchBackground: '#f9e2af80',
+        activeMatchBorder: '#f9e2af',
+        activeMatchColorOverviewRuler: '#f9e2af',
+      },
+    });
+  }, []);
+
+  const findPrevious = useCallback((text: string) => {
+    searchAddonRef.current?.findPrevious(text, {
+      decorations: {
+        matchBackground: '#f9e2af40',
+        matchBorder: '#f9e2af',
+        matchOverviewRuler: '#f9e2af',
+        activeMatchBackground: '#f9e2af80',
+        activeMatchBorder: '#f9e2af',
+        activeMatchColorOverviewRuler: '#f9e2af',
+      },
+    });
+  }, []);
+
+  const clearSearch = useCallback(() => {
+    searchAddonRef.current?.clearDecorations();
+  }, []);
+
+  return { terminal: terminalRef, fit, searchAddonRef, findNext, findPrevious, clearSearch };
+}

package/src/renderer/hooks/useViCopyMode.ts

@@ -0,0 +1,320 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+import type { Terminal } from '@xterm/xterm';
+
+export interface CursorPosition {
+  row: number;
+  col: number;
+}
+
+export interface UseViCopyModeOptions {
+  terminal: Terminal | null;
+  isActive: boolean;
+}
+
+export interface UseViCopyModeReturn {
+  cursorRow: number;
+  cursorCol: number;
+  selectionStart: CursorPosition | null;
+  selectionEnd: CursorPosition | null;
+  isVisual: boolean;
+  handleKey: (key: string, ctrlKey?: boolean) => void;
+  exit: () => void;
+  copySelection: () => Promise<void>;
+}
+
+// ---------------------------------------------------------------------------
+// Buffer helpers
+// ---------------------------------------------------------------------------
+
+function getLineText(terminal: Terminal, row: number): string {
+  const line = terminal.buffer.active.getLine(row);
+  if (!line) return '';
+  return line.translateToString(true);
+}
+
+function totalRows(terminal: Terminal): number {
+  return terminal.buffer.active.length;
+}
+
+function clampRow(row: number, terminal: Terminal): number {
+  return Math.max(0, Math.min(totalRows(terminal) - 1, row));
+}
+
+function clampCol(col: number, text: string): number {
+  const max = Math.max(0, text.length - 1);
+  return Math.max(0, Math.min(max, col));
+}
+
+function nextWordStart(text: string, col: number): number {
+  let i = col + 1;
+  while (i < text.length && text[i] !== ' ') i++;
+  while (i < text.length && text[i] === ' ') i++;
+  return Math.max(0, Math.min(i, text.length - 1));
+}
+
+function prevWordStart(text: string, col: number): number {
+  let i = col - 1;
+  while (i > 0 && text[i] === ' ') i--;
+  while (i > 0 && text[i - 1] !== ' ') i--;
+  return Math.max(0, i);
+}
+
+function linearOffset(terminal: Terminal, row: number, col: number): number {
+  let off = 0;
+  for (let r = 0; r < row; r++) off += getLineText(terminal, r).length + 1;
+  return off + col;
+}
+
+function normalizeRange(
+  terminal: Terminal,
+  a: CursorPosition,
+  b: CursorPosition,
+): [CursorPosition, CursorPosition] {
+  if (linearOffset(terminal, a.row, a.col) <= linearOffset(terminal, b.row, b.col)) {
+    return [a, b];
+  }
+  return [b, a];
+}
+
+function buildSelectionText(
+  terminal: Terminal,
+  start: CursorPosition,
+  end: CursorPosition,
+): string {
+  const [s, e] = normalizeRange(terminal, start, end);
+  const lines: string[] = [];
+  for (let r = s.row; r <= e.row; r++) {
+    const text = getLineText(terminal, r);
+    if (r === s.row && r === e.row) {
+      lines.push(text.slice(s.col, e.col + 1));
+    } else if (r === s.row) {
+      lines.push(text.slice(s.col));
+    } else if (r === e.row) {
+      lines.push(text.slice(0, e.col + 1));
+    } else {
+      lines.push(text);
+    }
+  }
+  return lines.join('\n');
+}
+
+function applyXtermSelection(
+  terminal: Terminal,
+  start: CursorPosition,
+  end: CursorPosition,
+): void {
+  const [s, e] = normalizeRange(terminal, start, end);
+  if (s.row === e.row) {
+    terminal.select(s.col, s.row, e.col - s.col + 1);
+    return;
+  }
+  const startText = getLineText(terminal, s.row);
+  let length = startText.length - s.col + 1; // +1 for implicit newline
+  for (let r = s.row + 1; r < e.row; r++) {
+    length += getLineText(terminal, r).length + 1;
+  }
+  length += e.col + 1;
+  terminal.select(s.col, s.row, length);
+}
+
+// ---------------------------------------------------------------------------
+// Hook
+// ---------------------------------------------------------------------------
+
+export function useViCopyMode(
+  options: UseViCopyModeOptions,
+  onExit: () => void,
+): UseViCopyModeReturn {
+  const { terminal, isActive } = options;
+
+  const [cursor, setCursor] = useState<CursorPosition>({ row: 0, col: 0 });
+  const [isVisual, setIsVisual] = useState(false);
+  const [visualStart, setVisualStart] = useState<CursorPosition | null>(null);
+
+  // Pending 'g' for 'gg' sequence
+  const ggPending = useRef(false);
+
+  // Stable refs so callbacks don't stale-close over state
+  const cursorRef = useRef(cursor);
+  cursorRef.current = cursor;
+  const isVisualRef = useRef(isVisual);
+  isVisualRef.current = isVisual;
+  const visualStartRef = useRef(visualStart);
+  visualStartRef.current = visualStart;
+
+  // Initialize cursor when copy mode becomes active
+  useEffect(() => {
+    if (!isActive || !terminal) return;
+    const buf = terminal.buffer.active;
+    const row = clampRow(buf.viewportY + buf.cursorY, terminal);
+    const col = Math.max(0, buf.cursorX);
+    setCursor({ row, col });
+    setIsVisual(false);
+    setVisualStart(null);
+    ggPending.current = false;
+    terminal.clearSelection();
+  }, [isActive, terminal]);
+
+  const exit = useCallback(() => {
+    if (terminal) terminal.clearSelection();
+    setIsVisual(false);
+    setVisualStart(null);
+    ggPending.current = false;
+    onExit();
+  }, [terminal, onExit]);
+
+  const copySelection = useCallback(async () => {
+    if (!terminal) return;
+    const text = terminal.getSelection() || getLineText(terminal, cursorRef.current.row);
+    if (text) await navigator.clipboard.writeText(text);
+    exit();
+  }, [terminal, exit]);
+
+  const handleKey = useCallback(
+    (key: string, ctrlKey = false) => {
+      if (!terminal || !isActive) return;
+
+      const viewportRows = terminal.rows;
+
+      // ESC / q always exit
+      if (!ctrlKey && (key === 'Escape' || key === 'q')) {
+        exit();
+        return;
+      }
+
+      // y: yank then exit
+      if (!ctrlKey && key === 'y') {
+        const cur = cursorRef.current;
+        const vs = visualStartRef.current;
+        const iv = isVisualRef.current;
+        let text: string;
+        if (iv && vs) {
+          text = buildSelectionText(terminal, vs, cur);
+        } else {
+          text = getLineText(terminal, cur.row);
+        }
+        navigator.clipboard.writeText(text).then(() => exit());
+        return;
+      }
+
+      // v: toggle visual mode
+      if (!ctrlKey && key === 'v') {
+        if (isVisualRef.current) {
+          terminal.clearSelection();
+          setIsVisual(false);
+          setVisualStart(null);
+        } else {
+          setIsVisual(true);
+          setVisualStart({ ...cursorRef.current });
+        }
+        ggPending.current = false;
+        return;
+      }
+
+      setCursor((prev) => {
+        let { row, col } = prev;
+
+        if (ctrlKey) {
+          if (key === 'u') row = clampRow(row - Math.floor(viewportRows / 2), terminal);
+          else if (key === 'd') row = clampRow(row + Math.floor(viewportRows / 2), terminal);
+          else return prev;
+
+          const lt = getLineText(terminal, row);
+          col = clampCol(col, lt);
+          terminal.scrollToLine(row);
+          const next = { row, col };
+          if (isVisualRef.current && visualStartRef.current) {
+            applyXtermSelection(terminal, visualStartRef.current, next);
+          }
+          ggPending.current = false;
+          return next;
+        }
+
+        const lineText = getLineText(terminal, row);
+
+        switch (key) {
+          case 'h': {
+            col = Math.max(0, col - 1);
+            break;
+          }
+          case 'l': {
+            col = Math.min(Math.max(0, lineText.length - 1), col + 1);
+            break;
+          }
+          case 'j': {
+            row = clampRow(row + 1, terminal);
+            col = clampCol(col, getLineText(terminal, row));
+            terminal.scrollToLine(row);
+            break;
+          }
+          case 'k': {
+            row = clampRow(row - 1, terminal);
+            col = clampCol(col, getLineText(terminal, row));
+            terminal.scrollToLine(row);
+            break;
+          }
+          case 'w': {
+            col = nextWordStart(lineText, col);
+            break;
+          }
+          case 'b': {
+            col = prevWordStart(lineText, col);
+            break;
+          }
+          case '0': {
+            col = 0;
+            break;
+          }
+          case '$': {
+            col = Math.max(0, lineText.length - 1);
+            break;
+          }
+          case 'g': {
+            if (ggPending.current) {
+              // gg: go to buffer start
+              row = 0;
+              col = 0;
+              terminal.scrollToLine(0);
+              ggPending.current = false;
+            } else {
+              ggPending.current = true;
+              return prev; // wait for second g
+            }
+            break;
+          }
+          case 'G': {
+            row = clampRow(totalRows(terminal) - 1, terminal);
+            col = Math.max(0, getLineText(terminal, row).length - 1);
+            terminal.scrollToLine(row);
+            ggPending.current = false;
+            break;
+          }
+          default: {
+            if (key !== 'g') ggPending.current = false;
+            return prev;
+          }
+        }
+
+        if (key !== 'g') ggPending.current = false;
+
+        const next = { row, col };
+        if (isVisualRef.current && visualStartRef.current) {
+          applyXtermSelection(terminal, visualStartRef.current, next);
+        }
+        return next;
+      });
+    },
+    [terminal, isActive, exit],
+  );
+
+  return {
+    cursorRow: cursor.row,
+    cursorCol: cursor.col,
+    selectionStart: isVisual ? visualStart : null,
+    selectionEnd: isVisual ? cursor : null,
+    isVisual,
+    handleKey,
+    exit,
+    copySelection,
+  };
+}