oc-metricboard 0.1.20 → 0.1.22

package/dist/components/SidebarMetrics.js

@@ -1,11 +1,9 @@
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "@opentui/solid/jsx-runtime";
-/** @jsxImportSource @opentui/solid */
-/** @jsxRuntime automatic */
-import { createMemo, createSignal, onCleanup } from "solid-js";
+import { createMemo, createSignal } from "solid-js";
 import { formatTokens, formatDuration, formatElapsed, formatCacheRead, } from "../metrics";
 import { StatRow } from "./StatRow";
+import { element } from "./ui-element";
 // Upper bound on model-breakdown rows rendered in the sidebar. This runtime's
-// JSX tree is not reactive, so rows are pre-rendered once and toggled via
+// tree is not reactive, so rows are pre-rendered once and toggled via
 // registerSync; more sub-agents than this simply scroll off.
 const MAX_MODEL_ROWS = 8;
 export function SidebarMetrics(props) {
@@ -44,7 +42,13 @@ export function SidebarMetrics(props) {
             props.requestRender?.();
         });
     };
-    onCleanup(() => {
+    // Explicit disposal replacing the old onCleanup: the V2 Node loader builds
+    // this tree outside a dispose-owned JSX scope, so onCleanup was wired to a
+    // scope we do not control. The setup cleanup path (tui.tsx onDispose /
+    // tui-v2.tsx setup return) calls this instead.
+    const dispose = () => {
+        if (disposed)
+            return;
         disposed = true;
         refreshQueued = false;
         rowSyncs.clear();
@@ -52,7 +56,7 @@ export function SidebarMetrics(props) {
             clearInterval(interval);
         unsub();
         unsubController();
-    });
+    };
     interval = setInterval(bump, props.refreshIntervalMs);
     unsub = props.collector.subscribe(bump);
     unsubController = props.controller.subscribe(bump);
@@ -74,9 +78,9 @@ export function SidebarMetrics(props) {
         return props.controller.collapsed();
     });
     const headerLabel = () => props.controller.prefs().section.label;
-    // This runtime's JSX is non-reactive: the header <text> renders once at
-    // mount, so the ▶/▼ arrow would freeze on its initial value. Two static
-    // bold nodes (collapsed/expanded) are pre-rendered and toggled
+    // This runtime's tree is non-reactive: the header <text> nodes are built
+    // once at mount, so the ▶/▼ arrow would freeze on its initial value. Two
+    // static bold nodes (collapsed/expanded) are pre-rendered and toggled
     // imperatively through registerSync — the same mechanism as the rows.
     // Hidden node must be zero-sized in BOTH axes: visible=false only
     // suppresses painting, while yoga still reserves its box, which would
@@ -108,8 +112,9 @@ export function SidebarMetrics(props) {
             catch { /* cosmetic — ignore layout failures */ }
         }
     };
