opencode-tui-stats 0.1.1 → 0.3.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "opencode-tui-stats",
-  "version": "0.1.1",
+  "version": "0.3.0",
   "description": "OpenCode 1 TUI plugin that shows live TPS, average TPS, and average time to first token in the session prompt.",
   "type": "module",
   "exports": {
@@ -33,6 +33,7 @@
   },
   "files": [
     "tui.tsx",
+    "tracker.ts",
     "README.md",
     "assets/"
   ]

package/tracker.ts

@@ -0,0 +1,595 @@
+import type { TuiPluginApi } from "@opencode-ai/plugin/tui"
+
+export type StreamSample = {
+  at: number
+  messageID: string
+  tokens: number
+}
+
+export type MessageTiming = {
+  sessionID: string
+  requestStartAt: number
+  firstResponseAt?: number
+  lastToolCallAt?: number
+}
+
+export type SessionAverage = {
+  totalTokens: number
+  totalDurationMs: number
+  totalTtftMs: number
+  stepCount: number
+}
+
+export type SessionStats = {
+  cacheRead: number
+  cachePrompt: number
+  cost: number
+  steps: number
+  retries: number
+  lastAttempt: number
+}
+
+/** Per-model aggregate within a session, keyed by `providerID/modelID`.
+ * `cacheRead`/`cachePrompt`/`cost`/`steps` mirror {@link SessionStats}; the `total*`/`stepCount`
+ * fields mirror {@link SessionAverage} so the existing rate/TTFT helpers can be reused as-is. */
+export type ModelAggregate = {
+  cacheRead: number
+  cachePrompt: number
+  cost: number
+  steps: number
+  totalTokens: number
+  totalDurationMs: number
+  totalTtftMs: number
+  stepCount: number
+}
+
+export type SessionModels = {
+  /** Most recently observed assistant `providerID/modelID` for the session. */
+  active?: string
+  /** Model keys in observation order (oldest first, most recent last). */
+  order: string[]
+  aggregates: Record<string, ModelAggregate>
+  /** `messageID -> providerID/modelID`, used to attribute live samples to a model. */
+  messageModels: Map<string, string>
+}
+
+export type Tracker = {
+  samples: Record<string, StreamSample[]>
+  timings: Record<string, MessageTiming>
+  averages: Record<string, SessionAverage>
+  stats: Record<string, SessionStats>
+  dedup: Record<string, Set<string>>
+  models: Record<string, SessionModels>
+}
+
+const STREAM_WINDOW_MS = 5_000
+const LIVE_STALE_MS = 1_500
+const SINGLE_SAMPLE_MS = 1_000
+const PART_CACHE_LIMIT = 1_024
+/** Per-session dedup window: only the most recent completed messages are deduplicated;
+ * a repeated completed event beyond this window accumulates again. */
+const DEDUP_WINDOW_LIMIT = 64
+/** Cap on `messageID -> model` entries retained per session (FIFO). */
+const MESSAGE_MODEL_LIMIT = 256
+const SESSION_LIMIT = 64
+/** Maximum number of model rows rendered in the sidebar panel. */
+export const MODEL_ROW_LIMIT = 4
+
+function emptyStats(): SessionStats {
+  return { cacheRead: 0, cachePrompt: 0, cost: 0, steps: 0, retries: 0, lastAttempt: 0 }
+}
+
+function emptyAggregate(): ModelAggregate {
+  return {
+    cacheRead: 0,
+    cachePrompt: 0,
+    cost: 0,
+    steps: 0,
+    totalTokens: 0,
+    totalDurationMs: 0,
+    totalTtftMs: 0,
+    stepCount: 0,
+  }
+}
+
+export function modelKey(providerID: string, modelID: string) {
+  return `${providerID}/${modelID}`
+}
+
+export function estimateTokens(delta: string) {
+  return Math.max(1, Math.ceil(Buffer.byteLength(delta, "utf8") / 5))
+}
+
+export function formatRate(value: number) {
+  if (!Number.isFinite(value) || value <= 0) return undefined
+  if (value >= 100) return Math.round(value).toString()
+  if (value >= 10) return value.toFixed(1)
+  return value.toFixed(2)
+}
+
+export function formatTtft(value: number) {
+  if (!Number.isFinite(value) || value < 0) return undefined
+  return `${value.toFixed(1)}s`
+}
+
+export function activeDuration(samples: StreamSample[], tailAt?: number) {
+  if (samples.length === 0) return 0
+  if (samples.length === 1) {
+    const tailDuration = tailAt ? Math.max(0, tailAt - samples[0].at) : SINGLE_SAMPLE_MS
+    return Math.min(Math.max(tailDuration, 250), SINGLE_SAMPLE_MS)
+  }
+
+  let duration = 0
+  for (let index = 1; index < samples.length; index++) {
+    duration += Math.max(0, samples[index].at - samples[index - 1].at)
+  }
+  if (tailAt) duration += Math.max(0, tailAt - samples[samples.length - 1].at)
+  return Math.max(duration, SINGLE_SAMPLE_MS)
+}
+
+export function averageRate(average: SessionAverage | undefined) {
+  if (!average || average.totalTokens <= 0 || average.totalDurationMs <= 0) return undefined
+  return formatRate(average.totalTokens / (average.totalDurationMs / 1_000))
+}
+
+export function averageTtft(average: SessionAverage | undefined) {
+  if (!average || average.stepCount <= 0) return undefined
+  return formatTtft(average.totalTtftMs / average.stepCount / 1_000)
+}
+
+/** Cache hit percentage (e.g. `31%`) or `undefined` when nothing promptable has been seen. */
+export function cacheText(stats: { cacheRead: number; cachePrompt: number } | undefined) {
+  if (!stats || stats.cachePrompt <= 0) return undefined
+  return `${Math.round((stats.cacheRead / stats.cachePrompt) * 100)}%`
+}
+
+export function costText(stats: { cost: number; steps: number } | undefined) {
+  if (!stats || stats.steps <= 0) return undefined
+  return `$${stats.cost >= 1 ? stats.cost.toFixed(2) : stats.cost.toFixed(4)}`
+}
+
+/** FIFO-bound a Set so it never grows past `limit`. */
+function boundedAdd(set: Set<string>, key: string, limit: number) {
+  if (set.has(key)) return
+  if (set.size >= limit) {
+    const oldest = set.values().next().value
+    if (oldest !== undefined) set.delete(oldest)
+  }
+  set.add(key)
+}
+
+/** FIFO-bound a Map so it never grows past `limit`. */
+function boundedSet<K, V>(map: Map<K, V>, key: K, value: V, limit: number) {
+  if (map.has(key)) return
+  if (map.size >= limit) {
+    const oldest = map.keys().next().value
+    if (oldest !== undefined) map.delete(oldest)
+  }
+  map.set(key, value)
+}
+
+export type ModelRow = {
+  key: string
+  label: string
+  active: boolean
+  tps?: string
+  avg?: string
+  ttft?: string
+  cache?: string
+  cost?: string
+}
+
+export type ModelPanel = {
+  rows: ModelRow[]
+  overflow: number
+  retries: number
+  /** Session-level cache hit percentage (e.g. `31%`), or `undefined` when nothing promptable was seen. */
+  cache?: string
+}
+
+export type TrackerInternals = {
+  sizes(): {
+    parts: number
+    dedup: number
+    stats: number
+    averages: number
+    timings: number
+    mounted: number
+  }
+  partDecision(partID: string): boolean | undefined
+  hasStats(sessionID: string): boolean
+  dedupSize(sessionID: string): number
+  retries(sessionID: string): number
+  mounted(): string[]
+  activeModel(sessionID: string): string | undefined
+}
+
+export type TrackerHandle = {
+  modelRows(sessionID: string): ModelPanel
+  mountSession(sessionID: string): void
+  unmountSession(sessionID: string): void
+  prune(now?: number): void
+  internals: TrackerInternals
+  dispose(): void
+}
+
+let lastInternals: TrackerInternals | undefined
+
+/** Test-only access to the most recently created tracker's internals. */
+export function getLastInternals(): TrackerInternals | undefined {
+  return lastInternals
+}
+
+export function createTracker(api: TuiPluginApi, onChange: () => void): TrackerHandle {
+  const tracker: Tracker = { samples: {}, timings: {}, averages: {}, stats: {}, dedup: {}, models: {} }
+  const partDecisions = new Map<string, boolean>()
+  const mounted = new Set<string>()
+  const order: string[] = []
+  const listeners: Array<() => void> = []
+
+  const bump = () => onChange()
+
+  const clearLive = (sessionID: string) => {
+    if (!tracker.samples[sessionID]?.length) return
+    delete tracker.samples[sessionID]
+    bump()
+  }
+
+  const clearTimings = (sessionID: string) => {
+    let changed = false
+    for (const [messageID, timing] of Object.entries(tracker.timings)) {
+      if (timing.sessionID !== sessionID) continue
+      delete tracker.timings[messageID]
+      changed = true
+    }
+    if (changed) bump()
+  }
+
+  const evictSession = (sessionID: string) => {
+    delete tracker.stats[sessionID]
+    delete tracker.averages[sessionID]
+    delete tracker.samples[sessionID]
+    delete tracker.dedup[sessionID]
+    delete tracker.models[sessionID]
+    clearTimings(sessionID)
+  }
+
+  const touchSession = (sessionID: string) => {
+    const at = order.indexOf(sessionID)
+    if (at !== -1) order.splice(at, 1)
+    order.push(sessionID)
+
+    // Evict least recently used sessions past the cap, never the sessions currently mounted for display.
+    let index = 0
+    while (order.length > SESSION_LIMIT && index < order.length) {
+      const candidate = order[index]
+      if (mounted.has(candidate)) {
+        index += 1
+        continue
+      }
+      order.splice(index, 1)
+      evictSession(candidate)
+    }
+  }
+
+  const touchModel = (models: SessionModels, key: string) => {
+    const at = models.order.indexOf(key)
+    if (at !== -1) models.order.splice(at, 1)
+    models.order.push(key)
+    if (!models.aggregates[key]) models.aggregates[key] = emptyAggregate()
+  }
+
+  const prune = (now = Date.now()) => {
+    let changed = false
+
+    for (const [sessionID, samples] of Object.entries(tracker.samples)) {
+      const next = samples.filter((sample) => now - sample.at <= STREAM_WINDOW_MS)
+      if (next.length === samples.length) continue
+      changed = true
+      if (next.length > 0) tracker.samples[sessionID] = next
+      else delete tracker.samples[sessionID]
+    }
+
+    if (changed) bump()
+  }
+
+  const appendSample = (sessionID: string, messageID: string, sample: StreamSample) => {
+    touchSession(sessionID)
+    tracker.samples[sessionID] = [
+      ...(tracker.samples[sessionID] ?? []).filter((item) => sample.at - item.at <= STREAM_WINDOW_MS),
+      sample,
+    ]
+    const timing = tracker.timings[messageID]
+    if (timing && timing.firstResponseAt === undefined) timing.firstResponseAt = sample.at
+    bump()
+  }
+
+  /** Live rate restricted to samples attributed to `key` via the `messageID -> model` mapping. */
+  const liveRateFor = (sessionID: string, key: string) => {
+    const status = api.state.session.status(sessionID)
+    if (!status || status.type === "idle") return undefined
+
+    const now = Date.now()
+    const mapping = tracker.models[sessionID]?.messageModels
+    const samples = (tracker.samples[sessionID] ?? []).filter(
+      (sample) => now - sample.at <= STREAM_WINDOW_MS && mapping?.get(sample.messageID) === key,
+    )
+    const last = samples[samples.length - 1]
+    if (!last || now - last.at > LIVE_STALE_MS) return undefined
+
+    const tokens = samples.reduce((sum, sample) => sum + sample.tokens, 0)
+    return formatRate(tokens / (activeDuration(samples, now) / 1_000))
+  }
+
+  const modelRows = (sessionID: string): ModelPanel => {
+    const models = tracker.models[sessionID]
+    const retries = tracker.stats[sessionID]?.retries ?? 0
+    const cache = cacheText(tracker.stats[sessionID])
+    if (!models) return { rows: [], overflow: 0, retries, cache }
+
+    const active = models.active
+    // `order` is oldest→newest; reverse for most-recent-first ordering of the non-active rows.
+    const recency = [...models.order].reverse().filter((key) => key in models.aggregates)
+    const ordered =
+      active && active in models.aggregates ? [active, ...recency.filter((key) => key !== active)] : recency
+
+    const visible = ordered.slice(0, MODEL_ROW_LIMIT)
+    const overflow = Math.max(0, ordered.length - visible.length)
+
+    const rows = visible.map<ModelRow>((key) => {
+      const aggregate = models.aggregates[key]
+      const isActive = key === active
+      const cost = costText(aggregate)
+      return {
+        key,
+        label: key,
+        active: isActive,
+        tps: isActive ? liveRateFor(sessionID, key) : undefined,
+        avg: averageRate(aggregate),
+        ttft: averageTtft(aggregate),
+        cache: cacheText(aggregate),
+        cost: cost === undefined ? undefined : cost,
+      }
+    })
+
+    return { rows, overflow, retries, cache }
+  }
+
+  listeners.push(
+    api.event.on("message.part.delta", (event) => {
+      if (event.properties.field !== "text") return
+      const { sessionID, messageID, partID } = event.properties
+
+      // partID → decision (true = counted, false = ignored). A part that is not registered yet is
+      // never cached, so the next delta retries the lookup; once found the accept/reject decision
+      // is cached so each part is scanned at most once.
+      let counted = partDecisions.get(partID)
+      if (counted === undefined) {
+        const part = api.state.part(messageID).find((item) => item.id === partID)
+        if (!part) return
+        counted = part.type === "text" || part.type === "reasoning"
+        boundedSet(partDecisions, partID, counted, PART_CACHE_LIMIT)
+      }
+      if (!counted) return
+
+      appendSample(sessionID, messageID, {
+        at: Date.now(),
+        messageID,
+        tokens: estimateTokens(event.properties.delta),
+      })
+    }),
+  )
+
+  listeners.push(
+    api.event.on("message.updated", (event) => {
+      const info = event.properties.info
+      if (info.role !== "assistant") return
+      const sessionID = event.properties.sessionID
+      const key = modelKey(info.providerID, info.modelID)
+
+      // Observe the model as soon as a message appears so the sidebar can attribute live samples
+      // and mark the most recently used model as active.
+      const models =
+        tracker.models[sessionID] ?? (tracker.models[sessionID] = { order: [], aggregates: {}, messageModels: new Map() })
+      touchModel(models, key)
+      models.active = key
+      boundedSet(models.messageModels, info.id, key, MESSAGE_MODEL_LIMIT)
+
+      if (!info.time.completed) {
+        const existing = tracker.timings[info.id]
+        tracker.timings[info.id] = {
+          sessionID,
+          requestStartAt: info.time.created,
+          firstResponseAt: existing?.firstResponseAt,
+          lastToolCallAt: existing?.lastToolCallAt,
+        }
+        bump()
+        return
+      }
+
+      // Dedup only the most recent completed messages for this session; a repeated completed
+      // event beyond the window accumulates again.
+      const seen = tracker.dedup[sessionID] ?? (tracker.dedup[sessionID] = new Set<string>())
+      if (!seen.has(info.id)) {
+        boundedAdd(seen, info.id, DEDUP_WINDOW_LIMIT)
+        touchSession(sessionID)
+        const stats = tracker.stats[sessionID] ?? emptyStats()
+        const cacheRead = info.tokens.cache.read
+        const cacheWrite = info.tokens.cache.write
+        tracker.stats[sessionID] = {
+          ...stats,
+          cacheRead: stats.cacheRead + cacheRead,
+          cachePrompt: stats.cachePrompt + info.tokens.input + cacheRead + cacheWrite,
+          cost: stats.cost + info.cost,
+          steps: stats.steps + 1,
+        }
+        const aggregate = models.aggregates[key] ?? emptyAggregate()
+        models.aggregates[key] = {
+          ...aggregate,
+          cacheRead: aggregate.cacheRead + cacheRead,
+          cachePrompt: aggregate.cachePrompt + info.tokens.input + cacheRead + cacheWrite,
+          cost: aggregate.cost + info.cost,
+          steps: aggregate.steps + 1,
+        }
+      }
+
+      const timing = tracker.timings[info.id]
+      if (timing?.sessionID === sessionID && timing.firstResponseAt !== undefined) {
+        const tokens = info.tokens.output + info.tokens.reasoning
+        const endAt = info.finish === "tool-calls" ? timing.lastToolCallAt : info.time.completed
+        const durationMs = endAt !== undefined ? Math.max(endAt - timing.firstResponseAt, 1) : undefined
+        if (tokens > 0 && durationMs !== undefined) {
+          const totals = tracker.averages[sessionID] ?? {
+            totalTokens: 0,
+            totalDurationMs: 0,
+            totalTtftMs: 0,
+            stepCount: 0,
+          }
+          tracker.averages[sessionID] = {
+            totalTokens: totals.totalTokens + tokens,
+            totalDurationMs: totals.totalDurationMs + durationMs,
+            totalTtftMs: totals.totalTtftMs + Math.max(timing.firstResponseAt - timing.requestStartAt, 0),
+            stepCount: totals.stepCount + 1,
+          }
+          const aggregate = models.aggregates[key] ?? emptyAggregate()
+          models.aggregates[key] = {
+            ...aggregate,
+            totalTokens: aggregate.totalTokens + tokens,
+            totalDurationMs: aggregate.totalDurationMs + durationMs,
+            totalTtftMs: aggregate.totalTtftMs + Math.max(timing.firstResponseAt - timing.requestStartAt, 0),
+            stepCount: aggregate.stepCount + 1,
+          }
+        }
+      }
+      delete tracker.timings[info.id]
+      prune(info.time.completed)
+      bump()
+    }),
+  )
+
+  listeners.push(
+    api.event.on("message.part.updated", (event) => {
+      const part = event.properties.part
+      if (part.type !== "tool") return
+
+      if (part.state.status === "running" || part.state.status === "completed" || part.state.status === "error") {
+        clearLive(part.sessionID)
+      }
+
+      const timing = tracker.timings[part.messageID]
+      if (!timing) return
+
+      if (part.state.status === "pending") {
+        if (timing.firstResponseAt === undefined) timing.firstResponseAt = Date.now()
+        bump()
+        return
+      }
+      if (part.state.status === "running") {
+        timing.lastToolCallAt = part.state.time.start
+        bump()
+      }
+    }),
+  )
+
+  listeners.push(
+    api.event.on("session.status", (event) => {
+      const { sessionID, status } = event.properties
+      const type = status.type
+
+      if (type === "idle") clearTimings(sessionID)
+
+      const stats = tracker.stats[sessionID] ?? emptyStats()
+
+      if (type === "retry") {
+        const attempt = status.attempt
+        if (attempt <= stats.lastAttempt) return
+        touchSession(sessionID)
+        tracker.stats[sessionID] = {
+          ...stats,
+          retries: stats.retries + (attempt - stats.lastAttempt),
+          lastAttempt: attempt,
+        }
+        bump()
+        return
+      }
+
+      // Any non-retry status resets the attempt baseline for the next retry burst.
+      if (stats.lastAttempt === 0) return
+      touchSession(sessionID)
+      tracker.stats[sessionID] = { ...stats, lastAttempt: 0 }
+      bump()
+    }),
+  )
+
+  listeners.push(
+    api.event.on("session.idle", (event) => {
+      clearTimings(event.properties.sessionID)
+    }),
+  )
+
+  // The 1s tick re-evaluates live TPS staleness and prunes stale stream samples.
+  const timer = setInterval(() => {
+    prune()
+    bump()
+  }, 1_000)
+
+  const internals: TrackerInternals = {
+    sizes: () => ({
+      parts: partDecisions.size,
+      dedup: Object.values(tracker.dedup).reduce((sum, set) => sum + set.size, 0),
+      stats: Object.keys(tracker.stats).length,
+      averages: Object.keys(tracker.averages).length,
+      timings: Object.keys(tracker.timings).length,
+      mounted: mounted.size,
+    }),
+    partDecision: (partID) => partDecisions.get(partID),
+    hasStats: (sessionID) => sessionID in tracker.stats,
+    dedupSize: (sessionID) => tracker.dedup[sessionID]?.size ?? 0,
+    retries: (sessionID) => tracker.stats[sessionID]?.retries ?? 0,
+    mounted: () => [...mounted],
+    activeModel: (sessionID) => tracker.models[sessionID]?.active,
+  }
+  lastInternals = internals
+
+  return {
+    modelRows,
+    mountSession(sessionID) {
+      mounted.add(sessionID)
+    },
+    unmountSession(sessionID) {
+      mounted.delete(sessionID)
+    },
+    prune,
+    internals,
+    dispose() {
+      for (const unsubscribe of listeners) unsubscribe()
+      listeners.length = 0
+      clearInterval(timer)
+      mounted.clear()
+      if (lastInternals === internals) lastInternals = undefined
+    },
+  }
+}
+
+/** Test-only fold controller. Kept in this non-entry module: the plugin entry (`tui.tsx`)
+ * may only expose a `default` export, because the legacy loader treats every runtime export
+ * as a plugin. */
+export type PanelController = {
+  toggle(key: string): void
+  isExpanded(key: string): boolean
+}
+
+let lastPanelController: PanelController | undefined
+
+export function setLastPanelController(controller: PanelController) {
+  lastPanelController = controller
+}
+
+/** Clear the controller only when it is still the current one. */
+export function clearLastPanelController(controller: PanelController) {
+  if (lastPanelController === controller) lastPanelController = undefined
+}
+
+export function getLastPanelController(): PanelController | undefined {
+  return lastPanelController
+}

