opencode-models-usage-plugin 0.1.0 → 1.0.1

package/README.ja.md

@@ -0,0 +1,113 @@
+# opencode-models-usage-plugin
+
+**言語:** [English](./README.md) | [简体中文](./README.zh-CN.md) | 日本語 | [한국어](./README.ko.md)
+
+**ついに、OpenCode のサイドバーで「AI モデルチームが今何をしているか」をリアルタイムで見られるようになりました。**
+
+複数モデルや多段 Agent、さらに OMO のサブセッションまで使って本格的に Coding していると、こんな不安を感じることはありませんか？
+
+- 今どのモデルが出力中なのか？速度は速いのか遅いのか？
+- すでにどれだけ tokens を消費したのか？サブ Agent が別のモデルを勝手に呼んでいないか？
+- キャッシュのヒット状況はどうか？この coding plan はまだ持ちそうか？
+- コストが急に跳ね上がらないか？
+
+**もう、そうした不安に振り回される必要はありません。**
+
+`opencode-models-usage-plugin` は、現在のセッションツリー全体におけるモデル使用状況を見える化します。何が起きているかを把握しながら、より安心して AI チームを動かせるようになります。
+
+![Models Usage sidebar screenshot](./src/assets/img.png)
+
+## 何が表示されるのか
+
+OpenCode のサイドバーで、現在のセッションツリー（再帰的な子セッションを含む）に登場した各モデルの使用状況を **provider/model** 単位で集約表示します。
+
+- **Live TPS**: ストリーミング出力中の tokens per second。アイドル時は `—` に戻ります
+- **Context Tokens**: そのモデルの直近の返信に対応する token 総数
+- **Session Tokens**: 現在のセッション内でそのモデルが累積消費した token 総数
+- **Session Cached**: 現在のセッション内でそのモデルが累積でキャッシュヒットした token 数
+- **Total Cost**: 現時点までの累積コスト（`spent $x.xxxx` 形式）
+
+モデルが現在アクティブに出力しているときは、モデル名が**ハイライト表示**されるため、「今どのモデルが動いているか」を一目で把握できます。
+
+## サイドバー表示例
+
+```text
+📊 Models Usage
+● OpenAI/GPT-5.4 Fast
+  ■ TPS 23.1
+  ■ Context Tokens 12,345
+  ■ Session Tokens 84,163
+  ■ Session Cached 81,792
+  ■ spent $0.0000
+
+● Google/Gemini-2.5-Pro
+  ■ TPS —
+  ■ Context Tokens 8,942
+  ■ Session Tokens 45,672
+  ■ Session Cached 32,100
+  ■ spent $0.0123
+```
+
+## これが重要な理由
+
+- **完全な透明性**: OMO サブ Agent や再帰呼び出しによる使用量も自動で集約され、見えないコストがなくなります
+- **リアルタイム把握**: Live TPS、キャッシュヒット、累積コストをその場で確認できます
+- **判断しやすい**: 遅いモデルやキャッシュ効率の良いモデルを素早く見分け、戦略を調整できます
+- **安心して Coding**: 突然の高額請求や token 枯渇を気にしすぎず、開発そのものに集中できます
+
+## 動作要件
+
+- OpenCode `>= 1.4.3`
+
+## インストール
+
+### 方法 1: グローバル TUI 設定を手動で更新する（初回におすすめ）
+
+以下のグローバル設定ファイルを開くか、新規作成します。
+
+```text
+~/.config/opencode/tui.json
+```
+
+次の内容を追加してください。
+
+```json
+{
+  "$schema": "https://opencode.ai/tui.json",
+  "plugin": [
+    "opencode-models-usage-plugin/tui"
+  ],
+  "plugin_enabled": {
+    "session-model-usage": true
+  }
+}
+```
+
+保存して OpenCode を再起動すると、npm 経由で自動インストールされます。
+
+### 方法 2: CLI でワンコマンドインストール
+
+```bash
+opencode plugin opencode-models-usage-plugin --global
+```
+
+このコマンドでプラグインのインストールとグローバル設定の更新を自動で行えます。
+
+## 技術メモ
+
+- データは provider/model label 単位で厳密に集約されます
+- OMO サブ Agent や再帰的な子セッションも完全にサポートします
+- TPS は live-only で、ストリーミング中のみ更新され、アイドル時には `—` に戻ります
+- Context Tokens は直近の返信に対応します
+- Session Tokens と Session Cached は現在のセッションツリー全体での累積値です
+
+## パッケージ情報
+
+- npm: `opencode-models-usage-plugin`
+- 現在のバージョン: `0.1.0`
+
+## License
+
+`Apache-2.0`
+
+インストール後、ぜひすぐに試してみてください。サイドバーにモデルの状態が整然と並ぶのを見た瞬間、AI Coding がもっと落ち着いて、もっと扱いやすく感じられるはずです。

