Merge branch 'main' of https://github.com/ADITYAGABA1322/sentinel-env

UI_MIGRATION.md

@@ -0,0 +1,192 @@
+# UI Migration Guide: index.html → Next.js
+
+## ✅ COMPLETED
+
+### 1. **CSS Design Tokens** 
+- ✅ Created design token mapping in `globals.css`
+- All color variables, fonts, and spacing preserved
+- Ready for selective integration
+
+### 2. **JSX Conversion** 
+- ✅ Created `/ui/app/page-landing.tsx` 
+- Converted HTML → React JSX components
+- `class` → `className`
+- Canvas refs with `useEffect` lifecycle
+- All sections: hero, overview, simulation, architecture, metrics
+
+### 3. **Canvas Initialization**
+- ✅ Added `useRef` hooks for canvas elements
+- ✅ Wrapped canvas logic in `useEffect`
+- ✅ TODO placeholders for actual drawing logic
+
+---
+
+## 📋 INTEGRATION STEPS
+
+### Step 1: Apply index.html CSS to globals.css
+
+Your `globals.css` has old styles. Update it with index.html theme:
+
+```bash
+# Option A: Keep existing structure, add index.html CSS as override
+# Option B: Replace entire globals.css with index.html styles (RECOMMENDED)
+```
+
+The `page-landing.tsx` expects these CSS classes:
+- Layout: `nav`, `section`, `footer`
+- Components: `card`, `btn-primary`, `btn-secondary`, `metric-block`
+- Utilities: `anim-1`, `divider`, `hero-stats`
+
+### Step 2: Choose Integration Strategy
+
+**Option A: Use Landing Page Separately** ✅ (SIMPLEST)
+```
+/app/page.tsx          → Your existing interactive app
+/app/landing.tsx       → New static landing (page-landing.tsx)
+/app/layout.tsx        → Wrap both
+```
+
+**Option B: Replace page.tsx Completely** (if landing is the main page)
+```
+/app/page.tsx          → Replace with page-landing.tsx
+/app/mission/page.tsx  → Move existing components to subfolder
+```
+
+**Option C: Hybrid** (recommended)
+```
+/app/page.tsx          → Dynamic switcher (landing vs mission)
+/app/landing.tsx       → page-landing.tsx
+/app/components/*      → Existing components
+```
+
+---
+
+## 🎨 CSS INTEGRATION
+
+### Required Classes from index.html:
+
+```css
+/* Navigation */
+nav, .nav-logo, .nav-links, .nav-badge
+
+/* Hero Section */
+#hero, .hero-content, .hero-tag, .hero-ctas
+.btn-primary, .btn-secondary
+
+/* Cards */
+.cards-grid, .card, .card-id, .card-title, .card-footer
+
+/* Simulation */
+.sim-wrapper, .sim-topbar, .sim-body, .sim-panel
+.agent-row, .trust-bar-bg, .trust-bar-fill
+.metric-block, .metric-value
+
+/* Architecture */
+.arch-node, .arch-flow
+
+/* Metrics */
+.metric-block, .metric-grid
+
+/* Footer */
+footer, .footer-left, .footer-right
+
+/* Animations */
+@keyframes pulse-dot, fadeInUp
+.anim-1, .anim-2, .anim-3, .anim-4, .anim-5
+```
+
+---
+
+## 🖼️ CANVAS MIGRATION
+
+The new `page-landing.tsx` has placeholders:
+
+```typescript
+function initHeroCanvas(canvas: HTMLCanvasElement) {
+  // TODO: Copy canvas.js logic from index.html
+  // The neural network grid visualization
+}
+
+function initSimCanvas(canvas: HTMLCanvasElement) {
+  // TODO: Copy canvas.js logic from index.html  
+  // The orchestrator network visualization
+}
+```
+
+**To migrate canvas logic:**
+
+1. Find the inline `<script>` block in `index.html` (lines ~1710+)
+2. Extract the two IIFE functions:
+   - Hero canvas: Neural network grid
+   - Sim canvas: Orchestrator network
+3. Paste into `initHeroCanvas()` and `initSimCanvas()`
+4. Update canvas size handling for React
+
+---
+
+## ✨ FEATURES NOT YET IMPLEMENTED
+
+These are hooks for future work - marked with `TODO`:
+
+- [ ] Canvas drawing logic (detailed in "Canvas Migration" above)
+- [ ] Button click handlers (Launch Mission, Read Docs)
+- [ ] Live metrics updates (currently static)
+- [ ] Specialist status animation
+- [ ] Episode log scrolling (right panel)
+
+---
+
+## 📁 FILE STRUCTURE AFTER MIGRATION
+
+```
+/ui
+├── app/
+│   ├── layout.tsx         (unchanged)
+│   ├── page.tsx           (existing - interactive mode)
+│   ├── page-landing.tsx   (NEW - landing page)
+│   ├── globals.css        (UPDATED with index.html styles)
+│   ├── components/
+│   │   ├── Landing.tsx
+│   │   ├── MissionControl.tsx
+│   │   └── ...
+│   └── hooks/
+│       └── useSentinel.ts
+├── index.html             (ARCHIVE - no longer needed after migration)
+├── .env                   (unchanged)
+└── package.json           (unchanged)
+```
+
+---
+
+## 🚀 QUICK START
+
+1. **Update globals.css** with index.html styles (or use the CSS I provided)
+2. **Keep page-landing.tsx** as new file (or rename to page.tsx if replacing)
+3. **Migrate canvas logic** from index.html `<script>` section
+4. **Test**: Visit `http://localhost:3000/` or `/landing` depending on routing
+
+---
+
+## ✅ DONE vs 🚧 TODO
+
+| Part | Status | Notes |
+|------|--------|-------|
+| HTML → JSX | ✅ | page-landing.tsx ready |
+| CSS Variables | ✅ | Design tokens extracted |
+| Layout/Structure | ✅ | All sections preserved |
+| Canvas Setup | ✅ | useRef + useEffect ready |
+| Canvas Drawing | 🚧 | TODO - copy from index.html |
+| Button Handlers | 🚧 | TODO - implement event handlers |
+| Live Updates | 🚧 | TODO - connect to API/state |
+| Animations | ✅ | @keyframes preserved in CSS |
+
+---
+
+## NEXT: What You Need to Do
+
+1. **Decision**: Keep separate landing page or replace main page?
+2. **CSS**: Merge index.html styles into `globals.css`
+3. **Canvas**: Copy drawing logic from `index.html` `<script>` into the TODO functions
+4. **Test**: Run `npm run dev` and verify visual parity
+
+Need help with any step? 🚀

app.py

@@ -12,6 +12,7 @@ from threading import RLock
 from typing import Any
 
 from fastapi import FastAPI, HTTPException, Query
+from fastapi.middleware.cors import CORSMiddleware
 from fastapi.staticfiles import StaticFiles
 from fastapi.responses import FileResponse, HTMLResponse, JSONResponse, StreamingResponse
 from pydantic import BaseModel
@@ -36,6 +37,15 @@ app = FastAPI(
     version="1.0.0",
 )
 
+# Add CORS middleware to allow browser requests from frontend
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],  # Allow all origins (use specific domains in production)
+    allow_credentials=True,
+    allow_methods=["*"],  # Allow all HTTP methods (GET, POST, OPTIONS, etc.)
+    allow_headers=["*"],  # Allow all headers
+)
+
 @dataclass
 class SessionEntry:
     env: SentinelEnv | ClusterTrustEnv
@@ -212,6 +222,8 @@ class StepRequest(BaseModel):
 # Endpoints
 # ---------------------------------------------------------------------------
 
+
+
 @app.get("/health")
 def health():
     return {

ui/app/components/AgentTrustMonitor.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import type { Observation, EventItem } from "../lib/types";
+
+const AGENT_ROLES: Record<string, string> = {
+  S0: "COORDINATOR", S1: "OBSERVER", S2: "EXECUTOR", S3: "FLAGGED", S4: "VALIDATOR",
+};
+
+type Props = {
+  observation: Observation | null;
+  trustDeltas: Record<string, number>;
+  activeSpec: string | null;
+  events: EventItem[];
+  running: boolean;
+  totalReward: number;
+};
+
+function trustClass(t: number) {
+  if (t >= 0.65) return "high";
+  if (t >= 0.35) return "mid";
+  return "low";
+}
+
+function trustColor(t: number) {
+  if (t >= 0.65) return "var(--green)";
+  if (t >= 0.35) return "var(--amber)";
+  return "var(--red)";
+}
+
+export default function AgentTrustMonitor({
+  observation, trustDeltas, activeSpec, events, running, totalReward,
+}: Props) {
+  const agents = observation?.available_specialists ?? ["S0", "S1", "S2", "S3", "S4"];
+  const trust = observation?.trust_snapshot ?? {};
+  const lastReward = observation?.last_reward ?? 0;
+
+  // detect adversarial from events
+  const poisonedAgents = new Set(
+    events.filter(e => e.outcome === "poisoned" || e.outcome === "blocked")
+      .map(e => e.specialist).filter(Boolean)
+  );
+
+  // mean trust
+  const vals = agents.map(id => trust[id] ?? 0.5);
+  const meanTrust = vals.length ? vals.reduce((a, b) => a + b, 0) / vals.length : 0.5;
+  const advRatio = agents.length ? Math.round((poisonedAgents.size / agents.length) * 100) : 0;
+
+  return (
+    <div className="sim-panel">
+      <div className="sim-panel-label">AGENT TRUST REGISTRY</div>
+
+      {agents.map(id => {
+        const t = trust[id] ?? 0.5;
+        const delta = trustDeltas[id] ?? 0;
+        const isActive = activeSpec === id;
+        const isAdv = poisonedAgents.has(id);
+        const role = AGENT_ROLES[id] ?? "AGENT";
+
+        return (
+          <div className="agent-row" key={id}>
+            <div className="agent-header">
+              <span className={`agent-id ${isActive ? "active" : isAdv ? "adversarial" : "neutral"}`}>
+                {id} // {isAdv ? "⚠ FLAGGED" : role}
+              </span>
+              <span className="agent-trust-val" style={{ color: trustColor(t) }}>
+                {t.toFixed(2)}
+              </span>
+            </div>
+            <div className="trust-bar-bg">
+              <div
+                className={`trust-bar-fill ${trustClass(t)}`}
+                style={{ width: `${Math.max(2, t * 100)}%` }}
+              />
+            </div>
+            <div className="agent-state" style={isAdv ? { color: "var(--red)" } : {}}>
+              {isAdv
+                ? "STATE: ADVERSARIAL // ISOLATED"
+                : isActive
+                  ? "STATE: ACTIVE // DELEGATING"
+                  : `STATE: READY // Δ ${delta >= 0 ? "+" : ""}${delta.toFixed(3)}`
+              }
+            </div>
+          </div>
+        );
+      })}
+
+      <div style={{ marginTop: 20, paddingTop: 16, borderTop: "1px solid rgba(0,200,255,0.08)" }}>
+        <div className="sim-metric-row">
+          <span className="sim-metric-label">MEAN TRUST</span>
+          <span className="sim-metric-val c">{meanTrust.toFixed(3)}</span>
+        </div>
+        <div className="sim-metric-row">
+          <span className="sim-metric-label">ADV RATIO</span>
+          <span className="sim-metric-val r">{advRatio}%</span>
+        </div>
+        <div className="sim-metric-row">
+          <span className="sim-metric-label">STEP REWARD</span>
+          <span className={`sim-metric-val ${lastReward >= 0 ? "g" : "r"}`}>
+            {lastReward >= 0 ? "+" : ""}{lastReward.toFixed(3)}
+          </span>
+        </div>
+        <div className="sim-metric-row">
+          <span className="sim-metric-label">TOTAL REWARD</span>
+          <span className={`sim-metric-val ${totalReward >= 0 ? "g" : "r"}`}>
+            {totalReward >= 0 ? "+" : ""}{totalReward.toFixed(2)}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}

ui/app/components/ArchitecturePipeline.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+export default function ArchitecturePipeline() {
+  const nodes = [
+    { id: "LAYER-01", name: "AGENTS", desc: "S0–S4 emit\nobservations + actions\nper timestep", color: "rgba(0, 200, 255, 0.4)", labelColor: "#00f5ff" },
+    { id: "LAYER-02", name: "ADV DETECTOR", desc: "KL-divergence\nanomaly scan\nByzantine flag", color: "rgba(255, 45, 85, 0.3)", labelColor: "#ff2d55" },
+    { id: "LAYER-03", name: "ORCHESTRATOR", desc: "Trust-weighted\naggregation &\ndecision output", color: "rgba(0, 255, 136, 0.3)", labelColor: "#00ff88" },
+    { id: "LAYER-04", name: "REWARD SIG.", desc: "Shaped scalar\nwith adversarial\npenalty term", color: "rgba(255, 184, 0, 0.3)", labelColor: "#ffb800" },
+    { id: "LAYER-05", name: "POLICY UPDATE", desc: "PPO gradient\nstep + trust\nposterior update", color: "rgba(0, 85, 255, 0.4)", labelColor: "#0088ff" },
+  ];
+
+  const arrows = ["ACTIONS", "FLAGS", "DECISION", "REWARD"];
+
+  return (
+    <>
+      <div className="arch-flow">
+        {nodes.map((node, i) => (
+          <span key={node.id} style={{ display: "contents" }}>
+            <div className="arch-node" style={{ "--node-color": node.color } as React.CSSProperties}>
+              <div className="arch-node-id" style={{ color: node.labelColor }}>{node.id}</div>
+              <div className="arch-node-name">{node.name}</div>
+              <div className="arch-node-desc">{node.desc.split("\n").map((l, j) => <span key={j}>{l}<br /></span>)}</div>
+            </div>
+            {i < nodes.length - 1 && (
+              <div className="arch-arrow">
+                <div className="arch-arrow-line" />
+                <div className="arch-arrow-label">{arrows[i]}</div>
+              </div>
+            )}
+          </span>
+        ))}
+      </div>
+
+      <div className="arch-code-loop">
+        <span style={{ color: "var(--muted)" }}>LOOP:</span>&nbsp;&nbsp;
+        <span style={{ color: "var(--cyan)" }}>observe()</span> →{" "}
+        <span style={{ color: "var(--red)" }}>detect_adversary()</span> →{" "}
+        <span style={{ color: "var(--green)" }}>aggregate_trust()</span> →{" "}
+        <span style={{ color: "var(--white)" }}>act()</span> →{" "}
+        <span style={{ color: "var(--amber)" }}>compute_reward()</span> →{" "}
+        <span style={{ color: "#0088ff" }}>update_policy()</span> →{" "}
+        <span style={{ color: "var(--cyan)" }}>repeat</span>
+        &nbsp;&nbsp;
+        <span style={{ color: "var(--muted)" }}>// T: O(N·K) // SPACE: O(N²)</span>
+      </div>
+    </>
+  );
+}

ui/app/components/ExecutionLog.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import { useRef, useEffect } from "react";
+import type { EventItem, Observation } from "../lib/types";
+
+type Props = {
+  events: EventItem[];
+  observation: Observation | null;
+  info: { total_reward: number; score: number; adversarial_detections?: number; adversarial_poisonings?: number } | undefined;
+};
+
+function logClass(e: EventItem): string {
+  if (e.outcome === "poisoned") return "alert";
+  if (e.outcome === "blocked") return "warn";
+  if (e.outcome === "success") return "ok";
+  return "";
+}
+
+function formatTime(step: number): string {
+  const m = 14, s = 3 + step;
+  const ss = s % 60;
+  const mm = m + Math.floor(s / 60);
+  return `${mm}:${String(ss).padStart(2, "0")}:${String(Math.floor(Math.random() * 60)).padStart(2, "0")}`;
+}
+
+export default function ExecutionLog({ events, observation, info }: Props) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+  }, [events.length]);
+
+  const detectRate = info?.adversarial_detections !== undefined && info?.adversarial_poisonings !== undefined
+    ? (info.adversarial_detections + info.adversarial_poisonings) > 0
+      ? Math.round((info.adversarial_detections / (info.adversarial_detections + info.adversarial_poisonings)) * 100)
+      : 0
+    : null;
+
+  return (
+    <div className="sim-panel" style={{ borderRight: "none", borderLeft: "1px solid rgba(0,200,255,0.08)" }}>
+      <div className="sim-panel-label">EVENT LOG</div>
+
+      <div ref={scrollRef} style={{ maxHeight: 220, overflowY: "auto" }}>
+        {events.slice(-12).map((e, i) => (
+          <div key={i} className={`log-entry ${logClass(e)}`}>
+            <span className="log-time">{formatTime(e.step)}</span>
+            {e.action === "reset"
+              ? "EPISODE RESET ⟳"
+              : `${e.specialist ?? "SYS"} ${e.summary.substring(0, 40)}`
+            }
+          </div>
+        ))}
+        {events.length === 0 && (
+          <div className="log-entry" style={{ opacity: 0.3 }}>
+            Waiting for simulation data...
+          </div>
+        )}
+      </div>
+
+      <div style={{ marginTop: 16, paddingTop: 16, borderTop: "1px solid rgba(0,200,255,0.08)" }}>
+        <div className="sim-panel-label">EPISODE METRICS</div>
+        <div className="sim-metric-row">
+          <span className="sim-metric-label">CUMULATIVE REWARD</span>
+          <span className={`sim-metric-val ${(info?.total_reward ?? 0) >= 0 ? "g" : "r"}`}>
+            {(info?.total_reward ?? 0) >= 0 ? "+" : ""}{(info?.total_reward ?? 0).toFixed(2)}
+          </span>
+        </div>
+        <div className="sim-metric-row">
+          <span className="sim-metric-label">SCORE</span>
+          <span className="sim-metric-val c">{(info?.score ?? 0).toFixed(3)}</span>
+        </div>
+        {detectRate !== null && (
+          <div className="sim-metric-row">
+            <span className="sim-metric-label">DETECT RATE</span>
+            <span className="sim-metric-val c">{detectRate}%</span>
+          </div>
+        )}
+        <div className="sim-metric-row">
+          <span className="sim-metric-label">STEP</span>
+          <span className="sim-metric-val a">
+            {observation?.step_count ?? 0}/{observation?.max_steps ?? 0}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}

