◫ZONES DE L'INTERFACE
ZONE 1 · TOPBAR
Barre supérieure — identité et contrôles de zoom
Logo — 0DATA::SYMBIOTE.SKIN
Tagline — LA PEAU — FRONTIÈRE DU SOI // SYM.08
Contrôles de zoom — Trois niveaux hiérarchiques :
· N0 PEAU GLOBALE — Vue macroscopique de l'enveloppe complète (7 organes protégés visibles en transparence)
· N1 ZONE — Zoom régional sur une zone anatomique (FRONT, JOUE, TORSE, MAIN, NUQUE, ÉPAULE)
· N2 KÉRATINOCYTE — Vue microscopique d'un micro-firewall unitaire (règle WAF jetable)
Statut système — WAF ACTIF · mTLS MUTUEL · IAM SOI/NON-SOI
◈ THÈME — Ouverture du panneau de personnalisation visuelle
→ IT : Équivalent d'une barre d'état firewall (pfSense/OPNsense) + contrôles de drill-down par niveau d'abstraction.
ZONE 2 · STAGE (CANVAS)
Visualisation 3D de la peau — sphère hexagonale
L'espace central affiche une sphère géodésique composée de ~420 cellules hexagonales
représentant les kératinocytes (unités de firewall) :
— Chaque hexagone est un kératinocyte (règle WAF individuelle)
— Couleur normale (vert/mint) = cellule saine au repos
— Éclat bleu = trafic légitime en cours de traitement
— Rouge = intrusion bloquée (attaque SQLi, XSS, etc.)
— Or = anomalie comportementale (IAM revérifie le soi)
— Or vif = honeypot touché (cellule de Langerhans activée)
— Cicatrices (vert persistant) = patchs post-incident
Particules de flux — Points lumineux entrants représentant le trafic réseau :
· Bleu = requête légitime · Rouge = attaque · Or = anomalie
Balayage sentinelle — Arc tournant autour de la sphère (patrouille Langerhans)
Organes internes (N0) — 7 formes fantômes visibles par transparence
HUD (bas-gauche) — Rappel des couches : ÉPIDERME (WAF), DERME (IAM/secrets/mTLS), MÉLANOCYTES (absorption DDoS), LANGERHANS (sentinelles)
Zone label (haut-gauche) — Niveau de zoom actif et description
Interaction : Le survol de la souris déforme la peau (pression tactile).
→ IT : Dashboard 3D temps réel du périmètre de sécurité. Visualisation live du trafic, des blocages, et de l'état de santé de chaque règle WAF. Équivalent visuel d'un SIEM (Splunk/Elastic Security) mais organique.
ZONE 3 · SIDEBAR
Panneau de monitoring — compteurs vivants et audit
Quatre sections d'information en temps réel :
► COMPTEURS VIVANTS
· Requêtes/s — Débit de trafic légitime traité
· Bloquées (total) — Nombre cumulé d'attaques neutralisées
· Latence WAF — Temps de traitement moyen par requête (ms)
· Secrets actifs — Nombre de secrets chiffrés dans le derme
· Sessions IAM — Sessions d'identité actives (soi/non-soi)
· Honeypots touchés — Intrusions détectées par les leurres
► CHARGE / ABSORPTION
· Sueur (auto-scale) — Barre de charge : régulation thermique = élasticité infrastructure
· Mélanine (DDoS absorbé) — Barre rouge : capacité d'absorption des attaques volumétriques
► COUCHES
· ÉPIDERME — Règles WAF régénérées toutes les 28 cycles
· DERME — Secrets chiffrés + rotation mTLS 24h
· CICATRICES — Nombre de patchs post-incident appliqués
► AUDIT D'INTRUSION
· Flux de logs en temps réel (40 dernières entrées) :
· Vert (ok) = handshakes mTLS, régénérations, cicatrisations
· Rouge (blk) = attaques bloquées avec IP source
· Or (ano) = honeypots déclenchés, anomalies comportementales
→ IT : Dashboard de monitoring sécurité (Grafana/Datadog) + flux de logs SIEM en temps réel. Métriques : RPS, taux de blocage, latence WAF, secrets vault, sessions IAM.
ZONE 4 · BOTBAR
Barre inférieure — statut et devise
● Pulse — Indicateur de vie (clignotant, respiration du symbiote)
Version — SYMBIOTE.SKIN v8.0
Sens — TOUCHER : tu sens ce qui te touche (rappel de la fonction biologique)
Horloge — Heure locale en temps réel
Devise — SANS PEAU, UN ORGANISME N'EST QU'UNE PLAIE OUVERTE
→ IT : Barre de statut système avec uptime, version du service, et philosophie opérationnelle. Le pulse est un heartbeat de santé du service.
ZONE 5 · THEME PANEL
Panneau de personnalisation visuelle
Overlay modal accessible via le bouton ◈ THÈME de la topbar :
PALETTE — 5 thèmes de couleurs : CYAN, MINT, GOLD, VIOLET, RED
MODE SOMBRE — Bascule clair/sombre (checkbox)
TAILLE TEXTE — Curseur 10px à 18px
INTENSITÉ CANVAS — Curseur d'opacité 20% à 100% (assombrit le fond)
⟳ RÉINITIALISER — Retour aux réglages par défaut
Tous les réglages sont persistés dans le localStorage du navigateur.
→ IT : Panneau de préférences utilisateur avec thèmes. Équivalent du sélecteur de thème d'un IDE ou dashboard. Persistance locale, aucune donnée ne quitte le navigateur.
ZONE 6 · ALIF NERVOUS SYSTEM
Intégration au système nerveux ALIF
SYMBIOTE.SKIN émet des événements vers le bus ALIF (127.0.0.1:18770) :
Heartbeat — Toutes les 60 secondes (SKIN alive)
Anomalie — Seuils de blocage : >10 avertissement, >50 critique
Audit interne — Collecte de tous les événements (zoom, intrusion, honeypot, boot, DDoS)
Le script mini-alif.js fournit un moteur de règles local pour le traitement cross-symbiote.
→ IT : Agent de télémétrie (OpenTelemetry/Prometheus exporter). Heartbeat = health check. Événements = métriques + alertes. Le bus ALIF est le message broker interne (NATS/Kafka).
◆CAS D'USAGE
1. PROTECTION PÉRIMÉTRIQUE — « Qui frappe à la porte ? »
Un SOC analyste surveille le périmètre applicatif. Sur le canvas, des éclats rouges apparaissent
par vagues : une tentative de credential stuffing. Les kératinocytes s'illuminent en rouge,
le compteur « Bloquées » grimpe. L'audit d'intrusion liste chaque IP bloquée avec le type d'attaque.
La mélanine (barre DDoS) monte à 80% — les mélanocytes absorbent le volume. En 30 secondes,
l'attaque est neutralisée sans aucune requête ayant atteint les organes internes.
Action : Surveiller le canvas → lire l'audit → vérifier la barre mélanine → aucune action manuelle nécessaire
2. DÉTECTION D'INTRUSION — « Le honeypot a mordu »
Une cellule de Langerhans (honeypot) s'illumine en or vif sur le canvas. Le log affiche :
« HONEYPOT touché 10.4.2.187 — Langerhans alertée ». Un attaquant a interacté avec un leurre
déguisé en endpoint API. L'IAM revérifie immédiatement le statut soi/non-soi de toutes les
sessions actives. Le SOC est notifié via le bus ALIF (anomalie critique).
Action : Identifier la cellule or → lire le log → investiguer l'IP → ALIF émet l'alerte
3. ABSORPTION DDOS — « La mélanine au maximum »
Un DDoS volumétrique cible l'infrastructure. La barre mélanine passe à 95%, les cellules
s'illuminent en cascade. La sueur (auto-scale) déclenche l'élasticité : de nouvelles instances
absorbent le surplus. La latence WAF reste sous 15ms malgré la charge. Le canvas montre
une peau qui « bronze » sous l'assaut — les mélanocytes font leur travail de photoprotection
numérique. L'attaque dure 4 minutes, zéro dégradation de service.
Action : Surveiller les barres de charge → laisser l'auto-scale agir → vérifier la latence → post-mortem via les cicatrices
4. CICATRISATION POST-INCIDENT — « La peau se répare »
Après un incident de sécurité, le compteur « CICATRICES » s'incrémente. Chaque cicatrice
est un patch appliqué : règle WAF durcie, secret tourné, certificat révoqué. La peau
conserve la mémoire de l'attaque mais les kératinocytes endommagés sont remplacés
par régénération (rotation des règles). En N2, on peut zoomer sur une cicatrice
pour voir le détail du patch appliqué.
Action : Zoomer N2 sur une cicatrice → inspecter le patch → vérifier que la régénération est en cours