Generation stats

Tab

Moves to Details, then Retry when a response failed, then the copy button inside an open breakdown.

Enter, Space

Opens or closes the breakdown, retries, or copies the stats as JSON.

• The strip is a group named after the model ("Claude Sonnet 5.5 stats"). The four stats are a description list, so each value is read with its label: "First token, 412ms".
• Details is a button with aria-expanded and aria-controls; at narrow widths it becomes an icon button that keeps the name Show details or Hide details.
• A polite status region announces settled outcomes ("Claude Sonnet 5.5 done in 4.18s, 284 output tokens at 88 tokens per second, $0.0077"), failures and stops, never the live counts. The self-playing preview says once that it is simulated and stays quiet until someone interacts with it.
• Status never relies on color: a spinner, drawn check, alert or square always sits next to a word. The latency bar is decorative; its values are listed beside it in text.
• The breakdown is a real table with column and row headers and a caption, so screen readers can navigate tokens, rates and cost by cell.
• Pointer focus draws no ring; keyboard focus shows Arc's shared focus ring.

• Numbers glide toward each new value in about 100ms per step with tabular numerals in reserved cells, so chunks of tokens read as one smooth count and nothing beside them moves. A drop, like a new request, cuts straight to the new value instead of counting down.
• While streaming, speed is measured when each chunk lands, so it holds still between chunks instead of sagging and jumping. The sparkline adds a smoothed reading every 160ms and compresses to keep the whole run's shape.
• Status labels swap with a single crossfade (out in 100ms, in over 160ms with a 2px rise); the done check draws itself once.
• The breakdown and the error row open on a 260ms critically damped spring for height with a 160ms fade. Nothing bounces.
• The preview loop pauses off screen and holds on a settled run while someone has the breakdown open.
• Reduced motion shows final values at once, drops the spinner, the check drawing and the height springs, and stops the preview on a settled run.

• The card's four cells sit in one row above 600px of width and in a two by two grid below it, so the speed cell keeps room for its sparkline.
• Below 440px Details becomes an icon button and the Rate column hides; the model name truncates with an ellipsis rather than wrapping.
• The inline variant wraps its stats onto a second line on phones instead of scrolling; the breakdown spans the full width under it.

• The live clock runs on requestAnimationFrame only while waiting or streaming, and each counting number re-renders only itself.
• The speed series is sampled on a 160ms interval only while streaming and capped at 48 points.
• The preview's simulation ticks every 40ms in virtual time and only while the card is on screen.

• Wire it to the stream you already have: set startedAt when the request leaves, status "waiting" until the first chunk, then "streaming" while you add to outputTokens, then "done" with durationMs. Speed, latency and cost follow.
• Map provider usage fields: Anthropic input_tokens plus cache_read_input_tokens is inputTokens and cache_read_input_tokens is cachedTokens; OpenAI prompt_tokens and prompt_tokens_details.cached_tokens map the same way, and completion_tokens_details.reasoning_tokens is reasoningTokens.
• Pass pricing from your own config. If your provider already reports cost, pass usage.costUsd and leave pricing out; the Rate column then hides.
• Use variant="inline" under chat messages and the card in eval views, playgrounds and admin panels. Keep the model name as people know it ("Claude Sonnet 5.5"), and put the API id in model.id.
• When the person stops a response, set status "stopped" with durationMs; when the request fails, set status "error" with a short, specific reason and onRetry.

The full library index for assistants is at /llms.txt.