opencode-tui-stats 0.2.0 → 0.4.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "opencode-tui-stats",
-  "version": "0.2.0",
+  "version": "0.4.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": {

package/tracker.ts

@@ -2,6 +2,7 @@ import type { TuiPluginApi } from "@opencode-ai/plugin/tui"
 
 export type StreamSample = {
   at: number
+  messageID: string
   tokens: number
 }
 
@@ -28,12 +29,41 @@ export type SessionStats = {
   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
+  /** Last time this model was observed in this session (merged with `max` across a subtree). */
+  lastAt: 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>
+  /** `sessionID -> parentID`; a key that is present with an `undefined` value is a confirmed root. */
+  parentOf: Record<string, string | undefined>
 }
 
 const STREAM_WINDOW_MS = 5_000
@@ -43,12 +73,36 @@ 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 descendant sessions folded into one panel (cycle-safe traversal bound). */
+const SUBTREE_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,
+    lastAt: 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))
 }
@@ -90,14 +144,16 @@ export function averageTtft(average: SessionAverage | undefined) {
   return formatTtft(average.totalTtftMs / average.stepCount / 1_000)
 }
 
-export function cacheRate(stats: SessionStats | undefined) {
-  if (!stats || stats.cachePrompt <= 0) return "-"
+/** 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: SessionStats | undefined) {
-  if (!stats || stats.steps <= 0) return "-"
-  return `$${stats.cost >= 1 ? stats.cost.toFixed(2) : stats.cost.toFixed(4)}`
+export function costText(stats: { cost: number; steps: number } | undefined) {
+  if (!stats || stats.steps <= 0) return undefined
+  // Always four decimals so the cost column keeps a stable width as spend grows.
+  return `$${stats.cost.toFixed(4)}`
 }
 
 /** FIFO-bound a Set so it never grows past `limit`. */
@@ -120,6 +176,27 @@ function boundedSet<K, V>(map: Map<K, V>, key: K, value: V, limit: number) {
   map.set(key, value)
 }
 
+export type ModelRow = {
+  key: string
+  label: string
+  active: boolean
+  /** True when any descendant (subagent) session contributed data to this row. */
+  subagent?: 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
@@ -134,10 +211,11 @@ export type TrackerInternals = {
   dedupSize(sessionID: string): number
   retries(sessionID: string): number
   mounted(): string[]
+  activeModel(sessionID: string): string | undefined
 }
 
 export type TrackerHandle = {
-  statusText(sessionID: string): string
+  modelRows(sessionID: string): ModelPanel
   mountSession(sessionID: string): void
   unmountSession(sessionID: string): void
   prune(now?: number): void
@@ -153,7 +231,15 @@ export function getLastInternals(): TrackerInternals | undefined {
 }
 
 export function createTracker(api: TuiPluginApi, onChange: () => void): TrackerHandle {
-  const tracker: Tracker = { samples: {}, timings: {}, averages: {}, stats: {}, dedup: {} }
+  const tracker: Tracker = {
+    samples: {},
+    timings: {},
+    averages: {},
+    stats: {},
+    dedup: {},
+    models: {},
+    parentOf: {},
+  }
   const partDecisions = new Map<string, boolean>()
   const mounted = new Set<string>()
   const order: string[] = []
@@ -182,6 +268,8 @@ export function createTracker(api: TuiPluginApi, onChange: () => void): TrackerH
     delete tracker.averages[sessionID]
     delete tracker.samples[sessionID]
     delete tracker.dedup[sessionID]
+    delete tracker.models[sessionID]
+    delete tracker.parentOf[sessionID]
     clearTimings(sessionID)
   }
 
@@ -203,6 +291,13 @@ export function createTracker(api: TuiPluginApi, onChange: () => void): TrackerH
     }
   }
 
+  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
 
@@ -228,12 +323,16 @@ export function createTracker(api: TuiPluginApi, onChange: () => void): TrackerH
     bump()
   }
 
