@opencode-cockpit/status 0.3.0

package/dist/core/custom.js

@@ -0,0 +1,125 @@
+import { rmSync } from "node:fs";
+import { homedir } from "node:os";
+import { basename, dirname, extname, isAbsolute, join, resolve } from "node:path";
+import { pathToFileURL } from "node:url";
+
+/**
+ * Your own segments, written in TypeScript.
+ *
+ * The declarative config covers the usual line and a shell command covers anything with a CLI, but
+ * neither can read the session and decide. A module can: it is handed the same snapshot the
+ * built-ins get, and what it returns is placed, coloured, prioritised and collapsed exactly like
+ * one of them.
+ *
+ * A module default-exports its segments by name:
+ *
+ *   import type { StatusContext } from "@opencode-cockpit/status/segment"
+ *
+ *   export default {
+ *     segments: {
+ *       burn: (ctx: StatusContext) => {
+ *         const mins = (ctx.now - (ctx.session?.startedAt ?? ctx.now)) / 60000
+ *         if (!ctx.session?.priced || mins < 1) return undefined
+ *         return { text: `$${(ctx.session.cost / mins).toFixed(2)}/min`, tone: "warning" }
+ *       },
+ *     },
+ *   }
+ *
+ * and the name is then usable in the config like any built-in: `"segments": ["burn"]`.
+ */
+
+/** What a module's segment function is handed and what it may return. */
+
+/** `~/x`, an absolute path, or one relative to the project. */
+export function resolveModulePath(path, directory, home = homedir()) {
+  if (path.startsWith("~/")) return resolve(home, path.slice(2));
+  if (isAbsolute(path)) return path;
+  return resolve(directory, path);
+}
+const DEFAULT_PRIORITY = 45;
+
+/** The specifier a module is written against, which is the whole point of the failure below. */
+const AUTHORING = "@opencode-cockpit/status/segment";
+
+/**
+ * Loading a module that lives outside a project.
+ *
+ * A statusline module belongs next to the config it serves, and the natural home for that is
+ * `~/.config/opencode-cockpit/`. But a bare import resolves from the importing file's own
+ * directory, and a config directory has no `node_modules` -- so every example in our own README
+ * fails for exactly the people the README is written for, and its segments vanish from the line
+ * with only a start-up toast to say why.
+ *
+ * The specifier resolves perfectly well from *this* file, so the fallback rewrites it to that
+ * resolved path and imports a copy placed beside the original, where the module's own relative
+ * imports still work. Only on failure: a module inside a project that installed the bay never
+ * takes this path.
+ */
+async function importWithAuthoring(full) {
+  const resolved = Bun.resolveSync("./authoring.ts", import.meta.dir);
+  const source = await Bun.file(full).text();
+  const patched = source.replaceAll(AUTHORING, pathToFileURL(resolved).href);
+  if (patched === source) throw new Error(`does not import ${AUTHORING}`);
+
+  // Beside the original, so `./helpers.ts` next to a module keeps resolving.
+  const shim = join(dirname(full), `.${basename(full, extname(full))}.cockpit.${extname(full).slice(1)}`);
+  try {
+    await Bun.write(shim, patched);
+    return await import(`${shim}?t=${Date.now()}`);
+  } finally {
+    rmSync(shim, {
+      force: true
+    });
+  }
+}
+export async function loadCustomSegments(paths, directory, importer = path => import(path)) {
+  const segments = new Map();
+  const errors = [];
+  for (const path of paths) {
+    const full = resolveModulePath(path, directory);
+    try {
+      let loaded;
+      try {
+        loaded = await importer(full);
+      } catch (err) {
+        // Only the one failure is worth retrying; anything else is the module's own problem.
+        const message = err instanceof Error ? err.message : String(err);
+        if (!message.includes(AUTHORING)) throw err;
+        loaded = await importWithAuthoring(full);
+      }
+      const module = loaded.default ?? loaded;
+      for (const [name, entry] of Object.entries(module.segments ?? {})) {
+        const render = typeof entry === "function" ? entry : entry.render;
+        if (typeof render !== "function") {
+          errors.push(`${path}: segment "${name}" is not a function`);
+          continue;
+        }
+        const priority = typeof entry === "function" ? DEFAULT_PRIORITY : entry.priority ?? DEFAULT_PRIORITY;
+        segments.set(name, {
+          name,
+          priority,
+          render(ctx, config) {
+            const value = render(ctx, config);
+            if (value === undefined) return undefined;
+            if (typeof value === "string") return value ? {
+              text: value,
+              tone: "muted"
+            } : undefined;
+            if ("runs" in value) return value.runs.length > 0 ? value : undefined;
+            return value.text ? {
+              text: value.text,
+              tone: value.tone ?? "muted",
+              color: value.color
+            } : undefined;
+          }
+        });
+      }
+    } catch (err) {
+      errors.push(`${path}: ${err instanceof Error ? err.message : String(err)}`);
+    }
+  }
+  return {
+    segments,
+    errors
+  };
+}

