.. _api-frontend:

Architecture Frontend (``widget/``)
=====================================

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

.. seealso::

   :ref:`arch-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
-------------------------

.. code-block:: text

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

.. code-block:: bash

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