Merge develop into main

.changeset/serious-lights-rest.md

@@ -0,0 +1,5 @@
+---
+"@spencer-kit/coder-studio": patch
+---
+
+Refresh the published workspace screenshots in the README and help guides so they match the current desktop and mobile editor shell UI.

docs/promotion/article-2026-05-heavy-ai-user-day.md

@@ -0,0 +1,131 @@
+# 重度 AI 编程用户的一天：我怎么把 Claude Code / Codex 工作流搬进浏览器工作台
+
+如果你现在已经是 `Claude Code` 或 `Codex` 的重度用户，大概率会有一种很熟悉的感觉：
+
+模型越来越能干，但你的工作流还是很碎。
+
+Agent 在终端里跑，代码在编辑器里看，Diff 要去 Git 工具里翻，离开工位之后想看进度，还得重新 SSH、远程桌面，或者干脆等回到电脑前再说。很多时候，真正拖慢效率的已经不是模型能力，而是这套工作流根本没有被接住。
+
+我最近就在解决这个问题。
+
+准确地说，我不是在找一个“更强的 AI 编程工具”，而是在找一个能承载 `Claude Code / Codex` 的工作台。最后，我把自己的日常工作流搬进了浏览器里的 `Coder Studio`。
+
+它不是云 IDE，也不是简单把终端塞进网页，而是一个本地优先的 AI 编程工作台：服务跑在你自己的机器上，但你可以通过浏览器在桌面、平板、手机上访问同一个 workspace，把 Agent、文件、Git 和终端放到同一个界面里。
+
+![Coder Studio 工作区总览](../help/assets/screenshot-workspace-overview.png)
+
+## 早上：在桌面端发起真正的 AI 编程任务
+
+我现在一天的开始，通常不是先打开一堆终端窗口，而是先打开 `Coder Studio` 的 workspace。
+
+比如我要改一个功能时，我会这么分工：
+
+- 开一个 `Claude Code` 会话，负责重构主逻辑
+- 再开一个 `Codex` 会话，处理测试、边角修复或者辅助验证
+- 同时把文件树、编辑器、Git 变化和终端都放在一个界面里盯着
+
+以前这种工作流也能做，但体验很散。
+
+你会在多个终端标签之间来回切，在编辑器和 Git 工具之间跳转，脑子里还得一直记住“哪个 Agent 正在改什么、改到了哪里、工作区现在脏成什么样”。Agent 一多，注意力就会被这些上下文切换不断打断。
+
+`Coder Studio` 比较对我胃口的一点，就是它把这些东西收拢了。
+
+我不需要一边盯终端输出，一边再切到别的应用里看文件改动。Agent 会话、代码、Diff、终端，本来就属于同一条工作流，放回一个工作台里才顺。
+
+![Coder Studio 桌面端工作区](../help/assets/screenshot-pc.png)
+
+## 中午：离开工位之后，工作流不再断掉
+
+过去最烦的一种情况是：Agent 还在跑，但人已经离开工位了。
+
+这时候你其实很想做三件事：
+
+- 看它现在跑到哪一步了
+- 看它改了哪些文件
+- 判断这次输出值不值得你回去继续接手
+
+传统做法要么是远程桌面，要么是 SSH 进去硬看终端输出。前者在手机上几乎没法用，后者又看不到完整的 workspace 上下文。
+
+这也是我开始认真看“浏览器工作台”这条路的原因。
+
+在 `Coder Studio` 里，我中午出门之后，手机上直接打开同一个 workspace，就能继续看 Agent 的输出、文件变化和 Git 状态。重点不是“手机上也能编程”这种噱头，而是工作流的连续性没有断。
+
+![Coder Studio 移动端工作区](../help/assets/screenshot-mobile.png)
+
+这点对重度 AI 编程用户很重要。
+
+因为我们现在越来越多的时间，不是花在亲手敲每一行代码上，而是花在：
+
+- 发起任务
+- 观察执行
+- 判断结果
+- 中途纠偏
+- 最后接管收尾
+
+如果这些环节只能被绑死在某一台电脑前，其实还是低效。
+
+## 晚上：换一台电脑继续，不需要重新接管环境
+
+晚上回家继续干活时，很多工具的问题会再次暴露。
+
+你需要重新连环境，重新打开项目，重新找刚才那个终端，重新确认 Agent 跑到哪里，重新建立上下文。流程不是不能继续，只是很不丝滑。
+
+`Coder Studio` 的思路很简单：
+
+`Deploy once, code everywhere.`
+
+服务启动一次，同一个 workspace 可以在不同设备上继续访问。办公室电脑发起的任务，晚上回家在另一台电脑上打开浏览器就能接着看。不是重新开始一份环境，也不是重新接管一台远程机器，而是继续同一个工作区。
+
+对 `Claude Code / Codex` 这种本来就偏“异步协作式”的工作方式来说，这种跨设备连续性比我想象中更有价值。
+
+## 为什么这类用户会需要一个“工作台”
+
+我现在越来越觉得，`Claude Code / Codex` 的重度用户，后面一定会遇到一个共同问题：
+
+不是模型不够强，而是工作流太碎。
+
+你会同时遇到这些需求：
+
+- 想并行跑多个 Agent
+- 想一边看输出，一边审代码改动
+- 想把终端、编辑器、Git 放到一起
+- 想离开工位后还能看进度
+- 想换设备时不要重新接手环境
+- 想保留本地运行和代码隐私，而不是把项目整个丢到云 IDE
+
+这时候你需要的，已经不是又一个聊天窗口，也不是又一个“AI 功能入口”，而是一个真正的工作台。
+
+`Coder Studio` 让我比较认可的地方也正在这里：
+
+- 它是`本地优先`的，代码留在你自己的机器上
+- 它支持 `Claude Code` 和 `Codex` 这类 CLI Agent 工作流
+- 它把 `Agent + 文件 + Git + 终端` 放进一个浏览器界面
+- 它不是只照顾桌面端，手机和平板也能接住查看和续接场景
+
+## 这工具适合谁，不适合谁
+
+如果你属于下面这类人，`Coder Studio` 会比较有感觉：
+
+- 每天都在用 `Claude Code / Codex`
+- 经常一边跑 Agent，一边盯文件和 Git 变化
+- 会在办公室、家里、移动设备之间切换
+- 希望保留本地环境，不想完全依赖云 IDE
+
+但如果你只是偶尔让 AI 帮你补几行代码，或者基本只在一台电脑、一个终端里工作，那它未必是刚需。
+
+它更适合已经进入“AI 编程工作流阶段”的用户，而不是只想体验一下模型能力的人。
+
+## 最后
+
+我现在对 AI 编程工具的判断标准，已经慢慢变了。
+
+以前我最关心的是“模型强不强”。现在我更关心的是：这套工作流能不能让我在不同设备之间连续工作，能不能让我同时管理多个 Agent，能不能把终端、代码、Git 和上下文放回同一个地方。
+
+从这个角度看，`Coder Studio` 更像是在补 AI 编程工作流里的那块缺口。
+
+如果你已经是 `Claude Code / Codex` 的重度用户，也许下一步该优化的，不只是提示词，而是你的工作台。
+
+```bash
+npm install -g @spencer-kit/coder-studio
+coder-studio open
+```

