oc-metricboard 0.1.21 → 0.1.23

package/src/components/StatRow.tsx

@@ -1,83 +1,87 @@
-/** @jsxImportSource @opentui/solid */
-/** @jsxRuntime automatic */
-import { onCleanup } from "solid-js"
-import type { TuiThemeCurrent } from "@opencode-ai/plugin/tui"
-import type { BoxRenderable, TextRenderable } from "@opentui/core"
-
-interface StatRowProps {
-    theme: TuiThemeCurrent
-    label: string | (() => string)
-    value: string | (() => string)
-    accent?: boolean
-    warning?: boolean
-    success?: boolean
-    dim?: boolean
-    icon?: string
-    visible?: boolean | (() => boolean)
-    registerSync?: (sync: () => void) => () => void
-}
-
-export function StatRow(props: StatRowProps) {
-    let disposed = false
-    let rowNode: BoxRenderable | undefined
-    let labelNode: TextRenderable | undefined
-    let valueNode: TextRenderable | undefined
-    let unregisterSync: (() => void) | undefined
-    const fg = () => {
-        if (props.warning) return props.theme.warning
-        if (props.success) return props.theme.success ?? props.theme.accent
-        if (props.accent) return props.theme.accent
-        if (props.dim) return props.theme.textMuted
-        return props.theme.text
-    }
-    const label = () => typeof props.label === "function" ? props.label() : props.label
-    const value = () => typeof props.value === "function" ? props.value() : props.value
-    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
-            // visible=false only suppresses rendering — the yoga layout node
-            // still reserves height, leaving blank gaps when a row is hidden
-            // (e.g. expanded rows while the panel is collapsed). Collapse the
-            // height so hidden rows truly take no space.
-            try {
-                rowNode.height = isVisible ? "auto" : 0
-            } catch { /* not all renderables accept height */ }
-        }
-        if (labelNode && !labelNode.isDestroyed) labelNode.content = isVisible ? label() : ""
-        if (!valueNode || valueNode.isDestroyed) return
-        valueNode.content = isVisible ? content() : ""
-        valueNode.requestRender()
-    }
-    unregisterSync = props.registerSync?.(syncContent)
-    const attachRowNode = (node: BoxRenderable) => {
-        rowNode = node
-        syncContent()
-    }
-    const attachLabelNode = (node: TextRenderable) => {
-        labelNode = node
-        syncContent()
-    }
-    const attachValueNode = (node: TextRenderable) => {
-        valueNode = node
-        syncContent()
-    }
-    onCleanup(() => {
-        disposed = true
-        unregisterSync?.()
-        unregisterSync = undefined
-        rowNode = undefined
-        labelNode = undefined
-        valueNode = undefined
-    })
-
-    return (
-        <box ref={attachRowNode} width="100%" flexDirection="row" justifyContent="space-between" visible={visible()}>
-            <text ref={attachLabelNode} fg={props.theme.textMuted} content={visible() ? label() : ""} />
-            <text ref={attachValueNode} fg={fg()} content={content()} />
-        </box>
-    )
-}
+import type { TuiThemeCurrent } from "@opencode-ai/plugin/tui"
+import type { BoxRenderable, TextRenderable } from "@opentui/core"
+import { element } from "./ui-element"
+
+interface StatRowProps {
+    theme: TuiThemeCurrent
+    label: string | (() => string)
+    value: string | (() => string)
+    accent?: boolean
+    warning?: boolean
+    success?: boolean
+    dim?: boolean
+    icon?: string
+    visible?: boolean | (() => boolean)
+    registerSync?: (sync: () => void) => () => void
+}
+
+export function StatRow(props: StatRowProps) {
+    let rowNode: BoxRenderable | undefined
+    let labelNode: TextRenderable | undefined
+    let valueNode: TextRenderable | undefined
+    const fg = () => {
+        if (props.warning) return props.theme.warning
+        if (props.success) return props.theme.success ?? props.theme.accent
+        if (props.accent) return props.theme.accent
+        if (props.dim) return props.theme.textMuted
+        return props.theme.text
+    }
+    const label = () => typeof props.label === "function" ? props.label() : props.label
+    const value = () => typeof props.value === "function" ? props.value() : props.value
+    const visible = () => typeof props.visible === "function" ? props.visible() : props.visible !== false
+    const content = () => `${props.icon ? `${props.icon}  ` : ""}${value()}`
+    const syncContent = () => {
+        const isVisible = visible()
+        if (rowNode && !rowNode.isDestroyed) {
+            rowNode.visible = isVisible
+            // visible=false only suppresses rendering — the yoga layout node
+            // still reserves height, leaving blank gaps when a row is hidden
+            // (e.g. expanded rows while the panel is collapsed). Collapse the
+            // height so hidden rows truly take no space.
+            try {
+                rowNode.height = isVisible ? "auto" : 0
+            } catch { /* not all renderables accept height */ }
+        }
+        if (labelNode && !labelNode.isDestroyed) labelNode.content = isVisible ? label() : ""
+        if (!valueNode || valueNode.isDestroyed) return
+        valueNode.content = isVisible ? content() : ""
+        valueNode.requestRender()
+    }
+    // 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: BoxRenderable) => {
+        rowNode = node
+        syncContent()
+    }
+    const attachLabelNode = (node: TextRenderable) => {
+        labelNode = node
+        syncContent()
+    }
+    const attachValueNode = (node: TextRenderable) => {
+        valueNode = node
+        syncContent()
+    }
+
+    return element<BoxRenderable>("box", {
+        ref: attachRowNode,
+        width: "100%",
+        flexDirection: "row",
+        justifyContent: "space-between",
+        visible: visible(),
+    }, [
+        element<TextRenderable>("text", {
+            ref: attachLabelNode,
+            fg: props.theme.textMuted,
+            content: visible() ? label() : "",
+        }),
+        element<TextRenderable>("text", {
+            ref: attachValueNode,
+            fg: fg(),
+            content: content(),
+        }),
+    ])
+}