ui/app/components/HeroCanvas.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import { useRef, useEffect } from "react";
+
+type Node = {
+  x: number; y: number;
+  vx: number; vy: number;
+  r: number; pulse: number;
+  type: "blue" | "green" | "red";
+};
+
+export default function HeroCanvas() {
+  const ref = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    const canvas = ref.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    let W = 0, H = 0;
+    let nodes: Node[] = [];
+    let animId = 0;
+
+    function resize() {
+      W = canvas!.width = canvas!.offsetWidth;
+      H = canvas!.height = canvas!.offsetHeight;
+      buildNodes();
+    }
+
+    function buildNodes() {
+      nodes = [];
+      const count = Math.floor((W * H) / 18000);
+      for (let i = 0; i < count; i++) {
+        nodes.push({
+          x: Math.random() * W, y: Math.random() * H,
+          vx: (Math.random() - 0.5) * 0.3, vy: (Math.random() - 0.5) * 0.3,
+          r: Math.random() * 2 + 1,
+          pulse: Math.random() * Math.PI * 2,
+          type: Math.random() < 0.1 ? "red" : Math.random() < 0.15 ? "green" : "blue",
+        });
+      }
+    }
+
+    function draw() {
+      ctx!.clearRect(0, 0, W, H);
+
+      // Grid
+      ctx!.strokeStyle = "rgba(0,100,200,0.06)";
+      ctx!.lineWidth = 0.5;
+      for (let x = 0; x < W; x += 60) {
+        ctx!.beginPath(); ctx!.moveTo(x, 0); ctx!.lineTo(x, H); ctx!.stroke();
+      }
+      for (let y = 0; y < H; y += 60) {
+        ctx!.beginPath(); ctx!.moveTo(0, y); ctx!.lineTo(W, y); ctx!.stroke();
+      }
+
+      // Update
+      nodes.forEach(n => {
+        n.x += n.vx; n.y += n.vy;
+        if (n.x < 0 || n.x > W) n.vx *= -1;
+        if (n.y < 0 || n.y > H) n.vy *= -1;
+        n.pulse += 0.02;
+      });
+
+      // Edges
+      for (let i = 0; i < nodes.length; i++) {
+        for (let j = i + 1; j < nodes.length; j++) {
+          const a = nodes[i], b = nodes[j];
+          const dx = a.x - b.x, dy = a.y - b.y;
+          const dist = Math.sqrt(dx * dx + dy * dy);
+          if (dist < 140) {
+            const alpha = (1 - dist / 140) * 0.25;
+            let color: string;
+            if (a.type === "red" || b.type === "red") color = `rgba(255,45,85,${alpha * 0.8})`;
+            else if (a.type === "green" || b.type === "green") color = `rgba(0,255,136,${alpha * 0.6})`;
+            else color = `rgba(0,200,255,${alpha})`;
+            ctx!.strokeStyle = color;
+            ctx!.lineWidth = 0.5;
+            ctx!.beginPath(); ctx!.moveTo(a.x, a.y); ctx!.lineTo(b.x, b.y); ctx!.stroke();
+          }
+        }
+      }
+
+      // Nodes
+      nodes.forEach(n => {
+        const pulse = 0.5 + 0.5 * Math.sin(n.pulse);
+        let color: string, gcolor: string;
+        if (n.type === "red") { color = `rgba(255,45,85,${0.4 + 0.5 * pulse})`; gcolor = "#FF2D55"; }
+        else if (n.type === "green") { color = `rgba(0,255,136,${0.4 + 0.5 * pulse})`; gcolor = "#00FF88"; }
+        else { color = `rgba(0,200,255,${0.35 + 0.4 * pulse})`; gcolor = "#00F5FF"; }
+
+        const g = ctx!.createRadialGradient(n.x, n.y, 0, n.x, n.y, n.r * 3);
+        g.addColorStop(0, gcolor); g.addColorStop(1, "transparent");
+        ctx!.fillStyle = g;
+        ctx!.beginPath(); ctx!.arc(n.x, n.y, n.r * 3, 0, Math.PI * 2); ctx!.fill();
+        ctx!.fillStyle = color;
+        ctx!.beginPath(); ctx!.arc(n.x, n.y, n.r, 0, Math.PI * 2); ctx!.fill();
+      });
+
+      animId = requestAnimationFrame(draw);
+    }
+
+    const onResize = () => { cancelAnimationFrame(animId); resize(); draw(); };
+    window.addEventListener("resize", onResize);
+    resize();
+    draw();
+
+    return () => { cancelAnimationFrame(animId); window.removeEventListener("resize", onResize); };
+  }, []);
+
+  return (
+    <div className="hero-canvas-wrap">
+      <canvas ref={ref} />
+    </div>
+  );
+}

