opencode-context-indicator 1.7.1 → 1.8.0

package/lib/tui-sidebar.ts

@@ -0,0 +1,153 @@
+// lib/tui-sidebar.ts — the `sidebar.content` slot component.
+//
+// No JSX and no `@jsxImportSource` pragma anywhere in this file: see the long
+// explanation at the top of lib/tui-h.ts. Every dynamic prop is a getter, which
+// is exactly what the Solid compiler would have emitted for `prop={expr}`.
+//
+// This file lives in lib/ rather than in the tui.ts entry because the sidebar
+// is the surface that renders the per-category breakdown; the entry stays a
+// thin setup shell.
+
+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"
+import { c, h } from "./tui-h.ts"
+
+// 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))})` : ""}`
+  }
+
+  // One muted category row. The accessor is called INSIDE the getter: the row
+  // element is created once and then updates in place on every poll, exactly
+  // like `<text fg={muted()}>{line(...)}</text>` in JSX.
+  const row = (label: string, value: () => unknown) =>
+    h("text", {
+      get fg() {
+        return muted()
+      },
+      get children() {
+        return line(label, value())
+      },
+    })
+
+  // `system` and `tool schemas` are absent from state files written by older
+  // plugin versions (null) and render as "n/a" instead of a zero row.
+  const optionalRow = (label: string, value: () => number | null | undefined) =>
+    h("text", {
+      get fg() {
+        return muted()
+      },
+      get children() {
+        const v = value()
+        return v == null
+          ? `${label.padEnd(LABEL_WIDTH)}     n/a`
+          : line(label, v)
+      },
+    })
+
+  return h("box", {
+    flexDirection: "column",
+    get children() {
+      return [
+        h("text", {
+          get fg() {
+            return base()
+          },
+          get children() {
+            return "Context"
+          },
+        }),
+        c(Show, {
+          get when() {
+            return e()
+          },
+          get fallback() {
+            return h("text", {
+              get fg() {
+                return muted()
+              },
+              get children() {
+                return "  no data yet"
+              },
+            })
+          },
+          get children() {
+            return [
+              h("text", {
+                get fg() {
+                  return base()
+                },
+                get children() {
+                  return header()
+                },
+              }),
+              row("user", () => e()?.categories?.user),
+              row("assistant", () => e()?.categories?.assistant),
+              row("reasoning", () => e()?.categories?.reasoning),
+              row("tool args", () => e()?.categories?.toolArgs),
+              row("tool out", () => e()?.categories?.toolOut),
+              optionalRow("system", () => e()?.categories?.system),
+              optionalRow("tool schemas", () => e()?.categories?.toolSchemas),
+              row("other", () => e()?.categories?.other),
+              c(Show, {
+                get when() {
+                  return e()?.compactStale === true
+                },
+                get children() {
+                  return h("text", {
+                    get fg() {
+                      return muted()
+                    },
+                    get children() {
+                      return "  stale — compacted"
+                    },
+                  })
+                },
+              }),
+              h("text", {
+                get fg() {
+                  return muted()
+                },
+                get children() {
+                  return `updated ${updatedAt(e()?.updatedAt)}`
+                },
+              }),
+            ]
+          },
+        }),
+      ]
+    },
+  })
+}

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "opencode-context-indicator",
-  "version": "1.7.1",
+  "version": "1.8.0",
   "description": "Real-time context-window usage for OpenCode: per-category token breakdown, /context-diff, a zero-LLM /cx panel with per-session cost and a searchable family-session picker, a TUI sidebar, and an experimental Desktop panel. Dual V1 + V2 plugin entry.",
   "type": "module",
   "license": "MIT",
   "exports": {
     ".": "./index.js",
-    "./tui": "./tui.tsx",
+    "./tui": "./tui.ts",
     "./rpc": "./lib/rpc.js",
     "./gui-experimental": "./dist/gui-experimental.cjs"
   },
   "files": [
     "index.js",
     "lib/",
-    "tui.tsx",
+    "tui.ts",
     "dist/",
     "docs/",
     "README.md",
@@ -52,7 +52,7 @@
   },
   "peerDependencies": {
     "@opencode/plugin": ">=2.0.16",
-    "@opentui/core": ">=0.5.14",
+    "@opentui/core": ">=0.8.0",
     "solid-js": ">=1.9.0"
   },
   "peerDependenciesMeta": {
@@ -66,12 +66,10 @@
       "optional": true
     }
   },
