@opencode-cockpit/shell 0.1.4 → 0.2.0

package/dist/tui/components/dock.js

@@ -0,0 +1,270 @@
+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 { displayCommand, kindColor, kindOf, statusDetail, tailLines, tailRuns, truncate, watchColor, watchLabel } from "../lib/view.js";
+import { useScreen } from "../state/store.js";
+import { Badge } from "./badge.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 bodyCols = () => Math.max(10, dims().width - 4);
+  const body = createMemo(() => tailLines(screen()?.text, bodyRows(), bodyCols()));
+  const bodyRuns = createMemo(() => props.colors === false ? [] : tailRuns(screen()?.styled, bodyRows(), bodyCols()));
+  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");
+        _$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));
+        _$insert(_el$13, _$createComponent(Show, {
+          get when() {
+            return bodyRuns().length > 0;
+          },
+          get fallback() {
+            return (() => {
+              var _el$19 = _$createElement("text");
+              _$setProp(_el$19, "wrapMode", "none");
+              _$insert(_el$19, () => body() || " ");
+              _$effect(_$p => _$setProp(_el$19, "fg", theme().text, _$p));
+              return _el$19;
+            })();
+          },
+          get children() {
+            var _el$14 = _$createElement("box");
+            _$setProp(_el$14, "flexDirection", "column");
+            _$insert(_el$14, _$createComponent(For, {
+              get each() {
+                return bodyRuns();
+              },
+              children: row => (() => {
+                var _el$20 = _$createElement("text"),
+                  _el$21 = _$createTextNode(` `);
+                _$insertNode(_el$20, _el$21);
+                _$setProp(_el$20, "wrapMode", "none");
+                _$insert(_el$20, _$createComponent(For, {
+                  each: row,
+                  children: run => (() => {
+                    var _el$22 = _$createElement("span");
+                    _$insert(_el$22, () => run.text);
+                    _$effect(_$p => _$setProp(_el$22, "style", {
+                      fg: run.fg,
+                      bg: run.bg,
+                      bold: run.bold,
+                      italic: run.italic
+                    }, _$p));
+                    return _el$22;
+                  })()
+                }), _el$21);
+                _$effect(_$p => _$setProp(_el$20, "fg", theme().text, _$p));
+                return _el$20;
+              })()
+            }));
+            return _el$14;
+          }
+        }));
+        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 watchLabel(shell());
+          },
+          get children() {
+            var _el$17 = _$createElement("text");
+            _$setProp(_el$17, "wrapMode", "none");
+            _$setProp(_el$17, "flexShrink", 0);
+            _$insert(_el$17, () => watchLabel(shell()));
+            _$effect(_$p => _$setProp(_el$17, "fg", watchColor(theme(), shell()), _$p));
+            return _el$17;
+          }
+        }), null);
+        _$insert(_el$15, _$createComponent(Show, {
+          get when() {
+            return _$memo(() => kindOf(shell()) === "fail")() && shell().summary;
+          },
+          get fallback() {
+            return (() => {
+              var _el$23 = _$createElement("text");
+              _$setProp(_el$23, "wrapMode", "none");
+              _$insert(_el$23, () => truncate(`$ ${displayCommand(shell())}`, Math.max(20, dims().width - 40)));
+              _$effect(_$p => _$setProp(_el$23, "fg", theme().textMuted, _$p));
+              return _el$23;
+            })();
+          },
+          get children() {
+            var _el$18 = _$createElement("text");
+            _$setProp(_el$18, "wrapMode", "none");
+            _$insert(_el$18, () => truncate(`${shell().summary}`, Math.max(20, dims().width - 40)));
+            _$effect(_$p => _$setProp(_el$18, "fg", theme().error, _$p));
+            return _el$18;
+          }
+        }), 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/components/sidebar.js

@@ -0,0 +1,136 @@
+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 { kindOf, shortDetail, truncate, watchColor, watchLabel } from "../lib/view.js";
+import { Badge } from "./badge.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()));
+          _$insert(_el$9, _$createComponent(Show, {
+            get when() {
+              return watchLabel(shell);
+            },
+            get children() {
+              var _el$11 = _$createElement("span"),
+                _el$12 = _$createTextNode(` `);
+              _$insertNode(_el$11, _el$12);
+              _$insert(_el$11, () => watchLabel(shell), null);
+              _$effect(_$p => _$setProp(_el$11, "style", {
+                fg: watchColor(theme(), shell)
+              }, _$p));
+              return _el$11;
+            }
+          }), null);
+          _$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$;
+    }
+  });
+}

