Swimlane Run View React component
See a multi-bot run on one timeline: each bot in its own lane, who waited on whom, a replay you can scrub, and the critical path that set the finish time.
About the Swimlane Run View component
Swimlane Run View shows what happens when several bots work at once. Each bot gets a lane, and thin lines show where one had to wait for another.
Drag across the chart or press Replay to watch the run unfold, with a line below saying what each bot was doing at that moment. Critical path picks out the chain of work that set the finish time, which is where speeding up actually helps.
When to use it
Use it to debug slow multi-agent runs, workflows and pipelines.
It suits runs with a few lanes. With dozens of parallel jobs, group them first.
Installation
Add the Swimlane Run View component to your project with the shadcn CLI. It lands in components/swimlane-run-view.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/swimlane-run-viewProps
<SwimlaneRunView /> accepts 6 props, all optional. It also accepts the usual <section> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| title | string | "Launch brief run" |
| subtitle | string | "Four bots working side by side." |
| lanes | { id: string; name: string }[] | DEFAULT_LANES |
| spans | { id: string; lane: string; label: string; start: number; end: number; kind?: RunSpanKind; after?: string[] }[] | DEFAULT_SPANS |
| replayMs How long a replay takes, in milliseconds. | number | 4000 |
- theme"dark" | "light"Default: "dark"
- titlestringDefault: "Launch brief run"
- subtitlestringDefault: "Four bots working side by side."
- lanes{ id: string; name: string }[]Default: DEFAULT_LANES
- spans{ id: string; lane: string; label: string; start: number; end: number; kind?: RunSpanKind; after?: string[] }[]Default: DEFAULT_SPANS
- replayMs
How long a replay takes, in milliseconds.
numberDefault: 4000
Swimlane Run View FAQ
- What is the critical path?
- The chain of steps that decided when the run finished. Making anything else faster wouldn't change the end time.
- How is it worked out?
- From your data. It walks back from the last step through whichever dependency finished latest.
- Can I use the keyboard?
- Yes. Focus the chart and use the arrow keys, Home and End.
- What about reduced motion?
- Replay jumps straight to the end, and dragging still works.