-  const liveRate = (sessionID: string) => {
+  /** Live rate restricted to samples attributed to `key` via the `messageID -> model` mapping. */
+  const sessionLiveRate = (sessionID: string, key: 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 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
 
@@ -241,13 +340,162 @@ export function createTracker(api: TuiPluginApi, onChange: () => void): TrackerH
     return formatRate(tokens / (activeDuration(samples, now) / 1_000))
   }
 
-  const statusText = (sessionID: string) => {
-    const average = tracker.averages[sessionID]
-    const stats = tracker.stats[sessionID]
-    const live = liveRate(sessionID) ?? "-"
-    const avg = averageRate(average) ?? "-"
-    const ttft = averageTtft(average) ?? "-"
-    return `TPS ${live} | AVG ${avg} | TTFT ${ttft} | CACHE ${cacheRate(stats)} | COST ${costText(stats)} | RETRY ${stats?.retries ?? 0}`
+  /** Fold a session's parent from `session.created`/`session.updated`, or lazily from state.
+   * A successful lookup is cached; an unknown session is retried on the next render. */
+  const resolveParent = (sessionID: string) => {
+    if (sessionID in tracker.parentOf) return
+    const info = api.state.session.get(sessionID)
+    if (!info) return
+    tracker.parentOf[sessionID] = info.parentID
+  }
+
+  const rememberParent = (sessionID: string, parentID: string | undefined) => {
+    if (sessionID in tracker.parentOf && tracker.parentOf[sessionID] === parentID) return
+    tracker.parentOf[sessionID] = parentID
+    bump()
+  }
+
+  const knownSessions = () => {
+    const ids = new Set<string>(Object.keys(tracker.models))
+    for (const id of Object.keys(tracker.stats)) ids.add(id)
+    for (const id of Object.keys(tracker.averages)) ids.add(id)
+    return ids
+  }
+
+  /** Breadth-first descendants of `sessionID` (excluding itself), cycle-safe and capped. */
+  const descendants = (sessionID: string) => {
+    const children = new Map<string, string[]>()
+    for (const [child, parent] of Object.entries(tracker.parentOf)) {
+      if (!parent) continue
+      const siblings = children.get(parent)
+      if (siblings) siblings.push(child)
+      else children.set(parent, [child])
+    }
+
+    const seen = new Set<string>([sessionID])
+    const found: string[] = []
+    const queue = [sessionID]
+    while (queue.length > 0 && found.length < SUBTREE_LIMIT) {
+      const current = queue.shift()!
+      for (const child of children.get(current) ?? []) {
+        if (seen.has(child)) continue
+        seen.add(child)
+        found.push(child)
+        queue.push(child)
+        if (found.length >= SUBTREE_LIMIT) break
+      }
+    }
+    return found
+  }
+
+  const mergeAggregate = (target: ModelAggregate, source: ModelAggregate) => {
+    target.cacheRead += source.cacheRead
+    target.cachePrompt += source.cachePrompt
+    target.cost += source.cost
+    target.steps += source.steps
+    target.totalTokens += source.totalTokens
+    target.totalDurationMs += source.totalDurationMs
+    target.totalTtftMs += source.totalTtftMs
+    target.stepCount += source.stepCount
+    target.lastAt = Math.max(target.lastAt, source.lastAt)
+  }
+
+  const sessionModelAt = (sessionID: string) => {
+    const models = tracker.models[sessionID]
+    if (!models) return 0
+    let at = 0
+    for (const key of models.order) {
+      const aggregate = models.aggregates[key]
+      if (aggregate && aggregate.lastAt > at) at = aggregate.lastAt
+    }
+    return at
+  }
+
+  /** Live rate for a merged row: the parent and its subagents share one row, so only the
+   * session/model pair that most recently saw activity contributes. Concurrent streams in a
+   * parent and a child are therefore approximated by the newer one instead of being summed. */
+  const liveRateFor = (sessions: string[], key: string) => {
+    let latest: { sessionID: string; at: number } | undefined
+    for (const sessionID of sessions) {
+      const aggregate = tracker.models[sessionID]?.aggregates[key]
+      if (!aggregate) continue
+      if (!latest || aggregate.lastAt >= latest.at) latest = { sessionID, at: aggregate.lastAt }
+    }
+    if (!latest) return undefined
+    return sessionLiveRate(latest.sessionID, key)
+  }
+
+  const modelRows = (sessionID: string): ModelPanel => {
+    // Link sessions that only announced themselves through message events (a child can stream
+    // before its `session.created` event is delivered).
+    for (const id of knownSessions()) resolveParent(id)
+
+    const subtree = [sessionID, ...descendants(sessionID)]
+    const retries = tracker.stats[sessionID]?.retries ?? 0
+
+    // Session CACHE uses the same subtree scope as the model rows.
+    let cacheRead = 0
+    let cachePrompt = 0
+    for (const id of subtree) {
+      const stats = tracker.stats[id]
+      if (!stats) continue
+      cacheRead += stats.cacheRead
+      cachePrompt += stats.cachePrompt
+    }
+    const cache = cacheText({ cacheRead, cachePrompt })
+
+    // Fold the subtree oldest→newest so `order` keeps its "oldest first" meaning across sessions.
+    const sessions = subtree
+      .filter((id) => tracker.models[id])
+      .sort((left, right) => sessionModelAt(left) - sessionModelAt(right))
+    if (sessions.length === 0) return { rows: [], overflow: 0, retries, cache }
+
+    const order: string[] = []
+    const aggregates: Record<string, ModelAggregate> = {}
+    const subagentModels = new Set<string>()
+    for (const id of sessions) {
+      const models = tracker.models[id]
+      for (const key of models.order) {
+        const aggregate = models.aggregates[key]
+        if (!aggregate) continue
+        let merged = aggregates[key]
+        if (!merged) {
+          merged = emptyAggregate()
+          aggregates[key] = merged
+          order.push(key)
+        }
+        mergeAggregate(merged, aggregate)
+        if (id !== sessionID) subagentModels.add(key)
+      }
+    }
+
+    let active: string | undefined
+    for (const id of sessions) active = tracker.models[id].active ?? active
+
+    // `order` is oldest→newest; reverse for most-recent-first ordering of the non-active rows.
+    const recency = [...order].reverse()
+    const ordered = active && active in 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 = aggregates[key]
+      const isActive = key === active
+      return {
+        key,
+        label: key,
+        active: isActive,
+        subagent: subagentModels.has(key),
+        tps: isActive ? liveRateFor(subtree, key) : undefined,
+        avg: averageRate(aggregate),
+        ttft: averageTtft(aggregate),
+        cache: cacheText(aggregate),
+        cost: costText(aggregate),
+      }
+    })
+
+    return { rows, overflow, retries, cache }
   }
 
   listeners.push(
@@ -269,6 +517,7 @@ export function createTracker(api: TuiPluginApi, onChange: () => void): TrackerH
 
       appendSample(sessionID, messageID, {
         at: Date.now(),
+        messageID,
         tokens: estimateTokens(event.properties.delta),
       })
     }),
