En la última publicación argumenté que una lista de tareas no es un enrutador — que la forma en que tú visualize una flota de agentes determina cómo piensas sobre ella. Una lista plana hace que los agentes parezcan intercambiables. Un grafo los hace sentir como una tubería. Ninguno captura lo que realmente ocurre cuando nueve agentes están ejecutándose, delegando, escalando y emitiendo un zumbido silencioso a diferentes ritmos.

Así que construí lo que quería ver: un cerebro 3D orbital donde cada agente es una región, y las regiones laten con telemetría en vivo. Este es el registro de ingeniería de cómo funciona.

El Mapeo

Nueve agentes, nueve regiones. No es una metáfora estirada hasta que rompa — es una correspondencia estructural suelta que resulta útil precisamente porque está equivocada de la manera correcta. El agente principal se encarga de la planificación y el despacho de nivel superior, por lo que se encuentra en la corteza prefrontal dorsolateral (dlPFC) — la parte del cerebro que realiza la función ejecutiva. Los agentes codificadores manejan el lenguaje y la sintaxis, por lo que se ubican en el giro frontal inferior izquierdo (L-IFG) y en el dorsal pre-premotor (pre-PMd). Y así sucesivamente:

La Geometría

Cada región es un blob generado proceduralmente. Partí de un icosaedro subdividido y apliqué movimiento browniano fractal de 3 octavas (fbm) a las posiciones de los vértices — un desplazamiento tipo Perlin que le da a cada región una silueta orgánica, ligeramente grumosa, en lugar de una esfera perfecta. La amplitud del desplazamiento está impulsada por la telemetría, de modo que una región ocupada literalmente se hincha y tiembla más que una inactiva.

Todo el cerebro está dentro de una carcasa de vidrio. Aquí es donde three.js r128 me jugó una mala pasada. Quería un material de vidrio físico real con transmission — la propiedad que hace que la luz se doble al atravesar una superficie. Pero MeshPhysicalMaterial.transmission llegó en r144. En r128, la aproximación más cercana es transparent: true con baja opacidad, clearcoat para el resalte especular, y side: DoubleSide para que veas la parte trasera de la carcasa a través del frente. La carcasa funciona con opacidad 0.14 y clearcoat 0.6. No es físicamente correcta. Se ve bien, y eso es lo que más importa.

