refactor(telemetry): simplify token calculation and remove total telemetry

remove total telemetry aggregation and simplify token context calculation
move agent telemetry display to output window
clean up telemetry bar component

Author: moazbuilds

src/cli/tui/routes/workflow/components/output/output-window.tsx

@@ -399,7 +399,7 @@ export function OutputWindow(props: OutputWindowProps) {
             </box>
           </Show>
 
-          {/* Narrow layout: name on one line, status on next line */}
+          {/* Narrow layout: name on one line, status on next line, telemetry on third */}
           <Show when={!isWideLayout()}>
             <box flexDirection="row">
               <text fg={themeCtx.theme.border}>│  </text>
@@ -417,11 +417,21 @@ export function OutputWindow(props: OutputWindowProps) {
             </box>
           </Show>
 
-          <box flexDirection="row">
-            <text fg={themeCtx.theme.border}>│  </text>
-            <Show when={derivedActivity() !== "idle"} fallback={<text fg={themeCtx.theme.textMuted}>↳ {currentPhrase()}</text>}>
-              <TypingText text={`↳ ${currentPhrase()}`} speed={30} />
-            </Show>
+          <box flexDirection="row" justifyContent="space-between" paddingRight={2}>
+            <box flexDirection="row">
+              <text fg={themeCtx.theme.border}>│  </text>
+              <Show when={derivedActivity() !== "idle"} fallback={<text fg={themeCtx.theme.textMuted}>↳ {currentPhrase()}</text>}>
+                <TypingText text={`↳ ${currentPhrase()}`} speed={30} />
+              </Show>
+            </box>
+            <text fg={themeCtx.theme.textMuted}>
+              context: {(() => {
+                const total = (props.currentAgent?.telemetry.tokensIn ?? 0) + (props.currentAgent?.telemetry.tokensOut ?? 0)
+                if (total >= 1000000) return `${(total / 1000000).toFixed(1)}M`
+                if (total >= 1000) return `${(total / 1000).toFixed(1)}K`
+                return `${total}`
+              })()}
+            </text>
           </box>
           <text fg={themeCtx.theme.border}>╰─</text>
         </box>

src/cli/tui/routes/workflow/components/output/telemetry-bar.tsx

@@ -7,45 +7,21 @@
  */
 
 import { Show } from "solid-js"
-import { useTerminalDimensions } from "@opentui/solid"
 import { useTheme } from "@tui/shared/context/theme"
-import { formatTokens, formatNumber } from "../../state/formatters"
 import type { WorkflowStatus, AutonomousMode } from "../../state/types"
 
 export interface TelemetryBarProps {
   workflowName: string
   runtime: string
   status: WorkflowStatus
-  total: {
-    tokensIn: number
-    tokensOut: number
-    cached?: number
-  }
   autonomousMode?: AutonomousMode
 }
 
 /**
  * Show workflow info, status, and total telemetry in footer
  */
-// Compact threshold - below this width, use compact layout
-const COMPACT_WIDTH = 80
-
 export function TelemetryBar(props: TelemetryBarProps) {
   const themeCtx = useTheme()
-  const dimensions = useTerminalDimensions()
-
-  const isCompact = () => (dimensions()?.width ?? 80) < COMPACT_WIDTH
-
-  const totalText = () => {
-    const cached = props.total.cached ?? 0
-    const base = formatTokens(props.total.tokensIn, props.total.tokensOut)
-    return cached > 0 ? `${base} (${formatNumber(cached)} cached)` : base
-  }
-
-  // Compact token display - no "cached" info
-  const compactTokenText = () => {
-    return formatTokens(props.total.tokensIn, props.total.tokensOut)
-  }
 
   const showStatus = () => props.status === "awaiting" || props.status === "paused" || props.status === "stopped"
 
@@ -75,12 +51,17 @@ export function TelemetryBar(props: TelemetryBarProps) {
       borderStyle="rounded"
       borderColor={themeCtx.theme.border}
     >
-      {/* Left side: workflow name, runtime, status, autonomous mode */}
+      {/* Left side: runtime */}
+      <box flexDirection="row" flexShrink={0}>
+        <text fg={themeCtx.theme.textMuted}>Runtime: </text>
+        <text fg={themeCtx.theme.text}>{props.runtime}</text>
+      </box>
+
+      {/* Right side: workflow name, status, autonomous mode */}
       <box flexDirection="row" flexShrink={1}>
         <text fg={themeCtx.theme.text} attributes={1}>
           {props.workflowName}
         </text>
-        <text fg={themeCtx.theme.textMuted}> • {props.runtime}</text>
         <Show when={showStatus()}>
           <text fg={themeCtx.theme.text}> • </text>
           <text fg={statusColor()}>{statusText()}</text>
@@ -90,17 +71,6 @@ export function TelemetryBar(props: TelemetryBarProps) {
           <text fg={themeCtx.theme.primary}>{props.autonomousMode === 'always' ? 'AUTO (LOCKED)' : 'AUTO'}</text>
         </Show>
       </box>
-
-      {/* Right side: token counts */}
-      <box flexDirection="row" flexShrink={0}>
-        <Show when={!isCompact()}>
-          <text fg={themeCtx.theme.textMuted}>Tokens: </text>
-          <text fg={themeCtx.theme.text}>{totalText()}</text>
-        </Show>
-        <Show when={isCompact()}>
-          <text fg={themeCtx.theme.text}>{compactTokenText()}</text>
-        </Show>
-      </box>
     </box>
   )
 }

src/cli/tui/routes/workflow/components/shells/shared-layout.tsx

@@ -48,7 +48,6 @@ export function SharedLayout(props: SharedLayoutProps) {
           workflowName={shell.state().workflowName}
           runtime={shell.timer.workflowRuntime()}
           status={shell.state().workflowStatus}
-          total={shell.totalTelemetry()}
           autonomousMode={shell.state().autonomousMode}
         />
         <StatusFooter

src/cli/tui/routes/workflow/hooks/use-workflow-computed.ts

@@ -5,19 +5,12 @@
  */
 
 import { createMemo, type Accessor } from "solid-js"
-import { debug } from "../../../../../shared/logging/logger.js"
 import type { WorkflowState, AgentState, SubAgentState } from "../state/types"
 
 export interface UseWorkflowComputedOptions {
   getState: Accessor<WorkflowState>
 }
 
-export interface TotalTelemetry {
-  tokensIn: number
-  tokensOut: number
-  cached?: number
-}
-
 export interface UseWorkflowComputedResult {
   // View checks
   isControllerView: Accessor<boolean>
@@ -34,9 +27,6 @@ export interface UseWorkflowComputedResult {
   // Checkpoint
   isCheckpointActive: Accessor<boolean>
 
-  // Telemetry
-  totalTelemetry: Accessor<TotalTelemetry>
-
   // Layout
   isTimelineCollapsed: Accessor<boolean>
 }
@@ -99,49 +89,6 @@ export function useWorkflowComputed(options: UseWorkflowComputedOptions): UseWor
   // Checkpoint state
   const isCheckpointActive = () => getState().checkpointState?.active ?? false
 
-  // Total telemetry - memoized
-  const totalTelemetry = createMemo((prev: TotalTelemetry | undefined) => {
-    const agents = getState().agents
-    const subAgents = getState().subAgents
-    const controller = getState().controllerState
-    let tokensIn = 0, tokensOut = 0, cached = 0
-
-    for (const agent of agents) {
-      tokensIn += agent.telemetry.tokensIn
-      tokensOut += agent.telemetry.tokensOut
-      cached += agent.telemetry.cached ?? 0
-    }
-
-    for (const subs of subAgents.values()) {
-      for (const sub of subs) {
-        tokensIn += sub.telemetry.tokensIn
-        tokensOut += sub.telemetry.tokensOut
-        cached += sub.telemetry.cached ?? 0
-      }
-    }
-
-    // Include controller telemetry
-    if (controller?.telemetry) {
-      tokensIn += controller.telemetry.tokensIn
-      tokensOut += controller.telemetry.tokensOut
-      cached += controller.telemetry.cached ?? 0
-    }
-
-    const result: TotalTelemetry = {
-      tokensIn,
-      tokensOut,
-      cached: cached > 0 ? cached : undefined
-    }
-
-    // Only log when values actually change
-    if (!prev || prev.tokensIn !== tokensIn || prev.tokensOut !== tokensOut || prev.cached !== result.cached) {
-      debug('[TELEMETRY:6-TOTAL] totalTokensIn=%d, totalTokensOut=%d, totalCached=%s',
-        tokensIn, tokensOut, result.cached)
-    }
-
-    return result
-  })
-
   // Timeline collapsed state
   const isTimelineCollapsed = () => getState().timelineCollapsed
 
@@ -153,7 +100,6 @@ export function useWorkflowComputed(options: UseWorkflowComputedOptions): UseWor
     currentAgent,
     isShowingRunningAgent,
     isCheckpointActive,
-    totalTelemetry,
     isTimelineCollapsed
   }
 }

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

@@ -9,18 +9,19 @@ export function updateAgentTelemetryInList(
   return agents.map((agent) => {
     if (agent.id !== agentId) return agent
 
-    // Context = input (uncached) + cached tokens
-    // The API reports uncached input separately from cached, we need the sum for total context
-    const currentContext = (telemetry.tokensIn ?? 0) + (telemetry.cached ?? 0)
+    // Context = input tokens (total)
+    // Note: cached tokens are already INCLUDED in tokensIn, not separate
+    // cached is just metadata showing how many of those tokens were served from cache
+    const currentContext = telemetry.tokensIn ?? 0
     const newTokensIn = currentContext > 0 ? currentContext : agent.telemetry.tokensIn
     const newTokensOut = telemetry.tokensOut ?? agent.telemetry.tokensOut
     const newCached = telemetry.cached ?? agent.telemetry.cached
     // Cost accumulates
     const newCost = (agent.telemetry.cost ?? 0) + (telemetry.cost ?? 0) || undefined
 
     debug('[TELEMETRY:5-UTILS] [STEP-AGENT] updateAgentTelemetryInList → agentId=%s', agentId)
-    debug('[TELEMETRY:5-UTILS] [STEP-AGENT]   INPUT: uncached=%d + cached=%d = context=%d, output=%d',
-      telemetry.tokensIn ?? 0, telemetry.cached ?? 0, currentContext, telemetry.tokensOut ?? 0)
+    debug('[TELEMETRY:5-UTILS] [STEP-AGENT]   INPUT: context=%d (cached=%d), output=%d',
+      telemetry.tokensIn ?? 0, telemetry.cached ?? 0, telemetry.tokensOut ?? 0)
     debug('[TELEMETRY:5-UTILS] [STEP-AGENT]   RESULT: context=%d, output=%d (REPLACES previous)',
       newTokensIn, newTokensOut)