Added GPU cluster UI

ui/app/components/GPUClusterPanel.tsx

@@ -0,0 +1,214 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+
+type NodeStatus = "ACTIVE" | "IDLE" | "OVERLOADED" | "FAILED";
+
+interface GPUNode {
+  id: string;
+  utilization: number;
+  memory: number;
+  load: number;
+  status: NodeStatus;
+  temp: number;
+}
+
+export default function GPUClusterPanel() {
+  const [mounted, setMounted] = useState(false);
+  const [nodes, setNodes] = useState<GPUNode[]>([
+    { id: "GPU-1", utilization: 45, memory: 32, load: 1.2, status: "ACTIVE", temp: 55 },
+    { id: "GPU-2", utilization: 12, memory: 8, load: 0.4, status: "IDLE", temp: 42 },
+    { id: "GPU-3", utilization: 88, memory: 64, load: 2.8, status: "ACTIVE", temp: 78 },
+    { id: "GPU-4", utilization: 0, memory: 0, load: 0, status: "IDLE", temp: 35 },
+  ]);
+
+  const [avgLoad, setAvgLoad] = useState(0);
+  const [logs, setLogs] = useState<string[]>([]);
+  const logRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    setMounted(true);
+    const interval = setInterval(() => {
+      setNodes((prev) =>
+        prev.map((node) => {
+          if (node.status === "FAILED") {
+            if (Math.random() > 0.95) {
+              addLog(`[RECOVERY] ${node.id} initialized. Performing self-test...`);
+              return { ...node, status: "IDLE", utilization: 0, load: 0 };
+            }
+            return node;
+          }
+
+          if (Math.random() > 0.995) {
+            addLog(`[CRITICAL] ${node.id} core voltage failure! Node offline.`);
+            return { ...node, status: "FAILED", utilization: 0, memory: 0, load: 0, temp: 20 };
+          }
+
+          let util = node.utilization + (Math.random() - 0.5) * 15;
+          if (Math.random() > 0.9) {
+            util += 35;
+            addLog(`[SPIKE] Massive compute load detected on ${node.id}.`);
+          }
+          util = Math.max(0, Math.min(100, util));
+          
+          const mem = Math.max(0, Math.min(100, node.memory + (Math.random() - 0.5) * 8));
+          const load = (util / 100) * 4.2;
+          const temp = 35 + (util * 0.5) + (Math.random() * 2);
+          
+          let status: NodeStatus = "ACTIVE";
+          if (util > 92) {
+            status = "OVERLOADED";
+            if (node.status !== "OVERLOADED") addLog(`[WARNING] ${node.id} thermal throttling active.`);
+          }
+          else if (util < 5) status = "IDLE";
+
+          return { ...node, utilization: util, memory: mem, load, status, temp };
+        })
+      );
+    }, 1500);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  useEffect(() => {
+    const total = nodes.reduce((acc, n) => acc + n.utilization, 0);
+    setAvgLoad(total / nodes.length);
+  }, [nodes]);
+
+  const addLog = (msg: string) => {
+    const time = new Date().toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' });
+    setLogs(prev => [`[${time}] ${msg}`, ...prev].slice(0, 50));
+  };
+
+  if (!mounted) return null;
+
+  return (
+    <section className="section-block crazy-gpu" id="gpu-cluster">
+      <div className="section-label">03 // COMPUTATIONAL SUBSTRATE</div>
+      <h2 className="section-title">Nvidia H100 Cluster Telemetry</h2>
+      <p className="section-desc">
+        High-fidelity hardware monitoring of the underlying neural inference cluster. 
+        Saturation of these nodes directly impacts trust re-calibration latency.
+      </p>
+
+      <div className="gpu-layout">
+        {/* LEFT: NODE GRID */}
+        <div className="gpu-grid-side">
+          <div className="cluster-grid">
+            {nodes.map((node) => (
+              <div key={node.id} className={`card node-card ${node.status.toLowerCase()} crazy-card`}>
+                <div className="node-glitch-bg" />
+                <div className="card-id">{node.id} // CORE-AX-{node.id.split("-")[1]}</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)" 
+                  }} />
+                  {node.status}
+                </div>
+
+                {/* VISUAL METER */}
+                <div className="node-visual">
+                  <svg viewBox="0 0 100 100" className="radial-meter">
+                    <circle cx="50" cy="50" r="45" className="meter-bg" />
+                    <motion.circle 
+                      cx="50" cy="50" r="45" 
+                      className="meter-fill"
+                      initial={{ pathLength: 0 }}
+                      animate={{ pathLength: node.utilization / 100 }}
+                      style={{ stroke: node.utilization > 90 ? "var(--red)" : "var(--cyan)" }}
+                    />
+                    <text x="50" y="55" className="meter-text">{Math.round(node.utilization)}%</text>
+                  </svg>
+                </div>
+
+                <div className="node-metrics-stack">
+                  <div className="mini-metric">
+                    <span className="l">MEM</span>
+                    <div className="mini-bar-bg"><motion.div className="mini-bar-fill" animate={{ width: `${node.memory}%` }} /></div>
+                  </div>
+                  <div className="mini-metric">
+                    <span className="l">TMP</span>
+                    <div className="mini-bar-bg"><motion.div className="mini-bar-fill tm" animate={{ width: `${(node.temp / 100) * 100}%` }} /></div>
+                  </div>
+                </div>
+
+                <div className="node-footer-stats">
+                  <div className="node-stat">
+                    <span className="label">LOAD</span>
+                    <span className="val">{node.load.toFixed(1)} TFLOPS</span>
+                  </div>
+                  <div className="node-stat">
+                    <span className="label">FREQ</span>
+                    <span className="val">{node.status === "FAILED" ? 0 : (2.4 + (node.utilization * 0.01)).toFixed(2)} GHz</span>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* RIGHT: SYSTEM LOG & HEATMAP */}
+        <div className="gpu-sys-side">
+          <div className="card sys-card">
+            <div className="card-id">SYS-LOG // KERNEL TELEMETRY</div>
+            <div className="terminal-log" ref={logRef}>
+              <AnimatePresence initial={false}>
+                {logs.map((log, i) => (
+                  <motion.div 
+                    key={log + i}
+                    initial={{ opacity: 0, x: -10 }}
+                    animate={{ opacity: 1, x: 0 }}
+                    className="log-line"
+                  >
+                    {log}
+                  </motion.div>
+                ))}
+              </AnimatePresence>
+            </div>
+          </div>
+
+          <div className="card sys-card heatmap-card">
+            <div className="card-id">THERMAL // HEATMAP</div>
+            <div className="heatmap-grid">
+              {Array.from({ length: 64 }).map((_, i) => (
+                <motion.div 
+                  key={i} 
+                  className="heat-cell" 
+                  animate={{ 
+                    opacity: 0.2 + (Math.random() * 0.8),
+                    background: i % 8 < 4 ? "var(--cyan)" : "var(--blue)"
+                  }}
+                  transition={{ repeat: Infinity, duration: 1 + Math.random() * 2, repeatType: "mirror" }}
+                />
+              ))}
+            </div>
+            <div className="heatmap-overlay">SCANNING...</div>
+          </div>
+        </div>
+      </div>
+
+      <div className="cluster-footer crazy-footer">
+        <div className="cluster-total-load">
+          <span className="label">AGGREGATE CLUSTER PRESSURE</span>
+          <div className="load-meter-bg">
+            <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}
+            />
+          </div>
+          <span className="val">{Math.round(avgLoad)}%</span>
+        </div>
+        <div className="cluster-telemetry">
+          <span>THROUGHPUT: <b>{Math.round(140 - (avgLoad * 0.5))} FPS</b></span>
+          <span>SYSTEM HEALTH: <b style={{ color: avgLoad > 90 ? "var(--red)" : "var(--green)" }}>{avgLoad > 90 ? "CRITICAL" : "OPTIMAL"}</b></span>
+        </div>
+      </div>
+
+    </section>
+  );
+}

