Cockpit：把 Claude Code 从终端里搬出来，装进浏览器

Claude Code 是目前最强的终端 AI 编程工具之一。但它有一个硬伤——它是终端应用。一个窗口、一台机器、前台运行。关掉终端，会话就没了。想在手机上看 Claude 干活？不可能。想同时跑三个项目？开三个 tmux 窗口凑合。

Cockpit 把这件事解决了。它给 Claude Code 套了一层 Web UI，让终端应用变成浏览器服务。一句话启动：npx @alexjbarnes/cockpit。

本文提纲

1. Cockpit 是什么、怎么跑的
2. 三个杀手级场景
3. 代码审查：不只是聊天
4. 定时任务：Claude Code 的 cron
5. 设置中心：一个页面管完所有配置
6. 技术栈和实现细节
7. 局限性

Cockpit 是什么

一句话：Claude Code 的 Web 前端。

它不是替代 Claude Code，而是在 Claude Code 之上架了一层。底层还是 claude CLI 在干活，Cockpit 做的是：

• 把 CLI 进程包装成 WebSocket 服务
• 提供浏览器界面来发送消息、查看输出
• 管理多个会话的生命周期

架构很直接：Next.js 16 + React 19 前端，Node.js 后端通过 WebSocket 实时推送 Claude Code 的输出。Claude Code CLI 作为子进程运行，Cockpit 和它之间是 shell 级别的交互。

所以你需要的依赖很清楚：

• Node.js >= 20
• Claude Code CLI 已安装且在 PATH 上
• Anthropic API Key 已配置
• （可选）GitHub CLI gh 已认证，用于 PR 审查功能

启动之后打开 http://localhost:3001，首次运行设一个密码（scrypt 加密存储），就能用了。默认绑定 0.0.0.0，意味着局域网内其他设备（包括手机）也能访问。

三个杀手级场景

README 里有一段话说得很准确，Cockpit 解决三个核心问题：

1. 手机上用 Claude Code

浏览器打开就行。地铁上、厨房里、任何有浏览器的地方，都能给 Claude 发消息。界面做了移动端适配。这对于"等 Claude 跑完一个任务，随时看结果继续推进"的工作流来说，改变很大。

2. 多会话并行

在终端里跑 Claude Code，你一次只能看一个会话。想切项目？先把当前的挂起，tmux 新开窗口。Cockpit 里，多个会话同时运行，侧边栏切换，关掉浏览器也不中断——会话活在服务器端。

它还有一个细节处理：Claude Code 的 /clear 命令会清空上下文，但在 Cockpit 里，/clear 前的对话记录会被"缝合"保留。你看到的是完整的视觉历史，而不是每次清空后的断裂片段。

3. Cron 驱动的 Claude Code

这是我觉得最实用的功能。你可以设定定时任务：

• 每天早上 9 点让 Claude 扫一遍代码库做健康检查
• 每次 push 后让 Claude 自动审查变更
• 每周五让 Claude 生成周报

每个定时任务可以配置：工作目录、使用的 prompt、模型、思考深度、工具权限白名单、MCP 服务器过滤。运行后生成完整的 transcript，和实时会话一样的渲染效果。

代码审查：不只是聊天

Cockpit 把 GitHub PR 审查做成了独立的一等公民流程：

1. 选择组织 → 选择仓库 → 选择 PR
2. Cockpit 通过 gh CLI 读取 diff
3. 启动一个 Claude Code 会话，范围限定在这个 PR

界面布局：左边 diff，右边聊天。你可以让 Claude 逐文件审查、提出建议、生成审查意见。支持按状态过滤 PR（open、closed、merged、draft），还有 check 状态的轮询。

这比在终端里手动 gh pr diff 再粘贴给 Claude Code 高效太多了。整个流程被封装成一个专门的工作空间。

设置中心：一个页面管完所有配置

Claude Code 的配置分散在多个地方：.claude/agents/、.claude/hooks.json、MCP 配置、CLAUDE.md 文件。Cockpit 把这些全部搬进了 Web UI：

配置项	说明
Agents	全局和项目级别的 Agent 定义
Skills	可复用的 prompt 模板
Hooks	UserPromptSubmit、PreToolUse、PermissionRequest、Stop、SubagentStop 五种钩子
MCP Servers	stdio 和 SSE 类型，带测试按钮
CLAUDE.md	用户级、项目级、项目隐藏级三个 scope 的记忆文件
Slash Commands	自定义斜杠命令

还有使用量追踪：每个会话的实时 token 消耗、总体的 API 花费分析、上下文窗口使用率。这些在终端里是看不到的。

其他值得一提的细节：

• Diff 查看器：分屏和内联两种模式，Shiki 语法高亮
• 文件查看器：带行号和语法高亮，可以拖拽/粘贴上传文件（自动识别类型）
• 消息搜索：跨完整 transcript 的全文搜索
• Plan Mode：Claude 提出计划后，可以批准、批准并清除、拒绝并反馈
• 消息队列：Claude 还在回复时就可以排队下一条消息
• 侧问：/btw 命令，不打断当前会话问一个问题

技术栈和实现细节

从 package.json 里能看到完整的技术选型：

层	技术
框架	Next.js 16 + React 19
语言	TypeScript 6
样式	Tailwind CSS 4
UI 组件	Radix UI + Lucide Icons
代码展示	CodeMirror 6 + Shiki 4 + @pierre/diffs
实时通信	WebSocket (ws 8)
构建	Webpack（生产）+ tsx（开发）
测试	Vitest 4
格式化	Biome 2

有几个有意思的工程决策：

生产构建用 Webpack 而不是 Turbopack。 Changelog 里记录了这个切换：Shiki 的 WASM 在 Turbopack 打包时有 externals 问题，切 Webpack 后解决了。这是一个务实的决定——Turbopack 是 Next.js 的新默认，但不稳定的时候就得回退。

安全处理。 @tensorflow/tfjs-node 被 stub 成空模块，postcss 版本被锁定。前者是 Magika（文件类型检测）的可选依赖，有已知漏洞；后者是因为 postcss 某版本有安全问题。这些在 v0.1.1 的 changelog 里有明确记录。

文件类型检测用 Magika。 Google 的 Magika 库，基于深度学习的文件类型识别，用于上传文件时的自动类型判断。

局限性

只支持 Claude Code。 这是设计上的限定——Cockpit 不是通用 AI 聊天界面，它专为 Claude Code 设计。如果你同时用 Cursor 或 Copilot，Cockpit 管不了。

Windows 未验证。 README 明确写了只在 Linux 和 macOS 上测试过。

项目很新。 v0.1.1，一个贡献者，9 个 star。2026 年 3 月 12 日才创建，4 月 29 日发了第一个版本。功能完整度很高，但稳定性和长期维护还是未知数。

会话不跨重启持久化。 服务重启后会话就没了。会话是内存级的，不是数据库级的。

依赖 Claude Code CLI。 本质上是 shell 调用，所以 Claude Code 的所有能力上限和限制都会透传过来。

---

Cockpit 做的事不复杂——给 Claude Code 加了个 Web 壳。但这个"壳"解决的都是真实痛点：手机访问、多会话、定时任务、PR 审查、配置管理。对于日常重度使用 Claude Code 的人，尤其是需要在多个项目间频繁切换、或者想让 Claude 自动化执行定期任务的开发者，Cockpit 值得试一下。一行命令的事。

npx @alexjbarnes/cockpit

---

作者: itech001
来源: 公众号：AI人工智能时代
主页: https://www.theaiera.cn，每日分享最前沿的AI新闻和技术。

本文首发于 AI人工智能时代，转载请注明出处。