feat(tui): display cached token count inline with total tokens

Shows cache tokens inline when non-zero:
- Sidebar context: "68,356 tokens (12.5K cached)"
- Subagent footer: same format with percentage
- Prompt footer: same format with percentage

Implementation:
- Extract cached tokens separately before summing
- Show only when cached > 0 to reduce noise
- Use existing Locale.number() for consistent formatting
- Applied to all 3 TUI locations that display token usage

Author: bainos

packages/opencode/src/cli/cmd/tui/component/prompt/index.tsx

@@ -188,15 +188,17 @@ export function Prompt(props: PromptProps) {
     const last = msg.findLast((item): item is AssistantMessage => item.role === "assistant" && item.tokens.output > 0)
     if (!last) return
 
+    const cached = last.tokens.cache.read + last.tokens.cache.write
     const tokens =
-      last.tokens.input + last.tokens.output + last.tokens.reasoning + last.tokens.cache.read + last.tokens.cache.write
+      last.tokens.input + last.tokens.output + last.tokens.reasoning + cached
     if (tokens <= 0) return
 
     const model = sync.data.provider.find((item) => item.id === last.providerID)?.models[last.modelID]
     const pct = model?.limit.context ? `${Math.round((tokens / model.limit.context) * 100)}%` : undefined
     const cost = msg.reduce((sum, item) => sum + (item.role === "assistant" ? item.cost : 0), 0)
+    const tokenText = cached > 0 ? `${Locale.number(tokens)} (${Locale.number(cached)} cached)` : Locale.number(tokens)
     return {
-      context: pct ? `${Locale.number(tokens)} (${pct})` : Locale.number(tokens),
+      context: pct ? `${tokenText} (${pct})` : tokenText,
       cost: cost > 0 ? money.format(cost) : undefined,
     }
   })

packages/opencode/src/cli/cmd/tui/feature-plugins/sidebar/context.tsx

@@ -19,25 +19,34 @@ function View(props: { api: TuiPluginApi; session_id: string }) {
     if (!last) {
       return {
         tokens: 0,
+        cached: 0,
         percent: null,
       }
     }
 
+    const cached = last.tokens.cache.read + last.tokens.cache.write
     const tokens =
-      last.tokens.input + last.tokens.output + last.tokens.reasoning + last.tokens.cache.read + last.tokens.cache.write
+      last.tokens.input + last.tokens.output + last.tokens.reasoning + cached
     const model = props.api.state.provider.find((item) => item.id === last.providerID)?.models[last.modelID]
     return {
       tokens,
+      cached,
       percent: model?.limit.context ? Math.round((tokens / model.limit.context) * 100) : null,
     }
   })
 
+  const tokenText = createMemo(() => {
+    const cached = state().cached
+    if (cached === 0) return `${state().tokens.toLocaleString()} tokens`
+    return `${state().tokens.toLocaleString()} tokens (${cached.toLocaleString()} cached)`
+  })
+
   return (
     <box>
       <text fg={theme().text}>
         <b>Context</b>
       </text>
-      <text fg={theme().textMuted}>{state().tokens.toLocaleString()} tokens</text>
+      <text fg={theme().textMuted}>{tokenText()}</text>
       <text fg={theme().textMuted}>{state().percent ?? 0}% used</text>
       <text fg={theme().textMuted}>{money.format(cost())} spent</text>
     </box>

packages/opencode/src/cli/cmd/tui/routes/session/subagent-footer.tsx

@@ -36,8 +36,9 @@ export function SubagentFooter() {
     const last = msg.findLast((item): item is AssistantMessage => item.role === "assistant" && item.tokens.output > 0)
     if (!last) return
 
+    const cached = last.tokens.cache.read + last.tokens.cache.write
     const tokens =
-      last.tokens.input + last.tokens.output + last.tokens.reasoning + last.tokens.cache.read + last.tokens.cache.write
+      last.tokens.input + last.tokens.output + last.tokens.reasoning + cached
     if (tokens <= 0) return
 
     const model = sync.data.provider.find((item) => item.id === last.providerID)?.models[last.modelID]
@@ -49,8 +50,9 @@ export function SubagentFooter() {
       currency: "USD",
     })
 
+    const tokenText = cached > 0 ? `${Locale.number(tokens)} (${Locale.number(cached)} cached)` : Locale.number(tokens)
     return {
-      context: pct ? `${Locale.number(tokens)} (${pct})` : Locale.number(tokens),
+      context: pct ? `${tokenText} (${pct})` : tokenText,
       cost: cost > 0 ? money.format(cost) : undefined,
     }
   })