1. 项目概述：为 Hermes Agent 打造一个现代化的操作界面
如果你正在使用 Hermes Agent 这个强大的开源 AI 代理框架，但觉得在终端里敲命令、管理技能、查看内存和会话状态不够直观，那么 Pan UI 的出现，可以说是一场及时雨。它本质上是一个自托管的 Web 仪表盘，专门为 Hermes Agent 设计，目标是把所有分散的、命令行驱动的操作，整合到一个美观、集中且易于操作的图形界面里。
想象一下，你不再需要记住复杂的 hermes 子命令，也不用在多个终端窗口或配置文件之间来回切换。通过 Pan UI，你可以在浏览器里直接与你的 AI 代理对话，实时看到它的思考过程和工具调用；可以像逛应用商店一样，浏览、安装和管理来自 skills.sh 的技能库；可以清晰地管理各种 MCP 集成和插件；还能直观地查看和编辑代理的长期记忆。这一切，都通过一个设计现代、响应迅速的 Next.js 应用来呈现。
我最初接触 Hermes Agent 时，就被其强大的可扩展性和“工具使用”能力所吸引，但管理成本也确实不低。Pan UI 的出现，极大地降低了这个门槛。它不仅仅是一个“皮肤”，更是一个完整的工作空间重构。从 0.7.0 版本开始，其设计哲学转向了“聊天优先”，界面更加冷静，信息架构更清晰，导航更紧凑，整体体验更接近一个成熟的产品，而非一个极客玩具。对于希望将 Hermes Agent 投入实际工作流，或者单纯想更优雅地管理和实验 AI 代理的开发者来说，Pan UI 是目前生态中一个非常值得投入的选择。
2. 核心架构与设计思路拆解
2.1 技术栈选型：为什么是 Next.js + TypeScript？
Pan UI 选择了 Next.js 作为前端框架，并用 TypeScript 实现，这是一个经过深思熟虑的技术决策。首先，Hermes Agent 本身提供了基于 HTTP 的 API 网关，这天然适合用一个 Web 应用来对接。Next.js 作为全栈框架，其核心优势在于服务端渲染、API 路由和简单的部署模型，这与 Pan UI 的需求高度契合。
服务端渲染 保证了应用的首屏加载速度，这对于一个管理面板的体验至关重要。用户打开页面，不需要等待大量 JavaScript 下载和执行就能看到基本界面。 API Routes 功能则完美解决了“桥梁”问题。Pan UI 的后端（运行在 Node.js 中）通过 Next.js 的 API Routes 创建了一系列代理端点。浏览器前端并不直接调用 Hermes 的 API，而是调用 Pan UI 自己的 API。这样做有几个关键好处：
TypeScript 的引入，对于一个管理复杂状态和数据流的应用来说是必不可少的。Hermes 的 API 响应结构、技能定义、MCP 服务器配置等都可能有复杂的嵌套对象。TypeScript 的强类型系统能在开发阶段就捕获大量潜在的错误，比如属性名拼写错误、类型不匹配等，极大地提高了代码的健壮性和可维护性。对于开发者而言，清晰的类型定义也相当于一份活的 API 文档。
2.2 核心工作流程：Pan UI 如何与 Hermes 协同工作？
理解 Pan UI 的工作原理，关键在于弄清楚它和 Hermes Agent 各个组件之间的关系。它不是替代 Hermes，而是作为一个智能的“管家”和“展示层”附着其上。
[用户浏览器] <–(HTTP/SSE)–> [Pan UI Next.js 服务器] <–(HTTP)–> [Hermes API 网关 (:8642)]
|
V
[Hermes 文件系统 (~/.hermes/)]
[Hermes Agent 核心进程]
- 聊天 ：前端通过 Server-Sent Events 连接到 Pan UI 的 API，后者再代理到 Hermes 网关的 /v1/chat/completions 兼容端点，实现流式响应。你在界面上看到的打字机效果，就是通过这个 SSE 流实现的。
- 技能 ：技能列表通过读取 ~/.hermes/skills/ 目录下的 YAML 文件来获取。Pan UI 会解析这些文件的 frontmatter 来展示技能名称、描述、作者等信息。从 Marketplace 安装技能，本质上也是通过 Hermes 的 CLI 或 API 在后台执行安装命令。
- 内存 ：全局和配置文件作用域的记忆，分别对应 ~/.hermes/USER.md 、 ~/.hermes/MEMORY.md 以及 ~/.hermes/profiles/<profile_name>/ 目录下的同名文件。Pan UI 提供了编辑器来查看和修改这些 Markdown 文件。
- 配置文件 ：每个配置文件对应 ~/.hermes/profiles/<name>/ 一个独立的目录，里面包含该配置文件的会话、技能、内存等所有状态。Pan UI 的“配置文件”功能让你可以在不同工作上下文（如“编程助手”、“写作助手”）间无缝切换。
2.3 设计哲学：从“功能罗列”到“聊天优先的工作空间”
早期版本的 Pan UI 可能更偏向于一个功能面板。但从 0.7.0 版本开始的重大改版，体现了一个明确的产品思维转变： 以对话为核心，重构整个用户体验 。
“聊天优先” 意味着打开 Pan UI，默认的、最突出的视图就是聊天界面。其他所有功能——技能、扩展、内存、配置文件——都是围绕增强或管理这个对话体验而组织的。这符合 Hermes Agent 作为“对话代理”的核心定位。设计上采用了更冷静的色调、更充裕的留白、更清晰的视觉层次，减少了信息噪音，让用户能聚焦于与代理的交互本身。
“更强的可发现性” 体现在新的 Marketplace 视图上。过去，技能和 MCP 服务器可能散落在不同的标签页或菜单里。现在，一个统一的 /marketplace 页面，用更接近现代应用商店的布局（如英雄横幅、分类浏览、全局搜索），让用户能更容易地发现和安装新的能力。
“更清晰的信息架构” 指的是对“集成”相关功能的重新梳理。将 MCP 服务器、运行时工具、审批流、诊断信息等，从杂乱的设置中剥离出来，归入“扩展”这个逻辑清晰的板块。这让高级用户能更直观地理解和管理代理的底层能力。
“更密集的可选导航” 和 “更产品化的引导” 则兼顾了新手和专家。紧凑模式让熟练用户能在有限屏幕空间内获得更多信息；而首次启动时的设置向导、清晰的空状态提示、内置的示例对话，则能帮助新用户快速上手，理解这个工具能做什么。
