opencode-plugin-context 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 opencode-plugin-usage contributors
+
+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

@@ -0,0 +1,118 @@
+# opencode-plugin-context
+
+An OpenCode **TUI plugin** that replaces the built-in sidebar context block with a
+colored, segmented bar of the current session's **context-window usage**.
+
+The whole bar is the model's context window. Colors show what's using it —
+**cached** prompt, **prompt** (uncached input incl. cache writes), **thinking**
+(reasoning tokens), **output**, and the model's **reserved output** headroom —
+plus the numbers you already track: total tokens used and money spent.
+
+```
+Context
+━━━━━━━━━━━━━━━━━ 69%
+138k / 200k tokens
+$0.04 spent
+▍c40k ▍p90k ▍t5k ▍o3k ▍r5k ▍f57k
+```
+
+One color-coded legend row follows the bar — `▍` marker in the segment's color,
+then a muted letter + count. Colors follow the active theme:
+
+| Segment            | Legend | Theme color | Default look          |
+| ------------------ | ------ | ----------- | --------------------- |
+| cached input       | `c`    | `success`   | green                 |
+| prompt (uncached input, incl. cache writes) | `p` | `accent` | blue      |
+| thinking (reasoning tokens) | `t`    | `warning`   | amber                 |
+| output             | `o`    | `info`      | cyan                  |
+| reserved output    | `r`    | `textMuted` | grey                  |
+| free space         | `f`    | `text`      | white / default text  |
+
+The bar spans the whole context window and fills the sidebar column: colored
+cells for each segment in that order, then `free` fills the remainder with the
+default text color so the bar always reaches full width. A very small segment
+may not fill a single bar cell (e.g. 137 tokens in a 200k window is 0.07% of
+the bar) — its exact count is always visible in the legend. Percent is colored
+like the usage plugin: green `<50%`, amber `50–74%`, orange `75–99%`, red `100%`.
+
+## Requirements
+
+- OpenCode `>= 1.18.0`
+
+## Install
+
+From npm:
+
+```sh
+opencode plugin opencode-plugin-context --global --force
+```
+
+The command installs the plugin **and registers it in
+`~/.config/opencode/tui.json`** — no manual `plugin` entry needed.
+
+Then disable the built-in block it replaces (it renders above yours) by adding
+to `~/.config/opencode/tui.json`:
+
+```jsonc
+{
+  "plugin_enabled": { "internal:sidebar-context": false }
+}
+```
+
+Restart OpenCode.
+
+## Local development
+
+```sh
+git clone https://github.com/lhw/opencode-plugin-context
+cd opencode-plugin-context
+npm install
+npm run dev:install   # builds dist/tui.js and copies it into ~/.config/opencode/context/
+```
+
+Then register it in `~/.config/opencode/tui.json` and restart OpenCode:
+
+```jsonc
+{
+  "plugin_enabled": { "internal:sidebar-context": false },
+  "plugin": [["./context/tui.js", {}]]
+}
+```
+
+> The plugin must NOT live in the auto-discovered `~/.config/opencode/plugins/`
+> directory — that is scanned for **server** plugins, and opencode rejects this
+> TUI-only module there. TUI plugins are only loaded via `tui.json`.
+
+## How it works
+
+- Renders into the `sidebar_content` slot (order `60`) via `@opentui/solid`.
+- Reads the latest resolved assistant turn's token buckets
+  (`tokens.input/output/reasoning/cache.{read,write}`) and the model's
+  `limit.context` / `limit.output` from `api.state.provider` — the same source
+  the built-in block uses.
+- **used** = input + output + reasoning + cache.read + cache.write (opencode's
+  own total). Segments are never double-counted; `cache.write` folds into
+  `prompt`, and **reserved output** shrinks as actual output grows.
+- Cost comes from `session.cost`, falling back to summing assistant `cost`.
+- Repaints on `message.*` / `session.*` events plus a 2-second self-heal timer.
+
+## What it deliberately does *not* show
+
+The plugin API exposes only aggregate token buckets — not how the prompt splits
+into system instructions vs tool definitions vs user messages the way GitHub
+Copilot's context meter does. Splitting those would mean guessing from character
+counts, so this bar shows the real buckets opencode tracks instead.
+
+## Development
+
+```sh
+npm run typecheck    # tsc --noEmit
+npm test             # pure-math self-checks (node, no deps)
+npm run build        # esbuild → dist/tui.js
+npm run dev:install  # build + install into ~/.config/opencode/context/
+npm publish          # runs typecheck + build + test first
+```
+
+## License
+
+MIT

package/dist/tui.js

