@neuroverseos/nv-sim 0.1.2 → 0.1.4

package/dist/engine/liveVisualizer.js

@@ -0,0 +1,1857 @@
+"use strict";
+/**
+ * Live Visualizer — Round-by-round simulation viewer
+ *
+ * Streams simulation data to a local browser dashboard via Server-Sent Events.
+ * Watch rules fire, agents react, and governance reshape the system in real time.
+ *
+ * Usage:
+ *   nv-sim visualize trading --live
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.startInteractiveServer = startInteractiveServer;
+const http = __importStar(require("http"));
+const fs = __importStar(require("fs"));
+const path = __importStar(require("path"));
+const swarmSimulation_1 = require("./swarmSimulation");
+const worldBridge_1 = require("./worldBridge");
+const narrativeInjection_1 = require("./narrativeInjection");
+const scenarioLibrary_1 = require("./scenarioLibrary");
+const liveAdapter_1 = require("./liveAdapter");
+function getVariantsDir() {
+    return path.resolve(process.cwd(), "variants");
+}
+function ensureVariantsDir() {
+    const dir = getVariantsDir();
+    if (!fs.existsSync(dir)) {
+        fs.mkdirSync(dir, { recursive: true });
+    }
+}
+function slugify(name) {
+    return name.toLowerCase().replace(/[^a-z0-9]+/g, "_").replace(/^_|_$/g, "");
+}
+function loadAllVariants() {
+    ensureVariantsDir();
+    const dir = getVariantsDir();
+    const files = fs.readdirSync(dir).filter(f => f.endsWith(".json")).sort();
+    return files.map(f => {
+        try {
+            return JSON.parse(fs.readFileSync(path.join(dir, f), "utf-8"));
+        }
+        catch {
+            return null;
+        }
+    }).filter(Boolean);
+}
+function saveVariant(variant) {
+    ensureVariantsDir();
+    const filename = `${variant.id}.json`;
+    const filepath = path.join(getVariantsDir(), filename);
+    fs.writeFileSync(filepath, JSON.stringify(variant, null, 2), "utf-8");
+    return filepath;
+}
+function deleteVariant(variantId) {
+    const filepath = path.join(getVariantsDir(), `${variantId}.json`);
+    if (fs.existsSync(filepath)) {
+        fs.unlinkSync(filepath);
+        return true;
+    }
+    return false;
+}
+/**
+ * Start an interactive live server with world controls + live simulation.
+ *
+ * The UI sends POST /run-sim with world parameters.
+ * The server runs the simulation and streams results via SSE.
+ */
+function startInteractiveServer(port, onReady) {
+    const clients = new Set();
+    let isRunning = false;
+    function broadcast(event) {
+        const data = `data: ${JSON.stringify(event)}\n\n`;
+        for (const client of clients) {
+            client.write(data);
+        }
+    }
+    function readBody(req) {
+        return new Promise((resolve) => {
+            let body = "";
+            req.on("data", (chunk) => { body += chunk.toString(); });
+            req.on("end", () => resolve(body));
+        });
+    }
+    function jsonResponse(res, status, data) {
+        res.writeHead(status, { "Content-Type": "application/json", "Access-Control-Allow-Origin": "*" });
+        res.end(JSON.stringify(data));
+    }
+    async function runSimulation(config) {
+        const { resolveWorld } = await Promise.resolve().then(() => __importStar(require("./worldComparison")));
+        const { runGovernedComparison } = await Promise.resolve().then(() => __importStar(require("./governedSimulation")));
+        const resolved = resolveWorld(config.worldId);
+        const rounds = config.rounds ?? resolved.swarm.rounds ?? 5;
+        // Apply state variable overrides to world definition
+        const world = { ...resolved.world };
+        if (config.stateOverrides) {
+            const updatedVars = world.state_variables.map(sv => {
+                if (config.stateOverrides && sv.id in config.stateOverrides) {
+                    return { ...sv, default_value: config.stateOverrides[sv.id] };
+                }
+                return sv;
+            });
+            world.state_variables = updatedVars;
+        }
+        // Resolve narrative events
+        let narrativeEvents = [];
+        if (config.scenarioId && scenarioLibrary_1.SCENARIO_LIBRARY[config.scenarioId]) {
+            narrativeEvents = (0, scenarioLibrary_1.resolveScenarioEvents)(scenarioLibrary_1.SCENARIO_LIBRARY[config.scenarioId]);
+        }
+        else if (config.injectEvents && config.injectEvents.length > 0) {
+            narrativeEvents = (0, narrativeInjection_1.parseInjectArgs)(["--inject", config.injectEvents.join(",")]);
+        }
+        const request = {
+            scenario: resolved.scenario,
+            stakeholders: resolved.stakeholders,
+            assumptions: resolved.assumptions,
+            constraints: resolved.constraints,
+            depth: resolved.depth,
+            swarm: { ...resolved.swarm, rounds },
+        };
+        // Send meta event
+        broadcast({
+            type: "meta",
+            source: "nv-sim",
+            scenario: resolved.scenario,
+            worldThesis: world.thesis,
+            agents: resolved.stakeholders.map(s => s.id),
+            invariants: world.invariants.map(inv => ({ id: inv.id, description: inv.description })),
+            gates: (world.gates ?? []).map(g => ({ id: g.id, label: g.label, severity: g.severity })),
+            narrativeEvents: narrativeEvents.map(e => ({ id: e.id, headline: e.headline, round: e.round, severity: e.severity })),
+            totalRounds: rounds,
+        });
+        // Run baseline
+        const baselineResult = await (0, swarmSimulation_1.runSwarmSimulation)(resolved.scenario, resolved.stakeholders, resolved.paths, { ...resolved.swarm, rounds });
+        for (const round of baselineResult.rounds) {
+            broadcast({
+                type: "round",
+                round: round.round,
+                totalRounds: rounds,
+                phase: "baseline",
+                reactions: round.reactions.map(r => ({
+                    stakeholder_id: r.stakeholder_id,
+                    reaction: r.reaction,
+                    impact: r.impact,
+                    confidence: r.confidence,
+                    trigger: r.trigger,
+                })),
+                avgImpact: round.reactions.reduce((s, r) => s + r.impact, 0) / round.reactions.length,
+                maxVolatility: Math.max(...round.reactions.map(r => Math.abs(r.impact))),
+                dynamics: round.emergent_dynamics ?? [],
+                interventionCount: 0,
+            });
+            await new Promise(r => setTimeout(r, 400));
+        }
+        // Run governed with narrative events
+        const governedResult = await runGovernedComparison(request, world, resolved.paths, narrativeEvents);
+        const nvWorld = (0, worldBridge_1.buildWorldFromScenario)(request, world);
+        for (const round of governedResult.governed.swarm.rounds) {
+            const reactions = round.reactions.map(r => {
+                const verdict = (0, worldBridge_1.evaluateScenarioGuard)({ ...request, scenario: `[R${round.round}] ${r.stakeholder_id}: ${r.reaction}` }, nvWorld, { trace: true, level: "standard" });
+                return {
+                    stakeholder_id: r.stakeholder_id,
+                    reaction: r.reaction,
+                    impact: r.impact,
+                    confidence: r.confidence,
+                    trigger: r.trigger,
+                    verdict: { status: verdict.status, reason: verdict.reason, ruleId: verdict.ruleId },
+                };
+            });
+            const interventionCount = (round.emergent_dynamics ?? []).filter(d => d.includes("intervention") || d.includes("governance")).length;
+            broadcast({
+                type: "round",
+                round: round.round,
+                totalRounds: rounds,
+                phase: "governed",
+                reactions,
+                avgImpact: round.reactions.reduce((s, r) => s + r.impact, 0) / round.reactions.length,
+                maxVolatility: Math.max(...round.reactions.map(r => Math.abs(r.impact))),
+                dynamics: round.emergent_dynamics ?? [],
+                interventionCount,
+            });
+            await new Promise(r => setTimeout(r, 500));
+        }
+        broadcast({ type: "complete", result: governedResult });
+    }
+    const server = http.createServer(async (req, res) => {
+        // CORS preflight
+        if (req.method === "OPTIONS") {
+            res.writeHead(204, {
+                "Access-Control-Allow-Origin": "*",
+                "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
+                "Access-Control-Allow-Headers": "Content-Type",
+            });
+            res.end();
+            return;
+        }
+        if (req.url === "/events") {
+            res.writeHead(200, {
+                "Content-Type": "text/event-stream",
+                "Cache-Control": "no-cache",
+                "Connection": "keep-alive",
+                "Access-Control-Allow-Origin": "*",
+            });
+            clients.add(res);
+            req.on("close", () => clients.delete(res));
+            return;
+        }
+        if (req.url === "/api/worlds" && req.method === "GET") {
+            const { resolveWorld } = await Promise.resolve().then(() => __importStar(require("./worldComparison")));
+            const worldIds = ["trading", "strait_of_hormuz", "gas_price_spike", "ai_regulation_crisis"];
+            const worlds = worldIds.map(id => {
+                try {
+                    const r = resolveWorld(id);
+                    return {
+                        id,
+                        title: r.title,
+                        thesis: r.world.thesis,
+                        stateVariables: r.world.state_variables,
+                        invariants: r.world.invariants,
+                        gates: r.world.gates ?? [],
+                    };
+                }
+                catch {
+                    return null;
+                }
+            }).filter(Boolean);
+            jsonResponse(res, 200, { worlds });
+            return;
+        }
+        if (req.url === "/api/scenarios" && req.method === "GET") {
+            jsonResponse(res, 200, { scenarios: scenarioLibrary_1.SCENARIO_LIBRARY });
+            return;
+        }
+        if (req.url === "/api/narratives" && req.method === "GET") {
+            jsonResponse(res, 200, { narratives: narrativeInjection_1.NARRATIVE_PRESETS });
+            return;
+        }
+        if (req.url === "/api/variants" && req.method === "GET") {
+            const variants = loadAllVariants();
+            jsonResponse(res, 200, { variants });
+            return;
+        }
+        if (req.url === "/api/save-variant" && req.method === "POST") {
+            try {
+                const body = await readBody(req);
+                const payload = JSON.parse(body);
+                if (!payload.name || !payload.baseWorld) {
+                    jsonResponse(res, 400, { error: "name and baseWorld are required" });
+                    return;
+                }
+                const id = slugify(payload.name);
+                const variant = {
+                    id,
+                    name: payload.name,
+                    description: payload.description ?? "",
+                    baseWorld: payload.baseWorld,
+                    stateOverrides: payload.stateOverrides ?? {},
+                    events: payload.events ?? [],
+                    rounds: payload.rounds ?? 5,
+                    createdAt: new Date().toISOString(),
+                    lastResult: payload.lastResult,
+                };
+                const filepath = saveVariant(variant);
+                jsonResponse(res, 200, { status: "saved", variant, filepath });
+            }
+            catch (err) {
+                jsonResponse(res, 400, { error: "Invalid request body" });
+            }
+            return;
+        }
+        if (req.url?.startsWith("/api/delete-variant/") && req.method === "DELETE") {
+            const variantId = req.url.split("/api/delete-variant/")[1];
+            if (variantId && deleteVariant(variantId)) {
+                jsonResponse(res, 200, { status: "deleted", id: variantId });
+            }
+            else {
+                jsonResponse(res, 404, { error: "Variant not found" });
+            }
+            return;
+        }
+        if (req.url === "/api/run-sim" && req.method === "POST") {
+            if (isRunning) {
+                jsonResponse(res, 409, { error: "Simulation already running" });
+                return;
+            }
+            try {
+                const body = await readBody(req);
+                const config = JSON.parse(body);
+                isRunning = true;
+                jsonResponse(res, 200, { status: "started", config });
+                // Run simulation async, streaming via SSE
+                runSimulation(config).catch(err => {
+                    broadcast({ type: "complete", result: { error: String(err) } });
+                }).finally(() => { isRunning = false; });
+            }
+            catch (err) {
+                jsonResponse(res, 400, { error: "Invalid request body" });
+            }
+            return;
+        }
+        // ── Governance Evaluate Endpoint ──
+        // Universal bridge endpoint: external simulators POST actions here for governance evaluation.
+        // Contract: { actor, action, payload, state? } → { decision: ALLOW|BLOCK|MODIFY, reason, modified_action? }
+        if (req.url === "/api/evaluate" && req.method === "POST") {
+            try {
+                const body = await readBody(req);
+                const payload = JSON.parse(body);
+                if (!payload.actor || !payload.action) {
+                    jsonResponse(res, 400, { error: "actor and action are required" });
+                    return;
+                }
+                // Resolve world for evaluation
+                const worldId = payload.world ?? "trading";
+                let nvWorld;
+                try {
+                    const { resolveWorld } = await Promise.resolve().then(() => __importStar(require("./worldComparison")));
+                    const resolved = resolveWorld(worldId);
+                    const request = {
+                        scenario: resolved.scenario,
+                        stakeholders: resolved.stakeholders,
+                        assumptions: resolved.assumptions,
+                        constraints: resolved.constraints,
+                        depth: resolved.depth,
+                        swarm: resolved.swarm,
+                    };
+                    nvWorld = (0, worldBridge_1.buildWorldFromScenario)(request, resolved.world);
+                }
+                catch {
+                    // Fallback: build minimal world
+                    nvWorld = (0, worldBridge_1.buildWorldFromScenario)({
+                        scenario: `${payload.actor}: ${payload.action}`,
+                        stakeholders: [],
+                    });
+                }
+                // Enable action_space — bridge actions are simulation execution, not thinking-only.
+                // Without this, the safety layer flags normal actions like "buy" as execution intents
+                // in a thinking-only environment.
+                nvWorld.world.players = { ...nvWorld.world.players, action_space: true };
+                // Inject simulation-specific guards into the world.
+                // The guard engine pattern-matches event.intent against guard.intent_patterns.
+                // Without guards, everything defaults to ALLOW. These guards define what
+                // simulation actions should be governed.
+                if (!nvWorld.guards) {
+                    nvWorld.guards = {
+                        guards: [
+                            {
+                                id: "sim-panic-actions",
+                                label: "Block panic-driven actions",
+                                description: "Prevents panic selling, aggressive shorting, and other destabilizing actions during high volatility",
+                                category: "structural",
+                                enforcement: "block",
+                                immutable: true,
+                                invariant_ref: nvWorld.invariants[0]?.id,
+                                intent_patterns: ["panic_sell", "panic sell", "panic buy", "panic_buy"],
+                                default_enabled: true,
+                            },
+                            {
+                                id: "sim-excessive-leverage",
+                                label: "Block excessive leverage",
+                                description: "Prevents increasing leverage positions that could amplify cascades",
+                                category: "structural",
+                                enforcement: "block",
+                                immutable: true,
+                                intent_patterns: ["increase_leverage", "increase leverage", "max leverage"],
+                                default_enabled: true,
+                            },
+                            {
+                                id: "sim-aggressive-actions",
+                                label: "Pause aggressive market actions",
+                                description: "Requires review for aggressive buying or shorting that could move markets",
+                                category: "operational",
+                                enforcement: "pause",
+                                immutable: false,
+                                intent_patterns: ["aggressive_buy", "aggressive buy", "aggressive_short", "short"],
+                                default_enabled: true,
+                            },
+                        ],
+                        intent_vocabulary: {
+                            "panic_sell": { label: "Panic Sell", pattern: "panic_sell" },
+                            "increase_leverage": { label: "Increase Leverage", pattern: "increase_leverage" },
+                            "aggressive_buy": { label: "Aggressive Buy", pattern: "aggressive_buy" },
+                            "short": { label: "Short Position", pattern: "short" },
+                        },
+                    };
+                }
+                // Build a proper GuardEvent — the guard engine matches intent against intent_patterns.
+                // Omit `direction` — setting it enables execution-intent safety checks (prompt injection
+                // detection) which falsely flag financial terms like "buy" and "sell". Bridge actions are
+                // simulation commands, not user prompts.
+                const guardEvent = {
+                    intent: payload.action,
+                    tool: "simulation",
+                    scope: `bridge/${payload.actor}`,
+                    actionCategory: "execute",
+                    riskLevel: (["panic_sell", "panic_buy", "increase_leverage"].includes(payload.action) ? "high" : "medium"),
+                    args: {
+                        actor: payload.actor,
+                        action: payload.action,
+                        ...(payload.payload ?? {}),
+                    },
+                };
+                // Evaluate directly via the governance module
+                let verdict;
+                try {
+                    const nv = await Promise.resolve().then(() => __importStar(require("@neuroverseos/governance")));
+                    verdict = nv.evaluateGuard(guardEvent, nvWorld, {
+                        trace: true,
+                        level: "standard",
+                    });
+                }
+                catch {
+                    // Fallback to scenario guard evaluation
+                    verdict = (0, worldBridge_1.evaluateScenarioGuard)({
+                        scenario: `[BRIDGE] ${payload.actor}: ${payload.action}`,
+                        stakeholders: [{ id: payload.actor, description: payload.actor, disposition: "neutral", priorities: [] }],
+                    }, nvWorld, { trace: true, level: "standard" });
+                }
+                // Map verdict to bridge protocol
+                const decision = verdict.status === "BLOCK" ? "BLOCK"
+                    : verdict.status === "PAUSE" ? "MODIFY"
+                        : "ALLOW";
+                // Broadcast governance event to connected SSE clients
+                broadcast({
+                    type: "round",
+                    round: 0,
+                    totalRounds: 0,
+                    phase: "governed",
+                    reactions: [{
+                            stakeholder_id: payload.actor,
+                            reaction: payload.action,
+                            impact: 0,
+                            confidence: 0.5,
+                            trigger: "bridge",
+                            verdict: { status: verdict.status, reason: verdict.reason, ruleId: verdict.ruleId },
+                        }],
+                    avgImpact: 0,
+                    maxVolatility: 0,
+                    dynamics: [],
+                    interventionCount: decision !== "ALLOW" ? 1 : 0,
+                });
+                jsonResponse(res, 200, {
+                    decision,
+                    reason: verdict.reason ?? null,
+                    rule_id: verdict.ruleId ?? null,
+                    evidence: verdict.evidence ?? null,
+                    modified_action: decision === "MODIFY" ? payload.payload : null,
+                });
+            }
+            catch (err) {
+                // Fail open — return ALLOW on any error
+                jsonResponse(res, 200, {
+                    decision: "ALLOW",
+                    reason: "Governance evaluation error — fail open",
+                    rule_id: null,
+                    evidence: null,
+                    modified_action: null,
+                });
+            }
+            return;
+        }
+        // List available live adapters
+        if (req.url === "/api/adapters" && req.method === "GET") {
+            const adapters = Object.values(liveAdapter_1.ADAPTER_REGISTRY).map(a => ({
+                id: a.id,
+                label: a.label,
+                description: a.description,
+            }));
+            jsonResponse(res, 200, { adapters });
+            return;
+        }
+        // Run simulation via live adapter (external process)
+        if (req.url === "/api/run-live" && req.method === "POST") {
+            if (isRunning) {
+                jsonResponse(res, 409, { error: "Simulation already running" });
+                return;
+            }
+            try {
+                const body = await readBody(req);
+                const payload = JSON.parse(body);
+                const adapter = (0, liveAdapter_1.createAdapter)(payload.adapterId, payload.options);
+                if (!adapter) {
+                    jsonResponse(res, 400, { error: `Unknown adapter: ${payload.adapterId}` });
+                    return;
+                }
+                isRunning = true;
+                jsonResponse(res, 200, { status: "started", adapter: payload.adapterId });
+                // Resolve world for governance evaluation
+                const { resolveWorld } = await Promise.resolve().then(() => __importStar(require("./worldComparison")));
+                const resolved = resolveWorld(payload.worldId ?? "trading");
+                const world = { ...resolved.world };
+                if (payload.stateOverrides) {
+                    const updatedVars = world.state_variables.map(sv => {
+                        if (payload.stateOverrides && sv.id in payload.stateOverrides) {
+                            return { ...sv, default_value: payload.stateOverrides[sv.id] };
+                        }
+                        return sv;
+                    });
+                    world.state_variables = updatedVars;
+                }
+                const request = {
+                    scenario: resolved.scenario,
+                    stakeholders: resolved.stakeholders,
+                    assumptions: resolved.assumptions,
+                    constraints: resolved.constraints,
+                    depth: resolved.depth,
+                    swarm: resolved.swarm,
+                };
+                const nvWorld = (0, worldBridge_1.buildWorldFromScenario)(request, world);
+                // Send meta event with adapter source
+                broadcast({
+                    type: "meta",
+                    source: payload.adapterId,
+                    scenario: resolved.scenario,
+                    worldThesis: world.thesis,
+                    agents: [], // will be populated dynamically from adapter
+                    invariants: world.invariants.map(inv => ({ id: inv.id, description: inv.description })),
+                    gates: (world.gates ?? []).map(g => ({ id: g.id, label: g.label, severity: g.severity })),
+                    narrativeEvents: [],
+                    totalRounds: 0,
+                });
+                // Listen for rounds from the adapter
+                adapter.on("round", (liveRound) => {
+                    // Build lookup of original verdicts from adapter's adaptation data.
+                    // When an external bridge (e.g. MiroFish) already applied governance,
+                    // the verdict lives in adaptation.deltas — use it instead of re-evaluating
+                    // (re-evaluating the MODIFIED action would return ALLOW, hiding the BLOCK).
+                    const adaptationByAgent = new Map();
+                    if (liveRound.adaptation?.deltas) {
+                        for (const delta of liveRound.adaptation.deltas) {
+                            adaptationByAgent.set(delta.agent, {
+                                status: delta.decision,
+                                reason: delta.reason,
+                                ruleId: delta.rule,
+                            });
+                        }
+                    }
+                    const reactions = liveRound.agentActions.map(a => {
+                        // Priority: per-action verdict > adaptation delta > local re-evaluation
+                        const actionVerdict = a.verdict ? { status: a.verdict.status, reason: a.verdict.reason, ruleId: a.verdict.rule } : null;
+                        const bridgeVerdict = actionVerdict ?? adaptationByAgent.get(a.agent);
+                        let verdict;
+                        if (bridgeVerdict) {
+                            verdict = bridgeVerdict;
+                        }
+                        else {
+                            const guard = (0, worldBridge_1.evaluateScenarioGuard)({ ...request, scenario: `[R${liveRound.round}] ${a.agent}: ${a.action}` }, nvWorld, { trace: true, level: "standard" });
+                            verdict = { status: guard.status, reason: guard.reason, ruleId: guard.ruleId };
+                        }
+                        return {
+                            stakeholder_id: a.agent,
+                            reaction: a.action,
+                            impact: a.impact,
+                            confidence: a.confidence ?? 0.5,
+                            trigger: liveRound.source,
+                            verdict,
+                        };
+                    });
+                    const interventionCount = reactions.filter(r => r.verdict.status !== "ALLOW").length;
+                    broadcast({
+                        type: "round",
+                        round: liveRound.round,
+                        totalRounds: 0, // unknown for live streams
+                        phase: "governed",
+                        reactions,
+                        avgImpact: reactions.reduce((s, r) => s + r.impact, 0) / (reactions.length || 1),
+                        maxVolatility: Math.max(0, ...reactions.map(r => Math.abs(r.impact))),
+                        dynamics: liveRound.emergentDynamics ?? [],
+                        interventionCount,
+                    });
+                });
+                adapter.on("complete", () => {
+                    isRunning = false;
+                });
+                adapter.on("error", (err) => {
+                    broadcast({ type: "complete", result: { error: String(err) } });
+                    isRunning = false;
+                });
+                adapter.start().catch(err => {
+                    broadcast({ type: "complete", result: { error: String(err) } });
+                    isRunning = false;
+                });
+            }
+            catch (err) {
+                jsonResponse(res, 400, { error: "Invalid request body" });
+            }
+            return;
+        }
+        // Serve the interactive dashboard
+        res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
+        res.end(INTERACTIVE_DASHBOARD_HTML);
+    });
+    server.listen(port, () => {
+        onReady(`http://localhost:${port}`);
+    });
+    return { server };
+}
+const INTERACTIVE_DASHBOARD_HTML = `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>NV-SIM — Scenario Control Platform</title>
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body { font-family: 'SF Mono', 'Fira Code', monospace; background: #0a0a0a; color: #e0e0e0; overflow: hidden; }
+  .header { padding: 12px 20px; border-bottom: 1px solid #1a1a1a; display: flex; justify-content: space-between; align-items: center; }
+  .header h1 { font-size: 15px; color: #fff; }
+  .header .sub { font-size: 11px; color: #555; margin-left: 12px; }
+  .status { font-size: 11px; padding: 3px 10px; border-radius: 10px; }
+  .status.idle { background: #1a1a2e; color: #818cf8; }
+  .status.live { background: #052e16; color: #4ade80; animation: pulse 2s infinite; }
+  .status.complete { background: #1e1b4b; color: #818cf8; }
+  @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
+
+  .layout { display: grid; grid-template-columns: 340px 1fr; height: calc(100vh - 49px); }
+
+  /* LEFT PANEL — Controls */
+  .controls { background: #0d0d0d; border-right: 1px solid #1a1a1a; overflow-y: auto; padding: 16px; }
+  .ctrl-section { margin-bottom: 20px; }
+  .ctrl-section h3 { font-size: 11px; color: #555; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid #1a1a1a; }
+
+  .ctrl-row { margin-bottom: 12px; }
+  .ctrl-label { font-size: 11px; color: #888; margin-bottom: 4px; display: flex; justify-content: space-between; }
+  .ctrl-label .val { color: #ccc; font-weight: 600; }
+
+  input[type="range"] { width: 100%; height: 4px; -webkit-appearance: none; background: #222; border-radius: 2px; outline: none; }
+  input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #818cf8; cursor: pointer; }
+  input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #818cf8; cursor: pointer; border: none; }
+
+  select { width: 100%; background: #111; color: #ccc; border: 1px solid #333; padding: 6px 8px; border-radius: 4px; font-family: inherit; font-size: 12px; }
+
+  .toggle-row { display: flex; align-items: center; gap: 8px; }
+  .toggle { position: relative; width: 36px; height: 20px; background: #333; border-radius: 10px; cursor: pointer; transition: background 0.2s; }
+  .toggle.on { background: #4ade80; }
+  .toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: transform 0.2s; }
+  .toggle.on::after { transform: translateX(16px); }
+  .toggle-label { font-size: 12px; color: #999; }
+
+  .inject-row { display: flex; gap: 6px; margin-bottom: 6px; }
+  .inject-row select { flex: 1; }
+  .inject-row input { width: 50px; background: #111; color: #ccc; border: 1px solid #333; padding: 4px 6px; border-radius: 4px; font-family: inherit; font-size: 12px; text-align: center; }
+  .inject-list { margin-bottom: 8px; }
+  .inject-item { font-size: 11px; color: #888; padding: 3px 6px; background: #111; border-radius: 3px; margin-bottom: 3px; display: flex; justify-content: space-between; }
+  .inject-item .remove { color: #f87171; cursor: pointer; }
+
+  .btn { width: 100%; padding: 10px; border: none; border-radius: 6px; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; text-transform: uppercase; letter-spacing: 1px; transition: all 0.2s; }
+  .btn-run { background: #4ade80; color: #0a0a0a; }
+  .btn-run:hover { background: #22c55e; }
+  .btn-run:disabled { background: #1a3a1a; color: #555; cursor: not-allowed; }
+  .btn-add { background: #222; color: #818cf8; padding: 6px; font-size: 11px; }
+  .btn-add:hover { background: #2a2a3a; }
+
+  .scenario-btn { display: block; width: 100%; padding: 8px 10px; margin-bottom: 4px; background: #111; border: 1px solid #222; border-radius: 4px; color: #ccc; font-family: inherit; font-size: 11px; text-align: left; cursor: pointer; }
+  .scenario-btn:hover { border-color: #818cf8; background: #151520; }
+  .scenario-btn .stitle { font-weight: 600; color: #e0e0e0; }
+  .scenario-btn .sdesc { color: #666; font-size: 10px; margin-top: 2px; }
+
+  /* Save variant */
+  .btn-save { background: #1a1a2e; color: #818cf8; margin-top: 0; }
+  .btn-save:hover { background: #252540; }
+  .btn-confirm { flex: 1; background: #4ade80; color: #0a0a0a; padding: 7px; font-size: 11px; }
+  .btn-cancel { flex: 1; background: #222; color: #888; padding: 7px; font-size: 11px; }
+  .save-input { width: 100%; background: #111; color: #ccc; border: 1px solid #333; padding: 7px 8px; border-radius: 4px; font-family: inherit; font-size: 12px; }
+  .save-input:focus { border-color: #818cf8; outline: none; }
+
+  /* Variant cards */
+  .variant-card { background: #111; border: 1px solid #222; border-radius: 4px; padding: 8px 10px; margin-bottom: 4px; cursor: pointer; position: relative; }
+  .variant-card:hover { border-color: #4ade80; background: #0f1f0f; }
+  .variant-card .vname { font-size: 12px; font-weight: 600; color: #e0e0e0; }
+  .variant-card .vdesc { font-size: 10px; color: #666; margin-top: 2px; }
+  .variant-card .vmeta { font-size: 10px; color: #444; margin-top: 4px; }
+  .variant-card .vmeta .vresult { color: #4ade80; }
+  .variant-card .vdelete { position: absolute; top: 6px; right: 8px; color: #f87171; font-size: 10px; cursor: pointer; opacity: 0; transition: opacity 0.2s; }
+  .variant-card:hover .vdelete { opacity: 1; }
+  .variant-card .vbase { display: inline-block; font-size: 9px; padding: 1px 5px; background: #1a1a2e; color: #818cf8; border-radius: 3px; margin-top: 3px; }
+
+  /* RIGHT PANEL — Simulation viewer */
+  .viewer { display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; }
+  .viewer-top { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #1a1a1a; }
+  .viewer-mid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #1a1a1a; overflow: hidden; }
+  .viewer-bottom { background: #0a0a0a; border-top: 1px solid #1a1a1a; padding: 12px 16px; max-height: 180px; overflow-y: auto; }
+
+  .vpanel { background: #0a0a0a; padding: 14px; overflow-y: auto; }
+  .vpanel h2 { font-size: 11px; color: #555; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
+
+  /* Metrics */
+  .metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
+  .metric-box { background: #111; border: 1px solid #222; border-radius: 6px; padding: 10px; text-align: center; }
+  .metric-box .value { font-size: 20px; font-weight: 700; color: #fff; }
+  .metric-box .label { font-size: 10px; color: #555; margin-top: 2px; }
+  .metric-box.good .value { color: #4ade80; }
+  .metric-box.bad .value { color: #ef4444; }
+  .metric-box.warn .value { color: #fbbf24; }
+
+  /* Agent bars */
+  .agent-row { display: flex; align-items: center; gap: 6px; padding: 3px 0; font-size: 11px; }
+  .agent-name { width: 130px; color: #777; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .impact-bar-bg { flex: 1; height: 14px; background: #1a1a1a; border-radius: 3px; position: relative; overflow: hidden; }
+  .impact-bar { height: 100%; border-radius: 3px; transition: width 0.4s ease; position: absolute; top: 0; }
+  .impact-bar.positive { background: #4ade80; right: 50%; }
+  .impact-bar.negative { background: #ef4444; left: 50%; }
+  .impact-val { width: 44px; text-align: right; color: #999; font-size: 10px; }
+  .center-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: #333; }
+  .verdict { display: inline-block; padding: 1px 5px; border-radius: 3px; font-size: 9px; font-weight: 600; margin-left: 4px; }
+  .verdict.ALLOW { background: #052e16; color: #4ade80; }
+  .verdict.BLOCK { background: #2d0606; color: #f87171; }
+  .verdict.PAUSE { background: #2d2006; color: #fbbf24; }
+
+  /* Chart */
+  .chart-container { position: relative; height: 100%; min-height: 150px; }
+  canvas { width: 100% !important; height: 100% !important; }
+
+  /* Simulation Trace */
+  .trace-round { margin-bottom: 10px; border: 1px solid #1a1a1a; border-radius: 4px; overflow: hidden; }
+  .trace-round-header { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: #111; cursor: pointer; user-select: none; }
+  .trace-round-header:hover { background: #181818; }
+  .trace-phase { font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.5px; }
+  .trace-phase.baseline { background: #1e293b; color: #60a5fa; }
+  .trace-phase.governed { background: #052e16; color: #4ade80; }
+  .trace-round-label { font-size: 11px; color: #ccc; font-weight: 600; }
+  .trace-round-metrics { margin-left: auto; font-size: 10px; color: #666; display: flex; gap: 10px; }
+  .trace-body { padding: 0 10px 8px; }
+  .trace-body[data-collapsed="true"] { display: none; }
+  .trace-section { margin-top: 6px; }
+  .trace-section-label { font-size: 9px; color: #555; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 3px; display: flex; align-items: center; gap: 5px; }
+  .trace-section-label::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; }
+  .trace-section-label.event::before { background: #f59e0b; }
+  .trace-section-label.agents::before { background: #3b82f6; }
+  .trace-section-label.governance::before { background: #10b981; }
+  .trace-event-item { font-size: 10px; color: #e2e8f0; padding: 3px 0 3px 11px; border-left: 2px solid #f59e0b; margin-left: 2px; }
+  .trace-event-severity { font-size: 9px; font-weight: 600; padding: 0 4px; border-radius: 2px; margin-left: 4px; }
+  .trace-event-severity.major, .trace-event-severity.extreme { background: #7f1d1d; color: #fca5a5; }
+  .trace-event-severity.moderate { background: #713f12; color: #fde68a; }
+  .trace-event-severity.minor { background: #1e3a2f; color: #86efac; }
+  .trace-agent-item { font-size: 10px; padding: 2px 0 2px 11px; border-left: 2px solid #3b82f6; margin-left: 2px; display: flex; align-items: center; gap: 6px; }
+  .trace-agent-name { color: #93c5fd; font-weight: 500; min-width: 80px; }
+  .trace-agent-action { color: #a1a1aa; flex: 1; }
+  .trace-agent-impact { font-size: 9px; font-weight: 600; min-width: 36px; text-align: right; }
+  .trace-agent-impact.positive { color: #4ade80; }
+  .trace-agent-impact.negative { color: #f87171; }
+  .trace-gov-item { font-size: 10px; padding: 3px 6px 3px 11px; border-left: 2px solid #10b981; margin-left: 2px; display: flex; align-items: center; gap: 6px; }
+  .trace-gov-rule { font-size: 9px; color: #999; font-family: monospace; }
+  .trace-gov-reason { color: #d1d5db; flex: 1; }
+  .trace-dynamics { font-size: 10px; color: #a78bfa; padding: 2px 0 2px 11px; border-left: 2px solid #7c3aed; margin-left: 2px; font-style: italic; }
+  .trace-arrow { color: #333; font-size: 10px; text-align: center; padding: 2px 0; }
+  .trace-empty { font-size: 10px; color: #444; font-style: italic; padding: 4px 0; }
+
+  /* World info */
+  .world-thesis { font-size: 11px; color: #ccc; font-style: italic; margin-bottom: 8px; }
+  .inv-item { font-size: 10px; color: #777; padding: 2px 0; }
+
+  /* Empty state */
+  .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: #333; }
+  .empty-state .icon { font-size: 48px; margin-bottom: 12px; }
+  .empty-state .msg { font-size: 13px; }
+  .empty-state .hint { font-size: 11px; color: #2a2a2a; margin-top: 6px; }
+
+  /* System Shift Card */
+  .system-shift { display: none; margin: 12px 16px; border: 1px solid #1a2e1a; border-radius: 8px; background: #0a0f0a; overflow: hidden; animation: fadeInUp 0.4s ease; }
+  .system-shift.visible { display: block; }
+  @keyframes fadeInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
+  .ss-header { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: #0d150d; border-bottom: 1px solid #1a2e1a; }
+  .ss-icon { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 6px #4ade8066; }
+  .ss-title { font-size: 11px; font-weight: 700; color: #4ade80; text-transform: uppercase; letter-spacing: 1.5px; }
+  .ss-rule { font-size: 13px; font-weight: 600; color: #e0e0e0; padding: 10px 14px 0; }
+  .ss-body { padding: 10px 14px 14px; display: grid; gap: 8px; }
+  .ss-section { background: #111; border: 1px solid #1a1a1a; border-radius: 6px; padding: 10px 12px; }
+  .ss-section-label { font-size: 9px; font-weight: 700; color: #555; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
+  .ss-adapt-rate { font-size: 20px; font-weight: 700; color: #4ade80; }
+  .ss-adapt-desc { font-size: 11px; color: #888; margin-top: 2px; }
+  .ss-shift-item { font-size: 11px; color: #999; padding: 2px 0; display: flex; align-items: center; gap: 6px; }
+  .ss-shift-arrow { color: #4ade80; font-weight: 600; }
+  .ss-pattern-tag { display: inline-block; font-size: 10px; padding: 2px 8px; background: #1a1a2e; color: #818cf8; border-radius: 3px; margin-right: 4px; margin-bottom: 4px; }
+  .ss-impact-row { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: #999; padding: 2px 0; }
+  .ss-impact-delta { color: #4ade80; font-weight: 600; }
+  .ss-impact-delta.negative { color: #f87171; }
+  .ss-narrative { font-size: 12px; color: #ccc; line-height: 1.5; font-style: italic; border-left: 2px solid #4ade80; padding-left: 10px; }
+  .ss-scale { font-size: 10px; color: #555; padding: 0 14px 6px; }
+  .ss-scale strong { color: #888; }
+  .ss-flow { display: flex; align-items: center; gap: 6px; padding: 6px 14px; font-size: 10px; color: #444; }
+  .ss-flow-arrow { color: #4ade80; }
+  .ss-raw-toggle { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: #0d0d0d; border: none; border-top: 1px solid #1a1a1a; color: #555; font-family: inherit; font-size: 10px; cursor: pointer; width: 100%; text-align: left; transition: color 0.2s; }
+  .ss-raw-toggle:hover { color: #888; }
+  .ss-raw-toggle .arrow { transition: transform 0.2s; }
+  .ss-raw-toggle.open .arrow { transform: rotate(90deg); }
+  .ss-raw-detail { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
+  .ss-raw-detail.open { max-height: 200px; overflow-y: auto; }
+  .ss-raw-list { padding: 6px 12px; }
+  .ss-raw-item { font-size: 10px; color: #666; padding: 2px 0; display: flex; gap: 6px; }
+  .ss-raw-item .raw-agent { color: #888; min-width: 100px; }
+  .ss-raw-item .raw-action { color: #999; flex: 1; }
+  .ss-raw-item .raw-verdict { font-size: 9px; font-weight: 600; padding: 0 4px; border-radius: 2px; }
+  .ss-raw-item .raw-verdict.BLOCK { background: #2d0606; color: #f87171; }
+  .ss-raw-item .raw-verdict.MODIFY { background: #2d2006; color: #fbbf24; }
+
+  /* Integration Quick-Start (in controls panel) */
+  .integrate-section { background: #0d0d15; border: 1px solid #1a1a2e; border-radius: 6px; padding: 10px 12px; margin-top: 8px; }
+  .integrate-section h4 { font-size: 10px; color: #818cf8; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
+  .integrate-code { font-size: 10px; color: #ccc; background: #111; border: 1px solid #222; border-radius: 4px; padding: 8px; overflow-x: auto; white-space: pre; line-height: 1.5; }
+  .integrate-code .kw { color: #818cf8; }
+  .integrate-code .str { color: #4ade80; }
+  .integrate-code .comment { color: #555; }
+  .integrate-endpoint { font-size: 11px; color: #888; margin-top: 6px; }
+  .integrate-endpoint code { color: #4ade80; background: #111; padding: 1px 5px; border-radius: 3px; }
+</style>
+</head>
+<body>
+<div class="header">
+  <div style="display:flex;align-items:center">
+    <h1>NV-SIM</h1>
+    <span class="sub">Scenario Control Platform</span>
+  </div>
+  <span id="status" class="status idle">Ready</span>
+</div>
+
+<div class="layout">
+  <!-- LEFT: CONTROLS -->
+  <div class="controls" id="controls-panel">
+    <!-- Simulation Engine selector -->
+    <div class="ctrl-section">
+      <h3>Simulation Engine</h3>
+      <div class="ctrl-row">
+        <select id="engine-select">
+          <option value="nv-sim" selected>NV-SIM (Built-in)</option>
+        </select>
+      </div>
+      <div id="engine-status" style="font-size:10px;color:#555;margin-top:4px"></div>
+    </div>
+
+    <!-- World selector -->
+    <div class="ctrl-section">
+      <h3>World</h3>
+      <div class="ctrl-row">
+        <select id="world-select"></select>
+      </div>
+      <div id="world-thesis" class="world-thesis"></div>
+    </div>
+
+    <!-- State variables (dynamic sliders) -->
+    <div class="ctrl-section" id="state-vars-section" style="display:none">
+      <h3>World Rules</h3>
+      <div id="state-vars"></div>
+    </div>
+
+    <!-- Scenario presets -->
+    <div class="ctrl-section">
+      <h3>Scenario Presets</h3>
+      <div id="scenario-list"></div>
+    </div>
+
+    <!-- Narrative injection -->
+    <div class="ctrl-section">
+      <h3>Narrative Events</h3>
+      <div class="inject-row">
+        <select id="event-select"></select>
+        <input type="number" id="event-round" min="1" max="20" value="3" placeholder="R">
+      </div>
+      <button class="btn btn-add" id="add-event-btn">+ Add Event</button>
+      <div id="inject-list" class="inject-list" style="margin-top:8px"></div>
+    </div>
+
+    <!-- Rounds -->
+    <div class="ctrl-section">
+      <h3>Simulation</h3>
+      <div class="ctrl-row">
+        <div class="ctrl-label">
+          <span>Rounds</span>
+          <span class="val" id="rounds-val">5</span>
+        </div>
+        <input type="range" id="rounds-slider" min="3" max="12" value="5">
+      </div>
+    </div>
+
+    <!-- Run button -->
+    <button class="btn btn-run" id="run-btn">Run Simulation</button>
+
+    <!-- Save as variant -->
+    <div id="save-section" style="margin-top:12px">
+      <button class="btn btn-save" id="save-btn">Save as World Variant</button>
+      <div id="save-form" style="display:none;margin-top:8px">
+        <input type="text" id="variant-name" placeholder="Variant name (e.g. Hormuz Closed + 3x Leverage)" class="save-input">
+        <input type="text" id="variant-desc" placeholder="What does this variant test?" class="save-input" style="margin-top:4px">
+        <div style="display:flex;gap:6px;margin-top:6px">
+          <button class="btn btn-confirm" id="confirm-save-btn">Save</button>
+          <button class="btn btn-cancel" id="cancel-save-btn">Cancel</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Saved variants -->
+    <div class="ctrl-section" style="margin-top:16px">
+      <h3>Saved Variants</h3>
+      <div id="variant-list"><div style="font-size:11px;color:#333">No saved variants yet</div></div>
+    </div>
+
+    <!-- Integration Quick-Start -->
+    <div class="ctrl-section" style="margin-top:16px">
+      <h3>Integrate Your Simulator</h3>
+      <div class="integrate-section">
+        <h4>Connect in 3 lines</h4>
+        <div class="integrate-code"><span class="kw">from</span> neuroverse_bridge <span class="kw">import</span> evaluate
+
+verdict = evaluate(
+    actor=<span class="str">"agent_1"</span>,
+    action=<span class="str">"panic_sell"</span>,
+    world=<span class="str">"trading"</span>
+)
+
+<span class="kw">if</span> verdict[<span class="str">"decision"</span>] == <span class="str">"BLOCK"</span>:
+    action = <span class="str">"hold"</span>  <span class="comment"># adapted</span></div>
+        <div class="integrate-endpoint">
+          Endpoint: <code id="integrate-url">POST /api/evaluate</code>
+        </div>
+        <div style="font-size:10px;color:#444;margin-top:6px">
+          Fail-open · 500ms timeout · Stateless
+        </div>
+        <div style="margin-top:8px;font-size:10px">
+          <span style="display:inline-block;padding:2px 6px;background:#2d0606;color:#f87171;border-radius:3px;margin-right:3px">BLOCK</span> replaced
+          <span style="display:inline-block;padding:2px 6px;background:#2d2006;color:#fbbf24;border-radius:3px;margin-right:3px;margin-left:4px">MODIFY</span> constrained
+          <span style="display:inline-block;padding:2px 6px;background:#052e16;color:#4ade80;border-radius:3px;margin-left:4px">ALLOW</span> proceeds
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- RIGHT: VIEWER -->
+  <div class="viewer">
+    <div class="viewer-top">
+      <div class="vpanel">
+        <h2>Live Metrics</h2>
+        <div class="metric-grid">
+          <div class="metric-box"><div class="value" id="m-stability">--</div><div class="label">Stability</div></div>
+          <div class="metric-box"><div class="value" id="m-volatility">--</div><div class="label">Volatility</div></div>
+          <div class="metric-box"><div class="value" id="m-round">--</div><div class="label">Round</div></div>
+          <div class="metric-box"><div class="value" id="m-interventions">0</div><div class="label">Interventions</div></div>
+        </div>
+      </div>
+      <div class="vpanel">
+        <h2>World Rules Active</h2>
+        <div id="active-invariants"></div>
+      </div>
+    </div>
+
+    <div class="viewer-mid">
+      <div class="vpanel" id="agents-panel">
+        <h2>Agent Impacts</h2>
+        <div id="agents">
+          <div class="empty-state"><div class="icon">&gt;_</div><div class="msg">Configure world and run simulation</div><div class="hint">Adjust rules on the left, then press Run</div></div>
+        </div>
+      </div>
+      <div class="vpanel">
+        <h2>Impact Timeline</h2>
+        <div class="chart-container"><canvas id="chart"></canvas></div>
+      </div>
+    </div>
+
+    <!-- System Shift Card — the demo moment -->
+    <div id="system-shift" class="system-shift">
+      <div class="ss-header">
+        <div class="ss-icon"></div>
+        <span class="ss-title">System Shift</span>
+      </div>
+      <div class="ss-rule" id="ss-rule"></div>
+      <div class="ss-scale" id="ss-scale"></div>
+      <div class="ss-flow">
+        <span>Rule</span><span class="ss-flow-arrow">→</span>
+        <span>Behavioral Shift</span><span class="ss-flow-arrow">→</span>
+        <span>Emergent Pattern</span><span class="ss-flow-arrow">→</span>
+        <span>System Outcome</span>
+      </div>
+      <div class="ss-body">
+        <div class="ss-section">
+          <div class="ss-section-label">Behavioral Shift</div>
+          <div class="ss-adapt-rate" id="ss-adapt-rate"></div>
+          <div class="ss-adapt-desc" id="ss-adapt-desc"></div>
+          <div id="ss-shifts"></div>
+        </div>
+        <div class="ss-section">
+          <div class="ss-section-label">What Emerged</div>
+          <div id="ss-patterns"></div>
+        </div>
+        <div class="ss-section">
+          <div class="ss-section-label">System Outcome</div>
+          <div id="ss-impacts"></div>
+        </div>
+        <div class="ss-section">
+          <div class="ss-section-label">What Actually Happened</div>
+          <div class="ss-narrative" id="ss-narrative"></div>
+        </div>
+      </div>
+      <button class="ss-raw-toggle" id="ss-raw-toggle">
+        <span class="arrow">▶</span> View raw detail
+      </button>
+      <div class="ss-raw-detail" id="ss-raw-detail">
+        <div class="ss-raw-list" id="ss-raw-list"></div>
+      </div>
+    </div>
+
+    <div class="viewer-bottom">
+      <h2 style="font-size:11px;color:#555;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px">Simulation Trace <span id="trace-source" style="color:#4ade80;font-weight:600;margin-left:6px"></span> <span style="color:#333;font-weight:400">— Events → Agents → Rules → Outcomes</span></h2>
+      <div id="log"></div>
+    </div>
+  </div>
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"><\/script>
+<script>
+// ============================================
+// STATE
+// ============================================
+let worlds = [];
+let scenarios = {};
+let narratives = {};
+let currentWorld = null;
+let injectedEvents = [];
+let totalInterventions = 0;
+let baselineImpacts = [];
+let governedImpacts = [];
+let chartLabels = [];
+let chart = null;
+let narrativeEventsByRound = {}; // { round: [{ id, headline, severity }] }
+
+const statusEl = document.getElementById('status');
+const worldSelect = document.getElementById('world-select');
+const stateVarsSection = document.getElementById('state-vars-section');
+const stateVarsEl = document.getElementById('state-vars');
+const scenarioListEl = document.getElementById('scenario-list');
+const eventSelect = document.getElementById('event-select');
+const eventRoundInput = document.getElementById('event-round');
+const injectListEl = document.getElementById('inject-list');
+const roundsSlider = document.getElementById('rounds-slider');
+const roundsVal = document.getElementById('rounds-val');
+const runBtn = document.getElementById('run-btn');
+const agentsEl = document.getElementById('agents');
+const logEl = document.getElementById('log');
+const activeInvEl = document.getElementById('active-invariants');
+const engineSelect = document.getElementById('engine-select');
+const engineStatusEl = document.getElementById('engine-status');
+const traceSourceEl = document.getElementById('trace-source');
+
+// ============================================
+// INIT — Load worlds, scenarios, narratives, adapters
+// ============================================
+async function init() {
+  const [wRes, sRes, nRes, aRes] = await Promise.all([
+    fetch('/api/worlds').then(r => r.json()),
+    fetch('/api/scenarios').then(r => r.json()),
+    fetch('/api/narratives').then(r => r.json()),
+    fetch('/api/adapters').then(r => r.json()).catch(() => ({ adapters: [] })),
+  ]);
+
+  worlds = wRes.worlds;
+  scenarios = sRes.scenarios;
+  narratives = nRes.narratives;
+
+  // Populate engine selector with live adapters
+  (aRes.adapters || []).forEach(function(a) {
+    const opt = document.createElement('option');
+    opt.value = a.id;
+    opt.textContent = a.label;
+    engineSelect.appendChild(opt);
+  });
+
+  // Populate world select
+  worlds.forEach(w => {
+    const opt = document.createElement('option');
+    opt.value = w.id;
+    opt.textContent = w.title;
+    worldSelect.appendChild(opt);
+  });
+
+  // Populate event select
+  Object.entries(narratives).forEach(([id, ev]) => {
+    const opt = document.createElement('option');
+    opt.value = id;
+    opt.textContent = ev.headline.slice(0, 40);
+    eventSelect.appendChild(opt);
+  });
+
+  // Populate scenario presets
+  Object.entries(scenarios).forEach(([id, s]) => {
+    const btn = document.createElement('button');
+    btn.className = 'scenario-btn';
+    btn.innerHTML = '<div class="stitle">' + s.title + '</div><div class="sdesc">' + s.description + '</div>';
+    btn.onclick = () => loadScenario(id, s);
+    scenarioListEl.appendChild(btn);
+  });
+
+  // Select first world
+  if (worlds.length > 0) selectWorld(worlds[0].id);
+
+  // Load saved variants
+  await loadVariants();
+
+  // Connect SSE
+  connectSSE();
+}
+
+function selectWorld(worldId) {
+  currentWorld = worlds.find(w => w.id === worldId);
+  if (!currentWorld) return;
+
+  worldSelect.value = worldId;
+  document.getElementById('world-thesis').textContent = '"' + currentWorld.thesis + '"';
+
+  // Render state variable controls
+  if (currentWorld.stateVariables && currentWorld.stateVariables.length > 0) {
+    stateVarsSection.style.display = '';
+    stateVarsEl.innerHTML = '';
+    currentWorld.stateVariables.forEach(sv => {
+      const row = document.createElement('div');
+      row.className = 'ctrl-row';
+
+      if (sv.type === 'number' && sv.range) {
+        const step = sv.range.max <= 1 ? 0.01 : (sv.range.max <= 10 ? 0.1 : 1);
+        row.innerHTML =
+          '<div class="ctrl-label"><span>' + sv.label + '</span><span class="val" id="sv-val-' + sv.id + '">' + sv.default_value + '</span></div>' +
+          '<input type="range" id="sv-' + sv.id + '" min="' + sv.range.min + '" max="' + sv.range.max + '" step="' + step + '" value="' + sv.default_value + '" data-sv="' + sv.id + '">';
+        stateVarsEl.appendChild(row);
+        const slider = row.querySelector('input');
+        slider.addEventListener('input', () => {
+          document.getElementById('sv-val-' + sv.id).textContent = slider.value;
+        });
+      } else if (sv.type === 'enum' && sv.enum_values) {
+        row.innerHTML =
+          '<div class="ctrl-label"><span>' + sv.label + '</span></div>' +
+          '<select id="sv-' + sv.id + '" data-sv="' + sv.id + '">' +
+          sv.enum_values.map(v => '<option value="' + v + '"' + (v === sv.default_value ? ' selected' : '') + '>' + v + '</option>').join('') +
+          '</select>';
+        stateVarsEl.appendChild(row);
+      } else if (sv.type === 'boolean') {
+        row.innerHTML =
+          '<div class="toggle-row">' +
+          '<div class="toggle' + (sv.default_value ? ' on' : '') + '" id="sv-' + sv.id + '" data-sv="' + sv.id + '"></div>' +
+          '<span class="toggle-label">' + sv.label + '</span>' +
+          '</div>';
+        stateVarsEl.appendChild(row);
+        const toggle = row.querySelector('.toggle');
+        toggle.addEventListener('click', () => {
+          toggle.classList.toggle('on');
+        });
+      }
+    });
+  } else {
+    stateVarsSection.style.display = 'none';
+  }
+
+  // Show invariants
+  activeInvEl.innerHTML = currentWorld.invariants.map(inv =>
+    '<div class="inv-item">[' + inv.id + '] ' + inv.description + '</div>'
+  ).join('') + (currentWorld.gates || []).map(g =>
+    '<div class="inv-item" style="color:' + (g.severity === 'critical' ? '#f87171' : '#fbbf24') + '">[' + g.id + '] ' + g.label + '</div>'
+  ).join('');
+}
+
+function loadScenario(id, scenario) {
+  // Set world
+  selectWorld(scenario.world);
+  // Set events
+  injectedEvents = scenario.events.slice();
+  renderInjectedEvents();
+  // Set rounds
+  const r = scenario.rounds || 5;
+  roundsSlider.value = Math.min(r, 12);
+  roundsVal.textContent = Math.min(r, 12);
+}
+
+// ============================================
+// NARRATIVE EVENT INJECTION
+// ============================================
+document.getElementById('add-event-btn').addEventListener('click', () => {
+  const eventId = eventSelect.value;
+  const round = parseInt(eventRoundInput.value);
+  if (!eventId || isNaN(round)) return;
+  injectedEvents.push(eventId + '@' + round);
+  renderInjectedEvents();
+});
+
+function renderInjectedEvents() {
+  injectListEl.innerHTML = injectedEvents.map((ev, i) =>
+    '<div class="inject-item"><span>' + ev + '</span><span class="remove" data-idx="' + i + '">x</span></div>'
+  ).join('');
+  injectListEl.querySelectorAll('.remove').forEach(el => {
+    el.addEventListener('click', () => {
+      injectedEvents.splice(parseInt(el.dataset.idx), 1);
+      renderInjectedEvents();
+    });
+  });
+}
+
+// ============================================
+// WORLD SELECT
+// ============================================
+worldSelect.addEventListener('change', () => selectWorld(worldSelect.value));
+roundsSlider.addEventListener('input', () => { roundsVal.textContent = roundsSlider.value; });
+
+// ============================================
+// RUN SIMULATION
+// ============================================
+runBtn.addEventListener('click', async () => {
+  if (!currentWorld) return;
+  runBtn.disabled = true;
+  runBtn.textContent = 'Running...';
+
+  // Reset viewer state
+  totalInterventions = 0;
+  baselineImpacts = [];
+  governedImpacts = [];
+  chartLabels = [];
+  if (chart) { chart.destroy(); chart = null; }
+  agentsEl.innerHTML = '';
+  logEl.innerHTML = '';
+  document.getElementById('m-stability').textContent = '--';
+  document.getElementById('m-volatility').textContent = '--';
+  document.getElementById('m-round').textContent = '--';
+  document.getElementById('m-interventions').textContent = '0';
+
+  // Gather state overrides
+  const stateOverrides = {};
+  if (currentWorld.stateVariables) {
+    currentWorld.stateVariables.forEach(sv => {
+      const el = document.getElementById('sv-' + sv.id);
+      if (!el) return;
+      if (sv.type === 'number') stateOverrides[sv.id] = parseFloat(el.value);
+      else if (sv.type === 'boolean') stateOverrides[sv.id] = el.classList.contains('on');
+      else stateOverrides[sv.id] = el.value;
+    });
+  }
+
+  const selectedEngine = engineSelect.value;
+
+  try {
+    if (selectedEngine === 'nv-sim') {
+      // Built-in simulation
+      const config = {
+        worldId: currentWorld.id,
+        stateOverrides,
+        injectEvents: injectedEvents.length > 0 ? injectedEvents : undefined,
+        rounds: parseInt(roundsSlider.value),
+      };
+      await fetch('/api/run-sim', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(config),
+      });
+    } else {
+      // Live adapter (external simulator)
+      const payload = {
+        adapterId: selectedEngine,
+        worldId: currentWorld.id,
+        stateOverrides,
+      };
+      await fetch('/api/run-live', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload),
+      });
+    }
+  } catch (err) {
+    addLog('Error starting simulation: ' + err.message, 'block');
+    runBtn.disabled = false;
+    runBtn.textContent = 'Run Simulation';
+  }
+});
+
+// ============================================
+// SSE — Live stream
+// ============================================
+function connectSSE() {
+  const es = new EventSource('/events');
+  es.onmessage = (e) => {
+    try { handleEvent(JSON.parse(e.data)); } catch {}
+  };
+  es.onerror = () => {};
+}
+
+function initChart() {
+  if (typeof Chart === 'undefined') return;
+  const ctx = document.getElementById('chart');
+  chart = new Chart(ctx, {
+    type: 'line',
+    data: {
+      labels: chartLabels,
+      datasets: [
+        { label: 'Baseline', data: baselineImpacts, borderColor: '#ef4444', backgroundColor: 'rgba(239,68,68,0.1)', fill: true, tension: 0.3, pointRadius: 3 },
+        { label: 'Governed', data: governedImpacts, borderColor: '#4ade80', backgroundColor: 'rgba(74,222,128,0.1)', fill: true, tension: 0.3, pointRadius: 3 },
+      ]
+    },
+    options: {
+      animation: { duration: 400 },
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: { legend: { labels: { color: '#888', font: { family: 'monospace', size: 10 } } } },
+      scales: {
+        x: { ticks: { color: '#555' }, grid: { color: '#1a1a1a' } },
+        y: { ticks: { color: '#555' }, grid: { color: '#1a1a1a' }, min: -1, max: 1 }
+      }
+    }
+  });
+}
+
+function addLog(msg, cls) {
+  const entry = document.createElement('div');
+  entry.style.cssText = 'font-size:10px;color:#666;padding:3px 0;';
+  entry.textContent = msg;
+  logEl.prepend(entry);
+}
+
+function addTraceRound(event) {
+  const el = document.createElement('div');
+  el.className = 'trace-round';
+
+  const phaseCls = event.phase === 'baseline' ? 'baseline' : 'governed';
+  const volatilityPct = (event.maxVolatility * 100).toFixed(0);
+  el.innerHTML = '<div class="trace-round-header" onclick="this.nextElementSibling.dataset.collapsed = this.nextElementSibling.dataset.collapsed === \\'true\\' ? \\'false\\' : \\'true\\'">' +
+    '<span class="trace-phase ' + phaseCls + '">' + event.phase + '</span>' +
+    '<span class="trace-round-label">Round ' + event.round + ' / ' + event.totalRounds + '</span>' +
+    '<span class="trace-round-metrics">' +
+      '<span>avg: ' + event.avgImpact.toFixed(2) + '</span>' +
+      '<span>vol: ' + volatilityPct + '%</span>' +
+      (event.interventionCount > 0 ? '<span style="color:#fbbf24">' + event.interventionCount + ' interventions</span>' : '') +
+    '</span>' +
+  '</div>';
+
+  let bodyHtml = '';
+
+  // 1) Narrative events injected this round
+  const roundEvents = (typeof narrativeEventsByRound !== 'undefined' && narrativeEventsByRound[event.round]) || [];
+  if (roundEvents.length > 0) {
+    bodyHtml += '<div class="trace-section"><div class="trace-section-label event">Event Injection</div>';
+    roundEvents.forEach(function(ev) {
+      bodyHtml += '<div class="trace-event-item">' + ev.headline + ' <span class="trace-event-severity ' + ev.severity + '">' + ev.severity + '</span></div>';
+    });
+    bodyHtml += '</div><div class="trace-arrow">↓</div>';
+  }
+
+  // 2) Agent reactions (cap at 30 to prevent DOM bloat with thousands of agents)
+  var MAX_TRACE_AGENTS = 30;
+  bodyHtml += '<div class="trace-section"><div class="trace-section-label agents">Agent Reactions (' + event.reactions.length + ')</div>';
+  event.reactions.slice(0, MAX_TRACE_AGENTS).forEach(function(r) {
+    const impactCls = r.impact >= 0 ? 'positive' : 'negative';
+    bodyHtml += '<div class="trace-agent-item">' +
+      '<span class="trace-agent-name">' + r.stakeholder_id + '</span>' +
+      '<span class="trace-agent-action">' + r.reaction + '</span>' +
+      '<span class="trace-agent-impact ' + impactCls + '">' + r.impact.toFixed(2) + '</span>' +
+    '</div>';
+  });
+  if (event.reactions.length > MAX_TRACE_AGENTS) {
+    var traceRemaining = event.reactions.length - MAX_TRACE_AGENTS;
+    bodyHtml += '<div style="font-size:10px;color:#444;padding:3px 0 3px 11px;border-left:2px solid #3b82f6;margin-left:2px">+ ' + traceRemaining + ' more agents</div>';
+  }
+  bodyHtml += '</div>';
+
+  // 3) Governance interventions
+  const governed = event.reactions.filter(function(r) { return r.verdict && r.verdict.status !== 'ALLOW'; });
+  if (governed.length > 0) {
+    bodyHtml += '<div class="trace-arrow">↓</div>';
+    bodyHtml += '<div class="trace-section"><div class="trace-section-label governance">Governance Interventions</div>';
+    governed.forEach(function(r) {
+      bodyHtml += '<div class="trace-gov-item">' +
+        '<span class="verdict ' + r.verdict.status + '">' + r.verdict.status + '</span>' +
+        (r.verdict.ruleId ? '<span class="trace-gov-rule">[' + r.verdict.ruleId + ']</span>' : '') +
+        '<span class="trace-gov-reason">' + r.stakeholder_id + ': ' + (r.verdict.reason || '') + '</span>' +
+      '</div>';
+    });
+    bodyHtml += '</div>';
+  }
+
+  // 4) Emergent dynamics
+  if (event.dynamics && event.dynamics.length > 0) {
+    bodyHtml += '<div class="trace-arrow">↓</div>';
+    bodyHtml += '<div class="trace-section"><div class="trace-section-label" style="color:#7c3aed">Emergent Dynamics</div>';
+    event.dynamics.forEach(function(d) {
+      bodyHtml += '<div class="trace-dynamics">' + d + '</div>';
+    });
+    bodyHtml += '</div>';
+  }
+
+  const bodyEl = document.createElement('div');
+  bodyEl.className = 'trace-body';
+  bodyEl.dataset.collapsed = 'false';
+  bodyEl.innerHTML = bodyHtml;
+  el.appendChild(bodyEl);
+
+  logEl.prepend(el);
+}
+
+function renderAgents(reactions) {
+  var MAX_AGENT_ROWS = 50;
+  var shown = reactions.slice(0, MAX_AGENT_ROWS);
+  var html = shown.map(r => {
+    const pct = Math.abs(r.impact) * 50;
+    const cls = r.impact >= 0 ? 'positive' : 'negative';
+    const dir = r.impact >= 0 ? 'right:50%;width:' + pct + '%' : 'left:50%;width:' + pct + '%';
+    const verdictHtml = r.verdict ? ' <span class="verdict ' + r.verdict.status + '">' + r.verdict.status + '</span>' : '';
+    return '<div class="agent-row">' +
+      '<span class="agent-name">' + r.stakeholder_id + verdictHtml + '</span>' +
+      '<div class="impact-bar-bg"><div class="center-line"></div><div class="impact-bar ' + cls + '" style="' + dir + '"></div></div>' +
+      '<span class="impact-val">' + r.impact.toFixed(2) + '</span>' +
+      '</div>';
+  }).join('');
+  if (reactions.length > MAX_AGENT_ROWS) {
+    var remaining = reactions.length - MAX_AGENT_ROWS;
+    var avgImpact = reactions.slice(MAX_AGENT_ROWS).reduce(function(s, r) { return s + r.impact; }, 0) / remaining;
+    html += '<div class="agent-row" style="color:#555;font-size:10px;justify-content:center">+ ' + remaining + ' more agents (avg impact: ' + avgImpact.toFixed(2) + ')</div>';
+  }
+  agentsEl.innerHTML = html;
+}
+
+function handleEvent(event) {
+  if (event.type === 'meta') {
+    statusEl.className = 'status live';
+    statusEl.textContent = 'LIVE';
+    // Show simulation source
+    const src = event.source || 'nv-sim';
+    if (src !== 'nv-sim') {
+      traceSourceEl.textContent = '● ' + src.toUpperCase() + ' (LIVE)';
+      traceSourceEl.style.color = '#4ade80';
+      engineStatusEl.textContent = 'Streaming from ' + src;
+      engineStatusEl.style.color = '#4ade80';
+    } else {
+      traceSourceEl.textContent = '';
+      engineStatusEl.textContent = '';
+    }
+    addLog('Simulation started: ' + event.agents.length + ' agents, ' + event.totalRounds + ' rounds' + (src !== 'nv-sim' ? ' [source: ' + src + ']' : ''));
+    resetShiftTracker();
+    // Store narrative events by round for trace rendering
+    narrativeEventsByRound = {};
+    (event.narrativeEvents || []).forEach(function(ev) {
+      if (!narrativeEventsByRound[ev.round]) narrativeEventsByRound[ev.round] = [];
+      narrativeEventsByRound[ev.round].push(ev);
+    });
+    activeInvEl.innerHTML = event.invariants.map(inv =>
+      '<div class="inv-item">[' + inv.id + '] ' + inv.description + '</div>'
+    ).join('') + event.gates.map(g =>
+      '<div class="inv-item" style="color:' + (g.severity === 'critical' ? '#f87171' : '#fbbf24') + '">[' + g.id + '] ' + g.label + '</div>'
+    ).join('');
+    initChart();
+  }
+
+  if (event.type === 'round') {
+    if (event.phase === 'baseline') {
+      chartLabels.push('R' + event.round);
+      baselineImpacts.push(event.avgImpact);
+    } else {
+      governedImpacts.push(event.avgImpact);
+    }
+    if (chart) chart.update();
+
+    renderAgents(event.reactions);
+    document.getElementById('m-round').textContent = event.round + '/' + event.totalRounds;
+    document.getElementById('m-volatility').textContent = (event.maxVolatility * 100).toFixed(0) + '%';
+    document.getElementById('m-volatility').parentElement.className = 'metric-box ' + (event.maxVolatility > 0.6 ? 'bad' : event.maxVolatility > 0.4 ? 'warn' : 'good');
+
+    totalInterventions += event.interventionCount;
+    document.getElementById('m-interventions').textContent = totalInterventions;
+
+    // Track system shifts for the card
+    trackShift(event);
+
+    // Render structured trace entry instead of flat log line
+    addTraceRound(event);
+  }
+
+  if (event.type === 'complete') {
+    statusEl.className = 'status complete';
+    statusEl.textContent = 'COMPLETE';
+    const r = event.result;
+    if (r.governed) {
+      document.getElementById('m-stability').textContent = (r.governed.metrics.stabilityScore * 100).toFixed(0) + '%';
+      document.getElementById('m-stability').parentElement.className = 'metric-box ' + (r.governed.metrics.stabilityScore > 0.7 ? 'good' : 'warn');
+      addLog('Complete. Governance effectiveness: ' + (r.comparison.governanceEffectiveness * 100).toFixed(0) + '%');
+      renderSystemShift(r);
+      lastSimResult = {
+        stability: r.governed.metrics.stabilityScore,
+        volatility: r.governed.metrics.maxVolatility,
+        collapseProbability: r.governed.metrics.collapseProbability,
+        governanceEffectiveness: r.comparison.governanceEffectiveness,
+      };
+    }
+    runBtn.disabled = false;
+    runBtn.textContent = 'Run Simulation';
+  }
+}
+
+// ============================================
+// SYSTEM SHIFT CARD — The Demo Moment
+// ============================================
+const ssCard = document.getElementById('system-shift');
+const ssRuleEl = document.getElementById('ss-rule');
+const ssAdaptRateEl = document.getElementById('ss-adapt-rate');
+const ssAdaptDescEl = document.getElementById('ss-adapt-desc');
+const ssShiftsEl = document.getElementById('ss-shifts');
+const ssPatternsEl = document.getElementById('ss-patterns');
+const ssImpactsEl = document.getElementById('ss-impacts');
+const ssNarrativeEl = document.getElementById('ss-narrative');
+
+// Raw detail toggle
+document.getElementById('ss-raw-toggle').addEventListener('click', function() {
+  this.classList.toggle('open');
+  document.getElementById('ss-raw-detail').classList.toggle('open');
+});
+
+let shiftTracker = { blocks: 0, total: 0, shifts: {}, patterns: [], baselineVol: 0, governedVol: 0, narrative: '', rawGoverned: [] };
+
+function resetShiftTracker() {
+  shiftTracker = { blocks: 0, total: 0, shifts: {}, patterns: [], baselineVol: 0, governedVol: 0, narrative: '', rawGoverned: [] };
+  ssCard.classList.remove('visible');
+  var rawToggle = document.getElementById('ss-raw-toggle');
+  var rawDetail = document.getElementById('ss-raw-detail');
+  if (rawToggle) rawToggle.classList.remove('open');
+  if (rawDetail) rawDetail.classList.remove('open');
+}
+
+function trackShift(event) {
+  if (!event.reactions) return;
+  const governed = event.reactions.filter(function(r) { return r.verdict && r.verdict.status !== 'ALLOW'; });
+  shiftTracker.blocks += governed.length;
+  shiftTracker.total += event.reactions.length;
+  governed.forEach(function(r) {
+    const key = r.verdict.status + ': ' + (r.reaction || 'adapted');
+    shiftTracker.shifts[key] = (shiftTracker.shifts[key] || 0) + 1;
+    // Store raw governed reactions for detail view
+    shiftTracker.rawGoverned.push({
+      agent: r.stakeholder_id,
+      action: r.reaction,
+      status: r.verdict.status,
+      reason: r.verdict.reason || '',
+      round: event.round,
+    });
+  });
+  if (event.phase === 'baseline') shiftTracker.baselineVol = Math.max(shiftTracker.baselineVol, event.maxVolatility || 0);
+  if (event.phase === 'governed') shiftTracker.governedVol = Math.max(shiftTracker.governedVol, event.maxVolatility || 0);
+  if (event.dynamics) {
+    event.dynamics.forEach(function(d) {
+      if (shiftTracker.patterns.indexOf(d) === -1) shiftTracker.patterns.push(d);
+    });
+  }
+}
+
+function renderSystemShift(result) {
+  if (shiftTracker.blocks === 0) return;
+
+  var adaptRate = shiftTracker.total > 0 ? Math.round((shiftTracker.blocks / shiftTracker.total) * 100) : 0;
+
+  // Determine rule label from world
+  var ruleName = 'Governance Rules Active';
+  if (currentWorld && currentWorld.invariants) {
+    var names = currentWorld.invariants.map(function(inv) { return inv.description || inv.id; });
+    ruleName = names.slice(0, 2).join(' + ');
+  }
+
+  ssRuleEl.textContent = ruleName;
+  ssAdaptRateEl.textContent = adaptRate + '%';
+  ssAdaptDescEl.textContent = 'adaptation across ' + shiftTracker.total.toLocaleString() + ' agents';
+
+  // Scale line — proves this is real
+  var scaleEl = document.getElementById('ss-scale');
+  scaleEl.innerHTML = '<strong>' + shiftTracker.blocks.toLocaleString() + '</strong> actions reshaped out of <strong>' + shiftTracker.total.toLocaleString() + '</strong> total';
+
+  // Shifts — show top 5 by count, collapse the rest
+  var shiftHtml = '';
+  var shiftKeys = Object.keys(shiftTracker.shifts).sort(function(a, b) {
+    return shiftTracker.shifts[b] - shiftTracker.shifts[a];
+  });
+  var MAX_SHIFTS = 5;
+  shiftKeys.slice(0, MAX_SHIFTS).forEach(function(k) {
+    shiftHtml += '<div class="ss-shift-item"><span class="ss-shift-arrow">→</span> ' + k + ' (' + shiftTracker.shifts[k] + ' agents)</div>';
+  });
+  if (shiftKeys.length > MAX_SHIFTS) {
+    var remaining = shiftKeys.slice(MAX_SHIFTS).reduce(function(sum, k) { return sum + shiftTracker.shifts[k]; }, 0);
+    shiftHtml += '<div class="ss-shift-item" style="color:#555">+ ' + (shiftKeys.length - MAX_SHIFTS) + ' more patterns (' + remaining + ' agents)</div>';
+  }
+  ssShiftsEl.innerHTML = shiftHtml;
+
+  // Patterns
+  var patternHtml = '';
+  if (shiftTracker.patterns.length > 0) {
+    shiftTracker.patterns.forEach(function(p) {
+      patternHtml += '<span class="ss-pattern-tag">' + p + '</span>';
+    });
+  } else {
+    // Infer patterns from data
+    if (shiftTracker.blocks >= 3) patternHtml += '<span class="ss-pattern-tag">Coordinated Holding</span>';
+    if (shiftTracker.blocks >= 2) patternHtml += '<span class="ss-pattern-tag">Panic Suppression</span>';
+    if (shiftTracker.governedVol < shiftTracker.baselineVol) patternHtml += '<span class="ss-pattern-tag">Stability Shift</span>';
+  }
+  ssPatternsEl.innerHTML = patternHtml || '<span style="font-size:11px;color:#555">No emergent patterns detected</span>';
+
+  // Impact
+  var impactHtml = '';
+  var volDelta = shiftTracker.governedVol - shiftTracker.baselineVol;
+  impactHtml += '<div class="ss-impact-row"><span>Volatility</span><span class="ss-impact-delta' + (volDelta > 0 ? ' negative' : '') + '">' +
+    (shiftTracker.baselineVol * 100).toFixed(0) + '% → ' + (shiftTracker.governedVol * 100).toFixed(0) + '%</span></div>';
+
+  if (result && result.governed && result.baseline) {
+    var stabDelta = result.governed.metrics.stabilityScore - result.baseline.metrics.stabilityScore;
+    impactHtml += '<div class="ss-impact-row"><span>Stability</span><span class="ss-impact-delta">' +
+      (result.baseline.metrics.stabilityScore * 100).toFixed(0) + '% → ' + (result.governed.metrics.stabilityScore * 100).toFixed(0) + '%</span></div>';
+
+    var cascadeAvoided = result.governed.metrics.collapseProbability < result.baseline.metrics.collapseProbability;
+    if (cascadeAvoided) {
+      impactHtml += '<div class="ss-impact-row"><span>Cascade</span><span class="ss-impact-delta">Avoided</span></div>';
+    }
+  }
+  ssImpactsEl.innerHTML = impactHtml;
+
+  // Narrative — tight cause → shift → outcome
+  var topShift = shiftKeys.length > 0 ? shiftKeys[0].split(': ')[1] || 'adapted' : 'adapted';
+  var narrative = '';
+
+  // What was the rule?
+  narrative += ruleName + '. ';
+
+  // What shifted?
+  narrative += shiftTracker.blocks + ' of ' + shiftTracker.total + ' agents reorganized';
+  if (topShift !== 'adapted') narrative += ' — most shifted to ' + topShift;
+  narrative += '. ';
+
+  // What emerged?
+  if (shiftTracker.patterns.length > 0) {
+    narrative += 'Pattern: ' + shiftTracker.patterns.slice(0, 2).join(', ') + '. ';
+  }
+
+  // What was the outcome?
+  if (volDelta < 0) narrative += 'Volatility dropped ' + Math.abs(volDelta * 100).toFixed(0) + '%.';
+  else if (volDelta === 0) narrative += 'System held steady.';
+  else narrative += 'Volatility increased ' + (volDelta * 100).toFixed(0) + '% — rules need tuning.';
+
+  ssNarrativeEl.textContent = narrative;
+
+  // Raw detail — virtualized list of governed actions (collapsed by default)
+  var rawListEl = document.getElementById('ss-raw-list');
+  var MAX_RAW = 100;
+  var rawItems = shiftTracker.rawGoverned.slice(0, MAX_RAW);
+  var rawHtml = rawItems.map(function(r) {
+    return '<div class="ss-raw-item">' +
+      '<span class="raw-agent">' + r.agent + '</span>' +
+      '<span class="raw-action">R' + r.round + ': ' + r.action + '</span>' +
+      '<span class="raw-verdict ' + r.status + '">' + r.status + '</span>' +
+    '</div>';
+  }).join('');
+  if (shiftTracker.rawGoverned.length > MAX_RAW) {
+    rawHtml += '<div style="font-size:10px;color:#444;padding:4px 0">+ ' + (shiftTracker.rawGoverned.length - MAX_RAW) + ' more governed actions</div>';
+  }
+  rawListEl.innerHTML = rawHtml;
+
+  ssCard.classList.add('visible');
+}
+
+// ============================================
+// WORLD VARIANTS — Save / Load / Delete
+// ============================================
+const variantListEl = document.getElementById('variant-list');
+const saveBtn = document.getElementById('save-btn');
+const saveForm = document.getElementById('save-form');
+const confirmSaveBtn = document.getElementById('confirm-save-btn');
+const cancelSaveBtn = document.getElementById('cancel-save-btn');
+const variantNameInput = document.getElementById('variant-name');
+const variantDescInput = document.getElementById('variant-desc');
+let lastSimResult = null;
+
+saveBtn.addEventListener('click', () => {
+  saveForm.style.display = saveForm.style.display === 'none' ? '' : 'none';
+  variantNameInput.focus();
+});
+
+cancelSaveBtn.addEventListener('click', () => {
+  saveForm.style.display = 'none';
+});
+
+confirmSaveBtn.addEventListener('click', async () => {
+  const name = variantNameInput.value.trim();
+  if (!name || !currentWorld) return;
+
+  // Gather current state overrides
+  const stateOverrides = {};
+  if (currentWorld.stateVariables) {
+    currentWorld.stateVariables.forEach(sv => {
+      const el = document.getElementById('sv-' + sv.id);
+      if (!el) return;
+      if (sv.type === 'number') stateOverrides[sv.id] = parseFloat(el.value);
+      else if (sv.type === 'boolean') stateOverrides[sv.id] = el.classList.contains('on');
+      else stateOverrides[sv.id] = el.value;
+    });
+  }
+
+  const payload = {
+    name,
+    description: variantDescInput.value.trim(),
+    baseWorld: currentWorld.id,
+    stateOverrides,
+    events: injectedEvents.slice(),
+    rounds: parseInt(roundsSlider.value),
+    lastResult: lastSimResult,
+  };
+
+  try {
+    const resp = await fetch('/api/save-variant', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(payload),
+    });
+    const data = await resp.json();
+    if (data.status === 'saved') {
+      addLog('Variant saved: ' + data.variant.name + ' (' + data.variant.id + ')', '');
+      saveForm.style.display = 'none';
+      variantNameInput.value = '';
+      variantDescInput.value = '';
+      await loadVariants();
+    }
+  } catch (err) {
+    addLog('Error saving variant: ' + err.message, 'block');
+  }
+});
+
+async function loadVariants() {
+  try {
+    const resp = await fetch('/api/variants');
+    const data = await resp.json();
+    renderVariants(data.variants || []);
+  } catch {}
+}
+
+function renderVariants(variants) {
+  if (variants.length === 0) {
+    variantListEl.innerHTML = '<div style="font-size:11px;color:#333">No saved variants yet</div>';
+    return;
+  }
+  variantListEl.innerHTML = variants.map(v => {
+    const resultHtml = v.lastResult
+      ? '<span class="vresult">Stability: ' + (v.lastResult.stability * 100).toFixed(0) + '% | Effectiveness: ' + (v.lastResult.governanceEffectiveness * 100).toFixed(0) + '%</span>'
+      : '<span style="color:#555">Not yet run</span>';
+    return '<div class="variant-card" data-vid="' + v.id + '">' +
+      '<div class="vname">' + v.name + '</div>' +
+      (v.description ? '<div class="vdesc">' + v.description + '</div>' : '') +
+      '<span class="vbase">' + v.baseWorld + '</span>' +
+      '<div class="vmeta">' + resultHtml + ' | ' + v.events.length + ' events | ' + v.rounds + ' rounds</div>' +
+      '<span class="vdelete" data-vid="' + v.id + '">delete</span>' +
+      '</div>';
+  }).join('');
+
+  // Bind load handlers
+  variantListEl.querySelectorAll('.variant-card').forEach(card => {
+    card.addEventListener('click', (e) => {
+      if (e.target.classList.contains('vdelete')) return;
+      const vid = card.dataset.vid;
+      const v = variants.find(x => x.id === vid);
+      if (v) loadVariant(v);
+    });
+  });
+
+  // Bind delete handlers
+  variantListEl.querySelectorAll('.vdelete').forEach(el => {
+    el.addEventListener('click', async (e) => {
+      e.stopPropagation();
+      const vid = el.dataset.vid;
+      if (!confirm('Delete variant "' + vid + '"?')) return;
+      try {
+        await fetch('/api/delete-variant/' + vid, { method: 'DELETE' });
+        addLog('Variant deleted: ' + vid, '');
+        await loadVariants();
+      } catch {}
+    });
+  });
+}
+
+function loadVariant(variant) {
+  // Set world
+  selectWorld(variant.baseWorld);
+
+  // Apply state overrides
+  if (variant.stateOverrides && currentWorld && currentWorld.stateVariables) {
+    currentWorld.stateVariables.forEach(sv => {
+      if (sv.id in variant.stateOverrides) {
+        const el = document.getElementById('sv-' + sv.id);
+        if (!el) return;
+        if (sv.type === 'boolean') {
+          const val = variant.stateOverrides[sv.id];
+          if (val && !el.classList.contains('on')) el.classList.add('on');
+          if (!val && el.classList.contains('on')) el.classList.remove('on');
+        } else {
+          el.value = variant.stateOverrides[sv.id];
+          // Update value display for sliders
+          const valEl = document.getElementById('sv-val-' + sv.id);
+          if (valEl) valEl.textContent = variant.stateOverrides[sv.id];
+        }
+      }
+    });
+  }
+
+  // Set events
+  injectedEvents = variant.events.slice();
+  renderInjectedEvents();
+
+  // Set rounds
+  roundsSlider.value = Math.min(variant.rounds, 12);
+  roundsVal.textContent = Math.min(variant.rounds, 12);
+
+  addLog('Loaded variant: ' + variant.name, '');
+}
+
+// ============================================
+// CAPTURE LAST RESULT FOR VARIANT SAVING
+// ============================================
+// (override handleEvent to capture results)
+const _origHandleEvent = handleEvent;
+handleEvent = function(event) {
+  _origHandleEvent(event);
+  if (event.type === 'complete' && event.result && event.result.governed) {
+    lastSimResult = {
+      stability: event.result.governed.metrics.stabilityScore,
+      volatility: event.result.governed.metrics.maxVolatility,
+      collapseProbability: event.result.governed.metrics.collapseProbability,
+      governanceEffectiveness: event.result.comparison.governanceEffectiveness,
+    };
+  }
+};
+
+// ============================================
+// BOOT
+// ============================================
+init();
+<\/script>
+</body>
+</html>`;