Agent Replay
experimentalStep through a finished agent run — each call, what the agent was told, and every take-over and hand-back — by button, slider or playback.
- AI
- 1 file
- No extra npm packages
- Accessibility notes
pnpm dlx @dowel-ui/cli add agent-replayNo npm packages are needed beyond what Dowel already requires.
import { AgentReplay } from "@/components/ui/agent-replay";Default
Calls Only
Of ALive Surface
<AgentReplay>
| Prop | Type | Default |
|---|---|---|
agentName | string | — |
callsThe calls to replay. Defaults to the surface's history. | AgentToolCall[] | — |
controlLogChanges of control. Defaults to the surface's log. | ControlEvent[] | — |
formatTimeShows each step's clock time, formatted as you choose. Off by default: a locale-formatted time differs between server and browser, which breaks hydration, so by default only the time since the run began is shown. | (ms: number) => string | — |
heading | string | "Replay" |
includeWhich steps to show — for instance, leave out reads. | (step: ReplayStep) => boolean | — |
intervalMilliseconds per step while playing. | number | 1500 |
renderStepMore to show for a step, such as a snapshot your app recorded. | (step: ReplayStep) => ReactNode | — |
Plus every attribute of <section> except children.
9/10
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — fails
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — passes
- No fixed widths — passes