打破设备的边界：Coder Studio 让你的开发工作流真正"随时随地"
一个真实的开发困境
周五下午，你在办公室启动了一个复杂的代码重构任务，AI Agent 正在帮你处理。下班时间到了，你想回家再继续看结果。但问题来了：
- 你的终端还在办公室电脑上跑着
- 回家想查看进度，只能重新 SSH 接管环境
- 手机上收到通知，却看不到完整的 workspace 上下文
- 想在平板上审阅代码改动？几乎不可能
这不是一个新问题，而是每个开发者都曾面对的现实：你的开发环境被物理设备绑定了。
从"被设备束缚"到"随时继续"
Coder Studio 的设计理念非常简单：
Deploy once, code everywhere.
一次部署，随处继续。
它把你的 AI coding workspace 变成了一个浏览器可访问的工作台。Claude Code 或 Codex、文件、Git、终端——全部集成在一个界面里。你的工作流不再被固定在某一张桌子前或某一台设备上。
它是如何改变你的工作方式的
场景一：办公室启动 → 通勤路上查看
在办公室启动服务后，你可以：
- 创建一个 Claude 会话处理某个 feature
- 让 Agent 先开始工作
- 下班后用手机浏览器打开同一个 workspace
- 在通勤路上实时查看 Agent 输出和 Git 变化
不是远程桌面那种"被迫盯着小屏幕操作"，而是真正为移动端优化的工作台。
场景二：跨设备无缝切换
你在办公室用桌面电脑发起任务，晚上想用家里的笔记本继续：
- 打开浏览器，访问同一个服务地址
- 完全相同的 workspace 上下文
- 不需要重新 clone、重新配置、重新接管
这是同一个工作区，不是新的环境。
场景三：减少工具切换的碎片化
传统的 AI 编程工作流是这样的：
终端 (运行 Claude Code)
↓ 切换
编辑器 (查看文件)
↓ 切换
Git 工具 (看 diff)
↓ 切换
浏览器 (查资料)
每一次切换都是注意力的流失。Coder Studio 把这一切整合在一个工作台：
| 功能模块 | 说明 |
|---|---|
| Agent 面板 | 运行 Claude Code 或 Codex，实时查看输出 |
| 文件树 + 编辑器 | Monaco Editor 支持语法高亮，边看边改 |
| Git 视图 | 分支、变更文件、diff 一目了然 |
| 终端 | 独立的 Shell 终端，验证 Agent 的结果 |
一个浏览器窗口，完成所有工作。
核心设计理念
1. 真正的"随时随地"
很多"云 IDE"产品其实只是把编辑器搬到了网页上。但你的实际工作流远不止编辑器：
- Agent 的执行状态
- 文件的实时变化
- Git 的 diff 和历史
- 终端的输出日志
Coder Studio 把这四件事放在一起，让你在任何设备上都能看到完整的上下文。
2. 本地运行，数据可控
服务运行在你自己的机器上，不是某个云端的虚拟机：
- 代码永远留在本地
- 会话数据不经过第三方云
- 可以完全离线运行（仅文件和终端功能）
你的代码，你的设备，你掌控一切。
3. 响应式设计，各端优化
同一个服务地址，在不同设备上自动适配：
桌面端：完整的四面板布局，支持快捷键操作，适合深度编码
平板端：触控优化，适合审阅代码、追踪进度
手机端：紧凑布局，随时查看 Agent 状态和终端输出
从安装到第一次使用
只需要两步：
# 1. 全局安装
npm install -g @spencer-kit/coder-studio
# 2. 启动服务
coder-studio open
浏览器会自动打开工作台。点击"打开工作区"，选择你的项目目录，就可以开始了。
没有安装 Claude Code 或 Codex CLI？没关系，你可以先使用文件浏览和终端功能，之后再补装。
实际工作流示例
工作流一：Agent 驱动的异步开发
- 桌面端：创建 Codex 会话，描述你要实现的功能
- 移动端：在通勤路上用手机查看 Agent 的进度和输出
- 平板端：用平板审阅生成的代码改动
- 桌面端：在完整键盘环境下做最后的调整和提交
整个过程，workspace 保持连续，不需要"重新接手"。
工作流二：团队实时查看
同一局域网内的同事可以通过浏览器访问你的 workspace：
- 团队成员实时查看你的工作状态
- 无需屏幕共享，直接展示代码和终端
- 适合代码走查和问题排查
工作流三：多 Agent 并行
在一个工作区内同时运行多个会话：
- 一个 Codex 会话处理单元测试
- 一个 Claude 会话重构某个模块
- 同时查看两个 Agent 的进度和输出
技术实现亮点
| 组件 | 技术选型 | 说明 |
|---|---|---|
| Frontend | React + Vite + Jotai | 现代化前端架构，状态管理清晰 |
| Backend | Fastify + WebSocket | 轻量高效，支持实时通信 |
| Terminal | xterm.js + node-pty | 完整的终端模拟，支持交互 |
| Editor | Monaco Editor | VS Code 同款编辑器内核 |
| Storage | SQLite | 本地数据持久化，无需额外服务 |
整个系统使用 Node.js 编写，安装简单，依赖少，启动快。
谁适合使用 Coder Studio
- AI 辅助编程的深度用户：每天都用 Claude Code 或 Codex，希望更高效地管理多个会话
- 需要在多设备间切换的开发者：办公室电脑、家里电脑、移动设备无缝衔接
- 团队协作场景：需要实时共享工作状态，方便代码走查和问题排查
- 注重数据隐私的用户：希望代码和会话数据留在本地，不依赖云服务
开始你的"随处编码"之旅
如果你已经厌倦了：
- 被固定在某一台设备前工作
- 在终端、编辑器、Git 工具之间反复切换
- 换个设备就要重新接管环境
- 手机上只能看通知，看不了完整的 workspace
那么 Coder Studio 可能是你一直在寻找的工具。
npm install -g @spencer-kit/coder-studio
coder-studio open
Deploy once, code everywhere.
让你的开发工作流，真正自由。
相关链接：
