opencode-context-indicator 1.2.0 → 1.2.2

package/lib/tui-data.d.ts

@@ -0,0 +1,45 @@
+// lib/tui-data.d.ts
+//
+// Types for lib/tui-data.js (the TUI data layer). state.json is written by
+// writeStateFile() in index.js and is untrusted input — every consumer treats
+// the fields as optional.
+
+export interface Categories {
+  user?: number
+  assistant?: number
+  reasoning?: number
+  toolArgs?: number
+  system?: number | null
+  toolSchemas?: number | null
+  other?: number
+}
+
+export interface StateEntry {
+  sessionID?: string
+  parentID?: string | null
+  role?: string
+  agent?: string | null
+  model?: string
+  providerID?: string
+  ctx?: number
+  input?: number
+  usable?: number | null
+  reserve?: number | null
+  limit?: number | null
+  reasoning?: number
+  categories?: Categories
+  updatedAt?: string
+}
+
+export declare const STATE_FILE: string
+export declare const POLL_MS: number
+export declare function isNodeModulesInstall(): boolean
+export declare function readSnapshot(): Record<string, StateEntry>
+export declare function collectFamily(
+  snapshot: Record<string, StateEntry>,
+  rootID: string,
+): StateEntry[]
+export declare function fmt(n: number): string
+export declare function num(v: unknown): number
+export declare function fit(s: string, w: number): string
+export declare function updatedAt(iso: string | undefined): string

package/lib/tui-data.js

