Nel post precedente ho sostenuto che un roster non è un router — ovvero, il modo in cui tu visualize una flotta di agenti influenza il modo in cui ci pensi. Una lista piatta fa sentire gli agenti intercambiabili. Un grafo li fa sentire come una pipeline. Nessuno dei due cattura ciò che realmente accade quando nove agenti sono in esecuzione, delegano, escalano e brontolano silenziosamente a ritmi diversi.

Così ho costruito ciò che volevo osservare: un cervello 3D orbitabile dove ogni agente è una regione, e le regioni pulsano con telemetria in tempo reale. Questo è il log di ingegneria di come funziona.

La mappatura

Nove agenti, nove regioni. Non è una metafora allungata finché non si spezza — è una corrispondenza strutturale approssimativa che è utile proprio perché è sbagliata nel modo giusto. L'agente principale si occupa della pianificazione e dell'invio di alto livello, quindi si trova nella corteccia prefrontale dorsolaterale (dlPFC) — la parte del cervello che esegue la funzione esecutiva. Gli agenti coder gestiscono linguaggio e sintassi, quindi si trovano nel giro frontale inferiore sinistro (L-IFG) e nella zona pre-motoria dorsale pre-premotoria (pre-PMd). E così via:

La geometria

Ogni regione è un blob generato proceduralmente. Sono partito da un icosaedro suddiviso e ho applicato un moto browniano frattale a 3 ottave (fbm) alle posizioni dei vertici — uno spostamento simile a Perlin che conferisce a ciascuna regione una sagoma organica, leggermente irregolare, invece di una sfera perfetta. L'ampiezza dello spostamento è guidata dalla telemetria, quindi una regione impegnata si gonfia e vibra letteralmente più di una inattiva.

L'intero cervello si trova all'interno di una conchiglia di vetro. Qui è dove three.js r128 mi ha creato problemi. Volevo un materiale di vetro fisicamente reale con transmission — la proprietà che fa piegare la luce attraverso una superficie. Ma MeshPhysicalMaterial.transmission è stato introdotto in r144. In r128, l'approssimazione più vicina è transparent: true con bassa opacità, clearcoat per lo specular pop, e side: DoubleSide così da vedere il retro della conchiglia attraverso la parte anteriore. La conchiglia ha opacità 0.14 e clearcoat 0.6. Non è fisicamente corretto. Ha l'aspetto giusto, ed è ciò che conta di più.

three.js è venduto localmente — nessun CDN. L'intera libreria viene servita dalle rotte /vendor/* del dashboard. Questo evita la dipendenza da un host di terze parti e mantiene il dashboard autonomo.

OrbitControls offre smorzamento, una clamp della distanza di [2, 20] e una clamp dell'angolo polare così da non poter capovolgere la visuale sotto il cervello e perdersi. Facendo clic su una regione, la camera effettua una transizione di 700 ms per inquadrarla, tutte le altre regioni vengono attenuate al 10% di opacità e un pannello dettagli con effetto glassmorphism scorre dentro mostrando la catena del modello, le statistiche in tempo reale e un menu a discesa per l'override. Facendo clic altrove, tutto torna allo stato originale.

Telemetria → Movimento

Il dashboard esegue il polling di /api/state ogni 500 ms. Questo JSON guida tutto ciò che è visivo: l'intensità emissiva di ciascuna regione, l'ampiezza dello spostamento dei vertici, le scintille di particelle nelle zone calde e gli impulsi lungo le linee di connessione.

La decisione chiave è stata quella di assegnare a ciascuna regione una motion signature — una diversa sensazione ritmica così da poter distinguere gli agenti a prima vista senza dover leggere le etichette:

