feat(tui): display total context tokens and reverse history order

- Change token display from separate input/output to total context tokens (input + cached)
- Format large token counts with K/M suffixes for better readability
- Reverse agent tree display to show latest entries first
- Update column header from "Tokens" to "Context" to reflect new meaning
- Update telemetry logging to clarify total context calculation

Author: moazbuilds

src/cli/tui/routes/workflow/components/modals/history/history-row.tsx

@@ -68,7 +68,8 @@ export function HistoryRow(props: HistoryRowProps) {
 
   const tokens = () => {
     if (agent.telemetry) {
-      return formatTokens(agent.telemetry.tokensIn, agent.telemetry.tokensOut)
+      const total = agent.telemetry.tokensIn + agent.telemetry.tokensOut
+      return formatTokens(total)
     }
     return "-"
   }

src/cli/tui/routes/workflow/components/modals/history/history-tree.ts

@@ -24,8 +24,10 @@ export function flattenTree(tree: AgentTreeNode[]): FlattenedAgent[] {
   const result: FlattenedAgent[] = []
 
   function traverse(nodes: AgentTreeNode[], depth: number, parentIsLast: boolean[]) {
-    nodes.forEach((node, index) => {
-      const isLast = index === nodes.length - 1
+    // Reverse nodes so latest appears first
+    const reversedNodes = [...nodes].reverse()
+    reversedNodes.forEach((node, index) => {
+      const isLast = index === reversedNodes.length - 1
 
       result.push({
         agent: node.agent,

src/cli/tui/routes/workflow/components/modals/history/index.tsx

@@ -128,7 +128,7 @@ export function HistoryView(props: HistoryViewProps) {
             <box width={28}><text fg={themeCtx.theme.textMuted} attributes={1}>Engine/Model</text></box>
             <box width={12}><text fg={themeCtx.theme.textMuted} attributes={1}>Status</text></box>
             <box width={12}><text fg={themeCtx.theme.textMuted} attributes={1}>Duration</text></box>
-            <box width={22}><text fg={themeCtx.theme.textMuted} attributes={1}>Tokens</text></box>
+            <box width={22}><text fg={themeCtx.theme.textMuted} attributes={1}>Context</text></box>
           </box>
 
           {/* Agent Rows - using scrollbox for native scrolling */}

src/cli/tui/routes/workflow/state/formatters.ts

@@ -9,8 +9,10 @@ export function formatNumber(num: number): string {
   return num.toLocaleString()
 }
 
-export function formatTokens(tokensIn: number, tokensOut: number): string {
-  return `${formatNumber(tokensIn)}in/${formatNumber(tokensOut)}out`
+export function formatTokens(total: number): string {
+  if (total >= 1000000) return `${(total / 1000000).toFixed(1)}M`
+  if (total >= 1000) return `${(total / 1000).toFixed(1)}K`
+  return `${total}`
 }
 
 export function formatCost(cost: number): string {

src/infra/engines/providers/opencode/execution/runner.ts

@@ -199,15 +199,17 @@ export async function runOpenCode(options: RunOpenCodeOptions): Promise<RunOpenC
 
     // Only emit when NEW telemetry is captured (not on every line)
     if (onTelemetry && newCaptured?.tokens && newCaptured !== prevCaptured) {
+      // Context window = input + cached (cache.read + cache.write)
+      const totalContextIn = (newCaptured.tokens.input ?? 0) + (newCaptured.tokens.cached ?? 0);
       const telemetryPayload = {
-        tokensIn: newCaptured.tokens.input ?? 0,
+        tokensIn: totalContextIn,
         tokensOut: newCaptured.tokens.output ?? 0,
         cached: newCaptured.tokens.cached,
         cost: newCaptured.cost,
         duration: newCaptured.duration,
       };
-      logger.debug('[TELEMETRY:2-RUNNER] Emitting onTelemetry → tokensIn=%d, tokensOut=%d, cached=%s',
-        telemetryPayload.tokensIn, telemetryPayload.tokensOut, telemetryPayload.cached ?? 'undefined');
+      logger.debug('[TELEMETRY:2-RUNNER] Emitting onTelemetry → tokensIn=%d (input=%d + cached=%d), tokensOut=%d',
+        totalContextIn, newCaptured.tokens.input ?? 0, newCaptured.tokens.cached ?? 0, telemetryPayload.tokensOut);
       onTelemetry(telemetryPayload);
     }