Agent Timeline

The process lane of an agent turn, drawn as a connected vertical timeline: reasoning traces, tool calls with their command and output, and approval prompts — each a node on a rail with a smooth height-animated disclosure. It deliberately does not render the assistant's own prose; interim narration and the final answer belong to the communication lane and are rendered as markdown by you, outside the timeline. Purely presentational and copy-free — map your records onto AgentTimelineBlock[] and localize every label yourself.

Import

1import { AgentTimeline } from "@yuhuanowo/yunui/ai";

Basic

Each block is a discriminated union on kind. A reasoning block collapses its trace behind a one-line label; a tool block shows the verb, an optional mono summary, a status glyph, and — when command/output are set — an expandable console.

Tool states & nesting

status drives the node: running spins a loader in the brand tone, done shows a check, error recolors the row and console red. Set indent to nest a row one level in — e.g. a subagent step under the call that dispatched it.

Approval prompts

An approval block renders an inline allow/deny panel and fires onApprove / onReject with the block id. Once decided, pass decision (and decidedLabel) to freeze it into a resolved state.

$ dropdb yunui_staging

Rendering reasoning as markdown

By default reasoning content renders as pre-wrapped plain text. Pass renderContent to plug in a Markdown renderer (e.g. MarkdownRenderer from @yuhuanowo/yunui/content) so lists, code and emphasis format correctly.

1import { MarkdownRenderer } from "@yuhuanowo/yunui/content";
2 
3<AgentTimeline
4  blocks={blocks}
5  renderContent={(text) => <MarkdownRenderer content={text} />}
6/>

Props