@@ -279,6 +528,16 @@ export function createTracker(api: TuiPluginApi, onChange: () => void): TrackerH
       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
+      models.aggregates[key] = { ...models.aggregates[key], lastAt: Date.now() }
+      boundedSet(models.messageModels, info.id, key, MESSAGE_MODEL_LIMIT)
 
       if (!info.time.completed) {
         const existing = tracker.timings[info.id]
@@ -308,6 +567,14 @@ export function createTracker(api: TuiPluginApi, onChange: () => void): TrackerH
           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]
@@ -328,6 +595,14 @@ export function createTracker(api: TuiPluginApi, onChange: () => void): TrackerH
             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]
@@ -396,6 +671,20 @@ export function createTracker(api: TuiPluginApi, onChange: () => void): TrackerH
     }),
   )
 
+  // Subagent sessions announce their parent here; the tree is also backfilled lazily from state.
+  listeners.push(
+    api.event.on("session.created", (event) => {
+      rememberParent(event.properties.info.id, event.properties.info.parentID)
+    }),
+  )
+
+  listeners.push(
+    api.event.on("session.updated", (event) => {
+      rememberParent(event.properties.info.id, event.properties.info.parentID)
+    }),
+  )
+
+  // The 1s tick re-evaluates live TPS staleness and prunes stale stream samples.
   const timer = setInterval(() => {
     prune()
     bump()
@@ -415,11 +704,12 @@ export function createTracker(api: TuiPluginApi, onChange: () => void): TrackerH
     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 {
-    statusText,
+    modelRows,
     mountSession(sessionID) {
       mounted.add(sessionID)
     },
@@ -437,3 +727,26 @@ export function createTracker(api: TuiPluginApi, onChange: () => void): TrackerH
     },
   }
 }
+
+/** 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,17 +1,109 @@
 /** @jsxImportSource @opentui/solid */
 import type { TuiPlugin, TuiPluginApi, TuiPluginModule } from "@opencode-ai/plugin/tui"
-import { createMemo, createSignal, onCleanup, type Accessor } from "solid-js"
-import { createTracker, type TrackerHandle } from "./tracker"
+import { For, Show, createEffect, createMemo, createSignal, onCleanup, type Accessor } from "solid-js"
+import {
+  clearLastPanelController,
+  createTracker,
+  setLastPanelController,
+  type ModelRow,
+  type TrackerHandle,
+} from "./tracker"
 
