opencode-models-usage-plugin 1.0.1 → 2.0.0

package/README.ja.md

@@ -57,42 +57,44 @@ OpenCode のサイドバーで、現在のセッションツリー（再帰的
 
 ## 動作要件
 
-- OpenCode `>= 1.4.3`
+- OpenCode `>= 2.0.0`
+
+このパッケージは OpenCode V2 の TUI プラグイン API（`@opencode/plugin`）向けです。V1 の `tui.json` にある `plugin` / `plugin_enabled` では読み込まれません。
 
 ## インストール
 
-### 方法 1: グローバル TUI 設定を手動で更新する（初回におすすめ）
+TUI 専用パッケージです。グローバルな CLI 設定に追加すると、ターミナルがリモートサーバーへ接続していてもサイドバーは有効なままです。
 
-以下のグローバル設定ファイルを開くか、新規作成します。
+次のファイルを開くか、新規作成します。
 
 ```text
-~/.config/opencode/tui.json
+~/.config/opencode/cli.json
 ```
 
-次の内容を追加してください。
+`$XDG_CONFIG_HOME` が設定されている場合は `$XDG_CONFIG_HOME/opencode/cli.json` を使います。
 
 ```json
 {
-  "$schema": "https://opencode.ai/tui.json",
-  "plugin": [
-    "opencode-models-usage-plugin/tui"
-  ],
-  "plugin_enabled": {
-    "session-model-usage": true
-  }
+  "$schema": "https://opencode.ai/v2/cli.json",
+  "plugins": [
+    "opencode-models-usage-plugin"
+  ]
 }
 ```
 
-保存して OpenCode を再起動すると、npm 経由で自動インストールされます。
+保存すると、OpenCode が npm からパッケージを入れ、`./tui` エントリ（`Plugin.define`、id は `session-model-usage`）を読み込みます。サイドバーがすぐ出ないときはターミナルクライアントを再起動してください。
 
-### 方法 2: CLI でワンコマンドインストール
+パッケージは残したままパネルだけ止めたい場合は、同じ配列にプラグイン id を `-` 付きで追加します。
 
-```bash
-opencode plugin opencode-models-usage-plugin --global
+```json
+{
+  "plugins": [
+    "opencode-models-usage-plugin",
+    "-session-model-usage"
+  ]
+}
 ```
 
-このコマンドでプラグインのインストールとグローバル設定の更新を自動で行えます。
-
 ## 技術メモ
 
 - データは provider/model label 単位で厳密に集約されます
@@ -104,7 +106,7 @@ opencode plugin opencode-models-usage-plugin --global
 ## パッケージ情報
 
 - npm: `opencode-models-usage-plugin`
-- 現在のバージョン: `0.1.0`
+- 現在のバージョン: `2.0.0`
 
 ## License
 

package/README.ko.md

@@ -57,42 +57,44 @@ OpenCode 사이드바에서 현재 세션 트리(재귀적인 하위 세션 포
 
 ## 요구 사항
 
-- OpenCode `>= 1.4.3`
+- OpenCode `>= 2.0.0`
+
+이 패키지는 OpenCode V2 TUI 플러그인 API(`@opencode/plugin`)용입니다. V1 `tui.json` 의 `plugin` / `plugin_enabled` 로는 로드되지 않습니다.
 
 ## 설치 방법
 
-### 방법 1: 전역 TUI 설정 파일을 수동으로 수정하기 (처음엔 이 방법 추천)
+TUI 전용 패키지입니다. 전역 CLI 설정에 넣으면 터미널이 원격 서버에 붙어 있어도 사이드바가 그대로 동작합니다.
 
-다음 전역 설정 파일을 열거나 새로 만드세요.
+다음 파일을 열거나 새로 만드세요.
 
 ```text
-~/.config/opencode/tui.json
+~/.config/opencode/cli.json
 ```
 
-아래 내용을 추가하세요.
+`$XDG_CONFIG_HOME` 이 설정되어 있으면 `$XDG_CONFIG_HOME/opencode/cli.json` 을 사용합니다.
 
 ```json
 {
-  "$schema": "https://opencode.ai/tui.json",
-  "plugin": [
-    "opencode-models-usage-plugin/tui"
-  ],
-  "plugin_enabled": {
-    "session-model-usage": true
-  }
+  "$schema": "https://opencode.ai/v2/cli.json",
+  "plugins": [
+    "opencode-models-usage-plugin"
+  ]
 }
 ```
 
-저장한 뒤 OpenCode 를 재시작하면 npm 을 통해 자동으로 설치됩니다.
+저장하면 OpenCode 가 npm 에서 패키지를 설치하고 `./tui` 엔트리(`Plugin.define`, id 는 `session-model-usage`)를 불러옵니다. 사이드바가 바로 보이지 않으면 터미널 클라이언트를 다시 시작하세요.
 
-### 방법 2: CLI 한 줄로 설치하기
+패키지는 두고 패널만 끄려면 같은 배열에 플러그인 id 를 `-` 접두사로 추가합니다.
 
-```bash
-opencode plugin opencode-models-usage-plugin --global
+```json
+{
+  "plugins": [
+    "opencode-models-usage-plugin",
+    "-session-model-usage"
+  ]
+}
 ```
 