@@ -0,0 +1,227 @@
+// src/tui.ts
+import { createElement, insert, setProp } from "@opentui/solid";
+import { createTextAttributes } from "@opentui/core";
+import { createSignal } from "solid-js";
+
+// src/context.ts
+function tokensOf(m) {
+  const t = record(m?.tokens);
+  const cache = record(t.cache);
+  return {
+    input: num(t.input),
+    output: num(t.output),
+    reasoning: num(t.reasoning),
+    cacheRead: num(cache.read),
+    cacheWrite: num(cache.write)
+  };
+}
+function record(v) {
+  return typeof v === "object" && v !== null && !Array.isArray(v) ? v : {};
+}
+function num(v) {
+  return typeof v === "number" && Number.isFinite(v) && v > 0 ? Math.round(v) : 0;
+}
+function computeContext(counts, limits, cost = 0) {
+  const { input, output, reasoning, cacheRead, cacheWrite } = counts;
+  const used = input + cacheRead + cacheWrite + reasoning + output;
+  const window = limits && limits.context > 0 ? limits.context : 0;
+  const reserved = limits && limits.output > 0 ? Math.max(0, limits.output - output) : 0;
+  const free = window > 0 ? Math.max(0, window - used - reserved) : 0;
+  const raw = [
+    { id: "cached", tokens: cacheRead },
+    { id: "prompt", tokens: input + cacheWrite },
+    { id: "think", tokens: reasoning },
+    { id: "out", tokens: output },
+    { id: "reserved", tokens: reserved },
+    { id: "free", tokens: free }
+  ];
+  return {
+    used,
+    window,
+    percent: window > 0 ? Math.min(100, Math.round(used / window * 100)) : 0,
+    segments: raw.filter((segment) => segment.tokens > 0),
+    cost,
+    known: window > 0
+  };
+}
+function segmentBar(segments, window, width) {
+  if (window <= 0 || width <= 0) return [];
+  let remaining = width;
+  const out = [];
+  let i = 0;
+  for (; i < segments.length; i++) {
+    const segment = segments[i];
+    if (segment.id === "free") break;
+    const cells = Math.min(remaining, Math.round(segment.tokens / window * width));
+    if (cells > 0) out.push({ id: segment.id, cells });
+    remaining -= cells;
+  }
+  if (remaining > 0) out.push({ id: "free", cells: remaining });
+  return out;
+}
+
+// src/tui.ts
+var BAR_WIDTH = 32;
+var BOLD = createTextAttributes({ bold: true });
+var SLOT_ORDER = 60;
+var SEGMENT_LABEL = {
+  cached: "c",
+  prompt: "p",
+  think: "t",
+  out: "o",
+  reserved: "r",
+  free: "f"
+};
+var money = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" });
+var plugin = {
+  id: "opencode-plugin-context",
+  tui: async (api) => {
+    const [getRenderTick, setRenderTick] = createSignal(0);
+    const repaint = () => {
+      setRenderTick((n) => n + 1);
+      api.renderer.requestRender();
+    };
+    const unsubs = [
+      api.event.on("message.updated", repaint),
+      api.event.on("message.part.updated", repaint),
+      api.event.on("message.part.removed", repaint),
+      api.event.on("message.removed", repaint),
+      api.event.on("session.updated", repaint),
+      api.event.on("session.compacted", repaint),
+      api.event.on("session.status", repaint),
+      api.event.on("session.idle", repaint)
+    ];
+    const repaintTimer = setInterval(repaint, 2e3);
+    api.lifecycle.onDispose(() => {
+      for (const unsub of unsubs) unsub();
+      clearInterval(repaintTimer);
+    });
+    api.slots.register({
+      order: SLOT_ORDER,
+      slots: {
+        sidebar_content(_ctx, props) {
+          getRenderTick();
+          return renderPanel(api, props.session_id);
+        }
+      }
+    });
+  }
+};
+function sessionUsage(api, sessionId) {
+  const messages = api.state.session.messages(sessionId);
+  let last;
+  for (const message of messages) {
+    const m = message;
+    if (m.role === "assistant" && (m.tokens?.output ?? 0) > 0) {
+      last = {
+        tokens: m.tokens,
+        providerID: message.providerID,
+        modelID: message.modelID,
+        cost: message.cost
+      };
+    }
+  }
+  const session = api.state.session.get(sessionId);
+  const cost = session?.cost ?? messages.reduce((sum, message) => {
+    if (message.role === "assistant") sum += message.cost ?? 0;
+    return sum;
+  }, 0);
+  const counts = tokensOf(last);
+  let limits;
+  if (last?.providerID && last.modelID) {
+    const model = api.state.provider.find((p) => p.id === last.providerID)?.models[last.modelID];
+    if (model?.limit?.context) {
+      limits = { context: model.limit.context, output: model.limit.output ?? 0 };
+    }
+  }
+  return computeContext(counts, limits, cost);
+}
+function renderPanel(api, sessionId) {
+  const theme = api.theme.current;
+  const usage = sessionUsage(api, sessionId);
+  const header = [text({ fg: theme.text, attributes: BOLD }, ["Context"])];
+  const lines = [header];
+  const hasUsage = usage.used > 0;
+  if (usage.known && hasUsage) {
+    const bar = segmentBar(usage.segments, usage.window, BAR_WIDTH);
+    lines.push(
+      box({ flexDirection: "row", justifyContent: "space-between" }, [
+        box({ flexDirection: "row" }, bar.map((cell) => text({ fg: segmentColor(cell.id, theme) }, ["\u2501".repeat(cell.cells)]))),
+        text({ fg: tierColor(usage.percent, theme) }, [` ${usage.percent}%`])
+      ])
+    );
+  }
+  if (hasUsage) {
+    lines.push(
+      text({ fg: theme.textMuted }, [
+        `${formatInt(usage.used)} / ${usage.known ? formatInt(usage.window) : "--"} tokens`
+      ])
+    );
+  } else {
+    lines.push(text({ fg: theme.textMuted }, ["no assistant turns yet"]));
+  }
+  if (usage.cost > 0) {
+    lines.push(text({ fg: theme.textMuted }, [`${money.format(usage.cost)} spent`]));
+  }
+  if (usage.known && hasUsage) {
+    lines.push(
+      box({ flexDirection: "row", gap: 1 }, usage.segments.map(
+        (segment) => box({ flexDirection: "row" }, [
+          text({ fg: segmentColor(segment.id, theme) }, ["\u258D"]),
+          text({ fg: theme.textMuted }, [`${SEGMENT_LABEL[segment.id]}${formatCompact(segment.tokens)}`])
+        ])
+      ))
+    );
+  }
+  return box({ width: "100%", flexDirection: "column" }, lines);
+}
+function segmentColor(id, theme) {
+  switch (id) {
+    case "cached":
+      return theme.success;
+    case "prompt":
+      return theme.accent;
+    case "think":
+      return theme.warning;
+    case "out":
+      return theme.info;
+    case "reserved":
+      return theme.textMuted;
+    case "free":
+      return theme.text;
+  }
+}
+function tierColor(percent, theme) {
+  if (percent >= 100) return theme.error;
+  if (percent >= 75) return theme.warning;
+  if (percent >= 50) return theme.accent;
+  return theme.success;
+}
+function formatInt(value) {
+  return new Intl.NumberFormat("en-US").format(value);
+}
+function formatCompact(value) {
+  if (value >= 1e6) return `${(value / 1e6).toFixed(1).replace(/\.0$/, "")}M`;
+  if (value >= 1e3) return `${Math.round(value / 1e3)}k`;
+  return String(value);
+}
+function element(tag, props, children = []) {
+  const node = createElement(tag);
+  for (const [key, value] of Object.entries(props)) {
+    if (value !== void 0) setProp(node, key, value);
+  }
+  for (const child of children) {
+    if (child !== null && child !== void 0 && child !== false) insert(node, child);
+  }
+  return node;
+}
+function text(props, children = []) {
+  return element("text", props, children);
+}
+function box(props, children = []) {
+  return element("box", props, children);
+}
+var tui_default = plugin;
+export {
+  tui_default as default
+};

