代理任務佇列

放在對話側欄或訊息下方，顯示代理接下來要做的事。和固定順序的計畫清單不同，這是一個會持續被消化的佇列：使用者可以拖曳重排、移除排隊中的任務，失敗的任務留在排隊區頂部等待重試。任務分成「執行中」、「排隊中」、「已完成」三段——執行中的列以呼吸脈動提示代理正在工作；任務完成時 Loader 交叉淡接成打勾，停一下後整列滑出、落進「已完成」群組頂端，其餘列以 FLIP 補位。tasks 由父層控制，元件只負責呈現狀態變化。

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

<AgentTaskQueue/>

    </div>
  );
}

安裝

npx webberui@latest add https://webberui.com/r/agent-task-queue.json

使用

import { AgentTaskQueue, type AgentTask } from "@/components/ui/agent-task-queue";

const [tasks, setTasks] = React.useState<AgentTask[]>([
  { id: "read", title: "讀取本週行事曆", status: "running" },
  { id: "sum", title: "撰寫摘要", meta: "預估 2 分鐘", status: "queued" },
  { id: "send", title: "寄送草稿給自己", status: "queued" },
]);

<AgentTaskQueue
  tasks={tasks}
  onReorder={(ids) =>
    setTasks((prev) => [
      ...prev.filter((t) => t.status !== "queued"),
      ...ids.map((id) => prev.find((t) => t.id === id)!),
    ])
  }
  onRemove={(id) => setTasks((prev) => prev.filter((t) => t.id !== id))}
  onRetry={(id) =>
    setTasks((prev) => prev.map((t) => (t.id === id ? { ...t, status: "queued" } : t)))
  }
/>

Props

AgentTask

細節

• 三段結構：running 進「執行中」並固定在最上方、不可拖曳；queued 與 failed 進「排隊中」，failed 置頂並以紅字標示；done 與 cancelled 進「已完成」，cancelled 劃刪除線。
• 完成滑出：狀態變成 done 時，Loader 先以 150ms 交叉淡接成打勾，停 300ms 後該列以 layout 動畫滑進「已完成」群組頂端；群組收合中時則淡出，標頭計數逐位滾動 +1 並閃一下綠底。
• 拖曳只有左側把手能拿起，期間順序暫存在元件內部，放開才呼叫 onReorder；拖曳中如果代理把某項拿去執行，暫存順序會自動排除它。父層不更新 tasks 時，順序會回到原樣（受控資料）。
• 不依賴任何拖曳套件，排序與補位都用 motion/react 的 Reorder 與 layout 彈簧（stiffness／damping）。
• 色彩過渡讀 CSS 變數 --wb-agent-task-queue-duration，預設 150ms，可用 colorDuration 調整。

可及性

• 每一段都是 role="list"，每列為 listitem，並附隱藏的狀態文字（排隊中／執行中／已完成／失敗／已取消）
• 狀態變化以 aria-live="polite" 宣告，例如「已完成：撰寫摘要」
• 鍵盤排序：聚焦拖曳把手後按空白鍵進入移動模式（aria-pressed="true"），上下鍵交換位置，空白鍵放下並呼叫 onReorder，Escape 還原；移動模式中焦點離開會視為放下
• 「已完成」標頭是 button，帶 aria-expanded 與 aria-controls；移除與重試按鈕都有含任務名稱的 aria-label，觸控裝置上移除鈕常駐顯示
• 使用者系統開啟「減少動態效果」時：不呼吸、不旋轉、不滑行，狀態變化直接換位置並以 120ms 淡入淡出；拖曳仍可使用但不放大