oc-metricboard 0.1.7 → 0.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oc-metricboard",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "OpenCode TUI sidebar plugin showing real-time LLM metrics (TPS, TTFT, tokens) with sub-agent × model breakdown",
   "keywords": [
     "opencode",

package/src/collector.ts

@@ -1,14 +1,14 @@
 import type { TuiPluginApi } from "@opencode-ai/plugin/tui"
 import type { BarConfig, CacheReadCompleteness, MetricsAggregate, MetricsScope, ModelMetrics, RequestMetrics } from "./types"
-import { getDisplayInputTokens, getDisplayOutputTokens, gateTtft, getTtft } from "./metrics"
+import { getDisplayInputTokens, getDisplayOutputTokens, getTtft } from "./metrics"
 import { registerEventHandlers } from "./event-handlers"
 import type { CollectorState } from "./collector-state"
 import type { MetricsEventApi } from "./event-bus"
-import { hydrateSession, isHydrationApi, type HydrationApi } from "./session-hydration"
+import { hydrateSession, isHydrationApi, callWithFallback, type HydrationApi } from "./session-hydration"
 import { createSessionTree } from "./session-tree"
 import { getScopeElapsedMs, getSessionElapsedMs, startSessionTiming, stopSessionTiming } from "./session-timing"
 import { clearLiveSpeed, getLiveTps } from "./live-speed"
-import { liveRequestOutput, turnInputTokens } from "./turn-state"
+import { getTurnTtft, liveRequestOutput, turnInputTokens } from "./turn-state"
 
 export type MetricsListener = () => void
 type MetricsHydrationApi = MetricsEventApi & HydrationApi
@@ -16,7 +16,7 @@ type MetricsHydrationApi = MetricsEventApi & HydrationApi
 interface TreeHydrationApi {
   readonly client: {
     readonly session: {
-      children(input: { sessionID: string }): Promise<unknown>
+      children(options: { path?: { sessionID?: string; id?: string }; sessionID?: string }): Promise<unknown>
     }
   }
 }
@@ -195,7 +195,11 @@ export function createCollector(
         while (parents.length > 0) {
           const responses = await Promise.all(parents.map(async (parentID) => ({
             parentID,
-            response: await treeHydrationApi.client.session.children({ sessionID: parentID }),
+            response: await callWithFallback([
+              () => treeHydrationApi.client.session.children({ sessionID: parentID }),
+              () => treeHydrationApi.client.session.children({ path: { sessionID: parentID } }),
+              () => treeHydrationApi.client.session.children({ path: { id: parentID } }),
+            ]),
           })))
           if (disposed) return
           const next: string[] = []
@@ -352,7 +356,15 @@ export function createCollector(
 
       const cacheReadCompleteness: CacheReadCompleteness =
         exactCacheCount === 0 ? "unknown" : exactCacheCount === metrics.length ? "exact" : "partial"
-      const ttft = firstTokenTime === null ? null : gateTtft(firstTokenTime - requestStartTime)
+      // Model rows use the same turn-level TTFT as the main aggregate: the
+      // earliest gated turn TTFT across the group's sessions, falling back to
+      // per-request TTFT when no turn timing exists (e.g. sub-agent sessions
+      // whose turn start coincides with their first request).
+      let ttft: number | null = null
+      for (const m of metrics) {
+        const candidate = getTurnTtft(state.turns.get(m.sessionID), getTtft(m))
+        if (candidate !== null && (ttft === null || candidate < ttft)) ttft = candidate
+      }
 
       // Live TPS for this model group
       let liveTps = 0
@@ -551,10 +563,7 @@ export function createCollector(
       // collapse to ~0). Anchor TTFT to the turn's user message instead —
       // stable across all steps within a turn, refreshed on each new turn.
       // Falls back to the per-request measurement when no turn timing exists.
-      const turnTtft = foregroundTurn?.firstTokenTime != null
-        ? gateTtft(foregroundTurn.firstTokenTime - foregroundTurn.turnStartTime)
-        : null
-      const ttft = turnTtft ?? (foregroundRequest ? getTtft(foregroundRequest) : null)
+      const ttft = getTurnTtft(foregroundTurn, foregroundRequest ? getTtft(foregroundRequest) : null)
 
       const result: MetricsAggregate = {
         sessionIDs: contributingSessionIDs.length > 0 ? contributingSessionIDs : [rootID],

package/src/components/SidebarMetrics.tsx

@@ -1,7 +1,7 @@
 /** @jsxImportSource @opentui/solid */
 /** @jsxRuntime automatic */
 import { createMemo, createSignal, onCleanup } from "solid-js"
-import type { BoxRenderable } from "@opentui/core"
+import type { BoxRenderable, TextRenderable } from "@opentui/core"
 import type { TuiThemeCurrent } from "@opencode-ai/plugin/tui"
 import type { BarConfig, MetricsAggregate, ModelMetrics } from "../types"
 import type { MetricsCollector } from "../collector"
@@ -93,6 +93,46 @@ export function SidebarMetrics(props: SidebarMetricsProps) {
         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
+    // 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
+    // offset the visible label. No value imports from @opentui/core beyond
+    // what mount already exercised, so version drift can't break the plugin.
+    let collapsedHeaderNode: TextRenderable | undefined
+    let expandedHeaderNode: TextRenderable | undefined
+    const syncHeader = () => {
+        if (disposed) return
+        const isCollapsed = collapsed()
+        for (const [node, visible] of [
+            [collapsedHeaderNode, isCollapsed],
+            [expandedHeaderNode, !isCollapsed],
+        ] as const) {
+            if (!node || node.isDestroyed) continue
+            try {
+                node.visible = visible
+                if (visible) {
+                    node.width = "auto"
+                    node.height = "auto"
+                } else {
+                    node.width = 0
+                    node.height = 0
+                }
+            } catch { /* cosmetic — ignore layout failures */ }
+        }
+    }
+    const unregisterHeaderSync = registerRowSync(syncHeader)
+    onCleanup(() => unregisterHeaderSync())
+    const attachCollapsedHeaderNode = (node: TextRenderable) => {
+        collapsedHeaderNode = node
+        syncHeader()
+    }
+    const attachExpandedHeaderNode = (node: TextRenderable) => {
+        expandedHeaderNode = node
+        syncHeader()
+    }
     const toggleCollapsed = () => props.controller.toggleCollapsed()
     const attachBoxToggle = (node: BoxRenderable) => {
         node.onMouseDown = toggleCollapsed
@@ -147,9 +187,17 @@ export function SidebarMetrics(props: SidebarMetricsProps) {
                 ref={attachBoxToggle}
             >
                 <text
+                    ref={attachCollapsedHeaderNode}
+                    fg={props.theme.text}
+                    visible={false}
+                >
+                    <b>▶ {headerLabel()}</b>
+                </text>
+                <text
+                    ref={attachExpandedHeaderNode}
                     fg={props.theme.text}
                 >
-                    <b>{collapsed() ? "▶ " : "▼ "}{headerLabel()}</b>
+                    <b>▼ {headerLabel()}</b>
                 </text>
             </box>
 

package/src/session-hydration.ts

@@ -4,19 +4,46 @@ import { applyAssistantTokens, hasPositiveAssistantTokens } from "./request-upda
 import type { RequestMetrics, TurnMetrics } from "./types"
 import type { SessionTiming } from "./session-timing"
 import { completeTurn, createTurnMetrics, retireRequestIntoTurn } from "./turn-state"
+import { log } from "./logger"
 
 export interface HydrationApi {
   readonly client: {
     readonly session: {
-      messages(options: { readonly id: string }): Promise<unknown>
-      status(options: { readonly id: string }): Promise<unknown>
+      // Shape-agnostic: the v1 SDK client routes use /session/{sessionID}/…,
+      // v2 uses /session/{id}/…, and very old runtimes accepted flat keys.
+      messages(options: { path?: { sessionID?: string; id?: string }; id?: string; sessionID?: string }): Promise<unknown>
+      status(options: { path?: { sessionID?: string; id?: string }; id?: string; sessionID?: string }): Promise<unknown>
     }
     readonly message?: {
-      readonly parts?(options: { readonly id: string }): Promise<unknown>
+      parts?(options: { path?: { messageID?: string; id?: string }; id?: string }): Promise<unknown>
     }
   }
 }
 
+/**
+ * Try SDK arg shapes in order until one resolves WITHOUT an error field. The
+ * host TUI client (confirmed at runtime on opencode 1.18.26) speaks the flat
+ * original-SDK dialect: path params are TOP-LEVEL keys substituted into the
+ * URL template — `session.messages/children({ sessionID })`,
+ * `message.parts({ id })`. hey-api nested shapes (`{ path: { … } }`, v1/v2)
+ * are kept as fallbacks so the plugin survives opencode SDK upgrades. A wrong
+ * shape leaves the URL template unsubstituted (literal `{sessionID}`) and the
+ * server rejects it, surfacing only as `response.error` — never an exception.
+ */
+export async function callWithFallback(attempts: Array<() => Promise<unknown>>): Promise<unknown> {
+  let lastResponse: unknown = null
+  for (let i = 0; i < attempts.length; i++) {
+    const response = await attempts[i]()
+    if (!isRecord(response) || response.error == null) {
+      if (i > 0) log(`sdk arg shapes: attempt ${i + 1}/${attempts.length} succeeded`)
+      return response
+    }
+    lastResponse = response
+  }
+  log(`sdk arg shapes: all ${attempts.length} failed (response.error)`)
+  return lastResponse
+}
+
 export interface HydrationState {
   readonly requests: Map<string, RequestMetrics>
   readonly turns: Map<string, TurnMetrics>
@@ -89,7 +116,11 @@ async function observablePartTimes(api: HydrationApi, messageID: string, now: nu
   if (typeof parts !== "function") return { first: null, last: null }
   let values: readonly unknown[]
   try {
-    values = unwrapMessageList(await parts({ id: messageID }))
+    values = unwrapMessageList(await callWithFallback([
+      () => parts({ id: messageID }),
+      () => parts({ path: { messageID: messageID } }),
+      () => parts({ path: { id: messageID } }),
+    ]))
   } catch {
     // Part timing is best-effort; unavailable/failed lookups yield null times.
     return { first: null, last: null }
@@ -166,7 +197,12 @@ export interface HydrateSessionInput {
 }
 
 export async function hydrateSession(input: HydrateSessionInput): Promise<boolean> {
-  const rawMessages = unwrapMessageList(await input.api.client.session.messages({ id: input.sessionID }))
+  const rawMessages = unwrapMessageList(await callWithFallback([
+    () => input.api.client.session.messages({ sessionID: input.sessionID }),
+    () => input.api.client.session.messages({ id: input.sessionID }),
+    () => input.api.client.session.messages({ path: { sessionID: input.sessionID } }),
+    () => input.api.client.session.messages({ path: { id: input.sessionID } }),
+  ]))
   const infos = rawMessages.map(messageInfo)
   const assistants = infos
     .map(parseAssistantMessage)

package/src/turn-state.ts

@@ -1,4 +1,4 @@
-import { getDisplayInputTokens, getDisplayOutputTokens } from "./metrics"
+import { gateTtft, getDisplayInputTokens, getDisplayOutputTokens } from "./metrics"
 import type { RequestMetrics, TurnMetrics } from "./types"
 
 export function createTurnMetrics(sessionID: string, now: number): TurnMetrics {
@@ -94,3 +94,17 @@ export function completeTurn(turn: TurnMetrics, now: number): void {
 export function recordTurnFirstToken(turn: TurnMetrics, now: number): void {
   if (turn.firstTokenTime === null) turn.firstTokenTime = now
 }
+
+/**
+ * Turn-level TTFT (user message → first token), gated. Falls back to the
+ * supplied per-request TTFT when the turn has no first-token timing. This is
+ * the ONLY meaningful TTFT observable from opencode's event stream for
+ * intra-turn steps, so every TTFT display path should prefer it.
+ */
+export function getTurnTtft(turn: TurnMetrics | undefined, fallback: number | null = null): number | null {
+  if (turn?.firstTokenTime != null) {
+    const gated = gateTtft(turn.firstTokenTime - turn.turnStartTime)
+    if (gated !== null) return gated
+  }
+  return fallback
+}