你有沒有想過，你的 AI Agent 在幹什麼？它現在在想什麼？記得了哪些東西？花了多少錢？

Hermes Agent 跑在背景裡，靜靜地執行各種工作。但它的大腦到底存了什麼資料、記憶怎麼組織、成本怎麼算，這些都藏在 ~/.hermes/ 這個資料夾的各種檔案裡——SQLite、Markdown、YAML、JSON 一堆。要看懂這些原始資料，真香的辦法就是一個視覺化的監控面板。這就是 Hermes HUD Web UI 登場的時刻。

瀏覽器裡的 Agent 意識監控

Hermes HUD Web UI 是 Hermes HUD 的網頁版本。TUI 版本給你命令列的純粹感，Web 版本就更直覺、更適合長期監看。它用圖表、卡片、即時更新，把 Agent 的內部世界呈現出來。

這個面板不是簡單的可視化工具。設計上採用了 讀寫分離 的思路——你只能看，不能改。這聽起來像是限制，其實是保護。Agent 執行中如果面板能隨意修改狀態，那踩坑的機會太多了。只讀設計確保你的監控動作絕不會搞亂 Agent 的運作。

10 個監控面板包括：Dashboard（總覽）、Memory（記憶體系）、Skills（技能庫）、Sessions（工作階段）、Cron（排程任務）、Projects（專案）、Health（健康狀態）、Agents（Agent 列表）、Profiles（設定檔）、Token Costs（成本統計）。每一個都是從 ~/.hermes/ 直接讀取資料，串聯起來呈現 Agent 的完整樣貌。

架構：React 前端遇上 FastAPI 後端

前端用的是 React 19，搭配 Vite 做打包、SWR 處理資料快取、WebSocket 吃即時更新。這套組合讓介面反應夠快，不會卡頓。後端是 FastAPI，負責讀取 ~/.hermes/ 裡的各種檔案，經過處理後透過 WebSocket 推送給前端。

有趣的是，整個系統的相依套件極簡。後端只需要 4 個套件，前端也只要 4 個。這在現代 Web 開發裡有夠難得，大多數專案早就被套件海淹沒。這也太香了吧，少依賴代表維護成本低、安全漏洞少、部署快速。

實時更新不是用傳統的輪詢（polling），而是靠 WebSocket 搭配檔案監看。後端監控 ~/.hermes/ 資料夾，一旦檔案有異動就透過 WebSocket 主動推送給前端。這樣既省資源，又能確保你看到的東西永遠是最新的。

快取策略的細節

看起來簡單的實時更新，其實背後有套講究的快取機制。系統用 mtime 搭配 MD5 雜湊值，針對不同資料型別設定不同的快取生命週期（TTL）。Memory 資料可能快取 30 秒，Projects 資料可能快 60 秒。這樣既不會過度計算，也不會讓資料太舊。

這種漸進式的快取策略看似複雜，卻是 Web 應用必學的技巧。特別是當你要監控 Agent 這種常態執行、資料量龐大的東西，稍微設計不當就容易變成效能災難。

視覺設計：四種主題讓監控變有趣

介面提供四種視覺主題：Neural Awakening（神經覺醒）、Blade Runner（銀翼殺手）、fsociety（駭客軍團）、Anime（動漫風）。每一種都有自己的配色和氛圍。如果你長期盯著監控面板，至少讓眼睛不會被單調的灰色折磨。

最特別的是 CRT 掃描線效果，這是致敬老式陰極射線管螢幕的懷舊細節。扯欸，科技越來越現代，反而去模仿 30 年前的東西。但這種懷舊感確實有種魔力，讓人工智慧的監控面板多了份復古的科幻感。

鍵盤快捷鍵支援也很完整。按 Ctrl+K 喚出命令列（Command Palette），可以快速切換面板、篩選資料。習慣用鍵盤的人會很享受這種效率。

數字背後的故事

Hermes HUD Web UI 在 GitHub 上有 464 顆星。這個數字代表了一個小而精的開源專案被夠多人看見。不是 10 萬顆星的爆款，但也不是無人問津的邊角工具。通常這種規模的專案社群反應最誠摯，也最聚焦。

MIT 授權意味著你可以自由使用、修改、甚至商用。這對想整合或延伸功能的開發者來說，最大化了靈活性。

相關生態

Hermes HUD Web UI 不是孤立的。它的孿生兄弟 hermes-hud 是 TUI 版本，適合純終端環境。而它們共同監控的 Hermes Agent，才是整個故事的主角。要充分利用這些工具，得先理解 Agent 在幹什麼。

這三者構成了一個完整的生態。Agent 做事，HUD 和 HUD Web 看監控，再根據監控結果調整 Agent 的行為。這種反饋迴圈對 Agent 系統至關重要。

何時該用這個面板

如果你在開發 Hermes Agent，Hermes HUD Web UI 基本上是必備工具。它能讓你快速掌握 Agent 的狀態、發現問題在哪裡、追蹤成本是否超支。特別是當 Agent 執行的工作越來越複雜，這種即時監控就越來越寶貴。

甚至在生產環境，把這個面板當成 Agent 健康狀態的儀表板，也是很合理的用法。讀寫分離的設計確保你監控的同時，不會不小心干擾 Agent 的運作。

最後，如果你在調試 Agent 的記憶體系統或成本計算，Web UI 的各個面板能讓你視覺化看到邏輯的結果，比起翻 JSON 檔案快一百倍。

原文來源：Hermes HUD Web UI - GitHub