package/tui.tsx

@@ -1,241 +1,146 @@
 /** @jsxImportSource @opentui/solid */
 import type { TuiPlugin, TuiPluginApi, TuiPluginModule } from "@opencode-ai/plugin/tui"
-import { createMemo, createSignal, type Accessor } from "solid-js"
-
-type StreamSample = {
-  at: number
-  tokens: number
-}
-
-type MessageTiming = {
-  sessionID: string
-  requestStartAt: number
-  firstResponseAt?: number
-  lastToolCallAt?: number
-}
-
-type SessionAverage = {
-  totalTokens: number
-  totalDurationMs: number
-  totalTtftMs: number
-  stepCount: number
-}
-
-type Tracker = {
-  samples: Record<string, StreamSample[]>
-  timings: Record<string, MessageTiming>
-  averages: Record<string, SessionAverage>
-}
-
-const STREAM_WINDOW_MS = 5_000
-const LIVE_STALE_MS = 1_500
-const SINGLE_SAMPLE_MS = 1_000
-
-function estimateTokens(delta: string) {
-  return Math.max(1, Math.ceil(Buffer.byteLength(delta, "utf8") / 5))
-}
-
-function formatRate(value: number) {
-  if (!Number.isFinite(value) || value <= 0) return undefined
-  if (value >= 100) return Math.round(value).toString()
-  if (value >= 10) return value.toFixed(1)
-  return value.toFixed(2)
-}
-
-function formatTtft(value: number) {
-  if (!Number.isFinite(value) || value < 0) return undefined
-  return `${value.toFixed(1)}s`
-}
-
-function activeDuration(samples: StreamSample[], tailAt?: number) {
-  if (samples.length === 0) return 0
-  if (samples.length === 1) {
-    const tailDuration = tailAt ? Math.max(0, tailAt - samples[0].at) : SINGLE_SAMPLE_MS
-    return Math.min(Math.max(tailDuration, 250), SINGLE_SAMPLE_MS)
+import { For, Show, createEffect, createMemo, createSignal, onCleanup, type Accessor } from "solid-js"
+import {
+  clearLastPanelController,
+  createTracker,
+  setLastPanelController,
+  type ModelRow,
+  type TrackerHandle,
+} from "./tracker"
+
+/** A single model row: fold marker + summary line, plus a detail line when expanded. */
+function ModelRowView(props: { api: TuiPluginApi; row: ModelRow; expanded: boolean; onToggle: () => void }) {
+  // Guard against a drag-select being read as a click: only toggle when the press and the
+  // release land on the same cell.
+  let pressed: { x: number; y: number } | undefined
+
+  const handleMouseDown = (event: { x: number; y: number }) => {
+    pressed = { x: event.x, y: event.y }
   }
 
-  let duration = 0
-  for (let index = 1; index < samples.length; index++) {
-    duration += Math.max(0, samples[index].at - samples[index - 1].at)
+  const handleMouseUp = (event: { x: number; y: number }) => {
+    const start = pressed
+    pressed = undefined
+    if (start && (start.x !== event.x || start.y !== event.y)) return
+    props.onToggle()
   }
-  if (tailAt) duration += Math.max(0, tailAt - samples[samples.length - 1].at)
-  return Math.max(duration, SINGLE_SAMPLE_MS)
-}
-
-function averageRate(average: SessionAverage | undefined) {
-  if (!average || average.totalTokens <= 0 || average.totalDurationMs <= 0) return undefined
-  return formatRate(average.totalTokens / (average.totalDurationMs / 1_000))
-}
-
-function averageTtft(average: SessionAverage | undefined) {
-  if (!average || average.stepCount <= 0) return undefined
-  return formatTtft(average.totalTtftMs / average.stepCount / 1_000)
-}
 
-function liveRate(api: TuiPluginApi, tracker: Tracker, sessionID: string) {
-  const status = api.state.session.status(sessionID)
-  if (!status || status.type === "idle") return undefined
-
-  const now = Date.now()
-  const samples = (tracker.samples[sessionID] ?? []).filter((sample) => now - sample.at <= STREAM_WINDOW_MS)
-  const last = samples[samples.length - 1]
-  if (!last || now - last.at > LIVE_STALE_MS) return undefined
-
-  const tokens = samples.reduce((sum, sample) => sum + sample.tokens, 0)
-  return formatRate(tokens / (activeDuration(samples, now) / 1_000))
-}
-
-function statusText(api: TuiPluginApi, tracker: Tracker, sessionID: string) {
-  const average = tracker.averages[sessionID]
-  const live = liveRate(api, tracker, sessionID) ?? "-"
-  const avg = averageRate(average) ?? "-"
-  const ttft = averageTtft(average) ?? "-"
-  return `TPS ${live} | AVG ${avg} | TTFT ${ttft}`
+  const theme = () => props.api.theme.current
+
+  return (
+    <box flexDirection="column" onMouseDown={handleMouseDown} onMouseUp={handleMouseUp}>
+      <text wrapMode="none" truncate>
+        <span style={{ fg: theme().textMuted } as Record<string, unknown>}>{`${props.expanded ? "▼" : "▶"} `}</span>
+        <span style={{ fg: theme().text } as Record<string, unknown>}>{props.row.label}</span>
+        <Show when={props.row.active}>
+          <span style={{ fg: theme().success } as Record<string, unknown>}>{"   active"}</span>
+        </Show>
+      </text>
+      <Show when={props.expanded}>
+        <text fg={theme().text} wrapMode="none" truncate>
+          {`TPS ${props.row.tps ?? "—"} · AVG ${props.row.avg ?? "—"}`}
+        </text>
+        <text fg={theme().text} wrapMode="none" truncate>
+          {`TTFT ${props.row.ttft ?? "—"} · CACHE ${props.row.cache ?? "—"} · ${props.row.cost ?? "—"}`}
+        </text>
+      </Show>
+    </box>
+  )
 }
 
-function SessionPromptRight(props: {
+/** Per-session model panel, mounted at `sidebar_content`. */
+function ModelPanelView(props: {
   api: TuiPluginApi
   sessionID: string
-  tracker: Tracker
+  tracker: TrackerHandle
   revision: Accessor<number>
 }) {
-  const content = createMemo(() => {
-    props.revision()
-    return statusText(props.api, props.tracker, props.sessionID)
-  })
-
-  return <text fg={props.api.theme.current.textMuted}>{content()}</text>
-}
-
-const tui: TuiPlugin = async (api) => {
-  const tracker: Tracker = {
-    samples: {},
-    timings: {},
-    averages: {},
-  }
-  const [revision, setRevision] = createSignal(0)
-  const bump = () => setRevision((value) => value + 1)
-
-  const pruneSamples = (now = Date.now()) => {
-    let changed = false
+  let mounted: string | undefined
+  const initialActive = props.tracker.internals.activeModel(props.sessionID)
+  const [expanded, setExpanded] = createSignal<Set<string>>(new Set(initialActive ? [initialActive] : []))
+  let seededActive: string | undefined = initialActive
+  let lastSession: string | undefined = props.sessionID
 
-    for (const [sessionID, samples] of Object.entries(tracker.samples)) {
-      const next = samples.filter((sample) => now - sample.at <= STREAM_WINDOW_MS)
-      if (next.length === samples.length) continue
-      changed = true
-      if (next.length > 0) tracker.samples[sessionID] = next
-      else delete tracker.samples[sessionID]
+  const panel = createMemo(() => {
+    props.revision()
+    const sessionID = props.sessionID
+    if (mounted !== sessionID) {
+      if (mounted !== undefined) props.tracker.unmountSession(mounted)
+      props.tracker.mountSession(sessionID)
+      mounted = sessionID
     }
-
-    if (changed) bump()
-  }
-
-  const clearLive = (sessionID: string) => {
-    if (!tracker.samples[sessionID]?.length) return
-    delete tracker.samples[sessionID]
-    bump()
-  }
-
-  const appendSample = (sessionID: string, messageID: string, sample: StreamSample) => {
-    tracker.samples[sessionID] = [
-      ...(tracker.samples[sessionID] ?? []).filter((item) => sample.at - item.at <= STREAM_WINDOW_MS),
-      sample,
-    ]
-    const timing = tracker.timings[messageID]
-    if (timing && timing.firstResponseAt === undefined) timing.firstResponseAt = sample.at
-    bump()
-  }
-
-  const onDelta = api.event.on("message.part.delta", (event) => {
-    if (event.properties.field !== "text") return
-    const part = api.state.part(event.properties.messageID).find((item) => item.id === event.properties.partID)
-    if (!part || (part.type !== "text" && part.type !== "reasoning")) return
-    appendSample(event.properties.sessionID, event.properties.messageID, {
-      at: Date.now(),
-      tokens: estimateTokens(event.properties.delta),
-    })
+    return props.tracker.modelRows(sessionID)
   })
 
-  const onMessage = api.event.on("message.updated", (event) => {
-    const info = event.properties.info
-    if (info.role !== "assistant") return
-    const sessionID = event.properties.sessionID
-
-    if (!info.time.completed) {
-      const existing = tracker.timings[info.id]
-      tracker.timings[info.id] = {
-        sessionID,
-        requestStartAt: info.time.created,
-        firstResponseAt: existing?.firstResponseAt,
-        lastToolCallAt: existing?.lastToolCallAt,
-      }
-      bump()
+  // Fold state is in-memory only and resets per session. The active model starts expanded and
+  // every other row starts collapsed; when the active model changes we return to that default
+  // so the panel cannot accumulate open rows as models are switched.
+  createEffect(() => {
+    props.revision()
+    const sessionID = props.sessionID
+    const active = props.tracker.internals.activeModel(sessionID)
+    if (sessionID !== lastSession) {
+      lastSession = sessionID
+      seededActive = active
+      setExpanded(new Set<string>(active ? [active] : []))
       return
     }
-
-    const timing = tracker.timings[info.id]
-    if (timing?.sessionID === sessionID && timing.firstResponseAt !== undefined) {
-      const tokens = info.tokens.output + info.tokens.reasoning
-      const endAt = info.finish === "tool-calls" ? timing.lastToolCallAt : info.time.completed
-      const durationMs = endAt !== undefined ? Math.max(endAt - timing.firstResponseAt, 1) : undefined
-      if (tokens > 0 && durationMs !== undefined) {
-        const totals = tracker.averages[sessionID] ?? {
-          totalTokens: 0,
-          totalDurationMs: 0,
-          totalTtftMs: 0,
-          stepCount: 0,
-        }
-        tracker.averages[sessionID] = {
-          totalTokens: totals.totalTokens + tokens,
-          totalDurationMs: totals.totalDurationMs + durationMs,
-          totalTtftMs: totals.totalTtftMs + Math.max(timing.firstResponseAt - timing.requestStartAt, 0),
-          stepCount: totals.stepCount + 1,
-        }
-      }
+    if (active && active !== seededActive) {
+      seededActive = active
+      setExpanded(new Set<string>([active]))
     }
-    delete tracker.timings[info.id]
-    pruneSamples(info.time.completed)
-    bump()
   })
 
-  const onPart = api.event.on("message.part.updated", (event) => {
-    const part = event.properties.part
-    if (part.type !== "tool") return
-
-    if (part.state.status === "running" || part.state.status === "completed" || part.state.status === "error") {
-      clearLive(part.sessionID)
-    }
+  const toggle = (key: string) => {
+    setExpanded((prev) => {
+      const next = new Set(prev)
+      if (next.has(key)) next.delete(key)
+      else next.add(key)
+      return next
+    })
+    props.api.renderer?.requestRender?.()
+  }
 
-    const timing = tracker.timings[part.messageID]
-    if (!timing) return
+  const controller = { toggle, isExpanded: (key: string) => expanded().has(key) }
+  setLastPanelController(controller)
 
-    if (part.state.status === "pending") {
-      if (timing.firstResponseAt === undefined) timing.firstResponseAt = event.properties.time
-      bump()
-      return
-    }
-    if (part.state.status === "running") {
-      timing.lastToolCallAt = part.state.time.start
-      bump()
-    }
+  onCleanup(() => {
+    if (mounted !== undefined) props.tracker.unmountSession(mounted)
+    clearLastPanelController(controller)
   })
 
-  const timer = setInterval(() => {
-    pruneSamples()
-    bump()
-  }, 1_000)
+  return (
+    <box flexDirection="column">
+      <text fg={props.api.theme.current.textMuted}>Performance · observed</text>
+      <Show when={panel().rows.length === 0}>
+        <text fg={props.api.theme.current.textMuted}>—</text>
+      </Show>
+      <For each={panel().rows}>
+        {(row) => (
+          <ModelRowView api={props.api} row={row} expanded={expanded().has(row.key)} onToggle={() => toggle(row.key)} />
+        )}
+      </For>
+      <Show when={panel().overflow > 0}>
+        <text fg={props.api.theme.current.textMuted}>{`+${panel().overflow} more models`}</text>
+      </Show>
+      <text fg={props.api.theme.current.text}>
+        {`Session CACHE ${panel().cache ?? "—"}${panel().retries > 0 ? ` · retries ${panel().retries}` : ""}`}
+      </text>
+    </box>
+  )
+}
 
-  api.lifecycle.onDispose(() => {
-    onDelta()
-    onMessage()
-    onPart()
-    clearInterval(timer)
-  })
+const tui: TuiPlugin = async (api) => {
+  const [revision, setRevision] = createSignal(0)
+  const tracker = createTracker(api, () => setRevision((value) => value + 1))
+
+  api.lifecycle.onDispose(() => tracker.dispose())
 
   api.slots.register({
     slots: {
-      session_prompt_right(_context, props) {
-        return <SessionPromptRight api={api} sessionID={props.session_id} tracker={tracker} revision={revision} />
+      sidebar_content(_context, props) {
+        return <ModelPanelView api={api} sessionID={props.session_id} tracker={tracker} revision={revision} />
       },
     },
   })