TechMoon 科技月球
WordPress、SEO 與 AI 工具實測指南
affectUI Agent Tree 樹狀介面：多代理誰啟動誰與花費看得見
開發者 Flo 在 X 示範 affectUI 的 Agent Tree 樹狀元件，一天累積逾 3,300 讚。這是 Pro 付費項目，安裝需存取金鑰，沒有金鑰只會得到 401；而誰啟動誰、六種狀態與分支費用都要由應用程式自己算好餵進去。本文對照官方文件與 GitHub 倉庫，整理資料口徑、兄弟元件的分工、免費 40 項與付費 70 項的界線，以及 199 美元買斷的價格結構。
用 AI 摘要這篇文章：
2026 年 10 月 19 日，開發者 Flo 在 X 上傳一支 23 秒的示範影片：畫面裡的總代理把工作拆給子代理，子代理又再往下分，每張卡片標著狀態、模型與花費，整棵樹的費用往上滾動加總。這支影片在一天內累積超過 3,300 個讚與 102 則回覆，配文只有一句話：代理樹元件，看誰啟動了誰。示範者正是元件庫 affectUI 的作者本人，這點在解讀熱度時值得放在心裡。
熱鬧背後有兩件事值得先講清楚。Agent Tree 是 affectUI 裡的 Pro 付費項目，想透過指令安裝，先要有買家的存取金鑰，沒有金鑰連檔案都拿不到；而它解決的問題也只在畫面這一層，誰啟動了誰、跑到哪個狀態、花了多少錢，全部要由你的應用程式自己算好餵進去。把它當成多代理監控中樞來期待的人，會發現真正的工作都在元件外面。
一支 23 秒影片帶紅的，是前一天才進庫的元件
時間線可以對得很整齊。affectUI 的 GitHub 倉庫在 10 月 3 日建立，授權 MIT，17 天累積 124 個星標；網站打包檔案裡的時戳顯示，Agent Tree 在台北時間 10 月 19 日凌晨被加進元件庫，當天晚上 Flo 就發布了示範。倉庫的提交紀錄是每日的免費項目自動同步，忙碌的日子一天多筆，同步紀錄停在示範前兩小時，節奏相當緊湊。
影片是一段接近方形的螢幕錄影，來源解析度達 2,384 乘 2,152。內容本身並不複雜：總代理卡片在上，子代理卡片循著連線往下長，新代理出現時連線會從父節點的圓點畫出來，卡片再浮起就位；研究分支收合成一行，把注意力留給還在跑的工作；等待使用者決定的卡片亮出提示，點開是一個有批准、拒絕、重試與關閉選項的對話框。費用的數字在代理還在跑的時候持續跳動，頂欄同時統計代理數、執行中、待決定、失敗與總花費。
這些細節都寫在官方文件的規格裡，示範影片沒有超出文件承諾的範圍。換句話說，吸引人的是畫面，可核對的是規格，兩邊目前對得起來。
樹只負責顯示，狀態與費用都由後端餵
Agent Tree 的本體是一個 React 元件，吃一個樹狀的資料結構：每個代理帶識別碼、名稱、任務、模型、狀態、自身花費、起訖時間與子節點，工具標記會以重疊的小圖磚出現在任務前。這個結構對應的正是 OpenAI Agents API 這類框架裡總代理委派子代理的工作流，只是框架替你執行，元件替你顯示，兩者各做一半。
官方文件在給 AI 工具的注意事項裡寫得直接：每次有變化就把整棵樹重新傳入，識別碼讓卡片留在原位，新的識別碼才會長出新的卡片。這條規則的背面是身分紀律：如果後端在重新連線後給同一個代理換了名字或換了識別碼，畫面上就會多出一張重複的卡片，使用者會以為多開了一個代理，費用也可能跟著重算。
狀態有六種，對應的工作情況各不相同：
| 狀態 | 代表的工作情況 | 卡片上的呈現 |
|---|---|---|
| queued | 尚在排隊 | 視覺轉淡，與連線一起弱化 |
| running | 正在執行 | 旋轉中的載入圖示，經過時間每秒跳動 |
| waiting | 等待人類決定 | 顯示為 Needs you，附時鐘圖示 |
| done | 執行結束 | 打勾圖示 |
| failed | 執行失敗 | 警告圖示，點開可看原因 |
| stopped | 已停止 | 視覺轉淡 |
「等待」被特別拉出來對待人。等待中的卡片會說明它需要你決定什麼，答案視窗裡的選項由應用程式定義，元件只負責把核可、拒絕、重試、關閉這四種動作傳回去。畫面上的按鈕出現，不代表後端已經執行，狀態要不要變，是應用程式收到回呼後自己的事。
費用的口徑是整份文件裡最容易接錯的地方。官方規格明定 cost 欄位是單一代理自己的花費，有子節點的卡片才顯示整個分支的總計，加總由元件完成，文件甚至加了一句提醒：不要預先把總額算好塞進去。以官方範例樹的數字看，總代理花 0.42 美元，研究與寫程式的子代理各花 0.29 與 0.18 美元，根節點卡片顯示的分支總額就是 0.89 美元。如果後端已經把子代理的錢併進父欄位再傳進來，畫面就會重複計算，錯在資料口徑，與動畫無關。
金額的格式與時間的跳動也留了接點。費用格式化函式預設輸出美元寫法，可以換成任何貨幣或點數；執行中的計時預設讓樹每秒重算一次，如果應用程式不想負擔這個節奏，可以傳入自己的時鐘值。
失敗重試也有明確規則：重試要建一個帶獨立識別碼的新子節點，原本失敗的那張卡片保留下來。文件給的理由很直白，失敗的紀錄說明了這次工作的故事，只留下成功紀錄，會讓人低估整個任務的真實支出。
發動關係不等於時間順序，官方自己列了替代品
樹狀圖回答的是哪個分支、誰發動誰，不回答事情發生的先後。研究代理與寫程式代理可以同時開始，樹的上下層並不隱含誰先結束；它也不是資料流圖，兩個都由總代理啟動的代理，在樹裡是同一層，誰讀了誰的結果看不出來。官方文件在何時不該用這一節列得相當誠實：
| 你想回答的問題 | 官方建議的元件 | 它給你的畫面 |
|---|---|---|
| 事情發生的先後順序 | Agent Lanes | 每個代理一條泳道的時間軸，任務長向現在，交接畫成箭頭 |
| 單一代理的執行步驟 | Agent Plan | 執行前可審視的步驟清單，能改名、拖曳排序，逐步計時 |
| 邊跑邊插話調整方向 | Agent Steering | 把備註排進下一步，或立刻打斷 |
| 由你自己指派工作 | Delegate Board | 把工作拖到代理身上，顯示忙到何時，或自動派給空著的人 |
| 總代理與子代理的分層概覽 | Agent Tree | 誰啟動誰的樹，狀態與費用逐卡顯示 |
這幾個兄弟元件同樣掛在 Pro 付費牆內。對已經在跑多代理系統的團隊，這張表比示範影片更有用：想把一次執行的來龍去脈做成可以稽核的紀錄，樹狀圖只是入口，點進卡片之後的詳細日誌、工具呼叫與事件順序都還要自己做。代理可觀測性這個題目持續有新工具冒出來，開源的代理稽核報告工具就是同一個需求從另一個角度的嘗試。
想裝的人先撞到 401：免費的 40 個與付費的 70 個
affectUI 全庫 110 個項目切成兩半：40 個免費開源（MIT），70 個屬於 Pro，一次性買斷。免費與付費用同一條 shadcn 安裝指令，差別在請求標頭：買家在帳號頁產生存取金鑰，以 Bearer 格式寫進專案設定檔的 registry 設定，安裝指令就能取到 Pro 項目的檔案。
沒有金鑰會發生什麼，可以實際打一次伺服器看看。向 Agent Tree 的安裝檔位址發出請求，回應是 401，訊息寫著這個項目屬於 affectUI Pro，請到帳號頁把存取金鑰加進設定；對照請求免費的按鈕元件，檔案與原始碼一次到手，落點是專案裡的元件目錄。免費與付費的界線不在文件措辭，在伺服器的回應碼，這種邊界比行銷頁面可靠。
免費範圍的數字有個小陷阱值得拆開。倉庫 README 的徽章寫 57 個免費項目，文件寫 40 個，兩邊其實都在講真話：清點倉庫會發現 57 個 .tsx 檔案裡，有 17 個元件各附了一個版面更素淨的 clean 樣式變體，把變體算檔案是 57，把變體併回元件算項目是 40，等於 17 個元件、17 幅插圖、2 個頁面區塊與 4 種動效的組合。要引用數字的人先想清楚要數的是哪一層。
價格結構採滾動檔位。個人版 199 美元，團隊版 499 美元含 10 個席位，都是買斷加官方承諾的終身更新，沒有訂閱續約。定價頁的問答寫明最初的創始價 99 美元限定前 25 個授權，早鳥價 149 美元到第 50 個，之後回到定價；定價資料顯示 25 個創始席次已經售完，現在下單走的是哪一檔，結帳頁說了算。同樣把免費積木與付費牆放進同一個產品的玩法，在給 Claude 用的 React 積木庫上也見過，這條商業路線在 AI 開發工具圈正在變常態。
React 19、單檔無依賴，還有一條給 AI 工具的查詢通道
技術門檻本身不高。每個項目是一個 .tsx 檔案，樣式寫在檔案裡，不依賴 Tailwind、不依賴動畫庫，暗色模式內建，唯一指定的環境是 React 19。畫面寬度在 560 像素以上時，緊鄰根節點的那層子代理會並排，再往下的層級掛在各自的父節點下面；更窄時每一層往內縮排，連線沿左側走，卡片等比縮小，文件還特別標榜連線是從卡片實際位置量出來的，任何寬度與縮放比例都成立。想把樹放進側欄的產品，這段行為比旗艦示範更該看。
無障礙這塊文件寫得比多數同類產品細。整棵樹用 tree 與 treeitem 結構，分支有展開狀態標記，摺疊按鈕會唸出它要摺的是哪個代理的幾個子代理；待決定與失敗的視窗是對話框，打開後焦點直接落在答案上，Esc 可以關閉；頂欄的統計數字變動時會以螢幕閱讀器的溫和播報送出。鍵盤操作有專屬段落：Tab 在摺疊鈕與卡片間移動，Enter 選取卡片，Enter 與空格摺疊分支。偏好減少動態效果的人，所有動畫一次停用，卡片直接就位。
比較特別的是官方把文件做成了一條機器可讀的通道：站上提供完整的純文字規格，還有一個 MCP 端點，讓 Claude Code、Cursor、VS Code 或 Codex 直接搜尋元件、讀文件、抓原始碼。也就是說，在你把 Agent Tree 接進產品之前，可以讓 AI 工具先把規格讀一遍，把六種狀態與費用口徑的對接問題先問清楚。這種把文件餵給代理工作流的設計，與元件本身照顧代理介面的思路是同一套。
會變的數字，與還沒有答案的問題
有幾件事在決策前要標成變數。價格是滾動檔位，早鳥何時售完、定價何時調整，官方沒有承諾凍結；示範貼文的讚數是流動的，引用時綁定事件日期比綁定數字穩當；元件裝進真實專案後的效能與順手程度，要買了金鑰才看得到，規格與文件能對上的部分，目前都屬於紙面證據。
可以不花錢先做的事倒是不少。文件全部公開，六種狀態、費用口徑、重試規則與無障礙細節都可以逐條核對；免費的 40 個項目可以實際裝進 React 19 專案，感受單檔無依賴的工作方式；倉庫每日同步，看提交紀錄就能判斷維護節奏。真正該問的問題是產品面的：你的系統是否已經有每個代理的身分、狀態與費用的原始紀錄。有的話，Agent Tree 把這些變成畫面的成本很低；沒有的話，先補資料層，畫面晚點再買。
