Function StatusBar

src/ui/components/StatusBar.tsx:84–125

({
  modelId,
  contextTokens,
  totalCost: _totalCost,
  state,
  approvalMode,
  busy,
  title,
  plan: _plan,
  usagePercentage: _usagePercentage,
  tieredUsage,
}: StatusBarProps)

}

export function StatusBar({
  modelId,
  contextTokens,
  totalCost: _totalCost,
  state,
  approvalMode,
  busy,
  title,
  plan: _plan,
  usagePercentage: _usagePercentage,
  tieredUsage,
}: StatusBarProps) {
  const model = getModel(modelId);
  const contextPct = Math.min(
    100,
    Math.round((contextTokens / model.contextWindow) * 100),
  );
  const usageLine = usageSummary(tieredUsage);
  return (
    <Box flexDirection="column">
      <Box justifyContent="space-between">
        <Text dimColor>
          <Text color={approvalMode === "ask" ? undefined : COLORS.warning}>
            {MODE_LABELS[approvalMode]}
          </Text>
          {" (shift+tab to cycle)"}
          {busy && " · esc to interrupt"}
          {state ? <Text color={COLORS.thinking}> · {state}</Text> : null}
        </Text>
        <Text dimColor>
          {title ? `${truncate(title, 32)} · ` : ""}
          {model.name} · ctx {contextTokens.toLocaleString()} ({contextPct}%)
        </Text>
      </Box>
      {usageLine && (
        <Box justifyContent="flex-end">
          <Text dimColor>{usageLine}</Text>
        </Box>
      )}
    </Box>
  );
}