package/dist/core/format.js

@@ -0,0 +1,156 @@
+/** Formatting for a line where every column costs something. */
+
+/** 1234 → "1.2k", 1_200_000 → "1.2M". Whole numbers below 1000 stay as they are. */
+export function compact(n) {
+  const abs = Math.abs(n);
+  if (abs < 1000) return String(Math.round(n));
+  if (abs < 1_000_000) return `${trim(n / 1000)}k`;
+  if (abs < 1_000_000_000) return `${trim(n / 1_000_000)}M`;
+  return `${trim(n / 1_000_000_000)}B`;
+}
+function trim(n) {
+  const one = n.toFixed(1);
+  return one.endsWith(".0") ? one.slice(0, -2) : one;
+}
+
+/**
+ * Money, at the precision the amount deserves: cents matter at $0.42, they do not at $124.
+ * Sub-cent spend reads as "<$0.01" rather than "$0.00", which looks like nothing was spent.
+ */
+export function money(amount, currency = "$") {
+  if (amount <= 0) return `${currency}0`;
+  if (amount < 0.01) return `<${currency}0.01`;
+  if (amount < 100) return `${currency}${amount.toFixed(2)}`;
+  return `${currency}${Math.round(amount)}`;
+}
+
+/** "4s", "3m", "2h 5m" — a statusline has no room for "2 hours, 5 minutes". */
+export function duration(ms) {
+  const s = Math.max(0, Math.floor(ms / 1000));
+  if (s < 60) return `${s}s`;
+  const m = Math.floor(s / 60);
+  if (m < 60) return `${m}m`;
+  const h = Math.floor(m / 60);
+  const rest = m % 60;
+  return rest === 0 ? `${h}h` : `${h}h ${rest}m`;
+}
+
+/** A percentage with no decimal point, because the last digit never changes a decision. */
+export function percent(ratio) {
+  return `${Math.round(ratio * 100)}%`;
+}
+const BLOCKS = ["", "▏", "▎", "▍", "▌", "▋", "▊", "▉"];
+
+/** A fractional bar: "███▌  ". Width is in cells, and the result is always exactly that wide. */
+export function bar(ratio, width) {
+  const w = Math.max(0, Math.floor(width));
+  if (w === 0) return "";
+  const clamped = Math.min(1, Math.max(0, ratio));
+  const exact = clamped * w;
+  const full = Math.floor(exact);
+  const part = BLOCKS[Math.floor((exact - full) * BLOCKS.length)] ?? "";
+  return `${"█".repeat(full)}${part}`.padEnd(w, " ").slice(0, w);
+}
+
+/**
+ * The path as a person would say it: "" at the worktree root, "src/tui" inside it, "~/other"
+ * elsewhere under home, and the plain path otherwise.
+ */
+export function shortPath(directory, worktree, home) {
+  const trim = p => p.replace(/\/+$/, "");
+  const dir = trim(directory);
+  const root = trim(worktree);
+  if (dir === root) return basename(root);
+  if (root && dir.startsWith(`${root}/`)) return dir.slice(root.length + 1);
+  const h = trim(home);
+  if (h && dir === h) return "~";
+  if (h && dir.startsWith(`${h}/`)) return `~/${dir.slice(h.length + 1)}`;
+  return dir;
+}
+export function basename(path) {
+  const parts = path.replace(/\/+$/, "").split("/");
+  return parts[parts.length - 1] || path;
+}
+
+/**
+ * Model ids carry a vendor prefix and a date nobody reads at a glance
+ * ("anthropic/claude-opus-5-20260101" → "claude-opus-5").
+ */
+export function shortModel(modelID) {
+  const tail = modelID.includes("/") ? modelID.split("/").pop() : modelID;
+  return tail.replace(/-\d{8}$/, "").replace(/-latest$/, "");
+}
+
+/**
+ * Cuts from the left, keeping the end. For a path the tail is what identifies it: "…/src/tui"
+ * says where you are, "/Users/me/very/lo…" does not.
+ */
+export function truncateStart(text, max) {
+  if (max <= 0) return "";
+  if (text.length <= max) return text;
+  if (max === 1) return "…";
+  return `…${text.slice(text.length - (max - 1))}`;
+}
+
+/** Cuts to `max` cells, marking the cut. Never returns more than `max`. */
+export function truncate(text, max) {
+  if (max <= 0) return "";
+  if (text.length <= max) return text;
+  if (max === 1) return "…";
+  return `${text.slice(0, max - 1)}…`;
+}
+
+/* --------------------------------------------------------------------- colour */
+
+/** Green, through amber, to red: the gradient a capacity bar is read against. */
+const HEAT = [[46, 204, 113], [241, 196, 15], [231, 76, 60]];
+function hex([r, g, b]) {
+  return `#${[r, g, b].map(n => Math.round(n).toString(16).padStart(2, "0")).join("")}`;
+}
+
+/**
+ * The colour at `t` (0..1) along a gradient, interpolated rather than bucketed. A bar whose cells
+ * step smoothly from green to red reads as a measurement; one that flips between three colours
+ * reads as three states.
+ */
+export function gradient(t, stops = HEAT) {
+  const clamped = Math.min(1, Math.max(0, t));
+  if (stops.length === 0) return "#ffffff";
+  if (stops.length === 1) return hex(stops[0]);
+  const span = 1 / (stops.length - 1);
+  const index = Math.min(stops.length - 2, Math.floor(clamped / span));
+  const from = stops[index];
+  const to = stops[index + 1];
+  const local = (clamped - index * span) / span;
+  return hex([from[0] + (to[0] - from[0]) * local, from[1] + (to[1] - from[1]) * local, from[2] + (to[2] - from[2]) * local]);
+}
+
+/**
+ * "3m42s" while you are watching it, "2d 13h" once you are not.
+ *
+ * Each tier drops the one below as it stops mattering: seconds are worth watching in the first
+ * minute and meaningless after an hour, and "61h48m" is a number nobody converts in their head.
+ */
+export function preciseDuration(ms) {
+  const total = Math.max(0, Math.floor(ms / 1000));
+  const s = total % 60;
+  const m = Math.floor(total / 60) % 60;
+  const h = Math.floor(total / 3600) % 24;
+  const d = Math.floor(total / 86_400);
+  if (d > 0) return h === 0 ? `${d}d` : `${d}d ${h}h`;
+  if (total >= 3600) return `${Math.floor(total / 3600)}h${String(m).padStart(2, "0")}m`;
+  if (m > 0) return `${m}m${String(s).padStart(2, "0")}s`;
+  return `${s}s`;
+}
+
+/**
+ * Filling `{name}` placeholders from a segment's own values.
+ *
+ * This is what a `format` setting runs on. A segment that draws several figures should not also
+ * decide the words between them — "3f +12 -4" suits one line and "+12/-4" another, and neither is
+ * ours to insist on. An unknown placeholder is left as written, so a typo is visible rather than
+ * silently blank.
+ */
+export function template(text, values) {
+  return text.replace(/\{(\w+)\}/g, (whole, name) => name in values ? String(values[name]) : whole);
+}