package/README.ko.md

@@ -0,0 +1,113 @@
+# opencode-models-usage-plugin
+
+**언어:** [English](./README.md) | [简体中文](./README.zh-CN.md) | [日本語](./README.ja.md) | 한국어
+
+**이제 OpenCode 사이드바에서 “내 AI 모델 팀이 지금 무엇을 하고 있는지”를 실시간으로 볼 수 있습니다.**
+
+여러 모델과 다층 Agent, 그리고 OMO 하위 세션까지 함께 사용하며 Coding 할 때 이런 불안을 느낀 적이 있지 않나요?
+
+- 지금 실제로 어느 모델이 출력 중인지? 속도는 빠른지 느린지?
+- 이미 얼마나 많은 tokens 를 소비했는지? 하위 Agent 가 다른 모델을 몰래 호출하고 있지는 않은지?
+- 캐시 적중은 얼마나 잘 되고 있는지? 지금 coding plan 이 얼마나 더 버틸 수 있는지?
+- 비용이 갑자기 크게 늘어나지는 않을지?
+
+**이제 그런 불안에서 훨씬 자유로워질 수 있습니다.**
+
+`opencode-models-usage-plugin` 은 현재 세션 트리 전체에서 모델 사용 현황을 투명하게 보여줍니다. 무슨 일이 벌어지고 있는지 이해한 상태로 AI 팀을 더 자신 있게 운용할 수 있습니다.
+
+![Models Usage sidebar screenshot](./src/assets/img.png)
+
+## 무엇을 보여주나요?
+
+OpenCode 사이드바에서 현재 세션 트리(재귀적인 하위 세션 포함)에 등장한 각 모델의 사용 현황을 **provider/model** 기준으로 집계하여 보여줍니다.
+
+- **Live TPS**: 스트리밍 출력 중인 현재 tokens per second. idle 상태가 되면 `—` 로 돌아갑니다
+- **Context Tokens**: 해당 모델의 가장 최근 응답에 해당하는 token 총량
+- **Session Tokens**: 현재 세션에서 해당 모델이 누적 소비한 token 총량
+- **Session Cached**: 현재 세션에서 해당 모델이 누적 캐시 적중한 token 총량
+- **Total Cost**: 지금까지 발생한 누적 비용 (`spent $x.xxxx` 형식)
+
+어떤 모델이 현재 활발히 출력 중이면 그 모델 이름이 **하이라이트**되어, 지금 누가 일을 하고 있는지 바로 알 수 있습니다.
+
+## 사이드바 예시
+
+```text
+📊 Models Usage
+● OpenAI/GPT-5.4 Fast
+  ■ TPS 23.1
+  ■ Context Tokens 12,345
+  ■ Session Tokens 84,163
+  ■ Session Cached 81,792
+  ■ spent $0.0000
+
+● Google/Gemini-2.5-Pro
+  ■ TPS —
+  ■ Context Tokens 8,942
+  ■ Session Tokens 45,672
+  ■ Session Cached 32,100
+  ■ spent $0.0123
+```
+
+## 왜 중요한가요?
+
+- **완전한 투명성**: OMO 하위 Agent 와 재귀 호출에서 생긴 사용량까지 자동으로 집계되어 숨겨진 비용이 없어집니다
+- **실시간 통제력**: Live TPS, 캐시 적중, 누적 비용을 한눈에 확인할 수 있습니다
+- **더 나은 판단**: 느린 모델과 캐시 효율이 좋은 모델을 빠르게 구분해 전략을 조정할 수 있습니다
+- **덜 불안한 Coding**: 갑작스러운 비용 증가나 token 고갈을 덜 걱정하고 개발에 집중할 수 있습니다
+
+## 요구 사항
+
+- OpenCode `>= 1.4.3`
+
+## 설치 방법
+
+### 방법 1: 전역 TUI 설정 파일을 수동으로 수정하기 (처음엔 이 방법 추천)
+
+다음 전역 설정 파일을 열거나 새로 만드세요.
+
+```text
+~/.config/opencode/tui.json
+```
+
+아래 내용을 추가하세요.
+
+```json
+{
+  "$schema": "https://opencode.ai/tui.json",
+  "plugin": [
+    "opencode-models-usage-plugin/tui"
+  ],
+  "plugin_enabled": {
+    "session-model-usage": true
+  }
+}
+```
+
+저장한 뒤 OpenCode 를 재시작하면 npm 을 통해 자동으로 설치됩니다.
+
+### 방법 2: CLI 한 줄로 설치하기
+
+```bash
+opencode plugin opencode-models-usage-plugin --global
+```
+
+이 명령은 플러그인을 설치하고 전역 설정도 자동으로 갱신합니다.
+
+## 기술 메모
+
+- 데이터는 provider/model label 기준으로 엄격하게 집계됩니다
+- OMO 하위 Agent 와 재귀적인 하위 세션을 완전히 지원합니다
+- TPS 는 live-only 이며, 스트리밍 중에만 갱신되고 idle 상태가 되면 `—` 로 돌아갑니다
+- Context Tokens 는 가장 최근 응답의 token 총량을 나타냅니다
+- Session Tokens 와 Session Cached 는 현재 세션 트리 전체의 누적값입니다
+
+## 패키지 정보
+
+- npm: `opencode-models-usage-plugin`
+- 현재 버전: `0.1.0`
+
+## License
+
+`Apache-2.0`
+
+설치 후 바로 한 번 써 보세요. 사이드바에 모든 모델의 상태가 선명하게 정리되어 보이는 순간, AI Coding 이 훨씬 더 차분하고 통제 가능하게 느껴질 것입니다.

