Agent Relay Workspaces

Stage a multi-agent workflow as a relay race. Across the top is the relay track: the current agent is highlighted and finished agents get a check. The center stage shows the current agent's workspace, with its step log typed out line by line and a progress ring filling on the right. When it finishes, the stage flips in 3D to the next agent while an "output capsule" flies from the old card to the next avatar on the track, then drops into the new card's input slot. After the last leg, a summary card flips in and collects everyone's output. Useful on product pages that explain how a task is split up and who picks up which part.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<AgentRelayWorkspaces/>

    </div>
  );
}

Installation

Usage

import {
  AgentRelayWorkspaces,
  type RelayAgent,
} from "@/components/ui/agent-relay-workspaces";

const agents: RelayAgent[] = [
  {
    id: "collector",
    name: "Collector",
    role: "Data gathering",
    steps: ["Reading transactions from 3 accounts…", "Merging October line items", "Exporting the transaction sheet"],
    output: "286 transactions",
  },
  {
    id: "analyst",
    name: "Analyst",
    role: "Analysis",
    steps: ["Computing revenue and margin", "Comparing with last month", "Producing 2 charts"],
    output: "Revenue analysis + 2 charts",
  },
];

<AgentRelayWorkspaces
  agents={agents}
  result={<p>Month-end report ready: 4 pages, 2 charts</p>}
  onComplete={() => console.log("Relay finished")}
/>;

Props

RelayAgent

RelayAgent and AgentRelayWorkspacesProps are also exported as named types.

How it works

• Rhythm: a new log line appears every lineInterval. Its status dot spins until the next line appears, then turns into a check. Once every line is done the progress ring is full, and the component waits handoffDelay before handing off. One agent takes roughly (lines + 1) × lineInterval + handoffDelay
• Flip transition: the stage has perspective: 1200px. The old card rotates rotateY 0 → -90° (ease-in) and the new card 90° → 0 (ease-out), split 280:320. The total duration is read from the CSS variable --wb-agent-relay-flip (default 600ms) so themes can override it
• Handoff: the output capsule uses a shared layoutId animation (spring stiffness 260, damping 26). It flies from the bottom of the old card to the slot under the next avatar on the track, then drops into the new card's "Input" area once the new card has flipped in. Why three stages: a layoutId can only live in one place at a time, so switching stage by stage gives clean start and end points
• Look back: clicking a finished agent on the track shows its workspace (in the finished state) and pauses autoplay; press Play, or click the current agent, to return to the running workspace
• Controlled mode: pass index and onIndexChange to own which leg is running; when the index changes from outside, that agent's progress starts from the beginning
• CSS variables: --wb-agent-relay-flip (total flip duration), --wb-agent-relay-accent (accent color), --wb-agent-relay-line (log and progress ring transition duration, written from lineInterval)

Accessibility

• The relay track is a role="tablist"; each agent and the summary is a role="tab", with aria-selected marking the workspace on display. Arrow Left/Right, Home and End move between selectable tabs (roving tabindex); agents whose turn has not come yet are aria-disabled
• The workspace is a role="tabpanel" linked to its tab with aria-labelledby; the log is role="log" with aria-live="polite", and each line carries screen reader text for done / in progress / waiting
• Pause/Play and Restart buttons are provided (WCAG 2.2.2 Pause, Stop, Hide); all buttons are type="button" with a focus-visible ring
• The flipping card uses backface-visibility: hidden, so its mirrored back face never shows
• When the system "reduce motion" setting is on, workspaces switch with a short crossfade instead of a 3D flip, the output capsule appears directly in the new card instead of flying, and the log shows every step at once (status dots become static icons that still tick to checks at the normal rhythm)