@opencode-cockpit/shell 0.1.4 → 0.2.0

package/dist/tui/components/console.js

@@ -0,0 +1,759 @@
+import { memo as _$memo } from "@opentui/solid";
+import { use as _$use } 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 { detailRows } from "../lib/details.js";
+import { isReleaseKey, keyToBytes } from "../lib/keys.js";
+import { friendlyError, splitMatches } from "../lib/search.js";
+import { displayCommand, kindColor, kindOf, relativeCwd, statusDetail, tailLines, tailRuns, truncate, watchColor, watchLabel, wrapText } from "../lib/view.js";
+import { useScreen } from "../state/store.js";
+import { Badge } from "./badge.js";
+/** Daemon errors name ids and internal states; say what happened instead. */
+const COMMAND_LINES = 3;
+
+/** Splits a line into plain and matching parts so a filtered log can highlight what matched. */
+
+/**
+ * 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(props.defaultView ?? "screen");
+  const [typing, setTyping] = createSignal(props.typing ?? false);
+  const [log, setLog] = createSignal([]);
+  const [notice, setNotice] = createSignal();
+  /** Applied log filter, and the query being typed for it. */
+  const [filter, setFilter] = createSignal("");
+  const [searching, setSearching] = createSignal(false);
+  const [draft, setDraft] = 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, filter, () => screen()], () => {
+    const id = shell()?.id;
+    if (!id || view() !== "log") return;
+    // The daemon greps server-side, so filtering a 40k-line log costs one call, not a transfer.
+    void client.call("shell.read", {
+      id,
+      tail: 2000,
+      limit: 2000,
+      grep: filter() || undefined,
+      ignoreCase: true
+    }).then(page => setLog(page.lines)).catch(() => setLog([]));
+  }));
+
+  // 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 => {
+    // Search takes keys first: a typed query must reach neither the program nor the dialog.
+    if (searching()) {
+      const event = ctx.event;
+      ctx.consume({
+        preventDefault: true,
+        stopPropagation: true
+      });
+      if (event.name === "escape") return setSearching(false);
+      if (event.name === "return" || event.name === "enter") {
+        setFilter(draft().trim());
+        return setSearching(false);
+      }
+      if (event.name === "backspace") return setDraft(value => value.slice(0, -1));
+      if (event.sequence && !event.ctrl && !event.meta && event.sequence >= " ") {
+        setDraft(value => value + event.sequence);
+      }
+      return;
+    }
+    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: () => {
+        if (finished() === 0) {
+          flash("nothing to clear: no finished shells", "info", 2500);
+          return;
+        }
+        act("clear", async () => {
+          const n = await props.store.clearFinished();
+          return `cleared ${n} finished shell${n === 1 ? "" : "s"}`;
+        });
+      }
+    }, {
+      name: "cockpit.console.view",
+      title: "Toggle screen/log",
+      run: () => setView(v => v === "log" ? "screen" : "log")
+    }, {
+      name: "cockpit.console.search",
+      title: "Search this shell's log",
+      run: () => {
+        setView("log");
+        setDraft(filter());
+        setSearching(true);
+      }
+    }, {
+      name: "cockpit.console.searchClear",
+      title: "Clear the log filter",
+      run: () => {
+        setFilter("");
+        setDraft("");
+      }
+    }, {
+      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: "tab",
+      cmd: "cockpit.console.view",
+      desc: "Screen/log"
+    }, {
+      key: "/",
+      cmd: "cockpit.console.search",
+      desc: "Search log"
+    }, {
+      key: "backspace",
+      cmd: "cockpit.console.searchClear",
+      desc: "Clear filter"
+    }, {
+      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()));
+  // Colour when the daemon sent styled rows; the plain text stays the fallback.
+  const screenRuns = createMemo(() => props.colors === false ? [] : tailRuns(screen()?.styled, 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 finished = createMemo(() => props.store.shells().filter(s => s.status !== "running").length);
+  const position = createMemo(() => {
+    const list = props.store.shells();
+    const index = list.findIndex(x => x.id === shell()?.id);
+    return list.length > 1 ? `${index + 1}/${list.length}` : "";
+  });
+  // Only the keys that do something for the selected shell.
+  /** Only the keys that do something right now: no sidebar concepts, no actions with no target. */
+  const hint = createMemo(() => {
+    if (searching()) return `search: ${draft()}▏· enter filters · esc cancels`;
+    if (typing()) return "TYPING: keys go to the shell (ctrl+c included) · ctrl+] stop typing";
+    const wide = dims().width >= 110;
+    const label = (long, short) => wide ? long : short;
+    const keys = [];
+    if (!shell()) return ["n new", "esc close"].join(" · ");
+    keys.push(...(running() ? [label("i type", "i"), label("c ^C", "c"), label("r restart", "r"), label("x stop", "x")] : [label("r run again", "r"), label("d remove", "d")]));
+    if (view() === "log" && filter()) keys.push(label("backspace clear filter", "⌫ filter"));
+    keys.push(label(`tab ${view() === "log" ? "screen" : "log"}`, "tab"));
+    if (view() !== "details") keys.push(label("/ search log", "/"));
+    keys.push(label("? details", "?"));
+    if (props.store.shells().length > 1) keys.push(label("[ ] switch", "[ ]"));
+    if (finished() > 0) keys.push(label("D clear done", "D"));
+    keys.push(label("n new", "n"), "esc");
+    return keys.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$14 = _$createElement("text");
+        _$insertNode(_el$8, _el$9);
+        _$insertNode(_el$8, _el$10);
+        _$insertNode(_el$8, _el$14);
+        _$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);
+        _$insert(_el$8, _$createComponent(Show, {
+          get when() {
+            return watchLabel(s());
+          },
+          get children() {
+            var _el$11 = _$createElement("text"),
+              _el$12 = _$createTextNode(` `),
+              _el$13 = _$createTextNode(` `);
+            _$insertNode(_el$11, _el$12);
+            _$insertNode(_el$11, _el$13);
+            _$setProp(_el$11, "wrapMode", "none");
+            _$setProp(_el$11, "flexShrink", 0);
+            _$insert(_el$11, () => watchLabel(s()), _el$13);
+            _$effect(_$p => _$setProp(_el$11, "fg", watchColor(theme(), s()), _$p));
+            return _el$11;
+          }
+        }), _el$14);
+        _$setProp(_el$14, "wrapMode", "none");
+        _$setProp(_el$14, "flexShrink", 0);
+        _$insert(_el$14, () => [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$14, "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$23 = _$createElement("text"),
+            _el$24 = _$createElement("span");
+          _$insertNode(_el$23, _el$24);
+          _$setProp(_el$23, "wrapMode", "none");
+          _$setProp(_el$23, "flexShrink", 0);
+          _$insert(_el$24, () => index() === 0 ? "$ " : "  ");
+          _$insert(_el$23, line, null);
+          _$effect(_p$ => {
+            var _v$7 = theme().text,
+              _v$8 = {
+                fg: theme().textMuted
+              };
+            _v$7 !== _p$.e && (_p$.e = _$setProp(_el$23, "fg", _v$7, _p$.e));
+            _v$8 !== _p$.t && (_p$.t = _$setProp(_el$24, "style", _v$8, _p$.t));
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined
+          });
+          return _el$23;
+        })()
+      }), _$createComponent(Show, {
+        get when() {
+          return folder();
+        },
+        get children() {
+          var _el$15 = _$createElement("text");
+          _$setProp(_el$15, "wrapMode", "none");
+          _$setProp(_el$15, "flexShrink", 0);
+          _$insert(_el$15, () => truncate(`in ${folder()}`, bodyCols()));
+          _$effect(_$p => _$setProp(_el$15, "fg", theme().textMuted, _$p));
+          return _el$15;
+        }
+      }), _$createComponent(Show, {
+        get when() {
+          return failure();
+        },
+        children: summary => (() => {
+          var _el$25 = _$createElement("text");
+          _$setProp(_el$25, "wrapMode", "none");
+          _$setProp(_el$25, "flexShrink", 0);
+          _$insert(_el$25, () => truncate(`${kindOf(s()) === "fail" ? "error" : "last output"}: ${summary()}`, bodyCols()));
+          _$effect(_$p => _$setProp(_el$25, "fg", kindColor(theme(), kindOf(s())), _$p));
+          return _el$25;
+        })()
+      }), (() => {
+        var _el$16 = _$createElement("box");
+        _$setProp(_el$16, "flexShrink", 0);
+        _$setProp(_el$16, "marginTop", 1);
+        _$setProp(_el$16, "marginBottom", 1);
+        _$setProp(_el$16, "border", ["left"]);
+        _$setProp(_el$16, "paddingLeft", 1);
+        _$setProp(_el$16, "overflow", "hidden");
+        _$insert(_el$16, _$createComponent(Show, {
+          get when() {
+            return view() === "screen";
+          },
+          get children() {
+            return _$createComponent(Show, {
+              get when() {
+                return screenRuns().length > 0;
+              },
+              get fallback() {
+                return (() => {
+                  var _el$26 = _$createElement("text");
+                  _$setProp(_el$26, "wrapMode", "none");
+                  _$insert(_el$26, () => screenText() || " ");
+                  _$effect(_$p => _$setProp(_el$26, "fg", theme().text, _$p));
+                  return _el$26;
+                })();
+              },
+              get children() {
+                var _el$17 = _$createElement("box");
+                _$setProp(_el$17, "flexDirection", "column");
+                _$insert(_el$17, _$createComponent(For, {
+                  get each() {
+                    return screenRuns();
+                  },
+                  children: row => (() => {
+                    var _el$27 = _$createElement("text"),
+                      _el$28 = _$createTextNode(` `);
+                    _$insertNode(_el$27, _el$28);
+                    _$setProp(_el$27, "wrapMode", "none");
+                    _$insert(_el$27, _$createComponent(For, {
+                      each: row,
+                      children: run => (() => {
+                        var _el$29 = _$createElement("span");
+                        _$insert(_el$29, () => run.text);
+                        _$effect(_$p => _$setProp(_el$29, "style", {
+                          fg: run.fg,
+                          bg: run.bg,
+                          bold: run.bold,
+                          italic: run.italic
+                        }, _$p));
+                        return _el$29;
+                      })()
+                    }), _el$28);
+                    _$effect(_$p => _$setProp(_el$27, "fg", theme().text, _$p));
+                    return _el$27;
+                  })()
+                }));
+                return _el$17;
+              }
+            });
+          }
+        }), null);
+        _$insert(_el$16, _$createComponent(Show, {
+          get when() {
+            return view() === "details";
+          },
+          get children() {
+            var _el$18 = _$createElement("box");
+            _$setProp(_el$18, "flexDirection", "column");
+            _$insert(_el$18, _$createComponent(For, {
+              get each() {
+                return details();
+              },
+              children: ([key, value]) => (() => {
+                var _el$30 = _$createElement("text"),
+                  _el$31 = _$createElement("span");
+                _$insertNode(_el$30, _el$31);
+                _$setProp(_el$30, "wrapMode", "none");
+                _$insert(_el$31, () => key.padEnd(10));
+                _$insert(_el$30, value, null);
+                _$effect(_p$ => {
+                  var _v$9 = theme().text,
+                    _v$0 = {
+                      fg: theme().textMuted
+                    };
+                  _v$9 !== _p$.e && (_p$.e = _$setProp(_el$30, "fg", _v$9, _p$.e));
+                  _v$0 !== _p$.t && (_p$.t = _$setProp(_el$31, "style", _v$0, _p$.t));
+                  return _p$;
+                }, {
+                  e: undefined,
+                  t: undefined
+                });
+                return _el$30;
+              })()
+            }));
+            return _el$18;
+          }
+        }), null);
+        _$insert(_el$16, _$createComponent(Show, {
+          get when() {
+            return view() === "log";
+          },
+          get children() {
+            var _el$19 = _$createElement("scrollbox");
+            _$use(el => {
+              scroll = el;
+            }, _el$19);
+            _$setProp(_el$19, "flexGrow", 1);
+            _$setProp(_el$19, "stickyScroll", true);
+            _$setProp(_el$19, "stickyStart", "bottom");
+            _$setProp(_el$19, "verticalScrollbarOptions", {
+              visible: false
+            });
+            _$setProp(_el$19, "horizontalScrollbarOptions", {
+              visible: false
+            });
+            _$insert(_el$19, _$createComponent(For, {
+              get each() {
+                return log();
+              },
+              children: line => (() => {
+                var _el$32 = _$createElement("text"),
+                  _el$33 = _$createElement("span"),
+                  _el$34 = _$createTextNode(` `);
+                _$insertNode(_el$32, _el$33);
+                _$setProp(_el$32, "wrapMode", "none");
+                _$insertNode(_el$33, _el$34);
+                _$insert(_el$33, () => String(line.n).padStart(5), _el$34);
+                _$insert(_el$32, _$createComponent(For, {
+                  get each() {
+                    return splitMatches(truncate(line.text, bodyCols() - 7), filter());
+                  },
+                  children: part => part.match ? (() => {
+                    var _el$35 = _$createElement("span");
+                    _$insert(_el$35, () => part.text);
+                    _$effect(_$p => _$setProp(_el$35, "style", {
+                      fg: theme().background,
+                      bg: theme().warning
+                    }, _$p));
+                    return _el$35;
+                  })() : (() => {
+                    var _el$36 = _$createElement("span");
+                    _$insert(_el$36, () => part.text);
+                    return _el$36;
+                  })()
+                }), null);
+                _$effect(_p$ => {
+                  var _v$1 = theme().text,
+                    _v$10 = {
+                      fg: theme().textMuted
+                    };
+                  _v$1 !== _p$.e && (_p$.e = _$setProp(_el$32, "fg", _v$1, _p$.e));
+                  _v$10 !== _p$.t && (_p$.t = _$setProp(_el$33, "style", _v$10, _p$.t));
+                  return _p$;
+                }, {
+                  e: undefined,
+                  t: undefined
+                });
+                return _el$32;
+              })()
+            }), null);
+            _$insert(_el$19, _$createComponent(Show, {
+              get when() {
+                return _$memo(() => !!filter())() && log().length === 0;
+              },
+              get children() {
+                var _el$20 = _$createElement("text"),
+                  _el$21 = _$createTextNode(`no lines match "`),
+                  _el$22 = _$createTextNode(`"`);
+                _$insertNode(_el$20, _el$21);
+                _$insertNode(_el$20, _el$22);
+                _$insert(_el$20, filter, _el$22);
+                _$effect(_$p => _$setProp(_el$20, "fg", theme().textMuted, _$p));
+                return _el$20;
+              }
+            }), null);
+            return _el$19;
+          }
+        }), null);
+        _$effect(_p$ => {
+          var _v$5 = bodyHeight(),
+            _v$6 = typing() ? theme().accent : theme().border;
+          _v$5 !== _p$.e && (_p$.e = _$setProp(_el$16, "height", _v$5, _p$.e));
+          _v$6 !== _p$.t && (_p$.t = _$setProp(_el$16, "borderColor", _v$6, _p$.t));
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined
+        });
+        return _el$16;
+      })()]
+    }), _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$37 = _$createElement("text");
+          _$setProp(_el$37, "wrapMode", "none");
+          _$insert(_el$37, () => truncate(hint(), bodyCols()));
+          _$effect(_$p => _$setProp(_el$37, "fg", typing() ? theme().accent : theme().textMuted, _$p));
+          return _el$37;
+        })();
+      },
+      children: n => (() => {
+        var _el$38 = _$createElement("text");
+        _$setProp(_el$38, "wrapMode", "none");
+        _$insert(_el$38, () => truncate(n().text, bodyCols()));
+        _$effect(_$p => _$setProp(_el$38, "fg", n().tone === "error" ? theme().error : n().tone === "success" ? theme().success : theme().warning, _$p));
+        return _el$38;
+      })()
+    }));
+    return _el$;
+  })();
+}
+
+/** Everything about a shell, with the full command wrapped rather than cut. */