-이 명령은 플러그인을 설치하고 전역 설정도 자동으로 갱신합니다.
-
 ## 기술 메모
 
 - 데이터는 provider/model label 기준으로 엄격하게 집계됩니다
@@ -104,7 +106,7 @@ opencode plugin opencode-models-usage-plugin --global
 ## 패키지 정보
 
 - npm: `opencode-models-usage-plugin`
-- 현재 버전: `0.1.0`
+- 현재 버전: `2.0.0`
 
 ## License
 

package/README.md

@@ -66,42 +66,44 @@ Whether you are heavily using model routing, complex agent orchestration, or sim
 
 ## Requirements
 
-- OpenCode `>= 1.4.3`
+- OpenCode `>= 2.0.0`
+
+This package targets the OpenCode V2 TUI plugin API (`@opencode/plugin`). It does not load under the V1 `tui.json` `plugin` / `plugin_enabled` config.
 
 ## Installation
 
-### Method 1: Manually update the global TUI config (recommended for first-time setup)
+This is a TUI-only package. Add it to the global CLI config so it stays active even when the terminal is connected to a remote server.
 
-Open or create the global config file:
+Open or create:
 
 ```text
-~/.config/opencode/tui.json
+~/.config/opencode/cli.json
 ```
 
-Add the following:
+When `$XDG_CONFIG_HOME` is set, use `$XDG_CONFIG_HOME/opencode/cli.json` instead.
 
 ```json
 {
-  "$schema": "https://opencode.ai/tui.json",
-  "plugin": [
-    "opencode-models-usage-plugin/tui"
-  ],
-  "plugin_enabled": {
-    "session-model-usage": true
-  }
+  "$schema": "https://opencode.ai/v2/cli.json",
+  "plugins": [
+    "opencode-models-usage-plugin"
+  ]
 }
 ```
 
-Save the file and restart OpenCode. The plugin will be installed automatically via npm.
+Save the file. OpenCode installs the npm package and loads its `./tui` entry (`Plugin.define`, id `session-model-usage`). Restart the terminal client if the sidebar panel does not show up on its own.
 
-### Method 2: One-click install via CLI
+To disable the panel without removing the package, prefix the plugin id in the same array:
 
-```bash
-opencode plugin opencode-models-usage-plugin --global
+```json
+{
+  "plugins": [
+    "opencode-models-usage-plugin",
+    "-session-model-usage"
+  ]
+}
 ```
 
-This command installs the plugin and updates your global config automatically.
-
 ## Technical Notes
 
 - Data is grouped strictly by provider/model label
@@ -113,7 +115,7 @@ This command installs the plugin and updates your global config automatically.
 ## Package Info
 
 - npm: `opencode-models-usage-plugin`
-- current version: `0.1.0`
+- current version: `2.0.0`
 
 ## License
 

package/README.zh-CN.md

@@ -67,42 +67,44 @@
 
 ## 运行要求
 
-- OpenCode `>= 1.4.3`
+- OpenCode `>= 2.0.0`
+
+本包使用 OpenCode V2 的 TUI 插件 API（`@opencode/plugin`）。V1 的 `tui.json` 里 `plugin` / `plugin_enabled` 不会加载这个版本。
 
 ## 安装方式
 
-### 方式一：手动修改全局 TUI 配置（推荐第一次使用）
+这是一个仅 TUI 的插件。把它写进全局 CLI 配置后，即使终端连的是远程服务器，侧边栏也会继续生效。
 
-打开或新建全局配置文件：
+打开或新建：
 
 ```text
-~/.config/opencode/tui.json
+~/.config/opencode/cli.json
 ```
 
-添加以下内容：
+如果设置了 `$XDG_CONFIG_HOME`，请改用 `$XDG_CONFIG_HOME/opencode/cli.json`。
 
 ```json
 {
-  "$schema": "https://opencode.ai/tui.json",
-  "plugin": [
-    "opencode-models-usage-plugin/tui"
-  ],
-  "plugin_enabled": {
-    "session-model-usage": true
-  }
+  "$schema": "https://opencode.ai/v2/cli.json",
+  "plugins": [
+    "opencode-models-usage-plugin"
+  ]
 }
 ```
 
-保存后重启 OpenCode，插件会自动通过 npm 安装。
+保存后，OpenCode 会从 npm 安装该包，并加载 `./tui` 入口（`Plugin.define`，id 为 `session-model-usage`）。如果侧边栏没有马上出现，重启一次终端客户端。
 
-### 方式二：CLI 一键安装（最便捷）
+不想删包、只想关掉面板时，在同一个数组里加上带 `-` 前缀的插件 id：
 
-```bash
-opencode plugin opencode-models-usage-plugin --global
+```json
+{
+  "plugins": [
+    "opencode-models-usage-plugin",
+    "-session-model-usage"
+  ]
+}
 ```
 
