@opencode-cockpit/shell 0.1.4 → 0.1.5

package/dist/tui/dock.js

@@ -0,0 +1,214 @@
+import { effect as _$effect } from "@opentui/solid";
+import { insert as _$insert } from "@opentui/solid";
+import { memo as _$memo } from "@opentui/solid";
+import { createComponent as _$createComponent } from "@opentui/solid";
+import { createTextNode as _$createTextNode } from "@opentui/solid";
+import { insertNode as _$insertNode } from "@opentui/solid";
+import { setProp as _$setProp } from "@opentui/solid";
+import { createElement as _$createElement } from "@opentui/solid";
+/** @jsxImportSource @opentui/solid */
+
+import { useTerminalDimensions } from "@opentui/solid";
+import { createMemo, For, Show } from "solid-js";
+import { Badge } from "./badge.js";
+import { useScreen } from "./store.js";
+import { displayCommand, kindColor, kindOf, statusDetail, tailLines, truncate } from "./view.js";
+/** Split pane under the chat: status tabs for shells and the selected shell's live screen. */
+export function Dock(props) {
+  const theme = () => props.api.theme.current;
+  const dims = useTerminalDimensions();
+  const {
+    screen
+  } = useScreen(props.store, () => props.store.selected()?.id);
+  const bodyRows = () => Math.max(2, props.height - 3);
+  // Tabs share one row: keep them to what fits, the rest lives behind the "N more" chip.
+  const tabLimit = () => Math.max(1, Math.floor((dims().width - 26) / 30));
+  const tabs = createMemo(() => (props.store.showAll() ? props.store.shells() : props.store.visible()).slice(0, tabLimit()));
+  const overflow = createMemo(() => props.store.shells().length - tabs().length);
+  const body = createMemo(() => tailLines(screen()?.text, bodyRows(), Math.max(10, dims().width - 4)));
+  return (() => {
+    var _el$ = _$createElement("box"),
+      _el$2 = _$createElement("box"),
+      _el$3 = _$createElement("text"),
+      _el$4 = _$createElement("b"),
+      _el$7 = _$createElement("box"),
+      _el$8 = _$createElement("text");
+    _$insertNode(_el$, _el$2);
+    _$setProp(_el$, "flexShrink", 0);
+    _$setProp(_el$, "flexDirection", "column");
+    _$setProp(_el$, "border", ["top"]);
+    _$insertNode(_el$2, _el$3);
+    _$insertNode(_el$2, _el$7);
+    _$insertNode(_el$2, _el$8);
+    _$setProp(_el$2, "flexDirection", "row");
+    _$setProp(_el$2, "gap", 1);
+    _$setProp(_el$2, "paddingLeft", 1);
+    _$setProp(_el$2, "paddingRight", 1);
+    _$setProp(_el$2, "flexShrink", 0);
+    _$setProp(_el$2, "height", 1);
+    _$setProp(_el$2, "overflow", "hidden");
+    _$insertNode(_el$3, _el$4);
+    _$setProp(_el$3, "flexShrink", 0);
+    _$insertNode(_el$4, _$createTextNode(`Shells`));
+    _$insert(_el$2, _$createComponent(Show, {
+      get when() {
+        return props.store.shells().length > 0;
+      },
+      get fallback() {
+        return (() => {
+          var _el$9 = _$createElement("text");
+          _$insertNode(_el$9, _$createTextNode(`none yet · the agent starts them, or /shell-new`));
+          _$setProp(_el$9, "wrapMode", "none");
+          _$effect(_$p => _$setProp(_el$9, "fg", theme().textMuted, _$p));
+          return _el$9;
+        })();
+      },
+      get children() {
+        return [_$createComponent(For, {
+          get each() {
+            return tabs();
+          },
+          children: shell => {
+            const active = () => props.store.selected()?.id === shell.id;
+            return (() => {
+              var _el$1 = _$createElement("box"),
+                _el$10 = _$createElement("text"),
+                _el$11 = _$createTextNode(` `);
+              _$insertNode(_el$1, _el$10);
+              _$setProp(_el$1, "flexDirection", "row");
+              _$setProp(_el$1, "flexShrink", 0);
+              _$setProp(_el$1, "paddingRight", 1);
+              _$setProp(_el$1, "onMouseUp", () => active() ? props.onOpenConsole(shell.id) : props.store.select(shell.id));
+              _$insert(_el$1, _$createComponent(Badge, {
+                get api() {
+                  return props.api;
+                },
+                shell: shell,
+                get frame() {
+                  return props.store.frame();
+                }
+              }), _el$10);
+              _$insertNode(_el$10, _el$11);
+              _$setProp(_el$10, "wrapMode", "none");
+              _$insert(_el$10, (() => {
+                var _c$2 = _$memo(() => !!active());
+                return () => _c$2() ? (() => {
+                  var _el$12 = _$createElement("b");
+                  _$insert(_el$12, () => truncate(shell.title, 22));
+                  return _el$12;
+                })() : truncate(shell.title, 22);
+              })(), null);
+              _$effect(_p$ => {
+                var _v$6 = active() ? theme().backgroundElement : theme().backgroundPanel,
+                  _v$7 = active() ? theme().text : theme().textMuted;
+                _v$6 !== _p$.e && (_p$.e = _$setProp(_el$1, "backgroundColor", _v$6, _p$.e));
+                _v$7 !== _p$.t && (_p$.t = _$setProp(_el$10, "fg", _v$7, _p$.t));
+                return _p$;
+              }, {
+                e: undefined,
+                t: undefined
+              });
+              return _el$1;
+            })();
+          }
+        }), _$createComponent(Show, {
+          get when() {
+            return overflow() > 0 || props.store.showAll();
+          },
+          get children() {
+            var _el$6 = _$createElement("text");
+            _$setProp(_el$6, "wrapMode", "none");
+            _$setProp(_el$6, "flexShrink", 0);
+            _$setProp(_el$6, "onMouseUp", () => props.store.toggleAll());
+            _$insert(_el$6, (() => {
+              var _c$ = _$memo(() => !!props.store.showAll());
+              return () => _c$() ? "▾ fewer" : `▸ ${overflow()} more`;
+            })());
+            _$effect(_$p => _$setProp(_el$6, "fg", theme().textMuted, _$p));
+            return _el$6;
+          }
+        })];
+      }
+    }), _el$7);
+    _$setProp(_el$7, "flexGrow", 1);
+    _$setProp(_el$8, "wrapMode", "none");
+    _$setProp(_el$8, "flexShrink", 0);
+    _$insert(_el$8, () => props.hint());
+    _$insert(_el$, _$createComponent(Show, {
+      get when() {
+        return props.store.selected();
+      },
+      children: shell => [(() => {
+        var _el$13 = _$createElement("box"),
+          _el$14 = _$createElement("text");
+        _$insertNode(_el$13, _el$14);
+        _$setProp(_el$13, "flexGrow", 1);
+        _$setProp(_el$13, "paddingLeft", 2);
+        _$setProp(_el$13, "paddingRight", 1);
+        _$setProp(_el$13, "minHeight", 0);
+        _$setProp(_el$13, "overflow", "hidden");
+        _$setProp(_el$13, "onMouseUp", () => props.onOpenConsole(shell().id));
+        _$setProp(_el$14, "wrapMode", "none");
+        _$insert(_el$14, () => body() || " ");
+        _$effect(_$p => _$setProp(_el$14, "fg", theme().text, _$p));
+        return _el$13;
+      })(), (() => {
+        var _el$15 = _$createElement("box"),
+          _el$16 = _$createElement("text");
+        _$insertNode(_el$15, _el$16);
+        _$setProp(_el$15, "flexDirection", "row");
+        _$setProp(_el$15, "gap", 1);
+        _$setProp(_el$15, "paddingLeft", 2);
+        _$setProp(_el$15, "flexShrink", 0);
+        _$setProp(_el$15, "height", 1);
+        _$setProp(_el$15, "overflow", "hidden");
+        _$setProp(_el$16, "wrapMode", "none");
+        _$setProp(_el$16, "flexShrink", 0);
+        _$insert(_el$16, () => statusDetail(shell(), props.store.now()));
+        _$insert(_el$15, _$createComponent(Show, {
+          get when() {
+            return _$memo(() => kindOf(shell()) === "fail")() && shell().summary;
+          },
+          get fallback() {
+            return (() => {
+              var _el$18 = _$createElement("text");
+              _$setProp(_el$18, "wrapMode", "none");
+              _$insert(_el$18, () => truncate(`$ ${displayCommand(shell())}`, Math.max(20, dims().width - 40)));
+              _$effect(_$p => _$setProp(_el$18, "fg", theme().textMuted, _$p));
+              return _el$18;
+            })();
+          },
+          get children() {
+            var _el$17 = _$createElement("text");
+            _$setProp(_el$17, "wrapMode", "none");
+            _$insert(_el$17, () => truncate(`${shell().summary}`, Math.max(20, dims().width - 40)));
+            _$effect(_$p => _$setProp(_el$17, "fg", theme().error, _$p));
+            return _el$17;
+          }
+        }), null);
+        _$effect(_$p => _$setProp(_el$16, "fg", kindColor(theme(), kindOf(shell())), _$p));
+        return _el$15;
+      })()]
+    }), null);
+    _$effect(_p$ => {
+      var _v$ = props.height,
+        _v$2 = theme().border,
+        _v$3 = theme().backgroundPanel,
+        _v$4 = theme().text,
+        _v$5 = theme().textMuted;
+      _v$ !== _p$.e && (_p$.e = _$setProp(_el$, "height", _v$, _p$.e));
+      _v$2 !== _p$.t && (_p$.t = _$setProp(_el$, "borderColor", _v$2, _p$.t));
+      _v$3 !== _p$.a && (_p$.a = _$setProp(_el$, "backgroundColor", _v$3, _p$.a));
+      _v$4 !== _p$.o && (_p$.o = _$setProp(_el$3, "fg", _v$4, _p$.o));
+      _v$5 !== _p$.i && (_p$.i = _$setProp(_el$8, "fg", _v$5, _p$.i));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined,
+      i: undefined
+    });
+    return _el$;
+  })();
+}