ui/app/components/SystemModules.tsx

@@ -80,6 +80,25 @@ export default function SystemModules({ running, done, adversarialCount }: Props
           <div className="card-ver">PPO v3.2.0</div>
         </div>
       </div>
+
+      <div className="card" style={{ "--card-accent": "#00f5ff" } as React.CSSProperties}>
+        <div className="card-id">MOD-005 // GPU COMPUTE</div>
+        <div className="card-icon">
+          <svg viewBox="0 0 40 40" fill="none"><rect x="6" y="10" width="28" height="20" rx="2" stroke="#00F5FF" strokeWidth="1.5" opacity="0.8"/><line x1="12" y1="10" x2="12" y2="30" stroke="#00F5FF" strokeWidth="1" opacity="0.3"/><line x1="18" y1="10" x2="18" y2="30" stroke="#00F5FF" strokeWidth="1" opacity="0.3"/><line x1="24" y1="10" x2="24" y2="30" stroke="#00F5FF" strokeWidth="1" opacity="0.3"/><line x1="30" y1="10" x2="30" y2="30" stroke="#00F5FF" strokeWidth="1" opacity="0.3"/><path d="M10 16h20M10 24h20" stroke="#00F5FF" strokeWidth="1" opacity="0.4"/></svg>
+        </div>
+        <div className="card-title">H100 GPU Compute Fabric</div>
+        <div className="card-body">
+          Underlying hardware substrate orchestrating 1.2M CUDA cores. 
+          Dynamic load balancing across N nodes with real-time thermal management.
+        </div>
+        <div className="card-footer">
+          <div className="card-status" style={{ color: "var(--cyan)" }}>
+            <div className="status-dot" style={{ background: "var(--cyan)" }} />
+            4 NODES ONLINE
+          </div>
+          <div className="card-ver">H100-v2</div>
+        </div>
+      </div>
     </div>
   );
 }

