◫ZONES DE L'INTERFACE
ZONE 1 · TOP BAR
Barre d'état et sources de données
Logo — 0DATA · SYMBIOTE.FLOW avec icône SVG (goutte d'eau + pulsation)
Sous-titre — INSTRUMENT DE MESURE DIFFÉRENTIEL 6 CANAUX
CANAUX — Nombre total de canaux de mesure actifs (36 maximum)
SIGNAUX — Nombre de liens de type SIGNAL
SURCHG — Nombre de canaux en surcharge (LOAD > 85%)
FLUX — Débit agrégé en requêtes/seconde
+ SOURCE — Bouton d'ajout de sources de données externes (HTTP, WebSocket, MQTT, File)
→ IT : Équivalent d'un bandeau de monitoring réseau (Prometheus/Grafana). Les sources externes permettent d'injecter des métriques temps réel depuis des APIs REST, brokers MQTT, ou fichiers.
ZONE 2 · STAGE / CANVAS
Platine de visualisation interactive
L'espace central affiche la topologie du réseau sous forme d'instrument de laboratoire :
MODE CIRCUIT (N0 · ×1.0) — Vue d'ensemble complète :
— Anneau principal gradué (360 ticks, tous les 5°)
— 9 stations disposées à 40° d'intervalle (S0–S8)
— 36 liens droits avec peignes de mesure perpendiculaires
— Traces sinusoïdales le long de chaque lien (signal porteur)
— Particules de données animées (flux visibles)
— Châssis : croix centrale, équerres d'angle, barre d'échelle (100 U), plaque constructeur
— REF.OSC : oscillateur de référence central avec figure de Lissajous
— Mini-map (120×120px) en bas à droite
MODE CANAL (N1 · ×2.5) — Oscilloscope par lien :
— Graticule 10×8 avec axe zéro
— Trace du signal sur 256 échantillons
— Spectre FFT 32 bins en bas
— Deux curseurs or (Δt) avec affichage du delta temporel
— Chevon directionnel à 66%
— REF.OSC réduit en coin supérieur droit comme indicateur de synchronisation
MODE MARQUEUR (N2 · ×5.0) — Spectromètre de masse :
— Pic central (mint) avec peigne isotopique (6 satellites ±48px)
— Règle graduée de 40 divisions
— Champs numériques : ID canal, ORIGIN, PAYLOAD (%), LATENCY (ms)
— Arc indicateur de position
Interactions : souris = parallaxe (±8px) · molette = zoom · clic = focus station / sélection canal · drag = rotation · double-clic centre = reset
→ IT : Dashboard topologique temps réel. Inspiré des analyseurs de réseau vectoriels (VNA) et des oscilloscopes de laboratoire. La métaphore du « circuit imprimé » rend visible les flux inter-services.
ZONE 3 · SIDEBAR
Panneau latéral : stations, registre et événements
STATIONS · SYM — Liste des 9 organes avec :
— Point coloré (cyan/or), identifiant (HL, DB, MD…), nom (HEAL, DATABASE…)
— Pourcentage de charge avec barre de progression
— Surbrillance or si focus/inspecté
— Clic = ouvre le panneau inspecteur
CANAL REGISTER — Tableau des 36 canaux :
— Numéro de canal (CH-00 à CH-35)
— Source > Destination (ex: HL>DB)
— Type (DATA, SIGNAL, IMMUNE)
— Barre ASCII de charge (6 caractères)
— Débit en /s
— Lignes en rouge si LOAD > 85%
EVENT LOG — 6 dernières entrées avec horodatage :
— BEAT (battement cardiaque 1 Hz / 60 BPM)
— INFO (changements de mode, focus, ping)
— CRIT (surcharges détectées)
→ IT : Équivalent d'un tableau de bord de supervision réseau (Nagios/Zabbix) mais avec une interface « instrument de laboratoire ». Chaque organe est une station de mesure.
ZONE 4 · BOT BAR
Barre d'état inférieure
LED de battement — Pulse à 1 Hz (60 BPM), opacity 1.0 quand actif, 0.35 au repos
Statut — TICK ▲ / IDLE ▼ · Mode (CIRCUIT/CANAL/MARQUEUR) · Échelle (×1.0/×2.5/×5.0) · LIVE/SIM
Légende — Trois types de flux : DATA (mint), SIGNAL (cyan), IMMUNE (gold)
Horloge — Heure locale au format HH:MM:SS
→ IT : Barre d'état façon oscilloscope. Le battement cardiaque (60 BPM) est l'horloge de référence du système — une métaphore du rythme biologique.
ZONE 5 · INSPECTOR PANEL
Panneau d'inspection de station (slide-in droite)
Panneau coulissant (280px) affiché au clic sur une station de la sidebar :
— ID : adresse hex (0x0040–0x0048) + code organe
— TYPE : ORGAN · DIFFERENTIAL
— LOAD : charge en % (vert < 70%, or 70–85%, rouge > 85%)
— RATE : débit en /s
— LATENCY : latence en ms
— UPTIME : disponibilité en %
— ACTIVITY · 7J : sparkline (100 points, 7 jours)
— LIENS CONNECTÉS : liste des canaux reliés à cette station (type coloré)
— Actions : FOCUS (centre la vue sur la station), ISOLATE (log), PING (mesure latence)
→ IT : Fiche détaillée d'un nœud du réseau. Équivalent d'un panneau de détails dans un outil de monitoring (Grafana drill-down). Le sparkline montre l'historique de charge sur 7 jours.
ZONE 6 · SOURCE DATA DIALOG
Configuration des sources de données externes
Boîte de dialogue modale (overlay) pour connecter des flux temps réel :
— TYPE : HTTP API (REST), WebSocket, MQTT Broker, File Watcher
— URL / ENDPOINT : adresse de la source de données
— AUTH : None, Bearer Token, Basic Auth (user:pass)
— INTERVALLE : période de polling en secondes (1–300s)
— TEST : vérifie la connectivité (affiche code HTTP, latence, taille)
— + AJOUTER : démarre le polling et ajoute la source à la liste
— Liste des sources : type, URL, statut (● actif / ○ inactif), suppression (×)
— Supporte les formats : {stations:[...]}, {nodes:[...]}, {metrics:[...]} ou tableau direct
— Reconnexion automatique WebSocket après 5s
— Fermeture par Escape ou clic sur l'overlay
→ IT : Connecteur universel de métriques. Permet d'alimenter FLOW depuis n'importe quelle API REST, broker MQTT (IoT), ou WebSocket. Les données sont matchées par id/name/index sur les 9 organes.
ZONE 7 · TOOLTIP
Infobulle de survol des canaux
Au survol d'un lien dans le canvas (mode CIRCUIT) :
— Numéro de canal (CH-00 à CH-35)
— Source > Destination (codes organes)
— Type de flux (DATA / SIGNAL / IMMUNE)
— LOAD en % avec niveau (NOMINAL / ELEVÉ / WARN / CRIT)
— RATE en /s
→ IT : Infobulle contextuelle. Affiche les métriques clés du canal sans avoir à zoomer.
◆CAS D'USAGE
1. DÉTECTION DE GOULOT D'ÉTRANGLEMENT — « Quel lien sature ? »
Un SRE constate une dégradation de performance. Il ouvre SYMBIOTE.FLOW et voit immédiatement
plusieurs canaux en rouge (LOAD > 85%). Le canal CH-07 (CODE>DATABASE) affiche 94% de charge
avec une latence de 45 ms. En passant en mode CANAL (N1), l'oscilloscope confirme une saturation
du signal. Le FFT montre une concentration anormale dans les basses fréquences.
Action : [CIRCUIT N0] → repérer les canaux rouges → [clic] sur CH-07 → [CANAL N1] → analyser la trace et le FFT
2. AUDIT DE TOPOLOGIE — « Qui parle à qui ? »
Un architecte infra veut comprendre les dépendances entre services. FLOW affiche les 36 canaux
avec leurs types (DATA, SIGNAL, IMMUNE). La sidebar « CANAL REGISTER » liste tous les liens.
L'inspecteur d'une station (clic sidebar) montre ses 8 canaux connectés. La mini-map
donne une vue d'ensemble compacte de la topologie complète.
Action : [SIDEBAR] → clic sur une station → [INSPECTOR] → examiner LIENS CONNECTÉS → FOCUS pour centrer la vue
3. INJECTION DE MÉTRIQUES EXTERNES — « Brancher Prometheus »
L'équipe DevOps veut alimenter FLOW avec des métriques réelles. Elle clique sur + SOURCE,
sélectionne HTTP API, entre l'URL du endpoint Prometheus, configure l'authentification Bearer,
et teste la connexion (✓ OK 200 · 45ms). Une fois ajoutée, les stations passent en mode LIVE ●
et les données simulées sont remplacées par les métriques réelles.
Action : [+ SOURCE] → HTTP API → URL Prometheus → Bearer Token → [TEST] → [+ AJOUTER] → badge LIVE ●
4. SURVEILLANCE EN TEMPS RÉEL — « Mode veille »
FLOW est laissé ouvert en mode CIRCUIT sur un écran de supervision. Le battement cardiaque
pulse à 60 BPM. L'EVENT LOG fait défiler les événements. Les surcharges apparaissent
automatiquement en rouge dans le CANAL REGISTER et dans le canvas. Le badge LIVE ●
confirme que les données sont temps réel. L'horloge en bas à droite donne l'heure.
Action : Laisser FLOW ouvert → surveiller les alertes CRIT dans l'EVENT LOG → cliquer sur les canaux rouges pour diagnostic