Agent Fanout

Usage

import { AgentFanout } from "@tulipfarm/sprout/agent-fanout";
import { Globe } from "reicon-react/icons/Globe";
import { ChartLine } from "reicon-react/icons/ChartLine";

<AgentFanout
  task="Choose a vector store for the retrieval stack"
  agents={[
    {
      id: "researcher",
      name: "Researcher",
      icon: <Globe size={16} />,
      task: "Web search",
      result: "Found 18 sources",
      status: "done",
      duration: 3000,
    },
    {
      id: "analyst",
      name: "Analyst",
      icon: <ChartLine size={16} />,
      task: "Benchmarks",
      status: "working",
    },
  ]}
  elapsed={elapsed}
  onStop={stop}
  onRestart={runAgain}
/>

Your app owns the clock. Move each agent's status from queued to working, then to done or failed. Each change sends a pulse in the agent's color: down on working, up on done. The node lights up when the pulse lands.

Set state="done" once the parent has merged the results. The center node turns into a check. After Stop, set state="stopped" and mark the agents that did not finish as stopped.

The footer names the phase from the statuses: Delegating work, Specialists working, Merging results, Composing answer. Pass label to replace it. elapsed is in ms. duration shows on a row once the agent is done, and result replaces its task text.

Failed and stopped

A failed agent shows a red warning node and its result as the reason. Stopped agents fade.

More agents

The graph is drawn with React Flow at a fixed zoom, so text stays full size. Columns share the width. Nodes shrink to fit, and names cut off with an ellipsis. Six agents still fit on a phone.

Nested subagents

Give an agent its own agents and it fans out again, one row per level. Helpers take their parent's color. Leaves share the width, and each parent sits over the middle of its helpers. The details list indents helpers under their parent. Pass defaultOpen to show the list at first.

Accessibility

The graph is decoration and is hidden from screen readers. The Details button says how many agents finished. It opens a list with each agent's name, task, and status. The footer phase is a live status, so changes are read out. The timer is not, so it does not interrupt. With reduced motion, pulses do not run and states change at once. In forced colors mode the lines and nodes use the system text color.

Theme tokens

Agent colors cycle through --sprout-chart-1 to --sprout-chart-5, or come from an agent's color. A finished node draws its check in --sprout-surface on the color. The card uses --sprout-line and --sprout-surface, like Card. The center node uses --sprout-primary. Set --sprout-agent-fanout-trip on the component to change how long a pulse takes (720ms).