-    const unregisterHeaderSync = registerRowSync(syncHeader);
-    onCleanup(() => unregisterHeaderSync());
+    // Unregistered wholesale by dispose() via rowSyncs.clear() (the old
+    // per-sync onCleanup unregister went with the JSX scope).
+    registerRowSync(syncHeader);
     const attachCollapsedHeaderNode = (node) => {
         collapsedHeaderNode = node;
         syncHeader();
@@ -159,61 +164,214 @@ export function SidebarMetrics(props) {
     const sessionValue = () => {
         return formatElapsed(props.collector.getSessionElapsedMs(props.sessionID, currentScope(), performance.now()));
     };
-    return (_jsxs("box", { width: "100%", flexDirection: "column", height: sectionEnabled() ? "auto" : 0, children: [_jsxs("box", { width: "100%", flexDirection: "row", alignItems: "center", ref: attachBoxToggle, children: [_jsx("text", { ref: attachCollapsedHeaderNode, fg: props.theme.text, visible: false, children: _jsxs("b", { children: ["\u25B6 ", headerLabel()] }) }), _jsx("text", { ref: attachExpandedHeaderNode, fg: props.theme.text, children: _jsxs("b", { children: ["\u25BC ", headerLabel()] }) })] }), _jsxs("box", { width: "100%", flexDirection: "column", children: [_jsx(StatRow, { theme: props.theme, label: "Status", value: "No active request", dim: true, icon: "\u25CB", visible: expandedIdle, registerSync: registerRowSync }), rowVisible("speed") && (_jsx(StatRow, { theme: props.theme, label: "TPS", value: speedValue, accent: true, icon: "\u26A1", registerSync: registerRowSync, visible: expandedActive })), rowVisible("elapsed") && (_jsx(StatRow, { theme: props.theme, label: "Elapsed", value: elapsedValue, icon: "\u25B9", registerSync: registerRowSync, visible: expandedActive })), rowVisible("ttft") && (_jsx(StatRow, { theme: props.theme, label: "TTFT", value: ttftValue, icon: "\u23F1", registerSync: registerRowSync, visible: expandedActive })), (rowVisible("input") || rowVisible("output")) && (_jsx(StatRow, { theme: props.theme, label: "Tokens", value: tokenValue, registerSync: registerRowSync, visible: expandedActive })), rowVisible("cache") && (_jsx(StatRow, { theme: props.theme, label: "Cache", value: cacheValue, dim: true, icon: "\u25CB", registerSync: registerRowSync, visible: expandedActive })), rowVisible("session") && (_jsx(StatRow, { theme: props.theme, label: "Session", value: sessionValue, icon: "\u25F7", registerSync: registerRowSync, visible: expandedActive })), rowVisible("modelBreakdown") && (_jsx(_Fragment, { children: Array.from({ length: MAX_MODEL_ROWS }, (_, i) => {
-                            // Line 1: short model name + ×N session count.
-                            const modelLabel = () => {
-                                const m = currentAggregate()?.modelBreakdown[i];
-                                if (!m)
-                                    return "";
-                                const count = m.sessionCount > 1 ? ` ×${m.sessionCount}` : "";
-                                return `${m.modelID}${count}`;
-                            };
-                            // Line 2: metrics for that model group. Compact
-                            // format (no spaces after icons, no unit suffixes,
-                            // single-space separators) so the data line fits the
-                            // narrow sidebar on ONE line without right-edge
-                            // truncation.
-                            const modelValue = () => {
-                                const m = currentAggregate()?.modelBreakdown[i];
-                                if (!m)
-                                    return "";
-                                const parts = [];
-                                if (rowVisible("speed"))
-                                    parts.push(`⚡${m.liveTps !== null ? m.liveTps.toFixed(1) : "—"}`);
-                                if (rowVisible("ttft"))
-                                    parts.push(`⏱${m.ttft !== null ? " " + formatDuration(m.ttft) : " --"}`);
-                                if (rowVisible("input"))
-                                    parts.push(`↓${formatTokens(m.inputTokens)}`);
-                                if (rowVisible("output"))
-                                    parts.push(`↑${formatTokens(m.outputTokens)}`);
-                                return parts.join(" ");
-                            };
-                            const visible = () => expandedActive() && (currentAggregate()?.modelBreakdown.length ?? 0) > i;
-                            // The wrapper box reserves marginTop even when its
-                            // children collapse to height 0, leaving blank rows
-                            // while collapsed. Collapse height AND margins here.
-                            let wrapperNode;
-                            const syncWrapper = () => {
-                                if (disposed)
-                                    return;
-                                if (!wrapperNode || wrapperNode.isDestroyed)
-                                    return;
-                                const v = visible();
-                                try {
-                                    wrapperNode.height = v ? "auto" : 0;
-                                    wrapperNode.marginTop = v ? 1 : 0;
-                                    wrapperNode.marginLeft = v ? 1 : 0;
-                                }
-                                catch { /* ignore */ }
-                            };
-                            const attachWrapper = (node) => {
-                                wrapperNode = node;
-                                syncWrapper();
-                            };
-                            const unregisterWrapperSync = registerRowSync(syncWrapper);
-                            onCleanup(() => {
-                                unregisterWrapperSync();
-                            });
-                            return (_jsxs("box", { ref: attachWrapper, width: "100%", flexDirection: "column", marginLeft: 1, marginTop: 1, children: [_jsx(StatRow, { theme: props.theme, label: modelLabel, value: () => "", dim: true, registerSync: registerRowSync, visible: visible }), _jsx(StatRow, { theme: props.theme, label: () => "", value: modelValue, dim: true, registerSync: registerRowSync, visible: visible })] }));
-                        }) })), rowVisible("speed") && (_jsx(StatRow, { theme: props.theme, label: "TPS", value: speedValue, accent: true, icon: "\u26A1", registerSync: registerRowSync, visible: collapsedActive })), rowVisible("session") && (_jsx(StatRow, { theme: props.theme, label: "Session", value: sessionValue, icon: "\u25F7", registerSync: registerRowSync, visible: collapsedActive }))] })] }));
+    // --- tree (same hierarchy/spacing/order as the old JSX) ------------------
+    const headerBox = element("box", {
+        width: "100%",
+        flexDirection: "row",
+        alignItems: "center",
+        ref: attachBoxToggle,
+    }, [
+        element("text", {
+            ref: attachCollapsedHeaderNode,
+            fg: props.theme.text,
+            visible: false,
+        }, [
+            element("b", {}, ["▶ ", headerLabel()]),
+        ]),
+        element("text", {
+            ref: attachExpandedHeaderNode,
+            fg: props.theme.text,
+        }, [
+            element("b", {}, ["▼ ", headerLabel()]),
+        ]),
+    ]);
+    const rows = [];
+    rows.push(StatRow({
+        theme: props.theme,
+        label: "Status",
+        value: "No active request",
+        dim: true,
+        icon: "○",
+        visible: expandedIdle,
+        registerSync: registerRowSync,
+    }));
+    if (rowVisible("speed")) {
+        rows.push(StatRow({
+            theme: props.theme,
+            label: "TPS",
+            value: speedValue,
+            accent: true,
+            icon: "⚡",
+            registerSync: registerRowSync,
+            visible: expandedActive,
+        }));
+    }
+    if (rowVisible("elapsed")) {
+        rows.push(StatRow({
+            theme: props.theme,
+            label: "Elapsed",
+            value: elapsedValue,
+            icon: "▹",
+            registerSync: registerRowSync,
+            visible: expandedActive,
+        }));
+    }
+    if (rowVisible("ttft")) {
+        rows.push(StatRow({
+            theme: props.theme,
+            label: "TTFT",
+            value: ttftValue,
+            icon: "⏱",
+            registerSync: registerRowSync,
+            visible: expandedActive,
+        }));
+    }
+    if (rowVisible("input") || rowVisible("output")) {
+        rows.push(StatRow({
+            theme: props.theme,
+            label: "Tokens",
+            value: tokenValue,
+            registerSync: registerRowSync,
+            visible: expandedActive,
+        }));
+    }
+    if (rowVisible("cache")) {
+        rows.push(StatRow({
+            theme: props.theme,
+            label: "Cache",
+            value: cacheValue,
+            dim: true,
+            icon: "○",
+            registerSync: registerRowSync,
+            visible: expandedActive,
+        }));
+    }
+    if (rowVisible("session")) {
+        rows.push(StatRow({
+            theme: props.theme,
+            label: "Session",
+            value: sessionValue,
+            icon: "◷",
+            registerSync: registerRowSync,
+            visible: expandedActive,
+        }));
+    }
+    // Model breakdown rows for tree scope. This runtime's tree is NOT
+    // reactive — it is built once at mount, so inline .map() evaluates once:
+    // rows for sub-agents spawned later would never appear. Fix: pre-render a
+    // fixed number of rows that pull their data live from currentAggregate()
+    // on every registerSync tick, exactly like the static Speed/TTFT rows.
+    if (rowVisible("modelBreakdown")) {
+        for (let i = 0; i < MAX_MODEL_ROWS; i++) {
+            // Line 1: short model name + ×N session count.
+            const modelLabel = () => {
+                const m = currentAggregate()?.modelBreakdown[i];
+                if (!m)
+                    return "";
+                const count = m.sessionCount > 1 ? ` ×${m.sessionCount}` : "";
+                return `${m.modelID}${count}`;
+            };
+            // Line 2: metrics for that model group. Compact
+            // format (no spaces after icons, no unit suffixes,
+            // single-space separators) so the data line fits the
+            // narrow sidebar on ONE line without right-edge
+            // truncation.
+            const modelValue = () => {
+                const m = currentAggregate()?.modelBreakdown[i];
+                if (!m)
+                    return "";
+                const parts = [];
+                if (rowVisible("speed"))
+                    parts.push(`⚡${m.liveTps !== null ? m.liveTps.toFixed(1) : "—"}`);
+                if (rowVisible("ttft"))
+                    parts.push(`⏱${m.ttft !== null ? " " + formatDuration(m.ttft) : " --"}`);
+                if (rowVisible("input"))
+                    parts.push(`↓${formatTokens(m.inputTokens)}`);
+                if (rowVisible("output"))
+                    parts.push(`↑${formatTokens(m.outputTokens)}`);
+                return parts.join(" ");
+            };
+            const visible = () => expandedActive() && (currentAggregate()?.modelBreakdown.length ?? 0) > i;
+            // The wrapper box reserves marginTop even when its
+            // children collapse to height 0, leaving blank rows
+            // while collapsed. Collapse height AND margins here.
+            let wrapperNode;
+            const syncWrapper = () => {
+                if (disposed)
+                    return;
+                if (!wrapperNode || wrapperNode.isDestroyed)
+                    return;
+                const v = visible();
+                try {
+                    wrapperNode.height = v ? "auto" : 0;
+                    wrapperNode.marginTop = v ? 1 : 0;
+                    wrapperNode.marginLeft = v ? 1 : 0;
+                }
+                catch { /* ignore */ }
+            };
+            const attachWrapper = (node) => {
+                wrapperNode = node;
+                syncWrapper();
+            };
+            // Wrapper syncs are unregistered wholesale by dispose() via
+            // rowSyncs.clear() (the old per-row onCleanup unregister went
+            // with the JSX scope).
+            registerRowSync(syncWrapper);
+            rows.push(element("box", {
+                ref: attachWrapper,
+                width: "100%",
+                flexDirection: "column",
+                marginLeft: 1,
+                marginTop: 1,
+            }, [
+                StatRow({
+                    theme: props.theme,
+                    label: modelLabel,
+                    value: () => "",
+                    dim: true,
+                    registerSync: registerRowSync,
+                    visible,
+                }),
+                StatRow({
+                    theme: props.theme,
+                    label: () => "",
+                    value: modelValue,
+                    dim: true,
+                    registerSync: registerRowSync,
+                    visible,
+                }),
+            ]));
+        }
+    }
+    if (rowVisible("speed")) {
+        rows.push(StatRow({
+            theme: props.theme,
+            label: "TPS",
+            value: speedValue,
+            accent: true,
+            icon: "⚡",
+            registerSync: registerRowSync,
+            visible: collapsedActive,
+        }));
+    }
+    if (rowVisible("session")) {
+        rows.push(StatRow({
+            theme: props.theme,
+            label: "Session",
+            value: sessionValue,
+            icon: "◷",
+            registerSync: registerRowSync,
+            visible: collapsedActive,
+        }));
+    }
+    const contentBox = element("box", {
+        width: "100%",
+        flexDirection: "column",
+    }, rows);
+    const root = element("box", {
+        width: "100%",
+        flexDirection: "column",
+        height: sectionEnabled() ? "auto" : 0,
+    }, [headerBox, contentBox]);
+    return { node: root, dispose };
 }

package/dist/components/StatRow.js

@@ -1,13 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@opentui/solid/jsx-runtime";
-/** @jsxImportSource @opentui/solid */
-/** @jsxRuntime automatic */
-import { onCleanup } from "solid-js";
+import { element } from "./ui-element";
 export function StatRow(props) {
-    let disposed = false;
     let rowNode;
     let labelNode;
     let valueNode;
-    let unregisterSync;
     const fg = () => {
         if (props.warning)
             return props.theme.warning;
@@ -24,8 +19,6 @@ export function StatRow(props) {
     const visible = () => typeof props.visible === "function" ? props.visible() : props.visible !== false;
     const content = () => `${props.icon ? `${props.icon}  ` : ""}${value()}`;
     const syncContent = () => {
-        if (disposed)
-            return;
         const isVisible = visible();
         if (rowNode && !rowNode.isDestroyed) {
             rowNode.visible = isVisible;
@@ -45,7 +38,12 @@ export function StatRow(props) {
         valueNode.content = isVisible ? content() : "";
         valueNode.requestRender();
     };
-    unregisterSync = props.registerSync?.(syncContent);
+    // No onCleanup here: the tree is built outside a dispose-owned JSX scope
+    // on the Node loader path. Row syncs stop when the parent
+    // SidebarMetrics.dispose() clears its rowSyncs set, and the renderables
+    // themselves are destroyed with the host slot tree (isDestroyed guards
+    // above cover the not-yet-disposed window).
+    props.registerSync?.(syncContent);
     const attachRowNode = (node) => {
         rowNode = node;
         syncContent();
@@ -58,13 +56,22 @@ export function StatRow(props) {
         valueNode = node;
         syncContent();
     };
-    onCleanup(() => {
-        disposed = true;
-        unregisterSync?.();
-        unregisterSync = undefined;
-        rowNode = undefined;
-        labelNode = undefined;
-        valueNode = undefined;
-    });
-    return (_jsxs("box", { ref: attachRowNode, width: "100%", flexDirection: "row", justifyContent: "space-between", visible: visible(), children: [_jsx("text", { ref: attachLabelNode, fg: props.theme.textMuted, content: visible() ? label() : "" }), _jsx("text", { ref: attachValueNode, fg: fg(), content: content() })] }));
+    return element("box", {
+        ref: attachRowNode,
+        width: "100%",
+        flexDirection: "row",
+        justifyContent: "space-between",
+        visible: visible(),
+    }, [
+        element("text", {
+            ref: attachLabelNode,
+            fg: props.theme.textMuted,
+            content: visible() ? label() : "",
+        }),
+        element("text", {
+            ref: attachValueNode,
+            fg: fg(),
+            content: content(),
+        }),
+    ]);
 }

package/dist/components/ui-element.js

@@ -0,0 +1,40 @@
+/**
+ * Direct element factory (mirrors oh-my-opencode-slim's `element()` helper).
+ *
+ * The opencode v2.0.26 Node loader cannot resolve the automatic-JSX entry of
+ * `@opentui/solid` from plugin dist, so no JSX may remain in the sources:
+ * trees are built by hand with the same call shapes OMO uses —
+ * `createElement` + `setProp` + `insert` from the `@opentui/solid` package
+ * root.
+ *
+ * Semantics that MUST stay identical to the old JSX emit:
+ * - props are applied, children are inserted, then an optional `ref` callback
+ *   runs (JSX `spread` ran children -> ref -> props; running the ref AFTER the
+ *   props lets the imperative registerSync pass win at mount — on every mount
+ *   state the prop and the sync compute the same values, except where the sync
+ *   is the one that knows the truth, e.g. collapse state / hidden model rows).
+ * - children are handed to `insert` with ONE array call, matching the JSX
+ *   runtime's single-array `insertExpression`. Inserting string siblings
+ *   one-by-one would wipe the previously inserted text node.
+ * - children must be pre-evaluated values (no accessor functions): this
+ *   runtime's tree is non-reactive by design; dynamic values flow through the
+ *   components' registerSync -> requestRender path instead.
+ */
+import { createElement, insert, setProp } from "@opentui/solid";
+export function element(tag, props = {}, children = []) {
+    const node = createElement(tag);
+    let ref;
+    for (const [key, value] of Object.entries(props)) {
+        if (value === undefined)
+            continue;
+        if (key === "ref") {
+            ref = value;
+            continue;
+        }
+        setProp(node, key, value);
+    }
+    if (children.length > 0)
+        insert(node, children);
+    ref?.(node);
+    return node;
+}

package/dist/tui-v2.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from "@opentui/solid/jsx-runtime";
 /**
  * OpenCode V2 TUI entry (dual-host compatibility).
  *
@@ -39,8 +38,7 @@ import { jsx as _jsx } from "@opentui/solid/jsx-runtime";
  * - message.updated passthrough (user-message turn anchor) — turn start is
  *   covered by session.execution.started / step.started
  */
-/** @jsxImportSource @opentui/solid */
-/** @jsxRuntime automatic */
+import { createElement } from "@opentui/solid";
 import { createCollector } from "./collector";
 import { getConfig } from "./config";
 import { log } from "./logger";
@@ -271,8 +269,20 @@ export function setupTuiV2(ctx) {
         render: (input) => {
             const sessionID = input?.sessionID ?? "";
             if (!sessionID)
-                return _jsx("box", {});
-            return (_jsx(SidebarMetrics, { sessionID: sessionID, collector: collector, refreshIntervalMs: config.refreshIntervalMs, barConfig: config, theme: theme, controller: controller, requestRender: requestRender }));
+                return createElement("box");
+            const sidebar = SidebarMetrics({
+                sessionID,
+                collector,
+                refreshIntervalMs: config.refreshIntervalMs,
+                barConfig: config,
+                theme: theme,
+                controller,
+                requestRender,
+            });
+            // Component-owned timers/subscriptions are torn down from the
+            // setup cleanup path (the disposers array returned below).
+            disposers.push(sidebar.dispose);
+            return sidebar.node;
         },
     }));
     return () => {

package/dist/tui.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from "@opentui/solid/jsx-runtime";
 import { createCollector } from "./collector";
 import { getConfig } from "./config";
 import { log } from "./logger";
@@ -15,15 +14,35 @@ const plugin = async (api, _options, _meta) => {
     const effectiveOrder = computeEffectiveOrder(seedRoot, PLUGIN_KEY, DEFAULT_SLOT_ORDER);
     const prefs = resolveMetricsPrefs(seedRoot);
     const controller = createMetricsSidebarController(prefs, () => api.renderer.requestRender());
+    // Explicit teardown for component-owned timers/subscriptions (replaces
+    // the components' old onCleanup, which is not reliable on the V2 Node
+    // loader path). Drained from the plugin dispose hook below.
+    const sidebarDisposers = [];
     api.slots.register({
         order: effectiveOrder,
         slots: {
             sidebar_content(ctx, props) {
-                return (_jsx(SidebarMetrics, { sessionID: props.session_id, collector: collector, refreshIntervalMs: config.refreshIntervalMs, barConfig: config, theme: ctx.theme.current, controller: controller, requestRender: () => api.renderer.requestRender() }));
+                const sidebar = SidebarMetrics({
+                    sessionID: props.session_id,
+                    collector,
+                    refreshIntervalMs: config.refreshIntervalMs,
+                    barConfig: config,
+                    theme: ctx.theme.current,
+                    controller: controller,
+                    requestRender: () => api.renderer.requestRender(),
+                });
+                sidebarDisposers.push(sidebar.dispose);
+                return sidebar.node;
             },
         },
     });
     api.lifecycle.onDispose(() => {
+        for (const dispose of sidebarDisposers.splice(0)) {
+            try {
+                dispose();
+            }
+            catch { /* ignore */ }
+        }
         collector.dispose();
     });
     log("opencode-metrics sidebar initialized");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oc-metricboard",
-  "version": "0.1.20",
+  "version": "0.1.22",
   "description": "OpenCode TUI sidebar plugin showing real-time LLM metrics (TPS, TTFT, tokens) with sub-agent × model breakdown",
   "keywords": [
     "opencode",
@@ -66,6 +66,7 @@
     "src/event-shapes.ts",
     "src/components/SidebarMetrics.tsx",
     "src/components/StatRow.tsx",
+    "src/components/ui-element.ts",
     "src/scripts/init-tui-preferences.ts",
     "README.md"
   ],
@@ -86,9 +87,10 @@
     "typescript": "^5.0.0"
   },
   "dependencies": {
-    "@opentui/core": "0.5.17",
+    "comment-json": "^5.0.0"
+  },
+  "optionalDependencies": {
     "@opentui/solid": "0.5.17",
-    "comment-json": "^5.0.0",
     "solid-js": "1.9.12"
   },
   "peerDependencies": {