ui/app/components/MetricsGrid.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import type { EvalSummary } from "../lib/types";
+
+type Props = {
+  proof: {
+    random: EvalSummary;
+    heuristic: EvalSummary;
+    oracle: EvalSummary;
+    trained?: EvalSummary;
+  } | null;
+};
+
+export default function MetricsGrid({ proof }: Props) {
+  const trained = proof?.trained;
+  const heuristic = proof?.heuristic;
+  const random = proof?.random;
+
+  const trustAcc = trained ? Math.round(trained.avg_trust_calibration * 100) : 92;
+  const detectRate = trained ? Math.round(trained.avg_detection_rate * 100) : 87;
+  const improvement = trained && heuristic
+    ? Math.round((trained.avg_score - heuristic.avg_score) * 100)
+    : 34;
+  const avgScore = trained ? trained.avg_score.toFixed(2) : "0.91";
+
+  const baselineTrust = random ? Math.round(random.avg_trust_calibration * 100) : 61;
+  const baselineDetect = random ? Math.round(random.avg_detection_rate * 100) : 43;
+
+  return (
+    <div className="metrics-grid">
+      <div className="metric-block" style={{ "--m-color": "#00f5ff" } as React.CSSProperties}>
+        <div className="metric-ref">TABLE 1 // ROW A // TRUST ACCURACY</div>
+        <div className="metric-value">{trustAcc}<span className="metric-unit">%</span></div>
+        <div className="metric-label">Trust Accuracy</div>
+        <div className="metric-sub">
+          Correct trust assignment rate against ground-truth agent labels across all evaluation episodes.
+        </div>
+        <div className="metric-bar-wrap">
+          <div className="metric-bar-bg">
+            <div className="metric-bar-fill" style={{ width: `${trustAcc}%` }} />
+          </div>
+          <div className="metric-bar-label">
+            <span>BASELINE: {baselineTrust}%</span>
+            <span>SENTINEL: {trustAcc}%</span>
+          </div>
+        </div>
+      </div>
+
+      <div className="metric-block" style={{ "--m-color": "#ff2d55" } as React.CSSProperties}>
+        <div className="metric-ref">TABLE 1 // ROW B // ADV DETECTION</div>
+        <div className="metric-value">{detectRate}<span className="metric-unit">%</span></div>
+        <div className="metric-label">Adversarial Detection Rate</div>
+        <div className="metric-sub">
+          Precision-recall F1 on Byzantine agent identification. False positive rate held below 5% threshold.
+        </div>
+        <div className="metric-bar-wrap">
+          <div className="metric-bar-bg">
+            <div className="metric-bar-fill" style={{ width: `${detectRate}%` }} />
+          </div>
+          <div className="metric-bar-label">
+            <span>BASELINE: {baselineDetect}%</span>
+            <span>SENTINEL: {detectRate}%</span>
+          </div>
+        </div>
+      </div>
+
+      <div className="metric-block" style={{ "--m-color": "#00ff88" } as React.CSSProperties}>
+        <div className="metric-ref">TABLE 2 // ROW C // POLICY GAIN</div>
+        <div className="metric-value">+{improvement}<span className="metric-unit">%</span></div>
+        <div className="metric-label">Policy Improvement</div>
+        <div className="metric-sub">
+          Cumulative episode return gain over heuristic baseline after convergence.
+        </div>
+        <div className="metric-bar-wrap">
+          <div className="metric-bar-bg">
+            <div className="metric-bar-fill" style={{ width: `${Math.min(100, 50 + improvement)}%` }} />
+          </div>
+          <div className="metric-bar-label">
+            <span>HEURISTIC</span>
+            <span>TRAINED RL</span>
+          </div>
+        </div>
+      </div>
+
+      <div className="metric-block" style={{ "--m-color": "#ffb800" } as React.CSSProperties}>
+        <div className="metric-ref">TABLE 2 // ROW D // FINAL SCORE</div>
+        <div className="metric-value">{avgScore}</div>
+        <div className="metric-label">Average Score</div>
+        <div className="metric-sub">
+          Mean normalized score across all tasks. Higher is better (range 0–1, boundary exclusive).
+        </div>
+        <div className="metric-bar-wrap">
+          <div className="metric-bar-bg">
+            <div className="metric-bar-fill" style={{ width: `${Number(avgScore) * 100}%` }} />
+          </div>
+          <div className="metric-bar-label">
+            <span>RANDOM: {random ? random.avg_score.toFixed(2) : "0.28"}</span>
+            <span>SENTINEL: {avgScore}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

ui/app/components/SimCanvas.tsx

@@ -0,0 +1,195 @@
+"use client";
+
+import { useRef, useEffect } from "react";
+
+type AgentData = { id: string; trust: number; type: string };
+
+type Props = {
+  trustSnapshot: Record<string, number>;
+  adversarialAgents: Set<string>;
+  activeSpec: string | null;
+};
+
+const AGENT_ANGLES = [0, 72, 144, 216, 288];
+const COLORS: Record<string, string> = {
+  orch: "#00F5FF", normal: "#00FF88", degraded: "#FFB800", adversarial: "#FF2D55",
+};
+
+function hexToRgb(hex: string) {
+  if (hex === "#00F5FF") return "0,245,255";
+  if (hex === "#00FF88") return "0,255,136";
+  if (hex === "#FFB800") return "255,184,0";
+  if (hex === "#FF2D55") return "255,45,85";
+  return "0,200,255";
+}
+
+function agentType(id: string, trust: number, isAdv: boolean): string {
+  if (isAdv) return "adversarial";
+  if (trust < 0.4) return "degraded";
+  return "normal";
+}
+
+export default function SimCanvas({ trustSnapshot, adversarialAgents, activeSpec }: Props) {
+  const ref = useRef<HTMLCanvasElement>(null);
+  const dataRef = useRef({ trustSnapshot, adversarialAgents, activeSpec });
+
+  useEffect(() => {
+    dataRef.current = { trustSnapshot, adversarialAgents, activeSpec };
+  }, [trustSnapshot, adversarialAgents, activeSpec]);
+
+  useEffect(() => {
+    const canvas = ref.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    let W = 0, H = 0, tick = 0, animId = 0;
+    type Packet = { agentIdx: number; progress: number; dir: number };
+    let dataPackets: Packet[] = [];
+
+    function resize() {
+      W = canvas!.width = canvas!.offsetWidth;
+      H = canvas!.height = canvas!.offsetHeight;
+    }
+
+    function getPos(angle: number, cx: number, cy: number, r: number) {
+      const rad = ((angle - 90) * Math.PI) / 180;
+      return { x: cx + Math.cos(rad) * r, y: cy + Math.sin(rad) * r };
+    }
+
+    function draw() {
+      const { trustSnapshot: ts, adversarialAgents: advSet, activeSpec: active } = dataRef.current;
+      ctx!.clearRect(0, 0, W, H);
+      tick++;
+
+      const cx = W / 2, cy = H / 2;
+      const outerR = Math.min(W, H) * 0.35;
+      const orchR = 30, agentR = 18;
+
+      const agents: AgentData[] = ["S0", "S1", "S2", "S3", "S4"].map((id, i) => ({
+        id, trust: ts[id] ?? 0.5,
+        type: i === 0 ? "orch" : agentType(id, ts[id] ?? 0.5, advSet.has(id)),
+      }));
+
+      // Grid
+      ctx!.strokeStyle = "rgba(0,100,200,0.04)";
+      ctx!.lineWidth = 0.5;
+      for (let x = 0; x < W; x += 40) { ctx!.beginPath(); ctx!.moveTo(x, 0); ctx!.lineTo(x, H); ctx!.stroke(); }
+      for (let y = 0; y < H; y += 40) { ctx!.beginPath(); ctx!.moveTo(0, y); ctx!.lineTo(W, y); ctx!.stroke(); }
+
+      // Orbit ring
+      ctx!.beginPath(); ctx!.arc(cx, cy, outerR, 0, Math.PI * 2);
+      ctx!.strokeStyle = "rgba(0,200,255,0.06)"; ctx!.lineWidth = 1;
+      ctx!.setLineDash([4, 8]); ctx!.stroke(); ctx!.setLineDash([]);
+
+      // Scanning ring
+      const scanAngle = (tick * 0.02) % (Math.PI * 2);
+      ctx!.save(); ctx!.translate(cx, cy); ctx!.rotate(scanAngle);
+      const scanArc = ctx!.createLinearGradient(-outerR, 0, outerR, 0);
+      scanArc.addColorStop(0, "rgba(0,200,255,0)");
+      scanArc.addColorStop(1, "rgba(0,200,255,0.08)");
+      ctx!.beginPath(); ctx!.moveTo(0, 0); ctx!.arc(0, 0, outerR, -0.4, 0); ctx!.closePath();
+      ctx!.fillStyle = scanArc; ctx!.fill(); ctx!.restore();
+
+      // Connections from orch to agents
+      const orchPos = { x: cx, y: cy };
+      agents.slice(1).forEach((a, i) => {
+        const pos = getPos(AGENT_ANGLES[i + 1], cx, cy, outerR);
+        const col = COLORS[a.type] || COLORS.normal;
+        const alpha = a.type === "adversarial" ? 0.12 : a.trust * 0.35;
+        const isDash = a.type === "adversarial";
+        if (isDash) ctx!.setLineDash([4, 6]); else ctx!.setLineDash([]);
+        ctx!.beginPath(); ctx!.moveTo(orchPos.x, orchPos.y); ctx!.lineTo(pos.x, pos.y);
+        ctx!.strokeStyle = `rgba(${hexToRgb(col)},${alpha})`;
+        ctx!.lineWidth = a.trust * 2; ctx!.stroke(); ctx!.setLineDash([]);
+      });
+
+      // Data packets
+      if (tick % 20 === 0) {
+        const ai = Math.floor(Math.random() * 4) + 1;
+        dataPackets.push({ agentIdx: ai, progress: 0, dir: Math.random() > 0.5 ? 1 : -1 });
+      }
+      dataPackets = dataPackets.filter(p => p.progress <= 1);
+      dataPackets.forEach(p => {
+        p.progress += 0.025;
+        const a = agents[p.agentIdx];
+        const pos = getPos(AGENT_ANGLES[p.agentIdx], cx, cy, outerR);
+        const t = p.progress;
+        const px = orchPos.x + (pos.x - orchPos.x) * (p.dir > 0 ? t : 1 - t);
+        const py = orchPos.y + (pos.y - orchPos.y) * (p.dir > 0 ? t : 1 - t);
+        const col = COLORS[a.type] || COLORS.normal;
+        ctx!.beginPath(); ctx!.arc(px, py, 3, 0, Math.PI * 2); ctx!.fillStyle = col; ctx!.fill();
+        const g = ctx!.createRadialGradient(px, py, 0, px, py, 8);
+        g.addColorStop(0, col); g.addColorStop(1, "transparent");
+        ctx!.beginPath(); ctx!.arc(px, py, 8, 0, Math.PI * 2); ctx!.fillStyle = g; ctx!.fill();
+      });
+
+      // Outer agents
+      agents.slice(1).forEach((a, i) => {
+        const pos = getPos(AGENT_ANGLES[i + 1], cx, cy, outerR);
+        const col = COLORS[a.type] || COLORS.normal;
+        const pulse = 0.7 + 0.3 * Math.sin(tick * 0.05 + AGENT_ANGLES[i + 1]);
+        const isActive = active === a.id;
+
+        // Glow
+        const g = ctx!.createRadialGradient(pos.x, pos.y, 0, pos.x, pos.y, agentR * 2.5);
+        g.addColorStop(0, `rgba(${hexToRgb(col)},${(isActive ? 0.35 : 0.2) * pulse})`);
+        g.addColorStop(1, "transparent");
+        ctx!.beginPath(); ctx!.arc(pos.x, pos.y, agentR * 2.5, 0, Math.PI * 2);
+        ctx!.fillStyle = g; ctx!.fill();
+
+        // Node circle
+        ctx!.beginPath(); ctx!.arc(pos.x, pos.y, agentR, 0, Math.PI * 2);
+        ctx!.fillStyle = `rgba(${hexToRgb(col)},0.1)`; ctx!.fill();
+        ctx!.strokeStyle = `rgba(${hexToRgb(col)},${0.6 * pulse})`;
+        ctx!.lineWidth = isActive ? 2.5 : 1.5; ctx!.stroke();
+
+        // Adversarial warning ring
+        if (a.type === "adversarial") {
+          ctx!.beginPath();
+          ctx!.arc(pos.x, pos.y, agentR + 6 + Math.sin(tick * 0.1) * 3, 0, Math.PI * 2);
+          ctx!.strokeStyle = `rgba(255,45,85,${0.3 * pulse})`;
+          ctx!.lineWidth = 1; ctx!.setLineDash([3, 4]); ctx!.stroke(); ctx!.setLineDash([]);
+        }
+
+        // Labels
+        ctx!.font = '9px "Share Tech Mono"'; ctx!.fillStyle = col; ctx!.textAlign = "center";
+        ctx!.fillText(a.id, pos.x, pos.y - agentR - 8);
+        ctx!.fillStyle = "rgba(232,244,255,0.3)";
+        ctx!.fillText(a.trust.toFixed(2), pos.x, pos.y + 4);
+      });
+
+      // Orchestrator
+      const orchPulse = 0.7 + 0.3 * Math.sin(tick * 0.04);
+      const orchG = ctx!.createRadialGradient(cx, cy, 0, cx, cy, orchR * 3);
+      orchG.addColorStop(0, `rgba(0,245,255,${0.15 * orchPulse})`);
+      orchG.addColorStop(1, "transparent");
+      ctx!.beginPath(); ctx!.arc(cx, cy, orchR * 3, 0, Math.PI * 2);
+      ctx!.fillStyle = orchG; ctx!.fill();
+
+      ctx!.beginPath(); ctx!.arc(cx, cy, orchR, 0, Math.PI * 2);
+      ctx!.fillStyle = "rgba(0,245,255,0.1)"; ctx!.fill();
+      ctx!.strokeStyle = `rgba(0,245,255,${0.8 * orchPulse})`;
+      ctx!.lineWidth = 2; ctx!.stroke();
+
+      ctx!.beginPath(); ctx!.arc(cx, cy, orchR * 0.6, 0, Math.PI * 2);
+      ctx!.strokeStyle = `rgba(0,245,255,${0.4 * orchPulse})`;
+      ctx!.lineWidth = 1; ctx!.stroke();
+
+      ctx!.font = 'bold 9px "Share Tech Mono"'; ctx!.fillStyle = "#00F5FF";
+      ctx!.textAlign = "center"; ctx!.fillText("S0", cx, cy - 4);
+      ctx!.font = '8px "Share Tech Mono"'; ctx!.fillStyle = "rgba(0,245,255,0.5)";
+      ctx!.fillText("ORCH", cx, cy + 8);
+
+      animId = requestAnimationFrame(draw);
+    }
+
+    const ro = new ResizeObserver(() => resize());
+    ro.observe(canvas.parentElement!);
+    resize(); draw();
+
+    return () => { cancelAnimationFrame(animId); ro.disconnect(); };
+  }, []);
+
+  return <canvas ref={ref} />;
+}

ui/app/components/SystemModules.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+type Props = { running: boolean; done: boolean; adversarialCount: number };
+
+export default function SystemModules({ running, done, adversarialCount }: Props) {
+  return (
+    <div className="cards-grid">
+      <div className="card" style={{ "--card-accent": "#00f5ff" } as React.CSSProperties}>
+        <div className="card-id">MOD-001 // ENVIRONMENT</div>
+        <div className="card-icon">
+          <svg viewBox="0 0 40 40" fill="none"><rect x="2" y="2" width="16" height="16" stroke="#00F5FF" strokeWidth="1" opacity="0.6"/><rect x="22" y="2" width="16" height="16" stroke="#00F5FF" strokeWidth="1" opacity="0.3"/><rect x="2" y="22" width="16" height="16" stroke="#00F5FF" strokeWidth="1" opacity="0.3"/><rect x="22" y="22" width="16" height="16" stroke="#00F5FF" strokeWidth="1" opacity="0.6"/><line x1="18" y1="10" x2="22" y2="10" stroke="#00F5FF" strokeWidth="1"/><line x1="10" y1="18" x2="10" y2="22" stroke="#00F5FF" strokeWidth="1"/><circle cx="10" cy="10" r="2" fill="#00F5FF"/><circle cx="30" cy="30" r="2" fill="#00F5FF" opacity="0.5"/></svg>
+        </div>
+        <div className="card-title">Multi-Agent Environment</div>
+        <div className="card-body">
+          Discrete-time partially observable environment hosting N heterogeneous agents.
+          Supports configurable adversarial injection ratios and stochastic reward structures per episode.
+        </div>
+        <div className="card-footer">
+          <div className="card-status">
+            <div className="status-dot" style={running ? {} : { background: done ? "var(--amber)" : "var(--muted)", animation: "none" }} />
+            {running ? "RUNNING" : done ? "COMPLETE" : "IDLE"}
+          </div>
+          <div className="card-ver">gym v0.26.2</div>
+        </div>
+      </div>
+
+      <div className="card" style={{ "--card-accent": "#00ff88" } as React.CSSProperties}>
+        <div className="card-id">MOD-002 // TRUST ENGINE</div>
+        <div className="card-icon">
+          <svg viewBox="0 0 40 40" fill="none"><circle cx="20" cy="20" r="14" stroke="#00FF88" strokeWidth="1" strokeDasharray="4 2" opacity="0.5"/><circle cx="20" cy="20" r="8" stroke="#00FF88" strokeWidth="1" opacity="0.8"/><circle cx="20" cy="20" r="3" fill="#00FF88"/><line x1="20" y1="6" x2="20" y2="12" stroke="#00FF88" strokeWidth="1" opacity="0.5"/><line x1="20" y1="28" x2="20" y2="34" stroke="#00FF88" strokeWidth="1" opacity="0.5"/><line x1="6" y1="20" x2="12" y2="20" stroke="#00FF88" strokeWidth="1" opacity="0.5"/><line x1="28" y1="20" x2="34" y2="20" stroke="#00FF88" strokeWidth="1" opacity="0.5"/></svg>
+        </div>
+        <div className="card-title">Trust Calibration Engine</div>
+        <div className="card-body">
+          Bayesian trust scoring module that maintains per-agent belief distributions.
+          Updates posteriors using observed action-outcome consistency.
+        </div>
+        <div className="card-footer">
+          <div className="card-status">
+            <div className="status-dot" />
+            CALIBRATING
+          </div>
+          <div className="card-ver">TCE v1.1.4</div>
+        </div>
+      </div>
+
+      <div className="card" style={{ "--card-accent": "#ff2d55" } as React.CSSProperties}>
+        <div className="card-id">MOD-003 // ADV DETECTION</div>
+        <div className="card-icon">
+          <svg viewBox="0 0 40 40" fill="none"><polygon points="20,4 36,32 4,32" stroke="#FF2D55" strokeWidth="1" fill="none" opacity="0.7"/><line x1="20" y1="14" x2="20" y2="24" stroke="#FF2D55" strokeWidth="1.5"/><circle cx="20" cy="28" r="1.5" fill="#FF2D55"/></svg>
+        </div>
+        <div className="card-title">Adversarial Detection Layer</div>
+        <div className="card-body">
+          Anomaly-based detector using temporal divergence scoring across agent action histories.
+          Flags Byzantine agents via KL-divergence threshold on expected vs observed policy distributions.
+        </div>
+        <div className="card-footer">
+          <div className="card-status" style={{ color: adversarialCount > 0 ? "var(--red)" : "var(--green)" }}>
+            <div className="status-dot" style={adversarialCount > 0 ? { background: "var(--red)" } : {}} />
+            {adversarialCount > 0 ? `${adversarialCount} THREAT${adversarialCount > 1 ? "S" : ""}` : "CLEAR"}
+          </div>
+          <div className="card-ver">ADL v2.0.1</div>
+        </div>
+      </div>
+
+      <div className="card" style={{ "--card-accent": "#ffb800" } as React.CSSProperties}>
+        <div className="card-id">MOD-004 // RL OPTIMIZER</div>
+        <div className="card-icon">
+          <svg viewBox="0 0 40 40" fill="none"><polyline points="4,32 10,20 16,26 22,14 28,18 36,6" stroke="#FFB800" strokeWidth="1.5" fill="none"/><circle cx="10" cy="20" r="2" fill="#FFB800" opacity="0.6"/><circle cx="22" cy="14" r="2" fill="#FFB800" opacity="0.6"/><circle cx="36" cy="6" r="2.5" fill="#FFB800"/><line x1="4" y1="35" x2="36" y2="35" stroke="#FFB800" strokeWidth="0.5" opacity="0.3"/><line x1="4" y1="35" x2="4" y2="4" stroke="#FFB800" strokeWidth="0.5" opacity="0.3"/></svg>
+        </div>
+        <div className="card-title">Reinforcement Learning Optimizer</div>
+        <div className="card-body">
+          Proximal Policy Optimization (PPO) with trust-weighted reward shaping.
+          Policy gradient updates incorporate adversarial penalty terms.
+        </div>
+        <div className="card-footer">
+          <div className="card-status" style={{ color: "var(--amber)" }}>
+            <div className="status-dot" style={{ background: "var(--amber)" }} />
+            TRAINING
+          </div>
+          <div className="card-ver">PPO v3.2.0</div>
+        </div>
+      </div>
+    </div>
+  );
+}

ui/app/globals.css

@@ -1,398 +1,414 @@
-@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;600;700;900&family=Space+Mono:wght@400;700&display=swap');
 
 :root {
-  --bg: #06080f;
-  --bg-s: rgba(12,17,30,.65);
-  --bg-e: rgba(22,30,52,.5);
-  --bg-card: linear-gradient(135deg,rgba(15,20,38,.8),rgba(10,14,26,.9));
-  --bdr: rgba(120,130,180,.08);
-  --bdr-s: rgba(120,130,180,.15);
-  --bdr-h: rgba(120,130,180,.25);
-  --ink: #eef2ff;
-  --ink2: #8b95b8;
-  --ink3: #565f7e;
-  --accent: #7c5cfc;
-  --accent2: #c084fc;
-  --accent3: #38bdf8;
-  --green: #34d399;
-  --red: #fb4e6a;
-  --amber: #fbbf24;
-  --indigo: #818cf8;
-  --glow-accent: rgba(124,92,252,.35);
-  --glow-green: rgba(52,211,153,.25);
-  --glow-red: rgba(251,78,106,.2);
-  --mono: 'JetBrains Mono',ui-monospace,monospace;
-  --sans: 'Inter',system-ui,sans-serif;
-  --display: 'Space Grotesk','Inter',system-ui,sans-serif;
-  --r: 20px;
-  --r-sm: 12px;
-  --r-xs: 8px;
+  --bg: #03060f;
+  --bg2: #060d1a;
+  --bg3: #0a1628;
+  --cyan: #00f5ff;
+  --blue: #0055ff;
+  --blue-dim: #0033aa;
+  --green: #00ff88;
+  --red: #ff2d55;
+  --amber: #ffb800;
+  --white: #e8f4ff;
+  --muted: #4a6080;
+  --glass: rgba(0, 200, 255, 0.04);
+  --glass-border: rgba(0, 200, 255, 0.12);
+  --glass-hover: rgba(0, 200, 255, 0.08);
+  --font-display: 'Orbitron', monospace;
+  --font-mono: 'Share Tech Mono', monospace;
+  --font-body: 'Space Mono', monospace;
 }
 
-*{box-sizing:border-box;margin:0}
-html{background:var(--bg);scroll-behavior:smooth}
-body{
-  color:var(--ink);font-family:var(--sans);min-height:100vh;
-  background:
-    radial-gradient(ellipse 120% 80% at 50% -20%,rgba(124,92,252,.08),transparent 60%),
-    radial-gradient(ellipse 80% 60% at 0% 50%,rgba(56,189,248,.04),transparent),
-    radial-gradient(ellipse 60% 80% at 100% 80%,rgba(192,132,252,.04),transparent),
-    var(--bg);
-}
-button,select,input{font:inherit;color:inherit}
-
-/* ── animated bg ─────────────────────────────────────── */
-.grid-bg{
-  position:fixed;inset:0;pointer-events:none;z-index:0;
-  background-image:
-    radial-gradient(circle at 1px 1px,rgba(120,130,180,.06) 1px,transparent 0);
-  background-size:32px 32px;
-  mask-image:radial-gradient(ellipse 60% 50% at 50% 40%,black,transparent);
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+html { scroll-behavior: smooth; }
+body {
+  background: var(--bg);
+  color: var(--white);
+  font-family: var(--font-body);
+  font-size: 14px;
+  line-height: 1.7;
+  overflow-x: hidden;
 }
 
-/* ── glow orbs ───────────────────────────────────────── */
-.shell{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}
-.shell::before,.shell::after{
-  content:'';position:fixed;border-radius:50%;pointer-events:none;
-  filter:blur(100px);opacity:.4;z-index:0;
-}
-.shell::before{width:600px;height:600px;top:-200px;left:-100px;background:rgba(124,92,252,.15)}
-.shell::after{width:500px;height:500px;bottom:-150px;right:-100px;background:rgba(56,189,248,.1)}
+/* ── SCROLLBAR ── */
+::-webkit-scrollbar { width: 4px; }
+::-webkit-scrollbar-track { background: var(--bg); }
+::-webkit-scrollbar-thumb { background: var(--blue-dim); border-radius: 2px; }
+
+/* ── NAV ── */
+.nav-bar {
+  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 18px 48px;
+  background: rgba(3, 6, 15, 0.85);
+  backdrop-filter: blur(12px);
+  border-bottom: 1px solid rgba(0, 200, 255, 0.08);
+  overflow: hidden;
+}
+.nav-bar::before {
+  content: ""; position: absolute; inset: 0;
+  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 245, 255, 0.01) 2px, rgba(0, 245, 255, 0.01) 4px);
+  pointer-events: none; opacity: 0.5;
+}
+.nav-logo {
+  font-family: var(--font-display);
+  font-size: 15px; font-weight: 700;
+  letter-spacing: 0.35em; color: var(--cyan);
+  display: flex; align-items: center; gap: 10px;
+  animation: logo-flicker 10s linear infinite;
+}
+@keyframes logo-flicker {
+  0%, 95%, 100% { opacity: 1; }
+  96% { opacity: 0.7; }
+  97% { opacity: 1; }
+  98% { opacity: 0.8; }
+  99% { opacity: 1; }
+}
+.nav-logo-dot {
+  width: 8px; height: 8px;
+  background: var(--cyan); border-radius: 50%;
+  box-shadow: 0 0 10px var(--cyan);
+  animation: pulse-dot 2s ease-in-out infinite;
+}
+@keyframes pulse-dot {
+  0%, 100% { opacity: 1; box-shadow: 0 0 10px var(--cyan); }
+  50% { opacity: 0.4; box-shadow: 0 0 20px var(--cyan); }
+}
+.nav-links {
+  display: flex; gap: 36px; list-style: none;
+  font-family: var(--font-mono); font-size: 11px;
+  letter-spacing: 0.15em; color: var(--muted);
+}
+.nav-links a, .nav-links button {
+  color: inherit; text-decoration: none; background: none; border: none;
+  cursor: pointer; font: inherit; letter-spacing: inherit;
+  transition: color 0.2s;
+}
+.nav-links a:hover, .nav-links button:hover { color: var(--cyan); }
+.nav-badge {
+  font-family: var(--font-mono); font-size: 10px;
+  letter-spacing: 0.12em; color: var(--green);
+  border: 1px solid rgba(0, 255, 136, 0.3);
+  padding: 4px 12px; border-radius: 2px;
+  background: rgba(0, 255, 136, 0.06);
+  display: flex; align-items: center; gap: 6px;
+}
+.nav-badge-dot {
+  width: 5px; height: 5px; background: currentColor; border-radius: 50%;
+  box-shadow: 0 0 8px currentColor;
+  animation: pulse-badge 1.5s ease-in-out infinite;
+}
+.nav-badge.running { color: var(--cyan); border-color: rgba(0, 245, 255, 0.3); background: rgba(0, 245, 255, 0.06); }
+.nav-badge.complete { color: var(--amber); border-color: rgba(255, 184, 0, 0.3); background: rgba(255, 184, 0, 0.06); }
 
-/* ── header ──────────────────────────────────────────── */
-.hdr{
-  position:sticky;top:0;z-index:50;height:60px;padding:0 28px;
-  display:flex;align-items:center;gap:24px;
-  background:rgba(6,8,15,.7);backdrop-filter:blur(24px) saturate(1.6);
-  border-bottom:1px solid var(--bdr);
-}
-.hdr-brand{
-  font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:-.03em;
-  background:linear-gradient(135deg,#7c5cfc,#38bdf8);
-  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
-  flex-shrink:0;
-}
-.hdr-nav{display:flex;gap:2px;margin-left:20px}
-.hdr-nav button{
-  height:34px;border-radius:8px;border:1px solid transparent;padding:0 14px;
-  background:transparent;cursor:pointer;font-size:13px;font-weight:500;
-  color:var(--ink3);transition:all .2s;
-}
-.hdr-nav button:hover{color:var(--ink);background:rgba(124,92,252,.06)}
-.hdr-nav button.on{
-  color:var(--ink);
-  background:linear-gradient(135deg,rgba(124,92,252,.12),rgba(56,189,248,.06));
-  border-color:rgba(124,92,252,.2);
-  box-shadow:0 0 12px rgba(124,92,252,.1);
-}
-.hdr-controls{margin-left:auto;display:flex;gap:8px;align-items:center;flex-shrink:0}
-.hdr-pill{
-  display:flex;align-items:center;gap:6px;
-  background:rgba(12,17,30,.6);border:1px solid var(--bdr);
-  border-radius:var(--r-xs);padding:6px 10px;
-}
-.hdr-pill label{font-size:10px;color:var(--ink3);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
-.hdr-pill select,.hdr-pill input{background:transparent;border:0;outline:none;width:56px;font-size:13px;font-weight:600}
-.hdr-pill select{width:70px}
+/* ── HERO ── */
+.hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 120px 48px 80px; overflow: hidden; }
+.hero-scanline { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.04) 2px, rgba(0,0,0,0.04) 4px); }
+.hero-canvas-wrap { position: absolute; inset: 0; z-index: 0; opacity: 0.55; }
+.hero-canvas-wrap canvas { display: block; width: 100%; height: 100%; }
+.hero-content { position: relative; z-index: 2; max-width: 760px; }
 