three.js se vende localmente — sin CDN. Toda la biblioteca se sirve desde las rutas /vendor/* del panel de control. Esto evita la dependencia de un host de terceros y mantiene el panel autocontenido.

OrbitControls proporciona amortiguación, un límite de distancia de [2, 20] y un límite de ángulo polar para que no puedas voltear debajo del cerebro y perderte. Al hacer clic en una región, la cámara hace un tween durante 700 ms para enfocarla, todas las demás regiones se atenúan al 10 % de opacidad y se desliza un panel de detalle con efecto glassmorphism que muestra la cadena de modelos, estadísticas en vivo y un menú desplegable de anulación. Al hacer clic fuera, todo vuelve a su estado original.

Telemetría → Movimiento

El panel consulta /api/state cada 500 ms. Ese JSON impulsa todo lo visual: intensidad emisiva en cada región, amplitud de desplazamiento de vértices, chispas de partículas en zonas calientes y pulsos a lo largo de las líneas de conexión.

La decisión clave fue dar a cada región una firma de movimiento — una sensación rítmica diferente para que puedas distinguir a los agentes de un vistazo sin leer las etiquetas:

1. principal — parpadeo gamma a 40Hz. Rápido, dominante, lo que tu ojo capta primero.
2. codificador — onda beta a 20Hz. Estable, mecánica.
3. codificador-ligero — 12Hz. Una versión más suave del ritmo del codificador.
4. diagnóstico — ráfaga de saliencia a 60Hz usando pow(sin(t), 8). Picos agudos, no una onda suave. Parece que la atención se enfoca de repente.
5. diagnóstico-ligero — ondulación a 100Hz. Muy rápida, casi un resplandor.
6. investigador — anidamiento theta-gamma: una portadora de 3Hz modulada por un envoltorio gamma de 40Hz. Esta es mi favorita. Se parece a ondas lentas profundas con un parpadeo rápido encima, lo cual es literalmente lo que se ve en el acoplamiento theta-gamma en grabaciones hipocampales reales.
7. creativo — respiración a 1.5Hz con chispas ocasionales de partículas. Lenta, expansiva, un poco onírica.
8. operaciones — zumbido de baja frecuencia a 1.2Hz. El latido de fondo que sientes más que ves.
9. whatsapp-guest — 2Hz. Ritmo conversacional.

Los arcos son curvas CatmullRomCurve3 entre regiones, activados en eventos de delegación y escalamiento. Cuando el principal asigna una tarea al programador, un arco se ilumina entre dlPFC y L-IFG, pulsa una vez y se desvanece. Los arcos no son decorativos — son el registro de enrutamiento representado como anatomía.

El apóstrofe

Este es el error que tomó más tiempo encontrar.

El panel sirve una página de panel cuyo HTML se construye del lado del servidor a partir de una plantilla. Una línea en esa plantilla contenía la palabra brain's — con un apóstrofe. El motor de plantillas lo renderizó correctamente. El navegador lo recibió correctamente. Pero la cadena estaba incrustada dentro de un bloque <script> como parte de un literal de cadena JavaScript, y el apóstrofe terminó la cadena prematuramente. El resto del bloque de script — la inicialización completa de three.js, el bucle de telemetría, la configuración de OrbitControls — se convirtió en un error de sintaxis. Silencioso. No cerebro 3D. No error en la pestaña de red. Solo un lienzo en blanco y un error de consola enterrado bajo el ruido del framework.

La solución fue una sola palabra: se reformuló la cadena para evitar completamente el apóstrofe. Sin escapado, sin codificación de entidades — solo se reformuló. Es el tipo de solución que parece una derrota hasta que te das cuenta de que es la solución que se envía.

Este error también había estado rompiendo silenciosamente el JS del cliente del panel plano original. El cerebro 3D no lo introdujo — simplemente hizo visible la ruptura, porque de repente había un lienzo que debería haber tenido algo y no lo tenía.

Respaldo y accesibilidad

Dos rutas de respaldo. Si WebGL no está disponible — navegadores sin interfaz, máquinas antiguas, portátiles corporativos bloqueados — la vista 3D se sustituye por una nota .brain3d-fallback que explica qué te estás perdiendo y señala el panel plano. Sin lienzo roto, sin spam de errores.

Si el usuario tiene prefers-reduced-motion configurado, el desplazamiento de vértices y las chispas de partículas están desactivados. Las regiones siguen iluminándose con telemetría — la intensidad emisiva está bien, el movimiento es el problema — pero el cerebro no respira ni tiembla. Los pulsos de las líneas de conexión siguen disparándose porque son informativos, no decorativos, pero son breves y no se repiten.

Lo que llevo conmigo

El cerebro 3D no es un panel mejor que la lista plana. Es uno diferente. La lista plana responde a «¿qué está haciendo cada agente ahora?» El cerebro responde a «¿cómo se siente la flota siente mientras trabaja?» Son preguntas distintas, y ambas valen la pena poder hacerse.

Lo que más me sorprendió fueron las firmas de movimiento. Esperaba que la geometría y la carcasa de vidrio fueran la parte difícil. No lo eran. La parte difícil era hacer que nueve elementos pulsaran de maneras que se sintieran distinguibles sin ser caóticos. El anidamiento theta-gamma para el investigador fue el avance — una vez que tuve una región que sentía categóricamente diferente de las demás, el resto encajó como un espectro que va de «rápido y afilado» (diagnosticador) a «lento y respirante» (creativo).

El error de apóstrofe fue la lección que sigo reaprendiendo: cuando algo está roto y no encuentras la causa, busca el carácter que está desempeñando dos funciones. En una plantilla, un apóstrofe es inglés. En un bloque de script, es un delimitador. Cuando el mismo byte cumple ambos papeles, uno de ellos pierde.