panex 0.9.3 → 0.9.4

package/dist/index.js

@@ -1,5 +1,13 @@
 // src/tui.ts
-import blessed from "blessed";
+import { render } from "ink";
+import { createElement } from "react";
+
+// src/components/App.tsx
+import { useState as useState4, useEffect as useEffect5, useRef as useRef4, useCallback as useCallback5 } from "react";
+import { Box as Box6, useApp, useInput, useStdin as useStdin2, useStdout as useStdout4 } from "ink";
+
+// src/hooks/useProcessManager.ts
+import { useState, useEffect, useCallback, useRef } from "react";
 
 // src/process-manager.ts
 import { EventEmitter } from "events";
@@ -126,295 +134,580 @@ var ProcessManager = class extends EventEmitter {
   }
 };
 
-// src/tui.ts
-async function createTUI(config) {
-  const processManager = new ProcessManager(config.procs);
-  const screen = blessed.screen({
-    smartCSR: true,
-    title: "panex",
-    fullUnicode: true
-  });
-  const processList = blessed.list({
-    parent: screen,
-    label: " PROCESSES ",
-    top: 0,
-    left: 0,
-    width: "20%",
-    height: "100%-1",
-    border: { type: "line" },
-    style: {
-      border: { fg: "blue" },
-      selected: { bg: "blue", fg: "white" },
-      item: { fg: "white" }
-    },
-    mouse: config.settings?.mouse ?? true,
-    scrollbar: {
-      ch: "\u2502",
-      style: { bg: "blue" }
-    }
-  });
-  const outputBox = blessed.box({
-    parent: screen,
-    label: " OUTPUT ",
-    top: 0,
-    left: "20%",
-    width: "80%",
-    height: "100%-1",
-    border: { type: "line" },
-    style: {
-      border: { fg: "green" }
-    },
-    scrollable: true,
-    alwaysScroll: true,
-    scrollbar: {
-      ch: "\u2502",
-      style: { bg: "green" }
-    },
-    mouse: config.settings?.mouse ?? true,
-    keys: true,
-    vi: true
-  });
-  const statusBar = blessed.box({
-    parent: screen,
-    bottom: 0,
-    left: 0,
-    width: "100%",
-    height: 1,
-    style: {
-      bg: "blue",
-      fg: "white"
-    },
-    content: " [\u2191\u2193/jk] select  [Enter] focus  [r] restart  [A] restart All  [x] kill  [q] quit  [?] help "
-  });
-  const helpBox = blessed.box({
-    parent: screen,
-    top: "center",
-    left: "center",
-    width: "60%",
-    height: "60%",
-    label: " Help ",
-    border: { type: "line" },
-    style: {
-      border: { fg: "yellow" },
-      bg: "black"
-    },
-    hidden: true,
-    content: `
-  Keyboard Shortcuts
-  \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+// src/hooks/useProcessManager.ts
+function useProcessManager(config) {
+  const [, forceUpdate] = useState({});
+  const processManagerRef = useRef(null);
+  if (!processManagerRef.current) {
+    processManagerRef.current = new ProcessManager(config.procs);
+  }
+  const pm = processManagerRef.current;
+  useEffect(() => {
+    const update = () => forceUpdate({});
+    pm.on("output", update);
+    pm.on("started", update);
+    pm.on("exit", update);
+    pm.on("error", update);
+    pm.startAll();
+    return () => {
+      pm.removeAllListeners();
+      pm.killAll();
+    };
+  }, [pm]);
+  const getOutput = useCallback((name) => pm.getOutput(name), [pm]);
+  const getStatus = useCallback((name) => {
+    const proc = pm.getProcess(name);
+    return proc?.status ?? "stopped";
+  }, [pm]);
+  const restart = useCallback((name) => pm.restart(name), [pm]);
+  const restartAll = useCallback(() => pm.restartAll(), [pm]);
+  const kill = useCallback((name) => pm.kill(name), [pm]);
+  const killAll = useCallback(() => pm.killAll(), [pm]);
+  const write = useCallback((name, data) => pm.write(name, data), [pm]);
+  const resize = useCallback((name, cols, rows) => pm.resize(name, cols, rows), [pm]);
+  return {
+    processManager: pm,
+    processes: new Map(pm.getNames().map((n) => [n, pm.getProcess(n)])),
+    names: pm.getNames(),
+    getOutput,
+    getStatus,
+    restart,
+    restartAll,
+    kill,
+    killAll,
+    write,
+    resize
+  };
+}
 
-  Navigation
-    \u2191/\u2193 or j/k    Navigate process list
-    g/G           Scroll to top/bottom of output
-    PgUp/PgDn     Scroll output
+// src/hooks/useFocusMode.ts
+import { useState as useState2, useCallback as useCallback2 } from "react";
+function useFocusMode() {
+  const [focusMode, setFocusMode] = useState2(false);
+  const enterFocus = useCallback2(() => setFocusMode(true), []);
+  const exitFocus = useCallback2(() => setFocusMode(false), []);
+  const toggleFocus = useCallback2(() => setFocusMode((f) => !f), []);
+  return { focusMode, enterFocus, exitFocus, toggleFocus };
+}
 
-  Process Control
-    Enter         Focus process (interactive mode)
-    Esc           Exit focus mode
-    r             Restart selected process
-    A             Restart all processes
-    x             Kill selected process
+// src/hooks/useMouseWheel.ts
+import { useEffect as useEffect2, useCallback as useCallback3 } from "react";
+import { useStdin, useStdout } from "ink";
+function useMouseWheel({ enabled = true, onWheel } = {}) {
+  const { stdin, setRawMode } = useStdin();
+  const { stdout } = useStdout();
+  const handleData = useCallback3((data) => {
+    const str = data.toString();
+    const sgrRegex = /\x1b\[<(\d+);(\d+);(\d+)([Mm])/g;
+    let match;
+    while ((match = sgrRegex.exec(str)) !== null) {
+      const button = parseInt(match[1] ?? "0", 10);
+      const x = parseInt(match[2] ?? "0", 10);
+      const y = parseInt(match[3] ?? "0", 10);
+      const isPress = match[4] === "M";
+      if (isPress) {
+        if (button === 64) {
+          onWheel?.({ type: "wheel-up", x, y });
+        } else if (button === 65) {
+          onWheel?.({ type: "wheel-down", x, y });
+        }
+      }
+    }
+  }, [onWheel]);
+  useEffect2(() => {
+    if (!enabled || !stdin || !stdout) return;
+    stdout.write("\x1B[?1000h\x1B[?1006h");
+    setRawMode?.(true);
+    stdin.on("data", handleData);
+    return () => {
+      stdin.off("data", handleData);
+      stdout.write("\x1B[?1000l\x1B[?1006l");
+    };
+  }, [enabled, stdin, stdout, setRawMode, handleData]);
+}
 
-  General
-    ?             Toggle this help
-    q             Quit panex
+// src/components/ProcessList.tsx
+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 ProcessList = forwardRef(
+  function ProcessList2({ names, selected, getStatus, active, height }, ref) {
+    const borderStyle = active ? "double" : "single";
+    const listRef = useRef2(null);
+    const { stdout } = useStdout2();
+    useEffect3(() => {
+      const handleResize = () => listRef.current?.remeasure();
+      stdout?.on("resize", handleResize);
+      return () => {
+        stdout?.off("resize", handleResize);
+      };
+    }, [stdout]);
+    useImperativeHandle(ref, () => ({
+      scrollBy: (delta) => listRef.current?.scrollBy(delta),
+      scrollToTop: () => listRef.current?.scrollToTop(),
+      scrollToBottom: () => listRef.current?.scrollToBottom()
+    }));
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        flexDirection: "column",
+        borderStyle,
+        borderColor: active ? "blue" : "gray",
+        width: 20,
+        height,
+        paddingX: 1,
+        children: /* @__PURE__ */ jsx(Box, { flexDirection: "column", marginTop: 0, height: height ? height - 2 : void 0, children: /* @__PURE__ */ jsx(
+          ScrollList,
+          {
+            ref: listRef,
+            selectedIndex: selected,
+            scrollAlignment: "auto",
+            children: names.map((name, i) => {
+              const status = getStatus(name);
+              const statusIcon = status === "running" ? "\u25CF" : status === "error" ? "\u2717" : "\u25CB";
+              const statusColor = status === "running" ? "green" : status === "error" ? "red" : "gray";
+              const isSelected = i === selected;
+              return /* @__PURE__ */ jsxs(Box, { backgroundColor: isSelected ? "blue" : void 0, children: [
+                /* @__PURE__ */ jsxs(Text, { color: isSelected ? "black" : void 0, children: [
+                  name,
+                  " "
+                ] }),
+                /* @__PURE__ */ jsx(Text, { color: isSelected ? "black" : statusColor, children: statusIcon })
+              ] }, name);
+            })
+          }
+        ) })
+      }
+    );
+  }
+);
 
-  Press any key to close this help...
-    `
-  });
-  let selectedIndex = 0;
-  let focusMode = false;
-  const processNames = Object.keys(config.procs);
-  const scrollPositions = /* @__PURE__ */ new Map();
-  function updateProcessList() {
-    const items = processNames.map((name, i) => {
-      const proc = processManager.getProcess(name);
-      const status = proc?.status === "running" ? "\u25CF" : proc?.status === "error" ? "\u2717" : "\u25CB";
-      const prefix = i === selectedIndex ? "\u25B6" : " ";
-      return `${prefix} ${name} ${status}`;
-    });
-    processList.setItems(items);
-    processList.select(selectedIndex);
-    screen.render();
+// src/components/OutputPanel.tsx
+import { Box as Box3, Text as Text3, useStdout as useStdout3 } from "ink";
+import { ScrollView } from "ink-scroll-view";
+import { forwardRef as forwardRef2, useImperativeHandle as useImperativeHandle2, useRef as useRef3, useEffect as useEffect4, useState as useState3, useCallback as useCallback4 } from "react";
+
+// src/components/Scrollbar.tsx
+import { Box as Box2, Text as Text2 } from "ink";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Scrollbar({
+  scrollOffset,
+  contentHeight,
+  viewportHeight,
+  height
+}) {
+  if (contentHeight <= viewportHeight) {
+    return /* @__PURE__ */ jsx2(Box2, { flexDirection: "column", width: 1, children: Array.from({ length: height }).map((_, i) => /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: " " }, i)) });
   }
-  function updateOutput(autoScroll = false) {
-    const name = processNames[selectedIndex];
-    if (name) {
-      outputBox.setLabel(` OUTPUT: ${name} `);
-      const output = processManager.getOutput(name);
-      outputBox.setContent(output);
-      if (autoScroll) {
-        outputBox.setScrollPerc(100);
-      } else {
-        const savedPos = scrollPositions.get(name) ?? 100;
-        outputBox.setScrollPerc(savedPos);
-      }
+  const trackHeight = height;
+  const thumbRatio = viewportHeight / contentHeight;
+  const thumbHeight = Math.max(1, Math.round(trackHeight * thumbRatio));
+  const maxScroll = contentHeight - viewportHeight;
+  const scrollRatio = maxScroll > 0 ? scrollOffset / maxScroll : 0;
+  const thumbPosition = Math.round((trackHeight - thumbHeight) * scrollRatio);
+  const lines = [];
+  for (let i = 0; i < trackHeight; i++) {
+    if (i >= thumbPosition && i < thumbPosition + thumbHeight) {
+      lines.push("\u2588");
+    } else {
+      lines.push("\u2591");
     }
-    screen.render();
   }
-  function saveScrollPosition() {
-    const name = processNames[selectedIndex];
-    if (name) {
-      scrollPositions.set(name, outputBox.getScrollPerc());
-    }
+  return /* @__PURE__ */ jsx2(Box2, { flexDirection: "column", width: 1, children: lines.map((char, i) => /* @__PURE__ */ jsx2(Text2, { dimColor: char === "\u2591", children: char }, i)) });
+}
+
+// src/components/OutputPanel.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var OutputPanel = forwardRef2(
+  function OutputPanel2({ name, output, active, height, autoScroll = true, onAutoScrollChange }, ref) {
+    const borderStyle = active ? "double" : "single";
+    const lines = output.split("\n");
+    const scrollRef = useRef3(null);
+    const { stdout } = useStdout3();
+    const [scrollOffset, setScrollOffset] = useState3(0);
+    const [contentHeight, setContentHeight] = useState3(0);
+    const [viewportHeight, setViewportHeight] = useState3(0);
+    useEffect4(() => {
+      const handleResize = () => scrollRef.current?.remeasure();
+      stdout?.on("resize", handleResize);
+      return () => {
+        stdout?.off("resize", handleResize);
+      };
+    }, [stdout]);
+    const isAtBottom = useCallback4(() => {
+      if (!scrollRef.current) return true;
+      const offset = scrollRef.current.getScrollOffset();
+      const bottom = scrollRef.current.getBottomOffset();
+      return offset >= bottom - 1;
+    }, []);
+    const handleContentHeightChange = useCallback4((newHeight) => {
+      setContentHeight(newHeight);
+      if (autoScroll && scrollRef.current) {
+        setTimeout(() => {
+          scrollRef.current?.scrollToBottom();
+        }, 0);
+      }
+    }, [autoScroll]);
+    const handleScroll = useCallback4((offset) => {
+      setScrollOffset(offset);
+      if (scrollRef.current) {
+        const bottom = scrollRef.current.getBottomOffset();
+        const atBottom = offset >= bottom - 1;
+        if (!atBottom && autoScroll) {
+          onAutoScrollChange?.(false);
+        } else if (atBottom && !autoScroll) {
+          onAutoScrollChange?.(true);
+        }
+      }
+    }, [autoScroll, onAutoScrollChange]);
+    useImperativeHandle2(ref, () => ({
+      scrollBy: (delta) => scrollRef.current?.scrollBy(delta),
+      scrollToTop: () => scrollRef.current?.scrollToTop(),
+      scrollToBottom: () => scrollRef.current?.scrollToBottom(),
+      getScrollOffset: () => scrollRef.current?.getScrollOffset() ?? 0,
+      getContentHeight: () => scrollRef.current?.getContentHeight() ?? 0,
+      getViewportHeight: () => scrollRef.current?.getViewportHeight() ?? 0,
+      isAtBottom
+    }));
+    const scrollbarHeight = height ? height - 4 : 20;
+    const hasScroll = contentHeight > viewportHeight;
+    const pinIndicator = !autoScroll && hasScroll ? " \u2357" : "";
+    return /* @__PURE__ */ jsx3(
+      Box3,
+      {
+        flexDirection: "column",
+        borderStyle,
+        borderColor: active ? "green" : "gray",
+        flexGrow: 1,
+        height,
+        paddingLeft: 1,
+        children: /* @__PURE__ */ jsxs2(Box3, { flexDirection: "row", marginTop: 0, height: height ? height - 2 : void 0, children: [
+          /* @__PURE__ */ jsx3(Box3, { flexDirection: "column", flexGrow: 1, children: /* @__PURE__ */ jsx3(
+            ScrollView,
+            {
+              ref: scrollRef,
+              onScroll: handleScroll,
+              onContentHeightChange: handleContentHeightChange,
+              onViewportSizeChange: (layout) => setViewportHeight(layout.height),
+              children: lines.map((line, i) => /* @__PURE__ */ jsx3(Text3, { wrap: "truncate", children: line }, i))
+            }
+          ) }),
+          hasScroll && /* @__PURE__ */ jsx3(
+            Scrollbar,
+            {
+              scrollOffset,
+              contentHeight,
+              viewportHeight,
+              height: scrollbarHeight
+            }
+          )
+        ] })
+      }
+    );
   }
-  processManager.on("output", (name) => {
-    if (name === processNames[selectedIndex]) {
-      updateOutput(true);
+);
+
+// src/components/StatusBar.tsx
+import { Box as Box4, Text as Text4 } from "ink";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function StatusBar({ focusMode, processName, showShiftTabHint = true }) {
+  if (focusMode && processName) {
+    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",
+      " "
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx4(Box4, { backgroundColor: "blue", width: "100%", children: /* @__PURE__ */ jsxs3(Text4, { bold: true, color: "black", backgroundColor: "blue", children: [
+    " ",
+    "[\u2191\u2193/jk] select  [Tab/Enter] focus  [r] restart  [A] restart All  [x] kill  [q] quit  [?] help",
+    " "
+  ] }) });
+}
+
+// src/components/HelpPopup.tsx
+import { Box as Box5, Text as Text5 } from "ink";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function HelpPopup({ visible }) {
+  if (!visible) return null;
+  return /* @__PURE__ */ jsxs4(
+    Box5,
+    {
+      flexDirection: "column",
+      borderStyle: "single",
+      borderColor: "yellow",
+      padding: 1,
+      position: "absolute",
+      marginLeft: 10,
+      marginTop: 5,
+      children: [
+        /* @__PURE__ */ jsx5(Text5, { bold: true, color: "yellow", children: " Help " }),
+        /* @__PURE__ */ jsxs4(Text5, { children: [
+          "\n",
+          "Keyboard Shortcuts"
+        ] }),
+        /* @__PURE__ */ jsx5(Text5, { children: "\u2500".repeat(18) }),
+        /* @__PURE__ */ jsxs4(Text5, { children: [
+          "\n",
+          "Navigation"
+        ] }),
+        /* @__PURE__ */ jsx5(Text5, { children: "  \u2191/\u2193 or j/k    Navigate process list" }),
+        /* @__PURE__ */ jsx5(Text5, { children: "  g/G           Scroll to top/bottom of output" }),
+        /* @__PURE__ */ jsx5(Text5, { children: "  PgUp/PgDn     Scroll output" }),
+        /* @__PURE__ */ jsxs4(Text5, { children: [
+          "\n",
+          "Process Control"
+        ] }),
+        /* @__PURE__ */ jsx5(Text5, { children: "  Tab/Enter     Focus process (interactive mode)" }),
+        /* @__PURE__ */ jsx5(Text5, { children: "  Esc           Exit focus mode" }),
+        /* @__PURE__ */ jsx5(Text5, { children: "  r             Restart selected process" }),
+        /* @__PURE__ */ jsx5(Text5, { children: "  A             Restart all processes" }),
+        /* @__PURE__ */ jsx5(Text5, { children: "  x             Kill selected process" }),
+        /* @__PURE__ */ jsxs4(Text5, { children: [
+          "\n",
+          "General"
+        ] }),
+        /* @__PURE__ */ jsx5(Text5, { children: "  ?             Toggle this help" }),
+        /* @__PURE__ */ jsx5(Text5, { children: "  q             Quit panex" }),
+        /* @__PURE__ */ jsxs4(Text5, { children: [
+          "\n",
+          "Press any key to close this help..."
+        ] })
+      ]
     }
-  });
-  processManager.on("started", () => {
-    updateProcessList();
-  });
-  processManager.on("exit", () => {
-    updateProcessList();
-  });
-  processManager.on("error", (name) => {
-    updateProcessList();
-    if (name === processNames[selectedIndex]) {
-      updateOutput();
+  );
+}
+
+// src/components/App.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function App({ config }) {
+  const { exit } = useApp();
+  const { stdout } = useStdout4();
+  const { setRawMode } = useStdin2();
+  const [selected, setSelected] = useState4(0);
+  const [showHelp, setShowHelp] = useState4(false);
+  const { focusMode, enterFocus, exitFocus } = useFocusMode();
+  const outputRef = useRef4(null);
+  const processListRef = useRef4(null);
+  const [autoScroll, setAutoScroll] = useState4({});
+  const {
+    names,
+    getOutput,
+    getStatus,
+    restart,
+    restartAll,
+    kill,
+    killAll,
+    write,
+    resize
+  } = useProcessManager(config);
+  const isShiftTabDisabled = (name) => {
+    const setting = config.settings?.noShiftTab;
+    if (setting === true) return true;
+    if (Array.isArray(setting)) return setting.includes(name);
+    return false;
+  };
+  const maxPanelHeight = stdout ? stdout.rows - 1 : void 0;
+  useEffect5(() => {
+    const name = names[selected];
+    if (name && stdout) {
+      const cols = Math.floor(stdout.columns * 0.8) - 2;
+      const rows = stdout.rows - 3;
+      resize(name, cols, rows);
     }
-  });
-  screen.key(["q", "C-c"], () => {
-    processManager.killAll();
-    process.exit(0);
-  });
-  screen.key(["?"], () => {
-    helpBox.toggle();
-    screen.render();
-  });
-  screen.key(["escape"], () => {
-    if (!helpBox.hidden) {
-      helpBox.hide();
-      screen.render();
-      return;
+  }, [stdout?.columns, stdout?.rows, selected, names, resize]);
+  useEffect5(() => {
+    setAutoScroll((prev) => {
+      const next = { ...prev };
+      let changed = false;
+      for (const name of names) {
+        if (next[name] === void 0) {
+          next[name] = true;
+          changed = true;
+        }
+      }
+      return changed ? next : prev;
+    });
+  }, [names]);
+  const selectedName = names[selected] ?? "";
+  const output = selectedName ? getOutput(selectedName) : "";
+  const currentAutoScroll = selectedName ? autoScroll[selectedName] ?? true : true;
+  const handleAutoScrollChange = useCallback5((enabled) => {
+    if (selectedName) {
+      setAutoScroll((prev) => ({ ...prev, [selectedName]: enabled }));
     }
-    if (focusMode) {
-      focusMode = false;
-      statusBar.setContent(" [\u2191\u2193/jk] select  [Enter] focus  [r] restart  [A] restart All  [x] kill  [q] quit  [?] help ");
-      screen.render();
+  }, [selectedName]);
+  const handleWheel = useCallback5((event) => {
+    const delta = event.type === "wheel-up" ? -3 : 3;
+    if (outputRef.current) {
+      outputRef.current.scrollBy(delta);
+      if (event.type === "wheel-up" && selectedName) {
+        setAutoScroll((prev) => ({ ...prev, [selectedName]: false }));
+      }
     }
+  }, [selectedName]);
+  useMouseWheel({
+    enabled: !showHelp,
+    // Disable when help is shown
+    onWheel: handleWheel
   });
-  helpBox.key(["escape", "q", "?", "enter", "space"], () => {
-    helpBox.hide();
-    screen.render();
-  });
-  screen.key(["up", "k"], () => {
-    if (focusMode || !helpBox.hidden) return;
-    if (selectedIndex > 0) {
-      saveScrollPosition();
-      selectedIndex--;
-      updateProcessList();
-      updateOutput();
+  useInput((input, key) => {
+    if (showHelp) {
+      setShowHelp(false);
+      return;
     }
-  });
-  screen.key(["down", "j"], () => {
-    if (focusMode || !helpBox.hidden) return;
-    if (selectedIndex < processNames.length - 1) {
-      saveScrollPosition();
-      selectedIndex++;
-      updateProcessList();
-      updateOutput();
+    if (input === "q" || key.ctrl && input === "c") {
+      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);
     }
-  });
-  screen.key(["enter"], () => {
-    if (!helpBox.hidden) {
-      helpBox.hide();
-      screen.render();
+    if (input === "?") {
+      setShowHelp(true);
       return;
     }
-    if (!focusMode) {
-      focusMode = true;
-      const name = processNames[selectedIndex];
-      statusBar.setContent(` FOCUS: ${name} - Type to interact, [Esc] to exit focus mode `);
-      screen.render();
-    } else {
-      const name = processNames[selectedIndex];
-      if (name) {
-        processManager.write(name, "\r");
+    if (focusMode) {
+      const name = names[selected];
+      if (!name) return;
+      if (key.escape) {
+        exitFocus();
+        return;
+      }
+      if (key.shift && key.tab && !isShiftTabDisabled(name)) {
+        exitFocus();
+        return;
+      }
+      if (key.return) {
+        write(name, "\r");
+        return;
+      }
+      if (key.upArrow) {
+        write(name, "\x1B[A");
+        return;
       }
+      if (key.downArrow) {
+        write(name, "\x1B[B");
+        return;
+      }
+      if (key.leftArrow) {
+        write(name, "\x1B[D");
+        return;
+      }
+      if (key.rightArrow) {
+        write(name, "\x1B[C");
+        return;
+      }
+      if (input && !key.ctrl && !key.meta) {
+        write(name, input);
+      }
+      return;
     }
-  });
-  screen.key(["r"], () => {
-    if (focusMode || !helpBox.hidden) return;
-    const name = processNames[selectedIndex];
-    if (name) {
-      processManager.restart(name);
+    if (key.upArrow || input === "k") {
+      setSelected((s) => Math.max(s - 1, 0));
+      return;
     }
-  });
-  screen.key(["S-a"], () => {
-    if (focusMode || !helpBox.hidden) return;
-    processManager.restartAll();
-  });
-  screen.key(["x"], () => {
-    if (focusMode || !helpBox.hidden) return;
-    const name = processNames[selectedIndex];
-    if (name) {
-      processManager.kill(name);
+    if (key.downArrow || input === "j") {
+      setSelected((s) => Math.min(s + 1, names.length - 1));
+      return;
     }
-  });
-  screen.key(["g"], () => {
-    if (focusMode || !helpBox.hidden) return;
-    outputBox.setScrollPerc(0);
-    screen.render();
-  });
-  screen.key(["S-g"], () => {
-    if (focusMode || !helpBox.hidden) return;
-    outputBox.setScrollPerc(100);
-    screen.render();
-  });
-  outputBox.on("click", () => {
-    if (!helpBox.hidden) return;
-    if (!focusMode) {
-      focusMode = true;
-      const name = processNames[selectedIndex];
-      statusBar.setContent(` FOCUS: ${name} - Type to interact, [Esc] to exit focus mode `);
-      screen.render();
+    if (key.return || key.tab) {
+      enterFocus();
+      return;
     }
-  });
-  processList.on("element click", (_el, data) => {
-    if (!helpBox.hidden) return;
-    const absTop = processList.atop ?? 0;
-    const clickedIndex = data.y - absTop - 1;
-    if (clickedIndex < 0 || clickedIndex >= processNames.length) return;
-    if (focusMode) {
-      focusMode = false;
-      statusBar.setContent(" [\u2191\u2193/jk] select  [Enter] focus  [r] restart  [A] restart All  [x] kill  [q] quit  [?] help ");
+    if (input === "r") {
+      const name = names[selected];
+      if (name) restart(name);
+      return;
     }
-    if (clickedIndex !== selectedIndex) {
-      saveScrollPosition();
-      selectedIndex = clickedIndex;
-      updateProcessList();
-      updateOutput();
+    if (input === "A") {
+      restartAll();
+      return;
     }
-    screen.render();
-  });
-  screen.on("keypress", (ch, key) => {
-    if (focusMode && ch) {
-      if (key.name === "escape" || key.name === "return" || key.name === "enter") {
-        return;
+    if (input === "x") {
+      const name = names[selected];
+      if (name) kill(name);
+      return;
+    }
+    if (input === "g") {
+      outputRef.current?.scrollToTop();
+      if (selectedName) {
+        setAutoScroll((prev) => ({ ...prev, [selectedName]: false }));
       }
-      const name = processNames[selectedIndex];
-      if (name) {
-        processManager.write(name, ch);
+      return;
+    }
+    if (input === "G") {
+      outputRef.current?.scrollToBottom();
+      if (selectedName) {
+        setAutoScroll((prev) => ({ ...prev, [selectedName]: true }));
       }
+      return;
     }
-  });
-  screen.on("resize", () => {
-    const name = processNames[selectedIndex];
-    if (name) {
-      const cols = Math.floor(screen.width * 0.8) - 2;
-      const rows = screen.height - 3;
-      processManager.resize(name, cols, rows);
+    if (key.pageUp) {
+      const pageSize = outputRef.current?.getViewportHeight() ?? 10;
+      outputRef.current?.scrollBy(-pageSize);
+      if (selectedName) {
+        setAutoScroll((prev) => ({ ...prev, [selectedName]: false }));
+      }
+      return;
+    }
+    if (key.pageDown) {
+      const pageSize = outputRef.current?.getViewportHeight() ?? 10;
+      outputRef.current?.scrollBy(pageSize);
+      return;
     }
   });
-  updateProcessList();
-  updateOutput();
-  processList.focus();
-  await processManager.startAll();
-  updateProcessList();
-  updateOutput();
-  screen.render();
+  const showShiftTabHint = selectedName ? !isShiftTabDisabled(selectedName) : true;
+  return /* @__PURE__ */ jsxs5(Box6, { flexDirection: "column", height: maxPanelHeight, children: [
+    /* @__PURE__ */ jsxs5(Box6, { flexDirection: "row", flexGrow: 1, height: maxPanelHeight ? maxPanelHeight - 1 : void 0, children: [
+      /* @__PURE__ */ jsx6(
+        ProcessList,
+        {
+          ref: processListRef,
+          names,
+          selected,
+          getStatus,
+          active: !focusMode,
+          height: maxPanelHeight ? maxPanelHeight - 1 : void 0
+        }
+      ),
+      /* @__PURE__ */ jsx6(
+        OutputPanel,
+        {
+          ref: outputRef,
+          name: selectedName,
+          output,
+          active: focusMode,
+          height: maxPanelHeight ? maxPanelHeight - 1 : void 0,
+          autoScroll: currentAutoScroll,
+          onAutoScrollChange: handleAutoScrollChange
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx6(
+      StatusBar,
+      {
+        focusMode,
+        processName: selectedName,
+        showShiftTabHint
+      }
+    ),
+    /* @__PURE__ */ jsx6(HelpPopup, { visible: showHelp })
+  ] });
+}
+
+// src/tui.ts
+async function createTUI(config) {
+  const { waitUntilExit } = render(createElement(App, { config }));
+  await waitUntilExit();
 }
 export {
   ProcessManager,