Skip to content

Commit 502db90

Browse files
author
root
committed
docs: refresh readme positioning and add chinese version
1 parent 002693c commit 502db90

2 files changed

Lines changed: 252 additions & 102 deletions

File tree

README.md

Lines changed: 99 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -1,156 +1,153 @@
11
# Coder Studio
22

3-
> Agent-First Development Environment — 把 AI Agent、代码编辑、Git 和终端放进同一个浏览器界面
3+
> Deploy once, code everywhere.
4+
>
5+
> Deploy your coding workspace once, then keep working anywhere.
46
5-
## 这是什么
7+
[中文说明](README.zh-CN.md)
68

7-
Coder Studio 是一个**本地优先的 AI 编码工作台**。你在本机运行服务,通过浏览器访问统一的开发界面,直接与 Claude Codex Agent 协作完成编码任务。
9+
Coder Studio lets you launch an AI coding workspace on your machine and keep using it from wherever you are. Claude Code or Codex, files, Git, and terminal all stay in one browser-based workspace, so your workflow is no longer pinned to one desk or one device.
810

9-
它不是在线 IDE,也不绑定任何 SaaS 平台——所有代码和数据都留在你的电脑上。
11+
Start a task in the office, check progress on your phone during the commute, review changes from a tablet, and continue on a laptop later. Same workspace, same context, no environment handoff.
1012

11-
## 浏览器访问,不限制设备和地点
13+
![Workspace](docs/help/assets/screenshot-workspace.png)
1214

13-
Coder Studio 的界面运行在标准浏览器中,不依赖任何客户端应用。只要本机服务在运行,**任何能连到网络的设备都可以随时打开同一个工作台**
15+
## Why Coder Studio
1416

15-
- **电脑、平板、手机通用**:任何现代浏览器都能访问,不需要安装桌面客户端
16-
- **随时查看,不受地点限制**:通勤路上用手机浏览器查看 Agent 进度、咖啡厅用平板审阅代码变更、客厅沙发上用笔记本继续操作——同一个工作台,随时打开即用
17-
- **对移动端友好**:响应式界面设计,手机上可以流畅地浏览文件树、查看 Agent 对话和 Git 变更
18-
- **团队协作共享**:同一局域网内的同事可以通过浏览器直接查看 Agent 的工作状态
17+
- **Deploy once, continue anywhere**: start the service once and move between devices and contexts without breaking your flow
18+
- **One workspace across devices**: not just remote logs, but the same workspace with Agent, code, Git, and terminal
19+
- **Agent + Code + Git + Terminal in one place**: less context switching between CLI, editor, diff tools, and shell
20+
- **Works with Claude Code and Codex**: choose the right Agent per task and run sessions side by side
21+
- **Runs locally, keeps your data under your control**: the service runs on your machine, without relying on a third-party cloud IDE
1922

20-
### 典型使用场景
23+
## What Problem It Solves
2124

22-
| 场景 | 怎么做 |
23-
|------|--------|
24-
| 通勤路上查进度 | 出门前启动服务,手机浏览器打开同一工作台查看 Agent 跑到了哪一步 |
25-
| 咖啡厅轻量操作 | 用平板浏览器浏览文件、审阅 Git 变更、查看终端输出 |
26-
| 沙发上继续编码 | 笔记本合上了,手机浏览器打开界面继续和 Agent 对话 |
27-
| 团队共享查看 | 同事通过浏览器访问同一工作台,无需远程控制你的电脑 |
25+
Traditional AI coding workflows are often tied to the one machine where the CLI is running:
2826

29-
## 核心优势
27+
- The Agent is running, but you still have to stay near the original device
28+
- Changing locations makes it hard to keep watching context and execution state
29+
- A phone may show notifications, but not the full coding workspace
30+
- Switching devices usually means taking over the environment again instead of simply continuing the work
3031

31-
- **一站式工作流**:Agent 对话、代码编辑、文件树、Git 状态、终端集中在同一个浏览器标签页中
32-
- **多 Agent 并行**:同时连接 Claude Code 和 OpenAI Codex,按任务选择最合适的引擎
33-
- **本地优先,数据可控**:服务运行在本地,代码不会上传到第三方云编辑器;会话记录存储在本地 SQLite
34-
- **开箱即用**:一条命令安装,一条命令启动,浏览器自动打开;配合 Provider CLI 即可开始工作
32+
Coder Studio turns that into:
3533

36-
## 它适合谁
34+
`Deploy once, code everywhere.`
3735

