Skip to content

spencerkit/coder-studio

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

101 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Coder Studio

English | 中文

Coder Studio 是一个本地优先的开发工作台,当前以本地 server + Web 界面形态运行,用于把仓库接入、Claude Agent 运行、代码浏览与编辑、Git 操作、内置终端放到同一个界面中。

社区支持

感谢 LinuxDo 各位佬的支持!欢迎大家加入 LinuxDo,各种技术交流、AI 前沿资讯、AI 经验分享,尽在 LinuxDo!

项目是什么

这个项目当前的产品形态不是“通用 AI 平台”,而是一个围绕真实 Git 仓库工作的本地工作台;默认通过本地 server 暴露界面与 API。

它解决的核心问题是:

  • 用一个工作区连接本地仓库或远程仓库
  • 在同一界面里启动和并行拆分 Agent 任务
  • 一边看 Agent 输出,一边检查文件、Diff、Git 状态和终端命令
  • 用更少的上下文切换完成“提任务 → 跑 Agent → 看改动 → 提交代码”的闭环

当前核心功能

  • 工作区接入:支持 Remote GitLocal Folder
  • 执行目标:支持 Native,在环境允许时支持 WSL
  • Agent 会话:通过分屏 Pane 并行运行多个任务
  • 任务启动:Agent 未启动前显示草稿输入框,首条输入用于生成 session 名称
  • Agent 交互:启动后切换为 PTY 终端式交互
  • 代码面板:文件树、文件搜索、Monaco 预览/编辑、文件保存
  • Git 面板:查看改动、Stage/Unstage/Discard、Commit
  • 终端面板:多终端创建、切换、关闭
  • 快速操作:Cmd/Ctrl + K 打开命令面板
  • 设置:Launch Command、Idle Policy、语言切换
  • 国际化:中文 / English
  • Public Mode:单口令鉴权、会话 Cookie、IP 封禁、root.path 单根目录白名单

界面预览

以下截图使用的是一个专门准备的 demo 工作区和 mock 数据,目的是把真实工作流里的关键界面展示清楚。

工作台总览

Coder Studio 工作台总览

  • 左侧是并行 Agent Pane,可同时跑多个任务
  • 右侧是代码面板,支持文件搜索、Monaco 编辑与预览
  • 底部是内置终端,可以直接检查 git status、跑脚本、看命令输出

多 Agent 并行

Coder Studio 多 Agent 并行

  • 一个工作区内可以把任务拆成多个 Pane 并行推进
  • 每个 Pane 都保留独立的命令流和上下文
  • 很适合把“主任务 / 验证 / 文档整理”拆开跑

代码与变更审阅

Coder Studio 代码与变更审阅

  • 右侧 Source Control 面板可直接查看改动、填写提交信息
  • 代码区支持边看文件边做 Diff / Git 审阅
  • 适合在 Agent 输出、代码检查、提交动作之间快速切换

3 分钟入门

如果你想最快跑起来,按下面做:

  1. 准备环境:安装 Node.jspnpmRustGit,如果你要真正启动 Agent,再准备一个可执行的 claude 命令。
  2. 安装依赖:在仓库根目录执行 pnpm install
  3. 启动应用:执行 pnpm dev:stack,然后打开 http://127.0.0.1:5174
  4. 首次进入:如果启用了公网模式,先输入访问口令;进入后,在工作区选择之前,应用会先做运行环境校验,检查 Claude CodeGit 是否可用。
  5. 选择工作区:在浮层里选择 Local FolderRemote Git,再选择 NativeWSL
  6. 开始工作:进入工作区后,在 Agent Pane 输入第一条任务并回车;然后根据需要打开代码面板、Git 面板和终端面板。

如果你使用已经发布的 npm CLI,也可以这样启动:

coder-studio start
coder-studio open

安装前提

在本地运行前,请先准备:

  • Node.js
  • pnpm
  • Rust toolchain
  • Tauri 2 对应平台的系统依赖
  • Git

如果你需要真正启动 Agent,还需要:

  • 一个可执行的 Agent 命令,默认是 claude
  • 如果使用 WSL,目标环境中也需要能执行对应命令

安装

pnpm install

目录分层