-/* ── buttons ─────────────────────────────────────────── */
-.btn{
-  height:40px;border-radius:var(--r-sm);padding:0 18px;
-  border:1px solid var(--bdr-s);cursor:pointer;font-size:13px;font-weight:600;
-  display:inline-flex;align-items:center;gap:8px;transition:all .2s;
-  background:rgba(12,17,30,.5);
-}
-.btn:hover{border-color:var(--bdr-h);transform:translateY(-1px);box-shadow:0 4px 20px rgba(0,0,0,.3)}
-.btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
-.btn-primary{
-  background:linear-gradient(135deg,rgba(124,92,252,.3),rgba(56,189,248,.12));
-  border-color:rgba(124,92,252,.3);
-  box-shadow:0 0 20px rgba(124,92,252,.08);
-}
-.btn-primary:hover{box-shadow:0 0 30px rgba(124,92,252,.2);border-color:rgba(124,92,252,.5)}
-.btn-danger{border-color:rgba(251,78,106,.3);color:var(--red)}
-.btn-lg{height:52px;padding:0 28px;font-size:15px;border-radius:14px;font-family:var(--display)}
-.btn-block{width:100%}
-.btn-ghost{border-color:transparent;background:transparent}
-.btn-ghost:hover{background:rgba(124,92,252,.06)}
-.btn-glow{
-  position:relative;overflow:hidden;
-}
-.btn-glow::before{
-  content:'';position:absolute;inset:-2px;border-radius:inherit;
-  background:linear-gradient(135deg,#7c5cfc,#38bdf8,#c084fc);opacity:0;
-  transition:opacity .3s;z-index:-1;filter:blur(8px);
-}
-.btn-glow:hover::before{opacity:.4}
+.hero-tag {
+  font-family: var(--font-mono); font-size: 10px;
+  letter-spacing: 0.3em; color: var(--cyan);
+  margin-bottom: 24px; display: flex; align-items: center; gap: 10px;
+}
+.hero-tag::before { content: ''; display: block; width: 32px; height: 1px; background: var(--cyan); opacity: 0.6; }
 
-/* ── panel ────────────────��──────────────────────────── */
-.panel{
-  background:var(--bg-card);
-  border:1px solid var(--bdr);
-  border-radius:var(--r);padding:24px;
-  backdrop-filter:blur(16px);
-  box-shadow:0 8px 40px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.03);
-  position:relative;overflow:hidden;
-}
-.panel::before{
-  content:'';position:absolute;top:0;left:0;right:0;height:1px;
-  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);
-}
-.panel-head{margin-bottom:18px}
-.panel-eyebrow{
-  font-size:10px;text-transform:uppercase;letter-spacing:.14em;
-  color:var(--accent);font-weight:700;margin-bottom:6px;
-  font-family:var(--mono);
-}
-.panel-title{font-size:20px;font-weight:700;font-family:var(--display);letter-spacing:-.02em}
+.hero h1 {
+  font-family: var(--font-display);
+  font-size: clamp(32px, 5vw, 58px);
+  font-weight: 900; line-height: 1.1;
+  letter-spacing: -0.01em; color: var(--white);
+  margin-bottom: 24px;
+}
+.hero h1 .accent { color: var(--cyan); }
+.hero h1 .accent-red { color: var(--red); }
 