docs/superpowers/plans/2026-05-01-mobile-friendly-phase-1.md

@@ -16,7 +16,7 @@
 
 **New files:**
 - `packages/web/src/shells/shared/use-workspace-bootstrap.ts` — shared bootstrap/navigation hook extracted from desktop shell
-- `packages/web/src/shells/mobile-shell/mobile-topbar.tsx` — workspace pill, connection text, more-actions trigger
+- `packages/web/src/shells/mobile-shell/mobile-topbar.tsx` — workspace pill, connection text, direct settings trigger
 - `packages/web/src/shells/mobile-shell/mobile-dock.tsx` — Files / Terminal dock buttons
 - `packages/web/src/shells/mobile-shell/mobile-sheet.tsx` — generic fullscreen mobile sheet with backdrop + close affordance
 - `packages/web/src/shells/mobile-shell/mobile-workspace-drawer.tsx` — workspace list drawer with workspace switching and secondary actions
@@ -29,7 +29,7 @@
 
 **No changes in Phase 1:**
 - `features/agent-panes`, `features/terminal-panel`, `features/workspace/*`, `features/code-editor/*`
-- command-palette mobile sheet conversion
+- command-palette mobile sheet conversion and workspace-topbar exposure
 - gesture hooks for swipe/drag interactions beyond tap/backdrop close
 
 ---