package/dist/tui/index.js

@@ -0,0 +1,264 @@
+import { memo as _$memo } from "@opentui/solid";
+import { createComponent as _$createComponent } from "@opentui/solid";
+/** @jsxImportSource @opentui/solid */
+import { createBindingLookup } from "@opencode-ai/plugin/tui";
+import { claimFeature, duplicateFeatureMessage } from "@opencode-cockpit/client";
+import { createSignal } from "solid-js";
+import { createClient } from "../connect.js";
+import { Console } from "./console.js";
+import { Dock } from "./dock.js";
+import { SidebarShells } from "./sidebar.js";
+import { createShellStore } from "./store.js";
+import { BADGE_LABEL, displayCommand, kindOf, order } from "./view.js";
+const DEFAULT_KEYS = {
+  "cockpit.shells.dock": "<leader>o",
+  "cockpit.shells.console": "<leader>i"
+};
+const SHELL_PACKAGE = "@opencode-cockpit/shell";
+
+/** Shell's TUI half as a factory, so bundles such as `opencode-cockpit` can include it. */
+export function createShellTui({
+  source = SHELL_PACKAGE
+} = {}) {
+  return async (api, rawOptions, meta) => {
+    // The renderer is shared by every TUI plugin in this OpenCode window.
+    const claim = claimFeature(api.renderer, "shell", source);
+    if (!claim.active) {
+      api.ui.toast({
+        variant: "warning",
+        title: "opencode-cockpit",
+        message: duplicateFeatureMessage("Shell", claim.owner, source),
+        duration: 10_000
+      });
+      return;
+    }
+    api.lifecycle.onDispose(() => claim.release());
+    await shellTui(api, rawOptions, meta);
+  };
+}
+const shellTui = async (api, rawOptions) => {
+  const options = rawOptions ?? {};
+  const client = createClient("opencode-cockpit/tui");
+  const store = createShellStore(api, client, {
+    historyMinutes: options.historyMinutes
+  });
+  const keys = createBindingLookup({
+    ...DEFAULT_KEYS,
+    ...options.keybinds
+  });
+  const [dockOpen, setDockOpen] = createSignal(api.kv.get("cockpit.dock.open", options.dockOpen ?? false));
+  const toggleDock = () => {
+    const next = !dockOpen();
+    setDockOpen(next);
+    api.kv.set("cockpit.dock.open", next);
+  };
+  const shortcut = command => {
+    const bindings = api.keymap.getCommandBindings({
+      visibility: "registered",
+      commands: [command]
+    });
+    return api.keys.formatBindings(bindings.get(command)) ?? "";
+  };
+  const openConsole = (id, typing = false) => {
+    if (id) store.select(id);
+    api.ui.dialog.replace(() => _$createComponent(Console, {
+      api: api,
+      store: store,
+      typing: typing,
+      onClose: () => api.ui.dialog.clear(),
+      onNewShell: () => newShell(api, store, openConsole)
+    }), () => {});
+    api.ui.dialog.setSize("xlarge");
+  };
+  api.keymap.registerLayer({
+    commands: [{
+      name: "cockpit.shells.dock",
+      title: "Toggle shells panel",
+      category: "Shells",
+      namespace: "palette",
+      slashName: "shells",
+      run: () => toggleDock()
+    }, {
+      name: "cockpit.shells.console",
+      title: "Open shell console",
+      category: "Shells",
+      namespace: "palette",
+      slashName: "shell",
+      run: () => openConsole()
+    }, {
+      name: "cockpit.shells.new",
+      title: "New background shell",
+      category: "Shells",
+      namespace: "palette",
+      slashName: "shell-new",
+      run: () => newShell(api, store, openConsole)
+    }, {
+      name: "cockpit.shells.clear",
+      title: "Clear finished shells",
+      category: "Shells",
+      namespace: "palette",
+      slashName: "shells-clear",
+      run: () => {
+        void store.clearFinished().then(n => api.ui.toast({
+          variant: "success",
+          title: "Shells",
+          message: `Cleared ${n} finished shell${n === 1 ? "" : "s"}`
+        })).catch(err => api.ui.toast({
+          variant: "error",
+          title: "Shells",
+          message: String(err)
+        }));
+      }
+    }, {
+      name: "cockpit.shells.restartDaemon",
+      title: "Restart shell daemon",
+      category: "Shells",
+      namespace: "palette",
+      slashName: "shells-restart-daemon",
+      run: () => restartDaemon(api, store)
+    }, {
+      name: "cockpit.shells.pick",
+      title: "Switch shell",
+      category: "Shells",
+      namespace: "palette",
+      run: () => pickShell(api, store, openConsole)
+    }],
+    bindings: keys.gather("cockpit", Object.keys(DEFAULT_KEYS))
+  });
+  const height = () => Math.max(6, Math.min(options.dockHeight ?? 14, Math.floor(api.renderer.height * 0.45)));
+  api.slots.register({
+    order: 150,
+    slots: {
+      app_bottom() {
+        return _$memo(() => _$memo(() => !!dockOpen())() ? _$createComponent(Dock, {
+          api: api,
+          store: store,
+          get height() {
+            return height();
+          },
+          hint: () => `${shortcut("cockpit.shells.console")} console · ${shortcut("cockpit.shells.dock")} hide`,
+          onOpenConsole: id => openConsole(id)
+        }) : null);
+      },
+      sidebar_content() {
+        return _$createComponent(SidebarShells, {
+          api: api,
+          store: store,
+          get rows() {
+            return options.sidebarRows;
+          },
+          onOpen: id => openConsole(id),
+          consoleShortcut: () => shortcut("cockpit.shells.console")
+        });
+      }
+    }
+  });
+
+  // A daemon from older plugin code is kept only while it runs shells; say so once.
+  const offOutdated = client.onOutdated(info => {
+    if (!info) return;
+    api.ui.toast({
+      variant: "warning",
+      title: "Shells",
+      message: "The shell daemon is running older code because shells are still running. Run /shells-restart-daemon when convenient.",
+      duration: 8000
+    });
+  });
+  api.lifecycle.onDispose(() => {
+    offOutdated();
+    store.dispose();
+    client.close();
+  });
+};
+function newShell(api, store, open) {
+  const DialogPrompt = api.ui.DialogPrompt;
+  api.ui.dialog.replace(() => _$createComponent(DialogPrompt, {
+    title: "New background shell",
+    placeholder: "npm run dev",
+    onConfirm: value => {
+      const command = value.trim();
+      if (!command) return api.ui.dialog.clear();
+      const shell = process.env.SHELL && /(bash|zsh|fish|sh)$/.test(process.env.SHELL) ? process.env.SHELL : "/bin/bash";
+      store.client.call("shell.start", {
+        command: shell,
+        args: ["-c", command],
+        cwd: store.project(),
+        title: command.slice(0, 60),
+        owner: {
+          project: store.project()
+        },
+        reuse: true
+      }).then(info => {
+        void store.refresh();
+        open(info.id);
+      }).catch(err => {
+        api.ui.dialog.clear();
+        api.ui.toast({
+          variant: "error",
+          title: "Shell",
+          message: err instanceof Error ? err.message : String(err)
+        });
+      });
+    },
+    onCancel: () => api.ui.dialog.clear()
+  }));
+}
+function restartDaemon(api, store) {
+  const running = store.shells().filter(s => s.status === "running").length;
+  const restart = force => {
+    api.ui.dialog.clear();
+    store.client.restartDaemon({
+      force
+    }).then(ok => {
+      void store.refresh();
+      api.ui.toast({
+        variant: ok ? "success" : "warning",
+        title: "Shells",
+        message: ok ? "Shell daemon restarted" : "Shells are running; restart was not forced"
+      });
+    }).catch(err => api.ui.toast({
+      variant: "error",
+      title: "Shells",
+      message: String(err)
+    }));
+  };
+  if (running === 0) return restart(false);
+  const DialogConfirm = api.ui.DialogConfirm;
+  api.ui.dialog.replace(() => _$createComponent(DialogConfirm, {
+    title: "Restart shell daemon?",
+    message: `${running} running shell${running === 1 ? "" : "s"} will be stopped.`,
+    onConfirm: () => restart(true),
+    onCancel: () => api.ui.dialog.clear()
+  }));
+}
+function pickShell(api, store, open) {
+  const DialogSelect = api.ui.DialogSelect;
+  const shells = order(store.shells());
+  if (shells.length === 0) {
+    api.ui.toast({
+      variant: "info",
+      title: "Shells",
+      message: "No shells in this project yet"
+    });
+    return;
+  }
+  api.ui.dialog.replace(() => _$createComponent(DialogSelect, {
+    title: "Shells",
+    get current() {
+      return store.selected()?.id;
+    },
+    get options() {
+      return shells.map(s => ({
+        title: s.title,
+        value: s.id,
+        description: `${BADGE_LABEL[kindOf(s)]} · ${displayCommand(s).slice(0, 60)}`
+      }));
+    },
+    onSelect: option => open(option.value)
+  }));
+}
+const plugin = {
+  id: "opencode-cockpit.shell",
+  tui: createShellTui()
+};
+export default plugin;

