【免費下載鏈接】kanbanLaunch a local web app that runs CLI agents in parallel項目地址https://gitcode.com/gh_mirrors/kanban24/kanban點擊查看免費下載Kanban 是一個本地 Node Runtime React 應用組成的并行開發(fā)工具用一句話概括就是用看板界面同時驅動多個 CLI Agent 干活。它的架構可以拆成三塊瀏覽器 UI 負責看和點本地 Runtime 負責調度與真相底層則有 PTY 進程和原生 Cline SDK 兩條 Agent 執(zhí)行路徑。本文帶你快速看懂 Kanban 的整體架構以及瀏覽器 UI、本地 Runtime 與雙軌 Agent 執(zhí)行路徑是如何協(xié)作的。一圖看懂Kanban 的三層架構Kanban 最容易理解的方式是把職責拆成三層詳見 docs/architecture.md層次職責核心代碼位置? 瀏覽器層渲染看板、詳情視圖、終端/聊天面板只負責展示和發(fā)指令web-ui/src/?? Runtime 層項目、worktree、會話、git 操作的唯一真相源并把狀態(tài)流式推回瀏覽器src/ 執(zhí)行層真正的 Agent 實現(xiàn)CLI 進程PTY或 Cline SDK 會話src/terminal/、src/cline-sdk/記住三條要點基本就抓住了整個架構的靈魂PTY 型 Agent 是進程導向的啟動、監(jiān)聽輸出、殺進程Cline 是會話導向的有會話托管、歷史持久化、OAuth 登錄后端通過統(tǒng)一的 Runtime API 和狀態(tài)流協(xié)調兩者UI 看到的是一套共享界面但背后實現(xiàn)完全不同瀏覽器 UI 與本地 Runtime 如何通信Kanban 不是傳統(tǒng)的瀏覽器輪詢服務器模式而是請求走 TRPC、狀態(tài)走 WebSocket 推送的雙通道設計。請求通道類型安全的 TRPC 邊界你在 UI 上的每個操作啟動任務、發(fā)送消息、提交代碼都會經過一條清晰的鏈路組件 → hooks → TRPC client → app-router.ts → runtime-api.ts → 具體執(zhí)行器src/trpc/app-router.ts 定義了瀏覽器與 Runtime 之間的類型化契約src/trpc/runtime-api.ts 是后端協(xié)調者只做路由和校驗然后把活兒交給終端 Runtime 或 Cline 集成層瀏覽器端的 TRPC 客戶端按 workspace 維度創(chuàng)建見 web-ui/src/runtime/trpc-client.ts這種設計保證了UI 永遠不是會話生命周期的真相源瀏覽器只是一個本地控制客戶端。狀態(tài)通道WebSocket 實時推送幾十個 Agent 同時跑靠輪詢刷新看板肯定不夠。Kanban 用 src/server/runtime-state-hub.ts 作為中央廣播樞紐它同時監(jiān)聽終端會話摘要、Cline 摘要與聊天消息、workspace 元數(shù)據(jù)變更歸一化成共享 API 契約后以 150ms 級別的批量窗口推給所有瀏覽器客戶端于是看板上的每張卡片都能實時顯示正在運行 / 等待審閱 / 失敗等狀態(tài)——你甚至能一眼監(jiān)控上百個 Agent而不用逐個點開。雙軌 Agent 執(zhí)行路徑Kanban 架構最核心的設計這是整個倉庫最重要的架構決策Agent 執(zhí)行有兩條路徑且刻意不合并。路徑一PTY 支撐的 CLI 進程經典 Kanban 路線Claude Code、Codex、Gemini、OpenCode、Droid 等命令驅動的 Agent 都走這條路src/terminal/session-manager.ts 是 PTY 運行時核心負責進程生命周期、終端協(xié)議過濾、輸出流和摘要更新src/terminal/agent-registry.ts 負責發(fā)現(xiàn)你機器上裝了哪些 CLI Agent 并決定用什么命令啟動每個任務會話都是獨立進程啟動 → 流式輸出 → 狀態(tài)遷移檢測 → 結束清理流程非常直覺UI 點播放 → Runtime 解析任務目錄 → 選命令 → 在任務 worktree 內拉起 PTY 進程 → 輸出經狀態(tài)樞紐回流到瀏覽器。路徑二原生 Cline SDK 聊天運行時Cline 之所以特殊是因為 SDK 已經擁有了 CLI 運行時沒有的東西Provider 設置與 API Key 管理OAuth 登錄與刷新會話托管Session Host持久化會話歷史所以 Kanban 在 src/cline-sdk/ 建了一整套集成層而不是把 Cline 當成又一個命令行。關鍵模塊分工如下模塊角色cline-task-session-service.ts面向任務的門面Runtime API 與 Cline 打交道的唯一入口sdk-provider-boundary.ts唯一允許直接導入 SDK Provider/OAuth API 的地方sdk-runtime-boundary.ts唯一允許直接導入 SDK 會話托管 API 的地方cline-session-runtime.ts托管 SDK 會話維護任務 ID → 會話 ID 的綁定cline-message-repository.tsKanban 側的聊天視圖 從 SDK 持久化中水合歷史cline-event-adapter.ts把 SDK 原始事件翻譯成 Kanban 的狀態(tài)變更其中兩個boundary 模塊尤其值得注意項目甚至用 lint 規(guī)則強制只有這兩個文件可以直接 importclinebot/*目的就是防止 SDK 依賴細節(jié)滲透到整個代碼庫。一個容易忽略的細節(jié)詳情頁聊天和側邊欄聊天是兩個界面但跑在同一個 Cline Runtime 模型上。側邊欄用的是合成 home agent 會話見 src/core/home-agent-session.ts不創(chuàng)建真實任務卡片、不建 worktree卻復用了任務聊天的全部運行時原語。Worktree 隔離并行 Agent 不撞車的關鍵為什么幾十個 Agent 能同時改一個倉庫還不互相打架答案在 src/workspace/task-worktree.ts每個任務卡片一個 git worktree點播放時Kanban 為該任務創(chuàng)建一個臨時 worktreeAgent 在里面獨立工作天然避免合并沖突符號鏈接加速像node_modules這類 gitignore 目錄會被軟鏈進 worktreemirrorIgnoredPath省掉每份副本都npm install的痛苦可追溯任務被丟進回收站時會保存 patchworktree 跟蹤 resume ID隨時可以恢復核心模塊路徑速查想深入源碼時按這個清單找文件最高效啟動入口src/cli.ts —— 解析參數(shù)、拉起本地 Runtime 服務器、自動打開瀏覽器架構總覽docs/architecture.mdTRPC 契約與協(xié)調src/trpc/app-router.ts、src/trpc/runtime-api.ts狀態(tài)流樞紐src/server/runtime-state-hub.tsPTY 運行時src/terminal/session-manager.ts、src/terminal/pty-session.tsCline 集成層src/cline-sdk/cline-task-session-service.tsWorktree 管理src/workspace/task-worktree.ts前端組合根web-ui/src/App.tsx —— 業(yè)務邏輯大多在 web-ui/src/hooks/ 里組件只負責渲染總結為什么這套架構值得借鑒Kanban 的整體架構可以濃縮成幾條設計規(guī)則一個關注點只有一個真相源—— 會話歸 Runtime、UI 狀態(tài)歸瀏覽器、密鑰歸 SDK瀏覽器是被推送狀態(tài)不是輪詢客戶端—— runtime-state-hub 是靈魂雙軌執(zhí)行但 UI 統(tǒng)一—— PTY 進程軌與 Cline SDK 軌實現(xiàn)不同看板呈現(xiàn)一致邊界靠 lint 強制—— SDK 導入、TRPC 客戶端創(chuàng)建都有硬性約束防止架構腐化理解了瀏覽器是控制面板、Runtime 是調度中樞、雙軌執(zhí)行各司其職這三句話你再去看 Kanban 的任何一段代碼都會清晰很多。贊分享【免費下載鏈接】kanbanLaunch a local web app that runs CLI agents in parallel項目地址https://gitcode.com/gh_mirrors/kanban24/kanban點擊查看免費下載相關推薦OpenMed ONNX Runtime Web Loader瀏覽器端本地 PII 脫敏的加載器設計與執(zhí)行路徑選擇OpenMed ONNX Runtime Web Loader瀏覽器端本地 PII 脫敏的加載器設計與執(zhí)行路徑選擇 OpenMedKit Web 內置了基于人工智能NLP醫(yī)療健康數(shù)據(jù)脫敏本地部署大模型AI 應用MCP 服務聯(lián)邦學習手把手快速部署GB28181視頻平臺wvp-GB28181-pro5分鐘容器化接入?？荡笕A攝像頭手把手快速部署GB28181視頻平臺wvp GB28181 pro5分鐘容器化接入海康大華攝像頭 wvp GB28181 pro 是一個基于 GB28181后端音視頻前端Puppeteer BrowserLauncher.executablePath() 深度解析瀏覽器可執(zhí)行文件路徑的解析機制Puppeteer BrowserLauncher.executablePath 深度解析瀏覽器可執(zhí)行文件路徑的解析機制 本篇圍繞 Puppeteer 的 B瀏覽器控制測試網頁爬蟲開發(fā)工具創(chuàng)作聲明：本文部分內容由AI輔助生成（AIGC），僅供參考