opencode-livetrace 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Ben Lambert
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,92 @@
-# Temporary Holding Version
+# opencode-livetrace
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+An OpenCode v2 TUI plugin that shows what the model is doing right now in the
+prompt footer, and the current session's activity counts in the sidebar.
+
+While a run is active, the footer shows the current phase and how long it has
+lasted, just before OpenCode's context size:
+
+<img src="docs/footer.png" width="771" alt="The footer through one run: waiting, thinking, running a read tool, writing, then idle, each with the context size">
+
+*The footer through one run: waiting, thinking, running a tool, writing, and
+idle.*
+
+| Indicator     | Phase                                                |
+|---------------|------------------------------------------------------|
+| `1.2s ◌`      | Waiting for the model (request sent, no output yet)  |
+| `4.2s ✦`      | Thinking (streaming reasoning)                       |
+| `0.8s ✎`      | Writing (streaming reply text)                       |
+| `read 2.1s ⚒` | Calling or running a tool                            |
+
+It's hidden when the session is idle and during retry backoff.
+
+When the sidebar is open, it gets an "Activity" section with the counts, below
+OpenCode's "Context" section:
+
+<img src="docs/sidebar.png" width="403" alt="Sidebar Context section followed by the Activity section listing turns, steps, tools, and thoughts">
+
+| Symbol | Count    | Meaning                                         |
+|--------|----------|-------------------------------------------------|
+| `⏎`    | Turns    | Your messages                                   |
+| `↻`    | Steps    | Model calls                                     |
+| `⚒`    | Tools    | Tool calls made by the model                    |
+| `✦`    | Thoughts | Reasoning blocks                                |
+
+A turn with two tool calls followed by a reply is three steps.
+
+Screenshots are tmux captures rendered to PNG; glyph shapes depend on your
+terminal font.
+
+## Install
+
+    opencode plugin add opencode-livetrace
+
+Restart OpenCode to load it.
+
+## Development
+
+Build the bundle into `dist/`, which the package's `exports` point at:
+
+    bun install
+    bun run build
+
+Then add the repo's absolute path to the `plugins` array in
+`~/.config/opencode/opencode.json`, and rebuild after each change:
+
+```json
+{
+  "plugins": ["/path/to/opencode-livetrace"]
+}
+```
+
+Alternatively, OpenCode discovers directories (or symlinks to directories)
+under `~/.config/opencode/plugins/` or `<project>/.opencode/plugins/` without
+any config entry. Use one method, not both: the paths differ, so the plugin
+would load twice.
+
+To publish, bump `version` in `package.json` and run `npm publish`; the
+`prepublishOnly` script rebuilds `dist/` first.
+
+## How It Works
+
+- `src/tui.tsx` appends the phase indicator to the `prompt.footer.status` slot
+  (after the built-in status) and the counts to the `sidebar.content` slot.
+- `src/server.ts` is a no-op server entry. Plugins listed in `opencode.json` are
+  loaded by the server first, and one without a server entry never reaches
+  the TUI.
+- `src/phase.ts` tracks the live phase per session from step, text, reasoning,
+  tool, retry, and execution events, timed from each event's `created`
+  timestamp.
+- Full counts come from the message API (`type: "user"` and
+  `type: "assistant"`, counting `tool` and `reasoning` content parts), paging
+  through the full history, since the TUI's message store holds only the most
+  recent messages.
+- While a run streams, step, tool, and reasoning events bump the counts
+  directly; a full recount (debounced) runs when a run starts or ends, and
+  after reverts and compactions.
+- OpenCode applies the Solid JSX transform only to plugin files outside
+  `node_modules`, so an installed package must ship compiled JS. `build.ts`
+  bundles `src/` with OpenTUI's Solid plugin, leaving `solid-js` and
+  `@opentui/*` external so they resolve to OpenCode's own runtime.
+
+Tested with OpenCode 2.2.6.

package/dist/server.js

@@ -0,0 +1,6 @@
+// @bun
+// src/server.ts
+var server_default = { id: "opencode-livetrace", setup() {} };
+export {
+  server_default as default
+};

package/dist/tui.js

