多 Agent 并行开发实践：从标签页混乱到无限画布

大家好，我是 Anton Horn，也是开源项目 Cate 的作者。

当我开始同时使用 Codex、Claude Code 等 Coding Agent 时，很快遇到一个问题：Agent 可以并行工作，但传统 IDE 的交互仍然是串行的。终端、编辑器、浏览器、日志和 Git 分支散落在大量标签页里；当多个任务同时运行时，我经常需要先花时间确认“这个终端属于哪个任务”“这个改动在哪个 worktree”。

Cate 就是我为解决这个问题做的一个实验：把开发环境从标签页列表变成一张可以无限缩放的画布。

为什么多 Agent 工作流需要空间结构

传统 IDE 通常围绕“当前文件”设计，而 Agent 工作流更像一个并行系统：

• 一个 Agent 在实现功能；
• 一个 Agent 在跑测试、检查回归；
• 另一个 Agent 在阅读文档或调查问题；
• 每个任务还可能对应独立的 Git 分支与 worktree。

如果所有上下文都堆在同一个标签栏里，任务之间的边界很快就会消失。Cate 的核心想法很简单：用空间位置表达上下文关系。

你可以把一个功能相关的终端、编辑器、浏览器和文档放在同一区域；把另一个 Agent 的工作区放到画布另一侧。缩小画布可以看到全局，放大后继续处理具体代码。

Cate 如何感知 Coding Agent 状态

Cate 的终端并不只是普通 PTY。它可以识别 Claude Code、Codex、Cursor、Grok、OpenCode 和 Pi 等 Agent 的运行状态，并在画布上给出视觉反馈，例如：

• 正在运行
• 等待用户输入
• 已完成
• 请求权限

这样，我不需要逐个切换终端查看进度。哪个任务需要处理，在画布上就能直接看到。

会话也会持久化。应用重启后，终端滚动记录、面板布局以及可恢复的 Agent 会话仍然存在，减少重新建立上下文的成本。

Git Worktree：让并行任务真正隔离

多个 Agent 同时修改同一个工作目录很容易互相干扰。Cate 因此把 Git worktree 作为一等工作流：

1. 为一个任务创建独立 worktree；
2. 在画布上打开它的终端和编辑器；
3. 使用一致的颜色标识它在侧边栏、Dock 和画布中的“领地”；
4. 完成后单独审查、合并或丢弃。

这种方式把“哪个 Agent 在哪个分支工作”变成可见信息，而不是藏在终端提示符里。

不只是终端：开发上下文都可以放上画布

Cate 的面板包括：

• 基于 Monaco 的代码编辑器
• 基于 xterm.js 与 node-pty 的终端
• 内嵌浏览器
• PDF、图片与 DOCX 预览
• 扩展面板
• 可嵌套的子画布

面板既可以自由摆放，也可以 Dock、分屏或拆到独立窗口。布局会保存到项目中，下次打开时继续之前的工作状态。

技术实现

Cate 是一个 Electron + React + TypeScript 桌面应用。当前主要技术栈包括：

• Electron 41
• React 18
• Zustand 5
• Monaco Editor 0.52
• xterm.js 5.5 + node-pty
• Tailwind CSS + electron-vite

应用采用 Electron 的 main / preload / renderer 进程模型。画布中的面板位置保存在 canvas-space，通过统一的坐标转换映射到当前缩放与视口位置。终端由主进程维护 PTY，会话与布局则以可读 JSON 持久化。

安装与体验

macOS 可以直接使用 Homebrew：

brew install --cask cate

Windows、macOS 和 Linux 的安装包也可以从 GitHub Releases 获取。

项目地址：

https://github.com/0-AI-UG/cate

Cate 仍在快速迭代。如果你也在尝试 Codex、Claude Code 或多 Agent 并行开发，欢迎试用、提交 Issue，或者告诉我你的工作流最容易在哪一步失去上下文。