React Run Status Strip
A long generation or agent run needs a heartbeat. This strip gives it one: state, wall-clock, tokens, and running cost on a single line, in mono so the numbers tick without shoving the layout around — and Stop sits right beside the figures that justify pressing it.
Installation
Props
| Prop | Type | Description |
|---|---|---|
| state | RunState | running, streaming, done, stopped, failed |
| elapsedMs | number | Wall-clock elapsed |
| tokens | number | Tokens consumed so far |
| cost | number | Accumulated cost in currency |
| model | string | Model chip |
| onStop | () => void | Show Stop while live |
Live means deep
While a run is running or streaming the strip sits on Kelvin's deep surface with an accent-bold pinging dot — the one place that near-neon mint is legal, and the same "in progress" language the streaming response and agent trace use. When the run settles it drops to a light card with a green check, a muted pause, or a red cross. So "is this thing still going" is answered by the whole strip's treatment, not just a word — state is never carried by colour alone.
Cost is rendered to four decimal places because at fractions of a cent per token, two decimals round the interesting part away, and the reason to keep watching a run is often the spend climbing. Stop lives inside the strip, next to elapsed and cost, so the decision to halt is made looking straight at the numbers that motivate it.
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.