@@ -0,0 +1,165 @@
+// lib/tui-data.js
+//
+// Data layer for the TUI entry (tui.tsx): the state.json bridge (readSnapshot /
+// isEmptyEntry / collectFamily), the shared formatting helpers (fmt / num / fit
+// / updatedAt) and the npm-install detection. Plain JS with JSDoc — same shape
+// as lib/contributors.js — so tui.tsx stays a thin JSX/setup shell and the node
+// tooling (resolve gate, future unit tests) can import it without a transform.
+//
+// These helpers must stay free of solid-js / @opentui imports: the TUI host
+// bridges those modules only for the JSX entry, and keeping this file pure
+// means it also loads anywhere node does.
+//
+// state.json shape (written by writeStateFile() in index.js, untrusted input):
+//   { [sessionID]: { sessionID, parentID, role, agent, model, providerID,
+//     ctx, input, usable, reserve, limit, reasoning, categories{...}, updatedAt } }
+// The authoritative TS mirror of the entry shape is the `StateEntry` interface
+// in lib/tui-data.d.ts — keep the two structurally compatible.
+
+import { readFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+export const STATE_FILE =
+  process.env.OPENCODE_CONTEXT_INDICATOR_STATE_FILE ||
+  join(tmpdir(), "opencode-context-indicator-state.json");
+
+export const POLL_MS = 1000;
+
+// True when this package was loaded from an npm install, i.e. its own file
+// path contains a `node_modules` segment (OpenCode's TUI loader skips the host
+// Solid transform for such paths → slots mount once but never live-update; see
+// the Graceful mode note in tui.tsx). Normalised to forward slashes for
+// Windows paths. ANY file of the package yields the same answer, so checking
+// from lib/ is equivalent to checking from the tui.tsx entry.
+export function isNodeModulesInstall() {
+  try {
+    const selfPath = fileURLToPath(import.meta.url).replace(/\\/g, "/").toLowerCase()
+    return selfPath.includes("/node_modules/")
+  } catch {
+    return false
+  }
+}
+
+// Reserved object keys must never be treated as session ids: state.json is
+// untrusted input (structural mirror of isSafeSessionKey() in lib/estimate.js,
+// including the string/length requirement).
+function isSafeKey(k) {
+  return (
+    typeof k === "string" &&
+    k.length > 0 &&
+    k !== "__proto__" &&
+    k !== "constructor" &&
+    k !== "prototype"
+  )
+}
+
+// Whole state.json snapshot ({ sessionID: entry }) or {} on any error. The
+// sidebar resolves one entry from it and the breakdown panel walks the
+// parentID family over it. Never throws — a missing / empty / corrupt
+// file simply yields {}.
+export function readSnapshot() {
+  try {
+    const raw = readFileSync(STATE_FILE, "utf8")
+    const all = JSON.parse(raw)
+    if (!all || typeof all !== "object" || Array.isArray(all)) return {}
+    // Rebuild into a fresh plain object: drops prototype-poisoning keys
+    // (__proto__ / constructor / prototype) and non-object entries in one pass.
+    const clean = {}
+    for (const [k, v] of Object.entries(all)) {
+      if (isSafeKey(k) && v && typeof v === "object") clean[k] = v
+    }
+    return clean
+  } catch {
+    return {}
+  }
+}
+
+// True when an entry carries no measured tokens at all (a registered session
+// that never served a step). Mirrors isEmptyStateEntry() in lib/commands.js:
+// `categories` is always persisted, so the emptiness test SUMS its fields —
+// a missing categories object is not the only trigger. `system` / `toolSchemas`
+// may legitimately be null, hence the num() coercion.
+function isEmptyEntry(e) {
+  const c = e?.categories
+  const sum =
+    num(c?.user) +
+    num(c?.assistant) +
+    num(c?.reasoning) +
+    num(c?.toolArgs) +
+    num(c?.system) +
+    num(c?.toolSchemas) +
+    num(c?.other)
+  return sum === 0 && num(e?.ctx) === 0 && num(e?.input) === 0
+}
+
+// The panel row set: the root entry (panel.sessionID) plus every entry whose
+// parentID chain reaches it, breadth-first. A small local walk over the snapshot
+// — the server's collectDescendantSessionIDs lives in lib/commands.js and is NOT
+// imported here (the TUI entry stays independent of the server code by design). A
+// phantom node (no tokens, see isEmptyEntry) is not emitted, but traversal still
+// descends through it so real grandchildren behind it are found. `seen` guards
+// against cycles (parentID loops) and double-listing.
+export function collectFamily(snapshot, rootID) {
+  const out = []
+  // hasOwnProperty guard: a host-supplied rootID of "__proto__"/"constructor"
+  // must never resolve through the prototype chain into a phantom row.
+  const root = Object.prototype.hasOwnProperty.call(snapshot, rootID)
+    ? snapshot[rootID]
+    : undefined
+  if (root && typeof root === "object") out.push(root)
+  const seen = new Set([rootID])
+  const queue = [rootID]
+  // Index the snapshot by parentID once (O(n)) instead of an O(n) scan per node.
+  const byParent = new Map()
+  for (const [id, e] of Object.entries(snapshot)) {
+    const pid = e?.parentID
+    if (!pid || typeof pid !== "string") continue
+    const kids = byParent.get(pid)
+    if (kids) kids.push(id)
+    else byParent.set(pid, [id])
+  }
+  while (queue.length > 0) {
+    const cur = queue.shift()
+    const kids = byParent.get(cur)
+    if (!kids) continue
+    for (const id of kids) {
+      if (!id || seen.has(id)) continue
+      seen.add(id)
+      const e = snapshot[id]
+      if (e && !isEmptyEntry(e)) out.push(e)
+      queue.push(id) // descend through phantom parents too
+    }
+  }
+  return out
+}
+
+export function fmt(n) {
+  if (!Number.isFinite(n)) return "0"
+  return n >= 1000 ? `${(n / 1000).toFixed(1)}k` : String(Math.round(n))
+}
+
+export function num(v) {
+  return typeof v === "number" && Number.isFinite(v) ? v : 0
+}
+
+// Code-point-safe column fit: truncate on code points (never splitting a
+// surrogate pair at a column boundary), mark a truncated cell with a trailing
+// "~" so clipping is VISIBLE (a silently clipped cell reads as two columns
+// colliding), then pad to the column width.
+export function fit(s, w) {
+  const cps = Array.from(s)
+  if (cps.length > w) return `${cps.slice(0, Math.max(0, w - 1)).join("")}~`
+  return s.padEnd(w)
+}
+
+export function updatedAt(iso) {
+  if (!iso) return "?"
+  try {
+    const d = new Date(iso)
+    return Number.isNaN(d.getTime()) ? "?" : d.toLocaleTimeString()
+  } catch {
+    return "?"
+  }
+}

package/lib/tui-panel.tsx

@@ -0,0 +1,329 @@
+/** @jsxImportSource @opentui/solid */
+// lib/tui-panel.tsx — the `session.panel` component (BreakdownPanel), moved
+// verbatim from tui.tsx when the TUI entry was split: the host's Solid
+// transform applies to EVERY plugin file outside node_modules
+// (solid-plugin.js sourceFilter in @opentui/solid), so JSX in imported files
+// is compiled the same way as in the entry.
+
+import { usePlugin } from "@opencode/plugin/tui"
+import { createMemo, Show } from "solid-js"
+import { mkdirSync, writeFileSync } from "node:fs"
+import { tmpdir } from "node:os"
+import { basename, join } from "node:path"
+import type { StateEntry } from "./tui-data.js"
+import { collectFamily, fit, fmt, num, updatedAt } from "./tui-data.js"
+import { token } from "./tui-theme.js"
+import {
+  buildRedactedPayload,
+  contributorLine,
+  exportFileName,
+  measureContributors,
+  panelDenom,
+  panelRole,
+  safeText,
+} from "./contributors.js"
+
+// Mirrors the Contributor shape produced by measureContributors()
+// (lib/contributors.js).
+type Contributor = {
+  kind: string
+  ref: string
+  chars: number
+  tokensEstimate: number
+  tool: string
+  preview: string
+}
+
+// Host-owned session.panel input ({ name, sessionID, width, presentation,
+// focused, focus(), close(), toggleFullscreen() }). Typed structurally instead
+// of imported so this file stays independent of the host type package; the host
+// resolves the panel API at runtime.
+type PanelInput = {
+  readonly name: string
+  readonly sessionID: string
+  readonly width: number
+  readonly presentation: "panel" | "fullscreen"
+  readonly focused: boolean
+  readonly focus: () => void
+  readonly close: () => void
+  readonly toggleFullscreen: () => void
+}
+
+// The TUI message data API is optional across host versions. Log a single hint
+// (never once per poll) when it is unavailable and hide the whole section.
+let warnedMessagesUnavailable = false
+
+// Panel column layout (monospace), derived from the host-provided panel width
+// so cells never collide on narrow terminals. Gaps between columns keep a
+// truncated cell visually separated from its neighbour.
+const GUTTER = 2
+const CTX_WIDTH = 12
+
+function panelLayout(panelWidth: number): {
+  roleW: number
+  modelW: number
+  ctxW: number
+  updW: number
+  gutter: string
+} {
+  const w = num(panelWidth) > 0 ? num(panelWidth) : 60
+  const ctxW = CTX_WIDTH
+  const updW = Math.max(5, Math.min(8, w - ctxW - 3 * GUTTER - 24))
+  const roleW = Math.max(12, Math.min(20, Math.floor(w * 0.3)))
+  const modelW = Math.max(10, w - roleW - ctxW - updW - 3 * GUTTER)
+  return { roleW, modelW, ctxW, updW, gutter: " ".repeat(GUTTER) }
+}
+
+// Full session panel: header + one row per session in the family (root plus
+// subagent descendants). It reads the same state.json bridge as the sidebar via
+// the shared 1 s tick, so both surfaces refresh on ONE poll. `panel.sessionID`
+// selects the root; `cx` opens the panel (registered from the "app" slot in
+// tui.tsx).
+export function BreakdownPanel(props: {
+  panel: PanelInput
+  snapshot: () => Record<string, StateEntry>
+  refresh: () => void
+}) {
+  const context = usePlugin()
+  const base = () => token(context?.theme?.text?.base, "white")
+  const muted = () => token(context?.theme?.text?.muted, base())
+
+  // Panel-local keys. The layer is owned by this component and disposed with it.
+  // mode "global" + an explicit focused check is the portable fallback when no
+  // target renderable is available: the keys act only while the panel owns input.
+  // The capability guard keeps an older host (no keymap API) from throwing.
+  const keymap = context?.keymap
+  if (keymap && typeof keymap.layer === "function") {
+    keymap.layer(() => ({
+      mode: "global",
+      priority: -1,
+      commands: [
+        {
+          id: "context-indicator.breakdown.close",
+          title: "Close the context breakdown panel",
+          bind: "escape",
+          enabled: () => props.panel.focused,
+          run: () => {
+            if (props.panel.focused) props.panel.close()
+          },
+        },
+        {
+          id: "context-indicator.breakdown.refresh",
+          title: "Refresh the context breakdown panel",
+          bind: "r",
+          enabled: () => props.panel.focused,
+          run: () => {
+            if (props.panel.focused) props.refresh()
+          },
+        },
+        {
+          id: "context-indicator.breakdown.export",
+          title: "Export a redacted breakdown snapshot",
+          bind: "e",
+          enabled: () => props.panel.focused,
+          run: () => {
+            if (props.panel.focused) exportRedacted()
+          },
+        },
+      ],
+    }))
+  }
+
+  // One snapshot read per poll tick (props.snapshot tracks the shared tick), so
+  // the memo recomputes together with the sidebar instead of polling separately.
+  const data = createMemo(() => {
+    const snap = props.snapshot()
+    return {
+      root: snap[props.panel.sessionID],
+      rows: collectFamily(snap, props.panel.sessionID),
+    }
+  })
+
+  // Live message list from the TUI data layer (in-process, no LLM call). The
+  // shared `props.snapshot()` tick is read FIRST so this re-reads every poll.
+  // `available: false` means the API is absent/errored -> the WHOLE measured
+  // section is hidden (and a one-time hint was logged).
+  const messages = createMemo<{ available: boolean; list: unknown[] }>(() => {
+    props.snapshot()
+    try {
+      const api = context?.data?.session?.message
+      if (!api || typeof api.list !== "function") {
+        if (!warnedMessagesUnavailable) {
+          warnedMessagesUnavailable = true
+          console.error(
+            "[context-indicator] TUI message data API unavailable; " +
+              "measured contributors section hidden",
+          )
+        }
+        return { available: false, list: [] }
+      }
+      const v = api.list(props.panel.sessionID)
+      return { available: true, list: Array.isArray(v) ? v : [] }
+    } catch {
+      if (!warnedMessagesUnavailable) {
+        warnedMessagesUnavailable = true
+        console.error(
+          "[context-indicator] TUI message read failed; " +
+            "measured contributors section hidden",
+        )
+      }
+      return { available: false, list: [] }
+    }
+  })
+
+  const contributors = createMemo<Contributor[]>(() => {
+    const m = messages()
+    if (!m.available) return []
+    try {
+      return measureContributors(m.list)
+    } catch {
+      return []
+    }
+  })
+
+  // Redacted export (key `e`). No message text, no full session id, no tool
+  // output content ever leaves this function. Never throws: a failure logs and
+  // shows an error toast instead.
+  function exportRedacted(): void {
+    let exportedName: string | null = null
+    try {
+      const now = new Date()
+      const name = exportFileName(props.panel.sessionID, now)
+      const payload = buildRedactedPayload({
+        sessionID: props.panel.sessionID,
+        root: data().root,
+        rows: data().rows,
+        contributors: contributors(),
+        now,
+        panelDenom,
+        panelRole,
+        num,
+      })
+      const dir = join(tmpdir(), "opencode-context-indicator", "exports")
+      const file = join(dir, name)
+      mkdirSync(dir, { recursive: true })
+      writeFileSync(file, JSON.stringify(payload, null, 2), "utf8")
+      exportedName = basename(file)
+    } catch (err) {
+      console.error("[context-indicator] redacted export failed:", err)
+      try {
+        context?.ui?.toast?.show({
+          message: "redacted export failed",
+          variant: "error",
+        })
+      } catch {
+        /* toast is best-effort */
+      }
+      return
+    }
+    // Outside the write try: a toast failure must not report the export as
+    // failed when the file is already on disk.
+    try {
+      context?.ui?.toast?.show({
+        message: `exported ${exportedName}`,
+        variant: "success",
+      })
+    } catch {
+      /* toast is best-effort */
+    }
+  }
+
+  const header = (): string => {
+    const r = data().root
+    if (!r) return "Context breakdown"
+    const model = safeText(r.model && r.model !== "unknown" ? r.model : "model?")
+    const ctx = fmt(num(r.ctx))
+    const d = panelDenom(r)
+    return d > 0
+      ? `Context breakdown \u2014 ${model} ${ctx}/${fmt(d)} (${Math.round(
+          (num(r.ctx) / d) * 100,
+        )}%)`
+      : `Context breakdown \u2014 ${model} ${ctx}`
+  }
+
+  const layout = (): {
+    roleW: number
+    modelW: number
+    ctxW: number
+    updW: number
+    gutter: string
+  } => panelLayout(props.panel.width)
+
+  const columns = (): string => {
+    const L = layout()
+    return (
+      fit("role", L.roleW) +
+      L.gutter +
+      fit("model", L.modelW) +
+      L.gutter +
+      fit("ctx", L.ctxW) +
+      L.gutter +
+      "updated"
+    )
+  }
+
+  const row = (e: StateEntry, isMain: boolean): string => {
+    const model = safeText(e.model && e.model !== "unknown" ? e.model : "model?")
+    const d = panelDenom(e)
+    const ctx =
+      d > 0
+        ? `${fmt(num(e.ctx))} (${Math.round((num(e.ctx) / d) * 100)}%)`
+        : fmt(num(e.ctx))
+    const L = layout()
+    return (
+      fit(panelRole(e, isMain), L.roleW) +
+      L.gutter +
+      fit(model, L.modelW) +
+      L.gutter +
+      fit(ctx, L.ctxW) +
+      L.gutter +
+      updatedAt(e.updatedAt)
+    )
+  }
+
+  return (
+    <box flexDirection="column">
+      <text fg={base()}>{header()}</text>
+      <Show
+        when={data().root}
+        fallback={<text fg={muted()}>{"  no data yet"}</text>}
+      >
+        <text fg={muted()}>{columns()}</text>
+        {data().rows.map((e, i) => (
+          <text fg={muted()}>{row(e, i === 0)}</text>
+        ))}
+        <Show
+          when={
+            (data().root?.usable ?? 0) > 0
+          }
+        >
+          <text fg={muted()}>
+            {"  compact at " +
+              fmt(num(data().root?.usable)) +
+              (num(data().root?.reserve) > 0
+                ? " (" + fmt(num(data().root?.reserve)) + " reserve)"
+                : "")}
+          </text>
+        </Show>
+        <Show when={messages().available}>
+          <text fg={base()}>{"largest contributors (measured)"}</text>
+          <Show
+            when={contributors().length > 0}
+            fallback={<text fg={muted()}>{"  no messages yet"}</text>}
+          >
+            {contributors()
+              .slice(0, 5)
+              .map((c, i) => (
+                <text fg={muted()}>{contributorLine(c, i + 1)}</text>
+              ))}
+          </Show>
+          <text fg={muted()}>
+            {
+              "measured != server categories (tool outputs counted here; server categories exclude them)"
+            }
+          </text>
+        </Show>
+      </Show>
+    </box>
+  )
+}

package/lib/tui-sidebar.tsx

@@ -0,0 +1,72 @@
+/** @jsxImportSource @opentui/solid */
+// lib/tui-sidebar.tsx — the `sidebar.content` slot component. Moved verbatim
+// from tui.tsx when the TUI entry was split: the host's Solid transform
+// applies to EVERY plugin file outside node_modules (solid-plugin.js
+// sourceFilter in @opentui/solid), so JSX in imported files is compiled the
+// same way as in the entry.
+
+import { usePlugin } from "@opencode/plugin/tui"
+import { Show } from "solid-js"
+import type { StateEntry } from "./tui-data.js"
+import { fmt, num, updatedAt } from "./tui-data.js"
+import { token } from "./tui-theme.js"
+
+// Sidebar category-label column width (monospace), used by the `line()` helper.
+const LABEL_WIDTH = 12
+
+export function Sidebar(props: { entry: () => StateEntry | null }) {
+  const context = usePlugin()
+  const base = () => token(context?.theme?.text?.base, "white")
+  const muted = () => token(context?.theme?.text?.muted, base())
+
+  const e = () => props.entry()
+
+  const denom = (): number | null => {
+    const x = e()
+    const d = x?.usable ?? x?.limit
+    return typeof d === "number" && d > 0 ? d : null
+  }
+  const pct = (v: number): string => {
+    const d = denom()
+    return d ? `${Math.round((v / d) * 100)}%` : ""
+  }
+  const line = (label: string, v: unknown): string => {
+    const n = num(v)
+    const l = (label + " ".repeat(LABEL_WIDTH)).slice(0, LABEL_WIDTH)
+    const p = pct(n)
+    return `${l}${fmt(n).padStart(7)}${p ? `  ${p.padStart(4)}` : ""}`
+  }
+  const header = (): string => {
+    const x = e()
+    if (!x) return ""
+    const d = denom()
+    return `${x.model ?? "?"} · ${fmt(num(x.ctx))}${
+      d ? ` / ${fmt(d)}` : ""
+    }${d ? ` (${pct(num(x.ctx))})` : ""}`
+  }
+
+  return (
+    <box flexDirection="column">
+      <text fg={base()}>{"Context"}</text>
+      <Show when={e()} fallback={<text fg={muted()}>{"  no data yet"}</text>}>
+        <text fg={base()}>{header()}</text>
+        <text fg={muted()}>{line("user", e()?.categories?.user)}</text>
+        <text fg={muted()}>{line("assistant", e()?.categories?.assistant)}</text>
+        <text fg={muted()}>{line("reasoning", e()?.categories?.reasoning)}</text>
+        <text fg={muted()}>{line("tool args", e()?.categories?.toolArgs)}</text>
+        <text fg={muted()}>
+          {e()?.categories?.system == null
+            ? `${"system".padEnd(LABEL_WIDTH)}     n/a`
+            : line("system", e()?.categories?.system)}
+        </text>
+        <text fg={muted()}>
+          {e()?.categories?.toolSchemas == null
+            ? `${"tool schemas".padEnd(LABEL_WIDTH)}     n/a`
+            : line("tool schemas", e()?.categories?.toolSchemas)}
+        </text>
+        <text fg={muted()}>{line("other", e()?.categories?.other)}</text>
+        <text fg={muted()}>{`updated ${updatedAt(e()?.updatedAt)}`}</text>
+      </Show>
+    </box>
+  )
+}

package/lib/tui-theme.js

@@ -0,0 +1,17 @@
+// lib/tui-theme.js
+//
+// Theme-token helpers shared by the TUI components (sidebar + breakdown
+// panel). Free of JSX and of solid-js imports so the file loads through any
+// loader path.
+//
+// `Fg` mirrors OpenTUI's ColorInput (the type `fg` on <text> accepts); the
+// JSDoc import below is type-only and erased at runtime.
+
+/** @typedef {import("@opentui/core").ColorInput} Fg */
+
+// Theme tokens are OpenTUI RGBA values (see ResolvedTheme.text.base/.muted);
+// pass them straight to the renderer. Fall back to a named color when a token
+// is absent so an unexpected theme shape can never blank the sidebar.
+export function token(v, fallback) {
+  return v && typeof v === "object" ? v : fallback
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "opencode-context-indicator",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "Real-time OpenCode context-window usage indicator: per-category token breakdown written to a log file, plus an optional TUI sidebar. Dual V1 + V2 plugin entry.",
   "type": "module",
   "license": "MIT",
@@ -56,19 +56,22 @@
     }
   },
   "dependencies": {
-    "@opentui/solid": "0.5.14"
+    "@opentui/solid": "0.5.16"
   },
   "devDependencies": {
     "@opencode/plugin": "^2.0.19",
-    "@opentui/core": "0.5.14",
+    "@opentui/core": "0.5.16",
+    "@types/node": "26.6.3",
     "esbuild": "^0.28.2",
     "node-pty": "^1.1.0",
-    "solid-js": "^1.9.12"
+    "solid-js": "^1.9.12",
+    "typescript": "5.9.3"
   },
   "scripts": {
     "test:prepublish": "node test/prepublish.mjs",
     "test:e2e": "node test/e2e-tui.mjs --full",
-    "test:e2e:quick": "node test/e2e-tui.mjs --quick"
+    "test:e2e:quick": "node test/e2e-tui.mjs --quick",
+    "test:drift": "node test/drift-watch.mjs"
   },
   "prepublishOnly": "node test/prepublish.mjs && node test/e2e-tui.mjs --full"
 }