企业官网建设流程全解析

herdr-web-ui 是 herdr 的浏览器与手机端客户端，让你为每个 Agent 窗口（pane）提供聊天和实时终端，还能通过 SSH 连接远程电脑、接收 Web 推送提醒。其中最能帮上忙的两个功能是文件浏览器（Browse files）和Git Diff 视图：Agent 写完代码后，你不用切回终端敲git diff，在网页或手机上点几下就能看完整改动列表和逐行对比。这篇教程带你走完整个流程。

文件浏览器从哪里打开：两个入口

文件浏览器围绕"当前 Agent 所在的工作目录"工作，有两个入口：

面板右上角还有放大镜图标，可以把当前文件夹直接丢进命令面板继续跳转。文件浏览器内部有两个标签页：

• Browse（浏览）：树形目录浏览器，点开任意文件，进入文件查看器——图片、视频、音频、PDF、文本都支持，还能下载到手机。
• Changes（变更）：列出该目录所在 git 仓库的改动，也就是下面的 Git Diff 视图。

用 Changes 标签查看 Git 变更：三种对比范围

切到Changes标签后，列表按文件夹树组织，每个文件一行，显示 git 状态字母（M、A、D等）以及新增/删除的行数，文件夹可以折叠，折叠状态在刷新后依然保留。你可以选择三种对比范围：

1. Working tree（工作区）：未提交的所有改动，最常用的模式；
2. Staged（暂存区）：已git add到暂存区的内容；
3. Commits（任意两个提交）：填写 base 与 head（提交名或哈希），点 Compare 即可对比历史版本。

打开单个文件的 Diff：统一/分栏、复制补丁与补丁

点击变更列表中的任意一行，就会打开该文件的 Diff 视图（实现见 RepoDiffViewer.tsx），顶栏提供：

• Unified / Split：统一视图或左右分栏视图，在 设置 → Chat → File viewer → Diff layout 中调整；手机端自动显示为单栏；
• Copy path：复制文件路径，方便发给别人或粘贴进终端；
• Copy patch：复制 git 原样输出的补丁文本；
• Open file：直接在文件查看器中打开该文件的完整内容。

每个变更块周围的未改动上下文行默认折叠为一行，展开可看全貌，1 万行级别的超长 diff 也只渲染可视区域内的行，滚动不卡顿（相关实现见 RepoDiff.tsx）。

捷径提示：聊天里每个回合的 "Worked for …" 工作块会列出该回合编辑工具动过的文件，直接点击这些文件链接，打开的是同一个 Diff 视图——审查 Agent 某一轮改动时比手动翻列表更快。

手机和远程电脑也能看：Diff 视图的跨设备体验

文件浏览器与 Diff 视图在手机上以全屏抽屉（sheet）呈现，下滑或系统返回先关闭文件再关闭面板，层级清晰。如果你的 Agent 跑在通过 SSH 接入的远程电脑上，变更列表也是在那台电脑上本地读取的仓库状态，延迟与权限和在你自己终端里执行git diff一致。

放心看：只读、有上限、不会误操作

Git Diff 视图的后端（repo-diff.ts）坚持几个安全设计：

• 只读：所有 git 调用都是无 shell 的参数数组，绝不写入仓库；
• 有上限：文件列表最多 2000 个、单个补丁超过 1 MiB 会如实提示"过大"而不是截断半个 hunk；
• 有超时：单次 git 进程最长 10 秒，超时即终止，不会挂死页面；
• 权限等同终端：它只能读到该服务器用户能读到的内容，不多不少。

更多细节可查阅官方指南中的功能表：docs/guide.md，相关组件源码在 FilesDialog.tsx 与 RepoChanges.tsx。

总结：打开Browse files → Changes，选对比范围，点开文件看 Diff——三步即可审查 Agent 的全部改动。配合聊天工作块里的文件直达链接，"Agent 到底改了哪些代码"这个问题，在 herdr-web-ui 里永远只有两到三次点击的距离。