package/dist/tui/keys.js

@@ -0,0 +1,43 @@
+const NAMED = {
+  return: "\r",
+  enter: "\r",
+  linefeed: "\n",
+  tab: "\t",
+  backspace: "\x7f",
+  escape: "\x1b",
+  space: " ",
+  up: "\x1b[A",
+  down: "\x1b[B",
+  right: "\x1b[C",
+  left: "\x1b[D",
+  home: "\x1b[H",
+  end: "\x1b[F",
+  pageup: "\x1b[5~",
+  pagedown: "\x1b[6~",
+  delete: "\x1b[3~",
+  insert: "\x1b[2~"
+};
+
+/**
+ * Re-encodes a parsed key as legacy terminal bytes. The TUI may receive keys via the kitty
+ * protocol, whose raw form programs in the PTY would not understand.
+ */
+export function keyToBytes(e) {
+  if (e.eventType === "release") return undefined;
+  const name = e.name?.toLowerCase() ?? "";
+  if (e.name === "tab" && e.shift) return "\x1b[Z";
+  const named = NAMED[name];
+  if (named !== undefined) return e.meta || e.option ? `\x1b${named}` : named;
+  if (e.ctrl && name.length === 1) {
+    const code = name.toUpperCase().charCodeAt(0);
+    if (code >= 64 && code <= 95) return String.fromCharCode(code - 64);
+  }
+  const text = e.sequence && !e.sequence.startsWith("\x1b") ? e.sequence : name.length === 1 ? e.shift ? name.toUpperCase() : name : undefined;
+  if (!text) return undefined;
+  return e.meta || e.option ? `\x1b${text}` : text;
+}
+
+/** ctrl+] releases typing mode (the telnet escape), since esc and ctrl+c belong to the program. */
+export function isReleaseKey(e) {
+  return e.ctrl && (e.name === "]" || e.sequence === "\x1d");
+}

