Agent lanes

Parallel agents side by side, each with its status, current step and streaming output. Compare lines up their results; Use this one picks the winner.

Markdown

On this page

Three agents try three fixes in separate worktrees. Compare them, then use one.

Installation

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/agent-lanes.json

Usage

tsx

import { AgentLanes } from "@/components/ui/chatcn/agent-lanes"

<AgentLanes
  lanes={attempts}
  winnerId={winner}
  onPick={(id) => apply(id)}
  onUndoPick={() => setWinner(undefined)}
/>

Give every lane the same metrics in the same order. Compare lines the rows up and marks the best score per row; set better: "higher" where more is better.

Examples

Compare

Two models answer the same question. Compare marks the best value per row.

Props

Prop	Type	Notes
`lanes`	`AgentLane[]`	`{ id, name, monogram?, description?, status, step?, output?, error?, startedAt?, durationMs?, metrics? }`
`status`	`spawning \| running \| waiting \| done \| failed \| discarded`
`winnerId`, `onPick`, `onUndoPick`		Use this one and Undo
`compare`, `defaultCompare`, `onCompareChange`	`boolean`
`laneHeight`	`number \| string`	Outputs scroll inside. Default 26rem

Keyboard

Key	Action
`Tab`	Compare, then each lane's output and Use this one
Arrow keys in an output	Scroll it

Accessibility

Lanes are articles named by their lane. Monograms identify lanes without color.
Best values carry a check and the words Best for screen readers.
Outputs follow streaming text only while scrolled to the bottom, and never fight an upward scroll.

Motion

The step line crossfades with a 4 px rise. Picking a winner rings it in ink and dims the others over 200 ms.
Streaming text appends with no per-token effects; the square caret marks where the model writes.