Subagent Status Card

When a main agent fans work out to several subagents, this card lists each one's status indented beneath the main message. The header row holds the status icon, name, task and elapsed time / token count; below it sits a 2px progress bar (an indeterminate sweep when no progress is given) and the current step, which cross-fades as it changes. Click the header to expand the subagent's streamed output, which scrolls within a max height and sticks to the bottom while you are there; once done with a summary, the progress bar fades out and a one-line summary takes its place. Wrap cards in SubagentStatusCard.Group to share one connector line on the left and stagger them in.

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">

<SubagentStatusCard/>

    </div>
  );
}

Installation

npx webberui@latest add https://webberui.com/r/subagent-status-card.en.json

Usage

import { SubagentStatusCard } from "@/components/ui/subagent-status-card";

<SubagentStatusCard.Group aria-label="Market research subagents">
  <SubagentStatusCard
    name="Researcher"
    task="Search the past year of bubble tea market coverage"
    status="running"
    progress={0.4}
    currentStep="Reading document 3"
    output={"- Store openings slowed\n- Growth shifted south"}
    elapsed={12}
    tokens={1240}
  />
  <SubagentStatusCard
    name="Writer"
    task="Produce an 800-word summary"
    status="done"
    summary="Wrote an 812-word summary with 3 key points"
  />
</SubagentStatusCard.Group>

Props

SubagentStatusCard.Group

How it works

• The progress bar advances with a scaleX spring tuned by stiffness / damping; it always fills when status is done and empties when queued.
• Indeterminate state: when running with no progress, a 40%-wide highlight sweeps back and forth every 1.4 seconds.
• The output area caps at 240px and scrolls internally; while you sit at the bottom new content sticks to it, and scrolling up to read is never yanked back.
• When uncontrolled and the user has not toggled yet, the expanded state follows status — switching to failed expands automatically so the error is visible at a glance.
• The root sets --wb-subagent-status-card-duration, used by the colour and chevron transitions, so you can override it globally.
• Each depth level indents 16px; SubagentStatusCard.Group draws one shared trunk line on the left, each card joins it with a short tick, and cards enter 60ms apart (opacity and x offset).

Accessibility

• Each card is role="group" with an aria-label describing its state, e.g. "Subagent: Researcher, running, 40% complete"
• When there is output, the header is a button with aria-expanded and aria-controls pointing at the output region; it is reachable with Tab, toggles with Enter / Space, and shows a focus-visible ring
• The progress bar is role="progressbar" with aria-valuenow; in the indeterminate state the value is omitted and aria-valuetext says it is in progress
• Status changes are announced through an aria-live="polite" region; connector lines and decorative icons are aria-hidden
• When the user has enabled reduce motion, the progress bar jumps into place, the indeterminate sweep becomes a static bar, the status icon does not pop, the output appears instantly, and the Group does not stagger