opencode-plugin-context 0.1.0 → 1.1.0

package/README.md

@@ -3,17 +3,18 @@
 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.
+The whole bar is the model's context window. By default it shows the real
+provider-reported buckets — **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
+138K / 200K tokens
 $0.04 spent
-▍c40k ▍p90k ▍t5k ▍o3k ▍r5k ▍f57k
+▍c40K ▍p90K ▍t5K ▍o3K ▍r6K ▍f62K
 ```
 
 One color-coded legend row follows the bar — `▍` marker in the segment's color,
@@ -22,18 +23,67 @@ 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      |
+| 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  |
 
+With `estimate: true` the `prompt` bucket is split into **user** input, **tool**
+calls + results (incl. MCP) and **system** (the remainder), shown as two legend
+rows (used buckets, then reserved/free):
+
+```
+Context
+━━━━━━━━━━━━━━━━━ 69%
+▍c40K ▍u25K ▍m15K ▍s70K ▍t5K ▍o3K
+▍r6K ▍f62K
+138K / 200K tokens
+$0.04 spent
+```
+
+| Segment            | Legend | Theme color | Default look          |
+| ------------------ | ------ | ----------- | --------------------- |
+| cached input       | `c`    | `success`   | green                 |
+| user input (est.)  | `u`    | `info`      | cyan                  |
+| tool calls + results (est., incl. MCP) | `m` | `accent` | blue |
+| system prompt + tool definitions (rest) | `s` | `warning` | amber |
+| thinking (reasoning tokens) | `t`    | `secondary` | purple               |
+| output             | `o`    | `text`      | white                 |
+| reserved output    | `r`    | `textMuted` | grey                  |
+| free space         | `f`    | `borderSubtle` | faint               |
+
+`u`/`m` are **estimates** — opencode's own chars/4 heuristic
+(`Token.estimate`, used for compaction) applied to the visible message parts.
+`c`/`s`/`t`/`o` are the real provider-reported buckets. `s` is the remainder of
+the prompt bucket after `u` + `m` (the actual system prompt and tool definitions
+aren't exposed by opencode's plugin API).
+
 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%`.
+cells for each segment in that order, then `free` fills the remainder 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%`.
+
+## Configuration
+
+All options are optional. Plugin entry in `tui.json`:
+
+```jsonc
+{
+  "plugin_enabled": { "internal:sidebar-context": false },
+  "plugin": [["./context/tui.js", { "estimate": true, "exclude": ["system", "cached"] }]]
+}
+```
+
+| Option     | Default | Description                                                |
+| ---------- | ------- | ---------------------------------------------------------- |
+| `estimate` | `false` | split the prompt into `u`/`m`/`s` using char-count estimates. `true` replaces the single `p` (prompt) bucket with the estimated user/tool/system bars |
+| `exclude`  | `[]`    | segment ids to drop from the bar + legend: `cached`, `user`, `tools`, `system`, `prompt`, `think`, `out`, `reserved`, `free` |
+
+Excluded segments are removed from the visualization only; the tokens/cost and
+percent lines still report the real totals.
 
 ## Requirements
 
@@ -91,17 +141,22 @@ Then register it in `~/.config/opencode/tui.json` and restart OpenCode:
   `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.
+  own total). Segments are never double-counted; `cache.write` folds into the
+  prompt bucket, and **reserved output** shrinks as actual output grows.
+- With `estimate: true`, the prompt bucket is split into `u`/`m`/`s` from
+  visible message parts; `s` is the remainder.
 - 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.
+The real system prompt and tool definitions are built server-side and are **not**
+exposed through opencode's plugin API — only the aggregate token buckets and the
+visible message parts are. The `u`/`m` split is therefore estimated from visible
+parts (chars/4, the same heuristic opencode itself uses for compaction), `s` is
+the remainder, and neither is a true token count the way GitHub Copilot's
+context meter reports it. The `c`/`s`/`t`/`o`/`r` buckets come straight from the
+provider's reported usage.
 
 ## Development
 

package/dist/tui.js

@@ -1,5 +1,4 @@
-// src/tui.ts
-import { createElement, insert, setProp } from "@opentui/solid";
+// src/tui.tsx
 import { createTextAttributes } from "@opentui/core";
 import { createSignal } from "solid-js";
 
