Kantin-Petit
4f3c85901e
Header flex-wrap + détails masqués sous sm ; barre chat input min-w-0 + boutons compacts + label Envoyer masqué sous sm ; actions Review empilées pleine largeur sur mobile. Build web vert. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016w5jRe87MGdd6AMvXQcHNi
web — UI CHLOVA
Client web/PWA du backend CHLOVA. Phase 4. Style dark HUD (voir
../docs/ui-design.md). React 19 + Vite 8 + Tailwind 4 + react-router 7.
Dev
npm install
npm run dev # http://localhost:5173 ; proxy /api → backend :8080
npm run build # → web/dist (servi same-origin par le backend en prod)
npm run typecheck
Le backend doit tourner avec l'auth configurée (CHLOVA_ADMIN_*, voir
orchestrator → npm run provision-auth).
Structure
| Fichier | Rôle |
|---|---|
src/api.ts |
Client API (login, chat, review, state). |
src/auth.tsx |
Contexte JWT (localStorage) + login/logout. |
src/App.tsx |
Router + shell (garde : pas de token → Login). |
src/pages/Login.tsx |
Login fort (mdp + TOTP). |
src/pages/Chat.tsx |
Conversation agent (v0.23.0). |
src/pages/Review.tsx |
Need-review : approuver/refuser (v0.24.0). |
Voix (Phase 6)
100 % navigateur (Web Speech API), zéro backend/GPU :
- Parler : dictée push-to-talk (fr-FR) → envoyée à l'agent.
- Voix ON/OFF : lecture vocale des réponses (TTS), réglage persistant.
- Libre : mains-libres, déclenché par le wake-word « CHLOVA … » ; le micro se met en pause pendant la synthèse pour éviter l'auto-écoute.
STT = Chrome/Edge (webkit) ; TTS = large support. Dégrade proprement sinon.
Périmètre
Login → Chat (+ voix) → Review. App RN : phase ultérieure (API commune réutilisée).