package/dist/core/render.js

@@ -0,0 +1,88 @@
+import { cutSegment, segmentWidth } from "./segments.js";
+
+/**
+ * Fitting the line to the terminal.
+ *
+ * Every statusline eventually meets a narrow window. Wrapping turns it into noise and a hard cut
+ * loses whichever segments happen to sit on the right, so instead the lowest-priority segments are
+ * dropped until what is left fits — the things you actually need (how full the context is, whether
+ * something is retrying) survive a 60-column terminal, and the decorations do not.
+ */
+
+export function lineWidth(segments, separator) {
+  if (segments.length === 0) return 0;
+  const text = segments.reduce((sum, s) => sum + segmentWidth(s), 0);
+  return text + separator.length * (segments.length - 1);
+}
+export function fit(segments, width, separator) {
+  if (width <= 0) return {
+    segments: [],
+    dropped: segments.length
+  };
+  const kept = [...segments];
+  if (lineWidth(kept, separator) <= width) return {
+    segments: kept,
+    dropped: 0
+  };
+
+  // Drop the least important first; ties break towards the end of the line, so the order a person
+  // wrote their segments in still decides what goes.
+  const order = kept.map((segment, index) => ({
+    segment,
+    index
+  })).sort((a, b) => a.segment.priority - b.segment.priority || b.index - a.index);
+  const doomed = new Set();
+  for (const {
+    segment
+  } of order) {
+    if (lineWidth(kept.filter(s => !doomed.has(s.id)), separator) <= width) break;
+    doomed.add(segment.id);
+  }
+  const survivors = kept.filter(s => !doomed.has(s.id));
+  // Everything was dropped and it still does not fit: keep the most important one, cut to width.
+  if (survivors.length === 0) {
+    const best = order[order.length - 1]?.segment;
+    if (!best) return {
+      segments: [],
+      dropped: segments.length
+    };
+    return {
+      segments: [cutSegment(best, width)],
+      dropped: segments.length - 1
+    };
+  }
+  // A single survivor may still be wider than the terminal.
+  const last = survivors[survivors.length - 1];
+  if (survivors.length === 1 && segmentWidth(last) > width) {
+    return {
+      segments: [cutSegment(last, width)],
+      dropped: doomed.size
+    };
+  }
+  return {
+    segments: survivors,
+    dropped: doomed.size
+  };
+}
+
+/**
+ * Fitting a column. Height is the constraint rather than width, so segments are not merged onto a
+ * row: each takes one, cut to the column's width, and the lowest-priority ones go when there are
+ * more segments than rows.
+ */
+export function fitColumn(segments, width, maxRows) {
+  if (width <= 0 || maxRows <= 0) return {
+    segments: [],
+    dropped: segments.length
+  };
+  const keep = new Set([...segments].map((segment, index) => ({
+    segment,
+    index
+  })).sort((a, b) => b.segment.priority - a.segment.priority || a.index - b.index).slice(0, maxRows).map(({
+    segment
+  }) => segment.id));
+  return {
+    segments: segments.filter(segment => keep.has(segment.id)).map(segment => cutSegment(segment, width)),
+    dropped: segments.length - keep.size
+  };
+}

