Renders an inline pill showing the AI model provider icon, model name, and token usage, with an optional hover card that breaks down token consumption across sub-models (rewriter, classifier, summarizer). ## Key Components | Export | Type | Description | |--------|------|-------------| | `ModelDisplay` | `React.forwardRef` component | Primary display pill with provider icon, model name, token counter, and hover breakdown card | | `ModelDisplaySkeleton` | `React.forwardRef` component | Loading placeholder that mirrors `ModelDisplay` layout to prevent layout shift | | `BreakdownRow` | Internal component | Single row in the hover card showing input/output token counts for one model call | | `getProviderIcon` | Helper function | Maps provider string (`anthropic`, `openai`, `google`, etc.) to the matching grey logo icon | | `formatTokenCount` | Helper function | Formats raw token integers to human-readable strings (`1.2K`, `200M`) | ## Usage Example ```typescript // Basic pill — shows provider icon + name only // With token usage counter (renders once contextWindow is known) // With sub-model breakdown (enables hover card) // Skeleton during loading — opt-in token tail placeholder ``` The hover card only mounts when at least one `breakdown` sub-model row (`haikuRewriter`, `haikuClassifier`, `haikuSummarizer`) is present, avoiding unnecessary accessibility chrome on surfaces that don't capture cross-call usage.