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

package/dist/usage-panel.js

@@ -0,0 +1,136 @@
+import { createComponent as _$createComponent } from "@opentui/solid";
+import { effect as _$effect } from "@opentui/solid";
+import { insertNode as _$insertNode } from "@opentui/solid";
+import { insert as _$insert } from "@opentui/solid";
+import { memo as _$memo } from "@opentui/solid";
+import { setProp as _$setProp } from "@opentui/solid";
+import { createElement as _$createElement } from "@opentui/solid";
+/**
+ * supercode.token-usage — TUI sidebar section showing the cumulative Token
+ * Usage of the current session family: token totals, cache rate, completed
+ * step count, generation speed/TTFT, and provisional diagnostics for the
+ * visible stream.
+ * Family totals include all subagent descendants; when they contribute the
+ * section title becomes "Token Usage (including subagents)".
+ *
+ * This file is only the View plus slot registration: it computes no numbers
+ * and formats nothing — all logic lives in ./usage-model.ts (the tested seam).
+ *
+ * Colors always come from the live host theme; collapse state is component
+ * memory, expanded by default and not persisted (spec: Out of Scope).
+ */
+/** @jsxImportSource @opentui/solid */
+import { createEffect, createMemo, createSignal, For, onCleanup, Show, untrack } from "solid-js";
+import { USAGE_SECTION_TITLE, USAGE_SECTION_TITLE_WITH_SUBAGENTS, USAGE_STATUS_TEXT, createUsageModel } from "./usage-model.js";
+
+/**
+ * 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 = {
+  createSignal,
+  createMemo,
+  createEffect,
+  onCleanup,
+  untrack
+};
+function Section(props) {
+  const theme = () => props.api.theme.current;
+  const [collapsed, setCollapsed] = createSignal(false);
+  const model = createUsageModel(props.api, () => props.session_id, solid);
+  return (() => {
+    var _el$ = _$createElement("box"),
+      _el$2 = _$createElement("box"),
+      _el$3 = _$createElement("text"),
+      _el$4 = _$createElement("text"),
+      _el$5 = _$createElement("b");
+    _$insertNode(_el$, _el$2);
+    _$insertNode(_el$2, _el$3);
+    _$insertNode(_el$2, _el$4);
+    _$setProp(_el$2, "flexDirection", "row");
+    _$setProp(_el$2, "gap", 1);
+    _$setProp(_el$2, "onMouseDown", () => setCollapsed(!collapsed()));
+    _$insert(_el$3, () => collapsed() ? "▶" : "▼");
+    _$insertNode(_el$4, _el$5);
+    _$insert(_el$5, () => model.includesSubagents() ? USAGE_SECTION_TITLE_WITH_SUBAGENTS : USAGE_SECTION_TITLE);
+    _$insert(_el$, _$createComponent(Show, {
+      get when() {
+        return !collapsed();
+      },
+      get children() {
+        return [_$createComponent(Show, {
+          get when() {
+            return model.status() !== "ready";
+          },
+          get children() {
+            var _el$6 = _$createElement("text");
+            _$insert(_el$6, () => USAGE_STATUS_TEXT[model.status()]);
+            _$effect(_$p => _$setProp(_el$6, "fg", theme().textMuted, _$p));
+            return _el$6;
+          }
+        }), _$createComponent(For, {
+          get each() {
+            return model.rows();
+          },
+          children: row => (() => {
+            var _el$7 = _$createElement("box"),
+              _el$8 = _$createElement("text"),
+              _el$9 = _$createElement("text");
+            _$insertNode(_el$7, _el$8);
+            _$insertNode(_el$7, _el$9);
+            _$setProp(_el$7, "flexDirection", "row");
+            _$setProp(_el$7, "justifyContent", "space-between");
+            _$insert(_el$8, () => row.label);
+            _$insert(_el$9, () => row.value);
+            _$effect(_p$ => {
+              var _v$3 = theme().textMuted,
+                _v$4 = theme().text;
+              _v$3 !== _p$.e && (_p$.e = _$setProp(_el$8, "fg", _v$3, _p$.e));
+              _v$4 !== _p$.t && (_p$.t = _$setProp(_el$9, "fg", _v$4, _p$.t));
+              return _p$;
+            }, {
+              e: undefined,
+              t: undefined
+            });
+            return _el$7;
+          })()
+        })];
+      }
+    }), null);
+    _$effect(_p$ => {
+      var _v$ = theme().text,
+        _v$2 = theme().text;
+      _v$ !== _p$.e && (_p$.e = _$setProp(_el$3, "fg", _v$, _p$.e));
+      _v$2 !== _p$.t && (_p$.t = _$setProp(_el$4, "fg", _v$2, _p$.t));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
+    return _el$;
+  })();
+}
+const tui = async api => {
+  // Order 150: internal sidebar sections sit at 100/200/300/400/500, so this
+  // lands right after the first block without moving any existing section.
+  api.slots.register({
+    order: 150,
+    slots: {
+      sidebar_content(_ctx, props) {
+        return _$createComponent(Section, {
+          api: api,
+          get session_id() {
+            return props.session_id;
+          }
+        });
+      }
+    }
+  });
+};
+const plugin = {
+  id: "supercode.token-usage",
+  tui
+};
+export default plugin;

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@glaicer/supercode-token-usage-panel",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "OpenCode TUI sidebar section: cumulative token usage and cost of the current session family.",
   "type": "module",
   "license": "MIT",
@@ -21,19 +21,18 @@
     "generation-speed"
   ],
   "exports": {
-    "./tui": "./src/usage-panel.tsx"
+    "./tui": "./dist/usage-panel.js"
   },
   "files": [
-    "src",
-    "!src/*.test.ts",
-    "!src/fake-tui-api.ts",
-    "!src/test-fixtures.ts",
-    "!src/fixtures/**"
+    "dist"
   ],
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
+    "build": "node scripts/build.mjs",
+    "check:package": "node scripts/check-package.mjs",
+    "prepack": "npm run build && npm run check:package",
     "test": "node --test --conditions browser 'src/**/*.test.ts'",
     "typecheck": "tsc --noEmit"
   },
@@ -44,8 +43,11 @@
     "solid-js": "1.9.12"
   },
   "devDependencies": {
+    "@babel/core": "7.28.0",
+    "@babel/preset-typescript": "7.27.1",
     "@opencode-ai/sdk": "1.18.21",
     "@types/node": "24.13.3",
+    "babel-preset-solid": "1.9.12",
     "typescript": "5.8.2"
   },
   "engines": {