ui/app/globals.css

@@ -411,4 +411,103 @@ body {
   .sim-panel:last-child { border-left: none; border-top: 1px solid rgba(0,200,255,0.08); }
   .arch-flow { flex-wrap: wrap; justify-content: center; }
   .divider { margin: 0 20px; width: calc(100% - 40px); }
+}
+
+/* ── GPU CLUSTER ── */
+.cluster-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 16px;
+}
+.node-card {
+  padding: 24px;
+  border-color: rgba(0, 200, 255, 0.1);
+}
+.node-card.failed {
+  opacity: 0.5;
+  filter: grayscale(1);
+  border-color: #333;
+}
+.node-status-badge {
+  position: absolute;
+  top: 24px;
+  right: 24px;
+  font-family: var(--font-mono);
+  font-size: 9px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--muted);
+}
+.node-footer-stats {
+  margin-top: 16px;
+  display: flex;
+  justify-content: space-between;
+  padding-top: 12px;
+  border-top: 1px solid rgba(0, 200, 255, 0.05);
+}
+.node-stat {
+  display: flex;
+  flex-direction: column;
+}
+.node-stat .label {
+  font-family: var(--font-mono);
+  font-size: 8px;
+  color: var(--muted);
+  letter-spacing: 0.1em;
+}
+.node-stat .val {
+  font-family: var(--font-display);
+  font-size: 10px;
+  color: var(--white);
+}
+.cluster-footer {
+  margin-top: 32px;
+  padding: 20px;
+  background: rgba(0, 20, 50, 0.3);
+  border: 1px solid rgba(0, 200, 255, 0.08);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 20px;
+}
+.cluster-total-load {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex: 1;
+}
+.cluster-total-load .label {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--muted);
+  white-space: nowrap;
+}
+.load-meter-bg {
+  height: 6px;
+  flex: 1;
+  background: rgba(255,255,255,0.05);
+  max-width: 300px;
+  position: relative;
+}
+.load-meter-fill {
+  height: 100%;
+  box-shadow: 0 0 10px currentColor;
+}
+.cluster-total-load .val {
+  font-family: var(--font-display);
+  font-size: 14px;
+  color: var(--cyan);
+  min-width: 40px;
+}
+.cluster-telemetry {
+  display: flex;
+  gap: 24px;
+  font-family: var(--font-mono);
+  font-size: 9px;
+  color: var(--muted);
+}
+.cluster-telemetry b {
+  color: var(--cyan);
 }

ui/app/hooks/useSentinel.ts

