CycleRail
A recurring loop of stages that does not end: a track of 2 to 8 stages, the live stage marked, and the return from the last stage to the first drawn with the cycle count on it
import { CycleRail } from "@danagraph/design-system/patterns"Props
| Prop | Type | Default | Description |
|---|---|---|---|
stagesreq | { id: string; label: string; description?: string }[] | — | 2 to 8 stages in loop order |
currentStageIdreq | string | — | id of the live stage; if it matches no stage nothing is marked and the summary shows the cycle only |
cyclereq | number | — | 1-based count of the cycle in progress |
label | string | "Stage cycle" | Accessible name of the group |
orientation | 'horizontal' | 'vertical' | "horizontal" | Vertical stacks the stages and runs the return up the left side; use it at phone width |
stagesrequired{ id: string; label: string; description?: string }[]Default —2 to 8 stages in loop order
currentStageIdrequiredstringDefault —id of the live stage; if it matches no stage nothing is marked and the summary shows the cycle only
cyclerequirednumberDefault —1-based count of the cycle in progress
labelstringDefault "Stage cycle"Accessible name of the group
orientation'horizontal' | 'vertical'Default "horizontal"Vertical stacks the stages and runs the return up the left side; use it at phone width
This component was designed to express:
Explore Related
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.
SWIFT / ACH / SEPA payment lifecycle stepper with per-step timestamps, actor labels, and reference IDs
Agentic task completion tracker for first-run onboarding. Items carry status, agent attribution, timestamps, and provenance links. Blocked items surface human-action requirements.