Dans le dernier article, j'ai soutenu qu'une liste de tâches n'est pas un routeur — que la façon dont vous visualize une flotte d'agents influence votre façon de penser à son sujet. Une liste plate donne l'impression que les agents sont interchangeables. Un graphe les fait paraître comme un pipeline. Aucun ne saisit réellement ce qui se passe lorsque neuf agents s'exécutent, délèguent, escaladent et murmurent doucement à des rythmes différents.

Alors j'ai construit ce que je voulais voir : un cerveau 3D orbital où chaque agent est une région, et les régions pulsent avec la télémétrie en direct. C'est le journal d'ingénierie de son fonctionnement.

Le mappage

Neuf agents, neuf régions. Ce n'est pas une métaphore poussée jusqu'à la rupture — c'est une correspondance structurelle lâche qui est utile précisément parce qu'elle est erronée de la bonne manière. L'agent principal gère la planification et la répartition de haut niveau, donc il se situe dans le cortex préfrontal dorsolatéral (dlPFC) — la partie du cerveau qui assure la fonction exécutive. Les agents codeurs gèrent le langage et la syntaxe, donc ils se trouvent dans le gyrus frontal inférieur gauche (L-IFG) et le prémoteur dorsal pré-pré (pre-PMd). Et ainsi de suite :

La Géométrie

Chaque région est un blob généré procéduralement. Je suis parti d'un icosaèdre subdivisé et j'ai appliqué un mouvement brownien fractal à 3 octaves (fbm) aux positions des sommets — un déplacement de type Perlin-ish qui donne à chaque région une silhouette organique, légèrement bosselée, au lieu d'une sphère parfaite. L'amplitude du déplacement est pilotée par la télémétrie, donc une région chargée gonfle et tremble littéralement plus qu'une région inactive.

Le cerveau entier se trouve à l'intérieur d'une coquille en verre. C'est là que three.js r128 m'a posé problème. Je voulais un matériau verre réellement physique avec transmission — la propriété qui fait courber la lumière à travers une surface. Mais MeshPhysicalMaterial.transmission est arrivé dans r144. Dans r128, l'approximation la plus proche est transparent: true avec une faible opacité, clearcoat pour l'effet spéculaire, et side: DoubleSide afin de voir l'arrière de la coquille à travers l'avant. La coquille fonctionne avec une opacité de 0.14 et un clearcoat de 0.6. Ce n'est pas physiquement correct. Ça a l'air juste, ce qui importe davantage.

