7. É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 l'interface d'Open WebUI : jauge de contexte, moniteur interactif, indicateurs de quota, éditeur de code et lecteur de rejeu.

💡 Qu'est-ce que le HUD ?

Le HUD (Heads-Up Display) n'est pas une application séparée : c'est une surcouche d'affichage injectée par-dessus l'interface d'Open WebUI. Elle affiche en temps réel des informations opérationnelles (occupation de la mémoire de travail, quota d'API, progression des sous-agents) sans alourdir le texte produit par le modèle.

Couche de Communication Sécurisée (UCTP)

Lorsque des interfaces riches ou des fichiers volumineux (comme l'éditeur Codex) doivent être affichés, le système découpe et transmet les données par fragments en arrière-plan, accompagnés d'une barre de progression visuelle afin de maintenir la réactivité du navigateur.

Low-Level Design (LLD) : Mécanisme UCTP [TRANSFERT DE PAYLOADS MASSIFS]

sequenceDiagram autonumber participant BE as Backend (echo_events.py) participant WAF as BunkerWeb / WebSocket participant FE as Frontend (Open WebUI) BE->>FE: Init : Injection Spinner (HUD non-bloquant) note over BE,BE: Fragmentation du Payload (chunks de 256 Ko) loop Pour chaque chunk BE->>WAF: Envoi du Chunk N WAF-->>FE: Transfert sécurisé (sans rupture WAF) FE->>FE: Stockage dans window.echoUCTPBuffer end BE->>FE: Signal de Fin : Reconstitution globale FE->>FE: Exécution du Payload unifié FE->>FE: Fermeture du Spinner

La Context Gauge (Cortex Monitoring)

La Context Gauge est l'outil central de pilotage de l'état cognitif. Elle est affichée en permanence dans la barre de navigation d'Open WebUI et mise à jour automatiquement à chaque tour de conversation.

A. Barre de contexte (tokens)

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

Segment	Couleur	Rôle	Signification
Cache	Violet	Historique mis en cache	Tokens déjà ingérés et mis en cache par Google (économie de coût de ~90 %).
Prompt actif	Vert	Requête entrante	Charge active du message courant.
Génération	Orange	Réponse du modèle	Tokens produits par ECHO lors de ce tour.
Vide	Transparent	Capacité disponible	Espace mémoire de travail restant avant saturation.

La jauge principale affiche également un badge de Checkpoint 🗜️ #N dès qu'un compactage a eu lieu. Au survol de la barre, une infobulle présente les valeurs détaillées : cache, prompt actif, génération, total et maximum de la fenêtre contextuelle, ainsi que la ligne 🗜️ Checkpoint: #N (M tours) sous le compteur de tokens.

B. Icône Quota et Infobulle d'Authentification

L'anneau circulaire autour du cadenas à gauche de la barre indique la fraction de quota restante pour le modèle actif : Vert au-delà de 50 %, Orange entre 20 % et 50 %, et Rouge en dessous de 20 %. Au survol du cadenas, l'infobulle affiche l'identité active et les métriques de quota :

Sections AUTHENTIFICATION & QUOTAS

🔐 Source       : méthode d'authentification active (OAUTH2, API_KEY)
👤 Compte       : adresse du compte Google authentifié
💎 Tier         : niveau d'abonnement Cloud de l'utilisateur
🏗️ Projet Perso : identifiant du projet Cloud personnel (masqué s'il est identique au 🌐 Tenant ou égal à aicode-consumers)
🌐 Tenant       : identifiant du tenant Code Assist actif
💳 Crédits IA   : crédits disponibles sur le compte
🤖 Modèle CA    : identifiant du modèle actif (ex: gemini-3.8-flash-high)
⏱️ Quota 5h     : pourcentage restant coloré + échéance (🔄 dans Xh Ym) ou Désactivé
📅 Quota Sem.   : pourcentage restant coloré + échéance (🔄 dans Xj Yh)
📊 Quota        : pourcentage global restant + (🔄 reset) (affiché en repli si les quotas 5h/semaine sont absents)
📆 Req/jour     : requêtes quotidiennes restantes (affiché uniquement si applicable)
⚡ Req/min      : requêtes par minute restantes (affiché uniquement si applicable)
🏷️ Type         : type de quota actif (ex: CODE_ASSIST)

Le Sandbox Monitor / Image Viewer (Visualiseur Interactif)

Lors d'une navigation web autonome ou de l'exécution d'une application graphique dans la Sandbox, une fenêtre flottante déplaçable et redimensionnable s'ouvre à l'écran. Vous pouvez y zoomer à la molette, déplacer la vue par glisser-déposer ou sélectionner une zone d'intérêt précise.

ECHO Identity Vault (Coffre-Fort d'Identités HUD)

L'écosystème HUD intègre également l'interface ECHO Identity Vault, un gestionnaire visuel de secrets applicatifs permettant de configurer vos identifiants pour les automatisations N8N et les serveurs MCP sans quitter la conversation.

Modales Natives Asynchrones & Mobile First

Lorsque l'IA a besoin d'une confirmation ou d'un choix de votre part, le HUD affiche une boîte de dialogue interactive dotée de boutons de sélection rapides, adaptée aux écrans tactiles mobiles comme aux ordinateurs de bureau.

⚙️ Dossier d'Ingénierie & Spécifications

1. Architecture Backend ↔ Frontend & Protocole UCTP (`echo_events.py` & `echo_ui.py`)

Canal d'Événements (EchoEvents) : Génère des payloads JS injectés via les ponts __event_emitter__ et __event_call__ d'Open WebUI.
Fragmentation UCTP (ECHO_UCTP_CHUNK_SIZE = 256 000) : Tout payload excédant 256 Ko est découpé en chunks séquentiels accumulés dans window.echoUCTPBuffer avec HUD de progression non-bloquant jusqu'au signal ECHO_UCTP_EOF, contournant les limites WebSocket et WAF.
Fenêtrage & Rendu : L'Identity Vault hérite de la classe unifiée EchoFloatingWindow, tandis que le Cognitive Monitor conserve une architecture dédiée pour éviter les lenteurs DOM. Le Sandbox Monitor exploite le multiplexage JSONL via UCTP (emit_execute dans une iframe srcdoc) avec accélération GPU (translate3d), zoom Ctrl+Molette jusqu'à 15×, synchronisation d'URL en direct (echoWebPlayerUpdate) et icônes vectorielles légères (ECHO_ICONS).

2. Signature de `deploy_context_gauge()` & Rafraîchissement Quotas (`echo_ui.py` v5.107)

Appelée par echo_orchestrator.py pour injecter #echo-nav-context-hud (segments CSS cache_pct en #8b5cf6, prompt_pct en #10b981, gen_pct en #f59e0b et badge #echo-nav-checkpoint-badge), elle calcule l'anneau SVG via stroke-dashoffset sur quota_fraction (rafraîchi de manière non-bloquante par fetch_available_models() toutes les 10 min dans identity.db, tandis que les quotas 5h et hebdomadaire sont extraits via l'endpoint :retrieveUserQuotaSummary dans echo_auth.py v1.2) :

deploy_context_gauge(
    events,                        # EchoEvents
    plan_name, credits_val,        # Identité du plan
    quota_str,                     # Résumé quota formaté
    c_t, active_p_t, g_t, max_t,   # Tokens (cache, prompt, génération, max)
    cache_pct, prompt_pct, gen_pct,# Pourcentages
    user_email, user_tier,         # Identité utilisateur
    project_id, auth_sources,      # google_project_id et auth_sources
    quota_fraction,                # Fraction de quota restante (0.0–1.0)
    quota_reset, quota_type,       # Heure de reset et type (ex: CODE_ASSIST)
    quota_model, quota_rpd_rem,    # CA model_id et Requests per day
    quota_rpd_lim, quota_rpm_rem, quota_rpm_lim,
    quota_5h_fraction=None, quota_5h_reset="N/A", quota_5h_disabled=False,
    quota_weekly_fraction=None, quota_weekly_reset="N/A",
    compaction_count=0, compacted_turns=0
)

3. Caractéristiques Techniques (ECHO Codex, Agent Monitor & Mobile First)

Moteur Codex : Monaco Editor, lecteur PDF WYSIWYG natif par Blob, trigger asynchrone _echoCodexTarget et persistance dans localStorage['echo_codex_{chat_id}'].
HUD Multi-Agent : Fusion chronologique des threads (threads_json), rendu arborescent hiérarchique pour les superviseurs et maintien dans le viewport via clampHud.
Optimisations Mobiles & Sécurité DOM : Unités 100dvh, anti-zoom iOS, cibles tactiles 44px, modales asynchrones (window.echoCustomConfirm, window.echoCustomPrompt à boutons pills, window.mcpAlert) et assainissement DOM systématique via window.echoSanitizeHTML.

← 6. Communication Gemini 8. La Cognition →