In dem letzten Beitrag habe ich argumentiert, dass eine Liste kein Router ist — dass die Art und Weise, wie du visualize eine Agentenflotte, beeinflusst, wie du darüber nachdenkst. Eine flache Liste lässt die Agenten austauschbar erscheinen. Ein Graph lässt sie wie eine Pipeline erscheinen. Beides erfasst nicht, was tatsächlich passiert, wenn neun Agenten laufen, delegieren, eskalieren und leise mit unterschiedlichen Rhythmen summen.

Also habe ich das gebaut, was ich mir ansehen wollte: ein umkreisbares 3D-Gehirn, in dem jeder Agent eine Region ist und die Regionen mit Live-Telemetrie pulsieren. Dies ist das Engineering-Log, wie es funktioniert.

Die Zuordnung

Neun Agenten, neun Regionen. Keine Metapher, die bis zum Bruch gespannt ist — stattdessen eine lose strukturelle Entsprechung, die genau deshalb nützlich ist, weil sie auf die richtige Weise falsch ist. Der Hauptagent übernimmt Planung und Top-Level-Dispatch, weshalb er im dorsolateralen präfrontalen Kortex (dlPFC) angesiedelt ist — dem Teil des Gehirns, der exekutive Funktionen ausführt. Die Coder-Agenten übernehmen Sprache und Syntax, weshalb sie im linken unteren Frontalgyrus (L-IFG) und im präprämotorischen dorsalen Bereich (pre-PMd) angesiedelt sind. Und so weiter:

Die Geometrie

Jede Region ist ein prozedural generierter Blob. Ich begann mit einem unterteilten Ikosaeder und wendete 3-Oktaven fraktales Brownsches Bewegung (fbm) auf die Vertex-Positionen an — eine perlin-artige Verschiebung, die jeder Region eine organische, leicht unregelmäßige Silhouette statt einer perfekten Kugel verleiht. Die Verschiebungsamplitude wird durch Telemetrie gesteuert, sodass eine beschäftigte Region tatsächlich stärker anschwillt und zittert als eine inaktive.

Das gesamte Gehirn befindet sich innerhalb einer Glas-Schale. Hier hat mich three.js r128 einen Strich durch die Rechnung gemacht. Ich wollte ein echtes physikalisches Glas-Material mit transmission — die Eigenschaft, die Licht durch eine Oberfläche brechen lässt. Aber MeshPhysicalMaterial.transmission kam erst in r144. In r128 ist die nächste Annäherung transparent: true bei niedriger Opazität, clearcoat für den spekularen Glanz, und side: DoubleSide, damit du die Rückseite der Schale durch die Vorderseite siehst. Die Schale läuft mit einer Opazität von 0,14 und einem clearcoat von 0,6. Es ist nicht physikalisch korrekt. Es sieht richtig aus, und das ist wichtiger.