-  "dependencies": {
-    "@opentui/solid": "0.7.0"
-  },
   "devDependencies": {
-    "@opencode/plugin": "2.2.0",
-    "@opentui/core": "0.7.0",
+    "@opencode/plugin": "2.2.5",
+    "@opentui/core": "0.8.0",
+    "@opentui/solid": "0.8.0",
     "@types/node": "26.6.3",
     "esbuild": "^0.28.2",
     "node-pty": "^1.1.0",
@@ -87,7 +85,7 @@
     "test:e2e": "node test/e2e-tui.mjs --full",
     "test:e2e:quick": "node test/e2e-tui.mjs --quick",
     "test:drift": "node test/drift-watch.mjs",
-    "test:drift:strict": "node test/drift-watch.mjs --strict"
-  },
-  "prepublishOnly": "npm run build:gui && node test/prepublish.mjs && node test/e2e-tui.mjs --full"
+    "test:drift:strict": "node test/drift-watch.mjs --strict",
+    "prepublishOnly": "npm run build:gui && node test/prepublish.mjs && node test/e2e-tui.mjs --full"
+  }
 }

package/tui.ts

@@ -0,0 +1,317 @@
+// tui.ts — optional OpenCode TUI surfaces for `opencode-context-indicator`.
+//
+// NO JSX AND NO `@jsxImportSource` PRAGMA IN THIS PACKAGE. Read the long
+// explanation at the top of lib/tui-h.ts before touching any TUI file:
+// OpenCode installs npm plugins inside a `node_modules` tree, where the host
+// SKIPS the Solid/Babel JSX transform (upstream anomalyco/opencode#33884).
+// Building the tree with jsx() and getter props keeps the surfaces in sync with
+// the 1 s poll from BOTH install layouts (npm and file://), and lets the
+// package declare no runtime dependencies at all.
+//
+// This file is the ENTRY + setup wiring only. The components and the data layer
+// live in lib/:
+//   - lib/tui-sidebar.ts   the `sidebar.content` slot component
+//   - lib/tui-panel.ts     the `session.panel` component (BreakdownPanel)
+//   - lib/tui-h.ts         the jsx()/component() builders (only jsx-runtime user)
+//   - lib/tui-data.js      state.json bridge, family walk, formatting helpers
+//                          (+ lib/tui-data.d.ts for the shared types)
+//   - lib/tui-theme.js     theme-token helper
+//   - lib/contributors.js  measured-contributor computation + redacted export
+//
+// Exposed as the `./tui` package entry ("beside the main plugin for automatic
+// loading"). OpenCode loads it only in the terminal TUI; it is NOT loaded in
+// the Desktop app (Desktop exposes no TUI slot API). It renders the
+// per-category context breakdown produced by the server plugin (index.js) into
+// the session sidebar via `append: "sidebar.content"` and into a full session
+// panel (`append: "session.panel"`) opened by the `cx` slash command / keymap
+// layer registered from an `append: "app"` slot.
+//
+// Data bridge: the server plugin rewrites
+//   %TEMP%/opencode-context-indicator-state.json
+// (see writeStateFile() in index.js) on every breakdown update. This module
+// ONLY reads that file and re-polls it once per second; a missing or corrupt
+// file renders "no data yet". The main plugin never imports the TUI entry, so
+// the absence of the OpenTUI peers cannot break the server/V1 path.
+//
+// Runtime requirements: @opentui/core, @opentui/solid and solid-js are resolved
+// by OpenCode at runtime — it rewrites these specifiers to in-process modules
+// (`nodeModulesRuntimeSpecifiers: true` in @opentui/core's
+// DEFAULT_RUNTIME_PLUGIN_REWRITE_OPTIONS) for any file under node_modules, so
+// @opentui/solid is a DEV dependency here (types + local tooling only), never a
+// production one. Shipping it dragged in a duplicate @opentui/core and the whole
+// Babel toolchain for nothing.
+
+import { Plugin } from "@opencode/plugin/tui"
+import { createSignal, Show } from "solid-js"
+import { appendFileSync, mkdirSync, writeFileSync } from "node:fs"
+import { tmpdir } from "node:os"
+import { dirname, join } from "node:path"
+import type { StateEntry } from "./lib/tui-data.js"
+import { POLL_MS, readSnapshot } from "./lib/tui-data.js"
+import { c as comp, h } from "./lib/tui-h.ts"
+import { Sidebar } from "./lib/tui-sidebar.ts"
+import { BreakdownPanel } from "./lib/tui-panel.ts"
+
+// Session-panel contribution name. Session-panel names are shared selection
+// values (not registered claims), so it MUST be plugin-prefixed to avoid
+// colliding with another plugin's panel.
+const PANEL_NAME = "context-indicator.breakdown"
+
+export default Plugin.define({
+  id: "context-indicator.tui",
+  setup(context) {
+    // Re-read the bridge file once per second and re-render reactively. ONE
+    // ticker drives BOTH surfaces, and the snapshot is cached per tick: every
+    // consumer (sidebar, panel data, messages) shares a single readFileSync.
+    const [tick, setTick] = createSignal(0)
+    let currentSession: string | undefined
+    let snapCache: Record<string, StateEntry> | null = null
+    let snapAt = -1
+    const snapshot = (): Record<string, StateEntry> => {
+      const t = tick() // track the ticker so reads re-run every poll
+      if (snapCache === null || snapAt !== t) {
+        snapCache = readSnapshot()
+        snapAt = t
+      }
+      return snapCache
+    }
+    const entry = (): StateEntry | null =>
+      snapshot()[currentSession ?? ""] ?? null
+    const refresh = () => setTick((n) => n + 1)
+    const timer = setInterval(() => setTick((n) => n + 1), POLL_MS)
+
+    // E2E liveness probe (test/e2e-tui.mjs Check C only; inert in production).
+    //
+    // Check A proves the ./tui entry LOADED; this probe proves the tree stays
+    // REACTIVE when the package is loaded from a `node_modules` path — the exact
+    // shape of an npm install, where the host skips its Solid JSX transform
+    // (#33884). The node is built by the same h()/getter builders as the real
+    // sidebar and is driven by the same 1 s poll tick; its `ref` is sampled into
+    // a file because pty screen text is not a reliable liveness oracle
+    // (differential redraws).
+    const livenessFile = process.env.OPENCODE_CONTEXT_INDICATOR_TUI_LIVENESS
+    let probeNode: unknown = null
+    const setProbeNode = (el: unknown) => {
+      probeNode = el
+    }
+    // `ref` + getter-driven props: the text content and the foreground colour
+    // both come from the poll tick, so a frozen (untransformed) tree leaves the
+    // sampled values constant. `plainText` is the renderable's own rendered text
+    // — a throwaway pty probe showed it tracks updates reliably while screen
+    // scraping does not (hence Check C reads this file, not the pty screen).
+    const livenessProbe = livenessFile
+      ? () =>
+          h("box", {
+            flexDirection: "column",
+            get children() {
+              return [
+                h("text", {
+                  ref: setProbeNode,
+                  get fg() {
+                    return tick() % 2 ? "#ff0000" : "#0000ff"
+                  },
+                  get children() {
+                    return `probe ${tick()}`
+                  },
+                }),
+              ]
+            },
+          })
+      : null
+    const noteLive = livenessFile
+      ? (line: string) => {
+          try {
+            appendFileSync(livenessFile, line + "\n")
+          } catch {
+            /* probe is best-effort test instrumentation */
+          }
+        }
+      : null
+    let probeTimer: ReturnType<typeof setInterval> | undefined
+    if (livenessFile) {
+      try {
+        mkdirSync(dirname(livenessFile), { recursive: true })
+        writeFileSync(livenessFile, "")
+      } catch {
+        /* probe is best-effort test instrumentation */
+      }
+      probeTimer = setInterval(() => {
+        let text = "?"
+        let fg = "?"
+        try {
+          const node = probeNode as Record<string, unknown> | null
+          text = String(node?.plainText ?? node?.text ?? "?")
+          fg = String(node?.fg ?? node?.foregroundColor ?? "?")
+        } catch {
+          /* node not mounted yet */
+        }
+        try {
+          appendFileSync(livenessFile, `tick=${tick()} fg=${fg} text=${text}\n`)
+        } catch {
+          /* probe is best-effort test instrumentation */
+        }
+      }, 250)
+    }
+
+    // Registering a surface must never throw out of setup(): the peer floor is
+    // @opencode/plugin >=2.0.16, and a host without the slot API would otherwise
+    // take the whole TUI entry down — losing every other surface with it. A
+    // missing surface is logged once and the rest keeps working.
+    const registerSlot = (
+      name: string,
+      register: () => (() => void) | undefined,
+    ): (() => void) => {
+      try {
+        const unregister = register()
+        return () => {
+          try {
+            unregister?.()
+          } catch {
+            /* ignore */
+          }
+        }
+      } catch (error) {
+        console.error(
+          `[context-indicator] TUI slot "${name}" unavailable: ${String(error)}`,
+        )
+        return () => {}
+      }
+    }
+
+    const unregisterSidebar = registerSlot("sidebar.content", () =>
+      context.ui.slot({
+        append: "sidebar.content",
+        render: ({ sessionID }) => {
+          currentSession = sessionID
+          noteLive?.("slot-render sidebar.content")
+          const sidebar = comp(Sidebar, { entry })
+          if (!livenessProbe) return sidebar
+          // The probe must live in a real container: a bare array returned from a
+          // slot render is not mounted by every host version.
+          return h("box", {
+            flexDirection: "column",
+            get children() {
+              return [sidebar, livenessProbe()]
+            },
+          })
+        },
+      }),
+    )
+
+    // The probe is ALSO mounted in the `app` slot, which the host renders even
+    // when no session/sidebar is on screen (a standalone instance with no prompt
+    // has no sidebar.content contribution to mount). Whichever slot mounts
+    // first fills the sample file; both share the same poll tick.
+    const unregisterProbe = livenessProbe
+      ? registerSlot("app", () =>
+          context.ui.slot({
+            append: "app",
+            render: () => {
+              noteLive?.("slot-render app")
+              return livenessProbe()
+            },
+          }),
+        )
+      : undefined
+
+    // A `session.panel` contribution is independently selectable: it renders
+    // only while its name is the selected one, and the root session comes from
+    // panel.sessionID.
+    const unregisterPanel = registerSlot("session.panel", () =>
+      context.ui.slot({
+        append: "session.panel",
+        render: (panel) =>
+          comp(Show, {
+            get when() {
+              return panel.name === PANEL_NAME
+            },
+            get children() {
+              return comp(BreakdownPanel, { panel, snapshot, refresh })
+            },
+          }),
+      }),
+    )
+
+    // The `app` slot renders nothing itself; it exists to register the global
+    // keymap layer (slash command `cx` -> open the panel). The layer is owned by
+    // this slot and disposed when the slot unregisters.
+    const unregisterCommands = registerSlot("app (keymap)", () =>
+      context.ui.slot({
+        append: "app",
+        render: () => {
+          const keymap = context?.keymap
+          if (keymap && typeof keymap.layer === "function") {
+            keymap.layer(() => ({
+              mode: "global",
+              commands: [
+                {
+                  id: "context-indicator.breakdown",
+                  title: "Context breakdown panel",
+                  slash: { name: "cx" },
+                  // Palette-visible AND directly bound: subagent session views
+                  // force the composer into its "subagents" tab, which pushes
+                  // keymap mode "composer" — the base-mode palette binding
+                  // (ctrl+p) is inert there and there is no prompt to type /cx.
+                  // A bind on this mode:"global" layer fires in every mode
+                  // (leader matches <leader>b "toggle sidebar"; f4 as a direct
+                  // single-chord fallback).
+                  palette: true,
+                  bind: "<leader>c,f4",
+                  run: () => {
+                    const panelApi = context?.ui?.panel
+                    if (panelApi && typeof panelApi.open === "function") {
+                      panelApi.open(PANEL_NAME)
+                    }
+                  },
+                },
+              ],
+            }))
+          }
+          return null
+        },
+      }),
+    )
+
+    // One-time live-surface marker. The e2e Check A asserts this line from the
+    // isolated instance's private log: it proves the ./tui entry not only
+    // loaded but REGISTERED its surfaces — a host-transform failure of this
+    // file would otherwise die silently between "loading plugin" and here.
+    console.log(
+      "[context-indicator] live TUI surfaces registered (sidebar + session.panel + keymap)",
+    )
+
+    // E2E instrumentation (only when test/e2e-tui.mjs sets the marker env):
+    // same proof as the console line above, but via a FILE — the TUI captures
+    // console output, so the log channel cannot carry it. Production runs
+    // never set the env and never write the stamp.
+    if (process.env.OPENCODE_CONTEXT_INDICATOR_TUI_MARKER) {
+      try {
+        mkdirSync(join(tmpdir(), "opencode-context-indicator"), { recursive: true })
+        writeFileSync(
+          join(tmpdir(), "opencode-context-indicator", "tui-live.stamp"),
+          new Date().toISOString(),
+          "utf8",
+        )
+      } catch {
+        /* marker is best-effort test instrumentation */
+      }
+    }
+
+    return () => {
+      clearInterval(timer)
+      if (probeTimer) clearInterval(probeTimer)
+      for (const unregister of [
+        unregisterSidebar,
+        unregisterProbe,
+        unregisterPanel,
+        unregisterCommands,
+      ]) {
+        try {
+          unregister?.()
+        } catch {
+          /* ignore */
+        }
+      }
+    }
+  },
+})

package/lib/tui-sidebar.tsx

@@ -1,76 +0,0 @@
-/** @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()}>{line("tool out", e()?.categories?.toolOut)}</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>
-        <Show when={e()?.compactStale === true}>
-          <text fg={muted()}>{"  stale — compacted"}</text>
-        </Show>
-        <text fg={muted()}>{`updated ${updatedAt(e()?.updatedAt)}`}</text>
-      </Show>
-    </box>
-  )
-}