From 817d33c4f12737df41151727bb7cf167c1b2fd34 Mon Sep 17 00:00:00 2001
From: HiranoMasaaki <lambda.groove@gmail.com>
Date: Wed, 4 Mar 2026 14:46:36 +0000
Subject: [PATCH] refactor: improve token display format with readable labels
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Change token line from `R 0 · I 78.1k · C 46.3k · O 8.3k (cache: 37.23%)`
to `Tokens: In 78.1k · Out 8.3k · Cache 46.3k/37.23% · Reasoning 12.3k`

- Use readable labels (In/Out/Cache/Reasoning) instead of abbreviations
- Show Reasoning only when > 0
- Combine cache amount and hit rate into single segment

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .changeset/improve-token-display-format.md    |  6 ++++++
 .../execution/components/interface-panel.tsx  | 21 ++++++++++---------
 2 files changed, 17 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/improve-token-display-format.md

diff --git a/.changeset/improve-token-display-format.md b/.changeset/improve-token-display-format.md
new file mode 100644
index 00000000..6045870e
--- /dev/null
+++ b/.changeset/improve-token-display-format.md
@@ -0,0 +1,6 @@
+---
+"@perstack/tui-components": patch
+"perstack": patch
+---
+
+refactor: improve token display format with readable labels and conditional reasoning
diff --git a/packages/tui-components/src/execution/components/interface-panel.tsx b/packages/tui-components/src/execution/components/interface-panel.tsx
index f6672033..28c5f374 100644
--- a/packages/tui-components/src/execution/components/interface-panel.tsx
+++ b/packages/tui-components/src/execution/components/interface-panel.tsx
@@ -72,16 +72,17 @@ export const InterfacePanel = ({
             <Text>{elapsedTime}</Text>
             {providerName ? <Text> · {providerName}</Text> : null}
           </Text>
-          <Text>
-            <Text dimColor>R </Text>
-            <Text>{formattedReasoningTokens}</Text>
-            <Text dimColor> · I </Text>
-            <Text>{formattedInputTokens}</Text>
-            <Text dimColor> · C </Text>
-            <Text>{formattedCachedInputTokens}</Text>
-            <Text dimColor> · O </Text>
-            <Text>{formattedOutputTokens}</Text>
-            <Text dimColor> (cache: {cacheHitRate}%)</Text>
+          <Text dimColor>
+            <Text>Tokens: </Text>
+            <Text>In {formattedInputTokens}</Text>
+            <Text> · Out {formattedOutputTokens}</Text>
+            <Text>
+              {" "}
+              · Cache {formattedCachedInputTokens}/{cacheHitRate}%
+            </Text>
+            {formattedReasoningTokens !== "0" ? (
+              <Text> · Reasoning {formattedReasoningTokens}</Text>
+            ) : null}
           </Text>
         </>
       )}