| name | hermes-webui |
| description | Web UI 3-panel cho AI agent — sessions, chat, file browser. Python + vanilla JS, không framework. Reference architecture cho YAMTAM IO web mode. |
| triggers | ["hermes webui","hermes-webui","web ui for agent","3 panel chat","agent web interface","session management ui","file browser chat"] |
hermes-webui — Agent Web UI Reference
Source: github.com/nesquena/hermes-webui ⭐12.6k
Stack: Python + vanilla JS + CSS — no framework, no bundler
License: MIT
Architecture 3-panel
┌─────────────┬──────────────────────┬──────────────────┐
│ Sessions │ Chat │ Workspace │
│ + tags │ + token ring │ file browser │
│ + search │ + composer footer │ + inline edit │
└─────────────┴──────────────────────┴──────────────────┘
Token ring: context usage dạng circular — luôn visible.
Composer footer: model selector, profile, workspace — luôn visible khi gõ.
Key patterns đáng học cho YAMTAM
SSE streaming (không WebSocket)
def stream_response(agent_gen):
for chunk in agent_gen:
yield f"data: {json.dumps({'content': chunk})}\n\n"
const es = new EventSource('/api/stream')
es.onmessage = e => appendToken(JSON.parse(e.data).content)
Session management
const sessions = await loadSessions()
const filtered = sessions.filter(s =>
s.tags.includes(tag) || s.title.includes(query)
)
Auth HMAC cookie
import hmac, hashlib
def make_token(secret, ts):
return hmac.new(secret.encode(), ts.encode(), hashlib.sha256).hexdigest()
So sánh với YAMTAM IO
| Hermes WebUI | YAMTAM IO |
|---|
| Session sidebar | App grid |
| Token ring | Dynamic Island |
| Control Center | Dock + Settings app |
| SSE streaming | SSE (đã dùng) |
| File browser | Chưa có |
| 3-panel layout | Phone simulator |
Cài thử
git clone https://github.com/nesquena/hermes-webui
cd hermes-webui
pip install -r requirements.txt
python server.py --port 8080
Dùng làm gì trong YAMTAM
Không cài trực tiếp — dùng làm reference nếu muốn nâng IO từ phone simulator
thành web app thật: pure Python server + vanilla JS, session history, file browser vault.
