AgentLanes
Where every agent is right now: a lane per agent on one time axis, with the hand-offs drawn between lanes.
- Use it for
- Several agents working at once, on one time axis, with hand-offs.
- Not for
- The steps inside one run. Try ExecutionTimeline.
AgentLanes preview
Loading example…
Installation
npm install @stackunseen/uiimport { AgentLanes } from '@stackunseen/ui/conversation-flow';@stackunseen/ui/styles.css and @stackunseen/ui/conversation-flow.cssUsage and props
Import this component from @stackunseen/ui/conversation-flow. Load @stackunseen/ui/styles.css first, then @stackunseen/ui/conversation-flow.css.
Start and end times come from your server; a task without an end reaches the host clock. A hand-off is drawn only when both tasks are on the board. The same tasks are in a hidden table.
Supported inputs
This is the public signature used by this example. Open Code to see how the values and callbacks fit together.
lanes: { agent, tasks: { id, title, state, startedAt, endedAt?, handoffTo?, cost? }[] }[] · now? · window? · selectedId? · onSelect? · label?All props
Loading…
For your coding agent
Give the agent this page instead of a screenshot. The prompt wraps the page with the install and import lines and the rule that your server, not a click, completes an action.
- Contract
- lanes: { agent, tasks: { id, title, state, startedAt, endedAt?, handoffTo?, cost? }[] }[] · now? · window? · selectedId? · onSelect? · label?
- Keeps honest
- Start and end times come from your server; a task without an end reaches the host clock. A hand-off is drawn only when both tasks are on the board. The same tasks are in a hidden table.
- MCP
read_component "AgentLanes"on the docs endpoint
Keyboard and customization
Keyboard
Each block is a button in reading order; Enter selects it.
Customization
Change shared colors, spacing, corners and icons with the theme. Use the component's supported props to adapt its content and layout. Customization guide and Theme Studio