RunLifecycleRail

stable

Vertical rail rendering one AG-UI run as lifecycle phases: RunStarted, StepStarted/StepFinished segments, and a terminal cap (finished/interrupt/error). Supports one level of nested child runs (parentRunId concept). Composes the AgentTimeline track language with TaskStateBadge-consistent colors.

Orchestration/Storybook ↗

import { RunLifecycleRail } from "@danagraph/design-system/patterns"

RUN STARTEDrun_demo_0012026-07-04 14:02:00.000

STEP DONEfetch_statements2026-07-04 14:02:09.000

STEP DONEnormalize_transactions2026-07-04 14:02:31.000

STEP ERRORmatch_open_invoices2026-07-04 14:02:31.000

RUN ERROR

CHILD RUN STARTEDrun_demo_001_child_a

STEP DONEresolve_counterparty_aliases2026-07-04 14:02:19.000

STEP DONEdedupe_reference_ids2026-07-04 14:02:24.000

RUN FINISHED

Loading demo…

Props

Prop	Type	Default	Description
`runId`req	`string`	—	Run identifier from the AG-UI RunStarted event.
`steps`req	`Array<{ name: string; status: 'started' \| 'finished' \| 'error'; startedAt?: string; finishedAt?: string }>`	—	Steps observed so far, in event order.
`terminal`	`'finished' \| 'interrupt' \| 'error'`	—	Terminal run outcome — omit while the run is still in flight.
`startedAt`	`string`	—	ISO timestamp of the RunStarted event.
`childRuns`	`Array<{ runId: string; steps: RunStep[]; terminal?: 'finished' \| 'interrupt' \| 'error' }>`	—	Nested child runs (one level, AG-UI parentRunId concept), rendered indented.

runIdrequired

Type stringDefault —

Run identifier from the AG-UI RunStarted event.

stepsrequired

Type Array<{ name: string; status: 'started' | 'finished' | 'error'; startedAt?: string; finishedAt?: string }>Default —

Steps observed so far, in event order.

terminal

Type 'finished' | 'interrupt' | 'error'Default —

Terminal run outcome — omit while the run is still in flight.

startedAt

Type stringDefault —

ISO timestamp of the RunStarted event.

childRuns

Type Array<{ runId: string; steps: RunStep[]; terminal?: 'finished' | 'interrupt' | 'error' }>Default —

Nested child runs (one level, AG-UI parentRunId concept), rendered indented.

semantic type border surface space

Design Rationale

This component was designed to express:

View all principles →

Explore Related

AgentTimeline→

Chronological log of agent actions with status filtering

TaskStateBadge→

Badge for the nine A2A protocol TaskStates (submitted, working, input-required, auth-required, completed, failed, canceled, rejected, unknown). Extends the StateBadge anatomy with protocol-grouped semantic colors; exports a taskStateGroup helper for branching on active/interrupted/terminal.

A2AHandoff→

Agent-to-agent task handoff visualization with protocol steps

StatusDot→

Colored dot indicating idle, active, pending, error, or completed state

Was this helpful?