-/* ── main ────────────────────────────────────────────── */
-.main{flex:1;width:min(1440px,100%);margin:0 auto;padding:24px 28px 80px;position:relative;z-index:1}
+.hero-sub {
+  font-family: var(--font-body); font-size: 14px; line-height: 1.9;
+  color: rgba(232, 244, 255, 0.55);
+  max-width: 560px; margin-bottom: 44px;
+}
 
-/* ══════════════════════════════════════════════════════
-   LANDING
-   ══════════════════════════════════════════════════════ */
-.land{display:grid;gap:40px}
-.land-hero{text-align:center;padding:80px 20px 48px;position:relative}
-.land-hero h1{
-  font-family:var(--display);font-size:clamp(40px,7vw,72px);font-weight:700;
-  line-height:.95;letter-spacing:-.04em;margin-bottom:20px;
-}
-.land-hero h1 span{
-  background:linear-gradient(135deg,#7c5cfc 0%,#38bdf8 50%,#34d399 100%);
-  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
-}
-.land-hero p{
-  max-width:580px;margin:0 auto 36px;font-size:16px;line-height:1.7;color:var(--ink2);
-}
-.land-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
+.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }
 
-/* score strip */
-.score-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:780px;margin:0 auto}
-.score-card{text-align:center;padding:24px 16px;position:relative}
-.score-card .lbl{font-size:10px;color:var(--ink3);text-transform:uppercase;letter-spacing:.12em;font-weight:600;font-family:var(--mono)}
-.score-card .val{font-size:32px;font-weight:700;margin-top:8px;font-family:var(--mono);letter-spacing:-.02em}
-.score-card.g .val{color:var(--green);text-shadow:0 0 20px var(--glow-green)}
-.score-card.a .val{color:var(--indigo);text-shadow:0 0 20px var(--glow-accent)}
-.score-card.r .val{color:var(--red);text-shadow:0 0 20px var(--glow-red)}
-.score-card.w .val{color:var(--amber)}
+.btn-primary {
+  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em;
+  padding: 14px 32px; background: var(--cyan); color: #03060f;
+  border: none; cursor: pointer; font-weight: 700; text-transform: uppercase;
+  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
+  transition: all 0.2s; text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
+}
+.btn-primary:hover { background: #fff; box-shadow: 0 0 30px rgba(0, 245, 255, 0.5); }
+.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
 
-/* before / after */
-.ba-section{max-width:920px;margin:0 auto}
-.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
-.ba-card{padding:28px;position:relative}
-.ba-card.before{border-color:rgba(251,78,106,.15)}
-.ba-card.before::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--red),var(--amber))}
-.ba-card.after{border-color:rgba(52,211,153,.15)}
-.ba-card.after::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--green),var(--accent3))}
-.ba-tag{
-  display:inline-flex;align-items:center;gap:6px;
-  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
-  padding:5px 12px;border-radius:6px;margin-bottom:14px;font-family:var(--mono);
-}
-.ba-card.before .ba-tag{background:rgba(251,78,106,.1);color:var(--red)}
-.ba-card.after .ba-tag{background:rgba(52,211,153,.1);color:var(--green)}
-.ba-card h3{font-size:18px;margin-bottom:14px;font-family:var(--display)}
-.ba-steps{display:grid;gap:8px}
-.ba-step{
-  font-size:13px;color:var(--ink2);line-height:1.5;padding:12px 14px;
-  border-radius:var(--r-xs);background:rgba(0,0,0,.25);
-  display:flex;align-items:flex-start;gap:10px;
-  border:1px solid rgba(255,255,255,.02);
-}
-.ba-step .num{
-  flex-shrink:0;width:22px;height:22px;border-radius:50%;font-size:11px;font-weight:700;
-  display:grid;place-items:center;
-}
-.ba-card.before .ba-step .num{background:rgba(251,78,106,.15);color:var(--red)}
-.ba-card.after .ba-step .num{background:rgba(52,211,153,.15);color:var(--green)}
-.ba-score{font-family:var(--mono);font-size:40px;font-weight:700;margin-top:20px}
-.ba-card.before .ba-score{color:var(--red);text-shadow:0 0 30px var(--glow-red)}
-.ba-card.after .ba-score{color:var(--green);text-shadow:0 0 30px var(--glow-green)}
+.btn-secondary {
+  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em;
+  padding: 13px 32px; background: transparent; color: var(--cyan);
+  border: 1px solid rgba(0, 245, 255, 0.35); cursor: pointer; text-transform: uppercase;
+  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
+  transition: all 0.2s; text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
+}
+.btn-secondary:hover { background: rgba(0, 245, 255, 0.08); border-color: var(--cyan); }
 
-/* architecture */
-.arch-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:920px;margin:0 auto}
-.arch-card{padding:24px;transition:all .3s}
-.arch-card:hover{border-color:rgba(124,92,252,.2);transform:translateY(-2px);box-shadow:0 8px 40px rgba(124,92,252,.08)}
-.arch-card svg{color:var(--accent);margin-bottom:12px}
-.arch-card h4{font-size:15px;margin-bottom:8px;font-family:var(--display)}
-.arch-card p{font-size:12px;color:var(--ink2);line-height:1.6}
+.btn-sm-ctrl {
+  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.15em;
+  padding: 6px 14px; background: transparent; color: var(--cyan);
+  border: 1px solid rgba(0, 245, 255, 0.2); cursor: pointer; text-transform: uppercase;
+  transition: all 0.2s;
+}
+.btn-sm-ctrl:hover { background: rgba(0, 245, 255, 0.08); border-color: var(--cyan); }
+.btn-sm-ctrl:disabled { opacity: 0.3; cursor: not-allowed; }
+.btn-sm-ctrl.active { background: rgba(0, 245, 255, 0.12); border-color: var(--cyan); }
+.btn-sm-ctrl.danger { color: var(--red); border-color: rgba(255, 45, 85, 0.3); }
+.btn-sm-ctrl.danger:hover { background: rgba(255, 45, 85, 0.08); }
 
