AI Agent 的交互界面正经历从「命令行优先」向「多端无缝」的范式转移。Hermes WebUI 作为 Nous Research 旗下 Hermes Agent 的官方 Web 界面，以「No build step, no framework, no bundler」的极简架构理念，为自托管 Agent 提供了从桌面浏览器到移动设备的全覆盖方案。本文将从工程实现角度，剖析其跨平台设计中的关键权衡与可落地参数。
架构哲学：原生技术栈的取舍
Hermes WebUI 的核心技术选型刻意回避了现代前端工程的主流路径 —— 没有 React、Vue 或 Svelte，也没有 Webpack、Vite 或 Rollup。后端采用 Python 标准库的 HTTP 服务器，前端则完全基于原生 JavaScript 与 vanilla CSS。
这种「零依赖」架构带来了三重收益：首先，部署体积被压缩到极限，Docker 镜像基于 python:3.12-slim，启动时间以毫秒计；其次，消除了构建步骤带来的版本锁定风险，源码即产物，热更新仅需刷新浏览器；最后，Python 生态与 ML 工具链的无缝衔接，使得 Agent 逻辑与界面层可以共享同一运行时。
然而，代价同样显著。缺乏组件化框架意味着 DOM 操作必须手动管理，状态同步需要自行实现发布订阅模式。Hermes WebUI 的代码库中，ui.js 与 sessions.js 承担了相当于现代框架中虚拟 DOM 与状态管理的职责，这对维护者的 JavaScript 功底提出了更高要求。
三面板布局的响应式挑战
界面采用经典的三栏布局：左侧会话列表与导航、中间聊天区域、右侧工作区文件浏览器。这种设计在桌面端提供了信息密度与操作效率的最优平衡，但在移动端却面临严峻挑战。
Hermes WebUI 的解决方案是「渐进式折叠」策略。当视口宽度低于 640px 时，左右两侧面板转化为滑动抽屉（drawer）模式，通过汉堡菜单与右边缘滑动手势触发。关键工程参数包括：所有交互元素的触摸目标不小于 44px，符合 Apple Human Interface Guidelines 的最小可点击区域标准；聊天区域保持全高度，避免底部导航栏侵占垂直空间。
这种设计的精妙之处在于「零布局偏移」—— 桌面端的 DOM 结构在移动端完全保留，仅通过 CSS 媒体查询控制显隐与定位。这意味着同一套事件监听逻辑可以跨设备复用，无需为移动端单独维护一套组件树。
SSE 流式传输的工程权衡
Agent 界面的核心体验在于实时反馈。Hermes WebUI 采用 Server-Sent Events（SSE）实现 token 级流式渲染，而非 WebSocket。这一选择背后是对自托管场景的深度考量。
SSE 基于 HTTP/1.1 的长连接机制，天然兼容现有基础设施 —— 无需额外端口，穿透企业防火墙与反向代理（如 Nginx、Cloudflare）时无需特殊配置。Hermes WebUI 的 SSE 实现支持 Last-Event-ID 恢复机制，当 SSH 隧道因网络抖动断开时，客户端可以自动重连并从断点续传，这对于通过 ssh -L 隧道访问自托管服务的场景至关重要。
相比之下，WebSocket 虽然提供全双工通信能力，但需要维护状态 ful 连接，水平扩展时需要引入 Redis 等消息代理。对于以「单机自托管」为核心场景的 Hermes 而言，SSE 的单向流式能力已足够支撑「服务端推送 token、客户端发送指令」的交互模型。当需要客户端向服务端发送信号（如取消生成、批准危险操作）时，Hermes 采用独立的 HTTP POST 端点，而非 WebSocket 的双向通道。
安全模型的分层设计
作为自托管应用，Hermes WebUI 的安全架构遵循「本地优先、远程加固」的分层策略。默认绑定 127.0.0.1，仅本地可访问，此时无需任何认证。当用户通过 SSH 隧道或 Tailscale 等方式暴露服务时，可通过环境变量 HERMES_WEBUI_PASSWORD 启用密码认证。
认证实现采用 HMAC-SHA256 签名的 HTTP-only Cookie，TTL 设为 24 小时，兼顾便利性与安全性。更进一步，WebUI 支持 WebAuthn/Passkey 无密码认证，私钥本地存储于 ~/.hermes/webui/ 目录，服务端仅保留公钥哈希。CSP（Content Security Policy）头部对所有响应生效，CDN 资源通过 SRI（Subresource Integrity）哈希锁定，防范供应链攻击。
可落地的工程参数清单
基于 Hermes WebUI 的实现经验，构建跨平台 Agent 界面时可参考以下参数：
SSE 流式配置：
- 启用
Last-Event-ID支持，实现断线续传 - 设置 30 秒慢连接超时，防止僵尸连接占用资源
- POST 请求体限制 20MB，平衡文件上传与内存安全
移动端适配：
- 触摸目标最小 44×44px
- 采用
dvh（dynamic viewport height）单位处理移动端浏览器地址栏显隐 - 汉堡菜单与滑动面板替代固定底部导航
安全基线：
- 默认绑定 127.0.0.1，暴露时强制启用密码
- Cookie TTL 24 小时，支持 Passkey 无密码迁移
- 部署 CSP 与 SRI 防护
部署策略：
- 单容器模式适合个人使用，Agent 与 WebUI 同进程运行
- 双容器模式实现服务隔离，注意工具调用在 WebUI 容器内执行的环境依赖问题
结语
Hermes WebUI 证明了在框架泛滥的时代，原生技术栈依然能够支撑复杂的跨平台 Agent 交互。其工程价值不在于技术选型的新颖，而在于对「自托管」这一特定场景的精准取舍 ——SSE 替代 WebSocket 以降低运维复杂度，原生 JS 替代框架以消除构建依赖，三面板折叠替代独立移动端以统一代码库。对于正在构建 Agent 界面的开发者而言，Hermes WebUI 提供了一份经过生产验证的「减法」参考。
资料来源：
- Hermes WebUI GitHub 仓库：https://github.com/nesquena/hermes-webui
- SSE 流式架构最佳实践：Streaming Infrastructure Behind Real-Time Agent UIs
内容声明：本文无广告投放、无付费植入。
如有事实性问题，欢迎发送勘误至 i@hotdrydog.com。