feat(stt): HUD avancé (phase 4) — design Claude Design câblé au backend (#17)

* feat(stt): HUD avancé — design Claude Design câblé au backend

Remplace le HUD minimal (cercle CSS) par le design Claude Design : avatar
portrait réactif (anneau + ping d'écoute + spinner de réflexion), transcript
à bulles (tag modèle), indicateur de connexion + reconnexion auto, et un
drawer Réglages.

- HUD (stt/hud/index.html) : HTML/CSS/JS sans dépendance externe, DEMO=false
  branché sur le websocket existant (états idle/listening/thinking/speaking,
  user/assistant/error). Portraits chargés depuis hud/avatars/ (repli « あ »
  si absent — voir avatars/README.md).
- Backend (ui/app.py) : le HUD renvoie {"type":"settings",...} ; le serveur
  applique à chaud reset / mode cerveau (modèle LiteLLM) / mot de réveil via
  _apply_settings (best-effort, non bloquant).
- engine/cli : tag du modèle courant ajouté aux réponses (events assistant).
- Docs : hud/README + avatars/README + admin/ia/stt.md (phase 4 ✅) + config.

Phase 4 de la roadmap STT. Reste : test sur poste + portraits réels.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017Qjq5jHiqNepnobJpHYpCa

* fix(stt): HUD servi sans cache navigateur (anti ancienne version)

Le HUD est un dashboard live servi en statique : sans en-tête anti-cache, le
navigateur garde l'ancien index.html après mise à jour (« je vois encore la
version bleue »). Ajoute Cache-Control: no-store + Pragma: no-cache via un
handler dédié, et silence le log HTTP par requête.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017Qjq5jHiqNepnobJpHYpCa

* chore(stt): bump client 0.1.0 → 0.2.0 (HUD avancé)

La version inchangée faisait que pipx/uv réutilisait l'ancien build en cache
lors d'un réinstall (HUD bleu persistant malgré le nouveau code). Le bump force
une résolution propre vers la nouvelle version (HUD design Claude Design).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017Qjq5jHiqNepnobJpHYpCa

* fix(stt): cache-bust de l'URL HUD en kiosk + bump 0.2.1

Ouvre le HUD avec ?v=<timestamp> (URL unique par lancement) pour que le
navigateur ne puisse jamais servir une version cachée de l'ancien HUD.
Complète Cache-Control: no-store côté serveur.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017Qjq5jHiqNepnobJpHYpCa

---------

Co-authored-by: Claude <noreply@anthropic.com>

stt/client/stt/hud/README.md

@@ -1,20 +1,54 @@
-# stt/hud — interface HUD web (à implémenter, phase 3)
+# stt/hud — interface HUD web (implémentée)
 
-Front statique servi localement par le backend, ouvert en kiosk (`ui.kiosk = true`).
-Se connecte au serveur websocket du backend.
+Front statique **HTML/CSS/JS sans dépendance externe** (tout inline, SVG natifs),
+servi localement par le backend (`stt/ui/app.py` — `SimpleHTTPRequestHandler` sur
+`ui.http_port`), ouvert en kiosk si `ui.kiosk = true`. Se connecte au serveur
+websocket du backend (`ui.ws_port`, défaut **9300**) pour recevoir les états et
+renvoyer les réglages.
 
-## Contenu prévu
+## Ce qu'affiche le HUD
 
-- **Visualiseur** : canvas/WebGL animé (arc-reactor / waveform) réagissant aux états
-  `idle / listening / thinking / speaking`.
-- **Conversation** : transcript utilisateur + réponses de l'assistant.
-- **Réglages** : thème, avatar, voix, wake word, mode cerveau — écrit dans `~/.config/stt/stt.toml`.
+- **Avatar portrait réactif** (disque) — 3 images crossfadées selon l'état
+  (`idle/listening → -idle`, `thinking → -think`, `speaking → -speak`), avec
+  anneau fin, « ping » d'écoute et spinner de réflexion. Repli sur l'initiale
+  du personnage si aucune image (voir [`avatars/README.md`](avatars/README.md)).
+- **Label d'état** : veille / écoute / réflexion / réponse.
+- **Transcript** : bulles utilisateur / assistant (+ tag du modèle) / erreur.
+- **Indicateur de connexion** websocket (point + libellé), reconnexion auto.
+- **Drawer Réglages** (engrenage) : intensité de l'accent (thème), avatar, voix,
+  mot de réveil, mode cerveau (local/avancé), no-think, reset conversation.
 
-## Design
+## Protocole websocket
 
-S'inspire de [AlexandreSajus/JARVIS](https://github.com/AlexandreSajus/JARVIS) (interface web)
-et de l'esthétique Iron Man. Thèmes pilotés par `stt/config/themes/`, avatar par
-`stt/config/avatars/`.
+Reçus du backend (diffusés à tous les HUD connectés) :
 
-Pas de framework lourd imposé — HTML/JS + canvas suffit pour le MVP. Le choix (vanilla vs
-petit framework) sera tranché en phase 3.
+| Événement | Effet |
+|---|---|
+| `{"type":"state","state":"idle\|listening\|thinking\|speaking"}` | animation + label |
+| `{"type":"user","text":…}` | bulle utilisateur |
+| `{"type":"assistant","text":…,"mode":…}` | bulle assistant (+ tag modèle) |
+| `{"type":"error","text":…}` | bulle d'erreur |
+
+Envoyés au backend à chaque changement de réglage :
+
+```json
+{"type":"settings","data":{"brainMode":"local","wakeword":"…","action":"reset"}}
+```
+
+Le serveur applique `action:reset`, `brainMode` (→ modèle LiteLLM) et `wakeword`
+**à chaud** (`_apply_settings` dans `stt/ui/app.py`). Les réglages purement
+visuels (intensité d'accent, avatar) sont persistés côté navigateur (localStorage).
+
+## Prévisualiser sans backend
+
+Le HUD embarque un **mode démo** : passer `const DEMO = false` à `true` en tête
+du `<script>` rejoue une boucle d'événements simulés — pratique pour itérer le
+design sans lancer le serveur. Défaut livré : `false` (branché sur le backend).
+
+## Design & personnalisation
+
+Esthétique douce (blanc + accent rose → rouge), origine **Claude Design**. Les
+variables CSS en tête du `<style>` pilotent le rendu (`--accent-rest`,
+`--accent-active`, `--avatar`, `--ring-gap`…) ; le slider « intensité » interpole
+l'accent au repos. Portraits dans [`avatars/`](avatars/) (jeux `asa` / `mira` /
+`kai`, swappables à chaud depuis les Réglages).