affectUI Agent Tree 爆紅：多個 AI 代理誰啟動誰，狀態與費用怎麼看？
affectUI Agent Tree 以樹狀介面呈現 AI 代理與子代理，原作者示範在 X 引起討論。本文依官方文件說明六種狀態、分支費用與等待決定的互動，區分樹狀圖、時間線和工作計畫的用途，並整理 Pro 元件與免費開源項目的差別，以及接上真實資料時要注意的事。
affectUI Agent Tree 想解決的問題很直接：十個 AI 代理同時工作時，使用者除了想知道誰還在跑，也想知道它是被誰叫出來的。
原作者 Flo 在 2026 年 10 月 19 日於 X 展示這個樹狀元件，貼文獲得超過 3,000 次按讚。畫面把總代理與子代理連起來，讓分工關係有一個共同入口。
代理是能使用工具完成工作的 AI，子代理則是它為了處理部分工作而啟動的另一個執行者。當子代理又有自己的分工，單一聊天紀錄就很難看出全貌。
但一張會動的樹狀圖，還不等於系統已經知道所有工作狀態。元件負責顯示，誰開始、何時完成與花費多少，仍需要後端提供資料。
因此它適合已經有多代理執行流程的產品團隊，用來改善操作與追蹤。只有單一助理、幾個固定步驟的應用，未必需要增加這層介面。
要判斷這個設計能不能幫上忙，先看樹狀關係回答了哪個問題，再決定要把哪些事件接進來。
affectUI Agent Tree 如何呈現「誰啟動誰」？
樹狀圖把發動工作與被發動的工作接在一起，因此最適合看階層分工。官方 Agent Tree 文件把它定位為總代理與多層子代理的執行概覽。
假設總代理負責做一個網站，另外叫出研究者與寫程式的代理。研究者又請另一個代理查資料，這些關係便可以逐層展開。
使用者看到研究分支仍在跑，就能沿著分支往下找，確認是哪一部分沒有完成。這比在混合訊息裡搜尋名字，更容易理解工作關係。
但發動關係不等於時間順序。研究者和寫程式的代理可以同時開始，因此樹的上下層不代表某個動作一定先於另一個動作結束。
它也不必然是資料流圖。寫程式的代理可能讀取研究結果，但兩者若都由總代理啟動，在樹裡可能是同一層，不能只靠連線推論資料怎麼傳。
所以產品可以把樹當成入口，點選後再開詳細紀錄。概覽回答「哪個分支」，紀錄再回答「做了什麼」，兩種資訊各有清楚用途。
分支收合，能減少哪些閱讀負擔？
官方元件允許把分支折成一行。當一段研究已經完成，使用者可以先收起細節，把注意力留給正在執行或需要決定的工作。
收合後仍要保留足夠摘要，才能避免重要錯誤被藏起來。例如分支裡有失敗或待回覆項目，總覽應該能讓使用者看出還有事情要處理。
對多層工作而言，這使展開與收合成為資訊管理。使用者不必同時閱讀所有卡片，也能沿著問題逐步追到需要處理的位置。
六種狀態，為何不能只用「進行中」與「完成」？
等待資源、等待人類與執行失敗，需要的處理不同。若全部顯示成進行中，使用者很難判斷應該繼續等，還是自己採取行動。
官方完整文件列出六種狀態，並把等待使用者的情況顯示成「Needs you」。以下整理成工作上的差別。
| 狀態 | 代表的工作情況 | 使用者需要知道什麼 |
|---|---|---|
| queued | 尚在排隊 | 是否仍會開始 |
| running | 正在執行 | 目前任務與時間 |
| waiting | 等待決定 | 要回答哪個問題 |
| done | 執行結束 | 產物與完成條件 |
| failed | 執行失敗 | 原因與可採取動作 |
| stopped | 已停止 | 是否有未完成結果 |
表格裡的完成，仍需由產品自己的邏輯定義。例如程式代理回報完成，可能只是修改檔案結束，測試與部署還屬於另一段工作。
因此顯示狀態時，最好和任務範圍一起呈現。「完成研究摘要」會比單獨一個勾勾更清楚，因為使用者知道這個結果可以接到哪一步。
等待狀態則應提供具體問題。若需要選擇素材，畫面就呈現可比較的選項，讓使用者不必回到長篇聊天找出它為什麼停下。
失敗也需要區分能否重試。工具暫時沒有回應，和輸入資料不完整，處理方法不同，因此只放一個「再試一次」按鈕可能無法解決問題。
這些差別讓狀態不只是視覺裝飾。當使用者看完能知道下一步做什麼，介面才真正降低多工負擔。
分支費用如何加總，才不會把錢算兩次？
費用必須先定義是單一代理自己的花費，還是包含所有子代理的總額。兩種口徑混用，樹狀圖越完整，反而越容易重複計算。
官方文件說明，傳入每個代理的 cost 是它自己的費用，有子節點的卡片再顯示整個分支。這是資料契約，也就是前後端對欄位意義的共同約定。
例如總代理自己花了 0.20 美元，兩個子代理各花 0.30 與 0.40 美元，整個分支便是 0.90 美元。這是說明用數字，並非產品定價。
如果後端已把 0.90 當成總代理自己的費用，再把兩個子代理交給元件加總，就會算成 1.60。錯誤來自欄位口徑，而非畫面動畫。
概覽數字與帳單，還需要對照哪些差異？
模型呼叫可能有尚未回傳用量的時間差，因此執行中的成本有時只是暫時值。介面若顯示過於精確，容易讓人把估計當成最後帳單。
產品可以清楚區分已確認費用與待結算部分。這是接資料時的設計建議，並非元件自動提供所有模型供應商的帳務整合。
重試也可能產生成本。依官方資料設計，失敗後的重試要新增具有獨立識別碼的子節點，並保留原本失敗的紀錄與花費。
只顯示最後一次成功結果，會讓使用者低估整個任務的支出。但把每次重試都當成新的獨立工作，又可能使樹過度複雜。
因此比較不同任務時，可以把最終產出和整次執行成本放在一起看。使用者關心的是完成一件事花多少，而不只是某個瞬間的模型費率。
延伸閱讀：Claude 動態工作流程開放測試：多個代理分工，為何仍需要總預算？
樹狀圖、時間線與工作計畫，應該選哪一種？
介面的選擇應跟著使用者的問題。想找責任分支時適合用樹，想還原先後順序時則需要時間線，兩者不能完全取代。
官方也把 Agent Lanes、Agent Plan 與 Delegate Board 列為不同用途的元件。前者看時間關係，計畫呈現步驟，指派看板則讓使用者主動交付工作。
例如一個助理先整理資料，再產生圖表與輸出報告，使用者最想知道卡在哪一步。這時用清楚的步驟狀態，可能比畫一棵只有單一分支的樹更好讀。
若多個代理反覆互傳結果，問題會轉成「哪個訊息先到」。樹狀圖仍能顯示分工，但需要詳細紀錄補上事件順序。
OpenTelemetry 的追蹤說明提供另一個背景概念：把一次請求拆成有關聯的執行片段，便能沿著關係查出工作在哪裡花時間。
這種追蹤資料不會自動等於產品畫面。工程紀錄可能很細，給使用者看的概覽則應保留會影響判斷的部分，讓兩者能互相連回去。
同一個分支慢，可能有不同原因
子代理執行很久，可能在等待工具，也可能做了大量工作。只有開始與結束時間時，畫面無法直接判斷是哪一種原因。
如果使用者需要診斷，產品就要提供工具呼叫或等待事件。否則應把顯示限制說清楚，避免讓人以為「時間長」一定代表模型效率差。
同樣地，子代理很多也不代表成果一定較好。樹狀圖顯示的是工作組織方式，品質仍要回到產物、驗證與使用者需求。
因此團隊可以先列出介面要回答的三個實際問題，再選元件。若某張卡片上的欄位不會改變使用者下一步，就不必一開始全部放上去。
Agent Tree 是免費開源元件嗎？
Agent Tree 在官方文件標示為 Pro，安裝需要 Pro 存取金鑰。不能因為 affectUI 有公開 GitHub，就把這個元件也描述為免費開源。
affectUI 官方倉庫另有免費項目與 MIT 授權，也清楚說明 Pro 項目不在該倉庫。實際使用應以各項目的標示和適用條款為準。
MIT 是允許使用與修改程式碼的一種開源授權，但適用範圍是被授權的內容。它不會因為出現在同一個品牌網站，就自動涵蓋其他付費元件。
對團隊而言，先確認項目可取得方式，比直接叫代理照貼文安裝更可靠。若沒有 Pro 金鑰，便應先評估官方展示與文件，不把不存在的安裝結果當成完成。
這也適用於媒體素材。原作者公開影片有助於理解互動，但影片出處與程式碼授權是不同資訊，兩者需要分別保留。
接上真實資料前，怎麼做一次小型驗收？
先用固定範例建立三個代理，比立刻連接真實執行系統更容易看出資料口徑。可以包含一個完成、一個執行中，以及一個等待決定的分支。
確認父子關係、狀態與費用都正確，再讓同一個代理從執行中切到等待。它應留在原來位置，讓使用者知道是同一段工作改變狀態。
每次事件最好有穩定識別碼。若重新連線後產生不同名字的重複卡片，使用者會誤以為多開了一個代理，費用也可能跟著重算。
接著檢查頁面重載。伺服器保存的執行資料應能重新建立相同工作概覽，而不是只有頁面一直開著時才看得到完整過程。
互動按鈕則要與後端結果接起來。使用者按下重試後，若後端沒有接受，畫面就不應先把失敗卡片改成正在執行。
最後用鍵盤操作一次，確認分支能展開、卡片能選取，待決定畫面也能離開。官方文件列有鍵盤與輔助技術支援，整合後仍需檢查自己的頁面沒有破壞它。
縮小畫面時，仍要保留可操作的重點
多層卡片在桌面上容易排列，換到手機或窄側欄後，文字與按鈕可能擠在一起。因此測試應使用實際容器寬度，而不只看整個瀏覽器有多大。
若需要水平移動才能看到分支，也要讓使用者知道還有內容。把待決定項目藏在視窗外，會讓人誤以為所有工作都能繼續等待。
動畫則應協助追蹤位置變化。新卡片進來時，使用者能看出它從哪個分支出現，便比單純閃爍更有意義。
但對偏好減少動態效果的人，資訊仍應完整可讀。狀態不能只靠旋轉或顏色表達，文字標籤與清楚焦點也要保留。
因此最後驗收可以分兩輪：先關注資料和互動，再看動態是否幫助理解。這能避免團隊花很多時間調整動畫，卻漏掉使用者最需要處理的等待訊息。
這些步驟能把漂亮展示轉成可靠操作。只有狀態與實際工作一致，樹狀介面才值得成為使用者判斷下一步的依據。
延伸閱讀：Grok Build 教學：多個程式代理同時工作，如何掌握狀態、版本與失敗恢復
affectUI Agent Tree 常見問題
它會替我建立多代理系統嗎？
它是介面元件，負責呈現傳入資料。實際啟動、管理與停止代理，仍由應用程式自己的後端負責。
等待狀態可以直接批准工作嗎？
元件提供互動回呼，應用程式需要接到自己的處理邏輯。按鈕出現不代表業務授權或後端執行已自動完成。
樹上的時間可以當成模型運算時間嗎？
不一定，起訖時間可能包含工具等待。若需要區分運算與等待，後端還要提供更細的事件。
只用一個 AI 助理，也需要這個介面嗎？
若工作主要是單一流程，步驟計畫或時間線可能更清楚。樹狀圖的優勢在多層發動關係，應依使用問題選擇。
先讓分工與資料對得上，再增加動畫
affectUI Agent Tree 適合已有多代理執行資料、想改善總覽的產品團隊。先把身分、狀態與費用口徑接對，才能讓使用者真的看懂誰還在工作。
可以先拿一個小型執行案例，測試展開、等待與重試三種互動。免費訂閱 AI 郵報，持續追蹤 AI 產品介面與代理協作工具的實作方法。