-/* evidence chart gallery */
-.chart-section{max-width:1180px;margin:0 auto}
-.chart-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
-.chart-card{
-  display:flex;flex-direction:column;gap:14px;text-decoration:none;color:inherit;
-  padding:16px;transition:all .25s;
-}
-.chart-card:hover{border-color:rgba(56,189,248,.24);transform:translateY(-2px)}
-.chart-meta{display:flex;gap:10px;align-items:flex-start;min-height:64px}
-.chart-meta svg{color:var(--accent3);flex-shrink:0;margin-top:2px}
-.chart-meta h4{font-size:14px;font-family:var(--display);margin-bottom:5px}
-.chart-meta p{font-size:12px;line-height:1.45;color:var(--ink2)}
-.chart-card img{
-  display:block;width:100%;aspect-ratio:5/3;object-fit:cover;
-  border-radius:10px;border:1px solid rgba(255,255,255,.06);
-  background:#f8fafc;
+.hero-stats {
+  position: absolute; right: 48px; bottom: 80px; z-index: 2;
+  display: flex; flex-direction: column; gap: 20px; text-align: right;
+}
+.hero-stat-item { font-family: var(--font-mono); }
+.hero-stat-num {
+  font-family: var(--font-display); font-size: 26px; font-weight: 700;
+  color: var(--cyan); line-height: 1;
+  text-shadow: 0 0 20px rgba(0, 245, 255, 0.4);
+}
+.hero-stat-label {
+  font-size: 9px; letter-spacing: 0.2em;
+  color: var(--muted); text-transform: uppercase;
 }
 
-/* ══════════════════════════════════════════════════════
-   MISSION CONTROL
-   ══════════════════════════════════════════════════════ */
-.mc{display:grid;grid-template-columns:1.1fr 0.9fr;gap:18px}
-.mc-left,.mc-right{display:grid;gap:18px;align-content:start}
-
-/* specialist network */
-.net{position:relative;aspect-ratio:1.1;max-height:420px;margin:0 auto;width:100%}
-.net-svg{position:absolute;inset:0;width:100%;height:100%}
-.net-line{stroke:rgba(120,130,180,.1);stroke-width:1;transition:all .4s}
-.net-line.active{stroke:var(--accent);stroke-width:2;filter:drop-shadow(0 0 8px var(--glow-accent))}
-.net-node{
-  position:absolute;transform:translate(-50%,-50%);
-  border-radius:16px;padding:12px 16px;text-align:center;min-width:76px;
-  border:1px solid var(--bdr);background:var(--bg-card);
-  backdrop-filter:blur(12px);transition:all .3s;cursor:default;
-}
-.net-node.orch{
-  min-width:110px;z-index:2;
-  border-color:rgba(124,92,252,.25);
-  background:linear-gradient(135deg,rgba(124,92,252,.15),rgba(56,189,248,.06));
-  box-shadow:0 0 30px rgba(124,92,252,.1);
-}
-.net-node.active{
-  border-color:rgba(124,92,252,.5);
-  box-shadow:0 0 24px var(--glow-accent),inset 0 0 20px rgba(124,92,252,.05);
-}
-.net-node.danger{border-color:rgba(251,78,106,.35);box-shadow:0 0 20px var(--glow-red)}
-.net-node .id{font-weight:700;font-size:14px;font-family:var(--display)}
-.net-node .trust{font-family:var(--mono);font-size:12px;color:var(--ink2);margin-top:3px}
-.net-node .delta{font-family:var(--mono);font-size:10px;margin-top:2px}
-.delta-up{color:var(--green)}
-.delta-down{color:var(--red)}
+/* ── SECTION SHARED ── */
+.section-block { padding: 100px 48px; position: relative; }
+.section-block.alt-bg { background: var(--bg2); }
+.section-label {
+  font-family: var(--font-mono); font-size: 9px;
+  letter-spacing: 0.35em; color: var(--muted); text-transform: uppercase;
+  margin-bottom: 12px; display: flex; align-items: center; gap: 12px;
+}
+.section-label::after { content: ''; flex: 1; max-width: 60px; height: 1px; background: var(--muted); opacity: 0.4; }
+.section-title {
+  font-family: var(--font-display);
+  font-size: clamp(22px, 3vw, 34px);
+  font-weight: 700; color: var(--white);
+  margin-bottom: 16px; letter-spacing: 0.02em;
+}
+.section-desc {
+  font-size: 13px; color: rgba(232, 244, 255, 0.4);
+  max-width: 480px; line-height: 1.8; margin-bottom: 60px;
+}
 
-/* trust timeline */
-.tl{display:grid;gap:12px}
-.tl-row{display:grid;grid-template-columns:40px 1fr 54px 56px;align-items:center;gap:10px}
-.tl-id{font-weight:700;font-size:14px;font-family:var(--display)}
-.tl-track{height:8px;border-radius:99px;background:rgba(255,255,255,.04);overflow:hidden;border:1px solid rgba(255,255,255,.03)}
-.tl-fill{height:100%;border-radius:inherit;transition:width .5s cubic-bezier(.34,1.56,.64,1)}
-.tl-val{font-family:var(--mono);font-size:13px;font-weight:600;text-align:right}
-.tl-delta{font-family:var(--mono);font-size:11px;text-align:right}
+/* ── DIVIDER ── */
+.divider { width: calc(100% - 96px); height: 1px; background: linear-gradient(90deg, transparent, rgba(0, 200, 255, 0.15), transparent); margin: 0 48px; }
 
-/* mission briefing */
-.brief-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px}
-.brief-stat{padding:14px;border-radius:var(--r-sm);background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.02)}
-.brief-stat .lbl{font-size:10px;color:var(--ink3);text-transform:uppercase;letter-spacing:.1em;font-weight:600;font-family:var(--mono)}
-.brief-stat .val{font-size:20px;font-weight:700;margin-top:6px;font-family:var(--mono)}
-.brief-subtask{padding:16px;border-radius:var(--r-sm);background:rgba(0,0,0,.15);margin-top:12px;border:1px solid rgba(255,255,255,.02)}
-.brief-subtask .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
-.brief-subtask .top span{font-size:10px;color:var(--ink3);text-transform:uppercase;font-family:var(--mono);font-weight:600}
-.brief-subtask p{font-size:13px;color:var(--ink2);line-height:1.6}
+/* ── FEATURE CARDS ── */
+.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2px; }
+.card {
+  background: var(--glass); border: 1px solid var(--glass-border);
+  padding: 32px 28px; position: relative; overflow: hidden;
+  transition: border-color 0.3s, background 0.3s;
+}
+.card::before {
+  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
+  background: linear-gradient(90deg, transparent, var(--card-accent, var(--cyan)), transparent);
+  opacity: 0; transition: opacity 0.3s;
+}
+.card:hover { background: var(--glass-hover); border-color: rgba(0, 200, 255, 0.25); }
+.card:hover::before { opacity: 1; }
+.card-id { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.3em; color: var(--card-accent, var(--cyan)); margin-bottom: 20px; opacity: 0.7; }
+.card-icon { width: 40px; height: 40px; margin-bottom: 20px; }
+.card-icon svg { width: 100%; height: 100%; }
+.card-title { font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; color: var(--white); margin-bottom: 12px; }
+.card-body { font-size: 12px; line-height: 1.8; color: rgba(232, 244, 255, 0.45); }
+.card-footer { margin-top: 24px; padding-top: 16px; border-top: 1px solid rgba(0, 200, 255, 0.08); display: flex; justify-content: space-between; align-items: center; }
+.card-status { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em; color: var(--green); display: flex; align-items: center; gap: 6px; }
+.status-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green); animation: pulse-dot 1.5s ease-in-out infinite; }
+.card-ver { font-family: var(--font-mono); font-size: 9px; color: var(--muted); }
 