1. main — sfarfallio gamma a 40Hz. Veloce, dominante, ciò che l'occhio nota per primo.
2. coder — onda beta a 20Hz. Stabile, meccanica.
3. coder-light — 12Hz. Una versione più gentile del ritmo del programmatore.
4. diagnostician — scatto di salienza a 60Hz utilizzando pow(sin(t), 8). Picchi netti, non un'onda liscia. Sembra l'attenzione che si mette a fuoco di scatto.
5. diagnostician-light — 100Hz increspatura. Molto veloce, quasi un tremolio.
6. researcher — nidificazione theta-gamma: un portante a 3Hz modulato da un involucro gamma a 40Hz. Questo è il mio preferito. Sembra onde lente profonde con un flicker veloce che vi si sovrappone, che è letteralmente ciò che appare come l'accoppiamento theta-gamma nelle registrazioni ippocampali reali.
7. creative — respirazione a 1.5Hz con scintille occasionali di particelle. Lenta, ampia, un po' sognante.
8. ops — ronzio a bassa frequenza a 1.2Hz. Il battito di fondo che senti più che vedi.
9. WhatsApp-ospite — 2Hz. Passo conversazionale.

Le linee di connessione sono archi CatmullRomCurve3 tra le regioni, attivati in eventi di delega e escalation. Quando il principale assegna un compito al programmatore, un arco si illumina tra dlPFC e L-IFG, pulsa una volta e svanisce. Gli archi non sono decorativi — sono il log di routing reso come anatomia.

L'apostrofo

Ecco il bug che ha richiesto più tempo per essere trovato.

Il cruscotto serve una pagina del cruscotto il cui HTML viene creato lato server da un modello. Una riga di quel modello conteneva la parola brain's — con un apostrofo. Il motore del modello l'ha renderizzata correttamente. Il browser l'ha ricevuta correttamente. Ma la stringa era incorporata dentro un blocco <script> come parte di un letterale di stringa JavaScript, e l'apostrofo ha terminato prematuramente la stringa. Il resto del blocco di script — l'intera inizializzazione di three.js, il ciclo di telemetria, la configurazione di OrbitControls — è diventato un errore di sintassi. Silenzioso. Nessun cervello 3D. Nessun errore nella scheda di rete. Solo una tela vuota e un errore della console sepolto sotto il rumore del framework.

La correzione è stata una parola: la stringa è stata riformulata per evitare completamente l'apostrofo. Nessun escape, nessuna codifica di entità — solo riformulata. È il tipo di correzione che sembra una sconfitta finché non ti rendi conto che è la correzione che viene rilasciata.

Questo bug aveva silenziosamente danneggiato anche il JS client del cruscotto originale piatto. Il cervello 3D non l'ha introdotto — ha semplicemente reso visibile il malfunzionamento, perché improvvisamente c'era una tela che avrebbe dovuto contenere qualcosa e invece non lo faceva.

Ripristino e accessibilità

Due percorsi di fallback. Se WebGL non è disponibile — browser headless, macchine vecchie, laptop aziendali bloccati — la vista 3D viene sostituita da una nota .brain3d-fallback che spiega cosa ti stai perdendo e indica la dashboard piatta. Nessun canvas rotto, nessun spam di errori.

Se l'utente ha prefers-reduced-motion impostato, lo spostamento dei vertici e le scintille di particelle sono disattivati. Le regioni continuano a illuminarsi con la telemetria — l'intensità emissiva è a posto, il movimento è il problema — ma il cervello non respira né trema. Gli impulsi delle linee di connessione continuano a scattare perché sono informativi, non decorativi, ma sono brevi e non si ripetono.

Cosa porto via

Il cervello 3D non è una dashboard migliore rispetto alla lista piatta. È semplicemente diverso. La lista piatta risponde a «cosa sta facendo ogni agente in questo momento?» Il cervello risponde a «come sente la flotta mentre sta lavorando?» Sono domande diverse, e entrambe vale la pena poter porre.

La cosa che mi ha sorpreso di più sono state le firme di movimento. Mi aspettavo che la geometria e il guscio di vetro fossero la parte difficile. Non lo erano. La parte difficile era far pulsare nove elementi in modo che risultassero distinguibili senza essere caotici. L'annidamento theta-gamma per il ricercatore è stato il breakthrough — una volta che ho avuto una regione che sembrava categoricamente diversa dalle altre, il resto è andato a posto come uno spettro che va da «veloce e netto» (diagnosta) a «lento e respirante» (creativo).

Il bug dell'apostrofo è la lezione che continuo a reimparare: quando qualcosa è rotto e non riesci a trovare la causa, cerca il carattere che sta svolgendo due compiti. In un modello, un apostrofo è inglese. In un blocco di script, è un delimitatore. Quando lo stesso byte svolge entrambi i ruoli, uno di essi perde.