ompchamber 0.7.0 → 1.0.0

package/src/client/components/workspace/terminal-panel/RealtimeXtermView.tsx

@@ -1,315 +1,119 @@
 import { useEffect, useRef, useState, useImperativeHandle, useCallback } from 'preact/hooks';
 import { forwardRef } from 'preact/compat';
 import { ArrowDown } from 'lucide-preact';
-import type { Terminal } from '@xterm/xterm';
-import type { FitAddon } from '@xterm/addon-fit';
 import { useTheme } from '@/client/hooks/ui/theme';
-import { useTerminalOutputSync } from '@/client/hooks/workspace/terminal-output';
-import {
-  getXtermTheme,
-  XTERM_FONT_FAMILY,
-  safePatchFitAddon,
-  safePatchRenderService,
-  getTerminalSessionOutput,
-  type XtermCore,
-  type XtermModule,
-} from '@/client/data/theme/terminal';
+import { getXtermTheme } from '@/client/data/theme/terminal';
+import { mountXterm, type XtermMount } from '@/client/components/workspace/terminal-panel/mount';
 
 export interface RealtimeXtermHandle {
-  write: (data: string) => void;
-  writeln: (line: string) => void;
-  clear: () => void;
+  /** Raw PTY output. Bytes, not text: xterm's decoder reassembles them. */
+  write: (bytes: Uint8Array) => void;
+  /**
+   * Write the retained scrollback at the size it was drawn for, then fit back
+   * to the panel. Replaying history at another width leaves wrapped fragments
+   * the shell's own redraw never clears.
+   */
+  writeReplay: (bytes: Uint8Array, cols: number, rows: number) => void;
+  /** Drop the buffer and reset the cursor — used when the shell is replaced. */
+  reset: () => void;
   focus: () => void;
-  scrollToBottom: () => void;
-  scrollToTop: () => void;
-  scrollLines: (amount: number) => void;
 }
 
 interface RealtimeXtermViewProps {
-  onCommandSubmit?: (cmd: string, options?: { fromXterm?: boolean }) => void;
-  cwd: string;
-}
-
-function handleKeyNavigation(term: Terminal, event: globalThis.KeyboardEvent): boolean {
-  if (event.type !== 'keydown') return true;
-  if (event.shiftKey) {
-    if (event.key === 'PageUp') { term.scrollPages(-1); return false; }
-    if (event.key === 'PageDown') { term.scrollPages(1); return false; }
-    if (event.key === 'Home') { term.scrollToTop(); return false; }
-    if (event.key === 'End') { term.scrollToBottom(); return false; }
-    if (event.key === 'ArrowUp') { term.scrollLines(-1); return false; }
-    if (event.key === 'ArrowDown') { term.scrollLines(1); return false; }
-  }
-  return true;
+  /** Keystrokes and paste, raw. */
+  onInput: (data: string) => void;
+  /** Non-UTF-8 payloads xterm reports separately (some mouse reports). */
+  onBinaryInput: (data: string) => void;
+  /** The grid changed; the PTY must be resized to match. */
+  onGridChange: (cols: number, rows: number) => void;
+  /** The terminal is measurable and knows its size; attach with these. */
+  onReady: (cols: number, rows: number) => void;
 }
 