@@ -0,0 +1,252 @@
+// @bun
+// src/tui.tsx
+import { createTextNode as _$createTextNode } from "@opentui/solid";
+import { effect as _$effect } from "@opentui/solid";
+import { insertNode as _$insertNode } from "@opentui/solid";
+import { insert as _$insert } from "@opentui/solid";
+import { setProp as _$setProp } from "@opentui/solid";
+import { createElement as _$createElement } from "@opentui/solid";
+import { createComponent as _$createComponent } from "@opentui/solid";
+import { createEffect, createSignal as createSignal2, on, Show } from "solid-js";
+
+// src/phase.ts
+import { createSignal } from "solid-js";
+var GLYPH = { wait: "\u25CC", think: "\u2726", write: "\u270E", tool: "\u2692" };
+var WAIT = ["session.execution.started", "session.step.started", "session.compaction.started"];
+var DONE = [
+  "session.step.failed",
+  "session.execution.succeeded",
+  "session.execution.failed",
+  "session.execution.interrupted",
+  "session.idle"
+];
+function trackPhases(on) {
+  const [live, setLive] = createSignal({});
+  const [now, setNow] = createSignal(Date.now());
+  let tick;
+  const set = (id, p) => {
+    setNow(Date.now());
+    setLive(({ [id]: _, ...rest }) => p ? { ...rest, [id]: p } : rest);
+    const active = Object.keys(live()).length > 0;
+    if (active && !tick)
+      tick = setInterval(() => setNow(Date.now()), 100);
+    if (!active && tick) {
+      clearInterval(tick);
+      tick = undefined;
+    }
+  };
+  const enter = (kind) => (e) => {
+    const id = e.data?.sessionID;
+    if (!id || kind !== "tool" && live()[id]?.kind === kind)
+      return;
+    const since = Math.min(e.created ?? Infinity, Date.now());
+    set(id, { kind, since, tool: kind === "tool" ? e.data?.name : undefined });
+  };
+  const wait = enter("wait");
+  const offs = [
+    ...WAIT.map((t) => on(t, wait)),
+    on("session.step.ended", (e) => live()[e.data?.sessionID ?? ""]?.kind !== "tool" && wait(e)),
+    on("session.tool.success", wait),
+    on("session.tool.failed", wait),
+    on("session.reasoning.started", enter("think")),
+    on("session.text.started", enter("write")),
+    on("session.tool.input.started", enter("tool")),
+    on("session.tool.called", enter("tool")),
+    on("session.retry.scheduled", (e) => {
+      const id = e.data?.sessionID;
+      if (id)
+        set(id, { kind: "wait", since: e.data?.at ?? e.created ?? Date.now() });
+    }),
+    ...DONE.map((t) => on(t, (e) => e.data?.sessionID && set(e.data.sessionID)))
+  ];
+  return {
+    get: (id) => {
+      const p = id ? live()[id] : undefined;
+      return p && now() >= p.since ? { ...p, elapsed: now() - p.since } : undefined;
+    },
+    dispose: () => {
+      offs.forEach((off) => off());
+      clearInterval(tick);
+    }
+  };
+}
+function fmt(ms) {
+  const s = ms / 1000;
+  if (s < 60)
+    return `${s.toFixed(1)}s`;
+  return `${Math.floor(s / 60)}m${String(Math.floor(s % 60)).padStart(2, "0")}s`;
+}
+
+// src/tui.tsx
+var BUMPS = {
+  "session.step.started": "steps",
+  "session.tool.input.started": "tools",
+  "session.reasoning.started": "thoughts"
+};
+var RESYNC = ["session.execution.started", "session.execution.succeeded", "session.execution.failed", "session.execution.interrupted", "session.revert.committed", "session.compaction.ended"];
+var ROWS = [["turns", "\u23CE", "Turns"], ["steps", "\u21BB", "Steps"], ["tools", "\u2692", "Tools"], ["thoughts", "\u2726", "Thoughts"]];
+var PAGE = 200;
+var DEBOUNCE_MS = 250;
+var tui_default = {
+  id: "opencode-livetrace",
+  setup(ctx) {
+    const [counts, setCounts] = createSignal2({});
+    const timers = new Map;
+    const refresh = async (id) => {
+      const [users, steps] = await Promise.all([fetchAll(ctx, id, "user"), fetchAll(ctx, id, "assistant")]);
+      const parts = steps.flatMap((m) => m.content ?? []);
+      const n = (type) => parts.filter((p) => p.type === type).length;
+      setCounts((c) => ({
+        ...c,
+        [id]: {
+          turns: users.length,
+          steps: steps.length,
+          tools: n("tool"),
+          thoughts: n("reasoning")
+        }
+      }));
+    };
+    const schedule = (id) => {
+      clearTimeout(timers.get(id));
+      timers.set(id, setTimeout(() => {
+        timers.delete(id);
+        refresh(id);
+      }, DEBOUNCE_MS));
+    };
+    const bump = (id, key) => setCounts((c) => ({
+      ...c,
+      [id]: {
+        ...c[id],
+        [key]: c[id][key] + 1
+      }
+    }));
+    const tracked = (fn) => (e) => {
+      const id = e.data?.sessionID;
+      if (id && id in counts())
+        fn(id);
+    };
+    const phases = trackPhases(ctx.data.on);
+    const offs = [...Object.entries(BUMPS).map(([type, key]) => ctx.data.on(type, tracked((id) => bump(id, key)))), ...RESYNC.map((type) => ctx.data.on(type, tracked(schedule)))];
+    const watch = (input) => {
+      createEffect(on(() => input.sessionID, (id) => {
+        if (!id || id in counts())
+          return;
+        setCounts((c) => ({
+          ...c,
+          [id]: {
+            turns: 0,
+            steps: 0,
+            tools: 0,
+            thoughts: 0
+          }
+        }));
+        refresh(id);
+      }));
+      return () => input.sessionID ? counts()[input.sessionID] : undefined;
+    };
+    const unslots = [ctx.ui.slot({
+      append: "prompt.footer.status",
+      render: (input) => {
+        const phase = () => phases.get(input.sessionID);
+        const {
+          feedback
+        } = ctx.theme.text;
+        return _$createComponent(Show, {
+          get when() {
+            return phase();
+          },
+          children: (p) => (() => {
+            var _el$ = _$createElement("text"), _el$2 = _$createElement("span"), _el$3 = _$createElement("span");
+            _$insertNode(_el$, _el$2);
+            _$insertNode(_el$, _el$3);
+            _$setProp(_el$, "wrapMode", "none");
+            _$setProp(_el$, "flexShrink", 0);
+            _$insert(_el$2, () => `${p().tool ? `${p().tool} ` : ""}${fmt(p().elapsed)} `);
+            _$insert(_el$3, () => GLYPH[p().kind]);
+            _$effect((_p$) => {
+              var _v$ = {
+                fg: ctx.theme.text.muted
+              }, _v$2 = {
+                fg: p().kind === "wait" ? feedback.warning.base : feedback.success.base
+              };
+              _v$ !== _p$.e && (_p$.e = _$setProp(_el$2, "style", _v$, _p$.e));
+              _v$2 !== _p$.t && (_p$.t = _$setProp(_el$3, "style", _v$2, _p$.t));
+              return _p$;
+            }, {
+              e: undefined,
+              t: undefined
+            });
+            return _el$;
+          })()
+        });
+      }
+    }), ctx.ui.slot({
+      append: "sidebar.content",
+      render: (input) => {
+        const stats = watch(input);
+        return _$createComponent(Show, {
+          get when() {
+            return stats();
+          },
+          children: (s) => (() => {
+            var _el$4 = _$createElement("box"), _el$5 = _$createElement("text"), _el$6 = _$createElement("b");
+            _$insertNode(_el$4, _el$5);
+            _$insertNode(_el$5, _el$6);
+            _$insertNode(_el$6, _$createTextNode(`Activity`));
+            _$insert(_el$4, () => ROWS.map(([key, sym, name]) => (() => {
+              var _el$8 = _$createElement("box"), _el$9 = _$createElement("text"), _el$0 = _$createElement("text");
+              _$insertNode(_el$8, _el$9);
+              _$insertNode(_el$8, _el$0);
+              _$setProp(_el$8, "flexDirection", "row");
+              _$setProp(_el$8, "justifyContent", "space-between");
+              _$insert(_el$9, name);
+              _$insert(_el$0, () => `${s()[key]} ${sym}`);
+              _$effect((_p$) => {
+                var _v$3 = ctx.theme.text.muted, _v$4 = ctx.theme.text.muted;
+                _v$3 !== _p$.e && (_p$.e = _$setProp(_el$9, "fg", _v$3, _p$.e));
+                _v$4 !== _p$.t && (_p$.t = _$setProp(_el$0, "fg", _v$4, _p$.t));
+                return _p$;
+              }, {
+                e: undefined,
+                t: undefined
+              });
+              return _el$8;
+            })()), null);
+            _$effect((_$p) => _$setProp(_el$5, "fg", ctx.theme.text.base, _$p));
+            return _el$4;
+          })()
+        });
+      }
+    })];
+    return () => {
+      phases.dispose();
+      unslots.forEach((off) => off());
+      offs.forEach((off) => off());
+      timers.forEach(clearTimeout);
+    };
+  }
+};
+async function fetchAll(ctx, sessionID, type) {
+  const rows = [];
+  let cursor;
+  while (true) {
+    const page = await ctx.client.message.list({
+      sessionID,
+      type,
+      limit: PAGE,
+      ...cursor ? {
+        cursor
+      } : {
+        order: "asc"
+      }
+    });
+    const data = page.data ?? [];
+    rows.push(...data);
+    cursor = page.cursor?.next ?? undefined;
+    if (!cursor || data.length < PAGE)
+      return rows;
+  }
+}
+export {
+  tui_default as default
+};

package/package.json

@@ -1,6 +1,37 @@
 {
   "name": "opencode-livetrace",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "OpenCode v2 TUI plugin that shows session activity counts and a live phase indicator in the footer and sidebar.",
+  "type": "module",
+  "exports": {
+    "./server": "./dist/server.js",
+    "./tui": "./dist/tui.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "bun build.ts",
+    "prepublishOnly": "bun run build"
+  },
+  "keywords": [
+    "opencode",
+    "opencode-plugin",
+    "tui"
+  ],
+  "author": "Ben Lambert",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/belambert/opencode-livetrace.git"
+  },
+  "homepage": "https://github.com/belambert/opencode-livetrace#readme",
+  "bugs": {
+    "url": "https://github.com/belambert/opencode-livetrace/issues"
+  },
+  "devDependencies": {
+    "@opentui/core": "^0.8.3",
+    "@opentui/solid": "^0.8.3",
+    "solid-js": "^1.9.18"
+  }
+}