38-
- 希望在一个界面中同时与 AI 对话、看代码、跑命令的开发者
39-
- 想在本地保留所有代码和会话数据、不依赖云端编辑器的团队
40-
- 需要在手机、平板等设备上随时查看 Agent 进度的开发者
41-
- 希望团队能通过浏览器共享查看工作状态的协作者
42-
- 使用 Claude Code 或 OpenAI Codex 并想要图形化管理界面的用户
36+
## Quick Start
4337

44-
## 快速开始
38+
```bash
39+
npm install -g @spencer-kit/coder-studio
40+
coder-studio open
41+
```
4542

46-
只需几步即可开始:
43+
Then just:
4744

48-
### 前置要求
45+
1. Click **Open Workspace** in the browser
46+
2. Choose your project directory and create a Claude or Codex session
47+
3. Start working with the Agent while viewing files, Git changes, and terminal output in the same workspace
4948

50-
| 依赖 | 说明 |
51-
|------|------|
52-
| Node.js >= 24.0.0 | 运行 Coder Studio 服务 |
53-
| Claude Code CLI 或 OpenAI Codex CLI | Agent 引擎(可选,但创建会话需要) |
49+
> You can open the UI and browse files and terminals before installing a provider CLI. See the [Provider Setup Guide](docs/help/providers.md) for details.
5450
55-
### 安装与启动
51+
## How You Can Use It
5652

57-
```bash
58-
# 1. 全局安装
59-
npm install -g @spencer-kit/coder-studio
53+
| Scenario | What you do |
54+
|----------|-------------|
55+
| Start work in the office | Launch the service, open the project, create a Claude or Codex session, and let the Agent begin |
56+
| Check progress during a commute | Open the same workspace on your phone and review Agent output, session status, and Git changes |
57+
| Review changes while away from your desk | Use a tablet to browse files, inspect diffs, and confirm terminal output |
58+
| Continue later on another device | Reconnect to the same workspace and keep going with the same context |
59+
| Share progress with teammates | Let others on the same local network open the workspace in a browser and view the current state |
6060

61-
# 2. 启动并自动在浏览器中打开
62-
coder-studio open
63-
```
61+
## What You Can Do
62+
63+
- Run multiple Agent sessions inside one workspace
64+
- Watch the file tree, editor, and Git diff while the Agent is working
65+
- Open a Shell terminal to validate the Agent's output yourself
66+
- Use the full multi-panel desktop layout and keyboard shortcuts
67+
- Monitor workspace and session progress from a phone or tablet
68+
- Manage themes, language, shortcuts, and provider arguments from Settings
69+
70+
## Works Across Devices
6471

65-
如果浏览器未自动弹出,可手动访问终端输出的 URL(通常为 `http://localhost:4173`)。
72+
Coder Studio runs in a standard browser and does not require a desktop client:
6673

67-
### 创建第一个会话
74+
- **Desktop**: best for full coding sessions, editing files, reviewing diffs, and managing panels
75+
- **Tablet**: useful for lightweight review, tracking Agent progress, and browsing project state
76+
- **Phone**: useful for checking session status, terminal output, and workspace changes on the go
6877

69-
1. 在浏览器界面点击 **"打开工作区"**,选择你的项目目录
70-
2. 点击 **"创建会话"**,选择 Claude 或 Codex
71-
3. 开始与 Agent 对话、查看文件、执行命令
78+
The same service URL can be opened from different devices, and the interface adapts to the screen automatically.
7279

73-
![工作区界面](docs/help/assets/screenshot-workspace.png)
80+
**Desktop Workspace**
7481

75-
> 没有安装 Provider CLI 也能先打开界面浏览文件和终端,稍后再安装即可。详细安装步骤见 [Provider 配置指南](docs/help/providers.md)
76-
### 界面预览
82+
![Desktop Workspace](docs/help/assets/screenshot-pc.png)
7783

78-
**PC 端工作区**
84+
**Mobile Workspace**
7985

80-
![PC 端工作区](docs/help/assets/screenshot-pc.png)
86+
![Mobile Workspace](docs/help/assets/screenshot-mobile.png)
8187

82-
**移动端工作区**
88+
## Core Capabilities
8389

84-
![移动端工作区](docs/help/assets/screenshot-mobile.png)
90+
- **Workspace**: a local project directory with its own files, terminals, Git state, and sessions
91+
- **Session**: an independent Claude or Codex Agent run inside a workspace
92+
- **Terminal**: both Shell terminals and Agent terminals are supported
93+
- **Git View**: inspect branches, changed files, and diffs directly inside the workspace
94+
- **Settings**: manage themes, language, shortcuts, and provider startup arguments in one place
8595

86-
## 常用操作
96+
## Documentation
8797

