# Hermes Webui

> Web UI 3-panel cho AI agent — sessions, chat, file browser. Python + vanilla JS, không framework. Reference architecture cho YAMTAM IO web mode.

- Skill: `yanacuti1121/hermes-webui` (Agent Skill)
- Install (CLI): `npx skillmds add yanacuti1121/hermes-webui`
- Raw SKILL.md: https://api.skillmd.com/api/skills/yanacuti1121/hermes-webui/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: AI & ML
- Author: yanacuti1121 (https://skillmd.com/u/yanacuti1121)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/yanacuti1121/hermes-webui

---


# 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)

```python
def stream_response(agent_gen):
    for chunk in agent_gen:
        yield f"data: {json.dumps({'content': chunk})}\n\n"
```

```javascript
const es = new EventSource('/api/stream')
es.onmessage = e => appendToken(JSON.parse(e.data).content)
```

### Session management

```javascript
const sessions = await loadSessions()  // JSON files on disk
const filtered = sessions.filter(s =>
    s.tags.includes(tag) || s.title.includes(query)
)
```

### Auth HMAC cookie

```python
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ử

```bash
git clone https://github.com/nesquena/hermes-webui
cd hermes-webui
pip install -r requirements.txt
python server.py --port 8080
# Cần Hermes Agent chạy trước
```

## 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.