added frontend and stimulation

frontend/app/api/telemetry/route.ts

@@ -0,0 +1,22 @@
+import { NextResponse } from "next/server";
+
+import { getTelemetrySnapshots } from "@/lib/telemetry";
+
+export const runtime = "nodejs";
+export const dynamic = "force-dynamic";
+
+export async function GET() {
+  try {
+    const snapshots = await getTelemetrySnapshots();
+    return NextResponse.json(snapshots);
+  } catch (error) {
+    const message = error instanceof Error ? error.message : "Unknown telemetry error";
+    return NextResponse.json(
+      {
+        error: "Failed to load telemetry",
+        details: message,
+      },
+      { status: 500 }
+    );
+  }
+}

frontend/app/globals.css

@@ -14,95 +14,35 @@
 
 html {
   scroll-behavior: smooth;
-  scroll-padding-top: 7rem;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
+  scrollbar-width: thin;
+  scrollbar-color: #3f3f46 transparent;
 }
 
 body {
-  background:
-    radial-gradient(circle at 16% -8%, rgba(251, 146, 60, 0.12), transparent 34%),
-    radial-gradient(circle at 84% 6%, rgba(251, 191, 36, 0.08), transparent 32%),
-    var(--background);
+  background: var(--background);
   color: var(--foreground);
   font-family: var(--font-geist-sans), ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
 }
 
