Add live context size tracking to conversation pane

Track lastContextSize on SessionActivity — the most recent turn's
context size (cache_read + input + cache_write). Display as a colored
badge [142K] in the conversation list: green <100K, yellow 100-200K,
red 200K+, pulsing red >500K. Also show ctx: in status bar when
viewing conversations.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: RyanSeanPhillips

packages/cli/src/core/activity.ts

@@ -57,6 +57,7 @@ export async function parseSessionActivity(filePath: string): Promise<SessionAct
       hourlyActivity: new Array(24).fill(0),
       assistantTurns: 0,
       toolUseTurns: 0,
+      lastContextSize: 0,
     };
 
     let firstTimestamp: number | null = null;
@@ -111,6 +112,8 @@ export async function parseSessionActivity(filePath: string): Promise<SessionAct
             activity.tokenBreakdown.cacheRead += cacheR;
             activity.tokenBreakdown.cacheWrite += cacheW;
             activity.inputPerMessage.push(inp);
+            const turnCtx = cacheR + inp + cacheW;
+            if (turnCtx > 0) activity.lastContextSize = turnCtx;
           }
 
           // Tool use from content array

packages/cli/src/core/demo-data.ts

@@ -284,6 +284,7 @@ const demoActivity: SessionActivity = {
   duration: 1_800_000,
   assistantTurns: 38,    // ~3.2 turns per user message
   toolUseTurns: 28,      // ~74% of turns use tools
+  lastContextSize: 142_000,  // 142K context
   hourlyActivity: (() => {
     // Populate around the current hour so timeline shows data
     const h = new Array(24).fill(0);
@@ -483,6 +484,7 @@ export const DEMO_SESSION_ACTIVITY: SessionActivity = {
   duration: 5_400_000, // 1.5 hours
   assistantTurns: 156,   // ~3.3 turns per user message
   toolUseTurns: 112,     // ~72% of turns use tools
+  lastContextSize: 387_000,  // 387K context — deep into session
   hourlyActivity: [0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 8, 12, 6, 4, 8, 5, 2, 0, 0, 0, 0, 0, 0, 0],
 };
 

packages/cli/src/core/processes.ts

@@ -41,6 +41,7 @@ const EMPTY_ACTIVITY: SessionActivity = {
   hourlyActivity: new Array(24).fill(0),
   assistantTurns: 0,
   toolUseTurns: 0,
+  lastContextSize: 0,
 };
 
 // ── Main detection function ──────────────────────────────────

packages/cli/src/core/tailer.ts

@@ -113,6 +113,7 @@ function createEmptyActivity(): SessionActivity {
     hourlyActivity: new Array(24).fill(0),
     assistantTurns: 0,
     toolUseTurns: 0,
+    lastContextSize: 0,
   };
 }
 
@@ -190,6 +191,9 @@ function processLine(line: string, state: TailerInternal): void {
       state.activity.tokenBreakdown.cacheRead += cacheR;
       state.activity.tokenBreakdown.cacheWrite += cacheW;
       state.activity.inputPerMessage.push(inp);
+      // Track most recent turn's context size (what was actually sent to the API)
+      const turnContext = cacheR + inp + cacheW;
+      if (turnContext > 0) state.activity.lastContextSize = turnContext;
     }
 
     // Collect assistant text output for round summaries

packages/cli/src/tui/App.tsx

@@ -707,6 +707,7 @@ export function App() {
         scanning={state.scanning}
         leftPaneMode={state.leftSection}
         updateAvailable={updateAvailable}
+        selectedConversation={state.leftSection === 'conversations' ? sortedConversations[state.conversationIndex] ?? null : null}
       />
 
       {/* Matrix glitch Easter egg — rare, brief, subtle */}

packages/cli/src/tui/components/ConversationPane.tsx

@@ -27,6 +27,26 @@ function projectName(projectPath: string): string {
   return parts[parts.length - 1] || projectPath;
 }
 
+// Context size thresholds (tokens)
+const CTX_WARN = 100_000;   // yellow warning
+const CTX_DANGER = 200_000; // red danger
+const CTX_CRITICAL = 500_000; // pulsing red
+
+/** Format context size compactly: 142K, 1.2M */
+function formatContext(tokens: number): string {
+  if (tokens >= 1_000_000) return `${(tokens / 1_000_000).toFixed(1)}M`;
+  if (tokens >= 1_000) return `${Math.round(tokens / 1_000)}K`;
+  return `${tokens}`;
+}
+
+/** Color for context size */
+function contextColor(tokens: number): string {
+  if (tokens >= CTX_CRITICAL) return INK_COLORS.red;
+  if (tokens >= CTX_DANGER) return INK_COLORS.red;
+  if (tokens >= CTX_WARN) return INK_COLORS.yellow;
+  return INK_COLORS.green;
+}
+
 export const ConversationPane = React.memo(function ConversationPane({
   conversations,
   selectedIndex,
@@ -81,6 +101,12 @@ export const ConversationPane = React.memo(function ConversationPane({
         const dur = formatDuration(Date.now() - session.startTime.getTime());
         const tok = formatTokenCount(session.stats.tokens);
 
+        // Current context size (what was sent to the API on the most recent turn)
+        const ctxSize = session.stats.lastContextSize;
+        const ctxStr = ctxSize > 1000 ? formatContext(ctxSize) : '';
+        const ctxCol = contextColor(ctxSize);
+        const ctxPulse = ctxSize >= CTX_CRITICAL && !pulse; // blink when critical
+
         return (
           <Box key={session.sessionId || `${session.projectPath}:${i}`} paddingX={1}>
             <Text
@@ -93,10 +119,12 @@ export const ConversationPane = React.memo(function ConversationPane({
               <Text color={pulse ? dotColor : INK_COLORS.textDim}>{'●'}</Text>
               {' '}
               <Text color={INK_COLORS.textDim}>
-                {action.slice(0, Math.max(4, innerWidth - nameWidth - tok.length - dur.length - 8))}{' '}
                 {dur}{' '}
               </Text>
               <Text color={INK_COLORS.accent}>{tok}</Text>
+              {ctxStr ? (
+                <Text color={ctxPulse ? INK_COLORS.textDim : ctxCol}>{' '}[{ctxStr}]</Text>
+              ) : null}
             </Text>
           </Box>
         );

packages/cli/src/tui/components/StatusBar.tsx

@@ -19,9 +19,10 @@ interface StatusBarProps {
   scanning?: boolean;
   leftPaneMode?: string;
   updateAvailable?: string | null;
+  selectedConversation?: { stats: { lastContextSize: number } } | null;
 }
 
-export const StatusBar = React.memo(function StatusBar({ mode, stats, width, focusPane, launchMsg, usageBudget, scanning, leftPaneMode, updateAvailable }: StatusBarProps) {
+export const StatusBar = React.memo(function StatusBar({ mode, stats, width, focusPane, launchMsg, usageBudget, scanning, leftPaneMode, updateAvailable, selectedConversation }: StatusBarProps) {
   // Animated counters — count up smoothly when stats change
   const animatedTokens = useAnimatedCounter(stats?.tokens ?? 0, 1500);
   const animatedMessages = useAnimatedCounter(stats?.messages ?? 0, 800);
@@ -55,6 +56,16 @@ export const StatusBar = React.memo(function StatusBar({ mode, stats, width, foc
             : [['j/k', 'nav'], ['/', 'filter'], ['Tab', 'details'], ['l', 'live'], ['S', 'scan'], ['H', 'hidden'], [',', 'settings'], ['?', 'help'], ['q', 'quit']];
   const hintsText = hintPairs.map(([k, l]) => `${k}:${l}`).join('  ');
 
+  // Context size for selected conversation
+  let ctxInfo = '';
+  if (leftPaneMode === 'conversations' && selectedConversation) {
+    const ctxSize = selectedConversation.stats.lastContextSize;
+    if (ctxSize > 1000) {
+      const ctxStr = ctxSize >= 1_000_000 ? `${(ctxSize / 1_000_000).toFixed(1)}M` : `${Math.round(ctxSize / 1_000)}K`;
+      ctxInfo = `ctx:${ctxStr}`;
+    }
+  }
+
   // Compact right-side: [Tier] X% or basic stats (full bars live in ProjectPane)
   const hasLiveData = usageBudget?.rateLimits != null;
   const hasBudget = usageBudget && usageBudget.limit > 0;
@@ -79,6 +90,11 @@ export const StatusBar = React.memo(function StatusBar({ mode, stats, width, foc
     rightSide = `${animatedMessages} msgs · ${formatTokenCount(animatedTokens)} tok`;
   }
 
+  // Append context size when viewing conversations
+  if (ctxInfo) {
+    rightSide = rightSide ? `${ctxInfo} · ${rightSide}` : ctxInfo;
+  }
+
   // Truncate hints if they'd overlap with rightSide
   const rightLen = rightSide ? tierPrefix.length + rightSide.length + 2 : 0;
   const maxHintLen = Math.max(10, width - 2 - rightLen);

packages/cli/src/types.ts

@@ -146,6 +146,7 @@ export interface SessionActivity {
   hourlyActivity: number[];  // 24 elements, hourly message counts
   assistantTurns: number;    // total assistant API responses (each is an API round-trip)
   toolUseTurns: number;      // assistant turns that contained at least one tool_use block
+  lastContextSize: number;   // most recent turn's context size (cache_read + input + cache_write)
 }
 
 // ── Git commits ────────────────────────────────────────────