@@ -170,8 +170,7 @@ Render:
 Responsibilities:
 - workspace pill showing active workspace name
 - connection label (`已连接`, `连接中`, `重连中`, `离线`, `另一个标签页已激活`)
-- `⋯` button toggling a small action menu
-- action menu items for Settings and Quick Actions
+- direct settings icon button
 
 - [ ] **Step 4: Implement `MobileWorkspaceDrawer`**
 

docs/superpowers/specs/2026-04-30-mobile-friendly-design.md

@@ -59,7 +59,7 @@
 | D3 | **断点：`max-width: 899px` OR `pointer: coarse`** | 双条件覆盖外接键鼠 iPad、带触屏小笔记本两种边角 |
 | D4 | **桌面 split 状态在移动端只读，不回写** | 移动端只是不同的"取景器"，不污染桌面布局 |
 | D5 | **Files / Git 同 sheet 复用桌面 panel-tabs 结构** | 镜像桌面信息架构，零改动复用 |
-| D6 | **Dock = Files + Terminal 二项极简** | Editor 是 file 的 consequence、Git 合并进 Files、Supervisor 走 chat 顶徽章、Settings/CP 进 topbar `⋯` |
+| D6 | **Dock = Files + Terminal 二项极简** | Editor 是 file 的 consequence、Git 合并进 Files、Supervisor 走 chat 顶徽章、Settings 走 topbar 直达按钮 |
 | D7 | **Supervisor 改为 chat 上方的状态徽章** | Supervisor 是 agent 执行 objective 的伴生概念，与 chat 强相关，不必占 dock 槽位 |
 | D8 | **Settings 走整屏路由 + nav stack；其他二级走 sheet** | Settings 有真实层级 + URL 语义，路由优于 sheet；其他无层级用 sheet 一致 |
 | D9 | **同时只有一个 sheet 存在** | 切换 dock item 时新 sheet 替换旧 sheet，避免多层嵌套引发"我在哪一层"焦虑 |
@@ -118,7 +118,7 @@ return viewport === 'mobile' ? <MobileShell /> : <DesktopShell />;
 
 ```
 ┌──────────────────────────────────────────┐
-│ ☰  my-app ▾           ● 已连接    ⋯      │  topbar           44px
+│ ☰  my-app ▾           ● 已连接    ⚙      │  topbar           44px
 ├──────────────────────────────────────────┤
 │ [● Claude] [⏳ Codex²] [✓ Gemini]   +    │  agent chips      44px
 │                                  📍 3/8  │  supervisor 徽章（条件显示）
@@ -140,7 +140,7 @@ return viewport === 'mobile' ? <MobileShell /> : <DesktopShell />;
 |---|---|
 | 左 | `☰` + 当前 workspace 名 + `▾`（pill，整体可点 ≥ 44×44px） |
 | 中 | 连接状态点 + 文字（已连接 / 重连中 / 离线） |
-| 右 | `⋯` 溢出菜单：Settings / 主题 / 命令面板 / 帮助 / 登出 |
+| 右 | `Settings` 直达按钮（图标） |
 
 ### 3.3 Workspace 抽屉（点 pill 触发）
 
@@ -353,7 +353,7 @@ drawer 永远盖过 sheet，sheet 永远盖过 chat。
 | Auth / Login | 居中 modal | **整屏路由**，卡片 100% 宽 + 上下 padding | 仅 CSS |
 | Welcome | 主区居中 | **整屏路由**，按钮纵向 stack、字号放大 | 仅 CSS |
 | Settings | 居中 modal + 左右栏分类 | **整屏路由 + nav stack**：分类 → 详情，返回箭头回列表 | 加一层 nav stack 包装 |
-| Command Palette | 浮层 modal | **整屏 sheet**，topbar `⋯` 触发 | sheet 容器 + 触摸优化 |
+| Command Palette | 浮层 modal | **整屏 sheet**，通过独立入口触发，不挂在 workspace topbar 更多菜单下 | sheet 容器 + 触摸优化 |
 | Branch quick pick | 浮层 | 半屏 sheet（在 Git sheet 内 push） | sheet 容器 |
 | Workspace launch modal | 居中 modal | **整屏 sheet**（多步表单） | sheet 容器 |
 | Worktree modal | 居中 modal | 同上 | sheet 容器 |