three.js wird lokal vendored — kein CDN. Die gesamte Bibliothek wird über die /vendor/*-Routes des Dashboards bereitgestellt. Dadurch wird eine Abhängigkeit von einem Drittanbieter-Host vermieden und das Dashboard bleibt eigenständig.

OrbitControls bietet Dämpfung, eine Distanzbegrenzung von [2, 20] und eine Polwinkelbegrenzung, damit du nicht unter dem Gehirn umkippen und dich verlieren kannst. Klicke auf eine Region und die Kamera bewegt sich über 700 ms, um sie einzurahmen; alle anderen Regionen werden auf 10 % Opazität abge dimmt und ein Glassmorphismus-Detailpanel schiebt sich ein, das die Modellkette, Live-Statistiken und ein Override-Dropdown zeigt. Klicke weg und alles wird wiederhergestellt.

Telemetrie → Bewegung

Das Dashboard fragt /api/state alle 500 ms ab. Dieses JSON steuert alles Visuelle: die emissive Intensität jeder Region, die Vertex-Verschiebungsamplitude, Partikel-Funken in Hot-Zones und Pulse entlang der Verbindungslinien.

Die entscheidende Entscheidung bestand darin, jeder Region eine motion signature zu geben — ein unterschiedliches rhythmisches Gefühl, damit du die Agenten auf einen Blick unterscheiden kannst, ohne Etiketten zu lesen:

1. main — Gamma-Flackern bei 40Hz. Schnell, dominant, das, was dein Auge zuerst wahrnimmt.
2. coder — Beta-Welle bei 20Hz. Beständig, mechanisch.
3. coder-light — 12Hz. Eine sanftere Version des Rhythmus des Coders.
4. diagnostician — Salienz-Ausbruch bei 60Hz mittels pow(sin(t), 8). Scharfe Spitzen, keine gleichmäßige Welle. Sieht aus, als würde die Aufmerksamkeit plötzlich fokussieren.
5. diagnostician-light — 100Hz-Wellenschlag. Sehr schnell, fast ein Schimmern.
6. researcher — Theta-Gamma-Einbettung: ein 3Hz-Träger, moduliert durch eine 40Hz-Gamma-Hüllkurve. Dies ist mein Favorit. Es sieht aus wie tief langsame Wellen mit schnellem Flackern darauf, was genau der Theta-Gamma-Kopplung in echten Hippocampus-Aufnahmen entspricht.
7. creative — Atmung bei 1.5Hz mit gelegentlichen Partikelfunken. Langsam, weitläufig, ein wenig traumhaft.
8. ops — Niedrigfrequentes Summen bei 1.2Hz. Der Hintergrundschlag, den du eher spürst als siehst.
9. whatsapp-guest — 2Hz. Gesprächstempo.

Verbindungslinien sind CatmullRomCurve3-Bögen zwischen Regionen, die bei Delegations- und Eskalationsereignissen ausgelöst werden. Wenn der Haupt eine Aufgabe an den Coder übergibt, leuchtet ein Bogen zwischen dlPFC und L-IFG auf, pulsiert einmal und verblasst. Die Bögen sind nicht dekorativ — sie sind das Routing-Protokoll, das als Anatomie dargestellt wird.

Der Apostroph

Hier ist der Bug, der am längsten zu finden war.

Das Dashboard stellt eine Dashboard-Seite bereit, deren HTML serverseitig aus einer Vorlage erstellt wird. In einer Zeile dieser Vorlage stand das Wort brain's — mit einem Apostroph. Die Vorlagen-Engine hat es korrekt gerendert. Der Browser hat es korrekt empfangen. Aber die Zeichenkette war in einem <script>-Block als Teil eines JavaScript-String-Literals eingebettet, und der Apostroph hat die Zeichenkette vorzeitig beendet. Der Rest des Skriptblocks — die gesamte three.js-Initialisierung, die Telemetrie-Schleife und die OrbitControls-Einrichtung — wurde zu einem Syntaxfehler. Stillschweigend. Kein 3D-Gehirn. Kein Fehler im Netzwerk-Tab. Nur ein leeres Canvas und ein Konsolenfehler, der unter Framework-Rauschen verborgen war.

Die Korrektur bestand aus einem Wort: Die Zeichenkette wurde umformuliert, um den Apostroph vollständig zu vermeiden. Kein Escaping, keine Entity-Kodierung — einfach nur umformuliert. Das ist die Art von Korrektur, die zunächst wie eine Niederlage wirkt, bis man erkennt, dass sie die ist, die ausgeliefert wird.

Dieser Bug hat auch das Client-JS des ursprünglichen flachen Dashboards heimlich zerstört. Das 3D-Gehirn hat es nicht eingeführt — es hat lediglich den Bruch sichtbar gemacht, denn plötzlich gab es ein Canvas, das etwas enthalten sollte, aber leer blieb.

Fallback und Barrierefreiheit

Zwei Fallback-Pfade. Wenn WebGL nicht verfügbar ist — kopf‑lose Browser, alte Maschinen, gesperrte Firmenlaptops — wird die 3D-Ansicht durch eine .brain3d-fallback-Notiz ersetzt, die erklärt, was fehlt, und auf das flache Dashboard verweist. Kein kaputtes Canvas, kein Fehler-Spam.

Wenn der Benutzer prefers-reduced-motion gesetzt hat, sind Vertex-Verschiebung und Partikel-Funken deaktiviert. Die Regionen leuchten weiterhin mit Telemetrie — die emissive Intensität ist in Ordnung, die Bewegung ist das Problem — aber das Gehirn atmet nicht oder zuckt nicht. Verbindungslinien-Impulse feuern weiterhin, weil sie informativ, nicht dekorativ sind, aber sie sind kurz und wiederholen sich nicht.

Was ich mitnehme

Das 3D-Gehirn ist kein besseres Dashboard als die flache Liste. Es ist ein anderes Dashboard. Die flache Liste antwortet auf die Frage „Was macht jeder Agent gerade?“ Das Gehirn antwortet auf die Frage „Wie fühlt sich die Flotte feel während ihrer Arbeit an?“ Das sind unterschiedliche Fragen, und beide sind es wert, gestellt zu werden.

Das, was mich am meisten überrascht hat, waren die Bewegungsmuster. Ich erwartete, dass die Geometrie und die Glas-Schale der schwierige Teil wären. Das waren sie nicht. Der schwierige Teil bestand darin, neun Dinge so pulsieren zu lassen, dass sie unterscheidbar fühlten, ohne chaotisch zu sein. Die Theta-Gamma-Nesting für den Forscher war der Durchbruch — sobald ich eine Region hatte, die sich kategorisch anders anfühlte als die anderen, fielen die übrigen Teile in ein Spektrum von „schnell und scharf“ (Diagnostiker) zu „langsam und atmend“ (Kreativer).

Der Apostroph-Bug war die Lektion, die ich immer wieder lerne: Wenn etwas kaputt ist und du die Ursache nicht finden kannst, suche nach dem Zeichen, das zwei Aufgaben erfüllt. In einer Vorlage ist ein Apostroph Englisch. In einem Skriptblock ist es ein Trennzeichen. Wenn das gleiche Byte beide Rollen spielt, verliert eines davon.