Merge remote main with local project

ui/app/components/AgentTrustMonitor.tsx

@@ -30,7 +30,7 @@ function trustColor(t: number) {
 export default function AgentTrustMonitor({
   observation, trustDeltas, activeSpec, events, running, totalReward,
 }: Props) {
-  const agents = observation?.available_specialists ?? ["S0", "S1", "S2", "S3", "S4"];
+  const agents = observation?.available_specialists || observation?.available_workers || ["S0", "S1", "S2", "S3", "S4"];
   const trust = observation?.trust_snapshot ?? {};
   const lastReward = observation?.last_reward ?? 0;
 
@@ -108,4 +108,4 @@ export default function AgentTrustMonitor({
       </div>
     </div>
   );
-}
+}

ui/app/components/GPUClusterPanel.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { useState, useEffect, useRef } from "react";
-import { motion, AnimatePresence } from "framer-motion";
+import { useState, useEffect } from "react";
+import { motion } from "framer-motion";
 
 type NodeStatus = "ACTIVE" | "IDLE" | "OVERLOADED" | "FAILED";
 
@@ -13,79 +13,82 @@ interface GPUNode {
   status: NodeStatus;
 }
 
-export default function GPUClusterPanel() {
+interface GPUClusterPanelProps {
+  sessionId?: string;
+  mode?: string;
+  gpuPool?: any[]; // Live data from observation
+}
+
+export default function GPUClusterPanel({ sessionId, mode, gpuPool }: GPUClusterPanelProps) {
   const [mounted, setMounted] = useState(false);
   const [nodes, setNodes] = useState<GPUNode[]>([
-    { id: "GPU-1", utilization: 45, memory: 32, load: 1.2, status: "ACTIVE" },
-    { id: "GPU-2", utilization: 12, memory: 8, load: 0.4, status: "IDLE" },
-    { id: "GPU-3", utilization: 88, memory: 64, load: 2.8, status: "ACTIVE" },
+    { id: "GPU-1", utilization: 0, memory: 0, load: 0, status: "IDLE" },
+    { id: "GPU-2", utilization: 0, memory: 0, load: 0, status: "IDLE" },
+    { id: "GPU-3", utilization: 0, memory: 0, load: 0, status: "IDLE" },
     { id: "GPU-4", utilization: 0, memory: 0, load: 0, status: "IDLE" },
   ]);
 
   const [avgLoad, setAvgLoad] = useState(0);
   const [jitter, setJitter] = useState(0.45);
 
+  useEffect(() => { setMounted(true); }, []);
+
+  // ── LIVE SYNC FROM OBSERVATION ────────────────────────────
   useEffect(() => {
-    setMounted(true);
-    const interval = setInterval(() => {
-      setJitter(Math.random() * 2);
-      setNodes((prev) =>
-        prev.map((node) => {
-          if (node.status === "FAILED") {
-            if (Math.random() > 0.95) return { ...node, status: "IDLE", utilization: 0, load: 0 };
-            return node;
-          }
-          if (Math.random() > 0.995) {
-            return { ...node, status: "FAILED", utilization: 0, memory: 0, load: 0 };
-          }
-          let util = node.utilization + (Math.random() - 0.5) * 15;
-          if (Math.random() > 0.9) util += 30;
-          util = Math.max(0, Math.min(100, util));
-          const mem = Math.max(0, Math.min(100, node.memory + (Math.random() - 0.5) * 5));
-          const load = (util / 100) * 4;
-          let status: NodeStatus = "ACTIVE";
-          if (util > 90) status = "OVERLOADED";
-          else if (util < 5) status = "IDLE";
-          return { ...node, utilization: util, memory: mem, load, status };
-        })
-      );
-    }, 1500);
-    return () => clearInterval(interval);
-  }, []);
+    if (gpuPool && Array.isArray(gpuPool)) {
+      setNodes(gpuPool.slice(0, 4).map((g: any) => {
+        const util = (g.memory_used / g.memory_total) * 100;
+        let status = g.state.toUpperCase();
+        if (status === "ALLOCATED") status = "ACTIVE";
+        
+        return {
+          id: g.id,
+          utilization: util,
+          memory: util,
+          load: (util / 100) * 4.2,
+          status: status as NodeStatus
+        };
+      }));
+    } else if (!sessionId || mode !== "cluster") {
+      // Fallback to subtle idle simulation if no live data
+      const timer = setInterval(() => {
+        setJitter(Math.random() * 0.5);
+        setNodes(prev => prev.map(n => ({
+          ...n,
+          utilization: Math.max(0, n.utilization + (Math.random() - 0.5) * 2),
+          load: n.utilization * 0.04
+        })));
+      }, 2000);
+      return () => clearInterval(timer);
+    }
+  }, [gpuPool, sessionId, mode]);
 
   useEffect(() => {
     const total = nodes.reduce((acc, n) => acc + n.utilization, 0);
     setAvgLoad(total / nodes.length);
   }, [nodes]);
 
-  if (!mounted) {
-    return (
-      <section className="section-block" id="gpu-cluster" style={{ opacity: 0 }}>
-        <div className="section-label">03 // COMPUTE RESOURCES</div>
-        <h2 className="section-title">GPU Compute Clusters</h2>
-      </section>
-    );
-  }
+  if (!mounted) return null;
 
   return (
     <section className="section-block" id="gpu-cluster">
       <div className="section-label">03 // COMPUTE RESOURCES</div>
       <h2 className="section-title">GPU Compute Clusters</h2>
       <p className="section-desc">
-        Real-time telemetry from the underlying inference hardware.
-        High cluster utilization may introduce latency in the trust calibration loop.
+        Real-time telemetry from the underlying inference hardware. 
+        Note how cluster utilization spikes as the RL model allocates worker jobs.
       </p>
 
       <div className="cluster-grid">
         {nodes.map((node) => (
           <div key={node.id} className={`card node-card ${node.status.toLowerCase()}`}>
-            <div className="card-id">{node.id} // NODE-0{node.id.split("-")[1]}</div>
-
+            <div className="card-id">{node.id} // CORE-AX-{node.id.split("-")[1] || "0X"}</div>
+            
             <div className="node-status-badge">
-              <div className="status-dot" style={{
-                background: node.status === "OVERLOADED" ? "var(--red)" :
-                  node.status === "FAILED" ? "#555" :
-                    node.status === "IDLE" ? "var(--muted)" : "var(--green)"
+              <div className="status-dot" style={{ 
+                background: node.status === "ACTIVE" ? "var(--green)" :
+                            node.status === "OVERLOADED" ? "var(--red)" : 
+                            node.status === "FAILED" ? "#555" : "var(--muted)" 
               }} />
               {node.status}
             </div>
@@ -96,9 +99,10 @@ export default function GPUClusterPanel() {
                 <span style={{ color: "var(--cyan)" }}>{Math.round(node.utilization)}%</span>
               </div>
               <div className="metric-bar-bg">
-                <motion.div
-                  className="metric-bar-fill"
+                <motion.div 
+                  className="metric-bar-fill" 
                   animate={{ width: `${node.utilization}%` }}
+                  transition={{ type: "spring", stiffness: 100, damping: 20 }}
                   style={{ background: node.utilization > 90 ? "var(--red)" : "var(--cyan)" } as any}
                 />
               </div>
@@ -110,9 +114,10 @@ export default function GPUClusterPanel() {
                 <span style={{ color: "var(--green)" }}>{Math.round(node.memory)}%</span>
               </div>
               <div className="metric-bar-bg">
-                <motion.div
-                  className="metric-bar-fill"
+                <motion.div 
+                  className="metric-bar-fill" 
                   animate={{ width: `${node.memory}%` }}
+                  transition={{ type: "spring", stiffness: 100, damping: 20 }}
                   style={{ background: "var(--green)" } as any}
                 />
               </div>
@@ -136,7 +141,7 @@ export default function GPUClusterPanel() {
         <div className="cluster-total-load">
           <span className="label">TOTAL CLUSTER LOAD</span>
           <div className="load-meter-bg">
-            <motion.div
+            <motion.div 
               className="load-meter-fill"
               animate={{ width: `${avgLoad}%` }}
               style={{ background: avgLoad > 80 ? "var(--red)" : "var(--cyan)", color: avgLoad > 80 ? "var(--red)" : "var(--cyan)" } as any}
@@ -152,4 +157,4 @@ export default function GPUClusterPanel() {
       </div>
     </section>
   );
-}
+}

ui/app/components/SpecialistNetwork.tsx

@@ -17,7 +17,7 @@ export default function SpecialistNetwork({
   trustDeltas: Record<string, number>;
   activeSpec: string | null;
 }) {
-  const ids = observation?.available_specialists ?? ["S0", "S1", "S2", "S3", "S4"];
+  const ids = observation?.available_specialists || observation?.available_workers || ["S0", "S1", "S2", "S3", "S4"];
   return (
     <div className="net">
       <svg className="net-svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
@@ -79,4 +79,4 @@ export default function SpecialistNetwork({
       })}
     </div>
   );
-}
+}

ui/app/components/TrustTimeline.tsx

@@ -10,7 +10,7 @@ export default function TrustTimeline({
   observation: Observation | null;
   trustDeltas: Record<string, number>;
 }) {
-  const ids = observation?.available_specialists ?? ["S0", "S1", "S2", "S3", "S4"];
+  const ids = observation?.available_specialists ?? observation?.available_workers ?? ["S0", "S1", "S2", "S3", "S4"];
   return (
     <div className="tl">
       {ids.map((id) => {
@@ -38,4 +38,4 @@ export default function TrustTimeline({
       })}
     </div>
   );
-}
+}

ui/app/hooks/useSentinel.ts

@@ -9,13 +9,16 @@ import type {
 
 /* ── helpers ──────────────────────────────────────────── */
 
-const API_BASE = process.env.NEXT_PUBLIC_API_URL || "";
+const API_BASE = typeof window !== "undefined" 
+  ? (process.env.NEXT_PUBLIC_API_URL || (window.location.port === "3000" || window.location.port === "3458" ? "http://127.0.0.1:7860" : ""))
+  : "";
 
 function bestSpec(obs: Observation | null): string {
   if (!obs) return "S0";
-  return [...obs.available_specialists].sort(
+  const ids = obs.available_specialists || obs.available_workers || [];
+  return [...ids].sort(
     (a, b) => (obs.trust_snapshot[b] ?? 0.5) - (obs.trust_snapshot[a] ?? 0.5),
-  )[0];
+  )[0] || "S0";
 }
 
 function heuristicMove(obs: Observation | null) {
@@ -29,9 +32,8 @@ function heuristicMove(obs: Observation | null) {
 
 function randomMove(obs: Observation | null) {
   if (!obs) return { action: "delegate" as ActionType, specialist: "S0", trust: 0.5 };
-  const sp = obs.available_specialists[
-    Math.floor(Math.random() * obs.available_specialists.length)
-  ] || "S0";
+  const ids = obs.available_specialists || obs.available_workers || [];
+  const sp = ids[Math.floor(Math.random() * ids.length)] || "S0";
   return { action: "delegate" as ActionType, specialist: sp, trust: obs.trust_snapshot[sp] ?? 0.5 };
 }
 
@@ -122,7 +124,8 @@ export function useSentinel() {
   const trustDeltas = useMemo(() => {
     if (!observation) return {};
     const d: Record<string, number> = {};
-    for (const id of observation.available_specialists) {
+    const ids = observation.available_specialists || observation.available_workers || [];
+    for (const id of ids) {
       d[id] = (observation.trust_snapshot[id] ?? 0.5) - (prevTrust[id] ?? 0.5);
     }
     return d;
@@ -150,10 +153,10 @@ export function useSentinel() {
       const s = nextSeed ?? seed;
       setRunning(true);
       abortRef.current = false;
-      const payload = { task_type: t, seed: s };
+      const payload = { task_type: t, seed: s, mode: "cluster" };
       setLastReq({ method: "POST", path: "/reset", body: payload });
       try {
-        const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/reset`, {
+        const res = await fetch(`${API_BASE}/reset`, {
           method: "POST",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify(payload),
@@ -195,17 +198,20 @@ export function useSentinel() {
 
       setActiveSpec(specialist);
 
+      const isCluster = active?.info?.environment_mode === "cluster" || sessionId === "cluster";
+      const mappedAction = (isCluster && action === "delegate") ? "allocate" : action;
+
       const payload = {
         session_id: sid,
         task_type: obs.task_type,
-        action_type: action,
+        action_type: mappedAction,
         specialist_id: specialist,
         subtask_response: action === "solve_independently" ? "SELF_SOLVED" : null,
         reasoning: `ui-${action}${specialist ? `-${specialist}` : ""}`,
       };
       setLastReq({ method: "POST", path: `/step?session_id=${sid}`, body: payload });
       try {
-        const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/step?session_id=${encodeURIComponent(sid)}`, {
+        const res = await fetch(`${API_BASE}/step?session_id=${encodeURIComponent(sid)}`, {
           method: "POST",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify(payload),
@@ -276,4 +282,4 @@ export function useSentinel() {
     prevTrust, trustDeltas, recommended, activeSpec,
     resetEpisode, stepEpisode, autoRun, stopAutoRun, swapProfiles,
   };
-}
+}

ui/app/lib/types.ts

@@ -14,6 +14,7 @@ export type Observation = {
   subtasks_total: number;
   subtasks_remaining: number;
   available_specialists: string[];
+  available_workers?: string[];
   trust_snapshot: Record<string, number>;
   stakes_level: number;
   step_count: number;
@@ -21,6 +22,7 @@ export type Observation = {
   last_action_summary: string | null;
   last_reward: number;
   episode_status: string;
+  gpu_pool?: any[];
 };
 
 export type Reward = {
@@ -41,6 +43,7 @@ export type StepResult = {
     score: number;
     adversarial_detections?: number;
     adversarial_poisonings?: number;
+    environment_mode?: string;
   };
 };
 
@@ -73,4 +76,4 @@ export type EventItem = {
   summary: string;
   reward: number;
   outcome: "success" | "blocked" | "poisoned" | "skipped" | "reset";
-};
+};

ui/app/page.tsx

@@ -78,7 +78,7 @@ export default function Page() {
               }}
               disabled={s.running}
             >
-              ▶ Launch Simulation
+              ▶️ Launch Simulation
             </button>
             <button
               className="btn-secondary"
@@ -191,7 +191,7 @@ export default function Page() {
           <div className="sim-controls-row">
             <span className="ctrl-label">POLICY:</span>
             <button className="btn-sm-ctrl" onClick={() => void s.autoRun("heuristic" as AutoPolicy)} disabled={s.running || s.done}>
-              ▶ HEURISTIC
+              ▶️ HEURISTIC
             </button>
             <button className="btn-sm-ctrl" onClick={() => void s.autoRun("random" as AutoPolicy)} disabled={s.running || s.done}>
               ⚄ RANDOM
@@ -256,7 +256,11 @@ export default function Page() {
       <div className="divider" />
 
       {/* GPU CLUSTER */}
-      <GPUClusterPanel />
+      <GPUClusterPanel 
+        sessionId={s.info?.session_id} 
+        mode={s.info?.environment_mode} 
+        gpuPool={s.observation?.gpu_pool}
+      />
 
       <div className="divider" />
 
@@ -293,9 +297,9 @@ export default function Page() {
         </div>
         <div className="footer-right">
           BUILD 2.4.1 // MARL-FRAMEWORK // MIT LICENSE<br />
-          © 2025 THE_BOYS. ALL RIGHTS RESERVED.
+          ©️ 2025 THE_BOYS. ALL RIGHTS RESERVED.
         </div>
       </footer>
     </>
   );
-}
+}