React Agent / Tool-Call Trace
Kelvin's whole thesis, applied to AI: an agent you can audit rather than trust. The trace reconstructs a run step by step — what it reasoned, which tools it called with what arguments, what came back, and how long each step took — on the same vertical spine as the incident timeline, because “what did this autonomous thing actually do, in order” is the same question.
Diagnose EQ-07 alarm
done- Reasoning900 ms
The operator reported a pressure alarm on EQ-07. I'll pull the SPC history first to confirm it's a real trend and not a single transient, then check the pump telemetry if it looks systematic.
- Reasoning640 ms
Three violations trending upward — that's systematic, not a transient. A rising pressure baseline usually points at the pump. Checking turbo pump current.
- Answer1.1 s
EQ-07's pressure excursion is consistent with turbo pump bearing wear: pump current is up 18% with vibration above its warning band, and the pressure trend is rising rather than spiking. I'd schedule a pump PM before the next campaign.
Installation
Props
| Prop | Type | Description |
|---|---|---|
| steps | AgentStep[] | Discriminated union: thought, tool, answer |
| status | RunStatus | running, done, or failed |
| elapsedMs | number | Total wall-clock for the run |
| tokens | number | Total tokens consumed |
| title | string | Run heading |
Three kinds of step, one spine
AgentStep is a discriminated union so each step carries exactly what it is: a thought is reasoning text, a tool is a full Tool-Call Card with its args and result inline, and an answer is the final response, marked in the brand colour so the eye finds the conclusion at the end of the chain. The connectors draw the run as a single sequence, so a reviewer reads top-to-bottom exactly what happened: reasoned, queried SPC, reasoned again, checked the pump, concluded.
Built to show a live run, too
Set status="running" and the final step becomes the active one — its node spins in accent-bold on a deep surface, the shared "generation in progress" language — so the same component renders both a finished audit record and a run unfolding in real time. Header vitals (elapsed, tokens, step count) sit in mono tabular-nums and belong equally to a completed trace and a live one; pair it with the Run Status Strip for a heartbeat while it works.
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.