package/README.md

@@ -0,0 +1,126 @@
+# opencode-models-usage-plugin
+
+**Languages:** English | [简体中文](./README.zh-CN.md) | [日本語](./README.ja.md) | [한국어](./README.ko.md)
+
+**Finally, you can see exactly what your AI model team is doing — right in the OpenCode sidebar.**
+
+When you're coding with multiple models and multi-layer agents, including OMO sub-sessions, do you ever worry about things like:
+
+- Which model is actively generating right now? Is it fast or slow?
+- How many tokens have already been consumed? Are sub-agents quietly calling other models?
+- How effective is cache reuse? How long can this coding plan keep going?
+- Is the bill about to spike?
+
+**Those anxieties can now be a thing of the past.**
+
+`opencode-models-usage-plugin` gives you clear visibility into model usage across the entire session tree. You can see what is happening, stay in control, and drive your AI team with much more confidence.
+
+![Models Usage sidebar screenshot](./src/assets/img.png)
+
+## What It Displays
+
+In the OpenCode sidebar, the plugin aggregates real-time usage for every model used in the current session tree, including all recursive sub-sessions, grouped by **provider/model**:
+
+- **Live TPS**: shows current tokens per second while a response is streaming, and automatically returns to `—` when idle
+- **Context Tokens**: the token total for that model's most recent reply, used as the current context footprint
+- **Session Tokens**: the cumulative token total consumed by that model in the current session
+- **Session Cached**: the cumulative cache-hit tokens for that model in the current session, so you can see how much cache reuse is helping
+- **Total Cost**: the amount spent so far, shown as `spent $x.xxxx`
+
+When a model is actively streaming, its name is **highlighted** so you can instantly see who is doing the work.
+
+## Real Sidebar Example
+
+```text
+📊 Models Usage
+● OpenAI/GPT-5.4 Fast
+  ■ TPS 23.1
+  ■ Context Tokens 12,345
+  ■ Session Tokens 84,163
+  ■ Session Cached 81,792
+  ■ spent $0.0000
+
+● Google/Gemini-2.5-Pro
+  ■ TPS —
+  ■ Context Tokens 8,942
+  ■ Session Tokens 45,672
+  ■ Session Cached 32,100
+  ■ spent $0.0123
+
+● MiniMax/MiniMax-Text-01 (sub-session)
+  ■ TPS 41.7
+  ■ Context Tokens ...
+  ■ Session Tokens ...
+  ■ Session Cached ...
+  ■ spent ...
+```
+
+## Why It Matters
+
+- **Total Transparency**: usage from OMO sub-agents and recursive calls is automatically aggregated, so there are no more hidden costs
+- **Real-Time Control**: see live TPS, cache hits, and cumulative costs at a glance
+- **Smarter Decisions**: quickly spot slow models or strong cache performers and adjust your strategy on the fly
+- **Lower-Stress Coding**: stop worrying about surprise bills or token drain, and focus on building
+
+Whether you are heavily using model routing, complex agent orchestration, or simply want better visibility into token usage, this plugin can make the experience far more transparent and reassuring.
+
+## Requirements
+
+- OpenCode `>= 1.4.3`
+
+## Installation
+
+### Method 1: Manually update the global TUI config (recommended for first-time setup)
+
+Open or create the global config file:
+
+```text
+~/.config/opencode/tui.json
+```
+
+Add the following:
+
+```json
+{
+  "$schema": "https://opencode.ai/tui.json",
+  "plugin": [
+    "opencode-models-usage-plugin/tui"
+  ],
+  "plugin_enabled": {
+    "session-model-usage": true
+  }
+}
+```
+
+Save the file and restart OpenCode. The plugin will be installed automatically via npm.
+
+### Method 2: One-click install via CLI
+
+```bash
+opencode plugin opencode-models-usage-plugin --global
+```
+
+This command installs the plugin and updates your global config automatically.
+
+## Technical Notes
+
+- Data is grouped strictly by provider/model label
+- Fully supports OMO sub-agents and all recursive sub-sessions, including Gemini, MiniMax, and others
+- TPS is strictly live-only: it updates only during streaming and returns to `—` when idle
+- Context Tokens reflect the token total of the most recent reply
+- Session Tokens and Session Cached reflect cumulative values across the current session tree
+
+## Package Info
+
+- npm: `opencode-models-usage-plugin`
+- current version: `0.1.0`
+
+## License
+
+`Apache-2.0`
+
+Try it right after installing — the first time you see all your model activity laid out clearly in the sidebar, you may realize that AI coding can finally feel much calmer and far more under control.
+
+Issues, PRs, and feedback are always welcome.
+
+Let’s make the OpenCode model ecosystem more transparent and more usable together. 🚀

