子代理狀態卡

主代理把工作分派給多個子代理時，用這張卡片在主訊息下方以縮排巢狀列出每個子代理的狀態。標頭一列放狀態圖示、名稱、任務與已執行時間／token 數；下方是 2px 細進度條（沒給進度時改為不確定掃光）與交叉淡接的目前步驟。點標頭可展開子代理的串流輸出，最大高度內捲動並在底部時自動貼底；完成且有摘要時進度條淡出、改顯示一行摘要。搭配 SubagentStatusCard.Group 可讓多張卡共用左側連接線並依序進場。

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

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>
  );
}

安裝

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

使用

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

<SubagentStatusCard.Group aria-label="市場調查子代理">
  <SubagentStatusCard
    name="資料蒐集員"
    task="搜尋近一年的手搖飲市場報導"
    status="running"
    progress={0.4}
    currentStep="正在讀取第 3 份文件"
    output={"・展店放緩\n・重心南移"}
    elapsed={12}
    tokens={1240}
  />
  <SubagentStatusCard
    name="撰稿員"
    task="產出 800 字摘要"
    status="done"
    summary="完成 812 字摘要，含 3 個重點"
  />
</SubagentStatusCard.Group>

Props

SubagentStatusCard.Group

細節

• 進度條以 scaleX spring 推進，stiffness／damping 可調；status 為 done 時一律補滿，queued 時歸零。
• 不確定狀態：running 且沒有 progress 時，一條 40% 寬的亮條以 1.4 秒往返掃光。
• 輸出區最大高度 240px、內部捲動；使用者停在底部時新內容會自動貼底，往上捲閱讀時不會被拉回。
• 非受控模式下，使用者尚未手動切換前，展開狀態跟著 status 走——轉為 failed 時自動展開讓錯誤一眼可見。
• 外層寫入 --wb-subagent-status-card-duration，色彩與 Chevron 旋轉過渡都使用它，可在全域覆寫。
• 每層 depth 左縮排 16px；SubagentStatusCard.Group 在左側畫一條共用主幹線，各卡以短橫線接上，子卡間隔 60ms 依序進場（opacity 與 x 位移）。

可及性

• 每張卡為 role="group"，aria-label 完整描述狀態，例如「子代理：資料蒐集員，執行中，進度 40%」
• 有輸出時標頭是 button，帶 aria-expanded 與指向輸出區的 aria-controls，可用鍵盤 Tab 聚焦、Enter／Space 切換，聚焦時有 focus-visible 外框
• 進度條為 role="progressbar" 並提供 aria-valuenow；不確定狀態時省略數值、以 aria-valuetext 說明進行中
• 狀態變化透過 aria-live="polite" 區域宣告；連接線與裝飾圖示皆 aria-hidden
• 使用者系統開啟「減少動態效果」時，進度條直接到位、不確定掃光改為靜態條、狀態圖示不彈跳、輸出區直接出現、Group 不做依序進場