【免费下载链接】kanbanLaunch a local web app that runs CLI agents in parallel项目地址https://gitcode.com/gh_mirrors/kanban24/kanban点击查看免费下载Kanban 是一个本地 Node Runtime React 应用组成的并行开发工具用一句话概括就是用看板界面同时驱动多个 CLI Agent 干活。它的架构可以拆成三块浏览器 UI 负责看和点本地 Runtime 负责调度与真相底层则有 PTY 进程和原生 Cline SDK 两条 Agent 执行路径。本文带你快速看懂 Kanban 的整体架构以及浏览器 UI、本地 Runtime 与双轨 Agent 执行路径是如何协作的。一图看懂Kanban 的三层架构Kanban 最容易理解的方式是把职责拆成三层详见 docs/architecture.md层次职责核心代码位置️ 浏览器层渲染看板、详情视图、终端/聊天面板只负责展示和发指令web-ui/src/⚙️ Runtime 层项目、worktree、会话、git 操作的唯一真相源并把状态流式推回浏览器src/ 执行层真正的 Agent 实现CLI 进程PTY或 Cline SDK 会话src/terminal/、src/cline-sdk/记住三条要点基本就抓住了整个架构的灵魂PTY 型 Agent 是进程导向的启动、监听输出、杀进程Cline 是会话导向的有会话托管、历史持久化、OAuth 登录后端通过统一的 Runtime API 和状态流协调两者UI 看到的是一套共享界面但背后实现完全不同浏览器 UI 与本地 Runtime 如何通信Kanban 不是传统的浏览器轮询服务器模式而是请求走 TRPC、状态走 WebSocket 推送的双通道设计。请求通道类型安全的 TRPC 边界你在 UI 上的每个操作启动任务、发送消息、提交代码都会经过一条清晰的链路组件 → hooks → TRPC client → app-router.ts → runtime-api.ts → 具体执行器src/trpc/app-router.ts 定义了浏览器与 Runtime 之间的类型化契约src/trpc/runtime-api.ts 是后端协调者只做路由和校验然后把活儿交给终端 Runtime 或 Cline 集成层浏览器端的 TRPC 客户端按 workspace 维度创建见 web-ui/src/runtime/trpc-client.ts这种设计保证了UI 永远不是会话生命周期的真相源浏览器只是一个本地控制客户端。状态通道WebSocket 实时推送几十个 Agent 同时跑靠轮询刷新看板肯定不够。Kanban 用 src/server/runtime-state-hub.ts 作为中央广播枢纽它同时监听终端会话摘要、Cline 摘要与聊天消息、workspace 元数据变更归一化成共享 API 契约后以 150ms 级别的批量窗口推给所有浏览器客户端于是看板上的每张卡片都能实时显示正在运行 / 等待审阅 / 失败等状态——你甚至能一眼监控上百个 Agent而不用逐个点开。双轨 Agent 执行路径Kanban 架构最核心的设计这是整个仓库最重要的架构决策Agent 执行有两条路径且刻意不合并。路径一PTY 支撑的 CLI 进程经典 Kanban 路线Claude Code、Codex、Gemini、OpenCode、Droid 等命令驱动的 Agent 都走这条路src/terminal/session-manager.ts 是 PTY 运行时核心负责进程生命周期、终端协议过滤、输出流和摘要更新src/terminal/agent-registry.ts 负责发现你机器上装了哪些 CLI Agent 并决定用什么命令启动每个任务会话都是独立进程启动 → 流式输出 → 状态迁移检测 → 结束清理流程非常直觉UI 点播放 → Runtime 解析任务目录 → 选命令 → 在任务 worktree 内拉起 PTY 进程 → 输出经状态枢纽回流到浏览器。路径二原生 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 的状态变更其中两个boundary 模块尤其值得注意项目甚至用 lint 规则强制只有这两个文件可以直接 importclinebot/*目的就是防止 SDK 依赖细节渗透到整个代码库。一个容易忽略的细节详情页聊天和侧边栏聊天是两个界面但跑在同一个 Cline Runtime 模型上。侧边栏用的是合成 home agent 会话见 src/core/home-agent-session.ts不创建真实任务卡片、不建 worktree却复用了任务聊天的全部运行时原语。Worktree 隔离并行 Agent 不撞车的关键为什么几十个 Agent 能同时改一个仓库还不互相打架答案在 src/workspace/task-worktree.ts每个任务卡片一个 git worktree点播放时Kanban 为该任务创建一个临时 worktreeAgent 在里面独立工作天然避免合并冲突符号链接加速像node_modules这类 gitignore 目录会被软链进 worktreemirrorIgnoredPath省掉每份副本都npm install的痛苦可追溯任务被丢进回收站时会保存 patchworktree 跟踪 resume ID随时可以恢复核心模块路径速查想深入源码时按这个清单找文件最高效启动入口src/cli.ts —— 解析参数、拉起本地 Runtime 服务器、自动打开浏览器架构总览docs/architecture.mdTRPC 契约与协调src/trpc/app-router.ts、src/trpc/runtime-api.ts状态流枢纽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 —— 业务逻辑大多在 web-ui/src/hooks/ 里组件只负责渲染总结为什么这套架构值得借鉴Kanban 的整体架构可以浓缩成几条设计规则一个关注点只有一个真相源—— 会话归 Runtime、UI 状态归浏览器、密钥归 SDK浏览器是被推送状态不是轮询客户端—— runtime-state-hub 是灵魂双轨执行但 UI 统一—— PTY 进程轨与 Cline SDK 轨实现不同看板呈现一致边界靠 lint 强制—— SDK 导入、TRPC 客户端创建都有硬性约束防止架构腐化理解了浏览器是控制面板、Runtime 是调度中枢、双轨执行各司其职这三句话你再去看 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 脱敏的加载器设计与执行路径选择OpenMed ONNX Runtime Web Loader浏览器端本地 PII 脱敏的加载器设计与执行路径选择 OpenMedKit Web 内置了基于人工智能NLP医疗健康数据脱敏本地部署大模型AI 应用MCP 服务联邦学习手把手快速部署GB28181视频平台wvp-GB28181-pro5分钟容器化接入海康大华摄像头手把手快速部署GB28181视频平台wvp GB28181 pro5分钟容器化接入海康大华摄像头 wvp GB28181 pro 是一个基于 GB28181后端音视频前端Puppeteer BrowserLauncher.executablePath() 深度解析浏览器可执行文件路径的解析机制Puppeteer BrowserLauncher.executablePath 深度解析浏览器可执行文件路径的解析机制 本篇围绕 Puppeteer 的 B浏览器控制测试网页爬虫开发工具创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考