panex 0.9.4 → 0.9.6

package/dist/index.d.ts

@@ -18,6 +18,50 @@ interface PanexConfig {
 
 declare function createTUI(config: PanexConfig): Promise<void>;
 
+/**
+ * A terminal buffer that properly interprets ANSI escape sequences including:
+ * - Cursor movement (\x1b[A up, \x1b[B down, \x1b[C right, \x1b[D left)
+ * - Cursor positioning (\x1b[H, \x1b[row;colH)
+ * - Line clearing (\x1b[K erase to end, \x1b[2K erase line)
+ * - Screen clearing (\x1b[2J clear screen)
+ * - Carriage return (\r) for in-place updates like progress bars
+ * - ANSI colors and formatting (preserved in output via SerializeAddon)
+ */
+declare class TerminalBuffer {
+    private terminal;
+    private serializeAddon;
+    private rows;
+    private cols;
+    constructor(cols?: number, rows?: number);
+    /**
+     * Write data to the terminal buffer.
+     * The terminal will interpret all ANSI escape sequences.
+     */
+    write(data: string): void;
+    /**
+     * Get the current terminal buffer content as an array of lines.
+     * Only returns lines that have content (not all 500 rows).
+     */
+    getLines(): string[];
+    /**
+     * Get the terminal content as a single string with newlines.
+     * Preserves ANSI color codes and formatting.
+     */
+    toString(): string;
+    /**
+     * Clear the terminal buffer.
+     */
+    clear(): void;
+    /**
+     * Resize the terminal.
+     */
+    resize(cols: number, rows: number): void;
+    /**
+     * Dispose of the terminal to free resources.
+     */
+    dispose(): void;
+}
+
 interface PtyHandle {
     write(data: string): void;
     resize(cols: number, rows: number): void;
@@ -28,13 +72,12 @@ interface ManagedProcess {
     config: ProcessConfig;
     pty: PtyHandle | null;
     status: 'running' | 'stopped' | 'error';
-    output: string[];
+    terminalBuffer: TerminalBuffer;
     exitCode: number | null;
 }
 declare class ProcessManager extends EventEmitter {
     private procs;
     private processes;
-    private maxOutputLines;
     constructor(procs: Record<string, ProcessConfig>);
     startAll(): Promise<void>;
     start(name: string, config: ProcessConfig): Promise<void>;

package/dist/index.js

@@ -11,13 +11,89 @@ import { useState, useEffect, useCallback, useRef } from "react";
 
 // src/process-manager.ts
 import { EventEmitter } from "events";
+
+// src/terminal-buffer.ts
+import { Terminal } from "@xterm/headless";
+import { SerializeAddon } from "@xterm/addon-serialize";
+var TerminalBuffer = class {
+  terminal;
+  serializeAddon;
+  rows;
+  cols;
+  constructor(cols = 200, rows = 500) {
+    this.rows = rows;
+    this.cols = cols;
+    this.terminal = new Terminal({
+      cols,
+      rows,
+      scrollback: 1e4,
+      allowProposedApi: true
+    });
+    this.serializeAddon = new SerializeAddon();
+    this.terminal.loadAddon(this.serializeAddon);
+  }
+  /**
+   * Write data to the terminal buffer.
+   * The terminal will interpret all ANSI escape sequences.
+   */
+  write(data) {
+    this.terminal.write(data);
+  }
+  /**
+   * Get the current terminal buffer content as an array of lines.
+   * Only returns lines that have content (not all 500 rows).
+   */
+  getLines() {
+    const buffer = this.terminal.buffer.active;
+    const lines = [];
+    const contentLength = buffer.baseY + buffer.cursorY + 1;
+    for (let i = 0; i < contentLength; i++) {
+      const line = buffer.getLine(i);
+      if (line) {
+        lines.push(line.translateToString(true));
+      }
+    }
+    while (lines.length > 0 && lines[lines.length - 1] === "") {
+      lines.pop();
+    }
+    return lines;
+  }
+  /**
+   * Get the terminal content as a single string with newlines.
+   * Preserves ANSI color codes and formatting.
+   */
+  toString() {
+    return this.serializeAddon.serialize();
+  }
+  /**
+   * Clear the terminal buffer.
+   */
+  clear() {
+    this.terminal.reset();
+  }
+  /**
+   * Resize the terminal.
+   */
+  resize(cols, rows) {
+    this.cols = cols;
+    this.rows = rows;
+    this.terminal.resize(cols, rows);
+  }
+  /**
+   * Dispose of the terminal to free resources.
+   */
+  dispose() {
+    this.terminal.dispose();
+  }
+};
+
+// src/process-manager.ts
 var ProcessManager = class extends EventEmitter {
   constructor(procs) {
     super();
     this.procs = procs;
   }
   processes = /* @__PURE__ */ new Map();
-  maxOutputLines = 1e4;
   async startAll() {
     for (const [name, config] of Object.entries(this.procs)) {
       await this.start(name, config);
@@ -37,7 +113,7 @@ var ProcessManager = class extends EventEmitter {
       config,
       pty: null,
       status: "running",
-      output: [],
+      terminalBuffer: new TerminalBuffer(120, 30),
       exitCode: null
     };
     this.processes.set(name, managed);
@@ -50,10 +126,7 @@ var ProcessManager = class extends EventEmitter {
           rows: 30,
           data: (_terminal, data) => {
             const str = new TextDecoder().decode(data);
-            managed.output.push(str);
-            if (managed.output.length > this.maxOutputLines) {
-              managed.output = managed.output.slice(-this.maxOutputLines);
-            }
+            managed.terminalBuffer.write(str);
             this.emit("output", name, str);
           }
         }
@@ -75,7 +148,7 @@ var ProcessManager = class extends EventEmitter {
       this.emit("started", name);
     } catch (error) {
       managed.status = "error";
-      managed.output = [`Error starting process: ${error}`];
+      managed.terminalBuffer.write(`Error starting process: ${error}`);
       managed.exitCode = -1;
       this.emit("error", name, error);
     }
@@ -86,7 +159,7 @@ var ProcessManager = class extends EventEmitter {
       if (proc.pty) {
         proc.pty.kill();
       }
-      proc.output = [];
+      proc.terminalBuffer.clear();
       this.start(name, proc.config);
     }
   }
@@ -130,7 +203,7 @@ var ProcessManager = class extends EventEmitter {
     return Array.from(this.processes.keys());
   }
   getOutput(name) {
-    return this.processes.get(name)?.output.join("") ?? "";
+    return this.processes.get(name)?.terminalBuffer.toString() ?? "";
   }
 };
 
@@ -193,7 +266,7 @@ function useFocusMode() {
 // src/hooks/useMouseWheel.ts
 import { useEffect as useEffect2, useCallback as useCallback3 } from "react";
 import { useStdin, useStdout } from "ink";
-function useMouseWheel({ enabled = true, onWheel } = {}) {
+function useMouseWheel({ enabled = true, onWheel, onClick } = {}) {
   const { stdin, setRawMode } = useStdin();
   const { stdout } = useStdout();
   const handleData = useCallback3((data) => {
@@ -206,14 +279,16 @@ function useMouseWheel({ enabled = true, onWheel } = {}) {
       const y = parseInt(match[3] ?? "0", 10);
       const isPress = match[4] === "M";
       if (isPress) {
-        if (button === 64) {
+        if (button === 0) {
+          onClick?.({ type: "click", x, y });
+        } else if (button === 64) {
           onWheel?.({ type: "wheel-up", x, y });
         } else if (button === 65) {
           onWheel?.({ type: "wheel-down", x, y });
         }
       }
     }
-  }, [onWheel]);
+  }, [onWheel, onClick]);
   useEffect2(() => {
     if (!enabled || !stdin || !stdout) return;
     stdout.write("\x1B[?1000h\x1B[?1006h");
@@ -231,6 +306,7 @@ import { Box, Text, useStdout as useStdout2 } from "ink";
 import { ScrollList } from "ink-scroll-list";
 import { forwardRef, useImperativeHandle, useRef as useRef2, useEffect as useEffect3 } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+var PROCESS_LIST_WIDTH = 20;
 var ProcessList = forwardRef(
   function ProcessList2({ names, selected, getStatus, active, height }, ref) {
     const borderStyle = active ? "double" : "single";
@@ -254,7 +330,7 @@ var ProcessList = forwardRef(
         flexDirection: "column",
         borderStyle,
         borderColor: active ? "blue" : "gray",
-        width: 20,
+        width: PROCESS_LIST_WIDTH,
         height,
         paddingX: 1,
         children: /* @__PURE__ */ jsx(Box, { flexDirection: "column", marginTop: 0, height: height ? height - 2 : void 0, children: /* @__PURE__ */ jsx(
@@ -273,7 +349,7 @@ var ProcessList = forwardRef(
                   name,
                   " "
                 ] }),
-                /* @__PURE__ */ jsx(Text, { color: isSelected ? "black" : statusColor, children: statusIcon })
+                /* @__PURE__ */ jsx(Text, { color: statusColor, children: statusIcon })
               ] }, name);
             })
           }
@@ -328,6 +404,13 @@ var OutputPanel = forwardRef2(
     const [scrollOffset, setScrollOffset] = useState3(0);
     const [contentHeight, setContentHeight] = useState3(0);
     const [viewportHeight, setViewportHeight] = useState3(0);
+    const [prevName, setPrevName] = useState3(name);
+    if (name !== prevName) {
+      setPrevName(name);
+      setScrollOffset(0);
+      setContentHeight(0);
+      setViewportHeight(0);
+    }
     useEffect4(() => {
       const handleResize = () => scrollRef.current?.remeasure();
       stdout?.on("resize", handleResize);
@@ -391,7 +474,8 @@ var OutputPanel = forwardRef2(
               onContentHeightChange: handleContentHeightChange,
               onViewportSizeChange: (layout) => setViewportHeight(layout.height),
               children: lines.map((line, i) => /* @__PURE__ */ jsx3(Text3, { wrap: "truncate", children: line }, i))
-            }
+            },
+            name
           ) }),
           hasScroll && /* @__PURE__ */ jsx3(
             Scrollbar,
@@ -416,9 +500,8 @@ function StatusBar({ focusMode, processName, showShiftTabHint = true }) {
     const shiftTabHint = showShiftTabHint ? "Shift-Tab/" : "";
     return /* @__PURE__ */ jsx4(Box4, { backgroundColor: "green", width: "100%", children: /* @__PURE__ */ jsxs3(Text4, { bold: true, color: "black", backgroundColor: "green", children: [
       " ",
-      "FOCUS: ",
       processName,
-      " - Type to interact, [",
+      " | [",
       shiftTabHint,
       "Esc] to exit focus mode",
       " "
@@ -496,6 +579,8 @@ function App({ config }) {
   const outputRef = useRef4(null);
   const processListRef = useRef4(null);
   const [autoScroll, setAutoScroll] = useState4({});
+  const scrollPositionsRef = useRef4({});
+  const pendingRestoreRef = useRef4(null);
   const {
     names,
     getOutput,
@@ -538,6 +623,42 @@ function App({ config }) {
   const selectedName = names[selected] ?? "";
   const output = selectedName ? getOutput(selectedName) : "";
   const currentAutoScroll = selectedName ? autoScroll[selectedName] ?? true : true;
+  const saveCurrentScrollPosition = useCallback5(() => {
+    if (selectedName && outputRef.current) {
+      scrollPositionsRef.current[selectedName] = outputRef.current.getScrollOffset();
+    }
+  }, [selectedName]);
+  const handleSetSelected = useCallback5((newSelected) => {
+    saveCurrentScrollPosition();
+    setSelected((prev) => {
+      const next = typeof newSelected === "function" ? newSelected(prev) : newSelected;
+      if (next !== prev) {
+        pendingRestoreRef.current = names[next] ?? null;
+      }
+      return next;
+    });
+  }, [saveCurrentScrollPosition, names]);
+  useEffect5(() => {
+    const restoreName = pendingRestoreRef.current;
+    if (restoreName && restoreName === selectedName) {
+      pendingRestoreRef.current = null;
+      const savedOffset = scrollPositionsRef.current[restoreName];
+      if (savedOffset !== void 0 && savedOffset > 0 && !autoScroll[restoreName]) {
+        setImmediate(() => {
+          if (outputRef.current) {
+            const contentHeight = outputRef.current.getContentHeight();
+            const viewportHeight = outputRef.current.getViewportHeight();
+            if (contentHeight > viewportHeight) {
+              const currentOffset = outputRef.current.getScrollOffset();
+              if (currentOffset !== savedOffset) {
+                outputRef.current.scrollBy(savedOffset - currentOffset);
+              }
+            }
+          }
+        });
+      }
+    }
+  }, [selectedName, autoScroll]);
   const handleAutoScrollChange = useCallback5((enabled) => {
     if (selectedName) {
       setAutoScroll((prev) => ({ ...prev, [selectedName]: enabled }));
@@ -552,17 +673,33 @@ function App({ config }) {
       }
     }
   }, [selectedName]);
+  const handleClick = useCallback5((event) => {
+    if (event.x <= PROCESS_LIST_WIDTH) {
+      if (focusMode) {
+        exitFocus();
+      }
+      const clickedIndex = event.y - 2;
+      if (clickedIndex >= 0 && clickedIndex < names.length) {
+        handleSetSelected(clickedIndex);
+      }
+    } else {
+      if (!focusMode) {
+        enterFocus();
+      }
+    }
+  }, [names.length, focusMode, enterFocus, exitFocus, handleSetSelected]);
   useMouseWheel({
     enabled: !showHelp,
     // Disable when help is shown
-    onWheel: handleWheel
+    onWheel: handleWheel,
+    onClick: handleClick
   });
   useInput((input, key) => {
     if (showHelp) {
       setShowHelp(false);
       return;
     }
-    if (input === "q" || key.ctrl && input === "c") {
+    if (key.ctrl && input === "c") {
       killAll();
       setRawMode(false);
       const rows = stdout?.rows ?? 999;
@@ -571,10 +708,6 @@ function App({ config }) {
       exit();
       process.exit(0);
     }
-    if (input === "?") {
-      setShowHelp(true);
-      return;
-    }
     if (focusMode) {
       const name = names[selected];
       if (!name) return;
@@ -607,16 +740,32 @@ function App({ config }) {
         return;
       }
       if (input && !key.ctrl && !key.meta) {
-        write(name, input);
+        const filtered = input.replace(/\x1b?\[<\d+;\d+;\d+[Mm]/g, "");
+        if (filtered) {
+          write(name, filtered);
+        }
       }
       return;
     }
+    if (input === "q") {
+      killAll();
+      setRawMode(false);
+      const rows = stdout?.rows ?? 999;
+      stdout?.write(`\x1B[${rows};1H\x1B[J\x1B[?1000l\x1B[?1006l\x1B[?25h\x1B[0m
+`);
+      exit();
+      process.exit(0);
+    }
+    if (input === "?") {
+      setShowHelp(true);
+      return;
+    }
     if (key.upArrow || input === "k") {
-      setSelected((s) => Math.max(s - 1, 0));
+      handleSetSelected((s) => Math.max(s - 1, 0));
       return;
     }
     if (key.downArrow || input === "j") {
-      setSelected((s) => Math.min(s + 1, names.length - 1));
+      handleSetSelected((s) => Math.min(s + 1, names.length - 1));
       return;
     }
     if (key.return || key.tab) {