<!-- source-hash: 75472e90962007832fb7ea753283d69c -->
Renders an inline pill showing the AI provider icon, model name, and token usage against the context window. When per-call token breakdown data is available, a hover card expands to show input/output splits across the answer model and any auxiliary Haiku sub-agents (rewriter, classifier, summarizer), plus an optional prompt-cache hit rate.

## Key Components

| Export / Function | Description |
|---|---|
| `ModelDisplay` | Primary `forwardRef` component rendering the inline token pill and optional hover card breakdown |
| `BreakdownRow` | Internal helper rendering a single `label / X in / Y out` row in the hover card |
| `getProviderIcon` | Maps provider string (`anthropic`, `openai`, `google`, etc.) to the corresponding grey logo icon |
| `formatTokenCount` | Formats raw token integers to human-readable strings (`1.2K`, `200M`, etc.) |
| `hasAnyBreakdownRow` | Guards hover card rendering — returns `true` only when at least one Haiku sub-agent row exists |

## Usage Example

```typescript
import { ModelDisplay } from './model-display';

// Minimal — inline pill only (no hover card)
<ModelDisplay
  provider="anthropic"
  modelName="claude-opus-4-5"
  displayName="Claude Opus"
  usedTokens={12_400}
  contextWindow={200_000}
/>

// With full breakdown — activates hover card on mouse-over
<ModelDisplay
  provider="anthropic"
  modelName="claude-opus-4-5"
  displayName="Claude Opus"
  usedTokens={18_750}
  contextWindow={200_000}
  inputTokens={15_200}
  outputTokens={3_550}
  hitRatePct={34}
  breakdown={{
    haikuRewriter:   { input: 420,  output: 80  },
    haikuClassifier: { input: 310,  output: 45  },
    haikuSummarizer: { input: 1100, output: 200 },
  }}
/>
```

> **Note:** The `usedTokens` / `contextWindow` tail renders as soon as `contextWindow` is available, intentionally showing `—/200K tokens used` before the first usage frame arrives so users can see model capacity without waiting for streaming to begin.