@@ -21,15 +20,28 @@ function record(v) {
 function num(v) {
   return typeof v === "number" && Number.isFinite(v) && v > 0 ? Math.round(v) : 0;
 }
-function computeContext(counts, limits, cost = 0) {
+function estimateTokens(input) {
+  return Math.max(0, Math.round(input.length / 4));
+}
+function computeContext(counts, limits, cost = 0, estimates, exclude = []) {
   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 = [
+  const prompt = input + cacheWrite;
+  const raw = estimates ? [
+    { id: "cached", tokens: cacheRead },
+    { id: "user", tokens: estimates.user },
+    { id: "tools", tokens: estimates.tools },
+    { id: "system", tokens: Math.max(0, prompt - estimates.user - estimates.tools) },
+    { id: "think", tokens: reasoning },
+    { id: "out", tokens: output },
+    { id: "reserved", tokens: reserved },
+    { id: "free", tokens: free }
+  ] : [
     { id: "cached", tokens: cacheRead },
-    { id: "prompt", tokens: input + cacheWrite },
+    { id: "prompt", tokens: prompt },
     { id: "think", tokens: reasoning },
     { id: "out", tokens: output },
     { id: "reserved", tokens: reserved },
@@ -39,33 +51,54 @@ function computeContext(counts, limits, cost = 0) {
     used,
     window,
     percent: window > 0 ? Math.min(100, Math.round(used / window * 100)) : 0,
-    segments: raw.filter((segment) => segment.tokens > 0),
+    segments: raw.filter((segment) => segment.tokens > 0 && !exclude.includes(segment.id)),
     cost,
     known: window > 0
   };
 }
-function segmentBar(segments, window, width) {
+function segmentBar(segments, window, width, exclude = []) {
   if (window <= 0 || width <= 0) return [];
   let remaining = width;
   const out = [];
-  let i = 0;
-  for (; i < segments.length; i++) {
-    const segment = segments[i];
+  for (const segment of segments) {
     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 });
+  if (remaining > 0 && !exclude.includes("free")) out.push({ id: "free", cells: remaining });
   return out;
 }
 
-// src/tui.ts
+// src/tui.tsx
+import { jsx, jsxs } from "@opentui/solid/jsx-runtime";
+var VALID_SEGMENT_IDS = [
+  "cached",
+  "user",
+  "tools",
+  "system",
+  "prompt",
+  "think",
+  "out",
+  "reserved",
+  "free"
+];
+function normalizeOptions(raw) {
+  const obj = typeof raw === "object" && raw !== null && !Array.isArray(raw) ? raw : {};
+  const exclude = Array.isArray(obj.exclude) ? Array.from(new Set(obj.exclude.filter((id) => typeof id === "string" && VALID_SEGMENT_IDS.includes(id)))) : [];
+  return {
+    estimate: typeof obj.estimate === "boolean" ? obj.estimate : false,
+    exclude
+  };
+}
 var BAR_WIDTH = 32;
 var BOLD = createTextAttributes({ bold: true });
 var SLOT_ORDER = 60;
 var SEGMENT_LABEL = {
   cached: "c",
+  user: "u",
+  tools: "m",
+  system: "s",
   prompt: "p",
   think: "t",
   out: "o",
@@ -73,9 +106,12 @@ var SEGMENT_LABEL = {
   free: "f"
 };
 var money = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" });
+var intFmt = new Intl.NumberFormat("en-US");
+var compactFmt = new Intl.NumberFormat("en", { notation: "compact", maximumFractionDigits: 1 });
 var plugin = {
   id: "opencode-plugin-context",
-  tui: async (api) => {
+  tui: async (api, rawOptions) => {
+    const config = normalizeOptions(rawOptions);
     const [getRenderTick, setRenderTick] = createSignal(0);
     const repaint = () => {
       setRenderTick((n) => n + 1);
@@ -101,13 +137,36 @@ var plugin = {
       slots: {
         sidebar_content(_ctx, props) {
           getRenderTick();
-          return renderPanel(api, props.session_id);
+          return renderPanel(api, props.session_id, config);
         }
       }
     });
   }
 };
-function sessionUsage(api, sessionId) {
+function collectEstimates(api, sessionId) {
+  let user = 0;
+  let tools = 0;
+  for (const message of api.state.session.messages(sessionId)) {
+    const role = message.role;
+    try {
+      for (const part of api.state.part(message.id)) {
+        const p = part;
+        if (p.type === "text" && role === "user") {
+          user += estimateTokens(p.text ?? "");
+        } else if (p.type === "tool") {
+          const state = p.state;
+          if (!state) continue;
+          if (state.input !== void 0) tools += estimateTokens(JSON.stringify(state.input));
+          if (typeof state.output === "string") tools += estimateTokens(state.output);
+          else if (typeof state.error === "string") tools += estimateTokens(state.error);
+        }
+      }
+    } catch {
+    }
+  }
+  return { user, tools };
+}
+function sessionUsage(api, sessionId, config) {
   const messages = api.state.session.messages(sessionId);
   let last;
   for (const message of messages) {
@@ -134,62 +193,85 @@ function sessionUsage(api, sessionId) {
       limits = { context: model.limit.context, output: model.limit.output ?? 0 };
     }
   }
-  return computeContext(counts, limits, cost);
+  const estimates = config.estimate ? collectEstimates(api, sessionId) : void 0;
+  return computeContext(counts, limits, cost, estimates, config.exclude);
 }
-function renderPanel(api, sessionId) {
+function renderPanel(api, sessionId, config) {
   const theme = api.theme.current;
-  const usage = sessionUsage(api, sessionId);
-  const header = [text({ fg: theme.text, attributes: BOLD }, ["Context"])];
+  const usage = sessionUsage(api, sessionId, config);
+  const header = /* @__PURE__ */ jsx("text", { fg: theme.text, attributes: BOLD, children: "Context" });
   const lines = [header];
   const hasUsage = usage.used > 0;
   if (usage.known && hasUsage) {
-    const bar = segmentBar(usage.segments, usage.window, BAR_WIDTH);
+    const bar = segmentBar(usage.segments, usage.window, BAR_WIDTH, config.exclude);
     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}%`])
-      ])
+      /* @__PURE__ */ jsxs("box", { flexDirection: "row", justifyContent: "space-between", children: [
+        /* @__PURE__ */ jsx("box", { flexDirection: "row", children: bar.map((cell) => /* @__PURE__ */ jsx("text", { fg: segmentColor(cell.id, theme, config.estimate), children: "\u2501".repeat(cell.cells) })) }),
+        /* @__PURE__ */ jsx("text", { fg: tierColor(usage.percent, theme), children: ` ${usage.percent}%` })
+      ] })
     );
+    if (config.estimate) {
+      const legend = (ids) => {
+        const entries = usage.segments.filter((segment) => ids.includes(segment.id));
+        if (entries.length === 0) return null;
+        return /* @__PURE__ */ jsx("box", { flexDirection: "row", children: entries.map((segment) => /* @__PURE__ */ jsxs("box", { flexDirection: "row", children: [
+          /* @__PURE__ */ jsx("text", { fg: segmentColor(segment.id, theme, true), children: "\u258D" }),
+          /* @__PURE__ */ jsxs("text", { fg: theme.textMuted, children: [
+            SEGMENT_LABEL[segment.id],
+            compactFmt.format(segment.tokens)
+          ] })
+        ] })) });
+      };
+      const usedLegend = legend(["cached", "user", "tools", "system", "think", "out"]);
+      const budgetLegend = legend(["reserved", "free"]);
+      if (usedLegend) lines.push(usedLegend);
+      if (budgetLegend) lines.push(budgetLegend);
+    } else {
+      lines.push(
+        /* @__PURE__ */ jsx("box", { flexDirection: "row", gap: 1, children: usage.segments.map((segment) => /* @__PURE__ */ jsxs("box", { flexDirection: "row", children: [
+          /* @__PURE__ */ jsx("text", { fg: segmentColor(segment.id, theme, false), children: "\u258D" }),
+          /* @__PURE__ */ jsxs("text", { fg: theme.textMuted, children: [
+            SEGMENT_LABEL[segment.id],
+            compactFmt.format(segment.tokens)
+          ] })
+        ] })) })
+      );
+    }
   }
   if (hasUsage) {
     lines.push(
-      text({ fg: theme.textMuted }, [
-        `${formatInt(usage.used)} / ${usage.known ? formatInt(usage.window) : "--"} tokens`
-      ])
+      /* @__PURE__ */ jsx("text", { fg: theme.textMuted, children: `${intFmt.format(usage.used)} / ${usage.known ? intFmt.format(usage.window) : "--"} tokens` })
     );
   } else {
-    lines.push(text({ fg: theme.textMuted }, ["no assistant turns yet"]));
+    lines.push(/* @__PURE__ */ jsx("text", { fg: theme.textMuted, children: "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)}`])
-        ])
-      ))
-    );
+    lines.push(/* @__PURE__ */ jsx("text", { fg: theme.textMuted, children: `${money.format(usage.cost)} spent` }));
   }
-  return box({ width: "100%", flexDirection: "column" }, lines);
+  return /* @__PURE__ */ jsx("box", { width: "100%", flexDirection: "column", children: 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 segmentColor(id, theme, estimate) {
+  const base = {
+    cached: theme.success,
+    prompt: theme.accent,
+    think: theme.warning,
+    out: theme.info,
+    reserved: theme.textMuted,
+    free: theme.text,
+    user: theme.accent,
+    tools: theme.accent,
+    system: theme.accent
+  };
+  if (!estimate) return base[id];
+  const est = {
+    user: theme.info,
+    tools: theme.accent,
+    system: theme.warning,
+    think: theme.secondary,
+    out: theme.text,
+    free: theme.borderSubtle
+  };
+  return est[id] ?? base[id];
 }
 function tierColor(percent, theme) {
   if (percent >= 100) return theme.error;
@@ -197,30 +279,6 @@ function tierColor(percent, theme) {
   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

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "opencode-plugin-context",
-  "version": "0.1.0",
+  "version": "1.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": {
@@ -16,7 +16,7 @@
     "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",
+    "build": "esbuild src/tui.tsx --bundle --format=esm --platform=node --jsx=automatic --jsx-import-source=@opentui/solid --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",
@@ -47,7 +47,6 @@
   "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",