# 打破设备的边界：Coder Studio 让你的开发工作流真正"随时随地"

## 一个真实的开发困境

周五下午，你在办公室启动了一个复杂的代码重构任务，AI Agent 正在帮你处理。下班时间到了，你想回家再继续看结果。但问题来了：

- 你的终端还在办公室电脑上跑着
- 回家想查看进度，只能重新 SSH 接管环境
- 手机上收到通知，却看不到完整的 workspace 上下文
- 想在平板上审阅代码改动？几乎不可能

这不是一个新问题，而是每个开发者都曾面对的现实：**你的开发环境被物理设备绑定了**。

## 从"被设备束缚"到"随时继续"

**Coder Studio** 的设计理念非常简单：

> Deploy once, code everywhere.

**一次部署，随处继续**。

它把你的 AI coding workspace 变成了一个浏览器可访问的工作台。Claude Code 或 Codex、文件、Git、终端——全部集成在一个界面里。你的工作流不再被固定在某一张桌子前或某一台设备上。

## 它是如何改变你的工作方式的

### 场景一：办公室启动 → 通勤路上查看

在办公室启动服务后，你可以：

1. 创建一个 Claude 会话处理某个 feature
2. 让 Agent 先开始工作
3. 下班后用手机浏览器打开同一个 workspace
4. 在通勤路上实时查看 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 状态和终端输出

## 从安装到第一次使用

只需要两步：

```bash
# 1. 全局安装
npm install -g @spencer-kit/coder-studio

# 2. 启动服务
coder-studio open
```

浏览器会自动打开工作台。点击"打开工作区"，选择你的项目目录，就可以开始了。

> 没有安装 Claude Code 或 Codex CLI？没关系，你可以先使用文件浏览和终端功能，之后再补装。

## 实际工作流示例

### 工作流一：Agent 驱动的异步开发

1. **桌面端**：创建 Codex 会话，描述你要实现的功能
2. **移动端**：在通勤路上用手机查看 Agent 的进度和输出
3. **平板端**：用平板审阅生成的代码改动
4. **桌面端**：在完整键盘环境下做最后的调整和提交

整个过程，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 可能是你一直在寻找的工具。

```bash
npm install -g @spencer-kit/coder-studio
coder-studio open
```

**Deploy once, code everywhere.** 

让你的开发工作流，真正自由。

---

**相关链接**：

- [GitHub 仓库](https://github.com/spencerkit/coder-studio)
- [快速开始指南](help/quick-start.md)
- [App 功能总览](help/app-overview.md)
- [移动端使用指南](help/mobile-guide.md)
