Architecture Frontend (widget/)

La documentation complète de l’architecture frontend React 18 + TypeScript + Vite est disponible dans la section dédiée :

Voir aussi

Architecture Frontend — Architecture Frontend complète avec diagrammes Graphviz, détail des composants React, protocole audio WebSocket, rendu OffscreenCanvas et gestion audio mobile.

---

Arborescence des Sources

widget/
├── src/
│   ├── main.tsx                   Point d'entrée React
│   ├── App.tsx                    Composant racine
│   ├── types/                     Interfaces TypeScript typées
│   ├── hooks/                     Hooks personnalisés (WebSocket, Audio, Clock)
│   ├── components/                Composants React (HUD, Reactor, Panels)
│   ├── utils/                     Utilitaires (formatMarkdown, KaTeX)
│   └── styles/                    Feuilles de style (hud.css)
├── public/                        Assets statiques
├── index.html                     Page HTML racine
├── vite.config.ts                 Configuration Vite + proxy WebSocket
├── tsconfig.json                  Configuration TypeScript stricte
└── package.json                   Dépendances npm

---

Build et Déploiement

# Installation des dépendances
cd widget && npm install

# Build de production (génère mirza/server/static/)
npm run build

# Développement avec HMR (Hot Module Replacement)
npm run dev

Note

Le serveur FastAPI sert automatiquement les fichiers mirza/server/static/ en production. En développement, Vite démarre son propre serveur HTTP avec proxy WebSocket vers le backend.