package/dist/core/segments.js

@@ -0,0 +1,148 @@
+import { BUILTINS } from "./builtins/index.js";
+
+/**
+ * Turning a line's configuration into the segments a surface draws. The segment model itself lives
+ * in `types.ts` and the built-ins in `builtins/`; this file is only the assembly.
+ */
+
+export { BUILTINS };
+export function runsOf(piece) {
+  return "runs" in piece ? piece.runs : [{
+    text: piece.text,
+    tone: piece.tone,
+    color: piece.color
+  }];
+}
+export function segmentText(segment) {
+  return segment.runs.map(run => run.text).join("");
+}
+export function segmentWidth(segment) {
+  let width = 0;
+  for (const run of segment.runs) width += run.text.length;
+  return width;
+}
+
+/** Cuts a segment to `max` cells, keeping each run's styling up to the cut. */
+export function cutSegment(segment, max) {
+  if (max <= 0) return {
+    ...segment,
+    runs: []
+  };
+  const runs = [];
+  let width = 0;
+  for (const run of segment.runs) {
+    if (width >= max) break;
+    const room = max - width;
+    if (run.text.length <= room) {
+      runs.push(run);
+      width += run.text.length;
+      continue;
+    }
+    // The cut lands inside this run: keep what fits, minus a cell for the ellipsis.
+    const text = room <= 1 ? "…" : `${run.text.slice(0, room - 1)}…`;
+    runs.push({
+      ...run,
+      text
+    });
+    width += text.length;
+    break;
+  }
+  return {
+    ...segment,
+    runs
+  };
+}
+const BY_NAME = new Map(BUILTINS.map(def => [def.name, def]));
+
+/**
+ * Names that changed, kept working. `git.diff` read as "what git would tell me", when it has
+ * always been what this session changed.
+ */
+const ALIASES = {
+  "git.diff": "session.diff"
+};
+for (const [from, to] of Object.entries(ALIASES)) {
+  const def = BY_NAME.get(to);
+  if (def) BY_NAME.set(from, def);
+}
+export function findSegment(type) {
+  return BY_NAME.get(type);
+}
+
+/**
+ * Builds the line's segments in order, dropping the ones with nothing to say. An unknown type is
+ * dropped too rather than drawn as an error: a stale config should cost you a segment, not a line.
+ */
+
+export function buildSegments(ctx, configs, options = {}) {
+  // A bare map is accepted so the common case reads as `buildSegments(ctx, configs, custom)`.
+  const {
+    custom,
+    icons = true
+  } = options instanceof Map ? {
+    custom: options
+  } : options;
+  const out = [];
+  const seen = new Map();
+  for (const config of configs) {
+    // Your own segments are looked up first, so a module can replace a built-in by name.
+    const def = custom?.get(config.type) ?? findSegment(config.type);
+    if (!def) continue;
+    let piece;
+    try {
+      piece = def.render(ctx, config);
+    } catch {
+      continue; // a segment that throws costs its own place on the line and nothing else
+    }
+    if (!piece) continue;
+    const wanted = typeof config.color === "string" ? config.color : undefined;
+    const forcedTone = wanted ? toTone(wanted) : undefined;
+    const forcedColor = wanted && isLiteralColor(wanted) ? wanted : undefined;
+    const runs = runsOf(piece).filter(run => run.text.length > 0);
+    if (runs.length === 0) continue;
+    const icon = typeof config.icon === "string" ? config.icon : icons ? def.icon : undefined;
+    const prefix = typeof config.prefix === "string" ? config.prefix : "";
+    const suffix = typeof config.suffix === "string" ? config.suffix : "";
+    // The icon gets its own run so it can be dimmed apart from the value it labels.
+    if (icon) runs.unshift({
+      text: `${icon} `,
+      tone: runs[0]?.tone,
+      dim: true
+    });
+    if (prefix) runs.unshift({
+      text: prefix,
+      tone: runs[0]?.tone
+    });
+    if (suffix) runs.push({
+      text: suffix,
+      tone: runs[runs.length - 1]?.tone
+    });
+
+    // A colour named on the segment overrides every run in it, icon included; that is what makes
+    // `{"type": "cost", "color": "#ff8800"}` do what it looks like it should.
+    const styled = forcedTone || forcedColor ? runs.map(run => ({
+      ...run,
+      ...(forcedTone ? {
+        tone: forcedTone
+      } : {}),
+      ...(forcedColor ? {
+        color: forcedColor
+      } : {})
+    })) : runs;
+    const count = (seen.get(config.type) ?? 0) + 1;
+    seen.set(config.type, count);
+    out.push({
+      id: count === 1 ? config.type : `${config.type}#${count}`,
+      runs: styled,
+      priority: typeof config.priority === "number" ? config.priority : def.priority
+    });
+  }
+  return out;
+}
+const TONES = new Set(["text", "muted", "accent", "success", "warning", "error", "info"]);
+function toTone(value) {
+  return TONES.has(value) ? value : undefined;
+}
+function isLiteralColor(value) {
+  return /^#[0-9a-f]{3}([0-9a-f]{3})?$/i.test(value);
+}

