ContextBreakdown

Show what fills the context window, group by group: a stacked usage bar, one row per group with tokens and percent, and optional suggestions to free space. A group with items expands to its items, sorted by tokens. used defaults to the sum of the groups. Suggestions are sorted critical first, then by savings; each can carry an action button. Use variant="full" (default) on a settings or usage page and variant="compact" in a popover: compact hides item and suggestion descriptions and bar tooltips. You rarely render it directly inside a chat: pass breakdown and suggestions to ContextUsage and the ring shows this component in its details. The layout is a single column and fits a 360px widget. Related pure helpers: getGroupTokens, getBreakdownTotal, sortBreakdownItems, sortSuggestions, getTotalSavings, getGroupColor, getGroupShade.