构建 vbcdr：一个为氛围编程开发者打造的 AIDE

我受够了和 IDE 较劲

每天都是一样的。打开 VS Code。打开一个终端。再打开一个终端。打开浏览器。排列窗口。搞不清哪个终端在跑什么。在代码、AI 和预览之间来回切换一百次

所以我干脆自己造了一个

IDE 已死，AIDE 万岁

AIDE 是 AI-Integrated Development Environment（AI 集成开发环境）的缩写。传统的 IDE 是为人类编写每一行代码的世界而设计的。但我已经不那样工作了

我现在的工作流程是：打开终端，告诉 Claude 我需要什么，审查它写的代码，在浏览器里查看结果。代码编辑器？偶尔看一眼。也许是为了理解一个类型或追踪一个 bug

所以 vbcdr 翻转了传统布局。终端和浏览器预览占据主舞台。Monaco 编辑器在你需要时仍然在那里，但它被刻意放在次要位置

终端优先的一切

终端面板是它的核心。xterm.js 配合 WebGL 渲染，丝般顺滑。每个项目都有多个终端标签页——一个给你的 AI 代理，其他的给开发服务器、数据库之类的，你需要什么就开什么

当你切换项目时，AI 终端会自动创建。因为在氛围编程的工作流程中，代理始终在运行

用 node-pty 构建，提供原生 shell 访问。你真正的 shell，你真正的环境，你真正的 PATH。不是什么沙盒化的假终端

终端搜索带高亮、清除/重启按钮和滚动到底部。Shift+Enter 在 LLM 终端输入框中插入换行而不发送，这听起来很小但当你写多行 prompt 时差别巨大

你可以直接把文件拖进终端来快速提供上下文。拖入一张图片，它会通过剪贴板自动附加到 LLM。再也不用复制粘贴文件路径了

┌──────────────────────────┬──────────────┐
│                          │   Git Graph  │
│  浏览器或编辑器           │              │
│                          ├──────────────┤
│                          │   LLM        │
│  Dev 1  │  Dev 2         │   终端       │
└──────────────────────────┴──────────────┘

内置浏览器与项目隔离

每个项目都有自己的集成浏览器，带有按项目隔离的存储。不再有 cookie 在项目之间泄漏。每个项目都在自己的 Electron webview 分区中运行

我接入了 Chrome DevTools Protocol 来获取网络监控和控制台捕获，不需要构建任何自定义的监测工具。浏览器面板有三个 devtools 标签页：Console、Network 和 Passwords

网络检查器显示可展开的请求详情，包含 headers、类型和精确的响应大小。控制台错误和网络故障有一个**一键"发送到 LLM"**的按钮，直接转发到你活跃的 AI 终端。看到一个 500 错误？点一下，你的代理就已经在调试了

密码管理器自动检测登录表单。注入一个脚本，用 MutationObserver 监视密码字段，捕获表单提交，并提供使用 Electron 原生 safeStorage API 加密保存凭据的选项

下次你访问那个页面时自动填充

设备模拟在桌面、iPad 和移动端视口之间切换，带有正确的 user agent。Google OAuth 被重定向到你的系统浏览器，因为 Electron webview 和 OAuth 就是合不来

11 个主题，因为为什么不呢

好吧，我在这里可能做过头了。Dracula、Catppuccin、Nord、Tokyo Night、Gruvbox、One Dark、Solarized，还有更多。每个都有浅色和深色变体

我花很多时间盯着这个东西看。它得好看才行

真正管用的多项目状态

这是我最引以为豪的架构决策。每个 Zustand store 使用 Record<projectId, StateType> 模式。切换项目时立即显示该项目的终端、浏览器标签页、文件树、编辑器状态和 git 历史

**没有共享。没有泄漏。**点击一个项目标签页，你的整个上下文就切换了

浏览器标签页以 500ms 的防抖持久化到磁盘，这样不会把文件系统折腾坏。终端进程在后台保持活跃。切回来，一切都在你离开时的地方

会和你的 AI 对话的 git 图

git 面板用 SVG 渲染基于泳道的提交图。每个分支有自己的泳道和颜色。合并提交有更大的节点。贝塞尔曲线连接跨泳道的父子关系

按下"Commit"，它会向你活跃的 AI 终端发送 /commit。按下"New Feature"，输入描述，它就会通过你的代理创建一个格式正确的 feature/your-description-in-kebab-case 分支

git 树不只是可视化。它是一个通过你的 AI 代理进行通信的命令界面

Electron、Zustand 和干净的 IPC 层

Electron 34 用于跨平台桌面应用。React 18 + Tailwind CSS 4 用于 UI。electron-vite 用于构建。Zustand 用于状态管理，因为当你的 store 这么干净时 Redux 就是大材小用

IPC 层是骨架。六个 handler 模块（projects、terminal、filesystem、git、browser、passwords）各自管理自己的领域。PTY 管理器、file watcher 和 git 服务等 service 做实际工作。用户看到的和操作系统做的之间有清晰的分离

文件监视使用 chokidar，带有 gitignore 感知的过滤。文件树缓存并防抖更新。Monaco 获得实时文件同步，这样你的 AI 代理写文件时产生的外部更改会实时显示

掌舵胜过打字

构建开发者工具既上瘾又让人谦卑。你以为你知道自己想要什么，直到你用了一周才意识到布局需要改变，终端需要搜索功能，浏览器需要密码管理，git 图需要可交互

最大的领悟：在 AI 优先的工作流程中，开发环境应该为掌舵而优化，而不是打字。大面积的终端空间。便捷的浏览器访问。一目了然的 git 上下文。代码编辑器现在只是一个参考查看器

vbcdr 不是要取代 VS Code。它是为一种完全不同的工作流程而构建的，一种你花更多时间指挥 AI 而不是自己编辑文件的工作流程

这就是 AIDE。不是一个加了 AI 的 IDE。而是一个根本不同的工具，为一种根本不同的软件构建方式而生

接下来

路线图上还有：

• 可视化技能管理器 - 从 UI 面板浏览、启用/禁用和配置 LLM 代理的技能和斜杠命令，而不是管理配置文件
• 密码和浏览器收藏夹改版 - 当前系统需要重新设计以获得更好的用户体验和可靠性
• 点击项目树中的文件和文件夹发送给代理作为上下文输入
• 让 AI 访问 webview 浏览器，以便它可以操作和测试预览
• Windows 和 Linux 构建
• 还有更多想法

开源，MIT 许可，绝对是一个进行中的作品。首个版本已发布，支持 macOS Apple Silicon。欢迎在 GitHub 上贡献