-这条命令会自动安装插件，并更新全局配置。
-
 ## 技术说明
 
 - 数据按 provider/model label 严格聚合
@@ -114,7 +116,7 @@ opencode plugin opencode-models-usage-plugin --global
 ## 包信息
 
 - npm：`opencode-models-usage-plugin`
-- 当前版本：`0.1.0`
+- 当前版本：`2.0.0`
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "opencode-models-usage-plugin",
-  "version": "1.0.1",
+  "version": "2.0.0",
   "description": "Show per-model usage, live TPS, tokens, and cost in the OpenCode sidebar.",
   "license": "Apache-2.0",
   "type": "module",
@@ -13,19 +13,26 @@
     "src"
   ],
   "engines": {
-    "opencode": ">=1.4.3"
+    "opencode": ">=2.0.0"
   },
   "scripts": {
     "test": "tsx --test src/**/*.test.ts",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@opencode-ai/plugin": "1.4.3",
-    "@opentui/solid": "0.1.97",
-    "solid-js": "1.9.11"
+    "@opencode/plugin": "2.2.0"
+  },
+  "peerDependencies": {
+    "@opentui/core": ">=0.6.6",
+    "@opentui/solid": ">=0.6.6",
+    "solid-js": ">=1.9.0"
   },
   "devDependencies": {
+    "@opencode/theme": "2.2.0",
+    "@opentui/core": "0.7.0",
+    "@opentui/solid": "0.7.0",
     "@types/node": "25.6.0",
+    "solid-js": "1.9.12",
     "tsx": "4.21.0",
     "typescript": "6.0.2"
   },

package/src/session-usage.test.ts

@@ -1,7 +1,12 @@
 import assert from "node:assert/strict"
 import test from "node:test"
 
