ns-ui
Time-to-first-token rendered as calibrated capillary rise — a narrow tube climbs to a scribed p50 line, holds and trembles if it's running slow, and only surfaces retry/switch-model once it's genuinely past p95. Never fakes progress.
Use when waiting on a model/agent's first token where the question is 'is this normal, unusually slow, or actually stalled' against that model's own recorded latency history — the rise is calibrated to a real p50/p95 pair (not a generic spinner), holds honestly at the p50 line rather than faking progress toward a target it hasn't earned, and only surfaces retry/switch-model once elapsed time has genuinely passed p95. Pick status-glyph-cadence instead for connection liveness with no notion of 'how long is normal' (no percentiles, no stall detection); pick password-strength-tide instead for a liquid level that encodes input strength, not elapsed time against a calibrated distribution.
Install
npx shadcn add https://design.helpmarq.comns-ui / meter-latency-capillary
holds honestly at the p50 line, never fakes progress toward a line it hasn't earned
| Prop | Type | Default | Description |
|---|---|---|---|
| startedAt? | number | — | ms epoch timestamp this request/turn began. Defaults to Date.now() at mount. |
| p50Ms | number | — | historical p50 (typical) first-token latency in ms, e.g. from a rolling latency store |
| p95Ms | number | — | historical p95 first-token latency in ms — should be greater than p50Ms |
| arrivedAt? | number | null | — | ms epoch timestamp the first token actually arrived; null/undefined while still waiting |
| onRetry? | () => void | — | fired when the user presses Retry after a stall |
| onSwitchModel? | () => void | — | fired when the user presses "Switch model" after a stall |
| label? | string | — | accessible name for the root status region. Default "Time to first token" |
| className? | string | — | — |