前回の投稿で、ロスターはルーターではないと主張しました — つまり、あなたがvisualizeするエージェント フリートの方法が、それをどう考えるかを形作ります。フラットなリストはエージェントを交換可能に感じさせます。グラフはパイプラインのように感じさせます。どちらも、9つのエージェントが実行され、委任され、エスカレーションされ、異なるリズムで静かに動作している実際の状況を捉えていません。

それで、私が見たいと思ったものを作りました：各エージェントが領域であり、領域がライブ テレメトリーで脈動する、周回可能な3D脳です。これがその仕組みのエンジニアリング ログです。

マッピング

9つのエージェント、9つの領域。それが壊れるまで伸ばされたメタファーではなく、正しい方法で間違っているからこそ役立つ、ゆるやかな構造的対応です。メインエージェントは計画とトップレベルのディスパッチを担当するため、実行機能を司る脳の部分である背外側前前頭皮質（dlPFC）に位置します。コーダーエージェントは言語と構文を扱うため、左下前頭回（L-IFG）および前前運動野背側（pre-PMd）に配置されます。以下同様：

ジオメトリ

各リージョンはプロシージャルに生成されたブロブです。私は subdivide された二十面体から始め、頂点位置に 3 オクターブのフラクタルブラウン運動（fbm）を適用しました — これは Perlin 風の変位で、完璧な球体ではなく各リージョンに有機的でややこぶのあるシルエットを与えます。変位の振幅はテレメトリーによって駆動され、そのため忙しいリージョンはアイドル状態のリージョンよりも実際に膨らみ、震えます。

脳全体はガラスのシェルの中にあります。ここで three.js r128 が私を悩ませました。私は transmission を持つ実際の物理的なガラスマテリアルが欲しかった — 表面を通して光を曲げる性質。しかし MeshPhysicalMaterial.transmission は r144 で実装されました。r128 では、最も近い近似は低い不透明度の transparent: true 、スペキュラーポップのための clearcoat 、そして前面を通して背面が見えるようにする side: DoubleSide です。シェルは不透明度 0.14、クリアコート 0.6 で動作します。これは物理的に正確ではありません。しかし見た目が正しければそれで十分であり、それがより重要です。

