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