Function StatusBar

src/cli/ui.tsx:779–831

* Footer status line under the input box: model + mode on the left, usage + credit and * key hints on the right. "credit" reads "local · free" for on-device models (cost $0) and * the running dollar amount once a paid API is in play. Updates live as budget events land.

(props: {
  width: number;
  model: string;
  mode: 'normal' | 'plan';
  tokens: number;
  costUsd: number;
  contextTokens: number;
  contextWindow: number;
  elapsedMs: number;
  busy: boolean;
})

      {props.busy
        ? <Text dimColor>  ·  crafting…  ·  Esc to stop</Text>
        : props.mode === 'plan'
          ? <Text color="yellow">  ·  plan mode</Text>
          : <Text dimColor>  ·  ready</Text>}
    </Box>
  );
}

/**
 * Footer status line under the input box: model + mode on the left, usage + credit and
 * key hints on the right. "credit" reads "local · free" for on-device models (cost $0) and
 * the running dollar amount once a paid API is in play. Updates live as budget events land.
 */
function StatusBar(props: {
  width: number;
  model: string;
  mode: 'normal' | 'plan';
  tokens: number;
  costUsd: number;
  contextTokens: number;
  contextWindow: number;
  providerName?: string;
  providerIsLocal?: boolean;
  elapsedMs: number;
  busy: boolean;
}): React.ReactElement {
  const { width, model, mode, tokens, costUsd, contextTokens, contextWindow, providerName, providerIsLocal, elapsedMs, busy } = props;
  const tok = tokens >= 1000 ? `${(tokens / 1000).toFixed(1)}k` : String(tokens);
  // WHERE the model runs, stated — not guessed from cost: 'ollama·local', 'lmstudio·local',
  // 'anthropic·api'… A billing API at $0.0000 still shows ·api so cloud is never mistaken
  // for free-local; the dollar figure appears the moment real cost accrues.
  const source = providerName ? `${providerName}·${providerIsLocal ? 'local' : 'api'}` : '';
  const credit = costUsd > 0 ? `$${costUsd.toFixed(4)}` : providerIsLocal === false ? 'api · $0.0000' : 'local · free';
  // Throughput (token-consumption rate) + elapsed time. Average over the task —
  // total tokens / elapsed — which is exactly "how fast tokens are being spent".
  const secs = elapsedMs / 1000;
  const showTiming = elapsedMs > 0;
  const rate = secs > 0.3 ? Math.round(tokens / secs) : 0;
  const rateStr = rate >= 1000 ? `${(rate / 1000).toFixed(1)}k` : String(rate);
  const elapsedStr = secs >= 60 ? `${Math.floor(secs / 60)}m ${Math.round(secs % 60)}s` : `${secs.toFixed(1)}s`;
  const ctxMeter = formatContextMeter(contextTokens, contextWindow);
  // Colour the meter by fullness: green < 60%, yellow < 85%, red beyond (approaching
  // compaction / the window limit).
  const ctxPct = contextWindow > 0 ? (contextTokens / contextWindow) * 100 : 0;
  const ctxColor = ctxPct >= 85 ? 'red' : ctxPct >= 60 ? 'yellow' : 'green';
  return (
    <Box width={width} paddingX={1} justifyContent="space-between">
      <Box>
        <Text dimColor>{model}</Text>
        {source !== '' && (
          <>
            <Text dimColor>  ·  </Text>
            <Text color={providerIsLocal ? 'cyan' : 'magenta'} dimColor={!busy}>{source}</Text>
          </>
        )}
        <Text dimColor>  ·  </Text>
        <Text color={mode === 'plan' ? 'yellow' : 'green'}>{mode}</Text>