package/dist/tui/dialogs.js

@@ -0,0 +1,163 @@
+import { createComponent as _$createComponent } from "@opentui/solid";
+/** @jsxImportSource @opentui/solid */
+
+import { rmSync } from "node:fs";
+import pkg from "../../package.json" with { type: "json" };
+import { cacheDirFor, fetchLatestVersion, isNewer, shouldCheck } from "./lib/update.js";
+import { BADGE_LABEL, displayCommand, kindOf, order } from "./lib/view.js";
+const PACKAGE_NAME = pkg.name;
+
+/** One quiet registry check a day; a newer release is announced once per version. */
+export async function announceUpdate(api, meta, current) {
+  if (meta.source !== "npm") return;
+  const now = Date.now();
+  if (!shouldCheck(api.kv.get("cockpit.update.checkedAt", undefined), now)) return;
+  api.kv.set("cockpit.update.checkedAt", now);
+  const latest = await fetchLatestVersion(PACKAGE_NAME);
+  if (!latest || !isNewer(latest, current)) return;
+  if (api.kv.get("cockpit.update.announced", "") === latest) return;
+  api.kv.set("cockpit.update.announced", latest);
+  api.ui.toast({
+    variant: "info",
+    title: "opencode-cockpit",
+    message: `${latest} is available (you have ${current}). Run /cockpit-update.`,
+    duration: 10_000
+  });
+}
+
+/** Clears this plugin's cache entry so the next OpenCode start installs the newer release. */
+export function offerUpdate(api, meta, current) {
+  const dir = cacheDirFor(meta.target, meta.source);
+  if (!dir) {
+    api.ui.toast({
+      variant: "info",
+      title: "opencode-cockpit",
+      message: meta.source === "file" ? `Running from ${meta.target} — update it with git, not npm.` : "This install is not managed by OpenCode's plugin installer."
+    });
+    return;
+  }
+  void fetchLatestVersion(PACKAGE_NAME).then(latest => {
+    if (latest && !isNewer(latest, current)) {
+      api.ui.toast({
+        variant: "success",
+        title: "opencode-cockpit",
+        message: `${current} is the latest release.`
+      });
+      return;
+    }
+    const DialogConfirm = api.ui.DialogConfirm;
+    api.ui.dialog.replace(() => _$createComponent(DialogConfirm, {
+      title: latest ? `Update to ${latest}?` : "Reinstall this plugin?",
+      message: `Removes the cached copy in ${dir}. OpenCode installs the new version the next time it starts, so restart it afterwards.`,
+      onConfirm: () => {
+        api.ui.dialog.clear();
+        try {
+          rmSync(dir, {
+            recursive: true,
+            force: true
+          });
+          api.ui.toast({
+            variant: "success",
+            title: "opencode-cockpit",
+            message: `Cached ${current} removed — restart OpenCode to install ${latest ?? "the latest release"}.`,
+            duration: 10_000
+          });
+        } catch (err) {
+          api.ui.toast({
+            variant: "error",
+            title: "opencode-cockpit",
+            message: String(err)
+          });
+        }
+      },
+      onCancel: () => api.ui.dialog.clear()
+    }));
+  });
+}
+export 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()
+  }));
+}
+export 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()
+  }));
+}
+export 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)
+  }));
+}