@opencode-cockpit/shell 0.1.3 → 0.1.5

package/dist/tui/console.js

@@ -0,0 +1,628 @@
+import { use as _$use } from "@opentui/solid";
+import { memo as _$memo } from "@opentui/solid";
+import { effect as _$effect } from "@opentui/solid";
+import { createTextNode as _$createTextNode } from "@opentui/solid";
+import { insertNode as _$insertNode } from "@opentui/solid";
+import { insert as _$insert } from "@opentui/solid";
+import { createComponent as _$createComponent } from "@opentui/solid";
+import { setProp as _$setProp } from "@opentui/solid";
+import { createElement as _$createElement } from "@opentui/solid";
+/** @jsxImportSource @opentui/solid */
+
+import { useBindings } from "@opentui/keymap/solid";
+import { useTerminalDimensions } from "@opentui/solid";
+import { createEffect, createMemo, createSignal, For, on, onCleanup, Show } from "solid-js";
+import { Badge } from "./badge.js";
+import { isReleaseKey, keyToBytes } from "./keys.js";
+import { useScreen } from "./store.js";
+import { displayCommand, kindColor, kindOf, relativeCwd, statusDetail, tailLines, truncate, wrapText } from "./view.js";
+/** Daemon errors name ids and internal states; say what happened instead. */
+function friendlyError(err) {
+  const message = err instanceof Error ? err.message : String(err);
+  if (/is (exited|killed|failed)$/.test(message)) return "the shell is no longer running";
+  if (/not found$/.test(message)) return "that shell was already removed";
+  if (/connection|not running|did not start/.test(message)) return "lost connection to cockpitd, retrying";
+  return message;
+}
+const COMMAND_LINES = 3;
+
+/**
+ * Keyboard-first shell console in an overlay. Normal mode: single-key actions. Typing mode:
+ * every key goes to the program (ctrl+c included); ctrl+] returns to normal mode.
+ */
+export function Console(props) {
+  const theme = () => props.api.theme.current;
+  const dims = useTerminalDimensions();
+  const shell = () => props.store.selected();
+  const [view, setView] = createSignal("screen");
+  const [typing, setTyping] = createSignal(props.typing ?? false);
+  const [log, setLog] = createSignal([]);
+  const [notice, setNotice] = createSignal();
+  const {
+    screen
+  } = useScreen(props.store, () => shell()?.id);
+  let scroll;
+  const running = () => shell()?.status === "running";
+  const client = props.store.client;
+
+  // Layout budget. The host dialog starts at 1/4 of the height and is 116 columns wide (xlarge),
+  // capped by the screen; the body grows with content up to what the header leaves.
+  const frameRows = () => Math.max(10, dims().height - Math.floor(dims().height / 4) - 3);
+  const bodyCols = () => Math.max(20, Math.min(116, dims().width - 2) - 7);
+  const commandLines = createMemo(() => {
+    const s = shell();
+    return s ? wrapText(displayCommand(s), bodyCols() - 2, COMMAND_LINES) : [];
+  });
+  const folder = createMemo(() => {
+    const s = shell();
+    return s ? relativeCwd(s.cwd, props.store.project()) : "";
+  });
+  const failure = createMemo(() => {
+    const s = shell();
+    if (!s?.summary) return undefined;
+    const kind = kindOf(s);
+    return kind === "fail" || kind === "stop" ? s.summary : undefined;
+  });
+  const bodyRows = () => {
+    const header = 1 + commandLines().length + (folder() ? 1 : 0) + (failure() ? 1 : 0);
+    return Math.max(3, frameRows() - header - 4); // margins (2) + footer (1) + bottom padding (1)
+  };
+
+  // Transient footer message. Replaces the key hints while shown, then clears itself.
+  let noticeTimer;
+  const flash = (text, tone, ms) => {
+    clearTimeout(noticeTimer);
+    setNotice({
+      text,
+      tone
+    });
+    if (ms) noticeTimer = setTimeout(() => setNotice(undefined), ms);
+  };
+  onCleanup(() => clearTimeout(noticeTimer));
+  const act = (label, fn) => {
+    flash(`${label}…`, "info");
+    fn().then(result => typeof result === "string" ? flash(result, "success", 2500) : setNotice(undefined)).catch(err => flash(`${label} failed: ${friendlyError(err)}`, "error", 5000));
+  };
+
+  /** Actions that need a live process explain themselves instead of failing. */
+  const whileRunning = (label, fn) => () => {
+    const s = shell();
+    if (!s) return;
+    if (s.status !== "running") {
+      flash(`can't ${label}: this shell already ${kindOf(s) === "done" ? "finished" : "ended"} · r runs it again`, "info", 3000);
+      return;
+    }
+    fn(s.id);
+  };
+
+  // Log view: reload on selection, view switch and new output.
+  createEffect(on([() => shell()?.id, view, () => screen()], () => {
+    const id = shell()?.id;
+    if (!id || view() !== "log") return;
+    void client.call("shell.read", {
+      id,
+      tail: 2000,
+      limit: 2000
+    }).then(page => setLog(page.lines)).catch(() => {});
+  }));
+
+  // Typing mode: size the PTY to what we show, then forward every key.
+  createEffect(on(typing, on => {
+    const id = shell()?.id;
+    if (!on || !id || !running()) return;
+    setView("screen");
+    void client.call("shell.resize", {
+      id,
+      cols: bodyCols(),
+      rows: bodyRows()
+    }).catch(() => {});
+  }));
+  createEffect(() => {
+    if (typing() && !running()) setTyping(false);
+  });
+  const release = props.api.keymap.intercept("key", ctx => {
+    if (!typing()) return;
+    const event = ctx.event;
+    ctx.consume({
+      preventDefault: true,
+      stopPropagation: true
+    });
+    if (isReleaseKey(event)) {
+      setTyping(false);
+      return;
+    }
+    const bytes = keyToBytes(event);
+    const id = shell()?.id;
+    if (bytes && id) void client.call("shell.write", {
+      id,
+      data: bytes
+    }).catch(() => setTyping(false));
+  }, {
+    priority: 10_000
+  });
+  onCleanup(release);
+  const withShell = fn => () => {
+    const id = shell()?.id;
+    if (id) fn(id);
+  };
+  const toggle = next => setView(v => v === next ? "screen" : next);
+  useBindings(() => ({
+    enabled: () => !typing(),
+    commands: [{
+      name: "cockpit.console.type",
+      title: "Type into shell",
+      run: whileRunning("type", () => setTyping(true))
+    }, {
+      name: "cockpit.console.interrupt",
+      title: "Send ctrl+c",
+      run: whileRunning("interrupt", id => act("interrupt", async () => {
+        await client.call("shell.write", {
+          id,
+          data: "\x03"
+        });
+        return "sent ctrl+c";
+      }))
+    }, {
+      name: "cockpit.console.restart",
+      title: "Restart shell",
+      run: withShell(id => act("restart", () => client.call("shell.restart", {
+        id
+      })))
+    }, {
+      name: "cockpit.console.stop",
+      title: "Stop shell",
+      run: whileRunning("stop", id => act("stop", async () => {
+        await client.call("shell.stop", {
+          id,
+          signal: "SIGTERM",
+          graceMs: 3000
+        });
+        return "stopped";
+      }))
+    }, {
+      name: "cockpit.console.remove",
+      title: "Remove shell",
+      run: withShell(id => act("remove", () => client.call("shell.remove", {
+        id
+      })))
+    }, {
+      name: "cockpit.console.clear",
+      title: "Clear finished shells",
+      run: () => act("clear", async () => {
+        const n = await props.store.clearFinished();
+        return `cleared ${n} finished shell${n === 1 ? "" : "s"}`;
+      })
+    }, {
+      name: "cockpit.console.all",
+      title: "Show all / fewer shells",
+      run: () => props.store.toggleAll()
+    }, {
+      name: "cockpit.console.view",
+      title: "Toggle screen/log",
+      run: () => setView(v => v === "log" ? "screen" : "log")
+    }, {
+      name: "cockpit.console.details",
+      title: "Toggle details",
+      run: () => toggle("details")
+    }, {
+      name: "cockpit.console.next",
+      title: "Next shell",
+      run: () => props.store.step(1)
+    }, {
+      name: "cockpit.console.prev",
+      title: "Previous shell",
+      run: () => props.store.step(-1)
+    }, {
+      name: "cockpit.console.new",
+      title: "New shell",
+      run: () => props.onNewShell()
+    }, {
+      name: "cockpit.console.down",
+      title: "Scroll down",
+      run: () => scroll?.scrollBy(3)
+    }, {
+      name: "cockpit.console.up",
+      title: "Scroll up",
+      run: () => scroll?.scrollBy(-3)
+    }, {
+      name: "cockpit.console.bottom",
+      title: "Scroll to end",
+      run: () => scroll?.scrollTo(scroll.scrollHeight)
+    }, {
+      name: "cockpit.console.top",
+      title: "Scroll to top",
+      run: () => scroll?.scrollTo(0)
+    }, {
+      name: "cockpit.console.close",
+      title: "Close console",
+      run: () => props.onClose()
+    }],
+    bindings: [{
+      key: "i,return",
+      cmd: "cockpit.console.type",
+      desc: "Type"
+    }, {
+      key: "c",
+      cmd: "cockpit.console.interrupt",
+      desc: "^C"
+    }, {
+      key: "r",
+      cmd: "cockpit.console.restart",
+      desc: "Restart"
+    }, {
+      key: "x",
+      cmd: "cockpit.console.stop",
+      desc: "Stop"
+    }, {
+      key: "d",
+      cmd: "cockpit.console.remove",
+      desc: "Remove"
+    }, {
+      key: "shift+d",
+      cmd: "cockpit.console.clear",
+      desc: "Clear finished"
+    }, {
+      key: "a",
+      cmd: "cockpit.console.all",
+      desc: "All"
+    }, {
+      key: "tab",
+      cmd: "cockpit.console.view",
+      desc: "Screen/log"
+    }, {
+      key: "?,shift+/",
+      cmd: "cockpit.console.details",
+      desc: "Details"
+    }, {
+      key: "],l,right",
+      cmd: "cockpit.console.next",
+      desc: "Next"
+    }, {
+      key: "[,h,left",
+      cmd: "cockpit.console.prev",
+      desc: "Prev"
+    }, {
+      key: "n",
+      cmd: "cockpit.console.new",
+      desc: "New"
+    }, {
+      key: "j,down",
+      cmd: "cockpit.console.down",
+      desc: "Down"
+    }, {
+      key: "k,up",
+      cmd: "cockpit.console.up",
+      desc: "Up"
+    }, {
+      key: "shift+g,end",
+      cmd: "cockpit.console.bottom",
+      desc: "End"
+    }, {
+      key: "g,home",
+      cmd: "cockpit.console.top",
+      desc: "Top"
+    }, {
+      key: "q",
+      cmd: "cockpit.console.close",
+      desc: "Close"
+    }]
+  }));
+  const screenText = createMemo(() => tailLines(screen()?.text, bodyRows(), bodyCols()));
+  const details = createMemo(() => shell() ? detailRows(shell(), props.store.now(), bodyCols()) : []);
+  const bodyHeight = createMemo(() => {
+    if (typing()) return bodyRows();
+    const content = view() === "log" ? log().length : view() === "details" ? details().length : screenText().split("\n").length;
+    return Math.min(bodyRows(), Math.max(6, content));
+  });
+  const position = createMemo(() => {
+    const list = props.store.visible();
+    const index = list.findIndex(x => x.id === shell()?.id);
+    const hidden = props.store.hidden().length;
+    return list.length > 1 || hidden > 0 ? `${index + 1}/${list.length}${hidden ? ` +${hidden}` : ""}` : "";
+  });
+  // Only the keys that do something for the selected shell.
+  const hint = createMemo(() => {
+    if (typing()) return "TYPING: keys go to the shell (ctrl+c included) · ctrl+] stop typing";
+    const next = view() === "log" ? "screen" : "log";
+    const wide = dims().width >= 110;
+    const live = running() ? wide ? ["i type", "c ^C", "r restart", "x stop"] : ["i type", "c ^C", "r", "x"] : [wide ? "r run again" : "r rerun", wide ? "d remove" : "d"];
+    const common = wide ? [`tab ${next}`, "? details", "[ ] switch", "D clear done", "a all", "esc"] : [`tab ${next}`, "?", "[ ]", "D", "a", "esc"];
+    return [...(shell() ? live : ["n new"]), ...common].join(" · ");
+  });
+  return (() => {
+    var _el$ = _$createElement("box"),
+      _el$2 = _$createElement("box");
+    _$insertNode(_el$, _el$2);
+    _$setProp(_el$, "flexDirection", "column");
+    _$setProp(_el$, "paddingLeft", 2);
+    _$setProp(_el$, "paddingRight", 2);
+    _$setProp(_el$, "paddingBottom", 1);
+    _$setProp(_el$, "overflow", "hidden");
+    _$insert(_el$, _$createComponent(Show, {
+      get when() {
+        return shell();
+      },
+      get fallback() {
+        return (() => {
+          var _el$3 = _$createElement("box"),
+            _el$4 = _$createElement("text"),
+            _el$5 = _$createElement("b"),
+            _el$7 = _$createElement("text");
+          _$insertNode(_el$3, _el$4);
+          _$insertNode(_el$3, _el$7);
+          _$setProp(_el$3, "flexDirection", "column");
+          _$insertNode(_el$4, _el$5);
+          _$setProp(_el$4, "wrapMode", "none");
+          _$insertNode(_el$5, _$createTextNode(`No shells in this project`));
+          _$setProp(_el$7, "wrapMode", "none");
+          _$insert(_el$7, () => truncate("Press n to start one. The agent starts its own with shell_start.", bodyCols()));
+          _$effect(_p$ => {
+            var _v$ = theme().text,
+              _v$2 = theme().textMuted;
+            _v$ !== _p$.e && (_p$.e = _$setProp(_el$4, "fg", _v$, _p$.e));
+            _v$2 !== _p$.t && (_p$.t = _$setProp(_el$7, "fg", _v$2, _p$.t));
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined
+          });
+          return _el$3;
+        })();
+      },
+      children: s => [(() => {
+        var _el$8 = _$createElement("box"),
+          _el$9 = _$createElement("text"),
+          _el$0 = _$createTextNode(` `),
+          _el$1 = _$createElement("b"),
+          _el$10 = _$createElement("box"),
+          _el$11 = _$createElement("text");
+        _$insertNode(_el$8, _el$9);
+        _$insertNode(_el$8, _el$10);
+        _$insertNode(_el$8, _el$11);
+        _$setProp(_el$8, "height", 1);
+        _$setProp(_el$8, "flexShrink", 0);
+        _$setProp(_el$8, "flexDirection", "row");
+        _$setProp(_el$8, "overflow", "hidden");
+        _$insert(_el$8, _$createComponent(Badge, {
+          get api() {
+            return props.api;
+          },
+          get shell() {
+            return s();
+          },
+          get frame() {
+            return props.store.frame();
+          }
+        }), _el$9);
+        _$insertNode(_el$9, _el$0);
+        _$insertNode(_el$9, _el$1);
+        _$setProp(_el$9, "wrapMode", "none");
+        _$setProp(_el$9, "flexShrink", 1);
+        _$insert(_el$1, () => truncate(s().title, Math.max(10, bodyCols() - 50)));
+        _$setProp(_el$10, "flexGrow", 1);
+        _$setProp(_el$11, "wrapMode", "none");
+        _$setProp(_el$11, "flexShrink", 0);
+        _$insert(_el$11, () => [statusDetail(s(), props.store.now()), s().run > 1 ? `run ${s().run}` : "", position()].filter(Boolean).join(" · "));
+        _$effect(_p$ => {
+          var _v$3 = theme().text,
+            _v$4 = theme().textMuted;
+          _v$3 !== _p$.e && (_p$.e = _$setProp(_el$9, "fg", _v$3, _p$.e));
+          _v$4 !== _p$.t && (_p$.t = _$setProp(_el$11, "fg", _v$4, _p$.t));
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined
+        });
+        return _el$8;
+      })(), _$createComponent(For, {
+        get each() {
+          return commandLines();
+        },
+        children: (line, index) => (() => {
+          var _el$17 = _$createElement("text"),
+            _el$18 = _$createElement("span");
+          _$insertNode(_el$17, _el$18);
+          _$setProp(_el$17, "wrapMode", "none");
+          _$setProp(_el$17, "flexShrink", 0);
+          _$insert(_el$18, () => index() === 0 ? "$ " : "  ");
+          _$insert(_el$17, line, null);
+          _$effect(_p$ => {
+            var _v$7 = theme().text,
+              _v$8 = {
+                fg: theme().textMuted
+              };
+            _v$7 !== _p$.e && (_p$.e = _$setProp(_el$17, "fg", _v$7, _p$.e));
+            _v$8 !== _p$.t && (_p$.t = _$setProp(_el$18, "style", _v$8, _p$.t));
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined
+          });
+          return _el$17;
+        })()
+      }), _$createComponent(Show, {
+        get when() {
+          return folder();
+        },
+        get children() {
+          var _el$12 = _$createElement("text");
+          _$setProp(_el$12, "wrapMode", "none");
+          _$setProp(_el$12, "flexShrink", 0);
+          _$insert(_el$12, () => truncate(`in ${folder()}`, bodyCols()));
+          _$effect(_$p => _$setProp(_el$12, "fg", theme().textMuted, _$p));
+          return _el$12;
+        }
+      }), _$createComponent(Show, {
+        get when() {
+          return failure();
+        },
+        children: summary => (() => {
+          var _el$19 = _$createElement("text");
+          _$setProp(_el$19, "wrapMode", "none");
+          _$setProp(_el$19, "flexShrink", 0);
+          _$insert(_el$19, () => truncate(`${kindOf(s()) === "fail" ? "error" : "last output"}: ${summary()}`, bodyCols()));
+          _$effect(_$p => _$setProp(_el$19, "fg", kindColor(theme(), kindOf(s())), _$p));
+          return _el$19;
+        })()
+      }), (() => {
+        var _el$13 = _$createElement("box");
+        _$setProp(_el$13, "flexShrink", 0);
+        _$setProp(_el$13, "marginTop", 1);
+        _$setProp(_el$13, "marginBottom", 1);
+        _$setProp(_el$13, "border", ["left"]);
+        _$setProp(_el$13, "paddingLeft", 1);
+        _$setProp(_el$13, "overflow", "hidden");
+        _$insert(_el$13, _$createComponent(Show, {
+          get when() {
+            return view() === "screen";
+          },
+          get children() {
+            var _el$14 = _$createElement("text");
+            _$setProp(_el$14, "wrapMode", "none");
+            _$insert(_el$14, () => screenText() || " ");
+            _$effect(_$p => _$setProp(_el$14, "fg", theme().text, _$p));
+            return _el$14;
+          }
+        }), null);
+        _$insert(_el$13, _$createComponent(Show, {
+          get when() {
+            return view() === "details";
+          },
+          get children() {
+            var _el$15 = _$createElement("box");
+            _$setProp(_el$15, "flexDirection", "column");
+            _$insert(_el$15, _$createComponent(For, {
+              get each() {
+                return details();
+              },
+              children: ([key, value]) => (() => {
+                var _el$20 = _$createElement("text"),
+                  _el$21 = _$createElement("span");
+                _$insertNode(_el$20, _el$21);
+                _$setProp(_el$20, "wrapMode", "none");
+                _$insert(_el$21, () => key.padEnd(10));
+                _$insert(_el$20, value, null);
+                _$effect(_p$ => {
+                  var _v$9 = theme().text,
+                    _v$0 = {
+                      fg: theme().textMuted
+                    };
+                  _v$9 !== _p$.e && (_p$.e = _$setProp(_el$20, "fg", _v$9, _p$.e));
+                  _v$0 !== _p$.t && (_p$.t = _$setProp(_el$21, "style", _v$0, _p$.t));
+                  return _p$;
+                }, {
+                  e: undefined,
+                  t: undefined
+                });
+                return _el$20;
+              })()
+            }));
+            return _el$15;
+          }
+        }), null);
+        _$insert(_el$13, _$createComponent(Show, {
+          get when() {
+            return view() === "log";
+          },
+          get children() {
+            var _el$16 = _$createElement("scrollbox");
+            _$use(el => {
+              scroll = el;
+            }, _el$16);
+            _$setProp(_el$16, "flexGrow", 1);
+            _$setProp(_el$16, "stickyScroll", true);
+            _$setProp(_el$16, "stickyStart", "bottom");
+            _$setProp(_el$16, "verticalScrollbarOptions", {
+              visible: false
+            });
+            _$setProp(_el$16, "horizontalScrollbarOptions", {
+              visible: false
+            });
+            _$insert(_el$16, _$createComponent(For, {
+              get each() {
+                return log();
+              },
+              children: line => (() => {
+                var _el$22 = _$createElement("text"),
+                  _el$23 = _$createElement("span"),
+                  _el$24 = _$createTextNode(` `);
+                _$insertNode(_el$22, _el$23);
+                _$setProp(_el$22, "wrapMode", "none");
+                _$insertNode(_el$23, _el$24);
+                _$insert(_el$23, () => String(line.n).padStart(5), _el$24);
+                _$insert(_el$22, () => truncate(line.text, bodyCols() - 7), null);
+                _$effect(_p$ => {
+                  var _v$1 = theme().text,
+                    _v$10 = {
+                      fg: theme().textMuted
+                    };
+                  _v$1 !== _p$.e && (_p$.e = _$setProp(_el$22, "fg", _v$1, _p$.e));
+                  _v$10 !== _p$.t && (_p$.t = _$setProp(_el$23, "style", _v$10, _p$.t));
+                  return _p$;
+                }, {
+                  e: undefined,
+                  t: undefined
+                });
+                return _el$22;
+              })()
+            }));
+            return _el$16;
+          }
+        }), null);
+        _$effect(_p$ => {
+          var _v$5 = bodyHeight(),
+            _v$6 = typing() ? theme().accent : theme().border;
+          _v$5 !== _p$.e && (_p$.e = _$setProp(_el$13, "height", _v$5, _p$.e));
+          _v$6 !== _p$.t && (_p$.t = _$setProp(_el$13, "borderColor", _v$6, _p$.t));
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined
+        });
+        return _el$13;
+      })()]
+    }), _el$2);
+    _$setProp(_el$2, "height", 1);
+    _$setProp(_el$2, "flexShrink", 0);
+    _$setProp(_el$2, "flexDirection", "row");
+    _$setProp(_el$2, "overflow", "hidden");
+    _$insert(_el$2, _$createComponent(Show, {
+      get when() {
+        return notice();
+      },
+      get fallback() {
+        return (() => {
+          var _el$25 = _$createElement("text");
+          _$setProp(_el$25, "wrapMode", "none");
+          _$insert(_el$25, () => truncate(hint(), bodyCols()));
+          _$effect(_$p => _$setProp(_el$25, "fg", typing() ? theme().accent : theme().textMuted, _$p));
+          return _el$25;
+        })();
+      },
+      children: n => (() => {
+        var _el$26 = _$createElement("text");
+        _$setProp(_el$26, "wrapMode", "none");
+        _$insert(_el$26, () => truncate(n().text, bodyCols()));
+        _$effect(_$p => _$setProp(_el$26, "fg", n().tone === "error" ? theme().error : n().tone === "success" ? theme().success : theme().warning, _$p));
+        return _el$26;
+      })()
+    }));
+    return _el$;
+  })();
+}
+
+/** Everything about a shell, with the full command wrapped rather than cut. */
+function detailRows(s, now, cols) {
+  const width = Math.max(10, cols - 11);
+  const rows = [];
+  for (const [i, line] of wrapText(displayCommand(s), width, 12).entries()) rows.push([i === 0 ? "command" : "", line]);
+  rows.push(["folder", s.cwd]);
+  rows.push(["status", `${s.status}${s.exitCode !== undefined ? ` (exit ${s.exitCode})` : ""}${s.signal ? ` (${s.signal})` : ""}`]);
+  rows.push(["timing", statusDetail(s, now)]);
+  rows.push(["started", new Date(s.startedAt).toLocaleString()]);
+  if (s.summary) rows.push(["summary", truncate(s.summary, width)]);
+  rows.push(["id", `${s.id} · run ${s.run}${s.pid ? ` · pid ${s.pid}` : ""}`]);
+  rows.push(["owner", s.owner.session ? `agent session ${s.owner.session}` : "you"]);
+  rows.push(["output", `${s.lines.last} lines · ${Math.round(s.bytes / 1024)} KiB`]);
+  return rows;
+}