RunLifecycleRail
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.
import { RunLifecycleRail } from "@nodus/design-system/patterns"Props
| Prop | Type | Default | Description |
|---|---|---|---|
runIdreq | string | — | Run identifier from the AG-UI RunStarted event. |
stepsreq | 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. |
runIdrequiredstringDefault —Run identifier from the AG-UI RunStarted event.
stepsrequiredArray<{ name: string; status: 'started' | 'finished' | 'error'; startedAt?: string; finishedAt?: string }>Default —Steps observed so far, in event order.
terminal'finished' | 'interrupt' | 'error'Default —Terminal run outcome — omit while the run is still in flight.
startedAtstringDefault —ISO timestamp of the RunStarted event.
childRunsArray<{ runId: string; steps: RunStep[]; terminal?: 'finished' | 'interrupt' | 'error' }>Default —Nested child runs (one level, AG-UI parentRunId concept), rendered indented.
This component was designed to express:
Explore Related
Chronological log of agent actions with status filtering
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.
Agent-to-agent task handoff visualization with protocol steps
Colored dot indicating idle, active, pending, error, or completed state