package/src/components/ui-element.ts

@@ -0,0 +1,44 @@
+/**
+ * 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"
+import type { BaseRenderable } from "@opentui/core"
+
+export function element<T extends BaseRenderable = BaseRenderable>(
+    tag: string,
+    props: Record<string, unknown> = {},
+    children: unknown[] = [],
+): T {
+    const node = createElement(tag)
+    let ref: ((node: BaseRenderable) => void) | undefined
+    for (const [key, value] of Object.entries(props)) {
+        if (value === undefined) continue
+        if (key === "ref") {
+            ref = value as typeof ref
+            continue
+        }
+        setProp(node, key, value)
+    }
+    if (children.length > 0) insert(node, children)
+    ref?.(node)
+    return node as T
+}

package/src/tui-v2.tsx

@@ -38,8 +38,7 @@
  * - 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, type MetricsCollector } from "./collector"
 import type { MetricsEventApi } from "./event-bus"
 import { getConfig } from "./config"
@@ -346,18 +345,20 @@ export function setupTuiV2(ctx: V2Context): V2Cleanup {
             append: "sidebar.content",
             render: (input) => {
                 const sessionID = input?.sessionID ?? ""
-                if (!sessionID) return <box />
-                return (
-                    <SidebarMetrics
-                        sessionID={sessionID}
-                        collector={collector}
-                        refreshIntervalMs={config.refreshIntervalMs}
-                        barConfig={config}
-                        theme={theme as never}
-                        controller={controller}
-                        requestRender={requestRender}
-                    />
-                )
+                if (!sessionID) return createElement("box")
+                const sidebar = SidebarMetrics({
+                    sessionID,
+                    collector,
+                    refreshIntervalMs: config.refreshIntervalMs,
+                    barConfig: config,
+                    theme: theme as never,
+                    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
             },
         })
     )

package/src/tui.tsx

@@ -1,68 +1,76 @@
-/** @jsxImportSource @opentui/solid */
-/** @jsxRuntime automatic */
-import type { TuiPlugin, TuiPluginApi, TuiPluginMeta } from "@opencode-ai/plugin/tui"
-import type { PluginOptions } from "@opencode-ai/plugin"
-import { createCollector } from "./collector"
-import { getConfig } from "./config"
-import { log } from "./logger"
-import { SidebarMetrics } from "./components/SidebarMetrics"
-import {
-    computeEffectiveOrder,
-    createMetricsSidebarController,
-    DEFAULT_SLOT_ORDER,
-    PLUGIN_KEY,
-    resolveMetricsPrefs,
-} from "./tui-preferences"
-import { readTuiPreferencesFileSync } from "./tui-prefs-io"
-import { setupTuiV2 } from "./tui-v2"
-
-const plugin: TuiPlugin = async (api: TuiPluginApi, _options: PluginOptions | undefined, _meta: TuiPluginMeta) => {
-    const config = getConfig()
-    const collector = createCollector(api, config, log)
-
-    // Sync-read preferences at slot mount so the sidebar renders at its final
-    // order and collapse state on the first paint (no async flicker).
-    const seedRoot = readTuiPreferencesFileSync()
-    const effectiveOrder = computeEffectiveOrder(seedRoot, PLUGIN_KEY, DEFAULT_SLOT_ORDER)
-    const prefs = resolveMetricsPrefs(seedRoot)
-    const controller = createMetricsSidebarController(prefs, () => api.renderer.requestRender())
-
-    api.slots.register({
-        order: effectiveOrder,
-        slots: {
-            sidebar_content(ctx, props) {
-                return (
-                    <SidebarMetrics
-                        sessionID={props.session_id}
-                        collector={collector}
-                        refreshIntervalMs={config.refreshIntervalMs}
-                        barConfig={config}
-                        theme={ctx.theme.current}
-                        controller={controller}
-                        requestRender={() => api.renderer.requestRender()}
-                    />
-                )
-            },
-        },
-    })
-
-    api.lifecycle.onDispose(() => {
-        collector.dispose()
-    })
-
-    log("opencode-metrics sidebar initialized")
-}
-
-/**
- * Dual-host TUI module:
- * - OpenCode V1 (1.18.x) validates `{ id, tui }` and ignores extra keys.
- * - OpenCode V2 (2.0.x) validates `{ id, setup }` and rejects V1-only modules.
- * Exporting both keys from one `./tui` module satisfies both hosts.
- */
-const pluginModule: { id: string; tui: TuiPlugin; setup: typeof setupTuiV2 } = {
-    id: "oc-metricboard",
-    tui: plugin,
-    setup: setupTuiV2,
-}
-
-export default pluginModule
+import type { TuiPlugin, TuiPluginApi, TuiPluginMeta } from "@opencode-ai/plugin/tui"
+import type { PluginOptions } from "@opencode-ai/plugin"
+import { createCollector } from "./collector"
+import { getConfig } from "./config"
+import { log } from "./logger"
+import { SidebarMetrics } from "./components/SidebarMetrics"
+import {
+    computeEffectiveOrder,
+    createMetricsSidebarController,
+    DEFAULT_SLOT_ORDER,
+    PLUGIN_KEY,
+    resolveMetricsPrefs,
+} from "./tui-preferences"
+import { readTuiPreferencesFileSync } from "./tui-prefs-io"
+import { setupTuiV2 } from "./tui-v2"
+
+const plugin: TuiPlugin = async (api: TuiPluginApi, _options: PluginOptions | undefined, _meta: TuiPluginMeta) => {
+    const config = getConfig()
+    const collector = createCollector(api, config, log)
+
+    // Sync-read preferences at slot mount so the sidebar renders at its final
+    // order and collapse state on the first paint (no async flicker).
+    const seedRoot = readTuiPreferencesFileSync()
+    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: Array<() => void> = []
+
+    api.slots.register({
+        order: effectiveOrder,
+        slots: {
+            sidebar_content(ctx, props) {
+                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")
+}
+
+/**
+ * Dual-host TUI module:
+ * - OpenCode V1 (1.18.x) validates `{ id, tui }` and ignores extra keys.
+ * - OpenCode V2 (2.0.x) validates `{ id, setup }` and rejects V1-only modules.
+ * Exporting both keys from one `./tui` module satisfies both hosts.
+ */
+const pluginModule: { id: string; tui: TuiPlugin; setup: typeof setupTuiV2 } = {
+    id: "oc-metricboard",
+    tui: plugin,
+    setup: setupTuiV2,
+}
+
+export default pluginModule