package/dist/core/types.js

@@ -0,0 +1 @@
+export {};

package/dist/tui/components/statusline.js

@@ -0,0 +1,135 @@
+import { insertNode as _$insertNode } from "@opentui/solid";
+import { memo as _$memo } from "@opentui/solid";
+import { effect as _$effect } 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 { For, Show } from "solid-js";
+
+/**
+ * One line of segments, each segment a list of styled runs. Colour comes from the running theme
+ * rather than literals, so the line belongs to whatever theme the user has chosen — a statusline
+ * in someone else's palette is the first thing that makes a plugin look bolted on.
+ */
+
+/**
+ * Theme colours are RGBA objects, and OpenTUI wants the object. Stringifying one yields garbage
+ * that the renderer falls back to magenta on, which is how the whole line once came out pink.
+ */
+
+export function toneColour(theme, tone) {
+  switch (tone) {
+    case "accent":
+      return theme.accent;
+    case "success":
+      return theme.success;
+    case "warning":
+      return theme.warning;
+    case "error":
+      return theme.error;
+    case "info":
+      return theme.info;
+    case "muted":
+      return theme.textMuted;
+    case "background":
+      return theme.background;
+    case "panel":
+      return theme.backgroundPanel;
+    case "border":
+      return theme.borderSubtle;
+    default:
+      return theme.text;
+  }
+}
+
+/** A run's own colour wins over its tone; a dim run falls back to the muted colour. */
+function runStyle(theme, run) {
+  const fg = run.color ?? toneColour(theme, run.dim ? "muted" : run.tone);
+  const bg = run.bg ?? (run.bgTone ? toneColour(theme, run.bgTone) : undefined);
+  return bg ? {
+    fg,
+    bg
+  } : {
+    fg
+  };
+}
+export function StatusLine(props) {
+  const theme = () => props.api.theme.current;
+  const down = () => props.stack === "vertical";
+  return (() => {
+    var _el$ = _$createElement("box");
+    _$setProp(_el$, "flexShrink", 0);
+    _$insert(_el$, _$createComponent(For, {
+      get each() {
+        return props.segments();
+      },
+      children: (segment, index) => [_$createComponent(Show, {
+        get when() {
+          return _$memo(() => !!(index() > 0 && !down()))() && props.separator.length > 0;
+        },
+        get children() {
+          var _el$2 = _$createElement("text");
+          _$setProp(_el$2, "wrapMode", "none");
+          _$setProp(_el$2, "flexShrink", 0);
+          _$insert(_el$2, () => props.separator);
+          _$effect(_$p => _$setProp(_el$2, "fg", theme().borderSubtle, _$p));
+          return _el$2;
+        }
+      }), (() => {
+        var _el$3 = _$createElement("text");
+        _$setProp(_el$3, "wrapMode", "none");
+        _$setProp(_el$3, "flexShrink", 0);
+        _$insert(_el$3, _$createComponent(For, {
+          get each() {
+            return segment.runs;
+          },
+          children: run => _$createComponent(Show, {
+            get when() {
+              return run.bold;
+            },
+            get fallback() {
+              return (() => {
+                var _el$6 = _$createElement("span");
+                _$insert(_el$6, () => run.text);
+                _$effect(_$p => _$setProp(_el$6, "style", runStyle(theme(), run), _$p));
+                return _el$6;
+              })();
+            },
+            get children() {
+              var _el$4 = _$createElement("span"),
+                _el$5 = _$createElement("b");
+              _$insertNode(_el$4, _el$5);
+              _$insert(_el$5, () => run.text);
+              _$effect(_$p => _$setProp(_el$4, "style", runStyle(theme(), run), _$p));
+              return _el$4;
+            }
+          })
+        }));
+        return _el$3;
+      })()]
+    }));
+    _$effect(_p$ => {
+      var _v$ = down() ? "column" : "row",
+        _v$2 = props.paddingLeft ?? 1,
+        _v$3 = props.paddingRight ?? 1,
+        _v$4 = props.paddingTop ?? 0,
+        _v$5 = props.paddingBottom ?? 0;
+      _v$ !== _p$.e && (_p$.e = _$setProp(_el$, "flexDirection", _v$, _p$.e));
+      _v$2 !== _p$.t && (_p$.t = _$setProp(_el$, "paddingLeft", _v$2, _p$.t));
+      _v$3 !== _p$.a && (_p$.a = _$setProp(_el$, "paddingRight", _v$3, _p$.a));
+      _v$4 !== _p$.o && (_p$.o = _$setProp(_el$, "paddingTop", _v$4, _p$.o));
+      _v$5 !== _p$.i && (_p$.i = _$setProp(_el$, "paddingBottom", _v$5, _p$.i));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined,
+      i: undefined
+    });
+    return _el$;
+  })();
+}