package/README.zh-CN.md

@@ -0,0 +1,127 @@
+# opencode-models-usage-plugin
+
+**语言：** [English](./README.md) | 简体中文 | [日本語](./README.ja.md) | [한국어](./README.ko.md)
+
+**终于，你可以在 OpenCode 侧边栏里实时看到「你的 AI 模型团队」到底在干什么了。**
+
+当你同时使用多个模型、多层 Agent（包括 OMO 子会话）全力 Coding 时，是否经常产生这些焦虑：
+
+- 这个模型现在到底在不在输出？速度快不快？
+- 已经悄悄消耗了多少 tokens？子 Agent 有没有偷偷调用其他模型？
+- 缓存命中情况怎么样？这次 coding plan 还能撑多久？
+- 账单会不会突然暴涨？
+
+**现在，这些担心可以彻底告别了。**
+
+`opencode-models-usage-plugin` 让你对整个会话树中的所有模型使用情况**一目了然**、**心中有数**。你可以更放心地驱动 AI 团队为你工作，而不必再畏手畏脚、时刻提心吊胆。
+
+![Models Usage sidebar screenshot](./src/assets/img.png)
+
+
+## 它能显示什么？
+
+在 OpenCode 的侧边栏中，插件会按 **provider/model** 聚合展示当前会话树（含所有递归子会话）中每个模型的实时数据：
+
+- **实时 TPS**：正在流式输出时显示当前 tokens per second，输出结束或空闲时自动变为 `—`
+- **Context Tokens**：该模型最近一次回复对应的 token 总数，用来表示这一轮上下文占用
+- **Session Tokens**：当前会话中该模型累计消耗的 token 总数
+- **Session Cached**：当前会话中该模型累计缓存命中的 token 数，能直观看到缓存节省了多少
+- **Total Cost**：当前已产生的费用（显示为 `spent $x.xxxx`）
+
+当某个模型正在活跃输出时，它的名称会**高亮显示**，让你一眼就知道「谁在干活」。
+
+## 侧边栏实际显示示例
+
+```text
+📊 Models Usage
+● OpenAI/GPT-5.4 Fast
+  ■ TPS 23.1
+  ■ Context Tokens 12,345
+  ■ Session Tokens 84,163
+  ■ Session Cached 81,792
+  ■ spent $0.0000
+
+● Google/Gemini-2.5-Pro
+  ■ TPS —
+  ■ Context Tokens 8,942
+  ■ Session Tokens 45,672
+  ■ Session Cached 32,100
+  ■ spent $0.0123
+
+● MiniMax/MiniMax-Text-01（子会话）
+  ■ TPS 41.7
+  ■ Context Tokens ...
+  ■ Session Tokens ...
+  ■ Session Cached ...
+  ■ spent ...
+```
+
+## 核心价值
+
+- **完全透明**：OMO 子 Agent、递归调用产生的消耗都会自动聚合，不再有“黑箱烧钱”
+- **实时掌控**：随时看到 TPS、缓存命中和累计成本，对预算和性能心里有数
+- **高效决策**：快速判断哪个模型响应慢、哪个缓存效果好，随时优化策略
+- **低焦虑 Coding**：告别对账单暴涨、token 耗尽的恐惧，把注意力放回创作本身
+
+无论你是重度使用多模型路由、复杂 Agent 编排，还是只是想对 token 消耗更有掌控感，这个插件都能显著提升你的使用体验和安心感。
+
+## 运行要求
+
+- OpenCode `>= 1.4.3`
+
+## 安装方式
+
+### 方式一：手动修改全局 TUI 配置（推荐第一次使用）
+
+打开或新建全局配置文件：
+
+```text
+~/.config/opencode/tui.json
+```
+
+添加以下内容：
+
+```json
+{
+  "$schema": "https://opencode.ai/tui.json",
+  "plugin": [
+    "opencode-models-usage-plugin/tui"
+  ],
+  "plugin_enabled": {
+    "session-model-usage": true
+  }
+}
+```
+
+保存后重启 OpenCode，插件会自动通过 npm 安装。
+
+### 方式二：CLI 一键安装（最便捷）
+
+```bash
+opencode plugin opencode-models-usage-plugin --global
+```
+
+这条命令会自动安装插件，并更新全局配置。
+
+## 技术说明
+
+- 数据按 provider/model label 严格聚合
+- 完整支持 OMO 子 Agent 及所有递归子会话，Gemini、MiniMax 等子模型调用也会被统计
+- TPS 为严格实时：仅在流式输出过程中动态更新，空闲状态自动恢复为 `—`
+- Context Tokens 反映最近一次回复对应的 token 总数
+- Session Tokens 与 Session Cached 反映当前整个会话树中的累计值
+
+## 包信息
+
+- npm：`opencode-models-usage-plugin`
+- 当前版本：`0.1.0`
+
+## License
+
+`Apache-2.0`
+
+安装后立刻试试看——当你第一次在侧边栏看到所有模型数据清晰、安静地排列在那里时，你会真切感受到：用 AI Coding，从此可以更放松、更可控。
+
+欢迎提交 Issue、PR，或分享你的使用感受。
+
+让我们一起让 OpenCode 的模型世界更加透明、更好用。🚀

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "opencode-models-usage-plugin",
-  "version": "0.1.0",
+  "version": "1.0.1",
   "description": "Show per-model usage, live TPS, tokens, and cost in the OpenCode sidebar.",
