feat: ctx line

src/components/CtxProgressBar.tsx

@@ -0,0 +1,125 @@
+import { Box, Text } from '../ink.js'
+
+const CONTEXT_BAR_WIDTH = 20
+
+type ContextFillBand = 'green' | 'orange' | 'red'
+
+interface ContextBarCell {
+  ch: string
+  isFill: boolean
+  isMarker: boolean
+}
+
+interface CtxProgressBarProps {
+  currentTokens: number
+  contextWindowTokens: number
+  compactionTargetTokens: number
+  utilizationPct: number
+}
+
+function contextFillBand(utilizationPct: number): ContextFillBand {
+  const pct = Math.min(100, utilizationPct)
+  if (pct < 40) return 'green'
+  if (pct < 60) return 'orange'
+  return 'red'
+}
+
+function contextBarCells(
+  currentTokens: number,
+  contextWindowTokens: number,
+  compactionTargetTokens: number,
+): ContextBarCell[] {
+  const filled = Math.min(
+    CONTEXT_BAR_WIDTH,
+    Math.floor(
+      (currentTokens * CONTEXT_BAR_WIDTH) / Math.max(1, contextWindowTokens),
+    ),
+  )
+
+  const markerIndex = Math.max(
+    0,
+    Math.min(
+      CONTEXT_BAR_WIDTH - 1,
+      Math.ceil(
+        (compactionTargetTokens * CONTEXT_BAR_WIDTH) /
+          Math.max(1, contextWindowTokens),
+      ) - 1,
+    ),
+  )
+
+  const cells: ContextBarCell[] = []
+  for (let i = 0; i < CONTEXT_BAR_WIDTH; i++) {
+    if (i === markerIndex) {
+      cells.push({ ch: '|', isFill: false, isMarker: true })
+    } else if (i < filled) {
+      cells.push({ ch: '=', isFill: true, isMarker: false })
+    } else {
+      cells.push({ ch: '-', isFill: false, isMarker: false })
+    }
+  }
+  return cells
+}
+
+function formatTokenCount(tokens: number): string {
+  if (tokens >= 1_000_000) {
+    return `${(tokens / 1_000_000).toFixed(1)}M`
+  }
+  if (tokens >= 1_000) {
+    return `${(tokens / 1_000).toFixed(1)}k`
+  }
+  return `${tokens}`
+}
+
+function bandColor(band: ContextFillBand): string {
+  switch (band) {
+    case 'green':
+      return '#22c55e'
+    case 'orange':
+      return '#f59e0b'
+    case 'red':
+      return '#ef4444'
+  }
+}
+
+export function CtxProgressBar({
+  currentTokens,
+  contextWindowTokens,
+  compactionTargetTokens,
+  utilizationPct,
+}: CtxProgressBarProps) {
+  if (contextWindowTokens <= 0) return null
+
+  const band = contextFillBand(utilizationPct)
+  const color = bandColor(band)
+  const pct = Math.min(100, Math.max(0, Math.round(utilizationPct)))
+  const cells = contextBarCells(
+    currentTokens,
+    contextWindowTokens,
+    compactionTargetTokens,
+  )
+  const formattedWindow = formatTokenCount(contextWindowTokens)
+
+  return (
+    <Box>
+      <Text dimColor>ctx [</Text>
+      {cells.map((cell, i) => {
+        let cellColor: string
+        if (cell.isMarker) {
+          cellColor = '#a78bfa'
+        } else if (cell.isFill) {
+          cellColor = color
+        } else {
+          cellColor = undefined
+        }
+        return (
+          <Text key={i} color={cellColor} dimColor={!cellColor}>
+            {cell.ch}
+          </Text>
+        )
+      })}
+      <Text dimColor>] </Text>
+      <Text color={color}>{pct}%</Text>
+      <Text dimColor> [{formattedWindow}]</Text>
+    </Box>
+  )
+}

src/components/LogoV2/LogoV2.tsx

@@ -43,6 +43,8 @@ import { useAppState, useSetAppState } from '../../state/AppState.js';
 import { getEffortSuffix } from '../../utils/effort.js';
 import { useMainLoopModel } from '../../hooks/useMainLoopModel.js';
 import { renderModelSetting } from '../../utils/model/model.js';