package/package.json

@@ -0,0 +1,57 @@
+{
+  "$schema": "https://json.schemastore.org/package.json",
+  "name": "opencode-plugin-context",
+  "version": "0.1.0",
+  "description": "OpenCode TUI plugin that renders the session's context-window usage as a colored, segmented bar (cached / prompt / thinking / output / reserved output) in the sidebar",
+  "type": "module",
+  "exports": {
+    "./tui": {
+      "import": "./dist/tui.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "engines": {
+    "opencode": ">=1.18.0"
+  },
+  "scripts": {
+    "build": "esbuild src/tui.ts --bundle --format=esm --platform=node --external:@opencode-ai/plugin --external:@opentui/solid --external:@opentui/core --external:solid-js --outfile=dist/tui.js",
+    "dev:install": "npm run build && mkdir -p \"$HOME/.config/opencode/context\" && cp dist/tui.js \"$HOME/.config/opencode/context/tui.js\"",
+    "typecheck": "tsc --noEmit",
+    "test": "node scripts/check.mjs",
+    "prepublishOnly": "npm run typecheck && npm run build && npm test"
+  },
+  "keywords": [
+    "opencode",
+    "opencode-plugin",
+    "context",
+    "context-window",
+    "tokens",
+    "sidebar",
+    "tui"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/lhw/opencode-plugin-context.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@opencode-ai/plugin": ">=1.14.0",
+    "@opentui/core": ">=0.2.9",
+    "@opentui/solid": ">=0.2.9"
+  },
+  "devDependencies": {
+    "@opencode-ai/plugin": "1.18.18",
+    "@opentui/core": "0.5.4",
+    "@opentui/keymap": "0.5.4",
+    "@opentui/solid": "0.5.4",
+    "@types/node": "^26.2.0",
+    "esbuild": "^0.28.0",
+    "solid-js": "1.9.12",
+    "typescript": "^7.0.2"
+  }
+}