Coder Studio

高保真视觉稿 · Aurora Mint 暗色主题

v0.2.6 — 2026.04.13
欢迎页 工作区 分割面板 Git 变更 设置 认证 命令面板 启动浮层
欢迎页面
未打开任何工作区时显示 — 包含顶栏空状态和居中欢迎卡片
Welcome Screen — /workspace
No workspaces open
Get Started

Welcome to Coder Studio

A local-first AI coding workbench. Launch AI agent sessions, review generated code, manage Git changes, and run terminals — all in one place.

Open Settings
工作区页面
标准工作区 — 左侧文件树、中央 Agent 会话(运行中)、底部终端面板
Workspace — coder-studio
coder-studio 3 ×
my-project
Quick Actions
REPOSITORY NAVIGATOR
main
Files
Git Diff
▼ 📁 apps
▼ 📁 web
▶ 📄 main.ts
▶ 📄 AppController.tsx
▶ 🎨 styles.css
▶ 📁 server
▶ 📁 packages
▶ 📋 package.json
▶ 📝 README.md
▶ ⚙️ .gitignore
SESSION-01 Claude Running
×
❯ ~/coder-studio claude --workspace .
✔ Agent initialized. Model: claude-sonnet-4-20250514
✔ Workspace loaded: /home/spencer/coder-studio
❯ Analyzing project structure...
Found 3 workspaces, 28 packages
Reading tsconfig.json, vite.config.ts...
❯ Analyzing AppController.tsx routing...
Routes detected: /, /workspace, /settings
⚡ Processing request: "Add dark mode toggle to settings"
Reading settings page components...
TERMINAL bash — 1
❯ ~/coder-studio git status
On branch main
Changes not staged for commit:
modified: apps/web/src/AppController.tsx
❯
分割面板 — 多 Agent 会话
垂直分割布局 — 两个 Agent 会话并行运行,各自拥有独立终端和 Supervisor
Split Pane Layout — Vertical Split
coder-studio
×
REPOSITORY NAVIGATOR
feature/ai-agent
Files
Git Diff
▶📁src
▶📁components
▶📄App.tsx
▶📋package.json
SESSION-01 Claude Running
×
❯ claude --prompt "implement auth"
✔ Created src/auth/AuthGate.tsx
✔ Created src/auth/auth.service.ts
⚡ Writing middleware for session...
Reading existing auth patterns...
❯
SESSION-02 Codex Idle
×
❯ codex --prompt "add tests"
✔ Created tests/test_auth.test.ts
Waiting for next instruction...
❯
TERMINAL bash — 1
❯ ~/workspace npm run build
✓ Built successfully in 2.3s
❯
Git 变更视图
左侧面板切换到 Git Diff 视图 — 显示变更分组、暂存操作和提交输入
Git Changes View — Source Control
coder-studio
×
SOURCE CONTROL
feature/ai-agent
Files
Git Diff
Staged 2
📄 AuthGate.tsx src/auth/ Staged
📄 auth.service.ts src/auth/ Staged
Changes 3
📄 AppController.tsx src/app/ Modified
📄 WorkspaceScreen.tsx src/features/ Modified
📄 SupervisorObjectiveDialog.tsx src/features/ Modified
Untracked 1
📄 supervisor.test.ts tests/ Untracked
apps/web/src/auth/AuthGate.tsx
Preview
Diff
1import React, { useState } from 'react';
2import { AuthService } from './auth.service';
3
4// Authentication gate component
5export const AuthGate: React.FC = () => {
6 const [status, setStatus] = useState<AuthStatus>('loading');
7 const [passphrase, setPassphrase] = useState('');
8
9 const handleLogin = async () => {
10 try {
11 const result = await AuthService.login(passphrase);
12 setStatus('unlocking');
13 } catch (err) {
14 setStatus('error');
15 }
16 };
17
18 if (status === 'loading') return <Spinner />;
19 if (status === 'blocked') return <BlockedScreen />;
20
21 return (
22 <div className="auth-layout">
23 <AuthCard onSubmit={handleLogin} />
24 </div>
25 );
26};
设置页面
设置页 — 左侧导航 + 内容区域,展示通用设置、Provider 设置和外观设置
Settings — /settings
Back to App
Settings
General
Claude
Codex
Appearance
Agent Defaults
Configure default behavior for agent sessions.
Default Agent Provider
Claude
Codex
Completion Notifications
Get notified when agent sessions complete.
Completion Notifications
Notify Only In Background
Notification Permission
✓ Granted
Appearance
Customize the look and feel of the interface.
Theme
Dark
Light (Coming Soon)
Terminal Rendering
Standard
Compatibility
Language
English
中文
认证页面
网络部署时的密码验证界面 — 背景带有工作台线框预览
Authentication — Sign In
Coder Studio
Sign In
Enter the passphrase to access your workspaces.
Session idle timeout: 30 minutes
Max session duration: 24 hours
Allowed root: /home/spencer/workspace
命令面板
通过 Ctrl/Cmd + K 触发的全局命令搜索面板
Command Palette — Ctrl+K
coder-studio
COMMAND PALETTE 12 actions
Split Pane Vertically
Split the active agent pane into left and right panes
⌘D
Split Pane Horizontally
Split the active agent pane into top and bottom panes
⇧⌘D
Toggle Focus Mode
Hide non-essential UI elements for distraction-free work
F
Toggle Terminal Panel
Show or hide the bottom terminal panel
工作区启动浮层
选择本地文件夹和执行目标以启动新工作区
Workspace Launch Overlay
Get Started

Welcome to Coder Studio

START WORKSPACE
Local Folder
Select a directory to use as the workspace root.
/home/spencer/
Target: Native
×
Local Folder
Select a directory on your machine
Remote Git
Clone a repository (Coming Soon)
Native
WSL
/ ~ /home/spencer
📁 workspace projects
📁 coder-studio 12 items Enter folder →
📁 my-project 8 items
📁 dotfiles 5 items