-html::-webkit-scrollbar,
-body::-webkit-scrollbar {
-  width: 0;
-  height: 0;
-  display: none;
+* {
+  scrollbar-width: thin;
+  scrollbar-color: #3f3f46 transparent;
 }
 
-.landing-section {
-  padding: clamp(3rem, 6vw, 4rem) 0;
+*::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
 }
 
-.section-inner {
-  margin: 0 auto;
-  max-width: 1100px;
-  padding: 0 40px;
+*::-webkit-scrollbar-track {
+  background: transparent;
 }
 
-@media (max-width: 768px) {
-  .landing-section {
-    padding: clamp(2.5rem, 7vw, 3rem) 0;
-  }
-
-  .section-inner {
-    padding: 0 24px;
-  }
-}
-
-.hero-nav-scroll {
-  -webkit-mask-image: linear-gradient(to right, transparent 0, black 18px, black calc(100% - 18px), transparent 100%);
-  mask-image: linear-gradient(to right, transparent 0, black 18px, black calc(100% - 18px), transparent 100%);
-}
-
-@keyframes heroBeamDrift {
-  0% {
-    transform: translateY(-6%);
-    opacity: 0.05;
-  }
-  20% {
-    opacity: 0.2;
-  }
-  54% {
-    opacity: 0.35;
-  }
-  82% {
-    opacity: 0.14;
-  }
-  100% {
-    transform: translateY(18%);
-    opacity: 0;
-  }
-}
-
-@keyframes heroSparklePulse {
-  0%,
-  100% {
-    opacity: 0.05;
-    transform: scale(0.85);
-  }
-  40% {
-    opacity: 0.1;
-  }
-  65% {
-    opacity: 0.48;
-    transform: scale(1);
-  }
-  82% {
-    opacity: 0.2;
-    transform: scale(0.92);
-  }
+*::-webkit-scrollbar-thumb {
+  background-color: #3f3f46;
+  border-radius: 9999px;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  html {
-    scroll-behavior: auto;
-  }
+*::-webkit-scrollbar-thumb:hover {
+  background-color: #52525b;
 }

frontend/app/page.tsx

@@ -1,11 +1,12 @@
 "use client";
 
-import Image from "next/image";
 import { useEffect, useRef, useState } from "react";
 import { FlipWords } from "@/components/ui/FlipWords";
+import { FloatingDock } from "@/components/ui/FloatingDock";
+import { FocusCards } from "@/components/ui/FocusCards";
 import { TextGenerateEffect } from "@/components/ui/TextGenerateEffect";
 import { ClusterSimulation } from "@/components/simulation/ClusterSimulation";
-import type { DockItem } from "@/components/ui/types";
+import type { DockItem, FocusCard } from "@/components/ui/types";
 
 type TelemetrySnapshot = {
   step: number;
@@ -21,7 +22,6 @@ type TaskCard = {
   difficulty: "Easy" | "Medium" | "Hard" | "Expert";
   description: string;
   score: number;
-  grading: string;
 };
 
 type MetricFigure = {
@@ -30,29 +30,13 @@ type MetricFigure = {
   caption: string;
 };
 
-type DetailCard = {
-  title: string;
-  detail: string;
-};
-
-type FeatureRow = {
-  title: string;
-  descriptor: string;
-  dotClassName: string;
-};
-
-type RewardTerm = {
-  formula: string;
-  label: string;
-  weight: number;
-  tone: string;
-};
+const DEPLOYMENT_LIVE = false;
 
 const HERO_FLIP_WORDS = ["adaptive", "resilient", "autonomous", "modern"];
 
-const NAV_ITEMS: DockItem[] = [
+const DOCK_ITEMS: DockItem[] = [
   {
-    title: "About",
+    title: "Home",
     href: "#about",
     icon: ({ className }) => (
       <svg viewBox="0 0 24 24" className={className} fill="none" stroke="currentColor" strokeWidth="1.8">
@@ -61,17 +45,6 @@ const NAV_ITEMS: DockItem[] = [
       </svg>
     ),
   },
-  {
-    title: "Metrics",
-    href: "#metrics",
-    icon: ({ className }) => (
-      <svg viewBox="0 0 24 24" className={className} fill="none" stroke="currentColor" strokeWidth="1.8">
-        <path d="M5 19V9" />
-        <path d="M12 19V5" />
-        <path d="M19 19v-7" />
-      </svg>
-    ),
-  },
   {
     title: "Simulation",
     href: "#simulation",
@@ -101,8 +74,8 @@ const NAV_ITEMS: DockItem[] = [
     ),
   },
   {
-    title: "Diagnostics",
-    href: "#diagnostics",
+    title: "Metrics",
+    href: "#metrics",
     icon: ({ className }) => (
       <svg viewBox="0 0 24 24" className={className} fill="none" stroke="currentColor" strokeWidth="1.8">
         <rect x="3.5" y="3.5" width="17" height="17" rx="2.5" />
@@ -112,7 +85,7 @@ const NAV_ITEMS: DockItem[] = [
   },
   {
     title: "Try It",
-    href: "#try-it",
+    href: "#try",
     icon: ({ className }) => (
       <svg viewBox="0 0 24 24" className={className} fill="none" stroke="currentColor" strokeWidth="1.8">
         <path d="m5 19 14-7L5 5v5l8 2-8 2z" />
@@ -121,103 +94,80 @@ const NAV_ITEMS: DockItem[] = [
   },
 ];
 
-const OBSERVABILITY_CARDS: DetailCard[] = [
+const TASKS: TaskCard[] = [
   {
-    title: "cpu_loads",
-    detail:
-      "Per-node CPU utilization in [0.0, 1.0], with -1.0 used when telemetry times out.",
+    name: "Task 1 - Traffic Spike Recovery",
+    difficulty: "Easy",
+    description:
+      "Handles a 3x request surge while keeping latency under 50ms without wasting actions.",
+    score: 0.09,
   },
   {
-    title: "queue_lengths",
-    detail:
-      "Pending request counts per node, which expose pressure before outright failure.",
+    name: "Task 2 - Single Node Failure",
+    difficulty: "Medium",
+    description:
+      "Repairs a failed node under pressure while preserving uptime and minimizing MTTR penalties.",
+    score: 0.05,
   },
   {
-    title: "latency_ms + p99_latency",
-    detail:
-      "Rolling end-to-end and tail latency so policies must control both average flow and spikes.",
+    name: "Task 3 - Cascading Failure Prevention",
+    difficulty: "Hard",
+    description:
+      "Must proactively reroute load before thermal hotspots trigger chain-collapse behavior.",
+    score: 0.31,
   },
   {
-    title: "task_hint + task_score",
-    detail:
-      "A natural-language objective hint plus a live benchmark score on every step.",
+    name: "Task 4 - Flash Crowd Meltdown",
+    difficulty: "Expert",
+    description:
+      "A 5x traffic event where survival demands precise throttle and scale timing under scarcity.",
+    score: 0,
   },
 ];
 
-const FEATURE_ROWS: FeatureRow[] = [
+const FEATURE_CARDS: FocusCard[] = [
   {
-    title: "Stochastic Traffic",
-    descriptor: "Burst-prone Gaussian arrivals",
-    dotClassName: "bg-amber-400",
+    title: "Forest Adventure",
+    src: "https://images.unsplash.com/photo-1518710843675-2540dd79065c?q=80&w=3387&auto=format&fit=crop",
   },
   {
-    title: "Non-Linear Latency",
-    descriptor: "Penalty grows with CPU²",
-    dotClassName: "bg-sky-400",
+    title: "Valley of life",
+    src: "https://images.unsplash.com/photo-1600271772470-bd22a42787b3?q=80&w=3072&auto=format&fit=crop",
   },
   {
-    title: "Cascading Load Redistribution",
-    descriptor: "Mesh neighbor collapse",
-    dotClassName: "bg-white",
-  },
-  {
-    title: "Deterministic Failure",
-    descriptor: "90% CPU for 3 steps",
-    dotClassName: "bg-red-400",
-  },
-];
-
-const TASKS: TaskCard[] = [
-  {
-    name: "Traffic Spike Recovery",
-    difficulty: "Easy",
-    description: "",
-    score: 0.09,
-    grading: "",
+    title: "Sala behta hi jayega",
+    src: "https://images.unsplash.com/photo-1505142468610-359e7d316be0?q=80&w=3070&auto=format&fit=crop",
   },
   {
-    name: "Single Node Failure",
-    difficulty: "Medium",
-    description: "",
-    score: 0.05,
-    grading: "",
+    title: "Camping is for pros",
+    src: "https://images.unsplash.com/photo-1486915309851-b0cc1f8a0084?q=80&w=3387&auto=format&fit=crop",
   },
   {
-    name: "Cascading Failure Prevention",
-    difficulty: "Hard",
-    description: "",
-    score: 0.31,
-    grading: "",
+    title: "The road not taken",
+    src: "https://images.unsplash.com/photo-1507041957456-9c397ce39c97?q=80&w=3456&auto=format&fit=crop",
   },
   {
-    name: "Flash Crowd Meltdown",
-    difficulty: "Expert",
-    description: "",
-    score: 0,
-    grading: "",
+    title: "The First Rule",
+    src: "https://assets.aceternity.com/the-first-rule.png",
   },
 ];
 
-const REWARD_TERMS: RewardTerm[] = [
-  { formula: "+0.40 × uptime_ratio", label: "dominant signal", weight: 0.4, tone: "bg-emerald-400" },
-  { formula: "−0.30 × normalized_latency", label: "latency penalty", weight: 0.3, tone: "bg-red-400" },
-  { formula: "−0.20 × overload_fraction", label: "hot-node penalty", weight: 0.2, tone: "bg-zinc-400" },
-  { formula: "−0.10 × actions / max_steps", label: "anti-spam tax", weight: 0.1, tone: "bg-zinc-500" },
-  { formula: "+0.50 × cascade_prevented_bonus", label: "prevention bonus", weight: 0.5, tone: "bg-emerald-300" },
-];
-
-const QUICKSTART_STEPS = [
+const TASK_CARDS: FocusCard[] = [
+  {
+    title: "Traffic Spike Recovery",
+    src: "https://images.unsplash.com/photo-1498050108023-c5249f4df085?q=80&w=3272&auto=format&fit=crop",
+  },
   {
-    label: "Install Dependencies",
-    command: "pip install -r requirements.txt",
+    title: "Single Node Failure",
+    src: "https://images.unsplash.com/photo-1562813733-b31f71025d54?q=80&w=3270&auto=format&fit=crop",
   },
   {
-    label: "Start API Server",
-    command: "uvicorn server.app:app --host 0.0.0.0 --port 8000",
+    title: "Cascading Failure Prevention",
+    src: "https://images.unsplash.com/photo-1518773553398-650c184e0bb3?q=80&w=3272&auto=format&fit=crop",
   },
   {
-    label: "Run Inference",
-    command: "python inference.py",
+    title: "Flash Crowd Meltdown",
+    src: "https://images.unsplash.com/photo-1461749280684-dccba630e2f6?q=80&w=3270&auto=format&fit=crop",
   },
 ];
 
@@ -225,22 +175,22 @@ const METRIC_FIGURES: MetricFigure[] = [
   {
     src: "/metrics/fig1_vanishing_gradient_fix.png",
     title: "Fig 1: Vanishing Gradient Fix",
-    caption: "Shows the reward-shaping change used to keep latency penalties informative instead of flattening into a dead training signal.",
+    caption: "Stabilized training signal and improved optimization behavior.",
   },
   {
     src: "/metrics/fig2_cascade_exploit_fix.png",
     title: "Fig 2: Cascade Exploit Fix",
-    caption: "Illustrates the protection against oscillation-based reward farming in cascading-failure scenarios.",
+    caption: "Mitigates exploit dynamics in cascading-failure conditions.",
   },
   {
     src: "/metrics/fig3_cost_latency_coupling.png",
     title: "Fig 3: Cost-Latency Coupling",
-    caption: "Maps how capacity cost and service latency move together when the policy tries to stabilize the cluster efficiently.",
+    caption: "Shows tradeoff frontier between resource cost and service latency.",
   },
   {
     src: "/metrics/fig4_curiosity_annealing.png",
     title: "Fig 4: Curiosity Annealing",
-    caption: "Visualizes how intrinsic exploration pressure decays as the agent shifts from discovery toward stable control.",
+    caption: "Annealing schedule effect on exploration vs. stability.",
   },
 ];
 
@@ -284,18 +234,18 @@ function RevealSection({
     <section
       id={id}
       ref={ref}
-      className={`landing-section scroll-mt-28 transition-all duration-700 motion-reduce:transform-none motion-reduce:opacity-100 ${
+      className={`scroll-mt-28 transition-all duration-700 motion-reduce:transform-none motion-reduce:opacity-100 ${
         visible ? "translate-y-0 opacity-100" : "translate-y-4 opacity-0"
       } ${className ?? ""}`}
     >
-      <div className="section-inner">{children}</div>
+      {children}
     </section>
   );
 }
 
 function SectionDivider({ label }: { label: string }) {
   return (
-    <div className="my-8 sm:my-10" aria-hidden="true">
+    <div className="my-16 sm:my-20" aria-hidden="true">
       <div className="grid grid-cols-[1fr_auto_1fr] items-center gap-4">
         <div className="h-px bg-gradient-to-r from-transparent via-zinc-800 to-zinc-700/50" />
         <span className="rounded-full border border-zinc-800 bg-zinc-950 px-3 py-1 font-mono text-[11px] tracking-[0.16em] text-zinc-500">
@@ -309,20 +259,20 @@ function SectionDivider({ label }: { label: string }) {
 
 function DifficultyBadge({ difficulty }: { difficulty: TaskCard["difficulty"] }) {
   const tone = {
-    Easy: "bg-[#22c55e]/10 text-[#22c55e]",
-    Medium: "bg-[#3b82f6]/10 text-[#3b82f6]",
-    Hard: "bg-[#f97316]/10 text-[#f97316]",
-    Expert: "bg-[#ef4444]/10 text-[#ef4444]",
+    Easy: "border-emerald-500/40 bg-emerald-500/10 text-emerald-300",
+    Medium: "border-amber-500/40 bg-amber-500/10 text-amber-300",
+    Hard: "border-orange-500/40 bg-orange-500/10 text-orange-300",
+    Expert: "border-pink-500/40 bg-pink-500/10 text-pink-300",
   }[difficulty];
 
-  return <span className={`rounded-full px-2.5 py-1 text-xs font-mono ${tone}`}>{difficulty}</span>;
+  return <span className={`rounded-full border px-2.5 py-1 text-xs font-mono ${tone}`}>[{difficulty}]</span>;
 }
 
 function Spotlight() {
   return (
-    <div aria-hidden="true" className="pointer-events-none absolute inset-0 -z-10 overflow-x-clip">
+    <div aria-hidden="true" className="pointer-events-none absolute inset-0 -z-10 overflow-hidden">
       <div className="absolute left-1/2 top-[-12rem] h-[28rem] w-[28rem] -translate-x-1/2 rounded-full bg-[radial-gradient(circle,rgba(251,146,60,0.28),transparent_62%)]" />
-      <div className="absolute right-[-11rem] top-12 h-[26rem] w-[26rem] rounded-full bg-[radial-gradient(circle,rgba(236,72,153,0.16),transparent_70%)]" />
+      <div className="absolute right-[-8rem] top-12 h-[26rem] w-[26rem] rounded-full bg-[radial-gradient(circle,rgba(236,72,153,0.22),transparent_68%)]" />
       <div className="absolute bottom-[-12rem] left-[-10rem] h-[24rem] w-[24rem] rounded-full bg-[radial-gradient(circle,rgba(249,115,22,0.18),transparent_65%)]" />
     </div>
   );
@@ -330,7 +280,7 @@ function Spotlight() {
 
 function HeroWordmark() {
   return (
-    <div className="mt-5 flex flex-wrap items-end gap-x-3 gap-y-2 text-[clamp(4.4rem,18vw,12rem)] font-black leading-[0.82] tracking-[-0.05em]">
+    <div className="mt-5 flex flex-wrap items-end gap-x-3 gap-y-2 text-[20vw] font-black leading-[0.82] tracking-[-0.06em] md:text-[10vw]">
       <span className="bg-gradient-to-b from-white via-orange-100 to-pink-300 bg-clip-text text-transparent [text-shadow:0_0_26px_rgba(251,146,60,0.22)]">
         DIME
       </span>
@@ -345,188 +295,97 @@ function AnimatedHeading({ words, className }: { words: string; className?: stri
   return (
     <TextGenerateEffect
       words={words}
-      className={`mt-4 text-3xl font-black leading-[0.98] tracking-[-0.02em] text-zinc-100 [text-shadow:0_0_24px_rgba(244,114,182,0.18)] sm:text-5xl lg:text-6xl ${
-        className ?? ""
-      }`}
+      className={`mt-4 text-4xl font-black leading-[0.95] tracking-[-0.03em] text-zinc-100 [text-shadow:0_0_24px_rgba(244,114,182,0.18)] sm:text-6xl ${className ?? ""}`}
       duration={900}
       filter={false}
     />
   );
 }
 
-function TopNavigation() {
-  return (
-    <header className="fixed inset-x-0 top-4 z-50 px-3 sm:px-5">
-      <div className="mx-auto flex w-full max-w-6xl items-center justify-between gap-3 rounded-[1.6rem] border border-white/12 bg-black/55 px-3 py-3 shadow-[0_18px_80px_rgba(0,0,0,0.45)] backdrop-blur-2xl">
-        <a href="#about" className="shrink-0 rounded-full border border-orange-400/20 bg-orange-500/10 px-3 py-2 font-mono text-xs tracking-[0.22em] text-orange-200">
-          DIME
-        </a>
-        <nav className="hero-nav-scroll flex min-w-0 flex-1 items-center justify-end gap-1 overflow-x-auto">
-          {NAV_ITEMS.map((item) => (
-            <a
-              key={`top-${item.href}-${item.title}`}
-              href={item.href}
-              className="group whitespace-nowrap rounded-full px-3 py-2 text-xs font-medium text-zinc-300 transition-all duration-300 hover:bg-white/8 hover:text-white"
-            >
-              <span className="relative">
-                {item.title}
-                <span className="absolute inset-x-0 -bottom-1 h-px origin-left scale-x-0 bg-gradient-to-r from-orange-300 via-pink-300 to-transparent transition-transform duration-300 group-hover:scale-x-100" />
-              </span>
-            </a>
-          ))}
-        </nav>
-      </div>
-    </header>
-  );
+function parseTelemetry(payload: unknown): TelemetrySnapshot | null {
+  if (!payload || typeof payload !== "object") return null;
+
+  const candidate = payload as Record<string, unknown>;
+  const source =
+    (candidate.observation as Record<string, unknown> | undefined) ??
+    (candidate.data as Record<string, unknown> | undefined) ??
+    candidate;
+
+  const cpuLoadsRaw = source.cpu_loads ?? source.cpuLoads;
+  const queueLengthsRaw = source.queue_lengths ?? source.queueLengths;
+  const failedNodesRaw = source.failed_nodes ?? source.failedNodes;
+  const latencyRaw = source.latency_ms ?? source.latencyMs;
+  const requestRateRaw = source.request_rate ?? source.requestRate;
+  const stepRaw = source.step;
+
+  if (!Array.isArray(cpuLoadsRaw) || !Array.isArray(queueLengthsRaw) || !Array.isArray(failedNodesRaw)) {
+    return null;
+  }
+
+  const cpuLoads = cpuLoadsRaw.map((value) => Number(value)).filter((value) => Number.isFinite(value));
+  const queueLengths = queueLengthsRaw
+    .map((value) => Number(value))
+    .filter((value) => Number.isFinite(value));
+  const failedNodes = failedNodesRaw.map((value) => Number(value)).filter((value) => Number.isFinite(value));
+
+  const latencyMs = Number(latencyRaw);
+  const requestRate = Number(requestRateRaw);
+  const step = Number(stepRaw);
+
+  if (!Number.isFinite(latencyMs) || !Number.isFinite(requestRate) || !Number.isFinite(step)) {
+    return null;
+  }
+
+  return {
+    step,
+    cpuLoads,
+    queueLengths,
+    latencyMs,
+    failedNodes,
+    requestRate,
+  };
 }
 
-function DetailGrid({ cards, columns = "lg:grid-cols-2" }: { cards: DetailCard[]; columns?: string }) {
-  return (
-    <div className={`grid grid-cols-1 gap-4 sm:grid-cols-2 ${columns}`}>
-      {cards.map((card) => (
-        <article
-          key={card.title}
-          className="group h-full rounded-2xl border border-zinc-800/85 bg-gradient-to-b from-zinc-950 to-zinc-950/70 p-4 shadow-[0_0_30px_rgba(251,146,60,0.04)] transition-all duration-300 hover:-translate-y-1 hover:border-zinc-700 hover:shadow-[0_18px_40px_rgba(0,0,0,0.35)] sm:p-5"
-        >
-          <div className="flex h-full flex-col gap-2.5">
-            <p className="font-mono text-[11px] tracking-[0.16em] text-zinc-500">{card.title}</p>
-            <p className="text-sm leading-5 text-zinc-300">{card.detail}</p>
-          </div>
-        </article>
-      ))}
-    </div>
-  );
-}
-
-function FeatureEditorialList() {
-  return (
-    <div className="mt-12">
-      {FEATURE_ROWS.map((feature) => (
-        <div key={feature.title} className="mb-7">
-          <div className="grid grid-cols-[auto_1fr_auto] items-center gap-4">
-            <div className="flex items-center gap-3">
-              <span className={`h-2 w-2 rounded-full ${feature.dotClassName}`} />
-              <p className="text-2xl font-bold text-white md:text-3xl">{feature.title}</p>
-            </div>
-            <div className="border-b border-dotted border-zinc-800" />
-            <p className="text-right font-mono text-sm text-zinc-500">{feature.descriptor}</p>
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-}
-
-function TaskBenchmarkList() {
-  const { ref, visible } = useRevealOnScroll<HTMLDivElement>();
+export default function Home() {
+  const [telemetry, setTelemetry] = useState<TelemetrySnapshot | null>(null);
+  const [telemetryError, setTelemetryError] = useState<string | null>(null);
+  const [showScrollCue, setShowScrollCue] = useState(true);
 
-  return (
-    <div ref={ref} className="mt-10 divide-y divide-zinc-900 border-y border-zinc-900">
-      {TASKS.map((task, index) => (
-        <article key={task.name} className="flex flex-col gap-4 py-5 md:flex-row md:items-center">
-          <div className="flex min-w-0 flex-1 items-center gap-4">
-            <span className="w-6 font-mono text-sm text-zinc-600">{String(index + 1).padStart(2, "0")}</span>
-            <p className="min-w-0 text-lg font-medium text-white">{task.name}</p>
-          </div>
-          <div className="flex items-center justify-end gap-4">
-            <DifficultyBadge difficulty={task.difficulty} />
-            <div className="h-1 w-20 rounded-full bg-zinc-800">
-              <div
-                className="h-1 rounded-full bg-zinc-400 transition-[width] duration-1000 ease-out"
-                style={{
-                  width: visible ? `${Math.max(0, task.score * 100)}%` : "0%",
-                  transitionDelay: `${index * 140}ms`,
-                }}
-              />
-            </div>
-            <span className="min-w-10 text-right font-mono text-xs text-zinc-500">{task.score.toFixed(2)}</span>
-          </div>
-        </article>
-      ))}
-    </div>
-  );
-}
+  useEffect(() => {
+    let mounted = true;
 
-function RewardWeightMeter() {
-  return (
-    <div className="space-y-8">
-      {REWARD_TERMS.map((term) => (
-        <div key={term.formula}>
-          <p className="font-mono text-sm text-zinc-200">{term.formula}</p>
-          <div className="mt-3 h-0.5 w-full max-w-xs bg-zinc-900">
-            <div className={`h-0.5 rounded-full ${term.tone}`} style={{ width: `${(term.weight / 0.5) * 100}%` }} />
-          </div>
-          <p className="mt-2 font-mono text-xs text-zinc-500">{term.label}</p>
-        </div>
-      ))}
-    </div>
-  );
-}
+    const loadTelemetry = async () => {
+      try {
+        const response = await fetch("/api/telemetry", { cache: "no-store" });
+        if (!response.ok) {
+          throw new Error(`telemetry request failed (${response.status})`);
+        }
 
-function useAnimatedTelemetry(): TelemetrySnapshot {
-  const [snapshot, setSnapshot] = useState<TelemetrySnapshot>({
-    step: 0,
-    cpuLoads: [0.3, 0.25, 0.4, 0.35, 0.28, 0.32, 0.38, 0.22],
-    queueLengths: [4, 6, 3, 8, 5, 7, 2, 4],
-    latencyMs: 32.5,
-    failedNodes: [],
-    requestRate: 142,
-  });
+        const payload: unknown = await response.json();
+        const parsed = parseTelemetry(payload);
 
-  useEffect(() => {
-    let step = 0;
-    const timer = setInterval(() => {
-      step += 1;
-      const t = step * 0.15;
-      setSnapshot({
-        step,
-        cpuLoads: Array.from({ length: 8 }, (_, i) => {
-          const load = Math.max(0.05, Math.min(0.95, 0.35 + 0.25 * Math.sin(t + i * 0.8) + (Math.random() - 0.5) * 0.06));
-          return Number(load.toFixed(2));
-        }),
-        queueLengths: Array.from({ length: 8 }, (_, i) =>
-          Math.max(0, Math.round(12 + 10 * Math.sin(t * 0.7 + i) + Math.random() * 3))
-        ),
-        latencyMs: Math.max(8, 28 + 16 * Math.sin(t * 0.5) + Math.random() * 6),
-        failedNodes: step % 40 > 30 && step % 40 < 36 ? [Math.floor(Math.random() * 7) + 1] : [],
-        requestRate: Math.max(60, 150 + 60 * Math.sin(t * 0.3) + Math.random() * 12),
-      });
-    }, 600);
-    return () => clearInterval(timer);
-  }, []);
+        if (!parsed) {
+          throw new Error("telemetry payload did not match expected schema");
+        }
 
-  return snapshot;
-}
+        if (!mounted) return;
+        setTelemetry(parsed);
+        setTelemetryError(null);
+      } catch (error) {
+        if (!mounted) return;
+        setTelemetryError(error instanceof Error ? error.message : "unable to fetch telemetry");
+      }
+    };
 
-function ScrollProgress() {
-  const [progress, setProgress] = useState(0);
+    loadTelemetry();
+    const timer = window.setInterval(loadTelemetry, 2500);
 
-  useEffect(() => {
-    const onScroll = () => {
-      const max = document.documentElement.scrollHeight - window.innerHeight;
-      const value = max > 0 ? Math.min(1, Math.max(0, window.scrollY / max)) : 0;
-      setProgress(value);
+    return () => {
+      mounted = false;
+      window.clearInterval(timer);
     };
-
-    onScroll();
-    window.addEventListener("scroll", onScroll, { passive: true });
-    return () => window.removeEventListener("scroll", onScroll);
   }, []);
 
-  return (
-    <div className="fixed inset-x-0 top-0 z-[70] h-[2px] bg-transparent">
-      <div
-        className="h-full bg-gradient-to-r from-orange-300 via-rose-300 to-amber-200 transition-[width] duration-200"
-        style={{ width: `${progress * 100}%` }}
-      />
-    </div>
-  );
-}
-
-export default function Home() {
-  const telemetry = useAnimatedTelemetry();
-  const [showScrollCue, setShowScrollCue] = useState(true);
-
   useEffect(() => {
     const onScroll = () => {
       if (window.scrollY > 12) {
@@ -541,111 +400,77 @@ export default function Home() {
 
   return (
     <div className="relative min-h-screen bg-[#080808] text-white">
-      <ScrollProgress />
-      <TopNavigation />
+      <FloatingDock items={DOCK_ITEMS} className="bottom-6" mobileClassName="bottom-4" />
 
-      <main className="relative pb-24">
+      <main className="relative mx-auto max-w-7xl px-5 pb-24 pt-24 sm:px-8 sm:pt-28">
         <section
           id="about"
-          className="relative min-h-screen scroll-mt-28 overflow-x-clip pt-28 sm:pt-32"
+          className="relative grid min-h-screen scroll-mt-28 items-center gap-12 pb-14 md:grid-cols-12"
         >
-          <div className="section-inner">
-            <div className="relative grid min-h-screen items-center gap-8 md:grid-cols-12">
-              <Spotlight />
-
-              <div className="md:col-span-7">
-                <p className="font-mono text-xs tracking-[0.2em] text-orange-300">[ SRE BENCHMARK ]</p>
-                <HeroWordmark />
-                <p className="mt-4 max-w-2xl text-xl text-zinc-200 sm:text-2xl">Distributed infra benchmark for autonomous SRE agents.</p>
-                <a
-                  href="#try"
-                  className="mt-8 inline-flex items-center rounded-md border border-orange-400/40 bg-orange-500/10 px-5 py-3 font-mono text-sm text-orange-100 transition-colors hover:border-pink-400/50 hover:bg-pink-500/10"
-                >
-                  Jump to Live Access -&gt;
-                </a>
-
-                <div className="mt-12 max-w-[460px] rounded-xl border border-zinc-700 bg-zinc-950/95 p-4 font-mono text-xs shadow-[0_0_40px_rgba(251,146,60,0.08)]">
-                  <p className="text-emerald-300/80">● LIVE BASELINES</p>
-                  <div className="mt-3 flex flex-wrap items-center gap-x-4 gap-y-2 text-[11px] sm:text-xs">
-                    <div className="flex items-center gap-2">
-                      <span className="text-zinc-600">#1</span>
-                      <span className="text-white">Qwen3-8B</span>
-                      <span className="text-emerald-300">0.31</span>
-                    </div>
-                    <div className="flex items-center gap-2">
-                      <span className="text-zinc-600">#2</span>
-                      <span className="text-white">Llama-3.1-8B</span>
-                      <span className="text-amber-300">0.09</span>
-                    </div>
-                    <a href="#try-it" className="text-emerald-300/80 transition-colors hover:text-emerald-200">
-                      submit your agent -&gt;
-                    </a>
-                  </div>
-                </div>
-              </div>
+          <Spotlight />
 
-              <div className="md:col-span-5 md:pl-6">
-                <div className="rounded-xl border border-zinc-800 bg-zinc-950/95 p-5 font-mono text-sm shadow-[0_0_40px_rgba(251,146,60,0.08)]">
-                  <p className="text-zinc-500">● NODE STATUS  [step: {telemetry?.step ?? "--"}]</p>
-                  <div className="mt-4 space-y-2">
-                    <p className="grid grid-cols-[auto_1fr] gap-3 text-zinc-400">
-                      <span>cpu_loads</span>
-                      <span className="min-w-0 break-words text-emerald-300">[{telemetry ? telemetry.cpuLoads.join(", ") : "loading"}]</span>
-                    </p>
-                    <p className="grid grid-cols-[auto_1fr] gap-3 text-zinc-400">
-                      <span>queue_lengths</span>
-                      <span className="min-w-0 break-words text-orange-300">[{telemetry ? telemetry.queueLengths.join(", ") : "loading"}]</span>
-                    </p>
-                    <p className="grid grid-cols-[auto_1fr] gap-3 text-zinc-400">
-                      <span>latency_ms</span>
-                      <span className="text-pink-300">{telemetry ? `${telemetry.latencyMs.toFixed(1)}ms` : "loading"}</span>
-                    </p>
-                    <p className="grid grid-cols-[auto_1fr] gap-3 text-zinc-400">
-                      <span>failed_nodes</span>
-                      <span className="min-w-0 break-words text-red-300">[{telemetry ? telemetry.failedNodes.join(", ") : "loading"}]</span>
-                    </p>
-                    <p className="grid grid-cols-[auto_1fr] gap-3 text-zinc-400">
-                      <span>request_rate</span>
-                      <span className="text-amber-200">{telemetry ? `${telemetry.requestRate.toFixed(0)} req/s` : "loading"}</span>
-                    </p>
-                  </div>
+          <div className="md:col-span-7">
+            <p className="font-mono text-xs tracking-[0.2em] text-orange-300">[ SRE BENCHMARK ]</p>
+            <HeroWordmark />
+            <p className="mt-4 max-w-2xl text-xl text-zinc-200 sm:text-2xl">
+              Distributed Infrastructure Management Environment
+            </p>
+            <p className="mt-5 max-w-2xl text-base leading-7 text-zinc-400 sm:text-lg">
+              A high-fidelity simulated distributed system for training and evaluating LLM agents on
+              complex Site Reliability Engineering tasks. Built on the OpenEnv framework.
+            </p>
+            <a
+              href="#try"
+              className="mt-8 inline-flex items-center rounded-md border border-orange-400/40 bg-orange-500/10 px-5 py-3 font-mono text-sm text-orange-100 transition-colors hover:border-pink-400/50 hover:bg-pink-500/10"
+            >
+              Jump to Live Access -&gt;
+            </a>
+          </div>
 
-                </div>
+          <div className="md:col-span-5 md:pl-6">
+            <div className="rounded-xl border border-zinc-700 bg-zinc-950/95 p-5 font-mono text-sm shadow-[0_0_40px_rgba(251,146,60,0.08)]">
+              <p className="text-zinc-500">● NODE STATUS  [step: {telemetry?.step ?? "--"}]</p>
+              <div className="mt-4 space-y-2">
+                <p className="text-zinc-400">
+                  cpu_loads      <span className="text-emerald-300">[{telemetry ? telemetry.cpuLoads.join(", ") : "loading"}]</span>
+                </p>
+                <p className="text-zinc-400">
+                  queue_lengths  <span className="text-orange-300">[{telemetry ? telemetry.queueLengths.join(", ") : "loading"}]</span>
+                </p>
+                <p className="text-zinc-400">
+                  latency_ms     <span className="text-pink-300">{telemetry ? `${telemetry.latencyMs.toFixed(1)}ms` : "loading"}</span>
+                </p>
+                <p className="text-zinc-400">
+                  failed_nodes   <span className="text-red-300">[{telemetry ? telemetry.failedNodes.join(", ") : "loading"}]</span>
+                </p>
+                <p className="text-zinc-400">
+                  request_rate   <span className="text-amber-200">{telemetry ? `${telemetry.requestRate.toFixed(0)} req/s` : "loading"}</span>
+                </p>
               </div>
 
-              <div className="md:col-span-12 pt-2">
-                {showScrollCue ? (
-                  <div className="relative mt-4 text-center font-mono text-xs tracking-[0.18em] text-zinc-500 transition-all duration-300">
-                    ↓ scroll to explore
-                  </div>
-                ) : null}
-              </div>
+              {telemetryError ? (
+                <p className="mt-4 text-xs text-pink-300">telemetry warning: {telemetryError}</p>
+              ) : null}
             </div>
           </div>
-        </section>
-
-        <SectionDivider label="OBSERVABILITY" />
 
-        <RevealSection id="metrics">
-          <p className="font-mono text-xs tracking-[0.2em] text-emerald-300">[ AGENT INPUT METRICS ]</p>
-          <AnimatedHeading words="The Signals an Agent Sees" />
-          <TextGenerateEffect
-            words="Observation fields come directly from the environment state, task curriculum, and partial-observability sandbox."
-            className="mt-3 text-xs uppercase tracking-[0.14em] text-zinc-500 sm:text-sm"
-          />
-          <div className="mt-8 sm:mt-10">
-            <DetailGrid cards={OBSERVABILITY_CARDS} />
+          <div className="md:col-span-12 pt-2">
+            {showScrollCue ? (
+              <div className="relative mt-4 text-center font-mono text-xs tracking-[0.18em] text-zinc-500 transition-all duration-300">
+                ↓ scroll to explore
+              </div>
+            ) : null}
           </div>
-        </RevealSection>
+        </section>
 
         <SectionDivider label="LIVE SYSTEM" />
 
-        <RevealSection id="simulation">
+        <RevealSection id="simulation" className="mt-10">
           <p className="font-mono text-xs tracking-[0.2em] text-sky-300">[ REAL-TIME CLUSTER TOPOLOGY ]</p>
           <AnimatedHeading words="Watch DIME Evolve Step by Step" />
           <TextGenerateEffect
-            words="Native vector topology, motion-interpolated node states, and live-style telemetry from the Python simulator."
-            className="mt-3 text-xs uppercase tracking-[0.14em] text-zinc-500 sm:text-sm"
+            words="Native React Flow vectors, motion-interpolated node states, and live WebSocket telemetry from the Python simulator."
+            className="mt-3 text-sm uppercase tracking-[0.14em] text-zinc-500"
           />
           <div className="mt-10">
             <ClusterSimulation />
@@ -654,38 +479,94 @@ export default function Home() {
 
         <SectionDivider label="DYNAMICS" />
 
-        <RevealSection id="features">
+        <RevealSection id="features" className="mt-8">
           <p className="font-mono text-xs tracking-[0.2em] text-orange-300">[ SIMULATION DYNAMICS ]</p>
           <AnimatedHeading words="What Makes DIME Hard" />
-          <FeatureEditorialList />
+          <TextGenerateEffect words="Constraint-driven incidents with compounding latency and brittle recovery windows." className="mt-3 text-sm uppercase tracking-[0.14em] text-zinc-500" />
+
+          <div className="mt-12">
+            <FocusCards cards={FEATURE_CARDS} />
+          </div>
 
-          <div className="mt-14 sm:mt-16">
+          <div className="mt-20">
             <AnimatedHeading words="Four Tasks. One Unforgiving Benchmark." className="text-3xl sm:text-5xl" />
-            <TaskBenchmarkList />
+            <TextGenerateEffect words="Each task shifts failure modes so policies must adapt instead of memorizing." className="mt-3 text-sm uppercase tracking-[0.14em] text-zinc-500" />
+            <div className="mt-9">
+              <FocusCards cards={TASK_CARDS} className="lg:grid-cols-2" />
+            </div>
+
+            <div className="mt-8 grid grid-cols-1 gap-4 lg:grid-cols-2">
+              {TASKS.map((task) => (
+                <article key={task.name} className="rounded-xl border border-zinc-800 bg-zinc-950/90 p-5">
+                  <div className="flex items-start justify-between gap-3">
+                    <p className="text-base font-semibold text-zinc-100">{task.name}</p>
+                    <DifficultyBadge difficulty={task.difficulty} />
+                  </div>
+                  <p className="mt-3 text-sm text-zinc-400">{task.description}</p>
+                  <div className="mt-4">
+                    <div className="flex items-center justify-between font-mono text-xs text-zinc-500">
+                      <span>Llama-3.1-8B Baseline</span>
+                      <span>{task.score.toFixed(3)}</span>
+                    </div>
+                    <div className="mt-2 h-2 rounded-full bg-zinc-900">
+                      <div
+                        className={`h-2 rounded-full ${task.score > 0.2 ? "bg-orange-400" : "bg-pink-500"}`}
+                        style={{ width: `${Math.max(1, task.score * 100)}%` }}
+                      />
+                    </div>
+                  </div>
+                </article>
+              ))}
+            </div>
           </div>
         </RevealSection>
 
         <SectionDivider label="SCORING" />
 
-        <RevealSection id="reward">
+        <RevealSection id="reward" className="mt-10">
           <p className="font-mono text-xs tracking-[0.2em] text-pink-300">[ REWARD SIGNAL ]</p>
           <AnimatedHeading words="How DIME Scores an Agent" />
+          <TextGenerateEffect words="Dense per-step feedback rewards stability, penalizes latency, and discourages noisy interventions." className="mt-3 text-sm uppercase tracking-[0.14em] text-zinc-500" />
 
           <div className="mt-12 grid grid-cols-1 gap-8 lg:grid-cols-12">
             <div className="lg:col-span-7">
-              <RewardWeightMeter />
+              <p className="max-w-3xl text-zinc-400">
+                DIME uses a dense, step-level continuous reward signal, not sparse end-of-episode
+                rewards. This means the agent gets feedback every step, making it trainable via RL.
+              </p>
+              <ul className="mt-6 space-y-4 text-zinc-400">
+                <li>
+                  <span className="font-mono text-zinc-100">+0.40 x uptime_ratio</span> - Keeps nodes
+                  alive. The dominant signal.
+                </li>
+                <li>
+                  <span className="font-mono text-zinc-100">-0.30 x normalized_latency</span> - Penalizes
+                  slow responses proportional to severity.
+                </li>
+                <li>
+                  <span className="font-mono text-zinc-100">-0.20 x overload_fraction</span> - Discourages
+                  ignoring hot nodes.
+                </li>
+                <li>
+                  <span className="font-mono text-zinc-100">-0.10 x (actions/max_steps)</span> - Action
+                  efficiency penalty. Spamming actions is punished.
+                </li>
+                <li>
+                  <span className="font-mono text-zinc-100">+0.50 x cascade_prevented_bonus</span> - The
+                  highest bonus. Prevention rewarded over recovery.
+                </li>
+              </ul>
             </div>
 
             <div className="lg:col-span-5">
               <div className="rounded-xl border border-zinc-800 bg-zinc-950 p-6 font-mono text-sm text-orange-200">
                 <div className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-2">
                   {[
-                    "step reward in [-5.0, +5.0]",
-                    "db failure => -5.0 terminal penalty",
-                    ">=80% failed nodes => -4.0 penalty",
-                    "rubric logs: format, stability, latency",
-                    "rubric logs: cascade, efficiency, throughput",
-                    "task graders compute live benchmark score",
+                    "R(t) = + 0.40 x uptime_ratio",
+                    "       - 0.30 x normalized_latency",
+                    "       - 0.20 x overload_fraction",
+                    "       - 0.10 x (actions_taken / max_steps)",
+                    "       + 0.50 x cascade_prevented_bonus",
                   ].map((line, idx) => (
                     <div key={`row-${idx}`} className="contents">
                       <span className="text-zinc-600">{String(idx + 1).padStart(2, "0")}</span>
@@ -700,26 +581,15 @@ export default function Home() {
 
         <SectionDivider label="METRICS" />
 
-        <RevealSection id="diagnostics">
-          <p className="font-mono text-xs tracking-[0.2em] text-orange-300">[ BENCHMARK DIAGNOSTICS ]</p>
+        <RevealSection id="metrics" className="mt-10">
+          <p className="font-mono text-xs tracking-[0.2em] text-orange-300">[ EVALUATION METRICS ]</p>
           <AnimatedHeading words="Benchmark Diagnostics" />
-          <TextGenerateEffect
-            words="Core plots from the repo show how DIME handles reward shaping, exploit resistance, cost-latency coupling, and exploration schedules."
-            className="mt-3 text-xs uppercase tracking-[0.14em] text-zinc-500 sm:text-sm"
-          />
+          <TextGenerateEffect words="Core plots from DIME evaluation runs across failure, latency, and exploration regimes." className="mt-3 text-sm uppercase tracking-[0.14em] text-zinc-500" />
 
           <div className="mt-12 grid grid-cols-1 gap-6 lg:grid-cols-2">
             {METRIC_FIGURES.map((figure) => (
               <article key={figure.src} className="overflow-hidden rounded-xl border border-zinc-800 bg-zinc-950/80">
-                <Image
-                  src={figure.src}
-                  alt={figure.title}
-                  width={1100}
-                  height={680}
-                  loading="lazy"
-                  sizes="(min-width: 1024px) 50vw, 100vw"
-                  className="h-auto w-full object-cover"
-                />
+                <img src={figure.src} alt={figure.title} loading="lazy" className="h-auto w-full object-cover" />
                 <div className="p-4">
                   <p className="text-base font-semibold text-white">{figure.title}</p>
                   <p className="mt-2 text-sm text-zinc-400">{figure.caption}</p>
@@ -729,87 +599,84 @@ export default function Home() {
           </div>
         </RevealSection>
 
-        <SectionDivider label="INSTALL" />
-
-        <RevealSection id="try-it">
-          <p className="font-mono text-xs tracking-[0.2em] text-emerald-300">[ QUICKSTART ]</p>
-          <AnimatedHeading words="Install + Run DIME" className="text-3xl sm:text-5xl" />
-          <p className="mt-5 font-mono text-xs text-zinc-500">
-            install deps  →  start server  →  run evaluation
-          </p>
-          <div className="mt-8 grid grid-cols-1 gap-3 md:grid-cols-3">
-            {QUICKSTART_STEPS.map((step, index) => (
-              <article
-                key={step.label}
-                className="rounded-xl border border-zinc-800 bg-zinc-950/75 p-4 shadow-[0_8px_30px_rgba(0,0,0,0.28)] transition-colors duration-300 hover:border-zinc-700"
-              >
-                <p className="font-mono text-[11px] tracking-[0.14em] text-zinc-500">
-                  STEP {String(index + 1).padStart(2, "0")}
-                </p>
-                <p className="mt-2 text-sm font-semibold text-zinc-100">{step.label}</p>
-                <div className="mt-3 rounded-md border border-zinc-800 bg-black/50 px-3 py-2 font-mono text-xs text-zinc-300">
-                  {step.command}
-                </div>
-              </article>
-            ))}
-          </div>
-        </RevealSection>
-
         <SectionDivider label="ACCESS" />
 
-        <RevealSection id="try">
+        <RevealSection id="try" className="mt-10">
           <p className="font-mono text-xs tracking-[0.2em] text-pink-300">[ LIVE ACCESS ]</p>
           <div className="mt-5 max-w-4xl md:ml-10">
-            <AnimatedHeading words="Try DIME" className="text-center md:text-left" />
+            <AnimatedHeading words="Try Your Hands On DIME" className="text-center md:text-left" />
+            <TextGenerateEffect
+              words="Use the hosted space for quick validation or run the container locally for controlled experiments."
+              className="mt-3 text-center text-sm uppercase tracking-[0.14em] text-zinc-500 md:text-left"
+            />
+            <p className="mt-5 max-w-3xl text-center text-zinc-400 md:text-left">
+              DIME is deployed as a containerized environment. You can interact with the live simulation
+              via the Hugging Face Space or pull the Docker image to run it locally.
+            </p>
 
             <div className="mt-8 flex flex-wrap items-center justify-center gap-3 md:justify-start">
-              <button
-                type="button"
-                disabled
-                className="inline-flex min-w-[230px] cursor-not-allowed items-center justify-center rounded-md bg-gradient-to-r from-orange-300 to-pink-300 px-5 py-3 text-sm font-semibold text-black opacity-80"
+              <a
+                href="#"
+                className="inline-flex min-w-[230px] items-center justify-center rounded-md bg-gradient-to-r from-orange-300 to-pink-300 px-5 py-3 text-sm font-semibold text-black"
               >
-                Hugging Face Space
-              </button>
+                Open on Hugging Face -&gt;
+              </a>
               <a
-                href="#try-it"
-                className="inline-flex min-w-[180px] items-center justify-center rounded-md border border-zinc-700 px-5 py-3 font-mono text-sm text-zinc-200 transition-colors hover:border-zinc-500 hover:text-white"
+                href="#"
+                className="inline-flex items-center justify-center rounded-md border border-zinc-700 px-4 py-3 font-mono text-sm text-zinc-200"
               >
-                Run via Docker
+                Pull Docker Image
               </a>
             </div>
 
-            <div className="mt-6 inline-flex whitespace-pre-wrap rounded-xl border border-zinc-800 bg-zinc-950 px-4 py-3 font-mono text-xs text-zinc-400">
-              docker build -t distributed-infra-env .{"\n"}docker run -p 8000:8000 distributed-infra-env
+            <p className="mt-5 inline-block rounded border border-zinc-800 bg-zinc-950 px-3 py-2 font-mono text-xs text-zinc-600">
+              docker://registry-link-placeholder | hf://space-link-placeholder
+            </p>
+
+            <div className="mt-4 flex items-center gap-2 font-mono text-xs text-zinc-500">
+              <span
+                className={`inline-block h-2 w-2 rounded-full ${
+                  DEPLOYMENT_LIVE ? "animate-pulse bg-emerald-400" : "bg-amber-400"
+                }`}
+              />
+              {DEPLOYMENT_LIVE ? "Simulation Online" : "Coming Soon"}
             </div>
+            <p className="mt-2 text-sm text-zinc-500">Links will be updated when the deployment is live.</p>
           </div>
         </RevealSection>
       </main>
 
-      <div className="mx-auto max-w-7xl px-5 sm:px-8">
-        <div className="border-t border-zinc-800" />
-      </div>
-
-      <footer className="bg-zinc-950/35">
+      <footer className="border-t border-zinc-800 bg-zinc-950/35">
         <div className="mx-auto grid max-w-7xl grid-cols-1 gap-8 px-5 py-10 text-sm text-zinc-500 sm:px-8 lg:grid-cols-12">
-          <div className="lg:col-span-7">
+          <div className="lg:col-span-6">
             <p className="font-mono text-zinc-300">DIME</p>
             <p className="mt-3 max-w-2xl leading-7">
-              Distributed Infrastructure Management Environment was built for the Meta Hackathon in
-              Bangalore 2026 under Meta and OpenEnv, with Hugging Face as the deployment surface.
+              Distributed Infrastructure Management Environment is built for the OpenEnv Hackathon to
+              benchmark LLM agents against realistic SRE incident-response dynamics.
+            </p>
+            <p className="mt-3 font-mono text-xs tracking-wide text-zinc-600">
+              Co-organized by Meta, PyTorch and Hugging Face
             </p>
           </div>
 
-          <div className="lg:col-span-5">
+          <div className="lg:col-span-3">
+            <p className="font-mono text-xs tracking-[0.16em] text-zinc-400">BENCHMARK</p>
+            <p className="mt-3 text-zinc-400">Environment: distributed_infra_env</p>
+            <p className="mt-2 text-zinc-400">Modeled Tasks: 4 graded incidents</p>
+            <p className="mt-2 text-zinc-400">Reward: dense step-level signal</p>
+          </div>
+
+          <div className="lg:col-span-3">
             <p className="font-mono text-xs tracking-[0.16em] text-zinc-400">RESOURCES</p>
             <div className="mt-3 flex flex-col gap-2">
-              <a href="#about" className="font-mono transition-colors hover:text-zinc-300">
-                About DIME
+              <a href="#" className="font-mono transition-colors hover:text-zinc-300">
+                Source Code
               </a>
-              <a href="#reward" className="font-mono transition-colors hover:text-zinc-300">
-                Scoring Model
+              <a href="#" className="font-mono transition-colors hover:text-zinc-300">
+                Hugging Face Space
               </a>
-              <a href="#try" className="font-mono transition-colors hover:text-zinc-300">
-                Hugging Face Access
+              <a href="#" className="font-mono transition-colors hover:text-zinc-300">
+                Docker Image
               </a>
             </div>
           </div>

frontend/components/simulation/ClusterSimulation.tsx

@@ -1,379 +1,256 @@
 "use client";
 
-import { memo, useEffect, useMemo, useState } from "react";
+import "reactflow/dist/style.css";
+
+import { memo, useMemo } from "react";
+import ReactFlow, {
+  Background,
+  BaseEdge,
+  Controls,
+  EdgeLabelRenderer,
+  MarkerType,
+  Position,
+  getBezierPath,
+  type Edge,
+  type EdgeProps,
+  type Node,
+  type NodeProps,
+  type NodeTypes,
+} from "reactflow";
 import { motion } from "framer-motion";
 
-type NodeRole = "core" | "gateway" | "worker" | "cache";
-type NodeStatus = "ok" | "warm" | "hot" | "offline";
+import { useSimulationSocket } from "@/lib/useSimulationSocket";
 
-type NodeDatum = {
-  id: number;
+type InfraNodeData = {
   label: string;
-  role: NodeRole;
   cpu: number;
-  mem: number;
   queue: number;
-  status: NodeStatus;
+  failed: boolean;
+  role: "db" | "worker";
 };
 
-type Snapshot = {
-  step: number;
-  nodes: NodeDatum[];
-  latencyMs: number;
-  requestRate: number;
-  action: string;
-  stability: number;
+type TrafficEdgeData = {
+  traffic: number;
 };
 
-type Point = {
-  x: number;
-  y: number;
-};
-
-const POSITIONS: Point[] = [
-  { x: 480, y: 280 },
-  { x: 480, y: 92 },
-  { x: 650, y: 150 },
-  { x: 722, y: 318 },
-  { x: 610, y: 466 },
-  { x: 350, y: 466 },
-  { x: 238, y: 318 },
-  { x: 310, y: 150 },
-  { x: 480, y: 176 },
-];
-
-const NODE_META: Array<Pick<NodeDatum, "id" | "label" | "role">> = [
-  { id: 0, label: "control-plane", role: "core" },
-  { id: 1, label: "ingress-01", role: "gateway" },
-  { id: 2, label: "worker-02", role: "worker" },
-  { id: 3, label: "worker-03", role: "worker" },
-  { id: 4, label: "cache-04", role: "cache" },
-  { id: 5, label: "worker-05", role: "worker" },
-  { id: 6, label: "worker-06", role: "worker" },
-  { id: 7, label: "ingress-07", role: "gateway" },
-  { id: 8, label: "policy-agent", role: "core" },
+const NODE_POSITIONS: Array<{ x: number; y: number }> = [
+  { x: 380, y: 260 },
+  { x: 110, y: 70 },
+  { x: 270, y: 40 },
+  { x: 500, y: 40 },
+  { x: 650, y: 90 },
+  { x: 660, y: 290 },
+  { x: 510, y: 430 },
+  { x: 260, y: 430 },
 ];
 
-const STATUS_STYLE: Record<NodeStatus, { accent: string; text: string; fill: string; border: string }> = {
-  ok: {
-    accent: "#2dd4bf",
-    text: "#ccfbf1",
-    fill: "rgba(8, 20, 24, 0.92)",
-    border: "rgba(45, 212, 191, 0.28)",
-  },
-  warm: {
-    accent: "#fbbf24",
-    text: "#fde68a",
-    fill: "rgba(29, 22, 10, 0.94)",
-    border: "rgba(251, 191, 36, 0.32)",
-  },
-  hot: {
-    accent: "#fb7185",
-    text: "#fecdd3",
-    fill: "rgba(36, 15, 20, 0.94)",
-    border: "rgba(251, 113, 133, 0.36)",
-  },
-  offline: {
-    accent: "#71717a",
-    text: "#d4d4d8",
-    fill: "rgba(16, 16, 20, 0.96)",
-    border: "rgba(113, 113, 122, 0.26)",
-  },
-};
-
-function clamp(value: number, min: number, max: number) {
-  return Math.max(min, Math.min(max, value));
-}
-
-function smoothNoise(seed: number) {
-  return Math.sin(seed * 12.9898) * 0.5 + Math.sin(seed * 4.1414) * 0.5;
-}
-
-function getStatus(cpu: number, offline: boolean): NodeStatus {
-  if (offline) return "offline";
-  if (cpu >= 0.82) return "hot";
-  if (cpu >= 0.62) return "warm";
-  return "ok";
-}
-
-function generateSnapshot(step: number): Snapshot {
-  const t = step * 0.16;
-  const phase = step % 96;
-  const surge = phase >= 48 && phase <= 74;
-  const recovery = phase > 74;
-
-  const nodes = NODE_META.map((node) => {
-    const wave = Math.sin(t + node.id * 0.72);
-    const pulse = Math.max(0, Math.sin((phase - 42) / 12));
-    const offline = surge && (node.id === 3 || node.id === 6) && phase > 62;
-    const base = node.role === "core" ? 0.38 : node.role === "gateway" ? 0.42 : node.role === "cache" ? 0.33 : 0.31;
-    const stress = surge ? 0.24 + pulse * 0.24 : recovery ? 0.16 : 0.08;
-    const cpu = offline ? 0 : clamp(base + wave * 0.1 + stress + smoothNoise(step + node.id) * 0.018, 0.07, 0.96);
-    const mem = offline ? 0 : clamp(0.34 + Math.sin(t * 0.65 + node.id) * 0.08 + (surge ? 0.12 : 0), 0.16, 0.9);
-    const queue = offline ? 0 : Math.round(clamp(8 + cpu * 28 + (surge ? pulse * 18 : 0), 2, 58));
-
+function nodeStyle(cpu: number, failed: boolean, role: "db" | "worker") {
+  if (failed) {
     return {
-      ...node,
-      cpu,
-      mem,
-      queue,
-      status: getStatus(cpu, offline),
+      border: "1.8px solid rgba(248, 113, 113, 0.9)",
+      boxShadow: "0 0 0 rgba(0,0,0,0)",
+      background: "rgba(28, 28, 33, 0.95)",
+      color: "rgba(228, 228, 231, 0.9)",
     };
-  });
+  }
 
-  const activeNodes = nodes.filter((node) => node.status !== "offline").length;
-  const avgCpu = nodes.reduce((sum, node) => sum + node.cpu, 0) / Math.max(activeNodes, 1);
+  if (cpu >= 0.85) {
+    return {
+      border: "1.8px solid rgba(251, 191, 36, 0.95)",
+      boxShadow: "0 0 28px rgba(251, 191, 36, 0.38)",
+      background: "rgba(39, 30, 10, 0.92)",
+      color: "rgba(255, 251, 235, 0.95)",
+    };
+  }
 
   return {
-    step,
-    nodes,
-    latencyMs: clamp(32 + avgCpu * 96 + (surge ? Math.max(0, Math.sin((phase - 48) / 10)) * 64 : 0), 28, 240),
-    requestRate: clamp(148 + Math.sin(t * 0.4) * 32 + (surge ? 170 : recovery ? 82 : 0), 80, 430),
-    action: surge ? "traffic_shift + scale_out" : recovery ? "drain_and_recover" : "steady_state",
-    stability: clamp((activeNodes / nodes.length) * (1 - Math.max(0, avgCpu - 0.58) * 0.75), 0.42, 0.99),
+    border: role === "db" ? "1.8px solid rgba(125, 211, 252, 0.95)" : "1.6px solid rgba(45, 212, 191, 0.9)",
+    boxShadow:
+      role === "db"
+        ? "0 0 24px rgba(125, 211, 252, 0.25)"
+        : "0 0 20px rgba(45, 212, 191, 0.24)",
+    background: role === "db" ? "rgba(13, 33, 48, 0.9)" : "rgba(9, 33, 30, 0.9)",
+    color: "rgba(240, 253, 250, 0.95)",
   };
 }
 
-function edgePath(from: Point, to: Point, bend = 0) {
-  const midX = (from.x + to.x) / 2;
-  const midY = (from.y + to.y) / 2;
-  const dx = to.x - from.x;
-  const dy = to.y - from.y;
-  const length = Math.max(1, Math.hypot(dx, dy));
-  const cx = midX + (-dy / length) * bend;
-  const cy = midY + (dx / length) * bend;
+const InfraNode = memo(function InfraNode({ data }: NodeProps<InfraNodeData>) {
+  const style = nodeStyle(data.cpu, data.failed, data.role);
 
-  return `M ${from.x} ${from.y} Q ${cx} ${cy} ${to.x} ${to.y}`;
-}
-
-function Metric({ label, value, tone = "text-zinc-200" }: { label: string; value: string; tone?: string }) {
   return (
-    <div className="min-w-0 rounded-lg border border-zinc-800/80 bg-black/25 px-3 py-2">
-      <p className="font-mono text-[10px] uppercase tracking-[0.12em] text-zinc-500">{label}</p>
-      <p className={`mt-1 truncate font-mono text-sm ${tone}`}>{value}</p>
-    </div>
+    <motion.div
+      animate={{
+        scale: data.failed ? 0.97 : 1,
+        opacity: data.failed ? 0.7 : 1,
+      }}
+      transition={{ duration: 0.35, ease: "easeOut" }}
+      className="w-44 rounded-2xl px-4 py-3 backdrop-blur"
+      style={style}
+    >
+      <div className="flex items-center justify-between text-[11px] uppercase tracking-[0.18em]">
+        <span>{data.label}</span>
+        <span>{data.role === "db" ? "DB" : "APP"}</span>
+      </div>
+      <div className="mt-3 space-y-1.5 font-mono text-xs">
+        <p>CPU {Math.max(0, data.cpu * 100).toFixed(0)}%</p>
+        <p>Queue {Math.max(0, data.queue)}</p>
+      </div>
+    </motion.div>
   );
-}
+});
 
-function Edge({ from, to, traffic, muted, index }: { from: Point; to: Point; traffic: number; muted: boolean; index: number }) {
-  const path = edgePath(from, to, index % 2 === 0 ? 18 : -18);
-  const hot = traffic > 0.78;
-  const color = muted ? "rgba(113, 113, 122, 0.28)" : hot ? "rgba(251, 191, 36, 0.58)" : "rgba(45, 212, 191, 0.42)";
-  const particleColor = hot ? "#fbbf24" : "#67e8f9";
-  const duration = clamp(4.1 - traffic * 2.2, 1.45, 3.8);
+function TrafficEdge(props: EdgeProps<TrafficEdgeData>) {
+  const [edgePath, labelX, labelY] = getBezierPath(props);
+  const traffic = Math.max(0.2, props.data?.traffic ?? 0.2);
+  const duration = Number((2.5 / Math.min(2.5, Math.max(0.25, traffic))).toFixed(2));
 
   return (
-    <g>
-      <motion.path
-        d={path}
-        fill="none"
-        stroke={color}
-        strokeWidth={muted ? 0.8 : 1 + traffic * 1.1}
-        strokeLinecap="round"
-        initial={false}
-        animate={{ opacity: muted ? 0.18 : 0.34 + traffic * 0.34 }}
-        transition={{ duration: 0.5 }}
-      />
-      {!muted ? (
-        <>
-          <circle r={2.4} fill={particleColor} opacity="0.76">
-            <animateMotion dur={`${duration}s`} repeatCount="indefinite" path={path} />
-          </circle>
-          <circle r={1.45} fill={particleColor} opacity="0.42">
-            <animateMotion dur={`${duration * 1.25}s`} begin={`${duration * 0.45}s`} repeatCount="indefinite" path={path} />
-          </circle>
-        </>
-      ) : null}
-    </g>
+    <>
+      <BaseEdge path={edgePath} style={{ stroke: "rgba(148, 163, 184, 0.5)", strokeWidth: 1.4 }} />
+      <path id={props.id} d={edgePath} fill="none" stroke="transparent" />
+      <circle r="2.8" fill="rgba(125, 211, 252, 0.95)">
+        <animateMotion dur={`${duration}s`} repeatCount="indefinite" path={edgePath} />
+      </circle>
+      <EdgeLabelRenderer>
+        <div
+          style={{
+            position: "absolute",
+            transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
+            pointerEvents: "none",
+          }}
+          className="rounded bg-black/65 px-1.5 py-0.5 font-mono text-[10px] text-sky-200"
+        >
+          {(traffic * 100).toFixed(0)}%
+        </div>
+      </EdgeLabelRenderer>
+    </>
   );
 }
 
-const NodeCard = memo(function NodeCard({ node, position }: { node: NodeDatum; position: Point }) {
-  const style = STATUS_STYLE[node.status];
-  const core = node.role === "core";
-  const width = core ? 132 : 116;
-  const height = core ? 74 : 66;
-  const radius = core ? 18 : 15;
-  const circumference = 2 * Math.PI * radius;
-  const dashOffset = circumference * (1 - node.cpu);
-  const opacity = node.status === "offline" ? 0.52 : 1;
-
-  return (
-    <motion.g
-      initial={false}
-      animate={{ x: position.x, y: position.y, opacity }}
-      transition={{ type: "spring", stiffness: 80, damping: 18 }}
-    >
-      {node.status !== "offline" ? (
-        <motion.circle
-          r={width / 2}
-          fill="none"
-          stroke={style.accent}
-          strokeWidth="0.7"
-          animate={{ opacity: [0.1, 0.2, 0.1], scale: [0.96, 1.08, 0.96] }}
-          transition={{ duration: node.status === "hot" ? 1.5 : 3.8, repeat: Infinity, ease: "easeInOut" }}
-        />
-      ) : null}
-
-      <motion.rect
-        x={-width / 2}
-        y={-height / 2}
-        width={width}
-        height={height}
-        rx={14}
-        fill={style.fill}
-        stroke={style.border}
-        strokeWidth="1"
-        initial={false}
-        animate={{
-          filter: node.status === "hot" ? "drop-shadow(0 0 16px rgba(251, 113, 133, 0.22))" : "drop-shadow(0 12px 30px rgba(0, 0, 0, 0.24))",
-        }}
-        transition={{ duration: 0.45 }}
-      />
-
-      <circle cx={-width / 2 + 29} cy={-7} r={radius} fill="rgba(255,255,255,0.025)" stroke="rgba(255,255,255,0.08)" strokeWidth="3" />
-      <motion.circle
-        cx={-width / 2 + 29}
-        cy={-7}
-        r={radius}
-        fill="none"
-        stroke={style.accent}
-        strokeWidth="3"
-        strokeLinecap="round"
-        strokeDasharray={circumference}
-        initial={false}
-        animate={{ strokeDashoffset: dashOffset }}
-        transition={{ duration: 0.65, ease: "easeOut" }}
-        transform={`rotate(-90 ${-width / 2 + 29} -7)`}
-      />
-      <text
-        x={-width / 2 + 29}
-        y={-3}
-        textAnchor="middle"
-        fill={style.text}
-        fontFamily="var(--font-geist-mono), monospace"
-        fontSize="10"
-        fontWeight="700"
-      >
-        {node.status === "offline" ? "off" : `${Math.round(node.cpu * 100)}`}
-      </text>
+const nodeTypes: NodeTypes = {
+  infra: InfraNode,
+};
 
-      <text x={-width / 2 + 58} y={-14} fill="#f4f4f5" fontFamily="var(--font-geist-mono), monospace" fontSize="10" fontWeight="700">
-        {node.label}
-      </text>
-      <text x={-width / 2 + 58} y={5} fill="#a1a1aa" fontFamily="var(--font-geist-mono), monospace" fontSize="8.5">
-        {node.role.toUpperCase()} / {node.status.toUpperCase()}
-      </text>
-      <text x={-width / 2 + 58} y={23} fill={style.accent} fontFamily="var(--font-geist-mono), monospace" fontSize="8.5">
-        MEM {Math.round(node.mem * 100)}%   Q {node.queue}
-      </text>
-    </motion.g>
-  );
-});
+const edgeTypes = {
+  traffic: TrafficEdge,
+};
 
 export function ClusterSimulation() {
-  const [snapshot, setSnapshot] = useState(() => generateSnapshot(0));
-
-  useEffect(() => {
-    let step = 0;
-    const timer = window.setInterval(() => {
-      step += 1;
-      setSnapshot(generateSnapshot(step));
-    }, 700);
-
-    return () => window.clearInterval(timer);
-  }, []);
+  const { packet, connected, error, sendIntervention } = useSimulationSocket();
+
+  const observation = packet?.observation;
+  const simulationState = useMemo(
+    () => ({
+      cpu: observation?.cpu_loads ?? [0.2, 0.3, 0.26, 0.4, 0.32, 0.28, 0.35, 0.31],
+      queue: observation?.queue_lengths ?? [2, 6, 4, 9, 5, 7, 3, 2],
+      failed: new Set(observation?.failed_nodes ?? []),
+    }),
+    [observation]
+  );
 
-  const summary = useMemo(() => {
-    const online = snapshot.nodes.filter((node) => node.status !== "offline").length;
-    const avgCpu = snapshot.nodes.reduce((sum, node) => sum + node.cpu, 0) / Math.max(online, 1);
-
-    return {
-      online,
-      avgCpu,
-      hotNodes: snapshot.nodes.filter((node) => node.status === "hot").length,
-    };
-  }, [snapshot.nodes]);
+  const nodes = useMemo<Node<InfraNodeData>[]>(() => {
+    return NODE_POSITIONS.map((position, idx) => ({
+      id: `${idx}`,
+      type: "infra",
+      position,
+      sourcePosition: Position.Right,
+      targetPosition: Position.Left,
+      data: {
+        label: idx === 0 ? "Node 0" : `Node ${idx}`,
+        cpu: simulationState.cpu[idx] ?? 0,
+        queue: simulationState.queue[idx] ?? 0,
+        failed: simulationState.failed.has(idx),
+        role: idx === 0 ? "db" : "worker",
+      },
+      draggable: false,
+      selectable: false,
+    }));
+  }, [simulationState]);
+
+  const edges = useMemo<Edge<TrafficEdgeData>[]>(() => {
+    const workerNodes = [1, 2, 3, 4, 5, 6, 7];
+    return workerNodes.map((worker) => {
+      const workerCpu = Math.max(0.2, simulationState.cpu[worker] ?? 0.2);
+      return {
+        id: `e-${worker}-0`,
+        source: `${worker}`,
+        target: "0",
+        type: "traffic",
+        markerEnd: {
+          type: MarkerType.ArrowClosed,
+          color: "rgba(125, 211, 252, 0.7)",
+        },
+        style: { stroke: "rgba(125, 211, 252, 0.5)", strokeWidth: 1.4 },
+        data: { traffic: workerCpu },
+      };
+    });
+  }, [simulationState]);
 
   return (
-    <div className="overflow-hidden rounded-2xl border border-zinc-800/80 bg-[#080b0f] shadow-[0_24px_80px_rgba(0,0,0,0.38)]">
-      <div className="flex flex-col gap-3 border-b border-zinc-800/70 px-4 py-3 sm:flex-row sm:items-center sm:justify-between sm:px-5">
+    <div className="rounded-2xl border border-zinc-800 bg-[#0e1117] p-4 shadow-[0_0_45px_rgba(56,189,248,0.08)] sm:p-6">
+      <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
+        <div className="font-mono text-xs uppercase tracking-[0.18em] text-zinc-400">
+          {connected ? "Live simulation stream" : "Reconnecting simulation stream"}
+        </div>
         <div className="flex items-center gap-2">
-          <span className="h-1.5 w-1.5 rounded-full bg-emerald-300 shadow-[0_0_12px_rgba(110,231,183,0.7)]" />
-          <p className="font-mono text-[10px] uppercase tracking-[0.16em] text-emerald-200/80">Simulation</p>
+          <button
+            type="button"
+            onClick={() => sendIntervention("kubectl throttle ingress --rate=0.35")}
+            className="rounded-md border border-sky-300/40 bg-sky-400/10 px-3 py-1.5 font-mono text-xs text-sky-100 transition hover:bg-sky-400/20"
+          >
+            Apply Throttle
+          </button>
+          <button
+            type="button"
+            onClick={() => sendIntervention("kubectl rollout restart node-3")}
+            className="rounded-md border border-amber-300/40 bg-amber-400/10 px-3 py-1.5 font-mono text-xs text-amber-100 transition hover:bg-amber-400/20"
+          >
+            Restart Node 3
+          </button>
         </div>
-        <p className="font-mono text-[10px] uppercase tracking-[0.12em] text-zinc-500">
-          step {snapshot.step} / {summary.online} of {snapshot.nodes.length} nodes online
-        </p>
       </div>
 
-      <div className="relative min-h-[25rem] overflow-hidden bg-[radial-gradient(circle_at_50%_40%,rgba(45,212,191,0.12),transparent_38%),linear-gradient(180deg,rgba(24,24,27,0.28),rgba(0,0,0,0.08))]">
-        <div className="pointer-events-none absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.035)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.035)_1px,transparent_1px)] bg-[size:40px_40px] opacity-35" />
-        <svg viewBox="0 0 960 560" className="relative h-[25rem] w-full sm:h-[31rem]" preserveAspectRatio="xMidYMid meet" aria-label="Animated distributed cluster simulation">
-          <defs>
-            <radialGradient id="cluster-core-glow" cx="50%" cy="50%" r="50%">
-              <stop offset="0%" stopColor="rgba(45, 212, 191, 0.22)" />
-              <stop offset="65%" stopColor="rgba(45, 212, 191, 0.04)" />
-              <stop offset="100%" stopColor="rgba(45, 212, 191, 0)" />
-            </radialGradient>
-          </defs>
-
-          <motion.circle
-            cx="480"
-            cy="280"
-            r="220"
-            fill="url(#cluster-core-glow)"
-            animate={{ opacity: [0.45, 0.65, 0.45], scale: [0.98, 1.02, 0.98] }}
-            transition={{ duration: 6, repeat: Infinity, ease: "easeInOut" }}
-            style={{ transformOrigin: "480px 280px" }}
-          />
-
-          <g opacity="0.38">
-            <ellipse cx="480" cy="280" rx="310" ry="192" fill="none" stroke="rgba(161,161,170,0.22)" strokeDasharray="6 16" />
-            <ellipse cx="480" cy="280" rx="206" ry="128" fill="none" stroke="rgba(45,212,191,0.16)" strokeDasharray="4 14" />
-          </g>
-
-          {snapshot.nodes.slice(1, 8).map((node, index) => (
-            <Edge
-              key={`edge-core-${node.id}`}
-              from={POSITIONS[node.id]}
-              to={POSITIONS[0]}
-              traffic={node.cpu}
-              muted={node.status === "offline"}
-              index={index}
-            />
-          ))}
-          {[1, 2, 3, 4, 5, 6, 7].map((id, index, ids) => {
-            const nextId = ids[(index + 1) % ids.length];
-            const node = snapshot.nodes[id];
-            const nextNode = snapshot.nodes[nextId];
-
-            return (
-              <Edge
-                key={`edge-ring-${id}-${nextId}`}
-                from={POSITIONS[id]}
-                to={POSITIONS[nextId]}
-                traffic={(node.cpu + nextNode.cpu) / 2}
-                muted={node.status === "offline" || nextNode.status === "offline"}
-                index={index + 7}
-              />
-            );
-          })}
-          <Edge from={POSITIONS[8]} to={POSITIONS[0]} traffic={snapshot.stability} muted={false} index={18} />
-
-          {snapshot.nodes.map((node) => (
-            <NodeCard key={node.id} node={node} position={POSITIONS[node.id]} />
-          ))}
-        </svg>
+      <div className="h-[30rem] w-full overflow-hidden rounded-xl border border-zinc-800 bg-[radial-gradient(circle_at_30%_20%,rgba(56,189,248,0.08),transparent_35%),radial-gradient(circle_at_80%_80%,rgba(45,212,191,0.08),transparent_35%)]">
+        <ReactFlow
+          nodes={nodes}
+          edges={edges}
+          nodeTypes={nodeTypes}
+          edgeTypes={edgeTypes}
+          minZoom={0.55}
+          maxZoom={1.4}
+          fitView
+          fitViewOptions={{ padding: 0.08 }}
+          proOptions={{ hideAttribution: true }}
+          nodesDraggable={false}
+          nodesConnectable={false}
+          elementsSelectable={false}
+          panOnDrag={false}
+        >
+          <Background color="rgba(148, 163, 184, 0.08)" gap={24} />
+          <Controls showInteractive={false} className="!bg-black/60 !text-zinc-100" />
+        </ReactFlow>
       </div>
 
-      <div className="grid grid-cols-2 gap-2 border-t border-zinc-800/70 p-3 sm:grid-cols-5 sm:p-4">
-        <Metric label="latency" value={`${snapshot.latencyMs.toFixed(0)}ms`} tone={snapshot.latencyMs > 150 ? "text-amber-200" : "text-sky-200"} />
-        <Metric label="request rate" value={`${snapshot.requestRate.toFixed(0)} rps`} tone="text-violet-200" />
-        <Metric label="avg cpu" value={`${Math.round(summary.avgCpu * 100)}%`} tone={summary.avgCpu > 0.72 ? "text-rose-200" : "text-emerald-200"} />
-        <Metric label="stability" value={`${Math.round(snapshot.stability * 100)}%`} tone="text-emerald-200" />
-        <Metric label="action" value={snapshot.action} tone={summary.hotNodes > 0 ? "text-amber-200" : "text-zinc-300"} />
+      <div className="mt-4 grid grid-cols-2 gap-3 text-sm text-zinc-300 sm:grid-cols-4">
+        <div className="rounded-lg border border-zinc-800 bg-black/35 p-3">
+          <p className="font-mono text-[11px] uppercase tracking-[0.16em] text-zinc-500">Step</p>
+          <p className="mt-1 text-lg font-semibold text-white">{observation?.step ?? 0}</p>
+        </div>
+        <div className="rounded-lg border border-zinc-800 bg-black/35 p-3">
+          <p className="font-mono text-[11px] uppercase tracking-[0.16em] text-zinc-500">Latency</p>
+          <p className="mt-1 text-lg font-semibold text-white">{(observation?.latency_ms ?? 0).toFixed(1)}ms</p>
+        </div>
+        <div className="rounded-lg border border-zinc-800 bg-black/35 p-3">
+          <p className="font-mono text-[11px] uppercase tracking-[0.16em] text-zinc-500">Request Rate</p>
+          <p className="mt-1 text-lg font-semibold text-white">{(observation?.request_rate ?? 0).toFixed(0)} req/s</p>
+        </div>
+        <div className="rounded-lg border border-zinc-800 bg-black/35 p-3">
+          <p className="font-mono text-[11px] uppercase tracking-[0.16em] text-zinc-500">Agent Action</p>
+          <p className="mt-1 truncate text-sm font-semibold text-white">{packet?.intervention ?? packet?.last_action_type ?? "no_op"}</p>
+        </div>
       </div>
+
+      {error ? <p className="mt-3 font-mono text-xs text-rose-300">socket warning: {error}</p> : null}
     </div>
   );
 }

frontend/components/ui/FlipWords.tsx

@@ -15,18 +15,8 @@ export function FlipWords({ words, className, duration = 2500 }: FlipWordsProps)
     [words]
   );
   const [activeIndex, setActiveIndex] = useState(0);
-  const [reduceMotion, setReduceMotion] = useState(false);
 
   useEffect(() => {
-    const media = window.matchMedia("(prefers-reduced-motion: reduce)");
-    const sync = () => setReduceMotion(media.matches);
-    sync();
-    media.addEventListener("change", sync);
-    return () => media.removeEventListener("change", sync);
-  }, []);
-
-  useEffect(() => {
-    if (reduceMotion) return;
     if (normalizedWords.length <= 1) return;
 
     const interval = window.setInterval(() => {
@@ -34,26 +24,20 @@ export function FlipWords({ words, className, duration = 2500 }: FlipWordsProps)
     }, Math.max(400, duration));
 
     return () => window.clearInterval(interval);
-  }, [duration, normalizedWords, reduceMotion]);
+  }, [duration, normalizedWords]);
 
   if (!normalizedWords.length) {
     return null;
   }
 
   const visibleIndex = activeIndex % normalizedWords.length;
-  const staticWord = normalizedWords[0];
 
   return (
     <span className={cn("inline-flex items-center", className)}>
       <span aria-live="polite" aria-atomic="true" className="sr-only">
-        {reduceMotion ? staticWord : normalizedWords[visibleIndex]}
+        {normalizedWords[visibleIndex]}
       </span>
-      {reduceMotion ? (
-        <span aria-hidden="true" className="leading-[1.2]">
-          {staticWord}
-        </span>
-      ) : (
-        <span aria-hidden="true" className="relative inline-flex h-[1.2em] overflow-hidden">
+      <span aria-hidden="true" className="relative inline-flex h-[1.2em] overflow-hidden">
         <span
           className="flex flex-col transition-transform duration-500 ease-out will-change-transform"
           style={{ transform: `translateY(-${visibleIndex * 100}%)` }}
@@ -70,8 +54,7 @@ export function FlipWords({ words, className, duration = 2500 }: FlipWordsProps)
             </span>
           ))}
         </span>
-        </span>
-      )}
+      </span>
     </span>
   );
 }

frontend/components/ui/FocusCards.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import Image from "next/image";
 import { useState } from "react";
 import { cn } from "./cn";
 import type { FocusCard } from "./types";
@@ -35,11 +34,9 @@ export function FocusCards({ cards, className }: FocusCardsProps) {
               blurred ? "opacity-60" : "opacity-100"
             )}
           >
-            <Image
+            <img
               src={card.src}
               alt={card.title}
-              fill
-              sizes="(min-width: 1024px) 33vw, (min-width: 640px) 50vw, 100vw"
               className={cn(
                 "h-full w-full object-cover transition-transform duration-500",
                 focused ? "scale-110" : "scale-100"

frontend/components/ui/Terminal.tsx

@@ -22,7 +22,7 @@ export function Terminal({
   commands,
   outputs,
   typingSpeed = 26,
-  delayBetweenCommands = 400,
+  delayBetweenCommands = 450,
   className,
 }: TerminalProps) {
   const [lines, setLines] = useState<RenderedLine[]>([]);
@@ -41,39 +41,33 @@ export function Terminal({
   }, [commands, outputs]);
 
   useEffect(() => {
-    let running = true;
+    let cancelled = false;
 
     const run = async () => {
-      while (running) {
-        setLines([]);
-        setActiveLine(null);
-
-        for (let i = 0; i < script.length; i += 1) {
-          const line = script[i];
-          const value = line.text ?? "";
+      setLines([]);
+      setActiveLine(null);
 
-          for (let c = 0; c <= value.length; c += 1) {
-            if (!running) return;
-            setActiveLine({ type: line.type, text: value.slice(0, c) });
-            await sleep(typingSpeed);
-          }
+      for (let i = 0; i < script.length; i += 1) {
+        const line = script[i];
+        const value = line.text ?? "";
 
-          if (!running) return;
-          setLines((prev) => [...prev, line]);
-          setActiveLine(null);
-          await sleep(delayBetweenCommands);
+        for (let c = 0; c <= value.length; c += 1) {
+          if (cancelled) return;
+          setActiveLine({ type: line.type, text: value.slice(0, c) });
+          await sleep(typingSpeed);
         }
 
-        if (!running) return;
+        if (cancelled) return;
+        setLines((prev) => [...prev, line]);
         setActiveLine(null);
-        await sleep(2500);
+        await sleep(delayBetweenCommands);
       }
     };
 
     run();
 
     return () => {
-      running = false;
+      cancelled = true;
     };
   }, [script, typingSpeed, delayBetweenCommands]);
 
@@ -89,7 +83,7 @@ export function Terminal({
       >
         {isCommand ? "$ " : ""}
         {line.text}
-        {active ? <span className="ml-0.5 inline-block animate-pulse align-middle text-zinc-100">█</span> : null}
+        {active ? <span className="ml-0.5 inline-block h-4 w-2 animate-pulse bg-white/90 align-middle" /> : null}
       </div>
     );
   };

frontend/components/ui/TextGenerateEffect.tsx

@@ -18,21 +18,9 @@ export function TextGenerateEffect({
 }: TextGenerateEffectProps) {
   const tokens = useMemo(() => words.trim().split(/\s+/).filter(Boolean), [words]);
   const [visibleCount, setVisibleCount] = useState(0);
-  const [reduceMotion, setReduceMotion] = useState(false);
 
   useEffect(() => {
-    const media = window.matchMedia("(prefers-reduced-motion: reduce)");
-    const sync = () => setReduceMotion(media.matches);
-    const timer = window.setTimeout(sync, 0);
-    media.addEventListener("change", sync);
-    return () => {
-      window.clearTimeout(timer);
-      media.removeEventListener("change", sync);
-    };
-  }, []);
-
-  useEffect(() => {
-    if (!tokens.length || reduceMotion) return;
+    if (!tokens.length) return;
 
     const perWordDelay = Math.max(35, Math.floor(duration / tokens.length));
     const timer = window.setInterval(() => {
@@ -46,14 +34,12 @@ export function TextGenerateEffect({
     }, perWordDelay);
 
     return () => window.clearInterval(timer);
-  }, [tokens, duration, reduceMotion]);
-
-  const renderedCount = reduceMotion ? tokens.length : visibleCount;
+  }, [tokens, duration]);
 
   return (
     <p className={cn("flex flex-wrap text-zinc-100", className)}>
       {tokens.map((word, index) => {
-        const visible = index < renderedCount;
+        const visible = index < visibleCount;
         return (
           <span
             key={`${word}-${index}`}

frontend/lib/telemetry.ts

@@ -0,0 +1,459 @@
+import fs from "node:fs/promises";
+import path from "node:path";
+
+export type TelemetrySnapshot = {
+  step: number;
+  cpuLoads: number[];
+  queueLengths: number[];
+  latencyMs: number;
+  failedNodes: number[];
+  requestRate: number;
+};
+
+type MetricsCsvRow = {
+  model: string;
+  taskId: string;
+  step: number;
+  actionTaken: string;
+  reasoning: string;
+  reward: number;
+  cumulativeScore: number;
+};
+
+type CsvCache = {
+  mtimeMs: number;
+  snapshots: TelemetrySnapshot[];
+};
+
+let cache: CsvCache | null = null;
+
+const DEFAULT_CSV_PATH = path.resolve(process.cwd(), "..", "metrics_Qwen_Qwen3-8B.csv");
+const CSV_PATH = process.env.TELEMETRY_CSV_PATH ?? DEFAULT_CSV_PATH;
+
+const HEADER_COLUMNS = [
+  "model",
+  "task_id",
+  "step",
+  "action_taken",
+  "reasoning",
+  "reward",
+  "cumulative_score",
+  "done",
+  "error",
+];
+
+export async function getTelemetrySnapshots(): Promise<TelemetrySnapshot[]> {
+  const stat = await fs.stat(CSV_PATH);
+  if (cache && cache.mtimeMs === stat.mtimeMs) {
+    return cache.snapshots;
+  }
+
+  const csvText = await fs.readFile(CSV_PATH, "utf-8");
+  const rows = parseCsv(csvText);
+  const normalizedRows = normalizeRows(rows);
+
+  const snapshots = normalizedRows
+    .map((row, index) => toSnapshot(row, index))
+    .filter((snapshot): snapshot is TelemetrySnapshot => snapshot !== null);
+
+  cache = { mtimeMs: stat.mtimeMs, snapshots };
+  return snapshots;
+}
+
+function normalizeRows(rows: string[][]): MetricsCsvRow[] {
+  if (rows.length === 0) return [];
+
+  const startAt = isHeaderRow(rows[0]) ? 1 : 0;
+  const normalized: MetricsCsvRow[] = [];
+
+  for (let i = startAt; i < rows.length; i += 1) {
+    const row = rows[i];
+    if (row.length < 7) continue;
+
+    const step = toFiniteNumber(row[2]);
+    const reward = toFiniteNumber(row[5]);
+    const cumulativeScore = toFiniteNumber(row[6]);
+
+    normalized.push({
+      model: row[0] ?? "",
+      taskId: row[1] ?? "",
+      step: step ?? i - startAt + 1,
+      actionTaken: row[3] ?? "",
+      reasoning: row[4] ?? "",
+      reward: reward ?? 0,
+      cumulativeScore: cumulativeScore ?? 0,
+    });
+  }
+
+  return normalized;
+}
+
+function toSnapshot(row: MetricsCsvRow, index: number): TelemetrySnapshot | null {
+  const cpuParsed = extractCpuLoads(row.reasoning);
+  const failedParsed = extractFailedNodes(row.reasoning);
+
+  const cpuLoads = normalizeCpuLoads(cpuParsed ?? deriveCpuLoads(row, index), row, index);
+  const queueLengths = normalizeQueueLengths(
+    extractQueueLengths(row.reasoning) ?? deriveQueueLengths(cpuLoads, row, index),
+    cpuLoads,
+    row,
+    index
+  );
+
+  const latencyMs =
+    clamp(round1(extractLatencyMs(row.reasoning) ?? deriveLatencyMs(cpuLoads, queueLengths, row)), 0, 2000) ||
+    0;
+
+  const failedNodes = normalizeFailedNodes(
+    failedParsed ?? deriveFailedNodes(cpuLoads, row),
+    cpuLoads.length
+  );
+
+  const requestRate =
+    clampInt(
+      Math.round(extractRequestRate(row.reasoning) ?? deriveRequestRate(cpuLoads, queueLengths, row)),
+      0,
+      100_000
+    ) || 0;
+
+  if (cpuLoads.length === 0 || queueLengths.length === 0) {
+    return null;
+  }
+
+  return {
+    step: Number.isFinite(row.step) ? Math.max(0, Math.trunc(row.step)) : index + 1,
+    cpuLoads,
+    queueLengths,
+    latencyMs,
+    failedNodes,
+    requestRate,
+  };
+}
+
+function parseCsv(input: string): string[][] {
+  const rows: string[][] = [];
+  let row: string[] = [];
+  let field = "";
+  let inQuotes = false;
+
+  for (let i = 0; i < input.length; i += 1) {
+    const char = input[i];
+
+    if (inQuotes) {
+      if (char === '"') {
+        const next = input[i + 1];
+        if (next === '"') {
+          field += '"';
+          i += 1;
+        } else {
+          inQuotes = false;
+        }
+      } else {
+        field += char;
+      }
+      continue;
+    }
+
+    if (char === '"') {
+      inQuotes = true;
+      continue;
+    }
+
+    if (char === ",") {
+      row.push(field);
+      field = "";
+      continue;
+    }
+
+    if (char === "\n") {
+      row.push(field);
+      rows.push(row);
+      row = [];
+      field = "";
+      continue;
+    }
+
+    if (char === "\r") {
+      continue;
+    }
+
+    field += char;
+  }
+
+  if (field.length > 0 || row.length > 0) {
+    row.push(field);
+    rows.push(row);
+  }
+
+  return rows;
+}
+
+function isHeaderRow(row: string[]): boolean {
+  if (row.length < HEADER_COLUMNS.length) return false;
+  return HEADER_COLUMNS.every((column, index) => (row[index] ?? "").trim().toLowerCase() === column);
+}
+
+function extractCpuLoads(reasoning: string): number[] | null {
+  const arr = extractNumericArrayByKeyword(reasoning, ["cpu_loads", "cpu loads", "cpu"]);
+  return arr && arr.length > 0 ? arr : null;
+}
+
+function extractQueueLengths(reasoning: string): number[] | null {
+  const arr = extractNumericArrayByKeyword(reasoning, ["queue_lengths", "queue lengths", "queue"]);
+  return arr && arr.length > 0 ? arr.map((value) => Math.round(value)) : null;
+}
+
+function extractFailedNodes(reasoning: string): number[] | null {
+  const lower = reasoning.toLowerCase();
+  if (lower.includes("failed_nodes is empty") || lower.includes("failed nodes is empty")) {
+    return [];
+  }
+
+  const raw = extractRawArrayByKeyword(reasoning, ["failed_nodes", "failed nodes"]);
+  if (raw === null) return null;
+
+  const nodeMatches = Array.from(raw.matchAll(/(?:node\s*[-_]?\s*)?(\d+)/gi));
+  const parsed = nodeMatches
+    .map((match) => Number.parseInt(match[1], 10))
+    .filter((value) => Number.isFinite(value) && value >= 0);
+
+  return uniqueInts(parsed);
+}
+
+function extractLatencyMs(reasoning: string): number | null {
+  const direct =
+    extractByRegex(reasoning, /\blatency_ms\b[^0-9-]{0,24}(-?\d+(?:\.\d+)?)/i) ??
+    extractByRegex(reasoning, /\bcurrent latency\b[^0-9-]{0,24}(-?\d+(?:\.\d+)?)/i) ??
+    extractByRegex(reasoning, /\blatency(?:\s+is|:|=)\s*(-?\d+(?:\.\d+)?)/i);
+
+  if (direct !== null) return direct;
+
+  // Last-resort fallback for prose like: "latency ... 87.3ms"
+  const msNearLatency = extractByRegex(reasoning, /\blatency\b[\s\S]{0,40}?(-?\d+(?:\.\d+)?)\s*ms\b/i);
+  return msNearLatency ?? null;
+}
+
+function extractRequestRate(reasoning: string): number | null {
+  const direct =
+    extractByRegex(reasoning, /\brequest_rate\b(?!_norm)[^0-9-]{0,24}(-?\d+(?:\.\d+)?)/i) ??
+    extractByRegex(reasoning, /\brequest rate\b[^0-9-]{0,24}(-?\d+(?:\.\d+)?)/i) ??
+    extractByRegex(reasoning, /\bcurrent request rate\b[^0-9-]{0,24}(-?\d+(?:\.\d+)?)/i);
+  return direct ?? null;
+}
+
+function extractNumericArrayByKeyword(text: string, keywords: string[]): number[] | null {
+  const raw = extractRawArrayByKeyword(text, keywords);
+  if (raw === null) return null;
+
+  const matches = raw.match(/-?\d+(?:\.\d+)?/g);
+  if (!matches) return [];
+
+  const parsed = matches
+    .map((token) => Number.parseFloat(token))
+    .filter((value) => Number.isFinite(value));
+
+  return parsed;
+}
+
+function extractRawArrayByKeyword(text: string, keywords: string[]): string | null {
+  const lower = text.toLowerCase();
+
+  for (const keyword of keywords) {
+    let fromIndex = 0;
+
+    while (true) {
+      const idx = lower.indexOf(keyword.toLowerCase(), fromIndex);
+      if (idx === -1) break;
+
+      const open = text.indexOf("[", idx);
+      if (open === -1 || open - idx > 220) {
+        fromIndex = idx + keyword.length;
+        continue;
+      }
+
+      const close = text.indexOf("]", open + 1);
+      if (close === -1 || close - open > 500) {
+        fromIndex = idx + keyword.length;
+        continue;
+      }
+
+      return text.slice(open + 1, close);
+    }
+  }
+
+  return null;
+}
+
+function extractByRegex(text: string, regex: RegExp): number | null {
+  const match = text.match(regex);
+  if (!match || !match[1]) return null;
+  const value = Number.parseFloat(match[1]);
+  return Number.isFinite(value) ? value : null;
+}
+
+function normalizeCpuLoads(values: number[], row: MetricsCsvRow, index: number): number[] {
+  const nodeCount = 4;
+  const result = fillToSize(values, nodeCount, (slot) => deriveCpuSlot(row, index, slot));
+  return result.map((value) => round3(clamp(value, 0, 1)));
+}
+
+function normalizeQueueLengths(
+  values: number[],
+  cpuLoads: number[],
+  row: MetricsCsvRow,
+  index: number
+): number[] {
+  const nodeCount = cpuLoads.length;
+  const result = fillToSize(values, nodeCount, (slot) => deriveQueueSlot(cpuLoads, row, index, slot));
+  return result.map((value) => clampInt(Math.round(value), 0, 100_000));
+}
+
+function normalizeFailedNodes(values: number[], nodeCount: number): number[] {
+  return uniqueInts(values)
+    .filter((value) => value >= 0 && value < nodeCount)
+    .sort((a, b) => a - b);
+}
+
+function deriveCpuLoads(row: MetricsCsvRow, index: number): number[] {
+  const out: number[] = [];
+  for (let i = 0; i < 4; i += 1) {
+    out.push(deriveCpuSlot(row, index, i));
+  }
+  return out;
+}
+
+function deriveCpuSlot(row: MetricsCsvRow, index: number, slot: number): number {
+  const h = stableHash(`${row.taskId}|${row.step}|${row.actionTaken}|cpu|${slot}|${index}`);
+  const taskBias = taskCpuBias(row.taskId);
+  const scoreBias = clamp(row.cumulativeScore, 0, 1) * 0.25;
+  const rewardBias = row.reward < 0 ? 0.18 : 0.1;
+  const hashed = ((h % 1000) / 1000) * 0.38;
+  return clamp(taskBias + scoreBias + rewardBias + hashed, 0.05, 1);
+}
+
+function deriveQueueLengths(cpuLoads: number[], row: MetricsCsvRow, index: number): number[] {
+  return cpuLoads.map((cpu, slot) => deriveQueueSlot(cpuLoads, row, index, slot, cpu));
+}
+
+function deriveQueueSlot(
+  cpuLoads: number[],
+  row: MetricsCsvRow,
+  index: number,
+  slot: number,
+  knownCpu?: number
+): number {
+  const cpu = knownCpu ?? cpuLoads[slot] ?? 0;
+  const h = stableHash(`${row.taskId}|${row.step}|queue|${slot}|${index}`);
+  const taskBoost = taskQueueBias(row.taskId);
+  const noise = h % 11;
+  return Math.max(0, Math.round(cpu * 80 + taskBoost + noise));
+}
+
+function deriveLatencyMs(cpuLoads: number[], queueLengths: number[], row: MetricsCsvRow): number {
+  const cpuAvg = average(cpuLoads);
+  const queueAvg = average(queueLengths);
+  const rewardPenalty = row.reward <= 0 ? 22 : 8;
+  return clamp(cpuAvg * 140 + queueAvg * 0.95 + rewardPenalty, 5, 2000);
+}
+
+function deriveFailedNodes(cpuLoads: number[], row: MetricsCsvRow): number[] {
+  const inferred = cpuLoads
+    .map((cpu, idx) => ({ cpu, idx }))
+    .filter((entry) => entry.cpu <= 0.02)
+    .map((entry) => entry.idx);
+
+  if (inferred.length > 0) return inferred;
+
+  if (row.reward <= -1000) {
+    return [0];
+  }
+
+  return [];
+}
+
+function deriveRequestRate(cpuLoads: number[], queueLengths: number[], row: MetricsCsvRow): number {
+  const base = taskRequestBase(row.taskId);
+  const cpuFactor = average(cpuLoads) * 480;
+  const queueFactor = average(queueLengths) * 3.2;
+  return base + cpuFactor + queueFactor;
+}
+
+function taskRequestBase(taskId: string): number {
+  const task = taskId.toLowerCase();
+  if (task.includes("flash")) return 600;
+  if (task.includes("traffic")) return 280;
+  if (task.includes("cascade")) return 220;
+  if (task.includes("node")) return 140;
+  return 180;
+}
+
+function taskCpuBias(taskId: string): number {
+  const task = taskId.toLowerCase();
+  if (task.includes("flash")) return 0.58;
+  if (task.includes("traffic")) return 0.46;
+  if (task.includes("cascade")) return 0.52;
+  if (task.includes("node")) return 0.4;
+  return 0.42;
+}
+
+function taskQueueBias(taskId: string): number {
+  const task = taskId.toLowerCase();
+  if (task.includes("flash")) return 42;
+  if (task.includes("traffic")) return 26;
+  if (task.includes("cascade")) return 34;
+  if (task.includes("node")) return 20;
+  return 24;
+}
+
+function fillToSize(values: number[], size: number, deriveAt: (slot: number) => number): number[] {
+  const normalized = values
+    .filter((value) => Number.isFinite(value))
+    .slice(0, size);
+
+  while (normalized.length < size) {
+    normalized.push(deriveAt(normalized.length));
+  }
+
+  return normalized;
+}
+
+function toFiniteNumber(value: string | undefined): number | null {
+  if (value === undefined) return null;
+  const parsed = Number.parseFloat(value);
+  return Number.isFinite(parsed) ? parsed : null;
+}
+
+function average(values: number[]): number {
+  if (values.length === 0) return 0;
+  const total = values.reduce((sum, value) => sum + value, 0);
+  return total / values.length;
+}
+
+function stableHash(text: string): number {
+  let hash = 2166136261;
+  for (let i = 0; i < text.length; i += 1) {
+    hash ^= text.charCodeAt(i);
+    hash = Math.imul(hash, 16777619);
+  }
+  return hash >>> 0;
+}
+
+function uniqueInts(values: number[]): number[] {
+  return [...new Set(values.map((value) => Math.trunc(value)))];
+}
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, value));
+}
+
+function clampInt(value: number, min: number, max: number): number {
+  return Math.trunc(clamp(value, min, max));
+}
+
+function round1(value: number): number {
+  return Math.round(value * 10) / 10;
+}
+
+function round3(value: number): number {
+  return Math.round(value * 1000) / 1000;
+}

frontend/lib/useSimulationSocket.ts

@@ -0,0 +1,106 @@
+"use client";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+
+export type SimulationObservation = {
+  cpu_loads: number[];
+  queue_lengths: number[];
+  failed_nodes: number[];
+  latency_ms: number;
+  request_rate: number;
+  mem_utilizations: number[];
+  step: number;
+  done: boolean;
+  action_errors: string[];
+};
+
+export type SimulationPacket = {
+  observation: SimulationObservation;
+  intervention?: string | null;
+  last_action_type?: string;
+  timestamp_ms?: number;
+};
+
+function resolveWebSocketUrl(): string {
+  if (process.env.NEXT_PUBLIC_SIM_WS_URL) {
+    return process.env.NEXT_PUBLIC_SIM_WS_URL;
+  }
+
+  if (typeof window === "undefined") {
+    return "ws://localhost:8000/ws/simulation";
+  }
+
+  const protocol = window.location.protocol === "https:" ? "wss" : "ws";
+  const host = window.location.hostname;
+  return `${protocol}://${host}:8000/ws/simulation`;
+}
+
+export function useSimulationSocket() {
+  const [packet, setPacket] = useState<SimulationPacket | null>(null);
+  const [connected, setConnected] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const wsRef = useRef<WebSocket | null>(null);
+  const reconnectTimerRef = useRef<number | null>(null);
+
+  const wsUrl = useMemo(() => resolveWebSocketUrl(), []);
+
+  useEffect(() => {
+    let mounted = true;
+
+    const connect = () => {
+      const ws = new WebSocket(wsUrl);
+      wsRef.current = ws;
+
+      ws.onopen = () => {
+        if (!mounted) return;
+        setConnected(true);
+        setError(null);
+      };
+
+      ws.onmessage = (event) => {
+        if (!mounted) return;
+        try {
+          const parsed = JSON.parse(event.data) as SimulationPacket;
+          setPacket(parsed);
+        } catch {
+          setError("Invalid simulation payload");
+        }
+      };
+
+      ws.onerror = () => {
+        if (!mounted) return;
+        setError("Simulation socket error");
+      };
+
+      ws.onclose = () => {
+        if (!mounted) return;
+        setConnected(false);
+        reconnectTimerRef.current = window.setTimeout(connect, 1500);
+      };
+    };
+
+    connect();
+
+    return () => {
+      mounted = false;
+      if (reconnectTimerRef.current !== null) {
+        window.clearTimeout(reconnectTimerRef.current);
+      }
+      wsRef.current?.close();
+    };
+  }, [wsUrl]);
+
+  const sendIntervention = (command: string) => {
+    const ws = wsRef.current;
+    if (!ws || ws.readyState !== WebSocket.OPEN) return;
+
+    ws.send(JSON.stringify({ command }));
+  };
+
+  return {
+    packet,
+    connected,
+    error,
+    sendIntervention,
+  };
+}

frontend/package-lock.json

@@ -11,7 +11,8 @@
         "framer-motion": "^12.38.0",
         "next": "16.2.4",
         "react": "19.2.4",
-        "react-dom": "19.2.4"
+        "react-dom": "19.2.4",
+        "reactflow": "^11.11.4"
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4",
@@ -1241,6 +1242,108 @@
         "node": ">=12.4.0"
       }
     },
+    "node_modules/@reactflow/background": {
+      "version": "11.3.14",
+      "resolved": "https://registry.npmjs.org/@reactflow/background/-/background-11.3.14.tgz",
+      "integrity": "sha512-Gewd7blEVT5Lh6jqrvOgd4G6Qk17eGKQfsDXgyRSqM+CTwDqRldG2LsWN4sNeno6sbqVIC2fZ+rAUBFA9ZEUDA==",
+      "license": "MIT",
+      "dependencies": {
+        "@reactflow/core": "11.11.4",
+        "classcat": "^5.0.3",
+        "zustand": "^4.4.1"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
+    "node_modules/@reactflow/controls": {
+      "version": "11.2.14",
+      "resolved": "https://registry.npmjs.org/@reactflow/controls/-/controls-11.2.14.tgz",
+      "integrity": "sha512-MiJp5VldFD7FrqaBNIrQ85dxChrG6ivuZ+dcFhPQUwOK3HfYgX2RHdBua+gx+40p5Vw5It3dVNp/my4Z3jF0dw==",
+      "license": "MIT",
+      "dependencies": {
+        "@reactflow/core": "11.11.4",
+        "classcat": "^5.0.3",
+        "zustand": "^4.4.1"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
+    "node_modules/@reactflow/core": {
+      "version": "11.11.4",
+      "resolved": "https://registry.npmjs.org/@reactflow/core/-/core-11.11.4.tgz",
+      "integrity": "sha512-H4vODklsjAq3AMq6Np4LE12i1I4Ta9PrDHuBR9GmL8uzTt2l2jh4CiQbEMpvMDcp7xi4be0hgXj+Ysodde/i7Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3": "^7.4.0",
+        "@types/d3-drag": "^3.0.1",
+        "@types/d3-selection": "^3.0.3",
+        "@types/d3-zoom": "^3.0.1",
+        "classcat": "^5.0.3",
+        "d3-drag": "^3.0.0",
+        "d3-selection": "^3.0.0",
+        "d3-zoom": "^3.0.0",
+        "zustand": "^4.4.1"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
+    "node_modules/@reactflow/minimap": {
+      "version": "11.7.14",
+      "resolved": "https://registry.npmjs.org/@reactflow/minimap/-/minimap-11.7.14.tgz",
+      "integrity": "sha512-mpwLKKrEAofgFJdkhwR5UQ1JYWlcAAL/ZU/bctBkuNTT1yqV+y0buoNVImsRehVYhJwffSWeSHaBR5/GJjlCSQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@reactflow/core": "11.11.4",
+        "@types/d3-selection": "^3.0.3",
+        "@types/d3-zoom": "^3.0.1",
+        "classcat": "^5.0.3",
+        "d3-selection": "^3.0.0",
+        "d3-zoom": "^3.0.0",
+        "zustand": "^4.4.1"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
+    "node_modules/@reactflow/node-resizer": {
+      "version": "2.2.14",
+      "resolved": "https://registry.npmjs.org/@reactflow/node-resizer/-/node-resizer-2.2.14.tgz",
+      "integrity": "sha512-fwqnks83jUlYr6OHcdFEedumWKChTHRGw/kbCxj0oqBd+ekfs+SIp4ddyNU0pdx96JIm5iNFS0oNrmEiJbbSaA==",
+      "license": "MIT",
+      "dependencies": {
+        "@reactflow/core": "11.11.4",
+        "classcat": "^5.0.4",
+        "d3-drag": "^3.0.0",
+        "d3-selection": "^3.0.0",
+        "zustand": "^4.4.1"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
+    "node_modules/@reactflow/node-toolbar": {
+      "version": "1.3.14",
+      "resolved": "https://registry.npmjs.org/@reactflow/node-toolbar/-/node-toolbar-1.3.14.tgz",
+      "integrity": "sha512-rbynXQnH/xFNu4P9H+hVqlEUafDCkEoCy0Dg9mG22Sg+rY/0ck6KkrAQrYrTgXusd+cEJOMK0uOOFCK2/5rSGQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@reactflow/core": "11.11.4",
+        "classcat": "^5.0.3",
+        "zustand": "^4.4.1"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
     "node_modules/@rtsao/scc": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
@@ -1539,6 +1642,259 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@types/d3": {
+      "version": "7.4.3",
+      "resolved": "https://registry.npmjs.org/@types/d3/-/d3-7.4.3.tgz",
+      "integrity": "sha512-lZXZ9ckh5R8uiFVt8ogUNf+pIrK4EsWrx2Np75WvF/eTpJ0FMHNhjXk8CKEx/+gpHbNQyJWehbFaTvqmHWB3ww==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-array": "*",
+        "@types/d3-axis": "*",
+        "@types/d3-brush": "*",
+        "@types/d3-chord": "*",
+        "@types/d3-color": "*",
+        "@types/d3-contour": "*",
+        "@types/d3-delaunay": "*",
+        "@types/d3-dispatch": "*",
+        "@types/d3-drag": "*",
+        "@types/d3-dsv": "*",
+        "@types/d3-ease": "*",
+        "@types/d3-fetch": "*",
+        "@types/d3-force": "*",
+        "@types/d3-format": "*",
+        "@types/d3-geo": "*",
+        "@types/d3-hierarchy": "*",
+        "@types/d3-interpolate": "*",
+        "@types/d3-path": "*",
+        "@types/d3-polygon": "*",
+        "@types/d3-quadtree": "*",
+        "@types/d3-random": "*",
+        "@types/d3-scale": "*",
+        "@types/d3-scale-chromatic": "*",
+        "@types/d3-selection": "*",
+        "@types/d3-shape": "*",
+        "@types/d3-time": "*",
+        "@types/d3-time-format": "*",
+        "@types/d3-timer": "*",
+        "@types/d3-transition": "*",
+        "@types/d3-zoom": "*"
+      }
+    },
+    "node_modules/@types/d3-array": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
+      "integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-axis": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-axis/-/d3-axis-3.0.6.tgz",
+      "integrity": "sha512-pYeijfZuBd87T0hGn0FO1vQ/cgLk6E1ALJjfkC0oJ8cbwkZl3TpgS8bVBLZN+2jjGgg38epgxb2zmoGtSfvgMw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-brush": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-brush/-/d3-brush-3.0.6.tgz",
+      "integrity": "sha512-nH60IZNNxEcrh6L1ZSMNA28rj27ut/2ZmI3r96Zd+1jrZD++zD3LsMIjWlvg4AYrHn/Pqz4CF3veCxGjtbqt7A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-chord": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-chord/-/d3-chord-3.0.6.tgz",
+      "integrity": "sha512-LFYWWd8nwfwEmTZG9PfQxd17HbNPksHBiJHaKuY1XeqscXacsS2tyoo6OdRsjf+NQYeB6XrNL3a25E3gH69lcg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-contour": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-contour/-/d3-contour-3.0.6.tgz",
+      "integrity": "sha512-BjzLgXGnCWjUSYGfH1cpdo41/hgdWETu4YxpezoztawmqsvCeep+8QGfiY6YbDvfgHz/DkjeIkkZVJavB4a3rg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-array": "*",
+        "@types/geojson": "*"
+      }
+    },
+    "node_modules/@types/d3-delaunay": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+      "integrity": "sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-dispatch": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-dispatch/-/d3-dispatch-3.0.7.tgz",
+      "integrity": "sha512-5o9OIAdKkhN1QItV2oqaE5KMIiXAvDWBDPrD85e58Qlz1c1kI/J0NcqbEG88CoTwJrYe7ntUCVfeUl2UJKbWgA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-drag": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-3.0.7.tgz",
+      "integrity": "sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-dsv": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-dsv/-/d3-dsv-3.0.7.tgz",
+      "integrity": "sha512-n6QBF9/+XASqcKK6waudgL0pf/S5XHPPI8APyMLLUHd8NqouBGLsU8MgtO7NINGtPBtk9Kko/W4ea0oAspwh9g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-fetch": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-fetch/-/d3-fetch-3.0.7.tgz",
+      "integrity": "sha512-fTAfNmxSb9SOWNB9IoG5c8Hg6R+AzUHDRlsXsDZsNp6sxAEOP0tkP3gKkNSO/qmHPoBFTxNrjDprVHDQDvo5aA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-dsv": "*"
+      }
+    },
+    "node_modules/@types/d3-force": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/@types/d3-force/-/d3-force-3.0.10.tgz",
+      "integrity": "sha512-ZYeSaCF3p73RdOKcjj+swRlZfnYpK1EbaDiYICEEp5Q6sUiqFaFQ9qgoshp5CzIyyb/yD09kD9o2zEltCexlgw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-format": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-3.0.4.tgz",
+      "integrity": "sha512-fALi2aI6shfg7vM5KiR1wNJnZ7r6UuggVqtDA+xiEdPZQwy/trcQaHnwShLuLdta2rTymCNpxYTiMZX/e09F4g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-geo": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-3.1.0.tgz",
+      "integrity": "sha512-856sckF0oP/diXtS4jNsiQw/UuK5fQG8l/a9VVLeSouf1/PPbBE1i1W852zVwKwYCBkFJJB7nCFTbk6UMEXBOQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
+    "node_modules/@types/d3-hierarchy": {
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-3.1.7.tgz",
+      "integrity": "sha512-tJFtNoYBtRtkNysX1Xq4sxtjK8YgoWUNpIiUee0/jHGRwqvzYxkq0hGVbbOGSz+JgFxxRu4K8nb3YpG3CMARtg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-path": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
+      "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-polygon": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-polygon/-/d3-polygon-3.0.2.tgz",
+      "integrity": "sha512-ZuWOtMaHCkN9xoeEMr1ubW2nGWsp4nIql+OPQRstu4ypeZ+zk3YKqQT0CXVe/PYqrKpZAi+J9mTs05TKwjXSRA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-quadtree": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-quadtree/-/d3-quadtree-3.0.6.tgz",
+      "integrity": "sha512-oUzyO1/Zm6rsxKRHA1vH0NEDG58HrT5icx/azi9MF1TWdtttWl0UIUsjEQBBh+SIkrpd21ZjEv7ptxWys1ncsg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-random": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-random/-/d3-random-3.0.3.tgz",
+      "integrity": "sha512-Imagg1vJ3y76Y2ea0871wpabqp613+8/r0mCLEBfdtqC7xMSfj9idOnmBYyMoULfHePJyxMAw3nWhJxzc+LFwQ==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
+      "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-scale-chromatic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+      "integrity": "sha512-iWMJgwkK7yTRmWqRB5plb1kadXyQ5Sj8V/zYlFGMUBbIPKQScw+Dku9cAAMgJG+z5GYDoMjWGLVOvjghDEFnKQ==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-selection": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.11.tgz",
+      "integrity": "sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-shape": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.8.tgz",
+      "integrity": "sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
+      "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-time-format": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-4.0.3.tgz",
+      "integrity": "sha512-5xg9rC+wWL8kdDj153qZcsJ0FWiFt0J5RB6LYUNZjwSnesfblqrI/bJ1wBdJ8OQfncgbJG5+2F+qfqnqyzYxyg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-timer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-transition": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.9.tgz",
+      "integrity": "sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-zoom": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-3.0.8.tgz",
+      "integrity": "sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-interpolate": "*",
+        "@types/d3-selection": "*"
+      }
+    },
     "node_modules/@types/estree": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -1546,6 +1902,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.16",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz",
+      "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==",
+      "license": "MIT"
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -1574,7 +1936,7 @@
       "version": "19.2.14",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
       "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.2.2"
@@ -2614,6 +2976,12 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/classcat": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/classcat/-/classcat-5.0.5.tgz",
+      "integrity": "sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w==",
+      "license": "MIT"
+    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -2673,9 +3041,114 @@
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "d3-selection": "2 - 3"
+      }
+    },
+    "node_modules/d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -5493,6 +5966,24 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/reactflow": {
+      "version": "11.11.4",
+      "resolved": "https://registry.npmjs.org/reactflow/-/reactflow-11.11.4.tgz",
+      "integrity": "sha512-70FOtJkUWH3BAOsN+LU9lCrKoKbtOPnz2uq0CV2PLdNSwxTXOhCbsZr50GmZ+Rtw3jx8Uv7/vBFtCGixLfd4Og==",
+      "license": "MIT",
+      "dependencies": {
+        "@reactflow/background": "11.3.14",
+        "@reactflow/controls": "11.2.14",
+        "@reactflow/core": "11.11.4",
+        "@reactflow/minimap": "11.7.14",
+        "@reactflow/node-resizer": "2.2.14",
+        "@reactflow/node-toolbar": "1.3.14"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
@@ -6466,6 +6957,15 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -6623,6 +7123,34 @@
       "peerDependencies": {
         "zod": "^3.25.0 || ^4.0.0"
       }
+    },
+    "node_modules/zustand": {
+      "version": "4.5.7",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.7.tgz",
+      "integrity": "sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==",
+      "license": "MIT",
+      "dependencies": {
+        "use-sync-external-store": "^1.2.2"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8",
+        "immer": ">=9.0.6",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
     }
   }
 }

frontend/package.json

@@ -12,7 +12,8 @@
     "framer-motion": "^12.38.0",
     "next": "16.2.4",
     "react": "19.2.4",
-    "react-dom": "19.2.4"
+    "react-dom": "19.2.4",
+    "reactflow": "^11.11.4"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",

server/app.py

@@ -12,7 +12,6 @@ import os
 from openenv.core.env_server.http_server import create_app
 from fastapi import WebSocket, WebSocketDisconnect
 from fastapi.responses import HTMLResponse
-from fastapi.middleware.cors import CORSMiddleware
 
 from server.environment import DistributedInfraEnvironment
 from server.models import InfraAction, InfraObservation
@@ -23,12 +22,10 @@ _global_env = DistributedInfraEnvironment()
 _viz_env = DistributedInfraEnvironment()
 _viz_lock = asyncio.Lock()
 
-
 # 2. Create a "factory function" that returns our active instance
 def env_factory():
     return _global_env
 
-
 # 3. Pass the callable factory function to OpenEnv
 app = create_app(
     env_factory,
@@ -37,25 +34,16 @@ app = create_app(
     env_name="distributed_infra_env",
 )
 
-# --- CORS for Next.js frontend ---
-app.add_middleware(
-    CORSMiddleware,
-    allow_origins=["http://localhost:3000", "http://127.0.0.1:3000", "*"],
-    allow_credentials=True,
-    allow_methods=["*"],
-    allow_headers=["*"],
-)
 
-
-# Clear formatted document page for root url
+#Clear formatted document page for root url
 @app.get("/")
 def home():
     # Safely locate the home.html file in the same directory as this script
     html_file_path = os.path.join(os.path.dirname(__file__), "home.html")
-
+    
     with open(html_file_path, "r", encoding="utf-8") as file:
         html_content = file.read()
-
+        
     return HTMLResponse(content=html_content)
 
 
@@ -122,9 +110,7 @@ async def simulation_socket(websocket: WebSocket):
 
                 obs = _viz_env.step(action=action)
                 if obs.done:
-                    obs = _viz_env.reset(
-                        task=_viz_env.sim.task_id or "cascading_failure"
-                    )
+                    obs = _viz_env.reset(task=_viz_env.sim.task_id or "cascading_failure")
 
                 await websocket.send_json(
                     {
@@ -140,13 +126,10 @@ async def simulation_socket(websocket: WebSocket):
     except (WebSocketDisconnect, RuntimeError):
         return
 
-
 def main():
     """Entry point for direct execution."""
     import uvicorn
-
     uvicorn.run(app, host="0.0.0.0", port=8000)
 
-
 if __name__ == "__main__":
     main()