Agents

Run waterfall

shadcn add @detent-pro/trace

Props 16

Change one and the preview follows.

titlestringRequired: What the run is doing, in the header.
runIdstringRequired: The run's id, shown beside the title.
spansSpan[]Required: Every agent, model and tool call, with when each was busy and how it went.
startedAtnumberRequired: performance.now() when the run began.
endedAtnumber: performance.now() when the run finished. Leave it out while it's running.
statusRunStatusRequired: How the run stands: running, waiting on a person, done or failed.
rowsnumber: How many steps show before the rest scroll.; Default 10
9
flushboolean: Fill its container as a pane, with no card around it.; Default false
nameWidthnumber: The least width of the step column, in px.
view'story' | 'steps': Plain sentences for the people the agent works for, or step names for the people who built it.
defaultView'story' | 'steps': Default 'story'
currencystring: Default 'USD'
waitingLabelstring: What the time spent on a person is called.; Default 'Waiting on you'
onViewChange(v: 'story' | 'steps') => void
onApprove(id: string) => void: Called with a span's id when a person approves the step it's waiting on.
onDeny(id: string) => void: Called with a span's id when a person denies it.

usage.tsx

<RunTrace
  title={title}
  runId={runId}
  spans={spans}
  startedAt={startedAt}
  status={status}
  rows={9}
/>

19 Pro components, 12 whole screens and 1 template. The source lands in your project, yours to change, with every update for life.

~~$99~~$79once

Full refund within 14 days, no questions.