package/dist/tui/sidebar.js

@@ -0,0 +1,121 @@
+import { effect as _$effect } from "@opentui/solid";
+import { memo as _$memo } from "@opentui/solid";
+import { createComponent as _$createComponent } from "@opentui/solid";
+import { insert as _$insert } from "@opentui/solid";
+import { createTextNode as _$createTextNode } from "@opentui/solid";
+import { insertNode as _$insertNode } from "@opentui/solid";
+import { setProp as _$setProp } from "@opentui/solid";
+import { createElement as _$createElement } from "@opentui/solid";
+/** @jsxImportSource @opentui/solid */
+
+import { createMemo, For, Show } from "solid-js";
+import { Badge } from "./badge.js";
+import { kindOf, shortDetail, truncate } from "./view.js";
+export function SidebarShells(props) {
+  const theme = () => props.api.theme.current;
+  const limit = () => Math.max(1, props.store.showAll() ? props.expandedRows ?? 12 : props.rows ?? 5);
+  const counts = createMemo(() => {
+    const list = props.store.shells();
+    const of = kind => list.filter(s => kindOf(s) === kind).length;
+    // The sidebar column is ~26 characters wide; keep the summary short enough to survive it.
+    return [of("run") ? `${of("run")} run` : "", of("fail") ? `${of("fail")} fail` : "", of("done") + of("stop") ? `${of("done") + of("stop")} done` : ""].filter(Boolean).join(" · ");
+  });
+
+  // Running shells and recent failures first; everything else only when expanded.
+  const candidates = createMemo(() => props.store.showAll() ? props.store.shells() : props.store.visible());
+  const shown = createMemo(() => candidates().slice(0, limit()));
+  const overflow = createMemo(() => props.store.shells().length - shown().length);
+  return _$createComponent(Show, {
+    get when() {
+      return props.store.shells().length > 0;
+    },
+    get children() {
+      var _el$ = _$createElement("box"),
+        _el$2 = _$createElement("text"),
+        _el$3 = _$createElement("b"),
+        _el$5 = _$createElement("span"),
+        _el$6 = _$createTextNode(` `);
+      _$insertNode(_el$, _el$2);
+      _$insertNode(_el$2, _el$3);
+      _$insertNode(_el$2, _el$5);
+      _$setProp(_el$2, "wrapMode", "none");
+      _$insertNode(_el$3, _$createTextNode(`Shells`));
+      _$insertNode(_el$5, _el$6);
+      _$insert(_el$5, counts, null);
+      _$insert(_el$, _$createComponent(For, {
+        get each() {
+          return shown();
+        },
+        children: shell => // Mouse-up, not mouse-down: the host dialog closes on the mouse-up that follows, so
+        // opening the console on press would need the button held down.
+        (() => {
+          var _el$8 = _$createElement("box"),
+            _el$9 = _$createElement("text"),
+            _el$0 = _$createTextNode(` `),
+            _el$1 = _$createTextNode(` `),
+            _el$10 = _$createElement("span");
+          _$insertNode(_el$8, _el$9);
+          _$setProp(_el$8, "flexDirection", "row");
+          _$setProp(_el$8, "onMouseUp", () => props.onOpen(shell.id));
+          _$insert(_el$8, _$createComponent(Badge, {
+            get api() {
+              return props.api;
+            },
+            shell: shell,
+            get frame() {
+              return props.store.frame();
+            }
+          }), _el$9);
+          _$insertNode(_el$9, _el$0);
+          _$insertNode(_el$9, _el$1);
+          _$insertNode(_el$9, _el$10);
+          _$setProp(_el$9, "wrapMode", "none");
+          _$insert(_el$9, () => truncate(shell.title, 20), _el$1);
+          _$insert(_el$10, () => shortDetail(shell, props.store.now()));
+          _$effect(_p$ => {
+            var _v$3 = theme().text,
+              _v$4 = {
+                fg: theme().textMuted
+              };
+            _v$3 !== _p$.e && (_p$.e = _$setProp(_el$9, "fg", _v$3, _p$.e));
+            _v$4 !== _p$.t && (_p$.t = _$setProp(_el$10, "style", _v$4, _p$.t));
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined
+          });
+          return _el$8;
+        })()
+      }), null);
+      _$insert(_el$, _$createComponent(Show, {
+        get when() {
+          return overflow() > 0 || props.store.showAll();
+        },
+        get children() {
+          var _el$7 = _$createElement("text");
+          _$setProp(_el$7, "wrapMode", "none");
+          _$setProp(_el$7, "onMouseUp", () => props.store.toggleAll());
+          _$insert(_el$7, (() => {
+            var _c$ = _$memo(() => !!props.store.showAll());
+            return () => _c$() ? _$memo(() => overflow() > 0)() ? `▾ ${overflow()} more in ${props.consoleShortcut()} console` : "▾ show fewer" : `▸ ${overflow()} more`;
+          })());
+          _$effect(_$p => _$setProp(_el$7, "fg", theme().textMuted, _$p));
+          return _el$7;
+        }
+      }), null);
+      _$effect(_p$ => {
+        var _v$ = theme().text,
+          _v$2 = {
+            fg: theme().textMuted
+          };
+        _v$ !== _p$.e && (_p$.e = _$setProp(_el$2, "fg", _v$, _p$.e));
+        _v$2 !== _p$.t && (_p$.t = _$setProp(_el$5, "style", _v$2, _p$.t));
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined
+      });
+      return _el$;
+    }
+  });
+}