roost: 在线 web coding 工具 | 我心永恒的小站

1. 前言

roost 是一个跑在浏览器里的终端工作台。会话活在服务器上，你换一台设备打开网页，终端还停在你离开的那一行。源码在 GitHub：https://github.com/wxyhgk/roost。

下面是我为什么要自己写一个。

使用 AI 进行 Coding 开发，已经成了每一个独立开发者的必备技能。通常我们会使用 Codex CLI、Claude Code 等 CLI 工具，或者使用对应的桌面端软件进行开发。大多数情况下，这种开发方式并没有什么问题

但传统终端有一个天然限制：终端会话往往和当前设备、当前窗口绑定。

关掉终端、断开 SSH、换一台电脑，往往意味着你要重新找回原来的目录、进程和 agent 会话。tmux 能让进程活下来，但跨设备访问和恢复工作状态依然很不自然，而且它不知道终端里跑的是什么。

为了解决这个问题，我对此进行了很多探索：

1.1 VSCode

我们可以在电脑上部署一个在线的 web 服务，然后通过网页可以连接到我们的电脑的服务器，但是在线的 VSCode 有个问题，没办法长时间保持 “状态” ，举例而言，我们当前打开了某个终端，然后开了一个什么窗口，一段时间后他就会收回，那么就意味着，你后续还得重新找文件夹，非常麻烦

1.2 JupyterLab

由于 VScode 保持状态的问题，我之前是一直用 jupyterlab 进行远程开发，并且用 ai 开发了很多插件，解决痛点，比如右键跳转到终端所在的文件夹，可以改变终端的标签等各种功能，尽管勉强可以用，但是 jupyterlab 已经跟不上时代了，具体而言，我们的 ai coding 的过程中，很多时候我们需要是这样的结构：

这种三段式的构造，像现在的主流的 ai 编程工具都是这样的构造，比如 ChatGPT，claude的桌面端都是这样的。

我之前通过修改 jupyterlab 的源代码，我发现非常难以改，老问题太多，根本改不下去，会遇到各种bug，非常难受。

市面上绝大多数在做桌面端，web 端本来就少。即便有——比如 DeepSeek harness 这类 web 应用——它不做终端，也不做文件树。有文件树的，用的基本也是 GUI 对话框那一套。

GUI 对话框看起来很好：改了哪些代码、跑了哪条命令，统统折叠起来，界面干净。但人是懒的。折叠起来的东西，大多数时候根本不会去点开。而实际开发里我认为很有必要看它到底怎么写的、具体写了什么代码。

所以我认为 TUI 没有过时。而且 TUI 更省内存、更快。我那台 64G 的 Mac 被 ChatGPT 桌面端吃掉 80G 内存直接卡死过，对话一长就卡得没法用，真是离谱。

1.4 延迟问题

远程开发还存在一个问题，那就是延迟，如果我连接美国的服务器，那么延迟至少也是 200ms + 以上，打一个字要等两百毫秒才看见，根本没法用。

有人这时候会说：mosh 不就解决了吗。

mosh 确实做了本地回显，但它解决的只是一条 SSH 连接的手感。它给不了你浏览器里的文件树、笔记、订阅额度、agent 状态；更实际的是，别人的电脑上、iPad 上没有 mosh 客户端，但都有浏览器。

经过一段时间的挣扎，我决定自己写一个，源码和设计全自己定，以后改起来方便。就有了 roost，在 GitHub 开源：https://github.com/wxyhgk/roost

2. roost 的介绍

这是 roost 的页面，三段式，参考了 warp (https://github.com/warpdotdev/warp) 这个软件的设计

左侧是工作区和会话列表。每一条会话带着它自己那个 AI CLI 的 logo，正在跑的那条会标出来——不用点进去就知道哪个在忙。目前认得 Codex、Claude Code、Qwen Code、Gemini CLI、Grok、Oh My Pi、OpenCode 七家。

中间是终端本体。打开某个 CLI 的会话时，背景会浮出它的 logo 水印，一眼知道自己在哪个窗口里。

底部工具栏部分会展示服务器的基础信息包括cpu，内存，上传，下载速度，还有 ai (claude,codex,opnecode) 订阅的实时查看

右侧是文件树、笔记、代码片段、任务清单、进程列表、服务器状态。

有时候 ai 输出的文字，我觉得比较重要，我可以直接存为笔记，这样就能避免复制粘贴，

为了解决中国到美国的距离的打字慢的问题问题，我做了本地回显功能，具体而言，就是打字的时候是在当前的浏览器打出来的，发出去的时候才有延迟，极大的的减轻了延迟功能。

3 几个设计上的选择

3.1 不折叠

前面说过 GUI 把一切折叠起来。roost 的做法是反过来的：终端里显示什么，就是什么，没有第二层"摘要"挡在中间。你看到的就是 agent 真正写的代码、真正跑的命令。

3.2 文件用弹窗

这是整个项目的设计哲学：专注。

文件、笔记、预览一律以弹窗形式浮出来，不是钉死在终端旁边占掉半个屏幕。看完关掉，终端还是整块的。

但只能看一个也不对，很多时候我们就是要对着两个文件看。所以钉住之后可以接着开下一个：钉住的窗口从"当前选中"上摘下来，那个位置空出来给下一个文件。

3.3 agent 状态不靠读屏幕

“”agent 现在在干嘛"这件事，很多工具是去读屏幕猜出来的，看看有没有转圈的动画、有没有新的输出。

问题是"正在安静地算"和"弹了确认框在等你"，在输出流上长得一模一样，都是不再产生输出。靠猜分不开这两件事，而这两件事对你的意义完全相反：一个是不用管，一个是你不回它就一直卡着。

所以 roost 走的是另一条路：让 agent 自己上报。通过注入的插件（以及 codex 的 app-server）拿到结构化时间，会话开始、提交了提示词、请求权限、问了问题、跑完了。

4. 最后

roost 在 GitHub 开源：https://github.com/wxyhgk/roost

它借鉴了很多项目，界面结构上的 warp、agent 事件协议、以及一堆同类工具踩过的坑。集百家之长，也做了一些我认为别人没做对的取舍。

如果你也在远程做 AI coding，也受够了状态保不住、延迟磨人、GUI 把一切折叠起来，欢迎试试，也欢迎提 issue。