-import { getSessionUsage, getTokenTotal, type SessionMessageLike } from "./session-usage"
+import {
+  fromSessionMessage,
+  getSessionUsage,
+  getTokenTotal,
+  type SessionMessageLike,
+} from "./session-usage"
 
 test("empty session returns no models", () => {
   assert.deepEqual(getSessionUsage([]), {
@@ -249,6 +254,94 @@ test("provider catalog also works when providers are stored as an array", () =>
   })
 })
 
+test("v2 assistant and compaction messages keep the same totals", () => {
+  const usage = getSessionUsage([
+    fromSessionMessage({
+      id: "msg_1",
+      type: "assistant",
+      model: { id: "gpt-4.1", providerID: "openai" },
+      cost: 0.25,
+      tokens: {
+        input: 11,
+        output: 7,
+        reasoning: 5,
+        cache: { read: 3, write: 2 },
+      },
+      time: { created: 1000, completed: 2000 },
+      finish: "stop",
+    }),
+    fromSessionMessage({
+      id: "user_1",
+      type: "user",
+      text: "hi",
+      time: { created: 500 },
+    }),
+    fromSessionMessage({
+      id: "cmp_1",
+      type: "compaction",
+      status: "completed",
+      model: { id: "gpt-4.1", providerID: "openai" },
+      cost: 0.125,
+      tokens: {
+        input: 4,
+        output: 1,
+        reasoning: 0,
+        cache: { read: 2, write: 0 },
+      },
+      time: { created: 3000, completed: 4000 },
+    }),
+  ])
+
+  assert.deepEqual(usage, {
+    models: [
+      {
+        label: "openai/gpt-4.1",
+        contextTokens: 7,
+        sessionTokens: 35,
+        sessionCachedTokens: 5,
+        cost: 0.375,
+        tps: 0,
+        isLiveTps: false,
+      },
+    ],
+  })
+})
+
+test("v1 message fields still map through", () => {
+  assert.deepEqual(
+    fromSessionMessage({
+      id: "a",
+      role: "assistant",
+      providerID: "openai",
+      modelID: "gpt-4.1",
+      cost: 1,
+      tokens: {
+        input: 1,
+        output: 2,
+        cache: { read: 3, write: 4 },
+      },
+      time: { created: 5, completed: 6 },
+      finish: "stop",
+    }),
+    {
+      id: "a",
+      role: "assistant",
+      modelID: "gpt-4.1",
+      providerID: "openai",
+      tokens: {
+        input: 1,
+        output: 2,
+        reasoning: undefined,
+        cache: { read: 3, write: 4 },
+      },
+      cost: 1,
+      summary: undefined,
+      time: { created: 5, completed: 6 },
+      finish: "stop",
+    },
+  )
+})
+
 test("token helper tolerates missing counters", () => {
   assert.equal(
     getTokenTotal({

package/src/session-usage.ts

@@ -40,6 +40,75 @@ export interface SessionUsage {
 const isRecord = (value: unknown): value is Record<string, unknown> =>
   typeof value === "object" && value !== null
 
+const readTokens = (value: unknown): TokenUsageLike | undefined => {
+  if (!isRecord(value)) return undefined
+
+  const cache = isRecord(value.cache) ? value.cache : undefined
+  return {
+    input: typeof value.input === "number" ? value.input : undefined,
+    output: typeof value.output === "number" ? value.output : undefined,
+    reasoning: typeof value.reasoning === "number" ? value.reasoning : undefined,
+    cache: cache
+      ? {
+          read: typeof cache.read === "number" ? cache.read : undefined,
+          write: typeof cache.write === "number" ? cache.write : undefined,
+        }
+      : undefined,
+  }
+}
+
+/**
+ * Normalize a V1 (`role` / `modelID` / `providerID`) or V2 session message
+ * (`type` / `model: { id, providerID }`) into the shape `getSessionUsage` reads.
+ *
+ * V2 compaction steps carry the cost and tokens that V1 stored on summary
+ * assistant messages, so a compaction with a model is counted as assistant usage.
+ */
+export const fromSessionMessage = (message: unknown): SessionMessageLike => {
+  if (!isRecord(message)) {
+    return { role: "unknown" }
+  }
+
+  const model = isRecord(message.model) ? message.model : undefined
+  const modelID =
+    typeof message.modelID === "string"
+      ? message.modelID
+      : typeof model?.id === "string"
+        ? model.id
+        : undefined
+  const providerID =
+    typeof message.providerID === "string"
+      ? message.providerID
+      : typeof model?.providerID === "string"
+        ? model.providerID
+        : undefined
+  const type = typeof message.type === "string" ? message.type : undefined
+  const role =
+    typeof message.role === "string"
+      ? message.role
+      : type === "compaction" && modelID
+        ? "assistant"
+        : (type ?? "unknown")
+  const time = isRecord(message.time) ? message.time : undefined
+
+  return {
+    id: typeof message.id === "string" ? message.id : undefined,
+    role,
+    modelID,
+    providerID,
+    tokens: readTokens(message.tokens),
+    cost: typeof message.cost === "number" ? message.cost : undefined,
+    summary: message.summary,
+    time: time
+      ? {
+          created: typeof time.created === "number" ? time.created : undefined,
+          completed: typeof time.completed === "number" ? time.completed : undefined,
+        }
+      : undefined,
+    finish: typeof message.finish === "string" ? message.finish : undefined,
+  }
+}
+
 const toNumber = (value: unknown): number =>
   typeof value === "number" && Number.isFinite(value) ? value : 0
 

package/src/tui.tsx

@@ -1,183 +1,273 @@
 /** @jsxImportSource @opentui/solid */
 
-import type { TuiPlugin, TuiPluginApi, TuiPluginModule } from "@opencode-ai/plugin/tui"
+import { Plugin, usePlugin } from "@opencode/plugin/tui"
+import type { JSX } from "@opentui/solid"
 import type { Accessor } from "solid-js"
 import { For, Show, createEffect, createMemo, createSignal, onCleanup, onMount } from "solid-js"
 
-import { getSessionUsage, type SessionMessageLike, type LiveTpsState } from "./session-usage"
+import { fromSessionMessage, getSessionUsage, type LiveTpsState, type SessionMessageLike } from "./session-usage"
 
 const pluginID = "session-model-usage"
+const messagePageSize = 200
+const childPageSize = 200
+
+type PluginContext = ReturnType<typeof usePlugin>
+
+type LiveInfo = {
+  sessionID: string
+  messageID: string
+  modelID: string
+  providerID?: string
+  startTime: number
+  chars: number
+}
+
+type KnownModel = {
+  modelID: string
+  providerID?: string
+}
+
+const toProviderCatalog = (
+  providers: readonly { id: string; name: string }[],
+  models: readonly { id: string; modelID: string; providerID: string; name: string }[],
+) => {
+  return providers.map((provider) => {
+    const providerModels: Record<string, { id: string; name: string }> = {}
+    for (const model of models) {
+      if (model.providerID !== provider.id) continue
+      const entry = { id: model.modelID, name: model.name }
+      providerModels[model.modelID] = entry
+      if (model.id !== model.modelID) providerModels[model.id] = entry
+    }
 
-const isRecord = (value: unknown): value is Record<string, unknown> =>
-  typeof value === "object" && value !== null
+    return {
+      id: provider.id,
+      name: provider.name,
+      models: providerModels,
+    }
+  })
+}
 
-const mapMessage = (message: unknown): SessionMessageLike => {
-  if (!isRecord(message)) {
-    return { role: "unknown" }
+const listAllMessages = async (
+  context: PluginContext,
+  sessionID: string,
+): Promise<SessionMessageLike[]> => {
+  const collected: SessionMessageLike[] = []
+  let cursor: string | undefined
+  const seenCursors = new Set<string>()
+
+  for (;;) {
+    const page = await context.client.message.list({
+      sessionID,
+      limit: messagePageSize,
+      ...(cursor ? { cursor } : { order: "asc" as const }),
+    })
+    collected.push(...page.data.map((message) => fromSessionMessage(message)))
+    const next = page.cursor.next ?? undefined
+    if (!next || seenCursors.has(next)) break
+    seenCursors.add(next)
+    cursor = next
   }
 
-  return {
-    id: typeof message.id === "string" ? message.id : undefined,
-    role: typeof message.role === "string" ? message.role : "unknown",
-    modelID: typeof message.modelID === "string" ? message.modelID : undefined,
-    providerID: typeof message.providerID === "string" ? message.providerID : undefined,
-    tokens: isRecord(message.tokens) ? message.tokens : undefined,
-    cost: typeof message.cost === "number" ? message.cost : undefined,
-    summary: message.summary,
-    time: isRecord(message.time)
-      ? {
-          created:
-            typeof message.time.created === "number" ? message.time.created : undefined,
-          completed:
-            typeof message.time.completed === "number" ? message.time.completed : undefined,
+  return collected
+}
+
+const collectSessionIDs = async (context: PluginContext, rootSessionID: string): Promise<string[]> => {
+  const ordered: string[] = []
+  const seen = new Set<string>()
+  const queue = [rootSessionID]
+
+  while (queue.length > 0) {
+    const sessionID = queue.shift()
+    if (!sessionID || seen.has(sessionID)) continue
+    seen.add(sessionID)
+    ordered.push(sessionID)
+
+    try {
+      await context.data.session.sync(sessionID)
+    } catch {
+      // The host store may already know this session.
+    }
+
+    let cursor: string | undefined
+    const seenCursors = new Set<string>()
+    try {
+      for (;;) {
+        const page = await context.client.session.list({
+          parentID: sessionID,
+          limit: childPageSize,
+          ...(cursor ? { cursor } : {}),
+        })
+        for (const child of page.data) {
+          if (seen.has(child.id)) continue
+          queue.push(child.id)
         }
-      : undefined,
-    finish: typeof message.finish === "string" ? message.finish : undefined,
+        const next = page.cursor.next ?? undefined
+        if (!next || seenCursors.has(next)) break
+        seenCursors.add(next)
+        cursor = next
+      }
+    } catch {
+      // family() below still includes sessions the host has already registered.
+    }
+  }
+
+  for (const sessionID of context.data.session.family(rootSessionID)) {
+    if (seen.has(sessionID)) continue
+    seen.add(sessionID)
+    ordered.push(sessionID)
   }
-}
 
-const mapMessages = (messages: readonly unknown[]): SessionMessageLike[] => {
-  return messages.map((message) => mapMessage(message))
+  return ordered
 }
 
-const useSessionMessages = (api: TuiPluginApi, rootSessionID: Accessor<string>) => {
-  const [rootMessages, setRootMessages] = createSignal<SessionMessageLike[]>([])
-  const [extraMessages, setExtraMessages] = createSignal<SessionMessageLike[]>([])
+const useSessionMessages = (context: PluginContext, rootSessionID: Accessor<string>) => {
+  const [messages, setMessages] = createSignal<SessionMessageLike[]>([])
   const [trackedSessionIDs, setTrackedSessionIDs] = createSignal<ReadonlySet<string>>(
     new Set([rootSessionID()]),
   )
-  
-  const [liveInfo, setLiveInfo] = createSignal<{
-    messageID: string;
-    modelID: string;
-    providerID?: string;
-    startTime: number;
-    chars: number;
-  } | null>(null)
+  const [liveInfo, setLiveInfo] = createSignal<LiveInfo | null>(null)
+  const modelsByMessage = new Map<string, KnownModel>()
 
   let reloadVersion = 0
 
-  const fetchRootMessages = async (sessionID: string): Promise<SessionMessageLike[]> => {
-    const result = await api.client.session.messages({ sessionID })
-    if (result.error || !result.data) {
-      return []
+  const reload = async (sessionID: string) => {
+    const version = ++reloadVersion
+    let sessionIDs: string[] = []
+    let nextMessages: SessionMessageLike[] = []
+
+    try {
+      sessionIDs = await collectSessionIDs(context, sessionID)
+      const groups = await Promise.all(
+        sessionIDs.map(async (id) => {
+          try {
+            // Full pages, not data.session.message.sync. That call replaces the
+            // host transcript cache with a single short page.
+            return await listAllMessages(context, id)
+          } catch {
+            return context.data.session.message.list(id).map((message) => fromSessionMessage(message))
+          }
+        }),
+      )
+      nextMessages = groups.flat()
+    } catch {
+      return
     }
 
-    return mapMessages(result.data.map((message) => message.info))
+    if (version !== reloadVersion) return
+
+    setMessages(nextMessages)
+    setTrackedSessionIDs(new Set(sessionIDs.length > 0 ? sessionIDs : [sessionID]))
+  }
+
+  const isTracked = (sessionID: string) => {
+    if (sessionID === rootSessionID()) return true
+    if (trackedSessionIDs().has(sessionID)) return true
+    return context.data.session.family(rootSessionID()).includes(sessionID)
   }
 
-  const fetchChildrenMessages = async (
-    sessionID: string,
-    visited = new Set<string>(),
-  ): Promise<{ messages: SessionMessageLike[]; sessionIDs: Set<string> }> => {
-    if (visited.has(sessionID)) {
-      return { messages: [], sessionIDs: visited }
+  const rememberModel = (messageID: string, model: { id: string; providerID: string }) => {
+    modelsByMessage.set(messageID, {
+      modelID: model.id,
+      providerID: model.providerID,
+    })
+  }
+
+  const findModel = (sessionID: string, messageID: string): KnownModel | undefined => {
+    const known = modelsByMessage.get(messageID)
+    if (known) return known
+
+    const live = fromSessionMessage(context.data.session.message.get(sessionID, messageID))
+    if (live.role === "assistant" && live.modelID) {
+      return { modelID: live.modelID, providerID: live.providerID ?? undefined }
     }
 
-    visited.add(sessionID)
-    const res = await api.client.session.children({ sessionID })
-    if (res.error || !res.data) {
-      return { messages: [], sessionIDs: visited }
+    const historical = messages().find((message) => message.id === messageID)
+    if (historical?.role === "assistant" && historical.modelID) {
+      return { modelID: historical.modelID, providerID: historical.providerID ?? undefined }
     }
 
-    let msgs: SessionMessageLike[] = []
-    for (const child of res.data) {
-      const childID = child.id
-      if (visited.has(childID)) {
-        continue
-      }
+    return undefined
+  }
+
+  const noteDelta = (sessionID: string, messageID: string, delta: string) => {
+    if (!isTracked(sessionID) || delta.length === 0) return
 
-      const mRes = await api.client.session.messages({ sessionID: childID })
-      if (!mRes.error && mRes.data) {
-        msgs.push(...mapMessages(mRes.data.map((message) => message.info)))
+    setLiveInfo((prev) => {
+      if (prev?.messageID === messageID) {
+        return { ...prev, chars: prev.chars + delta.length }
       }
-      const nested = await fetchChildrenMessages(childID, visited)
-      msgs.push(...nested.messages)
-    }
-    return { messages: msgs, sessionIDs: visited }
-  }
 
-  const reloadExtraMessages = async (sessionID: string) => {
-    const version = ++reloadVersion
-    const [root, result] = await Promise.all([
-      fetchRootMessages(sessionID),
-      fetchChildrenMessages(sessionID),
-    ])
+      const model = findModel(sessionID, messageID)
+      if (!model) return prev
 
-    if (version !== reloadVersion) {
-      return
-    }
+      return {
+        sessionID,
+        messageID,
+        modelID: model.modelID,
+        providerID: model.providerID,
+        startTime: Date.now(),
+        chars: delta.length,
+      }
+    })
+  }
 
-    setRootMessages(root)
-    setExtraMessages(result.messages)
-    setTrackedSessionIDs(new Set(result.sessionIDs))
+  const clearLive = (sessionID: string) => {
+    if (!isTracked(sessionID)) return
+    setLiveInfo((prev) => (prev?.sessionID === sessionID ? null : prev))
   }
 
   createEffect(() => {
     const sessionID = rootSessionID()
-    setRootMessages([])
-    setExtraMessages([])
+    modelsByMessage.clear()
+    setMessages([])
     setTrackedSessionIDs(new Set([sessionID]))
     setLiveInfo(null)
-    void reloadExtraMessages(sessionID)
+    void reload(sessionID)
   })
 
   onMount(() => {
     const unsubs = [
-      api.event.on("message.part.delta", (ev) => {
-        const { sessionID, messageID, field, delta } = ev.properties
-        if (!sessionID || !messageID || typeof delta !== "string") return
-        if (!trackedSessionIDs().has(sessionID)) return
-        if (field !== "text" && field !== "reasoning") return
-
-        setLiveInfo(prev => {
-          if (prev?.messageID === messageID) {
-            return { ...prev, chars: prev.chars + delta.length }
-          }
-
-          // Try to find the message
-          const rootMsgs = mapMessages(api.state.session.messages(rootSessionID()))
-          const historicalRootMessages = rootMessages()
-          const extra = extraMessages()
-          let found = rootMsgs.find(m => m.id === messageID)
-          if (!found) {
-            found = historicalRootMessages.find(m => m.id === messageID)
-          }
-          if (!found) {
-            found = extra.find(m => m.id === messageID)
-          }
-
-          if (!found || found.role !== "assistant" || !found.modelID) {
-            return prev
-          }
-
-          const modelID = found.modelID
-          if (typeof modelID !== "string") {
-            return prev
-          }
-
-          return {
-            messageID,
-            modelID,
-            providerID: typeof found.providerID === "string" ? found.providerID : undefined,
-            startTime: Date.now(),
-            chars: delta.length
-          }
-        })
+      context.data.on("session.text.delta", (event) => {
+        noteDelta(event.data.sessionID, event.data.assistantMessageID, event.data.delta)
       }),
-      api.event.on("message.updated", () => {
-        void reloadExtraMessages(rootSessionID())
+      context.data.on("session.reasoning.delta", (event) => {
+        noteDelta(event.data.sessionID, event.data.assistantMessageID, event.data.delta)
       }),
-      api.event.on("session.status", () => {
-        void reloadExtraMessages(rootSessionID())
+      context.data.on("session.step.started", (event) => {
+        rememberModel(event.data.assistantMessageID, event.data.model)
+        void reload(rootSessionID())
+      }),
+      context.data.on("session.step.ended", () => {
+        void reload(rootSessionID())
+      }),
+      context.data.on("session.step.failed", () => {
+        void reload(rootSessionID())
+      }),
+      context.data.on("session.usage.updated", () => {
+        void reload(rootSessionID())
+      }),
+      context.data.on("session.status", () => {
+        void reload(rootSessionID())
+      }),
+      context.data.on("session.created", () => {
+        void reload(rootSessionID())
+      }),
+      context.data.on("session.idle", (event) => {
+        clearLive(event.data.sessionID)
+      }),
+      context.data.on("session.execution.succeeded", (event) => {
+        clearLive(event.data.sessionID)
+        void reload(rootSessionID())
+      }),
+      context.data.on("session.execution.failed", (event) => {
+        clearLive(event.data.sessionID)
+        void reload(rootSessionID())
+      }),
+      context.data.on("session.execution.interrupted", (event) => {
+        clearLive(event.data.sessionID)
+        void reload(rootSessionID())
       }),
-      api.event.on("session.idle", (ev) => {
-        if (!trackedSessionIDs().has(ev.properties.sessionID)) {
-          return
-        }
-
-        setLiveInfo(null)
-      })
     ]
 
     onCleanup(() => {
@@ -188,9 +278,8 @@ const useSessionMessages = (api: TuiPluginApi, rootSessionID: Accessor<string>)
     })
   })
 
-  // Derive liveTps from liveInfo
   const [now, setNow] = createSignal(Date.now())
-  
+
   onMount(() => {
     const timer = setInterval(() => setNow(Date.now()), 500)
     onCleanup(() => clearInterval(timer))
@@ -201,37 +290,61 @@ const useSessionMessages = (api: TuiPluginApi, rootSessionID: Accessor<string>)
     if (!info) return null
 
     const durationMs = now() - info.startTime
-    // Estimate 1 token = 4 chars approx during streaming
+    // Estimate 1 token = 4 chars while the reply is still streaming.
     const tpsTokens = Math.ceil(info.chars / 4)
 
     return {
       modelID: info.modelID,
       providerID: info.providerID,
       tpsTokens,
-      tpsDurationMs: Math.max(durationMs, 1)
+      tpsDurationMs: Math.max(durationMs, 1),
     }
   })
 
-  const usageMessages = createMemo(() => {
-    return [...rootMessages(), ...extraMessages()]
-  })
-
-  return { usageMessages, liveTps }
+  return { usageMessages: messages, liveTps }
 }
 
-const SessionUsagePanel = (props: { api: TuiPluginApi; sessionID: string }) => {
-  const activeSessionID = createMemo<string>(() => {
-    const route = props.api.route.current
-    if (route.name === "session" && typeof route.params?.sessionID === "string") {
-      return route.params.sessionID
+const SessionUsagePanel = (props: { sessionID: string }) => {
+  const context = usePlugin()
+  const activeSessionID = () => props.sessionID
+  const { usageMessages, liveTps } = useSessionMessages(context, activeSessionID)
+  const [catalog, setCatalog] = createSignal<ReturnType<typeof toProviderCatalog>>([])
+
+  const refreshCatalog = async () => {
+    const location = context.location ?? context.data.location.default()
+    try {
+      await Promise.all([
+        context.data.location.provider.sync(location),
+        context.data.location.model.sync(location),
+      ])
+    } catch {
+      // Keep going with whatever the host has already cached.
     }
 
-    return props.sessionID
+    setCatalog(
+      toProviderCatalog(
+        context.data.location.provider.list(location) ?? [],
+        context.data.location.model.list(location) ?? [],
+      ),
+    )
+  }
+
+  onMount(() => {
+    void refreshCatalog()
+    const stopProvider = context.data.on("provider.updated", () => {
+      void refreshCatalog()
+    })
+    const stopModel = context.data.on("model.updated", () => {
+      void refreshCatalog()
+    })
+    onCleanup(() => {
+      stopProvider()
+      stopModel()
+    })
   })
 
-  const { usageMessages, liveTps } = useSessionMessages(props.api, activeSessionID)
-  
-  const usage = createMemo(() => getSessionUsage(usageMessages(), props.api.state.provider, liveTps()))
+  const usage = createMemo(() => getSessionUsage(usageMessages(), catalog(), liveTps()))
+  const theme = () => context.theme
 
   return (
     <box flexDirection="column">
@@ -242,27 +355,41 @@ const SessionUsagePanel = (props: { api: TuiPluginApi; sessionID: string }) => {
         <For each={usage().models}>
           {(model) => (
             <box flexDirection="column">
-              <text fg={model.isLiveTps ? "yellow" : undefined}>● {model.label}</text>
+              <text fg={model.isLiveTps ? theme().text.feedback.warning.base : theme().text.base}>
+                ● {model.label}
+              </text>
               <box flexDirection="column" paddingLeft={2}>
                 <box flexDirection="row">
-                  <text>■ TPS </text>
-                  <text fg="gray">{model.isLiveTps && model.tps > 0 ? model.tps.toFixed(1) : "—"}</text>
+                  <text fg={theme().text.base} width={18} flexShrink={0}>
+                    ■ TPS
+                  </text>
+                  <text fg={theme().text.muted}>
+                    {model.isLiveTps && model.tps > 0 ? model.tps.toFixed(1) : "—"}
+                  </text>
                 </box>
                 <box flexDirection="row">
-                  <text>■ Context Tokens </text>
-                  <text fg="gray">{model.contextTokens.toLocaleString("en-US")}</text>
+                  <text fg={theme().text.base} width={18} flexShrink={0}>
+                    ■ Context Tokens
+                  </text>
+                  <text fg={theme().text.muted}>{model.contextTokens.toLocaleString("en-US")}</text>
                 </box>
                 <box flexDirection="row">
-                  <text>■ Session Tokens </text>
-                  <text fg="gray">{model.sessionTokens.toLocaleString("en-US")}</text>
+                  <text fg={theme().text.base} width={18} flexShrink={0}>
+                    ■ Session Tokens
+                  </text>
+                  <text fg={theme().text.muted}>{model.sessionTokens.toLocaleString("en-US")}</text>
                 </box>
                 <box flexDirection="row">
-                  <text>■ Session Cached </text>
-                  <text fg="gray">{model.sessionCachedTokens.toLocaleString("en-US")}</text>
+                  <text fg={theme().text.base} width={18} flexShrink={0}>
+                    ■ Session Cached
+                  </text>
+                  <text fg={theme().text.muted}>{model.sessionCachedTokens.toLocaleString("en-US")}</text>
                 </box>
                 <box flexDirection="row">
-                  <text>■ spent </text>
-                  <text fg="gray">${model.cost.toFixed(4)}</text>
+                  <text fg={theme().text.base} width={18} flexShrink={0}>
+                    ■ spent
+                  </text>
+                  <text fg={theme().text.muted}>${model.cost.toFixed(4)}</text>
                 </box>
               </box>
             </box>
@@ -273,24 +400,27 @@ const SessionUsagePanel = (props: { api: TuiPluginApi; sessionID: string }) => {
   )
 }
 
-const tui: TuiPlugin = async (api) => {
-  api.slots.register({
-    order: 150,
-    slots: {
-      sidebar_content(_ctx, props) {
-        return (
-          <Show when={props.session_id} keyed>
-            {(sessionID: string) => <SessionUsagePanel api={api} sessionID={sessionID} />}
-          </Show>
-        )
-      },
-    },
-  })
-}
+const globalKey = Symbol.for(`opencode-plugin-${pluginID}`)
 
-const plugin: TuiPluginModule & { id: string } = {
+export default Plugin.define({
   id: pluginID,
-  tui,
-}
+  setup(context) {
+    const globalStore = globalThis as { [key: symbol]: boolean | undefined }
+    if (globalStore[globalKey]) return
+    globalStore[globalKey] = true
+
+    const unregister: () => void = context.ui.slot({
+      append: "sidebar.content",
+      render: ({ sessionID }): JSX.Element => (
+        <Show when={sessionID} keyed>
+          {(id: string) => <SessionUsagePanel sessionID={id} />}
+        </Show>
+      ),
+    })
 
-export default plugin
+    return () => {
+      globalStore[globalKey] = false
+      unregister()
+    }
+  },
+})