Agent Trace

React

Tool calls as ruled rows, with state, tool, argument and duration. Expand a row to see its output.

Step 1 of 5

Install

$ npx shadcn@latest add https://spotcheckui.com/r/agent-trace.json

No motion engine needed.

import { AgentTrace } from "@/components/spotcheck/agent-trace"

<AgentTrace steps={run.steps} live={run.status === "running"} />

Pass ms as an estimate for steps that haven't finished, so the progress bar has something to measure against.

steps * RequiredTraceStep[]Default —
livebooleanDefault falseSet while the run is going, so the summary reads as a step count.
classNamestringDefault —

Tab	Move between steps
Enter	Show or hide a step's output

The running marker stays still, and the bar updates without easing.