-/* stakes gauge */
-.stakes{display:flex;align-items:center;gap:10px}
-.stakes-track{flex:1;height:6px;border-radius:99px;background:rgba(255,255,255,.04);overflow:hidden}
-.stakes-fill{height:100%;border-radius:inherit;transition:width .4s}
-.stakes-val{font-family:var(--mono);font-size:13px;font-weight:700}
-.stakes-warn{font-size:10px;font-weight:800;text-transform:uppercase;color:var(--red);letter-spacing:.06em;animation:pulse-warn 1.2s ease-in-out infinite}
-@keyframes pulse-warn{0%,100%{opacity:1}50%{opacity:.3}}
+/* ── SIMULATION ── */
+.sim-wrapper {
+  background: #020810;
+  border: 1px solid rgba(0, 200, 255, 0.14); border-radius: 2px; overflow: hidden;
+  box-shadow: 0 0 80px rgba(0, 80, 200, 0.08), inset 0 0 80px rgba(0, 0, 0, 0.5);
+}
+.sim-topbar {
+  background: rgba(0, 20, 50, 0.9);
+  border-bottom: 1px solid rgba(0, 200, 255, 0.1);
+  padding: 10px 20px; display: flex; align-items: center; gap: 16px;
+}
+.sim-dots { display: flex; gap: 6px; }
+.sim-dot { width: 10px; height: 10px; border-radius: 50%; }
+.sim-dot.r { background: #ff2d55; }
+.sim-dot.y { background: #ffb800; }
+.sim-dot.g { background: #00ff88; }
+.sim-topbar-title {
+  font-family: var(--font-mono); font-size: 10px;
+  letter-spacing: 0.2em; color: var(--muted); flex: 1; text-align: center;
+}
+.sim-topbar-badge {
+  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.15em;
+  color: var(--green); border: 1px solid rgba(0, 255, 136, 0.25);
+  padding: 2px 8px; animation: pulse-badge 2s ease-in-out infinite;
+}
+@keyframes pulse-badge { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
+.sim-body { display: grid; grid-template-columns: 240px 1fr 240px; min-height: 420px; }
+.sim-panel {
+  border-right: 1px solid rgba(0, 200, 255, 0.08); padding: 20px 16px;
+}
+.sim-panel:last-child { border-right: none; border-left: 1px solid rgba(0, 200, 255, 0.08); }
+.sim-panel-label {
+  font-family: var(--font-mono); font-size: 8px;
+  letter-spacing: 0.3em; color: var(--muted); text-transform: uppercase;
+  margin-bottom: 16px; padding-bottom: 8px;
+  border-bottom: 1px solid rgba(0, 200, 255, 0.08);
+}
+.sim-center { position: relative; overflow: hidden; }
+.sim-center canvas { display: block; width: 100%; height: 100%; }
 
-/* action center */
-.ac-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
-.ac-btn{
-  height:56px;border-radius:14px;font-size:14px;font-weight:600;
-  border:1px solid var(--bdr);background:var(--bg-card);
-  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;
-  transition:all .25s;color:var(--ink);font-family:var(--display);
-  position:relative;overflow:hidden;
-}
-.ac-btn:hover{border-color:var(--bdr-h);transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,0,0,.3)}
-.ac-btn:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none}
-.ac-btn.rec{
-  border-color:rgba(124,92,252,.3);
-  background:linear-gradient(135deg,rgba(124,92,252,.15),rgba(56,189,248,.06));
-  box-shadow:0 0 24px rgba(124,92,252,.08);
-}
-.ac-btn.rec::after{content:'★';font-size:10px;color:var(--accent)}
-.ac-auto{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
+/* agent rows inside sim */
+.agent-row { margin-bottom: 14px; position: relative; }
+.agent-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
+.agent-id { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.15em; }
+.agent-id.active { color: var(--cyan); }
+.agent-id.neutral { color: var(--muted); }
+.agent-id.adversarial { color: var(--red); }
+.agent-trust-val { font-family: var(--font-display); font-size: 11px; font-weight: 700; }
+.trust-bar-bg { height: 4px; background: rgba(255,255,255,0.06); border-radius: 2px; overflow: hidden; }
+.trust-bar-fill { height: 100%; border-radius: 2px; transition: width 0.8s ease; }
+.trust-bar-fill.high { background: linear-gradient(90deg, #00a870, var(--green)); box-shadow: 0 0 6px rgba(0,255,136,0.5); }
+.trust-bar-fill.mid { background: linear-gradient(90deg, #cc8800, var(--amber)); box-shadow: 0 0 6px rgba(255,184,0,0.4); }
+.trust-bar-fill.low { background: linear-gradient(90deg, #aa0020, var(--red)); box-shadow: 0 0 6px rgba(255,45,85,0.5); }
+.agent-state { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.15em; color: var(--muted); margin-top: 3px; }
 
-/* flight recorder */
-.fr-list{display:grid;gap:6px;max-height:340px;overflow-y:auto}
-.fr-list::-webkit-scrollbar{width:4px}
-.fr-list::-webkit-scrollbar-thumb{background:var(--bdr-s);border-radius:2px}
-.fr-row{
-  display:grid;grid-template-columns:36px 1fr auto;gap:10px;
-  padding:10px 14px;border-radius:var(--r-sm);align-items:center;
-  background:rgba(0,0,0,.15);font-size:13px;border:1px solid rgba(255,255,255,.02);
-  transition:background .2s;
-}
-.fr-row:hover{background:rgba(124,92,252,.04)}
-.fr-step{font-weight:700;color:var(--ink3);font-family:var(--mono);font-size:12px}
-.fr-action{font-weight:600;font-size:13px}
-.fr-summary{color:var(--ink2);font-size:11px;margin-top:2px}
-.fr-reward{font-family:var(--mono);font-weight:700;font-size:14px}
-.fr-reward.pos{color:var(--green);text-shadow:0 0 8px var(--glow-green)}
-.fr-reward.neg{color:var(--red)}
-.fr-icon{font-size:14px}
-.fr-toggle{font-size:11px;color:var(--ink3);cursor:pointer;background:none;border:none;padding:6px 0;margin-top:8px;font-family:var(--mono)}
-.fr-toggle:hover{color:var(--accent)}
+/* sim metrics */
+.sim-metric-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(0, 200, 255, 0.06); }
+.sim-metric-row:last-child { border-bottom: none; }
+.sim-metric-label { font-family: var(--font-mono); font-size: 9px; color: var(--muted); letter-spacing: 0.1em; }
+.sim-metric-val { font-family: var(--font-display); font-size: 13px; font-weight: 700; }
+.sim-metric-val.c { color: var(--cyan); }
+.sim-metric-val.g { color: var(--green); }
+.sim-metric-val.r { color: var(--red); }
+.sim-metric-val.a { color: var(--amber); }
 
-/* json viewer */
-.json-view{margin-top:10px;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--bdr)}
-.json-view pre{
-  margin:0;padding:14px;max-height:240px;overflow:auto;
-  font-family:var(--mono);font-size:11px;line-height:1.6;
-  color:var(--ink3);background:rgba(0,0,0,.3);
-}
+/* log entries */
+.log-entry {
+  font-family: var(--font-mono); font-size: 9px; line-height: 1.6;
+  color: rgba(232, 244, 255, 0.4); margin-bottom: 6px;
+  padding-left: 10px; border-left: 2px solid rgba(0, 200, 255, 0.1);
+  animation: log-slide 0.3s ease-out;
+}
+@keyframes log-slide { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
+.log-entry.warn { color: rgba(255, 184, 0, 0.7); border-left-color: var(--amber); }
+.log-entry.alert { color: rgba(255, 45, 85, 0.8); border-left-color: var(--red); }
+.log-entry.ok { color: rgba(0, 255, 136, 0.7); border-left-color: var(--green); }
+.log-time { color: var(--muted); margin-right: 6px; }
 
-/* ══════════════════════════════════════════════════════
-   JUDGE WIZARD
-   ══════════════════════════════════════════════════════ */
-.jw{max-width:840px;margin:0 auto;display:grid;gap:24px}
-.jw-progress{display:flex;gap:8px;align-items:center;justify-content:center;padding:8px 0}
-.jw-dot{width:12px;height:12px;border-radius:50%;background:rgba(120,130,180,.12);border:2px solid var(--bdr-s);transition:all .3s}
-.jw-dot.done{background:var(--green);border-color:var(--green);box-shadow:0 0 10px var(--glow-green)}
-.jw-dot.active{background:var(--accent);border-color:var(--accent);box-shadow:0 0 12px var(--glow-accent)}
-.jw-bar{width:48px;height:2px;background:var(--bdr);border-radius:1px;transition:background .3s}
-.jw-bar.done{background:var(--green)}
+.sim-footer {
+  background: rgba(0, 10, 25, 0.8);
+  border-top: 1px solid rgba(0, 200, 255, 0.08);
+  padding: 10px 20px; display: flex; gap: 32px;
+  font-family: var(--font-mono); font-size: 9px; color: var(--muted);
+  flex-wrap: wrap;
+}
+.sim-footer span { display: flex; align-items: center; gap: 6px; }
+.sim-footer b { color: var(--cyan); }
 
-.jw-stage{padding:40px 36px;text-align:center}
-.jw-step-num{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--accent);font-weight:700;margin-bottom:12px;font-family:var(--mono)}
-.jw-stage h2{font-size:32px;font-weight:700;margin-bottom:12px;font-family:var(--display);letter-spacing:-.02em}
-.jw-stage p{color:var(--ink2);font-size:15px;line-height:1.7;max-width:520px;margin:0 auto 28px}
+/* sim controls row */
+.sim-controls-row {
+  display: flex; gap: 8px; padding: 12px 20px;
+  background: rgba(0, 10, 25, 0.6);
+  border-top: 1px solid rgba(0, 200, 255, 0.06);
+  flex-wrap: wrap; align-items: center;
+}
+.sim-controls-row .ctrl-label {
+  font-family: var(--font-mono); font-size: 8px;
+  letter-spacing: 0.25em; color: var(--muted); text-transform: uppercase;
+  margin-right: 8px;
+}
 
-.jw-results{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:24px auto;max-width:500px}
-.jw-stat{padding:20px;border-radius:var(--r-sm);background:rgba(0,0,0,.2);text-align:center;border:1px solid rgba(255,255,255,.03)}
-.jw-stat .lbl{font-size:10px;color:var(--ink3);text-transform:uppercase;letter-spacing:.1em;font-weight:600;font-family:var(--mono)}
-.jw-stat .val{font-size:26px;font-weight:700;margin-top:6px;font-family:var(--mono)}
+/* ── ARCHITECTURE ── */
+.arch-flow { display: flex; align-items: center; justify-content: center; gap: 0; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 10px; }
+.arch-node {
+  min-width: 140px; border: 1px solid var(--node-color, rgba(0, 200, 255, 0.25));
+  padding: 20px 16px; background: rgba(0, 20, 50, 0.5);
+  position: relative; text-align: center;
+  transition: border-color 0.3s, background 0.3s;
+}
+.arch-node::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0, 200, 255, 0.03), transparent); }
+.arch-node:hover { background: rgba(0, 200, 255, 0.08); border-color: var(--cyan); }
+.arch-node-id { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.25em; color: var(--node-color, var(--muted)); margin-bottom: 8px; }
+.arch-node-name { font-family: var(--font-display); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; color: var(--white); margin-bottom: 8px; }
+.arch-node-desc { font-size: 9px; color: var(--muted); line-height: 1.5; }
+.arch-arrow { padding: 0 4px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
+.arch-arrow-line { width: 40px; height: 1px; background: linear-gradient(90deg, rgba(0, 200, 255, 0.2), rgba(0, 200, 255, 0.6)); position: relative; }
+.arch-arrow-line::after { content: '▶'; position: absolute; right: -5px; top: -5px; font-size: 10px; color: rgba(0, 200, 255, 0.6); }
+.arch-arrow-label { font-family: var(--font-mono); font-size: 8px; color: var(--muted); letter-spacing: 0.15em; white-space: nowrap; }
+.arch-code-loop {
+  margin-top: 40px; padding: 24px;
+  background: rgba(0, 20, 50, 0.5);
+  border: 1px solid rgba(0, 200, 255, 0.1);
+  font-family: var(--font-mono); font-size: 11px;
+  color: rgba(232, 244, 255, 0.4); line-height: 2;
+}
 
-.jw-nav{display:flex;gap:14px;justify-content:center;margin-top:20px}
+/* ── METRICS ── */
+.metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2px; }
+.metric-block {
+  background: var(--glass); border: 1px solid var(--glass-border);
+  padding: 36px 28px; position: relative; overflow: hidden;
+  transition: border-color 0.3s;
+}
+.metric-block::after {
+  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
+  background: linear-gradient(90deg, transparent, var(--m-color, var(--cyan)), transparent);
+  opacity: 0.5;
+}
+.metric-block:hover { border-color: rgba(0, 200, 255, 0.25); }
+.metric-ref { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.25em; color: var(--muted); margin-bottom: 20px; }
+.metric-value {
+  font-family: var(--font-display); font-size: 52px; font-weight: 900;
+  line-height: 1; color: var(--m-color, var(--cyan));
+  text-shadow: 0 0 40px rgba(0, 245, 255, 0.25);
+  margin-bottom: 8px; letter-spacing: -0.02em;
+}
+.metric-unit { font-family: var(--font-display); font-size: 24px; font-weight: 400; opacity: 0.5; vertical-align: super; }
+.metric-label { font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; color: var(--white); margin-bottom: 6px; }
+.metric-sub { font-size: 11px; color: var(--muted); line-height: 1.7; }
+.metric-bar-wrap { margin-top: 20px; }
+.metric-bar-bg { height: 2px; background: rgba(255,255,255,0.05); border-radius: 1px; overflow: hidden; }
+.metric-bar-fill { height: 100%; background: var(--m-color, var(--cyan)); border-radius: 1px; box-shadow: 0 0 8px var(--m-color, var(--cyan)); transition: width 1.2s ease; }
+.metric-bar-label { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 9px; color: var(--muted); margin-top: 6px; }
 
-.jw-compare{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:24px}
-.jw-compare-card{padding:28px;text-align:center}
-.jw-compare-card h4{font-size:14px;margin-bottom:10px;font-family:var(--display);color:var(--ink2)}
-.jw-compare-card .big{font-family:var(--mono);font-size:44px;font-weight:700}
-.jw-compare-card.bad .big{color:var(--red);text-shadow:0 0 30px var(--glow-red)}
-.jw-compare-card.good .big{color:var(--green);text-shadow:0 0 30px var(--glow-green)}
+/* ── FOOTER ── */
+.site-footer {
+  background: var(--bg2); border-top: 1px solid rgba(0, 200, 255, 0.08);
+  padding: 40px 48px; display: flex; justify-content: space-between;
+  align-items: center; flex-wrap: wrap; gap: 20px;
+}
+.footer-left { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
+.footer-left strong { color: var(--cyan); font-family: var(--font-display); letter-spacing: 0.2em; }
+.footer-right { font-family: var(--font-mono); font-size: 9px; color: rgba(74, 96, 128, 0.5); }
 
-/* judge inline trust + recorder */
-.jw-inline{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px;max-width:700px;margin-left:auto;margin-right:auto}
-.jw-inline .panel{padding:18px}
+/* ── ANIMATIONS ── */
+@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
+.anim-1 { animation: fadeInUp 0.8s ease both; }
+.anim-2 { animation: fadeInUp 0.8s 0.15s ease both; }
+.anim-3 { animation: fadeInUp 0.8s 0.3s ease both; }
+.anim-4 { animation: fadeInUp 0.8s 0.45s ease both; }
+.anim-5 { animation: fadeInUp 0.8s 0.6s ease both; }
 
-/* ── responsive ──────────────────────────────────────── */
-@media(max-width:1024px){
-  .mc,.ba-grid,.jw-inline{grid-template-columns:1fr}
-  .arch-grid{grid-template-columns:repeat(2,1fr)}
-  .chart-grid{grid-template-columns:repeat(2,1fr)}
-  .score-strip{grid-template-columns:repeat(2,1fr)}
-}
-@media(max-width:640px){
-  .hdr{padding:0 14px;gap:10px;height:52px}
-  .hdr-nav{display:none}
-  .main{padding:14px 14px 40px}
-  .arch-grid,.chart-grid,.ac-grid,.ac-auto,.brief-grid,.jw-results,.jw-compare{grid-template-columns:1fr}
-  .score-strip{grid-template-columns:1fr}
-  .land-hero{padding:48px 12px 32px}
-  .land-hero h1{font-size:36px}
-  .net{max-height:280px}
-}
+/* ── RESPONSIVE ── */
+@media (max-width: 900px) {
+  .nav-bar { padding: 12px 20px; }
+  .nav-links { display: none; }
+  .hero { padding: 100px 20px 60px; }
+  .hero-stats { position: static; flex-direction: row; gap: 24px; margin-top: 40px; text-align: left; }
+  .section-block { padding: 60px 20px; }
+  .sim-body { grid-template-columns: 1fr; }
+  .sim-panel { border-right: none; border-bottom: 1px solid rgba(0,200,255,0.08); }
+  .sim-panel:last-child { border-left: none; border-top: 1px solid rgba(0,200,255,0.08); }
+  .arch-flow { flex-wrap: wrap; justify-content: center; }
+  .divider { margin: 0 20px; width: calc(100% - 40px); }
+}

ui/app/hooks/useSentinel.ts

@@ -92,12 +92,12 @@ export function useSentinel() {
 
   /* load evaluation data once */
   useEffect(() => {
-    fetch("/assets/evaluation_results.json")
+    fetch(`${process.env.NEXT_PUBLIC_API_URL}/assets/evaluation_results.json`)
       .then((r) => r.json())
       .then(setEval)
       .catch(() => null);
 
-    fetch("/assets/trained_policy_replay.jsonl")
+    fetch(`${process.env.NEXT_PUBLIC_API_URL}/assets/trained_policy_replay.jsonl`)
       .then((r) => r.ok ? r.text() : "")
       .then((txt) => {
         const table = new Map<string, ReplayRow>();
@@ -151,7 +151,7 @@ export function useSentinel() {
       const payload = { task_type: t, seed: s };
       setLastReq({ method: "POST", path: "/reset", body: payload });
       try {
-        const res  = await fetch("/reset", {
+        const res  = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/reset`, {
           method: "POST",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify(payload),
@@ -203,7 +203,7 @@ export function useSentinel() {
       };
       setLastReq({ method: "POST", path: `/step?session_id=${sid}`, body: payload });
       try {
-        const res  = await fetch(`/step?session_id=${encodeURIComponent(sid)}`, {
+        const res  = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/step?session_id=${encodeURIComponent(sid)}`, {
           method: "POST",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify(payload),

ui/app/page.tsx

@@ -1,54 +1,236 @@
 "use client";
 
-import { useEffect } from "react";
+import { useEffect, useMemo } from "react";
 import { useSentinel } from "./hooks/useSentinel";
-import Landing from "./components/Landing";
-import MissionControl from "./components/MissionControl";
-import JudgeWizard from "./components/JudgeWizard";
-import type { ViewMode, TaskType } from "./lib/types";
-
-const TABS: { id: ViewMode; label: string }[] = [
-  { id: "landing", label: "Overview" },
-  { id: "mission", label: "Mission Control" },
-  { id: "judge",   label: "Judge Demo" },
-];
-
-const TASKS: { value: TaskType; label: string }[] = [
-  { value: "task1", label: "Task 1" },
-  { value: "task2", label: "Task 2" },
-  { value: "task3", label: "Task 3" },
-];
+import HeroCanvas from "./components/HeroCanvas";
+import SystemModules from "./components/SystemModules";
+import AgentTrustMonitor from "./components/AgentTrustMonitor";
+import SimCanvas from "./components/SimCanvas";
+import ExecutionLog from "./components/ExecutionLog";
+import ArchitecturePipeline from "./components/ArchitecturePipeline";
+import MetricsGrid from "./components/MetricsGrid";
+import type { TaskType, AutoPolicy } from "./lib/types";
 
 export default function Page() {
   const s = useSentinel();
 
-  /* auto-reset on first mount */
   useEffect(() => {
     void s.resetEpisode();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const adversarialAgents = useMemo(() => new Set(
+    s.events
+      .filter(e => e.outcome === "poisoned" || e.outcome === "blocked")
+      .map(e => e.specialist)
+      .filter((x): x is string => !!x)
+  ), [s.events]);
+
+  const totalReward = s.info?.total_reward ?? 0;
+
   return (
-    <div className="shell">
-      <div className="grid-bg" />
-
-      {/* header */}
-      <header className="hdr">
-        <span className="hdr-brand">SENTINEL</span>
-        <nav className="hdr-nav">
-          {TABS.map((t) => (
+    <>
+      {/* NAV */}
+      <nav className="nav-bar">
+        <div className="nav-logo">
+          <div className="nav-logo-dot" />
+          SENTINEL
+        </div>
+        <ul className="nav-links">
+          <li><a href="#overview">MODULES</a></li>
+          <li><a href="#simulation">SIMULATION</a></li>
+          <li><a href="#architecture">ARCHITECTURE</a></li>
+          <li><a href="#metrics">METRICS</a></li>
+        </ul>
+        <div className={`nav-badge ${s.running ? "running" : s.done ? "complete" : ""}`}>
+          <div className="nav-badge-dot" />
+          {s.running ? "RUNNING" : s.done ? "COMPLETE" : "SYSTEM ONLINE"}
+        </div>
+      </nav>
+
+      {/* HERO */}
+      <section className="hero" id="hero">
+        <HeroCanvas />
+        <div className="hero-scanline" />
+
+        <div className="hero-content">
+          <div className="hero-tag anim-1">
+            SYS.CORE // SENTINEL v2.4.1 // MARL FRAMEWORK
+          </div>
+          <h1 className="anim-2">
+            Train AI to <span className="accent">Trust</span> —<br />
+            and Survive <span className="accent-red">Adversaries</span>
+          </h1>
+          <p className="hero-sub anim-3">
+            A multi-agent reinforcement learning system where an orchestrator
+            learns to detect deception, assign trust, and optimize decisions in
+            real-time adversarial environments.
+          </p>
+          <div className="hero-ctas anim-4">
             <button
-              key={t.id}
-              className={s.view === t.id ? "on" : ""}
-              onClick={() => s.setView(t.id)}
+              className="btn-primary"
+              onClick={() => {
+                document.getElementById("simulation")?.scrollIntoView({ behavior: "smooth" });
+                setTimeout(() => {
+                  void s.resetEpisode().then(() => s.autoRun("trained" as AutoPolicy));
+                }, 400);
+              }}
+              disabled={s.running}
+            >
+              ▶ Launch Simulation
+            </button>
+            <button
+              className="btn-secondary"
+              onClick={() => document.getElementById("architecture")?.scrollIntoView({ behavior: "smooth" })}
             >
-              {t.label}
+              View System Architecture
             </button>
-          ))}
-        </nav>
-        <div className="hdr-controls">
-          <div className="hdr-pill">
-            <label>Task</label>
+          </div>
+        </div>
+
+        <div className="hero-stats anim-5">
+          <div className="hero-stat-item">
+            <div className="hero-stat-num">{s.observation?.available_specialists?.length ?? 5}</div>
+            <div className="hero-stat-label">Active Agents</div>
+          </div>
+          <div className="hero-stat-item">
+            <div className="hero-stat-num">
+              {s.proof?.trained
+                ? Math.round(s.proof.trained.avg_detection_rate * 100)
+                : 92
+              }<span style={{ fontSize: 14, opacity: 0.4 }}>%</span>
+            </div>
+            <div className="hero-stat-label">Trust Accuracy</div>
+          </div>
+          <div className="hero-stat-item">
+            <div className="hero-stat-num">
+              {s.proof?.trained
+                ? s.proof.trained.avg_score.toFixed(2)
+                : "0.91"
+              }
+            </div>
+            <div className="hero-stat-label">Avg Score</div>
+          </div>
+        </div>
+      </section>
+
+      <div className="divider" />
+
+      {/* SYSTEM MODULES */}
+      <section className="section-block alt-bg" id="overview">
+        <div className="section-label">01 // SYSTEM MODULES</div>
+        <h2 className="section-title">Core Architecture</h2>
+        <p className="section-desc">
+          Each module operates as an independent inference layer within the
+          trust-calibration pipeline. All components communicate via the
+          orchestration bus.
+        </p>
+        <SystemModules
+          running={s.running}
+          done={s.done}
+          adversarialCount={adversarialAgents.size}
+        />
+      </section>
+
+      <div className="divider" />
+
+      {/* SIMULATION */}
+      <section className="section-block" id="simulation">
+        <div className="section-label">02 // LIVE PREVIEW</div>
+        <h2 className="section-title">Simulation Control Panel</h2>
+        <p className="section-desc">
+          Real-time orchestrator view. Agent trust scores update per-step. Red
+          indicates flagged adversarial behaviour.
+        </p>
+
+        <div className="sim-wrapper">
+          <div className="sim-topbar">
+            <div className="sim-dots">
+              <div className="sim-dot r" />
+              <div className="sim-dot y" />
+              <div className="sim-dot g" />
+            </div>
+            <div className="sim-topbar-title">
+              SENTINEL // ORCHESTRATOR VIEW // TASK: {s.taskType?.toUpperCase() ?? "TASK3"} // STEP: {s.observation?.step_count ?? 0}
+            </div>
+            <div className="sim-topbar-badge">
+              ● {s.running ? "LIVE" : s.done ? "DONE" : "READY"}
+            </div>
+          </div>
+
+          <div className="sim-body">
+            {/* LEFT: AGENTS */}
+            <AgentTrustMonitor
+              observation={s.observation}
+              trustDeltas={s.trustDeltas}
+              activeSpec={s.activeSpec}
+              events={s.events}
+              running={s.running}
+              totalReward={totalReward}
+            />
+
+            {/* CENTER: CANVAS */}
+            <div className="sim-center">
+              <SimCanvas
+                trustSnapshot={s.observation?.trust_snapshot ?? {}}
+                adversarialAgents={adversarialAgents}
+                activeSpec={s.activeSpec}
+              />
+            </div>
+
+            {/* RIGHT: LOGS */}
+            <ExecutionLog
+              events={s.events}
+              observation={s.observation}
+              info={s.info}
+            />
+          </div>
+
+          {/* Controls Row */}
+          <div className="sim-controls-row">
+            <span className="ctrl-label">POLICY:</span>
+            <button className="btn-sm-ctrl" onClick={() => void s.autoRun("heuristic" as AutoPolicy)} disabled={s.running || s.done}>
+              ▶ HEURISTIC
+            </button>
+            <button className="btn-sm-ctrl" onClick={() => void s.autoRun("random" as AutoPolicy)} disabled={s.running || s.done}>
+              ⚄ RANDOM
+            </button>
+            <button className="btn-sm-ctrl" onClick={() => void s.autoRun("trained" as AutoPolicy)} disabled={s.running || s.done}>
+              🧠 TRAINED RL
+            </button>
+            {s.running && (
+              <button className="btn-sm-ctrl danger" onClick={s.stopAutoRun}>
+                ■ STOP
+              </button>
+            )}
+            <span className="ctrl-label" style={{ marginLeft: "auto" }}>ACTIONS:</span>
+            <button className="btn-sm-ctrl" onClick={() => void s.stepEpisode("delegate")} disabled={s.running || s.done}>
+              DELEGATE
+            </button>
+            <button className="btn-sm-ctrl" onClick={() => void s.stepEpisode("verify")} disabled={s.running || s.done}>
+              VERIFY
+            </button>
+            <button className="btn-sm-ctrl" onClick={() => void s.stepEpisode("skip")} disabled={s.running || s.done}>
+              SKIP
+            </button>
+          </div>
+
+          {/* Sim Footer */}
+          <div className="sim-footer">
+            <span>TASK: <b>{s.taskType?.toUpperCase() ?? "TASK3"}</b></span>
+            <span>SEED: <b>{s.seed}</b></span>
+            <span>ALGO: <b>DQN+TCE</b></span>
+            <span>SESSION: <b>{s.sessionId?.slice(0, 8) ?? "—"}</b></span>
+            <span style={{ marginLeft: "auto" }}>
+              <button
+                className="btn-sm-ctrl"
+                onClick={() => void s.resetEpisode()}
+                disabled={s.running}
+                style={{ fontSize: 8 }}
+              >
+                ⟳ RESET EPISODE
+              </button>
+            </span>
             <select
               value={s.taskType}
               onChange={(e) => {
@@ -56,71 +238,58 @@ export default function Page() {
                 s.setTaskType(next);
                 void s.resetEpisode(next, s.seed);
               }}
+              style={{
+                background: "transparent", border: "1px solid rgba(0,200,255,0.2)",
+                color: "var(--cyan)", fontFamily: "var(--font-mono)", fontSize: 9,
+                padding: "2px 6px", cursor: "pointer",
+              }}
             >
-              {TASKS.map((t) => (
-                <option key={t.value} value={t.value}>{t.label}</option>
-              ))}
+              <option value="task1" style={{ background: "var(--bg)" }}>TASK 1</option>
+              <option value="task2" style={{ background: "var(--bg)" }}>TASK 2</option>
+              <option value="task3" style={{ background: "var(--bg)" }}>TASK 3</option>
             </select>
           </div>
-          <div className="hdr-pill">
-            <label>Seed</label>
-            <input
-              type="number"
-              value={s.seed}
-              onChange={(e) => s.setSeed(Number(e.target.value || 0))}
-            />
-          </div>
-          <button className="btn" onClick={() => void s.resetEpisode()}>
-            Reset
-          </button>
-          <button className="btn btn-ghost" onClick={() => void s.swapProfiles()}>
-            Swap Profiles
-          </button>
         </div>
-      </header>
-
-      {/* content */}
-      <main className="main">
-        {s.view === "landing" && (
-          <Landing
-            proof={s.proof}
-            onEnterMission={() => s.setView("mission")}
-            onEnterJudge={() => s.setView("judge")}
-          />
-        )}
-
-        {s.view === "mission" && (
-          <MissionControl
-            observation={s.observation}
-            trustDeltas={s.trustDeltas}
-            activeSpec={s.activeSpec}
-            recommended={s.recommended}
-            score={s.info?.score}
-            detections={s.info?.adversarial_detections}
-            poisonings={s.info?.adversarial_poisonings}
-            events={s.events}
-            running={s.running}
-            done={s.done}
-            lastReq={s.lastReq}
-            lastRes={s.lastRes}
-            onStep={(action) => void s.stepEpisode(action)}
-            onAutoRun={(policy) => void s.autoRun(policy)}
-            onStop={s.stopAutoRun}
-          />
-        )}
-
-        {s.view === "judge" && (
-          <JudgeWizard
-            autoRun={s.autoRun}
-            resetEpisode={s.resetEpisode}
-            swapProfiles={s.swapProfiles}
-            observation={s.observation}
-            events={s.events}
-            info={s.info}
-            running={s.running}
-          />
-        )}
-      </main>
-    </div>
+      </section>
+
+      <div className="divider" />
+
+      {/* ARCHITECTURE */}
+      <section className="section-block alt-bg" id="architecture">
+        <div className="section-label">03 // SYSTEM DESIGN</div>
+        <h2 className="section-title">Execution Pipeline</h2>
+        <p className="section-desc">
+          Data flows unidirectionally through the trust-calibrated RL loop. Each
+          stage emits telemetry to the monitoring bus.
+        </p>
+        <ArchitecturePipeline />
+      </section>
+
+      <div className="divider" />
+
+      {/* METRICS */}
+      <section className="section-block" id="metrics">
+        <div className="section-label">04 // EVALUATION RESULTS</div>
+        <h2 className="section-title">Experimental Benchmarks</h2>
+        <p className="section-desc">
+          Averaged across evaluation episodes. Adversarial injection ratio fixed at
+          20%. Baseline: naive averaging orchestrator without trust calibration.
+        </p>
+        <MetricsGrid proof={s.proof} />
+      </section>
+
+      {/* FOOTER */}
+      <footer className="site-footer">
+        <div className="footer-left">
+          <strong>SENTINEL</strong><br />
+          Multi-Agent Reinforcement Learning System<br />
+          Research prototype — not for production use.
+        </div>
+        <div className="footer-right">
+          BUILD 2.4.1 // MARL-FRAMEWORK // MIT LICENSE<br />
+          © 2025 SENTINEL LAB. ALL RIGHTS RESERVED.
+        </div>
+      </footer>
+    </>
   );
 }