Agent Trace Timeline

Agent steps as a waterfall: time, tokens, cost, inputs and outputs with secrets redacted. Pro · AI chat and agents › Agents and reasoning

What an AI agent did, step by step: plans, tool calls, retrievals and messages on a waterfall, with an inspector for the selected step (timing, tokens, cost, masked input and output, retry). Shows only summaries the agent shares and visible tool traces — never hidden reasoning.

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add agent-trace-timeline

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { AgentTraceTimeline } from 'valyro-ui-pro';

Props

Prop	Type	Default
`events` *	`AgentTraceEvent[]`		Steps of the run in any order of arrival; children follow their `parentId`. Append to it while streaming.
`selectedId`	`string \| null`		Step shown in the inspector. `null` shows none.
`defaultSelectedId`	`string \| null`		Initial step when uncontrolled. Default: the first failed step, else the running one, else the first.
`onSelectedIdChange`	`(id: string \| null) => void`		Called with the step the user picks (click or arrow keys).
`onRetry`	`(event: AgentTraceEvent) => void`		Adds Retry to failed steps (unless the step sets `retryable: false`).
`redactSecrets`	`boolean \| RedactRule`	`true`	Masks secrets in inputs and outputs: keys like `token`, API-key-shaped strings, and your own rule. Default true.
`renderOutput`	`(event: AgentTraceEvent) => ReactNode`		Replaces the built-in output view (text, JSON or Markdown) of a step.
`live`	`boolean`	`false`	The run is still going: shows a badge and announces new steps to screen readers.
`demo`	`boolean`	`false`	Marks the trace as sample data ("Demo data" badge) so it is never taken for a real run.
`loading`	`boolean`	`false`	The trace is loading: skeleton rows.
`error`	`ReactNode`		Loading failed: shown instead of the steps.
`title`	`ReactNode`		Heading. Default: `labels.title`.
`headingLevel`	`2 \| 3 \| 4 \| 5`	`3`	Level of the heading (default 3); the step title in the inspector takes the next level.
`height`	`CSSProperties['height']`		Height of the whole component; the list and the inspector scroll inside it. Default: content height, list up to 28rem.
`currency`	`string`	`'USD'`	ISO 4217 code of `cost`. Default USD.
`locale`	`string`		BCP 47 locale for numbers and durations; defaults to the ThemeProvider's.
`labels`	`Partial<Omit<AgentTraceTimelineLabels, 'kinds' \| 'statuses'>> & { kinds?: Partial<Record<AgentTraceKind, string>>; statuses?: Partial<Record<AgentTraceStatus, string>>; }`		Overrides for the built-in English text; keys left out keep their defaults.

Related components

Chain of Thought — Model reasoning steps
Tool Call — Tool call with approval
Agent Plan — Live agent task plan
Agent Approval Gate — Agent action approval: risk, diff, explicit consent and a decision log
Memory Panel — What the assistant remembers
AI Chat Window — AI chat window
Chat Message — Messages with streaming output
Message Branches — Message versions and a conversation branch tree
Streaming Text — Smooth token streaming
Markdown Preview — Rendered Markdown
Response Feedback — Answer rating and a rubric for reviewers
Prompt Composer — Prompt field with attachments

Previous: Agent Plan · Next: Agent Approval Gate · All AI chat and agents