three.js はローカルでベンダーされています — CDN は使用していません。ダッシュボードの /vendor/* ルートからライブラリ全体が提供されます。これによりサードパーティホストへの依存を避け、ダッシュボードを自己完結型に保ちます。

OrbitControls は減衰、距離のクランプ [2, 20]、そして脳の下にフリップして迷子になるのを防ぐ極角クランプを提供します。リージョンをクリックすると、カメラは 700ms でトウィーンしそれをフレームに収め、他のすべてのリージョンは 10% の不透明度に暗くなり、ガラスモーフィズムの詳細パネルがスライドインしてモデルチェーン、ライブ統計、およびオーバーライドドロップダウンを表示します。クリックを外すとすべてが元に戻ります。

テレメトリー → モーション

ダッシュボードは 500ms おきに /api/state をポーリングします。この JSON がすべてのビジュアルを駆動します：各リージョンのエミッシブ強度、頂点変位の振幅、ホットゾーンでのパーティクルスパーク、および接続線上のパルス。

重要な決定は、各リージョンに motion signature を与えることでした — ラベルを読まずに一目でエージェントを区別できるように、異なるリズム感を与えるためです。

1. main — ガンマフリッカー 40Hz。速く、支配的で、目に最初に映るもの。
2. coder — ベータ波 20Hz。安定していて、機械的。
3. coder-light — 12Hz。コーダーのリズムの穏やかなバージョン。
4. diagnostician — 60Hzでの注目性のバーストを pow(sin(t), 8) を使用して。鋭いスパイクで、滑らかな波ではない。焦点に注意がパチッと合わされるように見える。
5. diagnostician-light — 100Hzのリップル。非常に速く、ほぼきらめき。
6. researcher — シータ-ガンマ ネスト: 3Hz のキャリアが 40Hz の ガンマ エンベロープで変調される。これが私のお気に入りです。深い遅い波に速いフリッカーが乗っているように見え、これは実際の海馬記録における シータ-ガンマ カップリングそのものです。
7. creative — 1.5Hz の呼吸に時々粒子のスパークがある。ゆっくり、広がりがあり、少し夢見心地。
8. ops — 1.2Hz の低周波のハム。見るよりも感じるバックグラウンドの心拍。
9. WhatsAppゲスト — 2Hz. 会話のペース。

接続線は、地域間のCatmullRomCurve3アークであり、委任およびエスカレーションイベント時に発火します。メインがコーダーにタスクを渡すとき、dlPFCとL-IFGの間にアークが点灯し、一度パルスしてからフェードアウトします。これらのアークは装飾ではなく、解剖学的に描かれたルーティングログです。

アポストロフィー

これが見つけるのに最も時間がかかったバグです。

ダッシュボードは、テンプレートからサーバーサイドで構築されるHTMLのダッシュボードページを提供します。そのテンプレートの1行に、brain'sという単語が含まれていました — アポストロフィー付きで。テンプレートエンジンはこれを正しくレンダリングしました。ブラウザーはこれを正しく受信しました。しかし、この文字列はJavaScriptの文字列リテラルの一部として<script>ブロックに埋め込まれており、アポストロフィーが文字列を早期に終了させました。スクリプトブロックの残り — three.jsの初期化全体、テレメトリーループ、OrbitControlsのセットアップ — は構文エラーとなりました。静かに。3D脳はありません。ネットワークタブにエラーはありません。ただ空のキャンバスと、フレームワークのノイズに埋もれたコンソールエラーだけがありました。

修正は一文字でした：アポストロフィーを完全に避けるように文字列を言い換えました。エスケープもエンティティエンコードもせず、ただ言い換えただけです。これは、実際に出荷される修正だと気づくまで、敗北のように感じるような修正の種類です。

このバグは、元のフラットダッシュボードのクライアントJSも静かに壊していました。3D脳がこれを導入したわけではなく、ただ壊れ目を可視化しただけです。なぜなら突然、何かがあるべきキャンバスが空になったからです。

フォールバックとアクセシビリティ

2つのフォールバックパス。WebGLが利用できない場合 — ヘッドレスブラウザ、古いマシン、ロックダウンされた企業用ラップトップ — 3Dビューは.brain3d-fallbackの注釈に置き換わり、何が欠けているか説明し、フラットダッシュボードを指し示します。壊れたキャンバスもエラースパムもありません。

ユーザーがprefers-reduced-motionを設定している場合、頂点の変位とパーティクルのスパークは無効になります。領域はテレメトリーによってまだ発光します — エミッシブ強度は問題なく、問題は動きです — しかし、脳は呼吸したり震えたりしません。接続ラインのパルスは情報提供のためであり装飾ではないためまだ発火しますが、短くループしません。

私が得た教訓

3Dブレインはフラットリストよりも優れたダッシュボードではありません。違うものです。フラットリストは「各エージェントは今何をしているのか？」という問いに答えます。ブレインは「フリートは作業中にどのように感じているか？」という問いに答えます。これらは異なる問いであり、両方とも問える価値があります。

私が最も驚いたのはモーションシグニチャーでした。幾何学とガラスシェルが難しい部分だと予想していましたが、そうではありませんでした。難しかったのは、混沌とすることなく区別できるように9つの要素を脈動させることでした。研究者のためのTheta‑ガンマネスティングがブレークスルーでした — — 1つの領域が他とカテゴリ的に異なる感覚を持つようになったとき、残りは「速く鋭い」（診断士）から「ゆっくりと息をする」（クリエイティブ）までのスペクトラムとして収まりました。

アポストロフィーバグは私が繰り返し学ぶ教訓です：何かが壊れて原因が見つからないとき、2つの役割を果たしている文字を探してください。テンプレートではアポストロフィーは英語です。スクリプトブロックでは区切り文字です。同じバイトが両方の役割を果たすとき、一方が失われます。