88-
- **切换主题**:设置页可切换浅色 / 深色主题
89-
- **切换语言**:设置页支持中文 / 英文切换
90-
- **查看 Git 状态**:工作区内直接浏览变更文件和 diff
91-
- **终端**:底部面板可打开 Shell 终端运行命令
92-
- **移动端访问**:同一局域网内用其他设备浏览器访问本机 IP + 端口
98+
- [Quick Start](docs/help/quick-start.md) - From install to first launch
99+
- [App Overview](docs/help/app-overview.md) - Core concepts and capabilities
100+
- [Provider Setup](docs/help/providers.md) - Install and configure Claude Code / Codex CLI
101+
- [Desktop Guide](docs/help/desktop-guide.md) - Desktop interface and workflows
102+
- [Mobile Guide](docs/help/mobile-guide.md) - Phone and tablet usage
103+
- [Common Workflows](docs/help/workflows.md) - Task-oriented usage patterns
104+
- [Troubleshooting](docs/help/troubleshooting.md) - Common issues and fixes
105+
- [CLI Reference](docs/help/cli.md) - Command-line reference
93106

94-
## 文档
107+
## Installation Requirements
95108

96-
- [快速开始](docs/help/quick-start.md) — 从零到第一次使用的完整流程
97-
- [App 功能总览](docs/help/app-overview.md) — 核心概念与能力说明
98-
- [桌面端使用指南](docs/help/desktop-guide.md) — PC 端界面与操作
99-
- [移动端使用指南](docs/help/mobile-guide.md) — 手机/平板操作指南
100-
- [Provider 配置](docs/help/providers.md) — Claude Code / Codex CLI 安装与配置
101-
- [常见工作流](docs/help/workflows.md) — 任务式操作指南
102-
- [排障指南](docs/help/troubleshooting.md) — 常见问题与排查
103-
- [CLI 参考](docs/help/cli.md) — 命令行命令速查
109+
| Requirement | Notes |
110+
|-------------|-------|
111+
| Node.js >= 24.0.0 | Required to run the Coder Studio service |
112+
| Claude Code CLI or OpenAI Codex CLI | Required to create Agent sessions; files and terminals can still be used before installing a provider |
104113

105-
## 开发
114+
## Contributor Notes
106115

107-
> **仅限贡献者**:以下命令用于本地开发和贡献代码,普通用户无需执行。
108-
> 普通用户请直接参考上方的"快速开始"。
116+
The following section is for repository contributors. Regular users can start with the quick start and product docs above.
117+
118+
### Local Development
109119

110120
```bash
111-
# 克隆仓库
112121
git clone https://github.com/spencerkit/coder-studio.git
113-
114-
# 安装依赖
115122
pnpm install
116-
117-
# 启动开发环境
118123
pnpm dev
124+
```
119125

120-
# 运行测试
121-
pnpm acceptance:phase1
126+
### Common Commands
122127

123-
# 构建CLI
128+
```bash
129+
pnpm acceptance:phase1
124130
pnpm build:cli
131+
pnpm lint
132+
pnpm lint:fix
133+
pnpm format
134+
pnpm check
125135
```
126136

127-
### 代码质量
128-
129-
- `pnpm lint`
130-
用于查看仓库当前的 lint 诊断,不会改写文件,通常在开始修复前先运行。
131-
- `pnpm lint:fix`
132-
用于在修完代码后应用 Biome 可安全自动修复的 lint 修改,再检查生成的 diff。
133-
- `pnpm format`
134-
用于统一仓库中的代码格式,提交前运行可以让本次修改与现有格式规则保持一致。
135-
- `pnpm check`
136-
用于在发起 PR 或做阶段性验收前运行聚合检查,一次验证格式、lint 和导入整理。
137-
138-
## 架构
139-
140-
> **贡献者参考**:以下技术栈信息面向代码贡献者,普通用户无需了解。
137+
### Tech Stack
141138

142-
- **Frontend**: React + Vite + Jotai
143-
- **Backend**: Fastify + WebSocket
144-
- **Terminal**: xterm.js + node-pty
145-
- **Editor**: Monaco Editor
146-
- **Storage**: SQLite (`node:sqlite`)
139+
- Frontend: React + Vite + Jotai
140+
- Backend: Fastify + WebSocket
141+
- Terminal: xterm.js + node-pty
142+
- Editor: Monaco Editor
143+
- Storage: SQLite (`node:sqlite`)
147144

148-
## 开发文档
145+
### Development Docs
149146

150147
- [PRD](docs/PRD.zh-CN.md)
151148
- [Design Spec](docs/superpowers/specs/2026-04-13-coder-studio-design.md)
152-
- [更多开发文档](docs/)
149+
- [More Docs](docs/)
153150

154-
## 许可证
151+
## License
155152

156153
MIT

0 commit comments

Comments
 (0)