three.js est vendéen localement — pas de CDN. Toute la bibliothèque est servie depuis les routes /vendor/* du tableau de bord. Cela évite la dépendance à un hébergeur tiers et maintient le tableau de bord autonome.

OrbitControls offre un amortissement, une limitation de distance de [2, 20], et une limitation d'angle polaire afin de ne pas pouvoir retourner sous le cerveau et se perdre. En cliquant sur une région, la caméra effectue une interpolation sur 700 ms pour l'encadrer, toutes les autres régions passent à 10 % d'opacité, et un panneau de détail en verre dépoli glisse pour afficher la chaîne de modèle, les statistiques en direct et un menu déroulant de remplacement. En cliquant ailleurs, tout revient à l'état initial.

Télémétrie → Mouvement

Le tableau de bord interroge /api/state toutes les 500 ms. Ce JSON pilote tout ce qui est visuel : intensité émissive sur chaque région, amplitude du déplacement des sommets, étincelles de particules dans les zones chaudes, et pulsations le long des lignes de connexion.

La décision clé consistait à attribuer à chaque région une signature de mouvement — une sensation rythmique différente permettant de distinguer les agents d'un coup d'œil sans lire les étiquettes :

1. principal — scintillement gamma à 40Hz. Rapide, dominant, c’est ce que votre œil remarque en premier.
2. codeur — onde bêta à 20Hz. Stable, mécanique.
3. codeur-léger — 12Hz. Une version plus douce du rythme du codeur.
4. diagnosticien — rafale de saillance à 60Hz en utilisant pow(sin(t), 8). Pointes aiguës, pas une onde douce. Ça ressemble à l'attention qui se fixe soudainement.
5. diagnosticien-léger — ondulation à 100Hz. Très rapide, presque un scintillement.
6. chercheur — imbrication theta-gamma : une porteuse de 3Hz modulée par une enveloppe gamma de 40Hz. C’est mon préféré. Cela ressemble à des ondes lentes profondes avec un scintillement rapide qui se superpose, ce qui correspond littéralement à ce que montre le couplage theta-gamma dans les enregistrements hippocampiques réels.
7. créatif — respiration à 1.5Hz avec des étincelles de particules occasionnelles. Lente, expansive, un peu rêveuse.
8. opérations — bourdonnement basse fréquence à 1.2Hz. Le battement de fond que vous ressentez plus que vous ne voyez.
9. whatsapp-guest — 2Hz. Rythme conversationnel.

Les lignes de connexion sont des arcs CatmullRomCurve3 entre les régions, déclenchés lors d'événements de délégation et d'escalade. Lorsque le main confie une tâche au codeur, un arc s'illumine entre le dlPFC et le L-IFG, pulse une fois, puis s'estompe. Les arcs ne sont pas décoratifs — ils représentent le journal de routage rendu sous forme d'anatomie.

L'apostrophe

Voici le bug qui a pris le plus de temps à trouver.

Le tableau de bord sert une page de tableau de bord dont le HTML est construit côté serveur à partir d'un modèle. Une ligne de ce modèle contenait le mot brain's — avec une apostrophe. Le moteur de modèle l'a rendu correctement. Le navigateur l'a reçu correctement. Mais la chaîne était incorporée dans un bloc <script> faisant partie d'un littéral de chaîne JavaScript, et l'apostrophe a terminé la chaîne prématurément. Le reste du bloc de script — l'initialisation complète de three.js, la boucle de télémétrie, la configuration d'OrbitControls — est devenu une erreur de syntaxe. Silencieux. Aucun cerveau 3D. Aucune erreur dans l'onglet réseau. Juste un canevas vide et une erreur de console enfouie sous le bruit du framework.

La correction consisted en un seul mot : reformuler la chaîne pour éviter complètement l'apostrophe. Aucun échappement, aucun encodage d'entité — juste la reformuler. C'est le genre de correction qui donne l'impression d'un échec jusqu'à ce que vous réalisiez que c'est la correction qui est déployée.

Ce bug avait également silencieusement cassé le JavaScript client du tableau de bord plat d'origine. Le cerveau 3D ne l'a pas introduit — il a simplement rendu la rupture visible, car soudainement il y avait un canevas qui aurait dû contenir quelque chose et qui ne contenait rien.

Fallback et accessibilité

Deux chemins de secours. Si WebGL n'est pas disponible — navigateurs headless, vieilles machines, ordinateurs portables d'entreprise verrouillés — la vue 3D est remplacée par une note .brain3d-fallback expliquant ce qui vous manque et pointant vers le tableau de bord plat. Aucun canevas cassé, aucun spam d'erreur.

Si l'utilisateur a prefers-reduced-motion défini, le déplacement des sommets et les étincelles de particules sont désactivés. Les régions s'illuminent toujours avec la télémétrie — l'intensité émissive est correcte, le mouvement est le problème — mais le cerveau ne respire ni ne frémit. Les impulsions des lignes de connexion se déclenchent toujours car elles sont informatives, pas décoratives, mais elles sont courtes et ne bouclent pas.

Ce que je retiens

Le cerveau 3D n'est pas un meilleur tableau de bord que la liste plate. C'est un autre. La liste plate répond à la question « que fait chaque agent en ce moment ? » Le cerveau répond à la question « comment la flotte se sent lorsqu'elle travaille ? » Ce sont des questions différentes, et les deux valent la peine d'être posées.

Ce qui m'a le plus surpris, c'était les signatures de mouvement. Je pensais que la géométrie et la coque en verre seraient la partie difficile. Ce n'était pas le cas. La partie difficile consistait à faire pulsar neuf éléments de manière à ce qu'ils soient discernables sans être chaotiques. L'imbrication theta-gamma pour le chercheur a été la percée — une fois que j'ai eu une région qui semblait catégoriquement différente des autres, le reste s'est mis en place sous la forme d'un spectre allant de « rapide et net » (diagnosticien) à « lent et respirant » (créatif).

Le bug de l'apostrophe est la leçon que je réapprends sans cesse : lorsqu'un élément est cassé et que vous ne trouvez pas la cause, cherchez le caractère qui remplit deux fonctions. Dans un modèle, une apostrophe fait partie de l'anglais. Dans un bloc de script, c'est un délimiteur. Lorsque le même octet joue les deux rôles, l'un d'eux perd.