herdr web ui — 浏览器和手机都能操控 Claude Code 的 PWA 客户端

技能简介

herdr web ui 是 devswha 出品的开源 Progressive Web App，给 herdr 这款 Claude Code / Codex 多窗格终端管理器加了一层远程访问界面。无论你坐在电脑前还是躺在床上用手机，都能读 Claude Code 的回复、发指令、看终端日志——同一个 herdr 会话在浏览器和手机上完全同步，需要你决策时还会推 push 通知。MIT 协议，React + Bun 全栈实现，依赖 herdr 0.9.0+。

核心能力

• 浏览器 + 手机 PWA：支持桌面浏览器访问与手机添加到主屏幕，原生应用级体验
• 实时多工作区同步：把 herdr 的 workspace / tab / split pane 布局完整映射到浏览器，手机上一键切换
• 真·终端转发：点击 chat 中的 Terminal 按钮即可看到 Claude Code 自己的终端，↑ 键调出历史命令，Enter 执行
• 推送通知：别的 workspace 里 Claude Code 问问题时，手机立刻收到「Needs input」推送，点击直达问题卡片
• 截图附件：手机相册里截一张图，纸夹图标上传，自动注入到 pane 目录，Claude 直接读取图片内容
• 远程 SSH：在浏览器里通过 herdr 远程连接到其他开发机，统一操控分布式 Agent

安装配置

• 依赖：herdr 0.9.0+ 必须先装好（GitHub: herdrdev/herdr）
• 系统需求：能跑 Bun（macOS / Linux / Windows）+ 现代浏览器（Chrome / Safari / Edge / Firefox）
• 安装：git clone https://github.com/devswha/herdr-web-ui && cd herdr-web-ui && bun install
• 启动：bun run dev，默认监听本地端口
• PWA 安装：Chrome 浏览器地址栏右侧「安装」按钮，手机 Safari「分享 → 添加到主屏幕」
• 反向代理：公网部署时建议用 Nginx + HTTPS 终止

使用步骤

1. 在开发机上装好 herdr 0.9.0+
2. clone herdr-web-ui 仓库并 bun install
3. 启动 bun run dev，浏览器打开本地端口
4. 在浏览器里点击 workspace，看到 Claude Code 的聊天与终端同步
5. 点击 chat 中的 Terminal 切换按钮，看到 pane 真实终端输出
6. 在手机上用同一 URL 打开（或 PWA），自动同步同一个会话
7. Claude Code 询问时，手机收到 push，一键打开问题卡片回答

适用场景

• 通勤路上用手机操控家里的 Claude Code / Codex
• 多工作区开发者：4 个项目同时跑 4 个 Claude Code，在浏览器侧边栏一键切换
• 远程办公：用浏览器访问办公室开发机的 herdr，无需 SSH 转发
• 演示场景：把 herdr 会话投影到大屏，观众扫码用手机参与提问
• 团队协作：把 herdr 实例部署到内网服务器，团队成员共享 Claude Code 状态

适用人群

• 经常通勤的开发者：在地铁上也能跟 Claude Code 对话
• 多项目并行开发者：4 个 workspace 同时跑 Claude Code，需要统一管理面板
• 远程办公团队：需要跨网络访问开发机 Agent 状态
• 教学场景讲师：把 Claude Code 会话投影演示

工作原理

herdr web ui 通过 Bun + WebSocket 与本地 herdr 进程保持长连接，每个 workspace / tab / split pane 状态被映射成虚拟 DOM 节点。终端交互走 xterm.js，前端把用户输入按 ANSI 转义回发给 herdr 的真实终端，输出按 ANSI 解析再渲染。PWA 用 Service Worker 缓存应用壳与离线能力，push 通知走 Web Push API + VAPID 密钥。整个架构无状态保持在前端，所有会话状态都来自 herdr 进程本身，因此「重启浏览器、换设备登录」都不会丢上下文。

官方链接

• GitHub 仓库：https://github.com/devswha/herdr-web-ui
• 官方网站：https://devswha.github.io/herdr-web-ui/
• 演示页：https://devswha.github.io/herdr-web-ui/demo/
• 使用指南：https://github.com/devswha/herdr-web-ui/blob/main/docs/guide.md
• 依赖 herdr：https://github.com/herdrdev/herdr