4. L'Écosystème HUD & UI

ECHO ne se limite pas à générer du texte dans une fenêtre de chat. Il dispose d'un moteur d'interface dynamique capable d'injecter des composants visuels directement dans le DOM d'Open WebUI : jauges, moniteurs, indicateurs de quota et interfaces de replay. Cet écosystème est piloté par echo_ui.py (v5.27), assisté de echo_visuals.py pour les interfaces riches multi-moteurs.

Architecture de communication Backend ↔ Frontend

Le système repose sur un pipeline à trois niveaux :

1. Backend (echo_ui.EchoUI) : génère des payloads JavaScript polymorphes encapsulant les données (métriques de contexte, quota, images Base64). Ces payloads sont de simples chaînes de caractères contenant du code JS.
2. Canal d'Événements (EchoEvents) : les ponts emit et call d'Open WebUI servent de tunnel pour injecter le code JS dans le DOM global de l'interface. Cette injection est possible uniquement depuis les hooks Pipe et Filter.
3. Runtime Frontend : un singleton JavaScript éphémère (ex. window.echoEngine_HUD_{uuid}) est créé dans le navigateur de l'utilisateur et gère les interactions locales (zoom, pan, état du drag).

La Context Gauge (Cortex Monitoring)

La Context Gauge est l'outil central de pilotage de l'état cognitif. Elle est injectée dans la barre de navigation d'Open WebUI via EchoUI.deploy_context_gauge() et mise à jour à chaque tour de conversation par le Pipe.

A. Barre de contexte (tokens)

Une barre colorée à quatre segments représente l'utilisation de la fenêtre contextuelle en cours :

Au survol de la barre, un tooltip affiche les valeurs absolues : cache, prompt actif, génération, total et maximum de la fenêtre contextuelle.

B. Icône Quota (jauge circulaire SVG)

Une icône cadenas à gauche de la barre représente le quota restant du modèle API Antigravity actuellement actif. La jauge circulaire SVG est calculée via l'attribut stroke-dashoffset à partir de quota_fraction (0,0 = épuisé, 1,0 = plein). La couleur varie selon trois seuils :

• Vert #10b981 : quota_fraction > 0,50
• Orange #f59e0b : 0,20 < quota_fraction ≤ 0,50
• Rouge #f85149 : quota_fraction ≤ 0,20

C. Tooltip Authentification / Quotas

Au survol de l'icône cadenas, un tooltip affiche deux sections :

🔐 Source  : méthode d'auth (OAUTH2, API_KEY, etc.)
👤 Compte  : google_user_email (depuis identity.db)
🏗️ Projet  : google_project_id (depuis identity.db)

💳 Crédits      : google_credits_total (crédits AI disponibles)
🤖 Modèle CA    : ca_model_id actif (ex: gemini-3-flash-agent)
📊 Quota        : quota_fraction × 100% — coloré selon seuils
📅 Req/jour     : requestsPerDayRemaining / requestsPerDayLimit (N/A si non fourni)
⚡ Req/min      : requestsPerMinuteRemaining / requestsPerMinuteLimit (N/A si non fourni)
🔄 Reset        : heure de reset du quota — formatée HH:MM (Xmin restantes)
🏷️ Type         : google_quota_type (ex: CODE_ASSIST)

D. Signature complète de deploy_context_gauge()

La fonction principale du HUD accepte les paramètres suivants (tous avec valeurs par défaut sécurisées) :

deploy_context_gauge(
    events,                        # EchoEvents — canal d'injection JS
    plan_name, credits_val,        # Identité du plan et crédits disponibles
    quota_str,                     # Résumé quota formaté
    c_t, active_p_t, g_t, max_t,  # Tokens absolus (cache, prompt, génération, max)
    cache_pct, prompt_pct, gen_pct,# Pourcentages de la barre (0–100)
    user_email, user_tier,         # Identité utilisateur
    project_id,                    # google_project_id
    auth_sources,                  # Liste des méthodes d'auth actives
    quota_amount,                  # Montant quota brut (héritage — N/A si non dispo)
    quota_fraction,                # Fraction restante du quota modèle (0.0–1.0)
    quota_reset,                   # Heure de reset formatée (HH:MM ou HH:MM (Xmin))
    quota_type,                    # Type de quota (ex: CODE_ASSIST)
    quota_model,                   # CA model_id de ce quota
    quota_rpd_rem,                 # Requests per day remaining (ou "N/A")
    quota_rpd_lim,                 # Requests per day limit (ou "N/A")
    quota_rpm_rem,                 # Requests per minute remaining (ou "N/A")
    quota_rpm_lim                  # Requests per minute limit (ou "N/A")
)

Le Monitor ECHO / Image Viewer (Visualiseur Intelligent)

Invoqué via EchoUI.monitor_ECHO() (navigation web) ou EchoUI.show_image_js() (affichage d'images), ce composant est une fenêtre flottante surdimensionnable, déplaçable et zoomable injectée dans le DOM.

Fonctionnalités techniques

• Accélération GPU : utilisation de translate3d(x, y, 0) pour forcer la création de calques de composition matérielle et assurer une fluidité 60 fps même sur des images haute résolution.
• Calcul de ratio dynamique : la fonction getBestSize ajuste automatiquement les dimensions de la fenêtre pour respecter le ratio natif de l'image (aspect ratio).
• Zoom & Pan universel : Ctrl + Molette pour le zoom (jusqu'à 15×), Clic + Glisser pour le déplacement. Pilotage via la propriété CSS transform: scale() sur le conteneur image.
• Crop-Box interactif : boîte de sélection redimensionnable permettant de définir une zone d'intérêt à transmettre au modèle pour une analyse ciblée.

Persistance de l'état (LocalStorage)

Le Monitor mémorise sa position et son zoom dans le localStorage du navigateur, sous la clé STATE_KEY générée par le backend. Format :

{ "x": 120, "y": 45, "s": 1.5, "ix": 0, "iy": 0, "m": false }

Où s est le facteur d'échelle, ix/iy l'offset pan, et m l'état du mode crop.

_generate_codex_js() — Moteur HUD Monaco Codex (v5.23+)

Ajouté en echo_ui.py v5.23, _generate_codex_js() génère le script JavaScript complet du HUD Monaco Codex (voir ECHO Codex →). Comme tous les HUDs ECHO, il est injecté via __event_call__({type: 'execute', data: {code: ...}}).