From 400db2a5ac360e37fa57275fbbde162499143f26 Mon Sep 17 00:00:00 2001
From: kunal kohli <kunalkohli@Mac.localdomain>
Date: Sun, 26 Apr 2026 00:08:27 -0400
Subject: [PATCH] feat(tui): show per-message input/output token counts
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add input/output token counts to two locations:

1. The per-message metadata footer (▣ line) after each assistant response,
   displayed as '12.3K↓ 1.2K↑' alongside mode, model, and duration.
2. The sidebar context panel, showing last message's input/output breakdown.

Input tokens include cache reads (input + cache.read).
Output tokens include reasoning (output + reasoning).
Only shown when the message has non-zero token data.

Closes #24433
---
 .../src/cli/cmd/tui/feature-plugins/sidebar/context.tsx    | 5 +++++
 packages/opencode/src/cli/cmd/tui/routes/session/index.tsx | 7 +++++++
 2 files changed, 12 insertions(+)

diff --git a/packages/opencode/src/cli/cmd/tui/feature-plugins/sidebar/context.tsx b/packages/opencode/src/cli/cmd/tui/feature-plugins/sidebar/context.tsx
index 9ffe77979150..dd429d7bda30 100644
--- a/packages/opencode/src/cli/cmd/tui/feature-plugins/sidebar/context.tsx
+++ b/packages/opencode/src/cli/cmd/tui/feature-plugins/sidebar/context.tsx
@@ -20,6 +20,8 @@ function View(props: { api: TuiPluginApi; session_id: string }) {
       return {
         tokens: 0,
         percent: null,
+        input: 0,
+        output: 0,
       }
     }
 
@@ -29,6 +31,8 @@ function View(props: { api: TuiPluginApi; session_id: string }) {
     return {
       tokens,
       percent: model?.limit.context ? Math.round((tokens / model.limit.context) * 100) : null,
+      input: last.tokens.input + last.tokens.cache.read,
+      output: last.tokens.output + last.tokens.reasoning,
     }
   })
 
@@ -39,6 +43,7 @@ function View(props: { api: TuiPluginApi; session_id: string }) {
       </text>
       <text fg={theme().textMuted}>{state().tokens.toLocaleString()} tokens</text>
       <text fg={theme().textMuted}>{state().percent ?? 0}% used</text>
+      <text fg={theme().textMuted}>{state().input.toLocaleString()}↓ in · {state().output.toLocaleString()}↑ out</text>
       <text fg={theme().textMuted}>{money.format(cost())} spent</text>
     </box>
   )
diff --git a/packages/opencode/src/cli/cmd/tui/routes/session/index.tsx b/packages/opencode/src/cli/cmd/tui/routes/session/index.tsx
index 516f406aea07..57392fabf644 100644
--- a/packages/opencode/src/cli/cmd/tui/routes/session/index.tsx
+++ b/packages/opencode/src/cli/cmd/tui/routes/session/index.tsx
@@ -1427,6 +1427,13 @@ function AssistantMessage(props: { message: AssistantMessage; parts: Part[]; las
               <Show when={duration()}>
                 <span style={{ fg: theme.textMuted }}> · {Locale.duration(duration())}</span>
               </Show>
+              <Show when={props.message.tokens.input > 0 || props.message.tokens.output > 0}>
+                <span style={{ fg: theme.textMuted }}>
+                  {" · "}
+                  {Locale.number(props.message.tokens.input + props.message.tokens.cache.read)}↓{" "}
+                  {Locale.number(props.message.tokens.output + props.message.tokens.reasoning)}↑
+                </span>
+              </Show>
               <Show when={props.message.error?.name === "MessageAbortedError"}>
                 <span style={{ fg: theme.textMuted }}> · interrupted</span>
               </Show>