@@ -19,7 +19,7 @@ function bestSpec(obs: Observation | null): string {
 function heuristicMove(obs: Observation | null) {
   if (!obs) return { action: "delegate" as ActionType, specialist: "S0", trust: 0.5 };
   const sp = bestSpec(obs);
-  const t  = obs.trust_snapshot[sp] ?? 0.5;
+  const t = obs.trust_snapshot[sp] ?? 0.5;
   if (obs.stakes_level >= 0.7 && t < 0.65)
     return { action: "verify" as ActionType, specialist: sp, trust: t };
   return { action: "delegate" as ActionType, specialist: sp, trust: t };
@@ -66,25 +66,25 @@ function replayMove(
 function outcomeOf(reason: string): EventItem["outcome"] {
   const r = reason.toLowerCase();
   if (r.includes("poison") || r.includes("adversarial")) return "poisoned";
-  if (r.includes("block") || r.includes("verif"))         return "blocked";
-  if (r.includes("skip"))                                  return "skipped";
+  if (r.includes("block") || r.includes("verif")) return "blocked";
+  if (r.includes("skip")) return "skipped";
   return "success";
 }
 
 /* ── hook ─────────────────────────────────────────────── */
 
 export function useSentinel() {
-  const [view, setView]           = useState<ViewMode>("landing");
-  const [taskType, setTaskType]   = useState<TaskType>("task3");
-  const [seed, setSeed]           = useState(42);
+  const [view, setView] = useState<ViewMode>("landing");
+  const [taskType, setTaskType] = useState<TaskType>("task3");
+  const [seed, setSeed] = useState(42);
   const [sessionId, setSessionId] = useState<string | null>(null);
-  const [result, setResult]       = useState<StepResult | null>(null);
-  const [running, setRunning]     = useState(false);
-  const [events, setEvents]       = useState<EventItem[]>([]);
-  const [lastReq, setLastReq]     = useState<Record<string, unknown> | null>(null);
-  const [lastRes, setLastRes]     = useState<Record<string, unknown> | null>(null);
-  const [evaluation, setEval]     = useState<EvaluationData | null>(null);
-  const [replay, setReplay]       = useState<Map<string, ReplayRow>>(new Map());
+  const [result, setResult] = useState<StepResult | null>(null);
+  const [running, setRunning] = useState(false);
+  const [events, setEvents] = useState<EventItem[]>([]);
+  const [lastReq, setLastReq] = useState<Record<string, unknown> | null>(null);
+  const [lastRes, setLastRes] = useState<Record<string, unknown> | null>(null);
+  const [evaluation, setEval] = useState<EvaluationData | null>(null);
+  const [replay, setReplay] = useState<Map<string, ReplayRow>>(new Map());
   const [prevTrust, setPrevTrust] = useState<Record<string, number>>({});
   const [activeSpec, setActiveSpec] = useState<string | null>(null);
 
@@ -112,9 +112,9 @@ export function useSentinel() {
   }, []);
 
   const observation = result?.observation ?? null;
-  const info        = result?.info;
-  const reward      = result?.reward;
-  const done        = result?.done ?? false;
+  const info = result?.info;
+  const reward = result?.reward;
+  const done = result?.done ?? false;
 
   /* trust deltas */
   const trustDeltas = useMemo(() => {
@@ -131,11 +131,11 @@ export function useSentinel() {
   const proof = useMemo(() => {
     if (!evaluation) return null;
     return {
-      random:         evaluation.summary.random,
-      heuristic:      evaluation.summary.heuristic,
-      oracle:         evaluation.summary.oracle_lite,
-      trained:        evaluation.summary.trained,
-      task3Random:    evaluation.by_task.task3.random,
+      random: evaluation.summary.random,
+      heuristic: evaluation.summary.heuristic,
+      oracle: evaluation.summary.oracle_lite,
+      trained: evaluation.summary.trained,
+      task3Random: evaluation.by_task.task3.random,
       task3Heuristic: evaluation.by_task.task3.heuristic,
     };
   }, [evaluation]);
@@ -151,7 +151,7 @@ export function useSentinel() {
       const payload = { task_type: t, seed: s };
       setLastReq({ method: "POST", path: "/reset", body: payload });
       try {
-        const res  = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/reset`, {
+        const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/reset`, {
           method: "POST",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify(payload),
@@ -180,9 +180,9 @@ export function useSentinel() {
       specialistOverride?: string,
       ctx?: StepResult | null,
     ): Promise<StepResult | null> => {
-      const active   = ctx ?? result;
-      const obs      = active?.observation ?? observation;
-      const sid      = active?.info.session_id ?? sessionId;
+      const active = ctx ?? result;
+      const obs = active?.observation ?? observation;
+      const sid = active?.info.session_id ?? sessionId;
       if (!sid || !obs || running || active?.done) return null;
 
       setRunning(true);
@@ -203,7 +203,7 @@ export function useSentinel() {
       };
       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(`${process.env.NEXT_PUBLIC_API_URL}/step?session_id=${encodeURIComponent(sid)}`, {
           method: "POST",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify(payload),

ui/app/page.tsx

@@ -9,6 +9,7 @@ import SimCanvas from "./components/SimCanvas";
 import ExecutionLog from "./components/ExecutionLog";
 import ArchitecturePipeline from "./components/ArchitecturePipeline";
 import MetricsGrid from "./components/MetricsGrid";
+import GPUClusterPanel from "./components/GPUClusterPanel";
 import type { TaskType, AutoPolicy } from "./lib/types";
 
 export default function Page() {
@@ -254,9 +255,14 @@ export default function Page() {
 
       <div className="divider" />
 
+      {/* GPU CLUSTER */}
+      <GPUClusterPanel />
+
+      <div className="divider" />
+
       {/* ARCHITECTURE */}
       <section className="section-block alt-bg" id="architecture">
-        <div className="section-label">03 // SYSTEM DESIGN</div>
+        <div className="section-label">04 // SYSTEM DESIGN</div>
         <h2 className="section-title">Execution Pipeline</h2>
         <p className="section-desc">
           Data flows unidirectionally through the trust-calibrated RL loop. Each
@@ -269,7 +275,7 @@ export default function Page() {
 
       {/* METRICS */}
       <section className="section-block" id="metrics">
-        <div className="section-label">04 // EVALUATION RESULTS</div>
+        <div className="section-label">05 // EVALUATION RESULTS</div>
         <h2 className="section-title">Experimental Benchmarks</h2>
         <p className="section-desc">
           Averaged across evaluation episodes. Adversarial injection ratio fixed at