-function SessionPromptRight(props: {
+/** Detail lines sit three cells in from the fold marker, visually owned by the row above. */
+const DETAIL_INDENT = "   "
+/** Fixed cells keep every label on the same column across rows without measuring the panel. */
+const RATE_CELL = 4
+const TTFT_CELL = 6
+const CACHE_CELL = 4
+
+/** Split `provider/model` so the provider can be muted. Model ids may contain slashes, so only the
+ * first slash separates the provider. When the model already starts with the provider name
+ * (`deepseek/deepseek-flash`) the redundant prefix is dropped. */
+function splitLabel(label: string) {
+  const slash = label.indexOf("/")
+  if (slash <= 0) return { provider: "", model: label }
+  const provider = label.slice(0, slash)
+  const model = label.slice(slash + 1)
+  if (model.toLowerCase().startsWith(provider.toLowerCase())) return { provider: "", model }
+  return { provider: `${provider}/`, model }
+}
+
+function rateCell(value: string | undefined) {
+  return value === undefined ? "—" : `${value.padStart(RATE_CELL)}t/s`
+}
+
+function ttftCell(value: string | undefined) {
+  return (value ?? "—").padEnd(TTFT_CELL)
+}
+
+function cacheCell(value: string | undefined) {
+  if (value === undefined) return "—".padStart(CACHE_CELL)
+  const percent = value.endsWith("%") ? value.slice(0, -1) : value
+  return `${percent.padStart(3)}%`
+}
+
+/** A single model row: fold marker + summary line, plus its detail lines 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 }
+  }
+
+  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()
+  }
+
+  const theme = () => props.api.theme.current
+  const parts = () => splitLabel(props.row.label)
+
+  return (
+    <box flexDirection="column" onMouseDown={handleMouseDown} onMouseUp={handleMouseUp}>
+      <text wrapMode="none" truncate>
+        <span style={{ fg: theme().textMuted } as Record<string, unknown>}>{`${props.expanded ? "▼" : "▶"} `}</span>
+        <Show when={props.row.subagent}>
+          <span style={{ fg: theme().textMuted } as Record<string, unknown>}>{"↳ "}</span>
+        </Show>
+        <Show when={parts().provider}>
+          <span style={{ fg: theme().textMuted } as Record<string, unknown>}>{parts().provider}</span>
+        </Show>
+        <span style={{ fg: theme().text } as Record<string, unknown>}>{parts().model}</span>
+      </text>
+      <Show when={props.expanded}>
+        <text fg={theme().textMuted} wrapMode="none" truncate>
+          {`${DETAIL_INDENT}AVG ${rateCell(props.row.avg)}${
+            props.row.tps === undefined ? "" : ` · TPS ${rateCell(props.row.tps)}`
+          }`}
+        </text>
+        <text fg={theme().textMuted} wrapMode="none" truncate>
+          {`${DETAIL_INDENT}TTFT ${ttftCell(props.row.ttft)} · CACHE ${cacheCell(props.row.cache)} · ${
+            props.row.cost ?? "—"
+          }`}
+        </text>
+      </Show>
+    </box>
+  )
+}
+
+/** Per-session model panel, mounted at `sidebar_footer`. */
+function ModelPanelView(props: {
   api: TuiPluginApi
   sessionID: string
   tracker: TrackerHandle
   revision: Accessor<number>
 }) {
   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
 
-  const content = createMemo(() => {
+  const panel = createMemo(() => {
     props.revision()
     const sessionID = props.sessionID
     if (mounted !== sessionID) {
@@ -19,14 +111,71 @@ function SessionPromptRight(props: {
       props.tracker.mountSession(sessionID)
       mounted = sessionID
     }
-    return props.tracker.statusText(sessionID)
+    return props.tracker.modelRows(sessionID)
   })
 
+  // 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
+    }
+    if (active && active !== seededActive) {
+      seededActive = active
+      setExpanded(new Set<string>([active]))
+    }
+  })
+
+  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 controller = { toggle, isExpanded: (key: string) => expanded().has(key) }
+  setLastPanelController(controller)
+
   onCleanup(() => {
     if (mounted !== undefined) props.tracker.unmountSession(mounted)
+    clearLastPanelController(controller)
   })
 
-  return <text fg={props.api.theme.current.textMuted}>{content()}</text>
+  return (
+    <box flexDirection="column">
+      <text fg={props.api.theme.current.text} wrapMode="none" truncate>
+        <b>Performance · observed</b>
+      </text>
+      <Show when={panel().rows.length === 0}>
+        <text fg={props.api.theme.current.textMuted} wrapMode="none" truncate>
+          —
+        </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} wrapMode="none" truncate>
+          {`+${panel().overflow} more models`}
+        </text>
+      </Show>
+      <text fg={props.api.theme.current.textMuted} wrapMode="none" truncate>
+        {`Session CACHE ${panel().cache ?? "—"}${panel().retries > 0 ? ` · retries ${panel().retries}` : ""}`}
+      </text>
+    </box>
+  )
 }
 
 const tui: TuiPlugin = async (api) => {
@@ -37,8 +186,8 @@ const tui: TuiPlugin = async (api) => {
 
   api.slots.register({
     slots: {
-      session_prompt_right(_context, props) {
-        return <SessionPromptRight api={api} sessionID={props.session_id} tracker={tracker} revision={revision} />
+      sidebar_footer(_context, props) {
+        return <ModelPanelView api={api} sessionID={props.session_id} tracker={tracker} revision={revision} />
       },
     },
   })