-  "license": "UNLICENSED",
+  "license": "Apache-2.0",
   "type": "module",
   "exports": {
     "./tui": {

package/src/session-usage.test.ts

@@ -32,7 +32,9 @@ test("assistant message contributes all token counters and cost", () => {
     models: [
       {
         label: "openai/gpt-4.1",
-        totalTokens: 28,
+        contextTokens: 28,
+        sessionTokens: 28,
+        sessionCachedTokens: 3,
         cost: 0.05,
         tps: 0,
         isLiveTps: false,
@@ -41,7 +43,7 @@ test("assistant message contributes all token counters and cost", () => {
   })
 })
 
-test("repeated model is listed once while tokens keep accumulating", () => {
+test("repeated model uses the latest output-bearing message for tokens", () => {
   const messages: SessionMessageLike[] = [
     {
       role: "assistant",
@@ -62,6 +64,10 @@ test("repeated model is listed once while tokens keep accumulating", () => {
       tokens: {
         input: 4,
         output: 6,
+        cache: {
+          read: 7,
+          write: 1,
+        },
       },
       time: { created: 4000, completed: 5000 },
     },
@@ -71,10 +77,12 @@ test("repeated model is listed once while tokens keep accumulating", () => {
     models: [
       {
         label: "openai/gpt-4.1",
-        totalTokens: 25,
+        contextTokens: 18,
+        sessionTokens: 33,
+        sessionCachedTokens: 7,
         cost: 0.03,
         tps: 0,
-        isLiveTps: false, // (5 + 6) tokens / (2 + 1) seconds = 11 / 3
+        isLiveTps: false,
       },
     ],
   })
@@ -106,8 +114,12 @@ test("multiple models preserve first-seen order", () => {
     "anthropic/claude-sonnet-4",
     "openai/gpt-4.1",
   ])
-  assert.equal(usage.models[0].totalTokens, 3)
-  assert.equal(usage.models[1].totalTokens, 7)
+  assert.equal(usage.models[0].contextTokens, 3)
+  assert.equal(usage.models[0].sessionTokens, 3)
+  assert.equal(usage.models[0].sessionCachedTokens, 0)
+  assert.equal(usage.models[1].contextTokens, 7)
+  assert.equal(usage.models[1].sessionTokens, 7)
+  assert.equal(usage.models[1].sessionCachedTokens, 0)
 })
 
 test("non-assistant messages are ignored", () => {
@@ -138,7 +150,9 @@ test("non-assistant messages are ignored", () => {
     models: [
       {
         label: "openai/gpt-4.1",
-        totalTokens: 5,
+        contextTokens: 5,
+        sessionTokens: 5,
+        sessionCachedTokens: 0,
         cost: 0.1,
         tps: 0,
         isLiveTps: false,
@@ -180,7 +194,9 @@ test("provider catalog names are used when available", () => {
     models: [
       {
         label: "OpenAI/GPT-4.1",
-        totalTokens: 5,
+        contextTokens: 5,
+        sessionTokens: 5,
+        sessionCachedTokens: 0,
         cost: 0,
         tps: 0,
         isLiveTps: false,
@@ -222,7 +238,9 @@ test("provider catalog also works when providers are stored as an array", () =>
     models: [
       {
         label: "Anthropic/Claude Sonnet 4",
-        totalTokens: 10,
+        contextTokens: 10,
+        sessionTokens: 10,
+        sessionCachedTokens: 0,
         cost: 0,
         tps: 0,
         isLiveTps: false,
@@ -243,65 +261,50 @@ test("token helper tolerates missing counters", () => {
   )
 })
 
-test("tps eligibility rules are applied correctly", () => {
+test("latest output-bearing assistant message determines displayed tokens and cache", () => {
   const usage = getSessionUsage([
-    // valid
     {
       role: "assistant",
       providerID: "openai",
       modelID: "gpt-4",
-      tokens: { output: 10 },
-      time: { created: 1000, completed: 2000 },
-    },
-    // ignored: summary = true
-    {
-      role: "assistant",
-      providerID: "openai",
-      modelID: "gpt-4",
-      summary: true,
-      tokens: { output: 100 },
-      time: { created: 1000, completed: 2000 },
-    },
-    // ignored: no completed time
-    {
-      role: "assistant",
-      providerID: "openai",
-      modelID: "gpt-4",
-      tokens: { output: 100 },
-      time: { created: 1000 },
-    },
-    // ignored: duration <= 0
-    {
-      role: "assistant",
-      providerID: "openai",
-      modelID: "gpt-4",
-      tokens: { output: 100 },
-      time: { created: 1000, completed: 1000 },
-    },
-    // ignored: generated tokens <= 0
-    {
-      role: "assistant",
-      providerID: "openai",
-      modelID: "gpt-4",
-      tokens: { input: 100, output: 0 },
+      tokens: {
+        input: 5,
+        output: 10,
+        cache: {
+          read: 20,
+          write: 2,
+        },
+      },
       time: { created: 1000, completed: 2000 },
     },
-    // ignored: finish === "tool-calls"
     {
       role: "assistant",
       providerID: "openai",
       modelID: "gpt-4",
-      finish: "tool-calls",
-      tokens: { output: 100 },
-      time: { created: 1000, completed: 2000 },
+      tokens: {
+        input: 100,
+        output: 0,
+        cache: {
+          read: 999,
+          write: 999,
+        },
+      },
+      time: { created: 3000, completed: 4000 },
     },
-    // valid: output + reasoning
     {
       role: "assistant",
       providerID: "openai",
       modelID: "gpt-4",
-      tokens: { output: 5, reasoning: 5 },
-      time: { created: 2000, completed: 3000 },
+      tokens: {
+        input: 11,
+        output: 7,
+        reasoning: 3,
+        cache: {
+          read: 30,
+          write: 4,
+        },
+      },
+      time: { created: 5000, completed: 6000 },
     },
   ])
 
@@ -309,18 +312,13 @@ test("tps eligibility rules are applied correctly", () => {
     models: [
       {
         label: "openai/gpt-4",
-        totalTokens: 520, // 10 + 100 + 100 + 100 + 100(input) + 100 + 10 = 520 actually wait
-        // Tokens: 10 + 100 + 100 + 100 + 100 + 100 + 10 = 520
-        // Cost: 0
-        // TPS: 20 tokens / 2 seconds = 10
+        contextTokens: 55,
+        sessionTokens: 2190,
+        sessionCachedTokens: 1049,
         cost: 0,
         tps: 0,
         isLiveTps: false,
       },
     ],
   })
-  
-  // Update token expectation to match manual addition
-  const total = 10 + 100 + 100 + 100 + 100 + 100 + 10;
-  assert.equal(usage.models[0].totalTokens, total)
 })

package/src/session-usage.ts

@@ -26,7 +26,9 @@ export interface SessionMessageLike {
 export interface ModelUsage {
   label: string
   tps: number
-  totalTokens: number
+  contextTokens: number
+  sessionTokens: number
+  sessionCachedTokens: number
   cost: number
   isLiveTps?: boolean
 }
@@ -105,6 +107,20 @@ export interface LiveTpsState {
   tpsDurationMs: number
 }
 
+const getMessageTimestamp = (message: SessionMessageLike, index: number): number => {
+  const completed = toNumber(message.time?.completed)
+  if (completed > 0) {
+    return completed
+  }
+
+  const created = toNumber(message.time?.created)
+  if (created > 0) {
+    return created
+  }
+
+  return index
+}
+
 export const getSessionUsage = (
   messages: ReadonlyArray<SessionMessageLike>,
   providers?: unknown,
@@ -112,12 +128,15 @@ export const getSessionUsage = (
 ): SessionUsage => {
   const modelStats = new Map<string, {
     label: string
-    totalTokens: number
+    contextTokens: number
+    sessionTokens: number
+    sessionCachedTokens: number
     cost: number
+    latestTimestamp: number
   }>()
   const modelsUsed: string[] = []
 
-  for (const message of messages) {
+  for (const [index, message] of messages.entries()) {
     if (message.role !== "assistant") {
       continue
     }
@@ -134,15 +153,32 @@ export const getSessionUsage = (
     if (!modelStats.has(modelKey)) {
       modelStats.set(modelKey, {
         label: resolveModelLabel(modelID, providerID, providers),
-        totalTokens: 0,
+        contextTokens: 0,
+        sessionTokens: 0,
+        sessionCachedTokens: 0,
         cost: 0,
+        latestTimestamp: Number.NEGATIVE_INFINITY,
       })
       modelsUsed.push(modelKey)
     }
 
     const stats = modelStats.get(modelKey)!
-    stats.totalTokens += getTokenTotal(message.tokens)
     stats.cost += toNumber(message.cost)
+    stats.sessionTokens += getTokenTotal(message.tokens)
+    stats.sessionCachedTokens += toNumber(message.tokens?.cache?.read)
+
+    const outputTokens = toNumber(message.tokens?.output)
+    if (outputTokens <= 0) {
+      continue
+    }
+
+    const timestamp = getMessageTimestamp(message, index)
+    if (timestamp < stats.latestTimestamp) {
+      continue
+    }
+
+    stats.latestTimestamp = timestamp
+    stats.contextTokens = getTokenTotal(message.tokens)
   }
 
   // Inject live TPS
@@ -154,8 +190,11 @@ export const getSessionUsage = (
     if (!modelStats.has(liveTpsKey)) {
       modelStats.set(liveTpsKey, {
         label: resolveModelLabel(modelID, providerID, providers),
-        totalTokens: 0,
+        contextTokens: 0,
+        sessionTokens: 0,
+        sessionCachedTokens: 0,
         cost: 0,
+        latestTimestamp: Number.NEGATIVE_INFINITY,
       })
       modelsUsed.push(liveTpsKey)
     }
@@ -174,7 +213,9 @@ export const getSessionUsage = (
 
     return {
       label: stats.label,
-      totalTokens: stats.totalTokens,
+      contextTokens: stats.contextTokens,
+      sessionTokens: stats.sessionTokens,
+      sessionCachedTokens: stats.sessionCachedTokens,
       cost: stats.cost,
       tps,
       isLiveTps,

package/src/tui.tsx

@@ -1,11 +1,12 @@
 /** @jsxImportSource @opentui/solid */
 
 import type { TuiPlugin, TuiPluginApi, TuiPluginModule } from "@opencode-ai/plugin/tui"
-import { For, createMemo, createSignal, onMount, onCleanup } from "solid-js"
+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"
 
-const pluginID = "local:session-model-usage"
+const pluginID = "session-model-usage"
 
 const isRecord = (value: unknown): value is Record<string, unknown> =>
   typeof value === "object" && value !== null
@@ -39,10 +40,11 @@ const mapMessages = (messages: readonly unknown[]): SessionMessageLike[] => {
   return messages.map((message) => mapMessage(message))
 }
 
-const useSessionMessages = (api: TuiPluginApi, rootSessionID: string) => {
+const useSessionMessages = (api: TuiPluginApi, rootSessionID: Accessor<string>) => {
+  const [rootMessages, setRootMessages] = createSignal<SessionMessageLike[]>([])
   const [extraMessages, setExtraMessages] = createSignal<SessionMessageLike[]>([])
   const [trackedSessionIDs, setTrackedSessionIDs] = createSignal<ReadonlySet<string>>(
-    new Set([rootSessionID]),
+    new Set([rootSessionID()]),
   )
   
   const [liveInfo, setLiveInfo] = createSignal<{
@@ -53,6 +55,17 @@ const useSessionMessages = (api: TuiPluginApi, rootSessionID: string) => {
     chars: number;
   } | null>(null)
 
+  let reloadVersion = 0
+
+  const fetchRootMessages = async (sessionID: string): Promise<SessionMessageLike[]> => {
+    const result = await api.client.session.messages({ sessionID })
+    if (result.error || !result.data) {
+      return []
+    }
+
+    return mapMessages(result.data.map((message) => message.info))
+  }
+
   const fetchChildrenMessages = async (
     sessionID: string,
     visited = new Set<string>(),
@@ -70,7 +83,10 @@ const useSessionMessages = (api: TuiPluginApi, rootSessionID: string) => {
     let msgs: SessionMessageLike[] = []
     for (const child of res.data) {
       const childID = child.id
-      visited.add(childID)
+      if (visited.has(childID)) {
+        continue
+      }
+
       const mRes = await api.client.session.messages({ sessionID: childID })
       if (!mRes.error && mRes.data) {
         msgs.push(...mapMessages(mRes.data.map((message) => message.info)))
@@ -81,19 +97,37 @@ const useSessionMessages = (api: TuiPluginApi, rootSessionID: string) => {
     return { messages: msgs, sessionIDs: visited }
   }
 
-  const reloadExtraMessages = async () => {
-    const result = await fetchChildrenMessages(rootSessionID)
+  const reloadExtraMessages = async (sessionID: string) => {
+    const version = ++reloadVersion
+    const [root, result] = await Promise.all([
+      fetchRootMessages(sessionID),
+      fetchChildrenMessages(sessionID),
+    ])
+
+    if (version !== reloadVersion) {
+      return
+    }
+
+    setRootMessages(root)
     setExtraMessages(result.messages)
     setTrackedSessionIDs(new Set(result.sessionIDs))
   }
 
-  onMount(() => {
-    reloadExtraMessages()
+  createEffect(() => {
+    const sessionID = rootSessionID()
+    setRootMessages([])
+    setExtraMessages([])
+    setTrackedSessionIDs(new Set([sessionID]))
+    setLiveInfo(null)
+    void reloadExtraMessages(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 => {
@@ -102,9 +136,13 @@ const useSessionMessages = (api: TuiPluginApi, rootSessionID: string) => {
           }
 
           // Try to find the message
-          const rootMsgs = mapMessages(api.state.session.messages(rootSessionID))
+          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)
           }
@@ -127,8 +165,12 @@ const useSessionMessages = (api: TuiPluginApi, rootSessionID: string) => {
           }
         })
       }),
-      api.event.on("message.updated", () => reloadExtraMessages()),
-      api.event.on("session.status", () => reloadExtraMessages()),
+      api.event.on("message.updated", () => {
+        void reloadExtraMessages(rootSessionID())
+      }),
+      api.event.on("session.status", () => {
+        void reloadExtraMessages(rootSessionID())
+      }),
       api.event.on("session.idle", (ev) => {
         if (!trackedSessionIDs().has(ev.properties.sessionID)) {
           return
@@ -139,7 +181,10 @@ const useSessionMessages = (api: TuiPluginApi, rootSessionID: string) => {
     ]
 
     onCleanup(() => {
-      unsubs.forEach(u => u())
+      reloadVersion += 1
+      unsubs.forEach((unsubscribe) => {
+        unsubscribe()
+      })
     })
   })
 
@@ -167,36 +212,53 @@ const useSessionMessages = (api: TuiPluginApi, rootSessionID: string) => {
     }
   })
 
-  return { extraMessages, liveTps }
+  const usageMessages = createMemo(() => {
+    return [...rootMessages(), ...extraMessages()]
+  })
+
+  return { usageMessages, liveTps }
 }
 
 const SessionUsagePanel = (props: { api: TuiPluginApi; sessionID: string }) => {
-  const { extraMessages, liveTps } = useSessionMessages(props.api, props.sessionID)
-  
-  const usage = createMemo(() => {
-    const rootMsgs = mapMessages(props.api.state.session.messages(props.sessionID))
-    const allMsgs = [...rootMsgs, ...extraMessages()]
-    return getSessionUsage(allMsgs, props.api.state.provider, liveTps())
+  const activeSessionID = createMemo<string>(() => {
+    const route = props.api.route.current
+    if (route.name === "session" && typeof route.params?.sessionID === "string") {
+      return route.params.sessionID
+    }
+
+    return props.sessionID
   })
 
+  const { usageMessages, liveTps } = useSessionMessages(props.api, activeSessionID)
+  
+  const usage = createMemo(() => getSessionUsage(usageMessages(), props.api.state.provider, liveTps()))
+
   return (
     <box flexDirection="column">
-      <text>📊 Models Usages</text>
+      <text>📊 Models Usage</text>
       {usage().models.length === 0 ? (
         <text>None yet</text>
       ) : (
         <For each={usage().models}>
           {(model) => (
             <box flexDirection="column">
-              <text>● {model.label}</text>
+              <text fg={model.isLiveTps ? "yellow" : undefined}>● {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>
                 </box>
                 <box flexDirection="row">
-                  <text>■ Total Tokens </text>
-                  <text fg="gray">{model.totalTokens.toLocaleString("en-US")}</text>
+                  <text>■ Context Tokens </text>
+                  <text fg="gray">{model.contextTokens.toLocaleString("en-US")}</text>
+                </box>
+                <box flexDirection="row">
+                  <text>■ Session Tokens </text>
+                  <text fg="gray">{model.sessionTokens.toLocaleString("en-US")}</text>
+                </box>
+                <box flexDirection="row">
+                  <text>■ Session Cached </text>
+                  <text fg="gray">{model.sessionCachedTokens.toLocaleString("en-US")}</text>
                 </box>
                 <box flexDirection="row">
                   <text>■ spent </text>
@@ -216,7 +278,11 @@ const tui: TuiPlugin = async (api) => {
     order: 150,
     slots: {
       sidebar_content(_ctx, props) {
-        return <SessionUsagePanel api={api} sessionID={props.session_id} />
+        return (
+          <Show when={props.session_id} keyed>
+            {(sessionID: string) => <SessionUsagePanel api={api} sessionID={sessionID} />}
+          </Show>
+        )
       },
     },
   })