brand-ui — AgentTimeline

import { AgentTimeline } from "@elabs-ai/components-ai";

Install

npm install @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-ai

Skipping the @source line is the most common first failure: Tailwind does not scan node_modules, so every component renders unstyled. The one-time wiring

Prompt for your coding agent

Paste it into Claude Code, Cursor, Codex or any other coding agent. Text in [brackets] is yours to fill in.

Add the brand-ui AgentTimeline component (from @elabs-ai/components-ai) to this project.

1. Read https://elabs-ai.com/llms.txt first: it maps every package and the rules. If you can use MCP servers, connect https://elabs-ai.com/mcp and use its search, docs and tokens tools. If not, run the same lookups in the terminal: `npx -y @elabs-ai/components-cli search "<what you need>"` and `npx -y @elabs-ai/components-cli docs <Component>`.
2. Look AgentTimeline up before writing code: `npx -y @elabs-ai/components-cli docs AgentTimeline` prints its real props, variants, what it pairs with and what to avoid.
3. If @elabs-ai/components-ai is not installed yet: `pnpm add @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-ai` (or `npm install @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-ai`). If this is the first brand-ui package in the project, wire it once: import `@elabs-ai/components-tokens/styles.css` plus the `themes/light.css` and `themes/dark.css` stylesheets in the CSS entry, add one Tailwind `@source` line per installed @elabs-ai package (Tailwind does not scan node_modules, so without it everything renders unstyled), and wrap the app root in `ThemeProvider` from `@elabs-ai/components-tokens`.
4. Use it here: [the screen or file, and what it should show]
5. Rules: use only @elabs-ai/components-* components and the semantic tokens — no raw colours, no raw font sizes, no arbitrary Tailwind values. Look up each component's real props with the docs tool before you use it; never guess a prop.
6. Done means: the typecheck passes, `npx -y @elabs-ai/components-cli audit src --strict` reports nothing, and you have opened the app and looked at every screen you touched in the light and the dark theme.

Avoid

Hand-rolling a connector + status-map rail — reuse the @elabs-ai/components-ui Timeline (the timeline-fork gate blocks a second one).
Reaching for a border-s-* accent rail to show step status — AgentTimeline is a thin TimelineRoot/TimelineItem wrapper; status is the node dot (plus the StatusBadge), never a left rail.
Encoding step status by color alone — pair the color with an icon or label.
Rendering a blank rail while the run is starting — show the not-ready state, never an empty region.

Works with

Contains

AgentStep
Checkpoint

Pairs with

Plan
Task
Tool

Examples

2 live examples

Inspect-only Tool as a step

API

`AgentTimeline`

Prop	Type	Description
`variant`	`TimelineVariant`	`"status"` (default): every node carries the canonical 7-state `Status` — a process rail (runs, approvals, steps). `"plain"`: a CHRONOLOGY — nodes are neutral marks with no status semantics (milestones, releases, a history); the one `current` item gets the accent node and `aria-current="step"`. @default "status"
`orientation`	`TimelineOrientation`	`"vertical"` (default): the rail runs down the start edge. `"horizontal"`: items sit side by side on one connector, node on top. `"responsive"`: vertical below the root’s `@3xl` container width, horizontal from there — the milestone strip that stacks on a phone. @default "vertical"
`nodeSize`	`TimelineNodeSize`	`"dot"` (default): a 12px mark. `"badge"`: a 32px disc that can carry an item's `node` content — a step number, a glyph — for a “how it works” rail. The item padding and connector move with it. @default "dot"

Also accepts: TimelineRootProps

`AgentStep`

Prop	Type	Description
`icon`	`LucideIcon`	Optional leading concept glyph on the title row (Lucide).
`name`required	`ReactNode`	What the agent did — the step's title (`text-body`).
`summary`	`ReactNode`	The business summary line under the name (`text-meta`), not JSON.
`status`	`Status`	The canonical execution status (closed 7-state enum). Drives the rail node AND the `StatusBadge`. `skipped` is the agent-step-only state with no SDK source (research 10 §B.1).
`hideBadge`	`boolean`	Drop the inline `StatusBadge` (the rail node still carries the status color). For quiet prose rails — e.g. the `ChainOfThought` alias — where a badge per step would shout.
`children`	`ReactNode`	Rich detail under the node (e.g. a `ToolDetails` disclosure, results).
`current`	`boolean`	`plain` variant only: this is the “now” step — accent node, `aria-current="step"`, and an sr-only “(current)” after the title.
`label`	`ReactNode`	Leading meta (a date, a version) that sits in the label gutter beside the node at `@2xl`+ when vertical, and above the title otherwise.
`node`	`ReactNode`	Content for the node when the root is `nodeSize="badge"` — a step number, a glyph. Decorative (the disc is `aria-hidden`): put the step's number in the title too if it matters (“Step 1: …”). Ignored by a `dot` root.
`timestamp`	`ReactNode`	Right-aligned meta (e.g. a date) on the title row.
`detail`	`ReactNode`	Rich block content under the title/description, indented with the rail — the slot composing consumers (e.g. `@elabs-ai/components-ai`'s `AgentStep`, #192) interleave per node. Block-level, so it must NOT ride the inline title slot (`children`).

Also accepts: Omit<TimelineItemProps, "children" | "description">

`Checkpoint`

Also accepts: HTMLAttributes<HTMLDivElement>

Theming

The tokens each state resolves to. Change the token and every theme follows.

State Token

status the rail NODE, owned by the composed @elabs-ai/components-ui Timeline (NODE_STYLE): pending border-border bg-background · running border-info bg-info ring-2 ring-info/25 · complete border-success bg-success · awaiting-approval border-warning bg-warning ring-1 ring-warning/40 · failed border-destructive bg-destructive ring-4 ring-destructive/20 · denied border-border bg-muted border-dashed · skipped border-border bg-muted border-dotted (every status carries a non-hue cue — a ring width or a border style — so it survives greyscale, #387)

State	Token
status	the rail NODE, owned by the composed @elabs-ai/components-ui Timeline (NODE_STYLE): pending border-border bg-background · running border-info bg-info ring-2 ring-info/25 · complete border-success bg-success · awaiting-approval border-warning bg-warning ring-1 ring-warning/40 · failed border-destructive bg-destructive ring-4 ring-destructive/20 · denied border-border bg-muted border-dashed · skipped border-border bg-muted border-dotted (every status carries a non-hue cue — a ring width or a border style — so it survives greyscale, #387)