@glaicer/supercode-token-usage-panel 0.1.0 → 0.1.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@glaicer/supercode-token-usage-panel",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "OpenCode TUI sidebar section: cumulative token usage and cost of the current session family.",
   "type": "module",
   "license": "MIT",

package/src/usage-model.ts

@@ -5,7 +5,7 @@
  * folds completed steps/speed/TTFT, and estimates the current visible stream from
  * deltas. Exposes only ready-to-render rows plus a state flag.
  */
-import { createEffect, createMemo, createSignal, onCleanup, untrack } from "solid-js";
+import type * as Solid from "solid-js";
 import type { AssistantMessage, Message, Part, Session } from "@opencode-ai/sdk/v2";
 import type { TuiPluginApi } from "@opencode-ai/plugin/tui";
 
@@ -475,15 +475,37 @@ async function fetchFamily(
   return fetchBranch(client, root);
 }
 
+/**
+ * Reactive primitives owned by the TUI entrypoint.
+ *
+ * The entry (usage-panel.tsx) imports these from "solid-js", where the host
+ * rewrites them to its own runtime. usage-model.ts must not value-import
+ * "solid-js" itself: as an npm-installed file under node_modules, the host's
+ * prescan can miss this sibling, leaving it bound to an isolated solid-js
+ * copy. Signals from two runtimes never notify each other's renderers, which
+ * freezes the panel at its first paint ("No usage yet.").
+ */
+export interface SolidRuntime {
+  createSignal: typeof Solid.createSignal;
+  createMemo: typeof Solid.createMemo;
+  createEffect: typeof Solid.createEffect;
+  onCleanup: typeof Solid.onCleanup;
+  untrack: typeof Solid.untrack;
+}
+
 /**
  * Usage Model over OpenCode's session aggregate. Totals cover the current
  * session plus all of its descendants (subagents); request sequencing keeps
  * slower responses from overwriting newer ones.
  */
-export function createUsageModel(api: TuiPluginApi, sessionId: () => string): UsageModel {
-  const [remote, setRemote] = createSignal<RemoteState>();
-  const [liveSpeed, setLiveSpeed] = createSignal<LiveSpeedState>();
-  const [liveTtft, setLiveTtft] = createSignal<LiveTtftState>();
+export function createUsageModel(
+  api: TuiPluginApi,
+  sessionId: () => string,
+  solid: SolidRuntime,
+): UsageModel {
+  const [remote, setRemote] = solid.createSignal<RemoteState>();
+  const [liveSpeed, setLiveSpeed] = solid.createSignal<LiveSpeedState>();
+  const [liveTtft, setLiveTtft] = solid.createSignal<LiveTtftState>();
   let request = 0;
   let nextAsyncRequest = 0;
   const memberRequests = new Map<string, number>();
@@ -650,7 +672,7 @@ export function createUsageModel(api: TuiPluginApi, sessionId: () => string): Us
       });
   };
 
-  createEffect(() => {
+  solid.createEffect(() => {
     const sessionID = sessionId();
     clearProvisional();
     members = new Set([sessionID]);
@@ -662,7 +684,7 @@ export function createUsageModel(api: TuiPluginApi, sessionId: () => string): Us
     failedMembers.clear();
     tombstones.clear();
     setRemote(undefined);
-    untrack(() => {
+    solid.untrack(() => {
       ttftTurns = completedTurns(sessionID);
       refresh(sessionID);
     });
@@ -939,7 +961,7 @@ export function createUsageModel(api: TuiPluginApi, sessionId: () => string): Us
   const offSessionIdle = api.event.on("session.idle", (event) => {
     if (event.properties.sessionID === sessionId()) clearProvisional();
   });
-  onCleanup(() => {
+  solid.onCleanup(() => {
     request++;
     clearProvisional();
     offSessionCreated();
@@ -955,7 +977,7 @@ export function createUsageModel(api: TuiPluginApi, sessionId: () => string): Us
     offSessionIdle();
   });
 
-  const snapshot = createMemo<
+  const snapshot = solid.createMemo<
     { status: UsageStatus; rows: readonly UsageRow[]; hasDescendants: boolean }
   >(() => {
     try {

package/src/usage-panel.tsx

@@ -13,19 +13,28 @@
  * memory, expanded by default and not persisted (spec: Out of Scope).
  */
 /** @jsxImportSource @opentui/solid */
-import { createSignal, For, Show } from "solid-js";
+import { createEffect, createMemo, createSignal, For, onCleanup, Show, untrack } from "solid-js";
 import type { TuiPlugin, TuiPluginApi, TuiPluginModule } from "@opencode-ai/plugin/tui";
 import {
   USAGE_SECTION_TITLE,
   USAGE_SECTION_TITLE_WITH_SUBAGENTS,
   USAGE_STATUS_TEXT,
   createUsageModel,
+  type SolidRuntime,
 } from "./usage-model.ts";
 
+/**
+ * The host rewrites this file's "solid-js" import to its own runtime. The
+ * model builds all of its signals on these exact primitives (see
+ * SolidRuntime), so the panel stays in the host's reactive graph even when
+ * installed as an npm package under node_modules.
+ */
+const solid: SolidRuntime = { createSignal, createMemo, createEffect, onCleanup, untrack };
+
 function Section(props: { api: TuiPluginApi; session_id: string }) {
   const theme = () => props.api.theme.current;
   const [collapsed, setCollapsed] = createSignal(false);
-  const model = createUsageModel(props.api, () => props.session_id);
+  const model = createUsageModel(props.api, () => props.session_id, solid);
 
   return (
     <box>