# 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](https://unseenui.com/components/execution-timeline/).

## Installation

```bash
npm install @stackunseen/ui
```

## Usage

```tsx
import { AgentLanes } from '@stackunseen/ui/conversation-flow';
import '@stackunseen/ui/styles.css';
import '@stackunseen/ui/conversation-flow.css';

<AgentLanes lanes={lanes} now={clock} onSelect={open} />
```

## All props

| Prop | Type | Description |
| --- | --- | --- |
| `label` | `string` |  |
| `lanes` (required) | `readonly AgentLane[]` |  |
| `locale` | `string` |  |
| `now` | `string` | The host clock; running tasks reach it. |
| `onSelect` | `((taskId: string) => void)` |  |
| `selectedId` | `string \| null` |  |
| `timeZone` | `string` |  |
| `window` | `{ from: string; to: string; }` | The time span drawn; defaults to the earliest start and the latest end or now. |

## Keyboard

Each block is a button in reading order; Enter selects it.

## Works with

[RunBoard](https://unseenui.com/components/run-board/), [SubagentTree](https://unseenui.com/components/subagent-tree/), [ExecutionTimeline](https://unseenui.com/components/execution-timeline/), [WorkflowGraph](https://unseenui.com/components/workflow-graph/), [AttentionQueue](https://unseenui.com/components/attention-queue/), [RunCompare](https://unseenui.com/components/run-compare/), [ContextBar](https://unseenui.com/components/context-bar/), [Plan](https://unseenui.com/components/plan/), [AgentSteering](https://unseenui.com/components/agent-steering/), [CostLedger](https://unseenui.com/components/cost-ledger/), [ContextWindowMeter](https://unseenui.com/components/context-window-meter/), [MemoryPanel](https://unseenui.com/components/memory-panel/)

Page: https://unseenui.com/components/agent-lanes/