当前位置：首页 > news >正文

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

news 2026/5/1 9:02:59

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

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

本文提纲

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

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 审查做成了独立的一等公民流程：

选择组织 → 选择仓库 → 选择 PR
Cockpit 通过 gh CLI 读取 diff
启动一个 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 值得试一下。一行命令的事。