+/**
+ * xterm view bound to a real PTY.
+ *
+ * Every keystroke goes to the shell as bytes — line editing, history, tab
+ * completion and Ctrl+C are the shell's job, not this component's. Output is
+ * written as bytes so a character split across two PTY reads is reassembled by
+ * xterm's own streaming decoder rather than by a decode step here.
+ */
 export const RealtimeXtermView = forwardRef<RealtimeXtermHandle, RealtimeXtermViewProps>(
-  ({ onCommandSubmit, cwd: _cwd }, ref) => {
+  ({ onInput, onBinaryInput, onGridChange, onReady }, ref) => {
     const { isDark } = useTheme();
     const containerRef = useRef<HTMLDivElement>(null);
-    const terminalRef = useRef<Terminal | null>(null);
-    const fitAddonRef = useRef<FitAddon | null>(null);
-    const inputBufferRef = useRef<string>('');
-    const pendingWritesRef = useRef<string[]>([]);
+    const mountRef = useRef<XtermMount | null>(null);
     const [isScrolledUp, setIsScrolledUp] = useState(false);
-    const onCommandSubmitRef = useRef(onCommandSubmit);
-    const { recordOutput, clearOutput } = useTerminalOutputSync(terminalRef);
 
-    useEffect(() => {
-      if (terminalRef.current) {
-        terminalRef.current.options.theme = getXtermTheme(isDark);
-        terminalRef.current.refresh(0, terminalRef.current.rows - 1);
-      }
-    }, [isDark]);
+    const inputRef = useRef(onInput);
+    inputRef.current = onInput;
+    const binaryInputRef = useRef(onBinaryInput);
+    binaryInputRef.current = onBinaryInput;
+    const gridChangeRef = useRef(onGridChange);
+    gridChangeRef.current = onGridChange;
+    const readyRef = useRef(onReady);
+    readyRef.current = onReady;
+    const themeRef = useRef(isDark);
+    themeRef.current = isDark;
 
     useEffect(() => {
-      onCommandSubmitRef.current = onCommandSubmit;
-    }, [onCommandSubmit]);
-
-    const scrollToBottom = useCallback(() => {
-      if (terminalRef.current) {
-        terminalRef.current.scrollToBottom();
-        setIsScrolledUp(false);
-      }
-    }, []);
-
-    const scrollToTop = useCallback(() => {
-      terminalRef.current?.scrollToTop();
-    }, []);
-
-    const scrollLines = useCallback((amount: number) => {
-      terminalRef.current?.scrollLines(amount);
-    }, []);
+      const term = mountRef.current?.term;
+      if (!term) return;
+      term.options.theme = getXtermTheme(isDark);
+      term.refresh(0, term.rows - 1);
+    }, [isDark]);
 
     useImperativeHandle(ref, () => ({
-      write: (data: string) => {
-        recordOutput(data);
-        if (terminalRef.current) {
-          const term = terminalRef.current;
-          const wasAtBottom = term.buffer.active.viewportY === term.buffer.active.baseY;
-          term.write(data, () => {
-            if (wasAtBottom) term.scrollToBottom();
-          });
-        } else {
-          pendingWritesRef.current.push(data);
-        }
+      write(bytes: Uint8Array) {
+        mountRef.current?.term.write(bytes);
       },
-      writeln: (line: string) => {
-        recordOutput(line + '\r\n');
-        if (terminalRef.current) {
-          const term = terminalRef.current;
-          const wasAtBottom = term.buffer.active.viewportY === term.buffer.active.baseY;
-          term.writeln(line, () => {
-            if (wasAtBottom) term.scrollToBottom();
-          });
-        } else {
-          pendingWritesRef.current.push(line + '\r\n');
-        }
+      writeReplay(bytes: Uint8Array, cols: number, rows: number) {
+        mountRef.current?.writeReplay(bytes, cols, rows);
       },
-      clear: () => {
-        clearOutput();
-        if (terminalRef.current) {
-          terminalRef.current.clear();
-          terminalRef.current.write('\r\x1b[33m$\x1b[0m ');
-          recordOutput('\r\x1b[33m$\x1b[0m ');
-          setIsScrolledUp(false);
-        } else {
-          pendingWritesRef.current = [];
-        }
+      reset() {
+        mountRef.current?.term.reset();
       },
-      focus: () => {
-        terminalRef.current?.focus();
+      focus() {
+        mountRef.current?.term.focus();
       },
-      scrollToBottom,
-      scrollToTop,
-      scrollLines,
-    }));
-
-    useEffect(() => {
-      let isMounted = true;
-      let termInstance: Terminal | null = null;
-      let fitAddonInstance: FitAddon | null = null;
-      let resizeObserver: ResizeObserver | null = null;
-      let dataDisposable: { dispose: () => void } | null = null;
-      let scrollDisposable: { dispose: () => void } | null = null;
-      let fitTimeout: ReturnType<typeof setTimeout> | null = null;
-      let rafId: number | null = null;
-      let cleanupTouch: (() => void) | null = null;
-
-      const safeFit = () => {
-        if (!isMounted || !termInstance || !fitAddonInstance || !containerRef.current) return;
-        const el = containerRef.current;
-        if (el.clientWidth <= 0 || el.clientHeight <= 0) return;
-        try {
-          const core = (termInstance as unknown as XtermCore)._core;
-          const renderService = core?._renderService;
-          if (!renderService) return;
-          const dims = renderService.dimensions;
-          if (!dims?.css?.cell?.width || !dims?.css?.cell?.height) return;
-          fitAddonInstance.fit();
-        } catch {}
-      };
-
-      async function initXterm() {
-        if (!containerRef.current || !isMounted) return;
-
-        const xtermModule = (await import('@xterm/xterm')) as unknown as XtermModule<typeof Terminal>;
-        const fitModule = (await import('@xterm/addon-fit')) as unknown as XtermModule<typeof FitAddon>;
-
-        const TerminalClass =
-          xtermModule.Terminal ||
-          xtermModule.default?.Terminal ||
-          xtermModule.default;
+    }), []);
 
-        const FitAddonClass =
-          fitModule.FitAddon ||
-          fitModule.default?.FitAddon ||
-          fitModule.default;
-
-        if (!TerminalClass || !FitAddonClass || !containerRef.current || !isMounted) return;
-
-        safePatchFitAddon(FitAddonClass);
-
-        const term = new TerminalClass({
-          cursorBlink: true,
-          cursorStyle: 'block',
-          fontSize: 12,
-          lineHeight: 1.25,
-          fontFamily: XTERM_FONT_FAMILY,
-          theme: getXtermTheme(isDark),
-          convertEol: true,
-          scrollback: 10000,
-          scrollSensitivity: 1.5,
-          fastScrollSensitivity: 5,
-          smoothScrollDuration: 0,
-          allowProposedApi: true,
-        }) as Terminal;
-
-        term.open(containerRef.current);
-        safePatchRenderService(term);
-
-        const fitAddon = new FitAddonClass() as FitAddon;
-        term.loadAddon(fitAddon);
-
-        termInstance = term;
-        fitAddonInstance = fitAddon;
-        terminalRef.current = term;
-        fitAddonRef.current = fitAddon;
-
-        rafId = requestAnimationFrame(() => {
-          if (isMounted) safeFit();
-        });
-
-        term.attachCustomKeyEventHandler((event: globalThis.KeyboardEvent) => handleKeyNavigation(term, event));
-
-        scrollDisposable = term.onScroll(() => {
-          const buffer = term.buffer.active;
-          setIsScrolledUp(buffer.viewportY < buffer.baseY);
-        });
-
-        const savedOutput = getTerminalSessionOutput();
-        if (savedOutput) {
-          term.write(savedOutput);
-        } else {
-          const welcome = '\x1b[1;33m[OMPChamber Realtime Terminal]\x1b[0m\r\n\x1b[90mStream connected. Live xterm canvas active.\x1b[0m\r\n\r\n\x1b[33m$\x1b[0m ';
-          term.write(welcome);
-          recordOutput(welcome);
-        }
-
-        if (pendingWritesRef.current.length > 0) {
-          for (const chunk of pendingWritesRef.current) {
-            term.write(chunk);
-          }
-          pendingWritesRef.current = [];
-          term.scrollToBottom();
-        }
-
-        dataDisposable = term.onData((data: string) => {
-          if (data === '\r') {
-            const cmd = inputBufferRef.current.trim();
-            term.write('\r\n');
-            inputBufferRef.current = '';
-            if (cmd && onCommandSubmitRef.current) {
-              recordOutput(cmd + '\r\n');
-              onCommandSubmitRef.current(cmd, { fromXterm: true });
-            } else {
-              term.write('\x1b[33m$\x1b[0m ');
-              recordOutput('\r\n\x1b[33m$\x1b[0m ');
-            }
-          } else if (data === '\x7f' || data === '\b') {
-            if (inputBufferRef.current.length > 0) {
-              inputBufferRef.current = inputBufferRef.current.slice(0, -1);
-              term.write('\b \b');
-            }
-          } else if (data === '\x03') {
-            inputBufferRef.current = '';
-            term.write('^C\r\n\x1b[33m$\x1b[0m ');
-            recordOutput('^C\r\n\x1b[33m$\x1b[0m ');
-          } else if (data === '\x0c') {
-            clearOutput();
-            term.clear();
-            term.write('\x1b[33m$\x1b[0m ');
-            recordOutput('\x1b[33m$\x1b[0m ');
-          } else if (data >= ' ') {
-            inputBufferRef.current += data;
-            term.write(data);
-          }
-        });
-
-        let touchStartY = 0;
-        const containerEl = containerRef.current;
-        const handleTouchStart = (e: globalThis.TouchEvent) => {
-          if (e.touches.length === 1) touchStartY = e.touches[0].clientY;
-        };
-        const handleTouchMove = (e: globalThis.TouchEvent) => {
-          if (e.touches.length === 1) {
-            const deltaY = touchStartY - e.touches[0].clientY;
-            if (Math.abs(deltaY) >= 16) {
-              term.scrollLines(Math.trunc(deltaY / 16));
-              touchStartY = e.touches[0].clientY;
-            }
-          }
-        };
-
-        if (containerEl) {
-          containerEl.addEventListener('touchstart', handleTouchStart, { passive: true });
-          containerEl.addEventListener('touchmove', handleTouchMove, { passive: true });
-          cleanupTouch = () => {
-            containerEl.removeEventListener('touchstart', handleTouchStart);
-            containerEl.removeEventListener('touchmove', handleTouchMove);
-          };
-        }
-
-        resizeObserver = new ResizeObserver(() => {
-          if (fitTimeout) clearTimeout(fitTimeout);
-          fitTimeout = setTimeout(() => {
-            safeFit();
-          }, 35);
-        });
+    const scrollToBottom = useCallback(() => {
+      mountRef.current?.term.scrollToBottom();
+      setIsScrolledUp(false);
+    }, []);
 
-        if (containerEl) {
-          resizeObserver.observe(containerEl);
+    // Mount once. Sizing flows out through callbacks; the server owns the PTY,
+    // so nothing here restarts a shell on its own.
+    useEffect(() => {
+      const container = containerRef.current;
+      if (!container) return;
+      let cancelled = false;
+
+      void mountXterm(
+        container,
+        themeRef.current,
+        {
+          onInput: (data) => inputRef.current(data),
+          onBinaryInput: (data) => binaryInputRef.current(data),
+          onGridChange: (cols, rows) => gridChangeRef.current(cols, rows),
+          onReady: (cols, rows) => readyRef.current(cols, rows),
+          onScrolledUpChange: setIsScrolledUp,
+        },
+        () => cancelled,
+      ).then((mount) => {
+        if (!mount) return;
+        if (cancelled) {
+          mount.dispose();
+          return;
         }
-      }
-
-      initXterm();
+        mountRef.current = mount;
+      });
 
       return () => {
-        isMounted = false;
-        if (rafId !== null) cancelAnimationFrame(rafId);
-        if (fitTimeout !== null) clearTimeout(fitTimeout);
-        cleanupTouch?.();
-        dataDisposable?.dispose();
-        scrollDisposable?.dispose();
-        resizeObserver?.disconnect();
-        try {
-          fitAddonInstance?.dispose();
-        } catch {}
-        try {
-          termInstance?.dispose();
-        } catch {}
-        terminalRef.current = null;
-        fitAddonRef.current = null;
+        cancelled = true;
+        mountRef.current?.dispose();
+        mountRef.current = null;
       };
     }, []);
 

package/src/client/components/workspace/terminal-panel/index.tsx

@@ -1,9 +1,9 @@
 import { useCallback, useRef } from 'preact/hooks';
 import { useTerminal } from '@/client/hooks/workspace/terminal';
 import { useSessionState } from '@/client/hooks/workspace/session-state';
+import { useTheme } from '@/client/hooks/ui/theme';
 import { TerminalHeader } from '@/client/components/workspace/terminal-panel/Header';
 import { TerminalQuickActions } from '@/client/components/workspace/terminal-panel/QuickActions';
-import { TerminalInputBar } from '@/client/components/workspace/terminal-panel/InputBar';
 import { RealtimeXtermView, type RealtimeXtermHandle } from '@/client/components/workspace/terminal-panel/RealtimeXtermView';
 
 interface TerminalPanelProps {
@@ -13,52 +13,80 @@ interface TerminalPanelProps {
   showHeader?: boolean;
 }
 
+const encoder = new TextEncoder();
+
 export function TerminalPanel({ className = '', enabled = true, rootPath, showHeader = true }: TerminalPanelProps) {
   const xtermRef = useRef<RealtimeXtermHandle>(null);
+  const { isDark } = useTheme();
   const [activeRepo, setActiveRepo] = useSessionState<string>('terminal.activeRepo', '.');
+  const gridRef = useRef<{ cols: number; rows: number } | null>(null);
 
-  const handleStreamChunk = useCallback((text: string) => {
-    xtermRef.current?.write(text);
-  }, []);
-
-  const handleCommandStart = useCallback((cmd: string, options?: { fromXterm?: boolean }) => {
-    if (!options?.fromXterm) {
-      xtermRef.current?.write(`\r\x1b[K\x1b[33m$\x1b[0m \x1b[1m${cmd}\x1b[0m\r\n`);
-    }
+  const handleOutput = useCallback((bytes: Uint8Array) => {
+    xtermRef.current?.write(bytes);
   }, []);
 
-  const handleCommandEnd = useCallback((exitCode: number, _cwd: string) => {
-    if (exitCode !== 0 && exitCode !== 130) {
-      xtermRef.current?.write(`\x1b[31m[exit ${exitCode}]\x1b[0m\r\n`);
-    }
-    xtermRef.current?.write(`\x1b[33m$\x1b[0m `);
+  const handleReplay = useCallback((bytes: Uint8Array, frame: { replayCols: number; replayRows: number }) => {
+    xtermRef.current?.writeReplay(bytes, frame.replayCols, frame.replayRows);
   }, []);
 
-  const handleXtermClear = useCallback(() => {
-    xtermRef.current?.clear();
+  const handleRestart = useCallback(() => {
+    xtermRef.current?.reset();
   }, []);
 
   const {
-    terminalInput,
-    setTerminalInput,
-    isRunning,
+    status,
     cwd,
+    shell,
+    exitCode,
+    error,
     systemInfo,
-    executeCommand,
-    cancelRunningCommand,
-    handleKeyDown,
+    attach,
+    resize,
+    input,
+    restart,
   } = useTerminal({
-    onStreamChunk: handleStreamChunk,
-    onCommandStart: handleCommandStart,
-    onCommandEnd: handleCommandEnd,
-    onClear: handleXtermClear,
     root: enabled ? rootPath : undefined,
     repo: activeRepo,
+    theme: isDark ? 'dark' : 'light',
+    onOutput: handleOutput,
+    onReplay: handleReplay,
+    onRestart: handleRestart,
   });
 
-  const handleCommandSubmit = useCallback((cmd: string, options?: { fromXterm?: boolean }) => {
-    executeCommand(cmd, options);
-  }, [executeCommand]);
+  // The view reports its grid before the first attach and on every fit, so the
+  // PTY is created at the panel's real size instead of a default 80x24.
+  const handleReady = useCallback((cols: number, rows: number) => {
+    gridRef.current = { cols, rows };
+    attach(cols, rows);
+  }, [attach]);
+
+  const handleGridChange = useCallback((cols: number, rows: number) => {
+    const previous = gridRef.current;
+    gridRef.current = { cols, rows };
+    if (!previous) return;
+    resize(cols, rows);
+  }, [resize]);
+
+  // Keystrokes arrive as text; `onBinary` payloads are latin-1 bytes and must
+  // not be UTF-8 encoded on the way out.
+  const handleInput = useCallback((data: string) => {
+    input(encoder.encode(data));
+  }, [input]);
+
+  const handleBinaryInput = useCallback((data: string) => {
+    const bytes = new Uint8Array(data.length);
+    for (let i = 0; i < data.length; i += 1) bytes[i] = data.charCodeAt(i) & 0xff;
+    input(bytes);
+  }, [input]);
+
+  const handleQuickAction = useCallback((command: string) => {
+    input(encoder.encode(`${command}\r`));
+    xtermRef.current?.focus();
+  }, [input]);
+
+  const handleRestartClick = useCallback(() => {
+    restart();
+  }, [restart]);
 
   if (!enabled) {
     return (
@@ -72,39 +100,37 @@ export function TerminalPanel({ className = '', enabled = true, rootPath, showHe
     <div className={`flex flex-col h-full w-full bg-paper text-ink overflow-hidden ${className}`}>
       {showHeader && (
         <TerminalHeader
-          isRunning={isRunning}
+          status={status}
+          exitCode={exitCode}
           rootPath={rootPath}
           activeRepo={activeRepo}
           onSelectRepo={setActiveRepo}
-          bunVersion={systemInfo.bunVersion}
-          nodeVersion={systemInfo.nodeVersion}
+          cwd={cwd}
+          shell={shell}
+          gitBranch={systemInfo.gitBranch}
+          onRestart={handleRestartClick}
         />
       )}
 
-      {/* Preset Command Shortcuts */}
-      <TerminalQuickActions
-        onSelectCommand={executeCommand}
-        disabled={isRunning}
-      />
+      {/* Preset command shortcuts: typed into the live shell, not a new process */}
+      <TerminalQuickActions onSelectCommand={handleQuickAction} disabled={status !== 'running'} />
+
+      {error && (
+        <div className="px-3 py-1.5 border-b border-error/20 bg-error/5 text-[11px] font-mono text-error flex-shrink-0">
+          {error}
+        </div>
+      )}
 
-      {/* Real-time Xterm Terminal Canvas */}
+      {/* Real-time Xterm Terminal Canvas, driven by the PTY socket */}
       <div className="flex-1 w-full min-h-0 bg-canvas overflow-hidden">
         <RealtimeXtermView
           ref={xtermRef}
-          cwd={cwd}
-          onCommandSubmit={handleCommandSubmit}
+          onInput={handleInput}
+          onBinaryInput={handleBinaryInput}
+          onReady={handleReady}
+          onGridChange={handleGridChange}
         />
       </div>
-
-      {/* Input Bar with History and Cancel controls */}
-      <TerminalInputBar
-        value={terminalInput}
-        onChange={setTerminalInput}
-        onSubmit={() => executeCommand()}
-        onKeyDown={handleKeyDown}
-        onCancel={cancelRunningCommand}
-        isRunning={isRunning}
-      />
     </div>
   );
 }