+import { CtxProgressBar } from '../CtxProgressBar.js';
+import { useContextUsage } from '../../hooks/useContextUsage.js';
 const LEFT_PANEL_MAX_WIDTH = 50;
 export function LogoV2() {
   const $ = _c(94);
@@ -158,6 +160,7 @@ export function LogoV2() {
   useEffect(t7, t8);
   const model = useMainLoopModel();
   const fullModelDisplayName = renderModelSetting(model);
+  const contextUsage = useContextUsage();
   const setAppState = useSetAppState();
 
   // Poll for OpenRouter models when using 'default' model
@@ -381,7 +384,7 @@ export function LogoV2() {
       t18 = $[42];
       t19 = $[43];
     }
-    return <><OffscreenFreeze><Box flexDirection="column" borderStyle="round" borderColor="startupAccent" borderText={t11} paddingX={1} paddingY={1} alignItems="center" width={columns}><Text bold={true}>{welcomeMessage}</Text>{t12}{t13}<Text dimColor={true}>{billingType}</Text><Text dimColor={true}>{agentName ? `@${agentName} · ${truncatedCwd}` : truncatedCwd}</Text></Box></OffscreenFreeze>{t14}{t15}{t16}{t17}{t18}{t19}</>;
+    return <><OffscreenFreeze><Box flexDirection="column" borderStyle="round" borderColor="startupAccent" borderText={t11} paddingX={1} paddingY={1} alignItems="center" width={columns}><Text bold={true}>{welcomeMessage}</Text>{t12}{t13}{contextUsage.hasData && <CtxProgressBar currentTokens={contextUsage.currentTokens} contextWindowTokens={contextUsage.contextWindowTokens} compactionTargetTokens={contextUsage.compactionTargetTokens} utilizationPct={contextUsage.utilizationPct} />}<Text dimColor={true}>{billingType}</Text><Text dimColor={true}>{agentName ? `@${agentName} · ${truncatedCwd}` : truncatedCwd}</Text></Box></OffscreenFreeze>{t14}{t15}{t16}{t17}{t18}{t19}</>;
   }
   const welcomeMessage_0 = formatWelcomeMessage(username);
   const modelLine = !process.env.IS_DEMO && config.oauthAccount?.organizationName ? `${modelDisplayName} · ${billingType} · ${config.oauthAccount.organizationName}` : `${modelDisplayName} · ${billingType}`;
@@ -448,7 +451,7 @@ export function LogoV2() {
   }
   let t22;
   if ($[53] !== t20 || $[54] !== t21) {
-    t22 = <Box flexDirection="column" alignItems="center">{t20}{t21}</Box>;
+    t22 = <Box flexDirection="column" alignItems="center">{t20}{contextUsage.hasData && <CtxProgressBar currentTokens={contextUsage.currentTokens} contextWindowTokens={contextUsage.contextWindowTokens} compactionTargetTokens={contextUsage.compactionTargetTokens} utilizationPct={contextUsage.utilizationPct} />}{t21}</Box>;
     $[53] = t20;
     $[54] = t21;
     $[55] = t22;

src/hooks/useContextUsage.ts

@@ -0,0 +1,62 @@
+import { useMemo } from 'react'
+import { getSdkBetas, getTotalInputTokens } from '../bootstrap/state.js'
+import { useMainLoopModel } from './useMainLoopModel.js'
+import {
+  getContextWindowForModel,
+  calculateContextPercentages,
+} from '../utils/context.js'
+import { getEffectiveContextWindowSize } from '../services/compact/autoCompact.js'
+
+export interface ContextUsageInfo {
+  currentTokens: number
+  contextWindowTokens: number
+  compactionTargetTokens: number
+  utilizationPct: number
+  hasData: boolean
+}
+
+export function useContextUsage(): ContextUsageInfo {
+  const model = useMainLoopModel()
+
+  const contextWindowTokens = getContextWindowForModel(
+    model,
+    getSdkBetas(),
+  )
+
+  const effectiveWindowSize = getEffectiveContextWindowSize(model)
+
+  const totalInputTokens = getTotalInputTokens()
+
+  const currentUsage = useMemo(() => {
+    // We don't have per-call cache breakdown in global state,
+    // so use total input tokens as approximation for current context usage.
+    // This works because totalInputTokens tracks cumulative input,
+    // but for a live progress bar we want the last API response's context size.
+    // For now, use totalInputTokens as a reasonable proxy.
+    return {
+      input_tokens: totalInputTokens,
+      cache_creation_input_tokens: 0,
+      cache_read_input_tokens: 0,
+    }
+  }, [totalInputTokens])
+
+  const percentages = calculateContextPercentages(
+    currentUsage,
+    contextWindowTokens,
+  )
+
+  const utilizationPct = percentages.used ?? 0
+  const hasData = percentages.used !== null
+
+  // Compaction target is the threshold at which auto-compact triggers
+  const compactionTargetTokens =
+    effectiveWindowSize - 13_000 // AUTOCOMPACT_BUFFER_TOKENS
+
+  return {
+    currentTokens: totalInputTokens,
+    contextWindowTokens,
+    compactionTargetTokens,
+    utilizationPct,
+    hasData,
+  }
+}