当前仓库按三层组织:

  • 源码层
    • apps/web:前端源码
    • apps/server:Rust / Tauri 服务端源码
    • packages/cli:npm CLI 包源码与发布元数据
    • packages/cli/src:CLI TypeScript 源码
  • 模板层
    • templates/npm/platform-packages/*:各平台 npm 包模板
  • 产物层
    • .build/web/dist:前端构建产物
    • .build/server/target:Rust 构建产物
    • .build/cli:CLI 编译产物
    • .build/stage/npm/*:发布前 staging 包
    • .artifacts/:最终 tarball、manifest、checksum

这样做的目标是让“可维护源码”、“发布模板”和“构建产物”不再混在同一层目录里。

npm CLI 安装

发布后可以直接安装:

npm install -g @spencer-kit/coder-studio

安装后可用命令:

coder-studio start
coder-studio stop
coder-studio restart
coder-studio status
coder-studio logs -f
coder-studio open
coder-studio doctor
coder-studio config show
coder-studio config validate
coder-studio config root set /srv/coder-studio/workspaces
coder-studio config password set --stdin
coder-studio auth status
coder-studio auth ip list
coder-studio help start
coder-studio help completion
eval "$(coder-studio completion bash)"
coder-studio completion install bash
coder-studio completion uninstall bash

详细命令说明见:docs/development/cli.md

运行

方式 1:联动开发模式(推荐)

pnpm dev:stack

这会同时拉起前端开发服务器、本地 server 和开发态 E2E 所需的联动环境。

方式 2:前后端分离调试

终端 1:

pnpm dev

终端 2:

pnpm dev:server

当前开发端口:

  • 前端:http://127.0.0.1:5174
  • 本地 server 传输服务:http://127.0.0.1:41033

前端开发服务器会把 /api/ws/health 代理到本地 server。

构建

前端构建:

pnpm build

构建 server runtime:

pnpm build:server

构建 CLI:

pnpm build:cli

构建完整运行时:

pnpm build:web
pnpm build:server
pnpm build:cli

公开部署

如果要把这个项目部署到公网可访问设备上,当前版本已经提供:

  • 单口令登录
  • HttpOnly session cookie
  • 同一 IP 10 分钟内 3 次口令错误后封禁 24 小时
  • 基于 root.path 的服务端单根目录白名单
  • 支持通过 HTTP 或 HTTPS 对外访问,推荐在公网入口前使用 HTTPS 反向代理

部署细节请看:

  • 中文部署文档:docs/deployment/README.md
  • English Deployment Guide: docs/deployment/README.en.md

用户如何上手

  1. 启动应用。
  2. 在启动浮层中选择 Remote GitLocal Folder
  3. 选择运行目标:NativeWSL
  4. 打开工作区后,在 Agent Pane 的输入框里输入第一条任务。
  5. 回车后,应用会创建 session、启动 Agent,并把首条输入作为 session 标题。
  6. 如需并行处理任务,使用 Pane 分屏按钮新增一个草稿任务区。
  7. 打开右侧代码面板查看文件、编辑内容或检查 Diff。
  8. 打开 Git 面板做 Stage / Unstage / Discard / Commit。
  9. 打开终端面板执行仓库命令。

常用快捷操作

  • Cmd/Ctrl + K:打开快速操作面板
  • Cmd/Ctrl + N:新建工作区
  • Cmd/Ctrl + Shift + [:切换到上一个工作区
  • Cmd/Ctrl + Shift + ]:切换到下一个工作区
  • Cmd/Ctrl + S:保存当前文件
  • F:切换 Focus Mode
  • Alt/⌘ + D:纵向分屏当前 Agent Pane
  • Shift + Alt/⌘ + D:横向分屏当前 Agent Pane

当前边界

以下内容不应视为当前版本已经完整交付:

  • 多 Agent Provider 支持
  • 浅色主题
  • 完整可见的任务队列 UI
  • 完整可见的 Archive 中心
  • 明确的 Worktree 管理入口
  • 完整闭环的自动挂起能力

文档导航

用户文档:

  • 更新日志:CHANGELOG.md
  • 中文 PRD:docs/PRD.md
  • English PRD: docs/PRD.en.md

开发文档:

  • 开发文档入口:docs/development/README.md
  • 部署文档:docs/deployment/README.md
  • CLI 命令手册:docs/development/cli.md
  • npm 发布与 CLI:docs/development/npm-release.md
  • Development Docs: docs/development/README.en.md
  • Deployment Guide: docs/deployment/README.en.md
  • CLI Manual: docs/development/cli.en.md
  • npm Packaging and Release: docs/development/npm-release.en.md
  • 架构说明:docs/development/architecture.md
  • Frontend 状态:docs/development/frontend-state.md
  • Tauri 命令清单:docs/development/tauri-commands.md

About

Coder Studio is a modern AI-native coding workspace designed to bring file management, terminal operations, and intelligent agent workflows into one clean web-based environment. It helps developers build, manage, and collaborate faster with AI-assisted tools in a unified interface.

Resources

Stars

Watchers

Forks

Packages