@neuroverseos/nv-sim 0.1.2 → 0.1.5

package/dist/engine/liveVisualizer.js

@@ -0,0 +1,4284 @@
+"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 auditTrace_1 = require("./auditTrace");
+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.
+ */
+/**
+ * Parse a single plain-English rule into a guard definition.
+ * No LLM needed — pattern matching on common financial governance phrases.
+ */
+function parseNaturalLanguageRule(line, index) {
+    const lower = line.toLowerCase().trim();
+    if (!lower)
+        return null;
+    // Determine enforcement action
+    let enforcement = "block";
+    if (/^(allow|permit|enable)\b/.test(lower))
+        enforcement = "allow";
+    else if (/^(pause|review|flag|hold|require.*review|require.*approval)\b/.test(lower))
+        enforcement = "pause";
+    else if (/^(block|ban|prevent|prohibit|stop|forbid|disallow|no\b|don.t allow)\b/.test(lower))
+        enforcement = "block";
+    else if (/^limit\b/.test(lower))
+        enforcement = "block";
+    // Extract intent patterns from the rule text
+    const patterns = [];
+    const actionWords = {
+        "panic sell": ["panic_sell", "panic sell", "panic selling"],
+        "panic buy": ["panic_buy", "panic buy", "panic buying"],
+        "short sell": ["short", "short_sell", "short selling", "shorting"],
+        "leverage": ["increase_leverage", "increase leverage", "max leverage", "excessive leverage"],
+        "large trade": ["large_trade", "large trade", "bulk trade", "big trade"],
+        "aggressive": ["aggressive_buy", "aggressive buy", "aggressive_short", "aggressive short"],
+        "flash": ["flash_trade", "flash trade", "high_frequency"],
+        "margin": ["margin_call", "margin call", "increase_margin"],
+        "liquidat": ["liquidate", "liquidation", "force_liquidate"],
+        "hedge": ["hedge", "hedging", "hedge_position"],
+        "buy": ["buy", "aggressive_buy"],
+        "sell": ["sell", "selling"],
+        "trade": ["trade", "trading"],
+        "withdraw": ["withdraw", "withdrawal", "bank_run"],
+        "circuit breaker": ["circuit_breaker", "halt_trading", "trading_halt"],
+    };
+    for (const [keyword, intents] of Object.entries(actionWords)) {
+        if (lower.includes(keyword)) {
+            patterns.push(...intents);
+        }
+    }
+    // Fallback: extract quoted terms or the main noun phrase
+    if (patterns.length === 0) {
+        const quoted = line.match(/"([^"]+)"/g);
+        if (quoted) {
+            quoted.forEach(q => {
+                const term = q.replace(/"/g, "").trim();
+                patterns.push(term, term.replace(/\s+/g, "_"));
+            });
+        }
+        else {
+            // Extract the action part after block/allow/pause
+            const actionPart = lower.replace(/^(block|ban|prevent|prohibit|stop|forbid|disallow|allow|permit|enable|pause|review|flag|hold|limit|no|don.t allow)\s+/i, "").trim();
+            if (actionPart) {
+                patterns.push(actionPart, actionPart.replace(/\s+/g, "_"));
+            }
+        }
+    }
+    // Deduplicate
+    const uniquePatterns = [...new Set(patterns)];
+    if (uniquePatterns.length === 0)
+        return null;
+    return {
+        id: `custom-rule-${index}`,
+        description: line,
+        enforcement,
+        intent_patterns: uniquePatterns,
+        category: "custom",
+    };
+}
+function startInteractiveServer(port, onReady) {
+    const clients = new Set();
+    let isRunning = false;
+    // ── Persistent Audit Trail ──
+    // Every governance verdict is written to disk as JSONL
+    const auditTrail = new auditTrace_1.AuditTrail();
+    // Custom guards from plain-English rule editor (session-scoped)
+    const customGuards = [];
+    let currentSession = {
+        id: `session_${Date.now()}_${Math.random().toString(36).slice(2, 6)}`,
+        startedAt: new Date().toISOString(),
+        world: "trading",
+        guardCount: 0,
+        evaluations: [],
+    };
+    // Session snapshots for multi-run comparison
+    const sessionHistory = [];
+    // ── Bridge Metrics Tracker ──
+    // Computes meaningful live metrics from external /api/evaluate calls
+    let bridgeEvalCount = 0;
+    let bridgeBlockCount = 0;
+    let bridgeModifyCount = 0;
+    function computeBridgeMetrics(decision) {
+        bridgeEvalCount++;
+        if (decision === "BLOCK")
+            bridgeBlockCount++;
+        if (decision === "MODIFY")
+            bridgeModifyCount++;
+        const totalInterventions = bridgeBlockCount + bridgeModifyCount;
+        // Stability = ratio of non-blocked actions (higher = more stable)
+        const stability = bridgeEvalCount > 0 ? (bridgeEvalCount - bridgeBlockCount) / bridgeEvalCount : 1;
+        // Volatility = ratio of interventions (blocks + modifies) — more interventions = more volatile
+        const volatility = bridgeEvalCount > 0 ? totalInterventions / bridgeEvalCount : 0;
+        return { stability, volatility, totalInterventions, evalCount: bridgeEvalCount };
+    }
+    function synthesizeSessionReport() {
+        // Gather all sessions to report on (history + current if it has data)
+        const allSessions = [
+            ...sessionHistory,
+            ...(currentSession.evaluations.length > 0 ? [currentSession] : []),
+        ];
+        if (allSessions.length === 0) {
+            return {
+                sessionId: currentSession.id,
+                scenario: "Live governance session (no evaluations yet)",
+                runs: [],
+                divergence: {
+                    stabilityTrend: [],
+                    collapseTrend: [],
+                    effectivenessTrend: [],
+                    bestIteration: 0,
+                    worstIteration: 0,
+                    totalDivergence: 0,
+                    narrative: "No evaluations recorded. Send actions to POST /api/evaluate to begin.",
+                },
+                recommendation: "Start sending agent actions to /api/evaluate to generate governance data.",
+                generatedAt: new Date().toISOString(),
+            };
+        }
+        const runs = allSessions.map((sess, idx) => {
+            const evals = sess.evaluations;
+            const total = evals.length;
+            const blocked = evals.filter(e => e.decision === "BLOCK").length;
+            const modified = evals.filter(e => e.decision === "MODIFY").length;
+            const allowed = evals.filter(e => e.decision === "ALLOW").length;
+            // Synthesize metrics from real evaluation data
+            const blockRate = total > 0 ? blocked / total : 0;
+            const interventionRate = total > 0 ? (blocked + modified) / total : 0;
+            // Stability: higher when governance is actively catching harmful actions
+            // If nothing is blocked, either the system is clean OR governance is too weak
+            const stabilityScore = total > 0
+                ? Math.min(0.95, 0.4 + interventionRate * 0.4 + (allowed / Math.max(1, total)) * 0.2)
+                : 0.5;
+            // Collapse probability: lower when more harmful actions are caught
+            const collapseProbability = total > 0
+                ? Math.max(0.02, 0.6 - interventionRate * 0.5 - blockRate * 0.15)
+                : 0.5;
+            // Governance effectiveness: composite of intervention quality
+            const governanceEffectiveness = total > 0
+                ? Math.min(0.95, interventionRate * 0.6 + blockRate * 0.3 + (total > 10 ? 0.1 : 0))
+                : 0;
+            // Unique rules that fired
+            const triggeredRules = [...new Set(evals.filter(e => e.ruleId).map(e => e.ruleId))];
+            // Unique actors and actions
+            const uniqueActors = [...new Set(evals.map(e => e.actor))];
+            const uniqueActions = [...new Set(evals.map(e => e.action))];
+            return {
+                iteration: idx + 1,
+                worldName: sess.world || "live-session",
+                ruleCount: sess.guardCount,
+                gateCount: 0,
+                metrics: {
+                    avgImpact: interventionRate > 0 ? -(interventionRate * 0.5) : 0.1,
+                    collapseProbability,
+                    stabilityScore,
+                    coalitionRisks: 0,
+                    polarizationEvents: 0,
+                    peakNegativeSentiment: blockRate > 0.3 ? -0.6 : -0.2,
+                    consensusRounds: 0,
+                    maxVolatility: blockRate > 0.2 ? 0.7 : 0.3,
+                },
+                comparison: {
+                    collapseReduction: collapseProbability < 0.5 ? (0.6 - collapseProbability) : 0,
+                    stabilityImprovement: stabilityScore > 0.5 ? (stabilityScore - 0.4) : 0,
+                    volatilityReduction: interventionRate * 0.5,
+                    coalitionRiskReduction: 0,
+                    governanceEffectiveness,
+                    narrative: total > 0
+                        ? `${total} actions evaluated: ${blocked} blocked, ${modified} modified, ${allowed} allowed across ${uniqueActors.length} agent(s) performing ${uniqueActions.length} action type(s).`
+                        : "No evaluations in this session.",
+                },
+                governanceStats: {
+                    engineLoaded: true,
+                    totalEvaluations: total,
+                    verdicts: { allow: allowed, block: blocked, pause: modified },
+                    rulesFired: triggeredRules.length,
+                    worldCollapsed: false,
+                    finalViability: stabilityScore > 0.6 ? "stable" : stabilityScore > 0.4 ? "at-risk" : "critical",
+                    invariantsChecked: sess.guardCount,
+                    triggeredGuards: triggeredRules,
+                },
+            };
+        });
+        // Compute rule changes between sessions
+        for (let i = 1; i < runs.length; i++) {
+            const prev = allSessions[i - 1];
+            const curr = allSessions[i];
+            if (prev.guardCount !== curr.guardCount) {
+                runs[i].ruleChanges = {
+                    added: [],
+                    removed: [],
+                    gatesAdded: [],
+                    gatesRemoved: [],
+                    thesisChanged: prev.world !== curr.world,
+                };
+            }
+        }
+        // Divergence analysis
+        const stabilityTrend = runs.map(r => r.metrics.stabilityScore);
+        const collapseTrend = runs.map(r => r.metrics.collapseProbability);
+        const effectivenessTrend = runs.map(r => r.comparison.governanceEffectiveness);
+        let bestIteration = 1;
+        let worstIteration = 1;
+        let bestScore = -Infinity;
+        let worstScore = Infinity;
+        for (const run of runs) {
+            if (run.comparison.governanceEffectiveness > bestScore) {
+                bestScore = run.comparison.governanceEffectiveness;
+                bestIteration = run.iteration;
+            }
+            if (run.comparison.governanceEffectiveness < worstScore) {
+                worstScore = run.comparison.governanceEffectiveness;
+                worstIteration = run.iteration;
+            }
+        }
+        let totalDivergence = 0;
+        for (let i = 1; i < runs.length; i++) {
+            totalDivergence += Math.abs(runs[i].metrics.stabilityScore - runs[i - 1].metrics.stabilityScore);
+            totalDivergence += Math.abs(runs[i].metrics.collapseProbability - runs[i - 1].metrics.collapseProbability);
+            totalDivergence += Math.abs(runs[i].comparison.governanceEffectiveness - runs[i - 1].comparison.governanceEffectiveness);
+        }
+        // Build narrative
+        const totalEvals = allSessions.reduce((sum, s) => sum + s.evaluations.length, 0);
+        const totalBlocked = allSessions.reduce((sum, s) => sum + s.evaluations.filter(e => e.decision === "BLOCK").length, 0);
+        const narrativeParts = [];
+        narrativeParts.push(`${allSessions.length} session(s), ${totalEvals} total evaluations, ${totalBlocked} blocked.`);
+        if (runs.length > 1) {
+            const stabDelta = stabilityTrend[stabilityTrend.length - 1] - stabilityTrend[0];
+            if (stabDelta > 0.05)
+                narrativeParts.push(`Stability improved ${(stabDelta * 100).toFixed(0)}pp across sessions.`);
+            narrativeParts.push(`Best outcome: session ${bestIteration}.`);
+        }
+        const best = runs[bestIteration - 1];
+        const recommendation = runs.length === 1
+            ? `Single session: ${best.governanceStats.totalEvaluations} evaluations, ${best.governanceStats.verdicts.block} blocked. Apply different rules and reset to compare.`
+            : `Best session: #${bestIteration} ("${best.worldName}") — ${(best.comparison.governanceEffectiveness * 100).toFixed(0)}% effectiveness, ${(best.metrics.stabilityScore * 100).toFixed(0)}% stability.`;
+        return {
+            sessionId: currentSession.id,
+            scenario: `Live governance — ${currentSession.world}`,
+            runs,
+            divergence: {
+                stabilityTrend,
+                collapseTrend,
+                effectivenessTrend,
+                bestIteration,
+                worstIteration,
+                totalDivergence: Number(totalDivergence.toFixed(3)),
+                narrative: narrativeParts.join(" "),
+            },
+            recommendation,
+            generatedAt: new Date().toISOString(),
+        };
+    }
+    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;
+        }
+        // Inject custom rules as first-class invariants (not just guards)
+        // This ensures user rules affect BOTH governance paths:
+        //   1. Guard engine (intent-level blocking) — already wired via customGuards[]
+        //   2. Invariant engine (system-level stability shaping) — wired here
+        if (customGuards.length > 0) {
+            const customInvariants = customGuards.map(cg => ({
+                id: cg.id,
+                description: cg.description,
+                enforceable: cg.enforcement === "block",
+            }));
+            world.invariants = [...world.invariants, ...customInvariants];
+        }
+        // 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,
+                enforcement: inv.enforceable ? "full" : "advisory",
+                source: inv.id.startsWith("custom-rule-") ? "user" : "world",
+            })),
+            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", "science_research"];
+            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) {
+                    // Detect world type from request — social media worlds get social guards,
+                    // financial worlds get trading guards, unknown gets both.
+                    const isSocial = payload.world === "social-media" || payload.world === "social"
+                        || ["create_post", "like_post", "repost", "follow", "unfollow", "create_comment",
+                            "search_posts", "mute", "unmute", "trend"].includes(payload.action);
+                    const financialGuards = [
+                        {
+                            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,
+                        },
+                    ];
+                    // Social media guards for MiroFish/OASIS agent actions.
+                    // These govern what AI agents can do on simulated social platforms.
+                    const socialGuards = [
+                        {
+                            id: "social-harmful-content",
+                            label: "Block harmful content creation",
+                            description: "Prevents agents from posting content that incites panic, spreads disinformation, or promotes harmful behavior",
+                            category: "structural",
+                            enforcement: "block",
+                            immutable: true,
+                            intent_patterns: ["create_post", "create_comment", "quote_post"],
+                            content_patterns: ["panic", "crash", "collaps", "sell everything", "market is dead", "scam", "rug pull", "ponzi"],
+                            default_enabled: true,
+                        },
+                        {
+                            id: "social-coordinated-manipulation",
+                            label: "Block coordinated manipulation",
+                            description: "Prevents agents from engaging in coordinated inauthentic behavior like mass following, mass liking, or brigading",
+                            category: "structural",
+                            enforcement: "block",
+                            immutable: true,
+                            intent_patterns: ["follow", "like_post", "repost"],
+                            default_enabled: true,
+                        },
+                        {
+                            id: "social-spam-prevention",
+                            label: "Pause high-frequency posting",
+                            description: "Rate-limits agents that post too frequently, preventing spam and platform flooding",
+                            category: "operational",
+                            enforcement: "pause",
+                            immutable: false,
+                            intent_patterns: ["create_post", "create_comment", "repost", "quote_post"],
+                            default_enabled: true,
+                        },
+                        {
+                            id: "social-engagement-farming",
+                            label: "Block engagement farming",
+                            description: "Prevents agents from like-bombing, follow-unfollowing, or other engagement manipulation tactics",
+                            category: "operational",
+                            enforcement: "block",
+                            immutable: false,
+                            intent_patterns: ["like_post", "unlike_post", "follow", "unfollow"],
+                            default_enabled: true,
+                        },
+                    ];
+                    const guards = isSocial ? socialGuards : financialGuards;
+                    // Build intent vocabulary from selected guards
+                    const intentVocabulary = {};
+                    for (const g of guards) {
+                        for (const pat of g.intent_patterns) {
+                            if (!intentVocabulary[pat]) {
+                                intentVocabulary[pat] = { label: pat.replace(/_/g, " ").replace(/\b\w/g, c => c.toUpperCase()), pattern: pat };
+                            }
+                        }
+                    }
+                    nvWorld.guards = { guards, intent_vocabulary: intentVocabulary };
+                }
+                // Inject custom guards from plain-English rule editor
+                if (customGuards.length > 0 && nvWorld.guards) {
+                    const existingGuards = nvWorld.guards.guards;
+                    for (const cg of customGuards) {
+                        existingGuards.push({
+                            id: cg.id,
+                            label: cg.label,
+                            description: cg.description,
+                            category: cg.category,
+                            enforcement: cg.enforcement,
+                            immutable: false,
+                            intent_patterns: cg.intent_patterns,
+                            default_enabled: true,
+                        });
+                        // Add patterns to vocabulary
+                        for (const pat of cg.intent_patterns) {
+                            nvWorld.guards.intent_vocabulary[pat] = { label: pat, pattern: pat };
+                        }
+                    }
+                }
+                // Content-aware governance for social media actions.
+                // The guard engine matches intent against intent_patterns, but for social media
+                // we also need to check message content for harmful patterns.
+                const messageContent = typeof payload.payload?.message === "string"
+                    ? payload.payload.message.toLowerCase()
+                    : typeof payload.payload?.content === "string"
+                        ? payload.payload.content.toLowerCase()
+                        : "";
+                const contentPatterns = ["panic", "crash", "collaps", "sell everything", "market is dead",
+                    "scam", "rug pull", "ponzi", "buy now or lose", "guaranteed returns", "get rich"];
+                const hasHarmfulContent = messageContent.length > 0
+                    && contentPatterns.some(p => messageContent.includes(p));
+                // If content is harmful and action is content-creating, short-circuit to BLOCK
+                const isContentAction = ["create_post", "create_comment", "quote_post", "repost"].includes(payload.action);
+                if (hasHarmfulContent && isContentAction) {
+                    const matchedPattern = contentPatterns.find(p => messageContent.includes(p)) ?? "harmful content";
+                    broadcast({
+                        type: "round",
+                        round: 0,
+                        totalRounds: 0,
+                        phase: "governed",
+                        reactions: [{
+                                stakeholder_id: payload.actor,
+                                reaction: payload.action,
+                                impact: 0,
+                                confidence: 0.9,
+                                trigger: "bridge",
+                                verdict: { status: "BLOCK", reason: `Content violates governance: "${matchedPattern}" detected`, ruleId: "social-harmful-content" },
+                            }],
+                        avgImpact: 0,
+                        maxVolatility: 0,
+                        dynamics: [],
+                        interventionCount: 1,
+                    });
+                    // Record in session
+                    currentSession.evaluations.push({
+                        actor: payload.actor, action: payload.action, decision: "BLOCK",
+                        reason: `Content blocked: "${matchedPattern}" detected`,
+                        ruleId: "social-harmful-content", world: payload.world ?? currentSession.world,
+                        timestamp: Date.now(), payload: payload.payload,
+                    });
+                    jsonResponse(res, 200, {
+                        decision: "BLOCK",
+                        reason: `Content blocked: "${matchedPattern}" detected in ${payload.action} — violates social media governance policy`,
+                        rule_id: "social-harmful-content",
+                        evidence: { matched_pattern: matchedPattern, action: payload.action, actor: payload.actor },
+                        modified_action: null,
+                    });
+                    return;
+                }
+                // 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", "create_post", "repost", "quote_post"].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";
+                // Compute live metrics from cumulative bridge evaluations
+                const bridgeMetrics = computeBridgeMetrics(decision);
+                // Broadcast governance event to connected SSE clients
+                broadcast({
+                    type: "round",
+                    round: bridgeMetrics.evalCount,
+                    totalRounds: 0,
+                    phase: "governed",
+                    reactions: [{
+                            stakeholder_id: payload.actor,
+                            reaction: payload.action,
+                            impact: decision === "BLOCK" ? -0.8 : decision === "MODIFY" ? -0.3 : 0.1,
+                            confidence: 0.5,
+                            trigger: "bridge",
+                            verdict: { status: verdict.status, reason: verdict.reason, ruleId: verdict.ruleId },
+                        }],
+                    avgImpact: decision === "BLOCK" ? -0.8 : decision === "MODIFY" ? -0.3 : 0.1,
+                    maxVolatility: bridgeMetrics.volatility,
+                    dynamics: [],
+                    interventionCount: decision !== "ALLOW" ? 1 : 0,
+                });
+                // Also broadcast a stability update so the metric refreshes live
+                broadcast({
+                    type: "bridge_metrics",
+                    stability: bridgeMetrics.stability,
+                    volatility: bridgeMetrics.volatility,
+                    evalCount: bridgeMetrics.evalCount,
+                    totalInterventions: bridgeMetrics.totalInterventions,
+                });
+                // Record in session
+                currentSession.evaluations.push({
+                    actor: payload.actor, action: payload.action,
+                    decision: decision,
+                    reason: verdict.reason ?? "", ruleId: verdict.ruleId ?? null,
+                    world: payload.world ?? currentSession.world,
+                    timestamp: Date.now(), payload: payload.payload,
+                });
+                currentSession.guardCount = customGuards.length + (nvWorld.guards?.guards?.length ?? 0);
+                // Persist to audit trail on disk
+                auditTrail.logVerdict({
+                    agent: payload.actor,
+                    action: payload.action,
+                    actionType: payload.payload?.type ?? "unknown",
+                    verdict: decision,
+                    reason: verdict.reason ?? "",
+                    confidence: verdict.confidence ?? 0.5,
+                    rulesFired: verdict.ruleId ? [{
+                            id: verdict.ruleId,
+                            description: verdict.reason ?? "",
+                            effect: decision === "BLOCK" ? "blocked" : decision === "MODIFY" ? "dampened" : "monitored",
+                            impactReduction: decision === "BLOCK" ? 1 : decision === "MODIFY" ? 0.5 : 0,
+                        }] : [],
+                    worldState: payload.world ?? currentSession.world,
+                });
+                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) {
+                // Record fail-open in session (payload may be out of scope if JSON parse failed)
+                currentSession.evaluations.push({
+                    actor: "unknown", action: "unknown",
+                    decision: "ALLOW", reason: "Governance evaluation error — fail open",
+                    ruleId: null, world: currentSession.world, timestamp: Date.now(),
+                });
+                // 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;
+        }
+        // ── Plain-English Rule Parser ──
+        // Parses natural language rules into guard definitions (local, no LLM needed)
+        if (req.url === "/api/parse-rules" && req.method === "POST") {
+            try {
+                const body = await readBody(req);
+                const payload = JSON.parse(body);
+                if (!payload.text) {
+                    jsonResponse(res, 400, { error: "text is required" });
+                    return;
+                }
+                const lines = payload.text.split("\n").map(l => l.trim()).filter(l => l.length > 0 && !l.startsWith("#"));
+                const rules = lines.map((line, i) => parseNaturalLanguageRule(line, i));
+                jsonResponse(res, 200, { rules: rules.filter(Boolean), raw: lines });
+            }
+            catch (err) {
+                jsonResponse(res, 400, { error: "Invalid request" });
+            }
+            return;
+        }
+        // Apply parsed rules to the active governance context
+        if (req.url === "/api/apply-rules" && req.method === "POST") {
+            try {
+                const body = await readBody(req);
+                const payload = JSON.parse(body);
+                if (!payload.rules || !Array.isArray(payload.rules)) {
+                    jsonResponse(res, 400, { error: "rules array is required" });
+                    return;
+                }
+                // Store custom rules in memory for the session
+                customGuards.length = 0;
+                for (const rule of payload.rules) {
+                    customGuards.push({
+                        id: rule.id,
+                        label: rule.description,
+                        description: rule.description,
+                        category: "custom",
+                        enforcement: rule.enforcement,
+                        immutable: false,
+                        intent_patterns: rule.intent_patterns,
+                        default_enabled: true,
+                    });
+                }
+                jsonResponse(res, 200, {
+                    status: "applied",
+                    applied: customGuards.length,
+                    enforcement: "full",
+                    detail: "Rules enforced across guard engine (intent blocking) AND invariant engine (system dynamics)",
+                });
+            }
+            catch (err) {
+                jsonResponse(res, 400, { error: "Invalid request" });
+            }
+            return;
+        }
+        // ── Clear Rules ──
+        // Wipes all custom guards and resets governance to base world rules
+        if (req.url === "/api/clear-rules" && req.method === "POST") {
+            customGuards.length = 0;
+            jsonResponse(res, 200, {
+                status: "cleared",
+                message: "All custom rules removed. Governance reset to base world rules.",
+            });
+            return;
+        }
+        // ── Load World File ──
+        // Accept a full world definition JSON and use it as the active world
+        if (req.url === "/api/load-world-file" && req.method === "POST") {
+            try {
+                const body = await readBody(req);
+                const payload = JSON.parse(body);
+                if (!payload.world) {
+                    jsonResponse(res, 400, { error: "world object is required" });
+                    return;
+                }
+                const w = payload.world;
+                // Parse any plain-English rules in the world file into guards
+                customGuards.length = 0;
+                if (w.rules && Array.isArray(w.rules)) {
+                    for (let i = 0; i < w.rules.length; i++) {
+                        const rule = w.rules[i];
+                        if (rule.intent_patterns && rule.intent_patterns.length > 0) {
+                            // Already structured rule
+                            customGuards.push({
+                                id: rule.id || `world-rule-${i}`,
+                                label: rule.description,
+                                description: rule.description,
+                                category: "world-file",
+                                enforcement: rule.enforcement || "block",
+                                immutable: false,
+                                intent_patterns: rule.intent_patterns,
+                                default_enabled: true,
+                            });
+                        }
+                        else {
+                            // Plain-English rule — parse it
+                            const parsed = parseNaturalLanguageRule(rule.description, i);
+                            if (parsed) {
+                                customGuards.push({
+                                    id: parsed.id,
+                                    label: parsed.description,
+                                    description: parsed.description,
+                                    category: "world-file",
+                                    enforcement: parsed.enforcement,
+                                    immutable: false,
+                                    intent_patterns: parsed.intent_patterns,
+                                    default_enabled: true,
+                                });
+                            }
+                        }
+                    }
+                }
+                // Build the response world definition for the UI
+                const loadedWorld = {
+                    id: "custom-world",
+                    title: w.name || "Custom World",
+                    thesis: w.thesis || "User-defined world",
+                    stateVariables: w.state_variables || [],
+                    invariants: (w.invariants || []).map(inv => ({
+                        id: inv.id,
+                        description: inv.description,
+                        enforceable: inv.enforceable !== false,
+                    })),
+                    gates: (w.gates || []).map(g => ({
+                        id: g.id,
+                        label: g.label,
+                        condition: g.condition,
+                        severity: g.severity || "warning",
+                    })),
+                    rulesApplied: customGuards.length,
+                };
+                jsonResponse(res, 200, {
+                    status: "loaded",
+                    world: loadedWorld,
+                    rulesApplied: customGuards.length,
+                    message: `World "${loadedWorld.title}" loaded with ${loadedWorld.invariants.length} invariants, ${loadedWorld.gates.length} gates, and ${customGuards.length} rules.`,
+                });
+            }
+            catch (err) {
+                jsonResponse(res, 400, { error: "Invalid world file JSON" });
+            }
+            return;
+        }
+        // ── Export World File ──
+        // Exports the current world configuration (base world + custom rules + overrides) as a world file
+        if (req.url === "/api/export-world" && req.method === "GET") {
+            const { resolveWorld } = await Promise.resolve().then(() => __importStar(require("./worldComparison")));
+            const worldId = currentSession.world || "trading";
+            let baseWorld;
+            try {
+                baseWorld = resolveWorld(worldId);
+            }
+            catch {
+                baseWorld = null;
+            }
+            const exportedWorld = {
+                name: baseWorld?.title || worldId,
+                thesis: baseWorld?.world?.thesis || "Exported world",
+                state_variables: baseWorld?.world?.state_variables || [],
+                invariants: baseWorld?.world?.invariants || [],
+                gates: baseWorld?.world?.gates || [],
+                rules: customGuards.map(g => ({
+                    id: g.id,
+                    description: g.description,
+                    enforcement: g.enforcement,
+                    intent_patterns: g.intent_patterns,
+                })),
+            };
+            res.writeHead(200, {
+                "Content-Type": "application/json",
+                "Content-Disposition": `attachment; filename="${worldId}-world.json"`,
+                "Access-Control-Allow-Origin": "*",
+            });
+            res.end(JSON.stringify({ world: exportedWorld }, null, 2));
+            return;
+        }
+        // ── Session Reporting Endpoints ──
+        // Connect the serve runtime to the enforce reporting pipeline.
+        // Users can request reports, stats, and recommendations from live governance data.
+        // GET /api/session — current session stats (lightweight)
+        if (req.url === "/api/session" && req.method === "GET") {
+            const evals = currentSession.evaluations;
+            const blocked = evals.filter(e => e.decision === "BLOCK").length;
+            const modified = evals.filter(e => e.decision === "MODIFY").length;
+            const allowed = evals.filter(e => e.decision === "ALLOW").length;
+            const uniqueActors = [...new Set(evals.map(e => e.actor))];
+            const uniqueActions = [...new Set(evals.map(e => e.action))];
+            const triggeredRules = [...new Set(evals.filter(e => e.ruleId).map(e => e.ruleId))];
+            jsonResponse(res, 200, {
+                sessionId: currentSession.id,
+                startedAt: currentSession.startedAt,
+                world: currentSession.world,
+                guardCount: currentSession.guardCount,
+                evaluations: {
+                    total: evals.length,
+                    blocked,
+                    modified,
+                    allowed,
+                },
+                agents: uniqueActors,
+                actionTypes: uniqueActions,
+                triggeredRules,
+                historyCount: sessionHistory.length,
+            });
+            return;
+        }
+        // GET /api/session/report — full enforcement report (text)
+        if (req.url === "/api/session/report" && req.method === "GET") {
+            const report = synthesizeSessionReport();
+            // Format as human-readable text using the same style as enforce CLI
+            const lines = [];
+            lines.push("");
+            lines.push("  LIVE GOVERNANCE — ENFORCEMENT REPORT");
+            lines.push("  " + "=".repeat(70));
+            lines.push(`  Session: ${report.sessionId}`);
+            lines.push(`  Scenario: ${report.scenario}`);
+            lines.push(`  Sessions: ${report.runs.length}`);
+            lines.push(`  Generated: ${report.generatedAt}`);
+            lines.push("");
+            if (report.runs.length > 0) {
+                lines.push("  RUN HISTORY");
+                lines.push("  " + "-".repeat(70));
+                lines.push(`  ${"#".padEnd(4)} ${"World".padEnd(25)} ${"Rules".padEnd(8)} ${"Evals".padEnd(8)} ${"Blocked".padEnd(10)} ${"Effectiveness"}`);
+                lines.push("  " + "-".repeat(70));
+                for (const run of report.runs) {
+                    const name = run.worldName.length > 23 ? run.worldName.slice(0, 22) + "…" : run.worldName;
+                    lines.push(`  ${String(run.iteration).padEnd(4)} ${name.padEnd(25)} ${String(run.ruleCount).padEnd(8)} ${String(run.governanceStats.totalEvaluations).padEnd(8)} ${String(run.governanceStats.verdicts.block).padEnd(10)} ${(run.comparison.governanceEffectiveness * 100).toFixed(0)}%`);
+                }
+                lines.push("");
+                lines.push("  DIVERGENCE ANALYSIS");
+                lines.push("  " + "-".repeat(70));
+                lines.push(`  Stability trend:     ${report.divergence.stabilityTrend.map(s => `${(s * 100).toFixed(0)}%`).join(" → ")}`);
+                lines.push(`  Collapse trend:      ${report.divergence.collapseTrend.map(s => `${(s * 100).toFixed(0)}%`).join(" → ")}`);
+                lines.push(`  Effectiveness trend: ${report.divergence.effectivenessTrend.map(s => `${(s * 100).toFixed(0)}%`).join(" → ")}`);
+                lines.push(`  Total divergence:    ${report.divergence.totalDivergence}`);
+                lines.push("");
+                lines.push(`  ${report.divergence.narrative}`);
+                // Blocked action breakdown
+                const allEvals = [
+                    ...sessionHistory.flatMap(s => s.evaluations),
+                    ...currentSession.evaluations,
+                ];
+                const blockedEvals = allEvals.filter(e => e.decision === "BLOCK");
+                if (blockedEvals.length > 0) {
+                    lines.push("");
+                    lines.push("  BLOCKED ACTIONS");
+                    lines.push("  " + "-".repeat(70));
+                    // Group by rule
+                    const byRule = {};
+                    for (const e of blockedEvals) {
+                        const key = e.ruleId ?? "unknown";
+                        if (!byRule[key])
+                            byRule[key] = { count: 0, actors: new Set(), actions: new Set() };
+                        byRule[key].count++;
+                        byRule[key].actors.add(e.actor);
+                        byRule[key].actions.add(e.action);
+                    }
+                    const sorted = Object.entries(byRule).sort((a, b) => b[1].count - a[1].count);
+                    for (const [ruleId, data] of sorted) {
+                        lines.push(`  ${ruleId}: ${data.count} blocks across ${data.actors.size} agent(s)`);
+                        lines.push(`    Actions: ${[...data.actions].join(", ")}`);
+                    }
+                }
+                // Recommendations (deterministic, no LLM needed)
+                lines.push("");
+                lines.push("  RECOMMENDATIONS");
+                lines.push("  " + "-".repeat(70));
+                const best = report.runs[report.divergence.bestIteration - 1];
+                if (best) {
+                    const totalEvals = best.governanceStats.totalEvaluations;
+                    const blockRate = totalEvals > 0 ? best.governanceStats.verdicts.block / totalEvals : 0;
+                    if (blockRate > 0.5) {
+                        lines.push("  HIGH BLOCK RATE — Rules may be too aggressive.");
+                        lines.push("  Try relaxing constraints or adding MODIFY actions instead of hard blocks.");
+                        lines.push(`  Current block rate: ${(blockRate * 100).toFixed(0)}% (${best.governanceStats.verdicts.block}/${totalEvals})`);
+                    }
+                    else if (blockRate < 0.05 && totalEvals > 20) {
+                        lines.push("  LOW BLOCK RATE — Rules may be too permissive.");
+                        lines.push("  Try adding content-specific guards or lowering thresholds.");
+                        lines.push(`  Current block rate: ${(blockRate * 100).toFixed(0)}% (${best.governanceStats.verdicts.block}/${totalEvals})`);
+                    }
+                    else if (blockRate > 0) {
+                        lines.push(`  Governance is active: ${(blockRate * 100).toFixed(0)}% of actions blocked.`);
+                        lines.push("  To iterate: apply different rules via POST /api/apply-rules, then POST /api/session/reset.");
+                        lines.push("  This creates a new session for side-by-side comparison.");
+                    }
+                    if (report.runs.length === 1) {
+                        lines.push("");
+                        lines.push("  EXPERIMENT: Apply different rules and reset to compare sessions.");
+                        lines.push("  This will show divergence: how different governance changes outcomes.");
+                    }
+                }
+                lines.push("");
+                lines.push("  RECOMMENDATION");
+                lines.push("  " + "-".repeat(70));
+                lines.push(`  ${report.recommendation}`);
+            }
+            lines.push("");
+            lines.push("  " + "=".repeat(70));
+            lines.push("  NeuroVerse Policy Enforcement System — Live Governance");
+            lines.push("  Design rules. Run reality. See what changes.");
+            lines.push("  " + "=".repeat(70));
+            lines.push("");
+            res.writeHead(200, { "Content-Type": "text/plain", "Access-Control-Allow-Origin": "*" });
+            res.end(lines.join("\n"));
+            return;
+        }
+        // GET /api/session/report.json — full enforcement report (JSON)
+        if (req.url === "/api/session/report.json" && req.method === "GET") {
+            const report = synthesizeSessionReport();
+            jsonResponse(res, 200, report);
+            return;
+        }
+        // GET /api/session/evaluations — raw evaluation log
+        if (req.url === "/api/session/evaluations" && req.method === "GET") {
+            jsonResponse(res, 200, {
+                sessionId: currentSession.id,
+                count: currentSession.evaluations.length,
+                evaluations: currentSession.evaluations.slice(-200), // last 200
+            });
+            return;
+        }
+        // POST /api/session/reset — snapshot current session and start fresh
+        // This is how users create multi-run comparisons:
+        //   1. Apply rules A → run simulation → POST /api/session/reset
+        //   2. Apply rules B → run simulation → GET /api/session/report
+        //   Now the report shows divergence between rules A and rules B.
+        if (req.url === "/api/session/reset" && req.method === "POST") {
+            if (currentSession.evaluations.length > 0) {
+                sessionHistory.push({ ...currentSession, evaluations: [...currentSession.evaluations] });
+            }
+            const body = await readBody(req).catch(() => "{}");
+            const opts = JSON.parse(body || "{}");
+            currentSession = {
+                id: `session_${Date.now()}_${Math.random().toString(36).slice(2, 6)}`,
+                startedAt: new Date().toISOString(),
+                world: opts.world ?? currentSession.world,
+                guardCount: customGuards.length,
+                evaluations: [],
+            };
+            // Reset bridge metrics counters
+            bridgeEvalCount = 0;
+            bridgeBlockCount = 0;
+            bridgeModifyCount = 0;
+            jsonResponse(res, 200, {
+                status: "reset",
+                newSessionId: currentSession.id,
+                previousSessions: sessionHistory.length,
+                message: `Session reset. ${sessionHistory.length} session(s) in history. Apply new rules and evaluate to compare.`,
+            });
+            return;
+        }
+        // POST /api/session/save — save session as experiment with lineage
+        if (req.url === "/api/session/save" && req.method === "POST") {
+            const report = synthesizeSessionReport();
+            if (report.runs.length === 0) {
+                jsonResponse(res, 400, { error: "No evaluations to save. Send actions to /api/evaluate first." });
+                return;
+            }
+            const experiment = {
+                id: `exp-live-${Date.now().toString(36)}`,
+                savedAt: new Date().toISOString(),
+                scenario: report.scenario,
+                source: "live-governance",
+                sessions: report.runs.length,
+                totalEvaluations: report.runs.reduce((sum, r) => sum + r.governanceStats.totalEvaluations, 0),
+                metrics: {
+                    stability: report.runs[report.divergence.bestIteration - 1]?.metrics.stabilityScore ?? 0,
+                    effectiveness: report.runs[report.divergence.bestIteration - 1]?.comparison.governanceEffectiveness ?? 0,
+                    collapseProbability: report.runs[report.divergence.bestIteration - 1]?.metrics.collapseProbability ?? 0,
+                },
+                divergence: report.divergence,
+                recommendation: report.recommendation,
+                report,
+            };
+            // Save to experiments/ directory
+            try {
+                if (!fs.existsSync("experiments"))
+                    fs.mkdirSync("experiments", { recursive: true });
+                const filePath = path.join("experiments", `${experiment.id}.json`);
+                fs.writeFileSync(filePath, JSON.stringify(experiment, null, 2));
+                jsonResponse(res, 200, {
+                    status: "saved",
+                    experimentId: experiment.id,
+                    filePath,
+                    metrics: experiment.metrics,
+                    message: `Saved to ${filePath}. View with: npx nv-sim enforce --load ${filePath}`,
+                });
+            }
+            catch (err) {
+                jsonResponse(res, 500, { error: "Failed to save experiment", detail: String(err) });
+            }
+            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;
+        }
+        // ── AUDIT TRAIL ENDPOINTS ──
+        // GET /api/audit — summary of current session's audit trail
+        if (req.url === "/api/audit" && req.method === "GET") {
+            jsonResponse(res, 200, auditTrail.summary());
+            return;
+        }
+        // GET /api/audit/entries — all entries from current session (with optional filters)
+        if (req.url?.startsWith("/api/audit/entries") && req.method === "GET") {
+            const url = new URL(req.url, `http://localhost:${port}`);
+            const entries = auditTrail.query({
+                type: url.searchParams.get("type") ?? undefined,
+                agent: url.searchParams.get("agent") ?? undefined,
+                verdict: url.searchParams.get("verdict") ?? undefined,
+                runId: url.searchParams.get("runId") ?? undefined,
+                after: url.searchParams.get("after") ?? undefined,
+                before: url.searchParams.get("before") ?? undefined,
+            });
+            jsonResponse(res, 200, {
+                sessionId: auditTrail.getSessionId(),
+                count: entries.length,
+                entries,
+            });
+            return;
+        }
+        // GET /api/audit/entries/text — human-readable audit trail
+        if (req.url?.startsWith("/api/audit/entries/text") && req.method === "GET") {
+            const entries = auditTrail.readAll();
+            res.writeHead(200, { "Content-Type": "text/plain", "Access-Control-Allow-Origin": "*" });
+            res.end((0, auditTrace_1.formatAuditTrail)(entries, { verbose: true }));
+            return;
+        }
+        // GET /api/audit/sessions — list all audit sessions on disk
+        if (req.url === "/api/audit/sessions" && req.method === "GET") {
+            const sessions = (0, auditTrace_1.listAuditSessions)();
+            jsonResponse(res, 200, {
+                sessions: sessions.map((id) => {
+                    const trail = (0, auditTrace_1.loadAuditSession)(id);
+                    return trail.summary();
+                }),
+            });
+            return;
+        }
+        // GET /api/audit/sessions/:id — load a specific session's audit trail
+        const auditSessionMatch = req.url?.match(/^\/api\/audit\/sessions\/([^/]+)$/);
+        if (auditSessionMatch && req.method === "GET") {
+            const sessionId = decodeURIComponent(auditSessionMatch[1]);
+            const trail = (0, auditTrace_1.loadAuditSession)(sessionId);
+            const entries = trail.readAll();
+            if (entries.length === 0) {
+                jsonResponse(res, 404, { error: `Audit session "${sessionId}" not found or empty` });
+            }
+            else {
+                jsonResponse(res, 200, {
+                    ...trail.summary(),
+                    entries,
+                });
+            }
+            return;
+        }
+        // GET /api/audit/search — search across ALL sessions
+        if (req.url?.startsWith("/api/audit/search") && req.method === "GET") {
+            const url = new URL(req.url, `http://localhost:${port}`);
+            const results = (0, auditTrace_1.searchAuditTrails)({
+                type: url.searchParams.get("type") ?? undefined,
+                agent: url.searchParams.get("agent") ?? undefined,
+                verdict: url.searchParams.get("verdict") ?? undefined,
+                after: url.searchParams.get("after") ?? undefined,
+                before: url.searchParams.get("before") ?? undefined,
+            });
+            jsonResponse(res, 200, {
+                count: results.length,
+                entries: results,
+            });
+            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>
+  /* ── Theme Variables ── */
+  :root {
+    --bg-primary: #0f0f0f;
+    --bg-secondary: #141414;
+    --bg-surface: #1a1a1a;
+    --bg-elevated: #222;
+    --border: #2a2a2a;
+    --border-subtle: #333;
+    --text-primary: #f0f0f0;
+    --text-secondary: #b0b0b0;
+    --text-muted: #888;
+    --text-faint: #666;
+    --accent: #818cf8;
+    --accent-bg: #1e1e3a;
+    --green: #4ade80;
+    --green-bg: #0a2a14;
+    --red: #f87171;
+    --red-bg: #2d0a0a;
+    --yellow: #fbbf24;
+    --yellow-bg: #2d2006;
+    --blue: #60a5fa;
+    --blue-bg: #1e293b;
+    --purple: #a78bfa;
+  }
+  body.light {
+    --bg-primary: #f5f5f5;
+    --bg-secondary: #eaeaea;
+    --bg-surface: #e0e0e0;
+    --bg-elevated: #d4d4d4;
+    --border: #c0c0c0;
+    --border-subtle: #b0b0b0;
+    --text-primary: #1a1a1a;
+    --text-secondary: #444;
+    --text-muted: #666;
+    --text-faint: #888;
+    --accent: #6366f1;
+    --accent-bg: #e8e8ff;
+    --green: #16a34a;
+    --green-bg: #dcfce7;
+    --red: #dc2626;
+    --red-bg: #fee2e2;
+    --yellow: #ca8a04;
+    --yellow-bg: #fef9c3;
+    --blue: #2563eb;
+    --blue-bg: #dbeafe;
+    --purple: #7c3aed;
+  }
+
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body { font-family: 'SF Mono', 'Fira Code', monospace; background: var(--bg-primary); color: var(--text-primary); overflow: hidden; transition: background 0.3s, color 0.3s; }
+  .header { padding: 12px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
+  .header h1 { font-size: 15px; color: var(--text-primary); }
+  .header .sub { font-size: 11px; color: var(--text-muted); margin-left: 12px; }
+  .header-right { display: flex; align-items: center; gap: 12px; }
+  .theme-toggle { background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-secondary); padding: 4px 10px; border-radius: 6px; font-family: inherit; font-size: 11px; cursor: pointer; transition: all 0.2s; }
+  .theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
+  .status { font-size: 11px; padding: 3px 10px; border-radius: 10px; }
+  .status.idle { background: var(--accent-bg); color: var(--accent); }
+  .status.live { background: var(--green-bg); color: var(--green); animation: pulse 2s infinite; }
+  .status.complete { background: var(--accent-bg); color: var(--accent); }
+  @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: var(--bg-secondary); border-right: 1px solid var(--border); overflow-y: auto; padding: 16px; }
+  .ctrl-section { margin-bottom: 20px; }
+  .ctrl-section h3 { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
+
+  .ctrl-row { margin-bottom: 12px; }
+  .ctrl-label { font-size: 11px; color: var(--text-secondary); margin-bottom: 4px; display: flex; justify-content: space-between; }
+  .ctrl-label .val { color: var(--text-primary); font-weight: 600; }
+
+  input[type="range"] { width: 100%; height: 4px; -webkit-appearance: none; background: var(--bg-elevated); border-radius: 2px; outline: none; }
+  input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); cursor: pointer; }
+  input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); cursor: pointer; border: none; }
+
+  select { width: 100%; background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border-subtle); 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: var(--border-subtle); border-radius: 10px; cursor: pointer; transition: background 0.2s; }
+  .toggle.on { background: var(--green); }
+  .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: var(--text-secondary); }
+
+  .inject-row { display: flex; gap: 6px; margin-bottom: 6px; }
+  .inject-row select { flex: 1; }
+  .inject-row input { width: 50px; background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border-subtle); 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: var(--text-secondary); padding: 3px 6px; background: var(--bg-surface); border-radius: 3px; margin-bottom: 3px; display: flex; justify-content: space-between; }
+  .inject-item .remove { color: var(--red); 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: var(--green); color: #0a0a0a; }
+  .btn-run:hover { background: #22c55e; }
+  .btn-run:disabled { background: var(--bg-elevated); color: var(--text-faint); cursor: not-allowed; }
+  .btn-add { background: var(--bg-elevated); color: var(--accent); padding: 6px; font-size: 11px; }
+  .btn-add:hover { background: var(--accent-bg); }
+
+  .scenario-btn { display: block; width: 100%; padding: 8px 10px; margin-bottom: 4px; background: var(--bg-surface); border: 1px solid var(--bg-elevated); border-radius: 4px; color: var(--text-primary); font-family: inherit; font-size: 11px; text-align: left; cursor: pointer; }
+  .scenario-btn:hover { border-color: var(--accent); background: var(--accent-bg); }
+  .scenario-btn .stitle { font-weight: 600; color: var(--text-primary); }
+  .scenario-btn .sdesc { color: var(--text-muted); font-size: 10px; margin-top: 2px; }
+
+  /* Save variant */
+  .btn-save { background: var(--accent-bg); color: var(--accent); margin-top: 0; }
+  .btn-save:hover { background: var(--accent-bg); filter: brightness(1.2); }
+  .btn-confirm { flex: 1; background: var(--green); color: #0a0a0a; padding: 7px; font-size: 11px; }
+  .btn-cancel { flex: 1; background: var(--bg-elevated); color: var(--text-muted); padding: 7px; font-size: 11px; }
+  .save-input { width: 100%; background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border-subtle); padding: 7px 8px; border-radius: 4px; font-family: inherit; font-size: 12px; }
+  .save-input:focus { border-color: var(--accent); outline: none; }
+
+  /* Variant cards */
+  .variant-card { background: var(--bg-surface); border: 1px solid var(--bg-elevated); border-radius: 4px; padding: 8px 10px; margin-bottom: 4px; cursor: pointer; position: relative; }
+  .variant-card:hover { border-color: var(--green); }
+  .variant-card .vname { font-size: 12px; font-weight: 600; color: var(--text-primary); }
+  .variant-card .vdesc { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
+  .variant-card .vmeta { font-size: 10px; color: var(--text-faint); margin-top: 4px; }
+  .variant-card .vmeta .vresult { color: var(--green); }
+  .variant-card .vdelete { position: absolute; top: 6px; right: 8px; color: var(--red); 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: var(--accent-bg); color: var(--accent); border-radius: 3px; margin-top: 3px; }
+
+  /* RIGHT PANEL — Simulation viewer */
+  .viewer { display: grid; grid-template-rows: auto auto auto auto auto; overflow-y: auto; height: 100%; gap: 0; }
+
+  /* Outcome panel */
+  .outcome-panel { padding: 20px 24px 16px; border-bottom: 1px solid var(--border); }
+  .outcome-statement { font-size: 16px; font-weight: 600; color: var(--text-primary); line-height: 1.4; margin-bottom: 12px; }
+  .outcome-empty { font-size: 13px; color: var(--text-faint); font-style: italic; }
+  .confidence-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
+  .confidence-card { background: var(--bg-surface); border: 1px solid var(--bg-elevated); border-radius: 6px; padding: 8px 10px; }
+  .confidence-card .cc-label { font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; }
+  .confidence-card .cc-value { font-size: 13px; font-weight: 600; }
+  .confidence-card .cc-value.good { color: var(--green); }
+  .confidence-card .cc-value.warn { color: var(--yellow); }
+  .confidence-card .cc-value.bad { color: var(--red); }
+  .outcome-context { font-size: 10px; color: var(--text-faint); margin-top: 6px; }
+
+  /* Behavior panel */
+  .behavior-panel { padding: 16px 24px; border-bottom: 1px solid var(--border); }
+  .behavior-panel h2 { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
+  .behavior-shifts { margin-bottom: 10px; }
+  .behavior-shift-item { font-size: 12px; color: var(--text-secondary); padding: 4px 0 4px 12px; border-left: 2px solid var(--accent); line-height: 1.5; margin-bottom: 4px; }
+  .behavior-empty { font-size: 12px; color: var(--text-faint); font-style: italic; }
+
+  .activity-toggle { font-size: 10px; color: var(--text-muted); cursor: pointer; padding: 6px 0; margin-top: 4px; }
+  .activity-toggle:hover { color: var(--text-secondary); }
+  .activity-timeline { display: none; max-height: 180px; overflow-y: auto; margin-top: 6px; }
+  .activity-timeline.open { display: block; }
+  .activity-item { font-size: 11px; color: var(--text-secondary); padding: 3px 0; border-bottom: 1px solid var(--border); }
+  .activity-item:last-child { border-bottom: none; }
+  .activity-agent { color: var(--blue); font-weight: 500; }
+
+  /* Why panel */
+  .why-panel { padding: 16px 24px; border-bottom: 1px solid var(--border); }
+  .why-panel h2 { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
+  .why-item { font-size: 12px; color: var(--text-secondary); padding: 4px 0 4px 12px; border-left: 2px solid var(--green); line-height: 1.5; margin-bottom: 4px; }
+  .why-empty { font-size: 12px; color: var(--text-faint); font-style: italic; }
+
+  /* Export bar */
+  .export-bar { display: flex; gap: 8px; padding: 12px 24px; border-bottom: 1px solid var(--border); background: var(--bg-secondary); }
+  .export-btn { padding: 6px 14px; font-size: 11px; font-weight: 600; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-surface); color: var(--text-secondary); cursor: pointer; font-family: inherit; transition: all 0.2s; }
+  .export-btn:hover { background: var(--bg-elevated); color: var(--text-primary); }
+  .audit-btn { margin-left: auto; color: var(--text-faint); }
+
+  /* Audit overlay */
+  .audit-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000; background: rgba(0,0,0,0.7); }
+  .audit-overlay.open { display: flex; align-items: center; justify-content: center; }
+  .audit-modal { background: var(--bg-primary); border: 1px solid var(--border); border-radius: 8px; width: 90%; max-width: 900px; max-height: 85vh; overflow-y: auto; padding: 0; }
+  .audit-header { display: flex; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg-primary); z-index: 1; }
+  .audit-header h2 { font-size: 14px; font-weight: 700; color: var(--text-primary); margin: 0; }
+  .audit-close { margin-left: auto; padding: 4px 12px; font-size: 12px; background: none; border: 1px solid var(--border); border-radius: 4px; color: var(--text-muted); cursor: pointer; font-family: inherit; }
+  .audit-close:hover { color: var(--text-primary); }
+  .audit-section { padding: 16px 20px; border-bottom: 1px solid var(--border); }
+  .audit-section:last-child { border-bottom: none; }
+  .audit-section h3 { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
+  .audit-section .rule-card { margin-bottom: 6px; }
+
+  /* Print styles for PDF export */
+  @media print {
+    body { background: #fff !important; color: #111 !important; }
+    .controls, .export-bar, .audit-overlay, .activity-toggle { display: none !important; }
+    .viewer { overflow: visible !important; height: auto !important; }
+    .outcome-panel, .behavior-panel, .why-panel { border: 1px solid #ddd !important; margin-bottom: 8px; border-radius: 6px; }
+    .confidence-card { border: 1px solid #ddd !important; }
+    * { color: #111 !important; background: #fff !important; border-color: #ddd !important; }
+    .cc-value.good { color: #16a34a !important; }
+    .cc-value.warn { color: #ca8a04 !important; }
+    .cc-value.bad { color: #dc2626 !important; }
+  }
+  .center-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--border-subtle); }
+  .verdict { display: inline-block; padding: 1px 5px; border-radius: 3px; font-size: 9px; font-weight: 600; margin-left: 4px; }
+  .verdict.ALLOW { background: var(--green-bg); color: var(--green); }
+  .verdict.BLOCK { background: var(--red-bg); color: var(--red); }
+  .verdict.PAUSE { background: var(--yellow-bg); color: var(--yellow); }
+
+  /* Simulation Trace (audit only) */
+  .trace-round { margin-bottom: 10px; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
+  .trace-round-header { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--bg-surface); cursor: pointer; user-select: none; }
+  .trace-round-header:hover { background: var(--bg-elevated); }
+  .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: var(--blue-bg); color: var(--blue); }
+  .trace-phase.governed { background: var(--green-bg); color: var(--green); }
+  .trace-round-label { font-size: 11px; color: var(--text-primary); font-weight: 600; }
+  .trace-round-metrics { margin-left: auto; font-size: 10px; color: var(--text-muted); 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: var(--text-muted); 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: var(--text-primary); 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: var(--red-bg); color: var(--red); }
+  .trace-event-severity.moderate { background: var(--yellow-bg); color: var(--yellow); }
+  .trace-event-severity.minor { background: var(--green-bg); color: var(--green); }
+  .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: var(--blue); font-weight: 500; min-width: 80px; }
+  .trace-agent-action { color: var(--text-secondary); flex: 1; }
+  .trace-agent-impact { font-size: 9px; font-weight: 600; min-width: 36px; text-align: right; }
+  .trace-agent-impact.positive { color: var(--green); }
+  .trace-agent-impact.negative { color: var(--red); }
+  .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: var(--text-muted); font-family: monospace; }
+  .trace-gov-reason { color: var(--text-secondary); flex: 1; }
+  .trace-dynamics { font-size: 10px; color: var(--purple); padding: 2px 0 2px 11px; border-left: 2px solid #7c3aed; margin-left: 2px; font-style: italic; }
+  .trace-arrow { color: var(--text-faint); font-size: 10px; text-align: center; padding: 2px 0; }
+  .trace-empty { font-size: 10px; color: var(--text-faint); font-style: italic; padding: 4px 0; }
+
+  /* World info */
+  .world-thesis { font-size: 11px; color: var(--text-secondary); font-style: italic; margin-bottom: 8px; }
+  .rule-card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; transition: border-color 0.2s; }
+  .rule-card:hover { border-color: var(--text-muted); }
+  .rule-card.type-invariant { border-left: 4px solid var(--green); }
+  .rule-card.type-gate { border-left: 4px solid var(--red); }
+  .rule-card.type-warning { border-left: 4px solid var(--yellow); }
+  .rule-card.type-modify { border-left: 4px solid #60a5fa; }
+  .rule-card .rule-header { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
+  .rule-card .rule-icon { font-size: 12px; flex-shrink: 0; }
+  .rule-card .rule-title { font-size: 12px; font-weight: 600; color: var(--text-primary); }
+  .rule-card .rule-desc { font-size: 11px; color: var(--text-secondary); line-height: 1.4; }
+  .rule-card .rule-meta { font-size: 10px; color: var(--text-muted); margin-top: 6px; opacity: 0.8; }
+  .rule-card .rule-why { font-size: 10px; color: var(--text-muted); margin-top: 5px; font-style: italic; padding-top: 5px; border-top: 1px solid var(--border); }
+  .rule-card .rule-impact { display: none; font-size: 10px; margin-top: 6px; padding: 5px 8px; border-radius: 4px; background: var(--bg-surface, var(--bg-secondary)); }
+  .rule-card .rule-impact.visible { display: block; }
+  .rule-card .rule-impact .impact-stat { color: var(--text-primary); font-weight: 600; }
+  .rule-card .rule-impact .impact-label { color: var(--text-muted); }
+  .rule-card.user-rule { border-left-color: #818cf8; background: rgba(129, 140, 248, 0.05); }
+  .rule-source-tag { font-size: 9px; font-weight: 700; color: #818cf8; background: rgba(129, 140, 248, 0.15); padding: 1px 5px; border-radius: 3px; margin-left: auto; letter-spacing: 0.5px; }
+
+  /* Empty state */
+  .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--text-faint); }
+  .empty-state .icon { font-size: 48px; margin-bottom: 12px; }
+  .empty-state .msg { font-size: 13px; color: var(--text-muted); }
+  .empty-state .hint { font-size: 11px; color: var(--text-faint); margin-top: 6px; }
+
+  /* System Shift Card */
+  .system-shift { display: none; margin: 12px 16px; border: 1px solid var(--green-bg); border-radius: 8px; background: var(--bg-secondary); 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: var(--green-bg); border-bottom: 1px solid var(--green-bg); }
+  .ss-icon { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px rgba(74,222,128,0.4); }
+  .ss-title { font-size: 11px; font-weight: 700; color: var(--green); text-transform: uppercase; letter-spacing: 1.5px; }
+  .ss-rule { font-size: 13px; font-weight: 600; color: var(--text-primary); padding: 10px 14px 0; }
+  .ss-body { padding: 10px 14px 14px; display: grid; gap: 8px; }
+  .ss-section { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; }
+  .ss-section-label { font-size: 9px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
+  .ss-adapt-rate { font-size: 20px; font-weight: 700; color: var(--green); }
+  .ss-adapt-desc { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
+  .ss-shift-item { font-size: 11px; color: var(--text-secondary); padding: 2px 0; display: flex; align-items: center; gap: 6px; }
+  .ss-shift-arrow { color: var(--green); font-weight: 600; }
+  .ss-pattern-tag { display: inline-block; font-size: 10px; padding: 2px 8px; background: var(--accent-bg); color: var(--accent); 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: var(--text-secondary); padding: 2px 0; }
+  .ss-impact-delta { color: var(--green); font-weight: 600; }
+  .ss-impact-delta.negative { color: var(--red); }
+  .ss-narrative { font-size: 12px; color: var(--text-primary); line-height: 1.5; font-style: italic; border-left: 2px solid var(--green); padding-left: 10px; }
+  .ss-scale { font-size: 10px; color: var(--text-muted); padding: 0 14px 6px; }
+  .ss-scale strong { color: var(--text-secondary); }
+  .ss-flow { display: flex; align-items: center; gap: 6px; padding: 6px 14px; font-size: 10px; color: var(--text-faint); }
+  .ss-flow-arrow { color: var(--green); }
+  .ss-raw-toggle { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--bg-secondary); border: none; border-top: 1px solid var(--border); color: var(--text-muted); font-family: inherit; font-size: 10px; cursor: pointer; width: 100%; text-align: left; transition: color 0.2s; }
+  .ss-raw-toggle:hover { color: var(--text-secondary); }
+  .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: var(--text-muted); padding: 2px 0; display: flex; gap: 6px; }
+  .ss-raw-item .raw-agent { color: var(--text-secondary); min-width: 100px; }
+  .ss-raw-item .raw-action { color: var(--text-secondary); 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: var(--red-bg); color: var(--red); }
+  .ss-raw-item .raw-verdict.MODIFY { background: var(--yellow-bg); color: var(--yellow); }
+
+  /* Integration Quick-Start (in controls panel) */
+  .integrate-section { background: var(--accent-bg); border: 1px solid var(--accent-bg); border-radius: 6px; padding: 10px 12px; margin-top: 8px; }
+  .integrate-section h4 { font-size: 10px; color: var(--accent); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
+  .integrate-code { font-size: 10px; color: var(--text-primary); background: var(--bg-surface); border: 1px solid var(--bg-elevated); border-radius: 4px; padding: 8px; overflow-x: auto; white-space: pre; line-height: 1.5; }
+  .integrate-code .kw { color: var(--accent); }
+  .integrate-code .str { color: var(--green); }
+  .integrate-code .comment { color: var(--text-muted); }
+  .integrate-endpoint { font-size: 11px; color: var(--text-secondary); margin-top: 6px; }
+  .integrate-endpoint code { color: var(--green); background: var(--bg-surface); padding: 1px 5px; border-radius: 3px; }
+
+  /* Language tabs for integration code */
+  .lang-tabs { display: flex; gap: 2px; margin-bottom: 6px; }
+  .lang-tab { padding: 4px 10px; font-size: 10px; font-weight: 600; color: var(--text-muted); background: transparent; border: 1px solid transparent; border-bottom: none; border-radius: 4px 4px 0 0; cursor: pointer; font-family: inherit; transition: all 0.2s; }
+  .lang-tab:hover { color: var(--text-secondary); }
+  .lang-tab.active { color: var(--accent); background: var(--bg-surface); border-color: var(--bg-elevated); }
+  .lang-code-panel { display: none; }
+  .lang-code-panel.active { display: block; }
+  .integrate-hint { font-size: 10px; color: var(--text-muted); margin-top: 6px; line-height: 1.5; }
+  .integrate-hint strong { color: var(--text-secondary); }
+  .integrate-works { font-size: 10px; color: var(--text-faint); margin-top: 8px; line-height: 1.6; }
+  .integrate-works strong { color: var(--text-muted); }
+
+  /* Framework selector tabs */
+  .fw-tabs { display: flex; gap: 4px; margin-bottom: 10px; }
+  .fw-tab { flex: 1; padding: 8px 6px; font-size: 10px; font-weight: 700; color: var(--text-muted); background: var(--bg-surface); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; font-family: inherit; transition: all 0.2s; text-align: center; line-height: 1.3; }
+  .fw-tab:hover { border-color: var(--text-muted); color: var(--text-secondary); }
+  .fw-tab.active { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
+  .fw-tab .fw-sub { display: block; font-size: 8px; font-weight: 400; color: var(--text-faint); margin-top: 2px; }
+  .fw-tab.active .fw-sub { color: var(--accent); opacity: 0.7; }
+  .fw-panel { display: none; }
+  .fw-panel.active { display: block; }
+
+  /* Architecture callout */
+  .arch-callout { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; margin-bottom: 8px; }
+  .arch-callout .arch-title { font-size: 10px; font-weight: 700; color: var(--text-secondary); margin-bottom: 4px; }
+  .arch-flow { font-size: 10px; color: var(--text-muted); font-family: monospace; line-height: 1.6; }
+  .arch-flow .arch-yes { color: var(--green); }
+  .arch-flow .arch-no { color: var(--red); }
+  .arch-warn { font-size: 9px; color: var(--red); margin-top: 6px; padding: 4px 8px; background: #2d0606; border-radius: 4px; line-height: 1.5; }
+
+  /* Responsive / Adaptive Panels */
+  @media (max-width: 1200px) {
+    .layout { grid-template-columns: 300px 1fr; }
+    .controls { padding: 12px; }
+  }
+  @media (max-width: 960px) {
+    .layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: auto; min-height: 100vh; }
+    .controls { border-right: none; border-bottom: 1px solid var(--border); max-height: 50vh; overflow-y: auto; }
+    .viewer { min-height: 60vh; }
+    .viewer-top { grid-template-columns: 1fr; }
+    .viewer-mid { grid-template-columns: 1fr; }
+    .metric-grid { grid-template-columns: repeat(2, 1fr); }
+  }
+  @media (max-width: 640px) {
+    .header h1 { font-size: 14px; }
+    .header .sub { font-size: 10px; }
+    .controls { padding: 10px; }
+    .ctrl-section h3 { font-size: 10px; }
+    .confidence-grid { grid-template-columns: 1fr; }
+    .agent-name { width: 80px; }
+    .integrate-code { font-size: 9px; padding: 6px; }
+    .scenario-btn { padding: 6px; }
+  }
+
+  /* Rule editor */
+  .rule-editor { margin-top: 8px; }
+  .rule-input { width: 100%; min-height: 60px; background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border-subtle); padding: 8px; border-radius: 4px; font-family: inherit; font-size: 12px; resize: vertical; line-height: 1.5; }
+  .rule-input:focus { border-color: var(--accent); outline: none; }
+  .rule-input::placeholder { color: var(--text-faint); }
+  .btn-parse { background: var(--accent-bg); color: var(--accent); margin-top: 6px; padding: 8px; font-size: 11px; }
+  .btn-parse:hover { filter: brightness(1.2); }
+  .btn-parse:disabled { opacity: 0.5; cursor: not-allowed; }
+  .parsed-rules { margin-top: 8px; }
+  .parsed-rule { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; transition: border-color 0.2s; }
+  .parsed-rule:hover { border-color: var(--text-muted); }
+  .parsed-rule.enforcement-block { border-left: 4px solid var(--red); }
+  .parsed-rule.enforcement-allow { border-left: 4px solid var(--green); }
+  .parsed-rule.enforcement-modify { border-left: 4px solid #60a5fa; }
+  .parsed-rule.enforcement-warn { border-left: 4px solid var(--yellow); }
+  .parsed-rule .pr-header { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
+  .parsed-rule .pr-icon { font-size: 12px; }
+  .parsed-rule .pr-action { font-weight: 700; font-size: 12px; color: var(--text-primary); text-transform: capitalize; }
+  .parsed-rule .pr-desc { color: var(--text-secondary); font-size: 11px; line-height: 1.4; }
+  .parsed-rule .pr-patterns { color: var(--text-muted); font-size: 10px; margin-top: 6px; opacity: 0.8; }
+  .btn-apply-rules { background: var(--green); color: #0a0a0a; margin-top: 6px; padding: 8px; font-size: 11px; }
+  .btn-apply-rules:hover { filter: brightness(0.9); }
+  .rule-status { font-size: 10px; color: var(--text-muted); margin-top: 4px; }
+  .rule-status.success { color: var(--green); }
+  .rule-status.error { color: var(--red); }
+  .rule-examples { font-size: 10px; color: var(--text-faint); margin-top: 6px; line-height: 1.6; }
+  .rule-examples code { background: var(--bg-surface); padding: 1px 4px; border-radius: 2px; color: var(--text-secondary); }
+
+  /* World Action Bar */
+  .world-action-bar { display: flex; gap: 4px; margin-bottom: 16px; flex-wrap: wrap; }
+  .btn-world-action { flex: 1; min-width: 0; padding: 6px 4px; font-size: 10px; background: var(--bg-surface); color: var(--text-secondary); border: 1px solid var(--border); border-radius: 4px; cursor: pointer; font-family: inherit; text-align: center; transition: all 0.2s; white-space: nowrap; }
+  .btn-world-action:hover { border-color: var(--accent); color: var(--accent); }
+  .btn-world-action.btn-export { color: var(--green); border-color: var(--green); opacity: 0.7; }
+  .btn-world-action.btn-export:hover { opacity: 1; }
+
+  /* World Source Tabs */
+  .world-source-tabs { display: flex; gap: 4px; }
+  .ws-tab { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 10px 6px; background: var(--bg-surface); border: 2px solid var(--border); border-radius: 6px; cursor: pointer; transition: all 0.2s; text-align: center; }
+  .ws-tab:hover { border-color: var(--text-muted); }
+  .ws-tab.active { border-color: var(--accent); background: var(--accent-bg); }
+  .ws-tab input[type="radio"] { display: none; }
+  .ws-label { font-size: 11px; font-weight: 700; color: var(--text-primary); }
+  .ws-hint { font-size: 9px; color: var(--text-muted); margin-top: 2px; }
+  .ws-tab.active .ws-label { color: var(--accent); }
+
+  /* World Source Panels */
+  .world-source-panel { animation: fadeIn 0.2s ease; }
+  @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
+
+  /* Custom World Header */
+  .custom-world-header { margin-bottom: 12px; }
+  .world-name-input { width: 100%; background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border-subtle); padding: 8px; border-radius: 4px; font-family: inherit; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
+  .world-name-input:focus { border-color: var(--accent); outline: none; }
+  .world-thesis-input { width: 100%; background: var(--bg-surface); color: var(--text-secondary); border: 1px solid var(--border-subtle); padding: 6px 8px; border-radius: 4px; font-family: inherit; font-size: 11px; resize: none; height: 36px; }
+  .world-thesis-input:focus { border-color: var(--accent); outline: none; }
+
+  /* Rule editor enhancements */
+  .rule-editor-label { font-size: 11px; color: var(--text-secondary); margin-bottom: 6px; font-weight: 600; }
+  .rule-input-large { min-height: 120px; }
+  .btn-generate-world { background: var(--accent); color: #fff; margin-top: 8px; padding: 10px; font-size: 12px; font-weight: 700; width: 100%; border: none; border-radius: 4px; cursor: pointer; font-family: inherit; transition: filter 0.2s; }
+  .btn-generate-world:hover { filter: brightness(1.1); }
+
+  /* Upload Zone */
+  .upload-zone { border: 2px dashed var(--border-subtle); border-radius: 8px; padding: 24px; text-align: center; cursor: pointer; transition: all 0.2s; margin-bottom: 12px; }
+  .upload-zone:hover, .upload-zone.dragover { border-color: var(--accent); background: var(--accent-bg); }
+  .upload-icon { font-size: 28px; margin-bottom: 8px; }
+  .upload-label { font-size: 12px; color: var(--text-secondary); }
+  .upload-or { font-size: 10px; color: var(--text-faint); margin: 8px 0; }
+  .btn-upload-browse { background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border); padding: 6px 16px; border-radius: 4px; cursor: pointer; font-family: inherit; font-size: 11px; }
+  .upload-paste-section { margin-bottom: 12px; }
+  .btn-load-world { background: var(--green); color: #0a0a0a; width: 100%; padding: 10px; font-size: 12px; font-weight: 700; border: none; border-radius: 4px; cursor: pointer; font-family: inherit; transition: filter 0.2s; }
+  .btn-load-world:hover { filter: brightness(0.9); }
+
+  /* Loaded World Card */
+  .loaded-world-card { background: var(--green-bg); border: 1px solid var(--green); border-radius: 6px; padding: 12px; margin-top: 10px; }
+  .lw-name { font-size: 13px; font-weight: 700; color: var(--green); }
+  .lw-thesis { font-size: 11px; color: var(--text-secondary); margin-top: 4px; font-style: italic; }
+  .lw-stats { font-size: 10px; color: var(--text-muted); margin-top: 6px; }
+
+  /* Schema Reference */
+  .schema-ref { font-size: 10px; color: var(--text-muted); }
+  .schema-item { padding: 3px 0; border-bottom: 1px solid var(--border); }
+  .schema-item:last-child { border-bottom: none; }
+  .schema-item code { color: var(--accent); background: var(--bg-surface); padding: 1px 4px; border-radius: 2px; }
+</style>
+</head>
+<body>
+<div class="header">
+  <div style="display:flex;align-items:center">
+    <h1>NV-SIM</h1>
+    <span class="sub">Governance Runtime</span>
+  </div>
+  <div class="header-right">
+    <button class="theme-toggle" id="theme-toggle" title="Toggle light/dark mode">Light Mode</button>
+    <span id="status" class="status idle">Ready</span>
+  </div>
+</div>
+
+<div class="layout">
+  <!-- LEFT: CONTROLS -->
+  <div class="controls" id="controls-panel">
+    <!-- World Action Bar -->
+    <div class="world-action-bar">
+      <button class="btn btn-world-action" id="new-world-btn" title="Clear everything and start fresh">+ New World</button>
+      <button class="btn btn-world-action" id="load-file-btn" title="Load a .json world file">Load World File</button>
+      <button class="btn btn-world-action" id="clear-rules-btn" title="Clear custom rules only">Clear Rules</button>
+      <button class="btn btn-world-action btn-export" id="export-world-btn" title="Export current world as JSON">Save as World File</button>
+    </div>
+
+    <!-- World Source selector -->
+    <div class="ctrl-section">
+      <h3>World Source</h3>
+      <div class="world-source-tabs">
+        <label class="ws-tab active" data-source="preset">
+          <input type="radio" name="world-source" value="preset" checked>
+          <span class="ws-label">Preset</span>
+          <span class="ws-hint">Demo scenarios</span>
+        </label>
+        <label class="ws-tab" data-source="custom">
+          <input type="radio" name="world-source" value="custom">
+          <span class="ws-label">Custom Rules</span>
+          <span class="ws-hint">Define your world</span>
+        </label>
+        <label class="ws-tab" data-source="upload">
+          <input type="radio" name="world-source" value="upload">
+          <span class="ws-label">World File</span>
+          <span class="ws-hint">JSON / .nv-world</span>
+        </label>
+      </div>
+    </div>
+
+    <!-- SOURCE: Preset -->
+    <div class="world-source-panel" id="source-preset">
+      <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 (collapsed by default) -->
+      <div class="ctrl-section">
+        <h3 style="cursor:pointer" onclick="var el=document.getElementById('scenario-list');var a=this.querySelector('.arrow');if(el.style.display==='none'){el.style.display='';a.textContent='▼'}else{el.style.display='none';a.textContent='▶'}"><span class="arrow" style="font-size:9px;margin-right:4px">▶</span>Scenarios</h3>
+        <div id="scenario-list" style="display:none"></div>
+      </div>
+    </div>
+
+    <!-- SOURCE: Custom Rules (Define Your World) -->
+    <div class="world-source-panel" id="source-custom" style="display:none">
+      <div class="ctrl-section">
+        <h3>Define Your World</h3>
+        <div class="custom-world-header">
+          <input type="text" class="world-name-input" id="custom-world-name" placeholder="World name (e.g. Marketing Governance)">
+          <textarea class="world-thesis-input" id="custom-world-thesis" placeholder="What is this world about? (thesis)"></textarea>
+        </div>
+        <div class="rule-editor">
+          <div class="rule-editor-label">Type your governance rules:</div>
+          <textarea class="rule-input rule-input-large" id="rule-input" placeholder="No agent may spend more than $10k without approval&#10;All outbound emails must be reviewed&#10;Block deletion of production data&#10;Limit API calls to 100 per minute&#10;Require manager approval for refunds over $500"></textarea>
+          <button class="btn btn-generate-world" id="parse-rules-btn">Generate World</button>
+          <div id="parsed-rules" class="parsed-rules"></div>
+          <div id="rule-status" class="rule-status"></div>
+          <div class="rule-examples">
+            Rule patterns:<br>
+            <code>Block [action]</code> — hard suppression<br>
+            <code>Limit [X] to [N]</code> — cap extremes<br>
+            <code>Require [X] for [Y]</code> — structural constraint<br>
+            <code>Pause [X] for review</code> — human-in-the-loop<br>
+            <code>Allow [X]</code> — explicit permission<br>
+            <code>Monitor [X]</code> — circuit breaker gate
+          </div>
+        </div>
+      </div>
+
+      <!-- Base world (optional) -->
+      <div class="ctrl-section">
+        <h3>Base World (Optional)</h3>
+        <div class="ctrl-row">
+          <select id="custom-base-world">
+            <option value="">None — start from scratch</option>
+          </select>
+          <div style="font-size:10px;color:var(--text-faint);margin-top:4px">Layer your rules on top of a preset world</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- SOURCE: Upload World File -->
+    <div class="world-source-panel" id="source-upload" style="display:none">
+      <div class="ctrl-section">
+        <h3>Load World File</h3>
+        <div class="upload-zone" id="upload-zone">
+          <div class="upload-icon">&#x1F4C4;</div>
+          <div class="upload-label">Drop a .json or .nv-world file here</div>
+          <div class="upload-or">or</div>
+          <button class="btn btn-upload-browse" id="upload-browse-btn">Browse Files</button>
+          <input type="file" id="upload-file-input" accept=".json,.nv-world" style="display:none">
+        </div>
+        <div class="upload-paste-section">
+          <div class="rule-editor-label">Or paste world JSON:</div>
+          <textarea class="rule-input rule-input-large" id="world-json-input" placeholder='{&#10;  "name": "Marketing Governance",&#10;  "thesis": "All marketing actions are governed",&#10;  "invariants": [...],&#10;  "rules": [...],&#10;  "gates": [...]&#10;}'></textarea>
+        </div>
+        <button class="btn btn-load-world" id="load-world-btn">Load into Runtime</button>
+        <div id="upload-status" class="rule-status"></div>
+
+        <!-- Loaded world info -->
+        <div id="loaded-world-info" style="display:none">
+          <div class="loaded-world-card">
+            <div class="lw-name" id="lw-name"></div>
+            <div class="lw-thesis" id="lw-thesis"></div>
+            <div class="lw-stats" id="lw-stats"></div>
+          </div>
+        </div>
+      </div>
+
+      <!-- World file schema reference -->
+      <div class="ctrl-section">
+        <h3>World File Schema</h3>
+        <div class="schema-ref">
+          <div class="schema-item"><code>name</code> — world name</div>
+          <div class="schema-item"><code>thesis</code> — what this world is about</div>
+          <div class="schema-item"><code>rules[]</code> — governance rules (plain English or structured)</div>
+          <div class="schema-item"><code>invariants[]</code> — rules that always hold <code>{id, description}</code></div>
+          <div class="schema-item"><code>gates[]</code> — viability thresholds <code>{id, label, condition, severity}</code></div>
+          <div class="schema-item"><code>state_variables[]</code> — sliders <code>{id, label, type, range, default_value}</code></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Simulation Engine (demoted, below world source) -->
+    <div class="ctrl-section" style="margin-top:8px">
+      <h3>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:var(--text-faint);margin-top:4px"></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>Your Worlds</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>Govern Any Agent System</h3>
+
+      <div class="arch-callout">
+        <div class="arch-title">Pre-Execution Enforcement</div>
+        <div class="arch-flow">
+          Agent decides → <span class="arch-yes">Governance evaluates</span> → <span class="arch-yes">THEN executes</span>
+        </div>
+        <div class="arch-warn">Governance MUST happen BEFORE execution. Post-execution = audit only, not control.</div>
+      </div>
+
+      <div class="fw-tabs">
+        <button class="fw-tab active" onclick="switchFw('generic',this)">Generic<span class="fw-sub">any agent</span></button>
+        <button class="fw-tab" onclick="switchFw('scienceclaw',this)">ScienceClaw<span class="fw-sub">research</span></button>
+        <button class="fw-tab" onclick="switchFw('mirofish',this)">MiroFish<span class="fw-sub">OASIS</span></button>
+        <button class="fw-tab" onclick="switchFw('langchain',this)">LangChain<span class="fw-sub">tools</span></button>
+      </div>
+
+      <div class="fw-panel active" id="fw-generic">
+        <div class="integrate-section">
+          <h4>Insert before your agent executes</h4>
+          <div class="lang-tabs">
+            <button class="lang-tab active" onclick="switchLang('generic-py',this)">Python</button>
+            <button class="lang-tab" onclick="switchLang('generic-js',this)">JavaScript</button>
+            <button class="lang-tab" onclick="switchLang('generic-curl',this)">cURL</button>
+          </div>
+          <div class="lang-code-panel active" id="lang-generic-py"><div class="integrate-code"><span class="kw">import</span> requests
+
+<span class="kw">for</span> agent <span class="kw">in</span> agents:
+    raw_action = agent.decide()
+
+    <span class="kw">try</span>:
+        verdict = requests.post(
+            <span class="str">"http://localhost:3456/api/evaluate"</span>,
+            json={<span class="str">"actor"</span>: agent.id,
+                  <span class="str">"action"</span>: raw_action,
+                  <span class="str">"world"</span>: <span class="str">"trading"</span>},
+            timeout=0.5
+        ).json()
+    <span class="kw">except</span>:
+        verdict = {<span class="str">"decision"</span>: <span class="str">"ALLOW"</span>}
+
+    <span class="kw">if</span> verdict[<span class="str">"decision"</span>] == <span class="str">"BLOCK"</span>:
+        <span class="kw">continue</span>  <span class="comment"># skip this action entirely</span>
+    <span class="kw">elif</span> verdict[<span class="str">"decision"</span>] == <span class="str">"MODIFY"</span>:
+        raw_action = verdict[<span class="str">"modified_action"</span>]
+
+    environment.apply(agent, raw_action)</div></div>
+          <div class="lang-code-panel" id="lang-generic-js"><div class="integrate-code"><span class="kw">for</span> (<span class="kw">const</span> agent <span class="kw">of</span> agents) {
+  <span class="kw">let</span> action = agent.decide()
+
+  <span class="kw">const</span> verdict = <span class="kw">await</span> fetch(
+    <span class="str">"http://localhost:3456/api/evaluate"</span>, {
+    method: <span class="str">"POST"</span>,
+    headers: {<span class="str">"Content-Type"</span>: <span class="str">"application/json"</span>},
+    body: JSON.stringify({
+      actor: agent.id, action, world: <span class="str">"trading"</span>
+    })
+  }).then(r => r.json())
+
+  <span class="kw">if</span> (verdict.decision === <span class="str">"BLOCK"</span>) <span class="kw">continue</span>
+  <span class="kw">if</span> (verdict.decision === <span class="str">"MODIFY"</span>)
+    action = verdict.modified_action
+
+  environment.apply(agent, action)
+}</div></div>
+          <div class="lang-code-panel" id="lang-generic-curl"><div class="integrate-code">curl -X POST http://localhost:3456/api/evaluate \
+  -H <span class="str">"Content-Type: application/json"</span> \
+  -d <span class="str">'{"actor":"agent_1","action":"panic_sell"}'</span>
+
+<span class="comment"># Returns: {"decision":"BLOCK","reason":"..."}</span>
+<span class="comment"># Watch it appear in the dashboard →</span></div></div>
+        </div>
+      </div>
+
+      <div class="fw-panel" id="fw-scienceclaw">
+        <div class="integrate-section">
+          <h4>Detect action type, then evaluate</h4>
+          <div style="font-size:10px;color:var(--yellow);margin-bottom:6px;line-height:1.4">
+            Don't hardcode <code style="background:var(--bg-surface);padding:1px 4px;border-radius:2px">action = "post"</code> — detect intent from agent output so rules can differentiate.
+          </div>
+          <div class="integrate-code"><span class="kw">from</span> neuroverse_bridge <span class="kw">import</span> evaluate, detect_action_type
+
+<span class="comment"># Step 1: Agent generates content</span>
+results = generator.run_pubmed_search(topic)
+output = generator.generate_content(topic, results)
+
+<span class="comment"># Step 2: Detect what kind of action this is</span>
+action = detect_action_type(output[<span class="str">"content"</span>])
+<span class="comment"># → "analyze", "publish", "cite", "recommend"</span>
+
+<span class="comment"># Step 3: Evaluate BEFORE executing</span>
+verdict = evaluate(
+    actor=<span class="str">"Harry"</span>,
+    action=action,
+    world=<span class="str">"research"</span>
+)
+
+<span class="comment"># Step 4: Only execute if allowed</span>
+<span class="kw">if</span> verdict[<span class="str">"decision"</span>] != <span class="str">"BLOCK"</span>:
+    generator.post_to_infinite(output)</div>
+          <div style="font-size:9px;color:var(--text-muted);margin-top:6px;line-height:1.5">
+            See <code style="background:var(--bg-surface);padding:1px 4px;border-radius:2px">bridge/scienceclaw_governed.py</code> for full example
+          </div>
+        </div>
+      </div>
+
+      <div class="fw-panel" id="fw-mirofish">
+        <div class="integrate-section">
+          <h4>Replace the dict comprehension</h4>
+          <div style="font-size:10px;color:var(--red);margin-bottom:6px;line-height:1.4">
+            MiroFish executes inside <code style="background:var(--bg-surface);padding:1px 4px;border-radius:2px">env.step()</code> — governance MUST happen before that call.
+          </div>
+          <div class="integrate-code" style="margin-bottom:6px;border-left:3px solid var(--red);opacity:0.6"><span class="comment"># ❌ BEFORE (opaque — no governance possible)</span>
+actions = {agent: LLMAction()
+           <span class="kw">for</span> _, agent <span class="kw">in</span> active_agents}
+<span class="kw">await</span> result.env.step(actions)</div>
+          <div class="integrate-code" style="border-left:3px solid var(--green)"><span class="comment"># ✅ AFTER (expand the loop, insert governance)</span>
+<span class="kw">import</span> requests
+
+actions = {}
+<span class="kw">for</span> _, agent <span class="kw">in</span> active_agents:
+    raw_action = LLMAction()
+
+    <span class="kw">try</span>:
+        verdict = requests.post(
+            <span class="str">"http://localhost:3456/api/evaluate"</span>,
+            json={
+                <span class="str">"actor"</span>: getattr(agent, <span class="str">"id"</span>, str(agent)),
+                <span class="str">"action"</span>: str(raw_action),
+                <span class="str">"world"</span>: <span class="str">"social_media"</span>
+            },
+            timeout=0.5
+        ).json()
+    <span class="kw">except</span>:
+        verdict = {<span class="str">"decision"</span>: <span class="str">"ALLOW"</span>}
+
+    <span class="kw">if</span> verdict[<span class="str">"decision"</span>] == <span class="str">"BLOCK"</span>:
+        <span class="kw">continue</span>
+    <span class="kw">elif</span> verdict[<span class="str">"decision"</span>] == <span class="str">"MODIFY"</span>:
+        raw_action = verdict.get(<span class="str">"modified_action"</span>, raw_action)
+
+    actions[agent] = raw_action
+
+<span class="kw">await</span> result.env.step(actions)</div>
+          <div style="font-size:9px;color:var(--text-muted);margin-top:6px;line-height:1.5">
+            Apply to all 3 scripts: <code style="background:var(--bg-surface);padding:1px 4px;border-radius:2px">run_twitter_simulation.py</code>
+            <code style="background:var(--bg-surface);padding:1px 4px;border-radius:2px">run_reddit_simulation.py</code>
+            <code style="background:var(--bg-surface);padding:1px 4px;border-radius:2px">run_parallel_simulation.py</code>
+          </div>
+        </div>
+      </div>
+
+      <div class="fw-panel" id="fw-langchain">
+        <div class="integrate-section">
+          <h4>Wrap your tool or agent executor</h4>
+          <div class="integrate-code"><span class="kw">import</span> requests
+<span class="kw">from</span> langchain.tools <span class="kw">import</span> tool
+
+<span class="kw">def</span> governed(fn, world=<span class="str">"trading"</span>):
+    <span class="kw">def</span> wrapper(*args, **kwargs):
+        action = fn.__name__
+        <span class="kw">try</span>:
+            v = requests.post(
+                <span class="str">"http://localhost:3456/api/evaluate"</span>,
+                json={<span class="str">"actor"</span>: <span class="str">"langchain"</span>,
+                      <span class="str">"action"</span>: action,
+                      <span class="str">"world"</span>: world},
+                timeout=0.5
+            ).json()
+        <span class="kw">except</span>:
+            v = {<span class="str">"decision"</span>: <span class="str">"ALLOW"</span>}
+        <span class="kw">if</span> v[<span class="str">"decision"</span>] == <span class="str">"BLOCK"</span>:
+            <span class="kw">return</span> f<span class="str">"Blocked: {v['reason']}"</span>
+        <span class="kw">return</span> fn(*args, **kwargs)
+    <span class="kw">return</span> wrapper
+
+<span class="comment"># Usage: wrap any tool</span>
+@tool
+@governed
+<span class="kw">def</span> execute_trade(ticker, amount):
+    ...</div>
+        </div>
+      </div>
+
+      <div style="margin-top:8px">
+        <div class="integrate-hint">
+          <span style="display:inline-block;padding:2px 6px;background:#2d0606;color:#f87171;border-radius:3px;margin-right:3px">BLOCK</span> stopped
+          <span style="display:inline-block;padding:2px 6px;background:#2d2006;color:#fbbf24;border-radius:3px;margin-right:3px;margin-left:4px">MODIFY</span> adjusted
+          <span style="display:inline-block;padding:2px 6px;background:#052e16;color:#4ade80;border-radius:3px;margin-left:4px">ALLOW</span> proceeds
+        </div>
+        <div style="font-size:10px;color:var(--text-faint);margin-top:8px;border-top:1px solid var(--border);padding-top:6px">
+          The world file controls everything. Same rules govern simulated and live systems.
+        </div>
+      </div>
+    </div>
+
+      <!-- Session Report Panel -->
+      <div class="ctrl-section" id="session-panel">
+        <h3 class="ctrl-label">SESSION</h3>
+        <div class="metric-grid" style="grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px">
+          <div class="metric-box"><div class="value" id="s-total">0</div><div class="label">Evaluations</div></div>
+          <div class="metric-box"><div class="value" id="s-blocked" style="color:#f87171">0</div><div class="label">Blocked</div></div>
+          <div class="metric-box"><div class="value" id="s-modified" style="color:#fbbf24">0</div><div class="label">Modified</div></div>
+          <div class="metric-box"><div class="value" id="s-allowed" style="color:#4ade80">0</div><div class="label">Allowed</div></div>
+        </div>
+        <div id="s-agents" style="font-size:10px;color:#888;margin-bottom:6px"></div>
+        <div style="display:flex;gap:6px;flex-wrap:wrap">
+          <button onclick="viewSessionReport()" style="flex:1;padding:6px 8px;background:#1e1b4b;color:#818cf8;border:1px solid #312e81;border-radius:4px;cursor:pointer;font-size:11px">View Report</button>
+          <button onclick="resetSession()" style="flex:1;padding:6px 8px;background:#1c1917;color:#a8a29e;border:1px solid #292524;border-radius:4px;cursor:pointer;font-size:11px">Reset &amp; Compare</button>
+          <button onclick="saveExperiment()" style="flex:1;padding:6px 8px;background:#052e16;color:#4ade80;border:1px solid #14532d;border-radius:4px;cursor:pointer;font-size:11px">Save</button>
+        </div>
+        <div id="session-history" style="margin-top:6px;font-size:10px;color:#666"></div>
+      </div>
+    </div>
+  </div>
+
+  <!-- RIGHT: VIEWER -->
+  <div class="viewer">
+
+    <!-- LAYER 1: OUTCOME -->
+    <div class="outcome-panel" id="outcome-panel">
+      <div class="outcome-statement" id="outcome-statement">
+        <span class="outcome-empty">Run a simulation or connect an agent to see outcomes</span>
+      </div>
+      <div class="confidence-grid" id="confidence-grid" style="display:none">
+        <div class="confidence-card">
+          <div class="cc-label">Conclusion Strength</div>
+          <div class="cc-value" id="cc-strength">--</div>
+        </div>
+        <div class="confidence-card">
+          <div class="cc-label">Evidence Quality</div>
+          <div class="cc-value" id="cc-evidence">--</div>
+        </div>
+        <div class="confidence-card">
+          <div class="cc-label">Risk of Error</div>
+          <div class="cc-value" id="cc-risk">--</div>
+        </div>
+      </div>
+      <div class="outcome-context" id="outcome-context"></div>
+    </div>
+
+    <!-- LAYER 2: BEHAVIOR -->
+    <div class="behavior-panel" id="behavior-panel-v2">
+      <h2>What Agents Did</h2>
+      <div class="behavior-shifts" id="behavior-shifts">
+        <div class="behavior-empty">Waiting for agent actions</div>
+      </div>
+      <div class="activity-toggle" id="activity-toggle" onclick="document.getElementById('activity-timeline').classList.toggle('open');this.querySelector('.arrow').textContent=document.getElementById('activity-timeline').classList.contains('open')?'▼':'▶'" style="display:none">
+        <span class="arrow">▶</span> See activity timeline
+      </div>
+      <div class="activity-timeline" id="activity-timeline"></div>
+    </div>
+
+    <!-- LAYER 3: WHY -->
+    <div class="why-panel" id="why-panel">
+      <h2>Why This Happened</h2>
+      <div id="why-content">
+        <div class="why-empty">Causation analysis appears after agent actions are evaluated</div>
+      </div>
+    </div>
+
+    <!-- LAYER 4: EXPORT -->
+    <div class="export-bar">
+      <button class="export-btn" onclick="exportPDF()">Download PDF</button>
+      <button class="export-btn" onclick="exportCSV()">Export CSV</button>
+      <button class="export-btn" onclick="copyShareSummary()">Copy Summary</button>
+      <button class="export-btn audit-btn" onclick="openAudit()">Audit Trail</button>
+    </div>
+
+    <!-- Hidden elements for data tracking (not displayed) -->
+    <div style="display:none">
+      <span id="m-stability">--</span>
+      <span id="m-volatility">--</span>
+      <span id="m-round">--</span>
+      <span id="m-interventions">0</span>
+      <span id="trace-source"></span>
+      <div id="agents"></div>
+      <div id="active-invariants"></div>
+      <div id="log"></div>
+    </div>
+  </div>
+
+  <!-- LAYER 5: AUDIT OVERLAY (separate from dashboard) -->
+  <div class="audit-overlay" id="audit-overlay" onclick="if(event.target===this)closeAudit()">
+    <div class="audit-modal">
+      <div class="audit-header">
+        <h2>Audit Trail</h2>
+        <button class="audit-close" onclick="closeAudit()">Close</button>
+      </div>
+      <div class="audit-section" id="audit-rules">
+        <h3>Active Rules</h3>
+        <div id="audit-rules-content"></div>
+      </div>
+      <div class="audit-section" id="audit-verdicts">
+        <h3>Verdict Log</h3>
+        <div id="audit-verdicts-content"></div>
+      </div>
+      <div class="audit-section" id="audit-trace">
+        <h3>Detailed Trace</h3>
+        <div id="audit-trace-content"></div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+// ============================================
+// LANGUAGE & FRAMEWORK TABS
+// ============================================
+function switchLang(lang, btn) {
+  const container = btn.closest('.integrate-section') || document;
+  container.querySelectorAll('.lang-tab').forEach(t => t.classList.remove('active'));
+  container.querySelectorAll('.lang-code-panel').forEach(p => p.classList.remove('active'));
+  btn.classList.add('active');
+  const panel = document.getElementById('lang-' + lang);
+  if (panel) panel.classList.add('active');
+}
+
+function switchFw(fw, btn) {
+  document.querySelectorAll('.fw-tab').forEach(t => t.classList.remove('active'));
+  document.querySelectorAll('.fw-panel').forEach(p => p.classList.remove('active'));
+  btn.classList.add('active');
+  const panel = document.getElementById('fw-' + fw);
+  if (panel) panel.classList.add('active');
+}
+
+// ============================================
+// OUTCOME INTELLIGENCE LAYER
+// ============================================
+
+function generateOutcome(stability, volatility, shiftData, worldThesis) {
+  var st = stability || 0;
+  var vol = volatility || 0;
+  var blockRatio = shiftData.total > 0 ? shiftData.blocks / shiftData.total : 0;
+  var thesis = worldThesis || '';
+
+  // Determine outcome direction + dominant behavior (state + what agents did)
+  var direction = '';
+  var behavior = '';
+  if (st > 0.7 && vol < 0.3) {
+    direction = 'stabilized';
+    behavior = 'agents shifted toward safer positions';
+  } else if (st > 0.7 && vol >= 0.3) {
+    direction = 'held under pressure';
+    behavior = 'agents maintained cautious strategies despite volatility';
+  } else if (st > 0.4 && vol < 0.5) {
+    direction = 'partially converged';
+    behavior = 'agents split between aggressive and conservative approaches';
+  } else if (st <= 0.4 && vol >= 0.5) {
+    direction = 'fragmented';
+    behavior = 'agents competed with conflicting strategies';
+  } else if (st <= 0.4) {
+    direction = 'remains uncertain';
+    behavior = 'agents failed to find a dominant strategy';
+  } else {
+    direction = 'showed mixed results';
+    behavior = 'agents oscillated between risk-taking and caution';
+  }
+
+  // Enrich with world context if available
+  if (thesis) {
+    var nouns = thesis.match(/\b(market|research|supply|trade|financial|climate|regulatory|investment|innovation|security)\b/i);
+    if (nouns) {
+      var subject = nouns[1].charAt(0).toUpperCase() + nouns[1].slice(1).toLowerCase();
+      return subject + ' ' + direction + ' as ' + behavior;
+    }
+  }
+
+  // Build behavior-enriched statement — always state + dominant behavior
+  if (blockRatio > 0.4 && st > 0.6) return 'System ' + direction + ' after agents abandoned high-risk strategies';
+  if (blockRatio > 0.2) return 'Outcome ' + direction + ' as ' + behavior;
+  if (shiftData.patterns && shiftData.patterns.length > 0) return 'Outcome ' + direction + ' — ' + behavior;
+  return 'Outcome ' + direction + ' as ' + behavior;
+}
+
+function computeConfidence(stability, volatility, interventions, total) {
+  var interventionRate = total > 0 ? interventions / total : 0;
+  var score = stability * 0.5 + (1 - volatility) * 0.3 + (1 - interventionRate) * 0.2;
+
+  var strength, evidence, risk, strengthCls, evidenceCls, riskCls;
+
+  if (score > 0.75) {
+    strength = 'Strong'; strengthCls = 'good';
+    evidence = 'Solid'; evidenceCls = 'good';
+    risk = 'Low'; riskCls = 'good';
+  } else if (score > 0.55) {
+    strength = 'Moderate'; strengthCls = 'warn';
+    evidence = stability > 0.6 ? 'Solid' : 'Mixed'; evidenceCls = stability > 0.6 ? 'good' : 'warn';
+    risk = volatility > 0.4 ? 'Elevated' : 'Moderate'; riskCls = volatility > 0.4 ? 'warn' : 'warn';
+  } else if (score > 0.35) {
+    strength = 'Moderate'; strengthCls = 'warn';
+    evidence = 'Mixed'; evidenceCls = 'warn';
+    risk = 'Elevated'; riskCls = 'bad';
+  } else {
+    strength = 'Weak'; strengthCls = 'bad';
+    evidence = 'Thin'; evidenceCls = 'bad';
+    risk = 'High'; riskCls = 'bad';
+  }
+
+  return { score: score, strength: strength, strengthCls: strengthCls, evidence: evidence, evidenceCls: evidenceCls, risk: risk, riskCls: riskCls };
+}
+
+function translateBehaviorNarrative(reaction, verdict) {
+  // Convert verdict+action into before → after narrative — no system words
+  var status = verdict ? verdict.status : 'ALLOW';
+  var action = reaction || 'acted';
+  if (status === 'BLOCK') {
+    return 'abandoned ' + action + ' and switched to a safer strategy';
+  }
+  if (status === 'MODIFY' || status === 'PAUSE') {
+    return 'scaled back ' + action + ' after early resistance';
+  }
+  return action;
+}
+
+function generateBehaviorShifts(shiftData, bLog) {
+  // Quantified behavioral shifts in human language
+  var sentences = [];
+  var total = shiftData.total || bLog.length || 0;
+  if (total === 0) return sentences;
+
+  // Group by what agents actually did — always anchor in before → after
+  var keys = Object.keys(shiftData.shifts || {}).sort(function(a, b) { return shiftData.shifts[b] - shiftData.shifts[a]; });
+  if (keys.length > 0 && total > 0) {
+    keys.slice(0, 3).forEach(function(k) {
+      var parts = k.split(': ');
+      var action = parts[1] || parts[0];
+      var count = shiftData.shifts[k];
+      var pct = Math.round((count / total) * 100);
+      // before → after: what they tried → what they did instead
+      if (parts[0] === 'BLOCK') {
+        sentences.push(pct + '% of agents (' + count + ') shifted from ' + action + ' to conservative strategies');
+      } else {
+        sentences.push(pct + '% of agents (' + count + ') reduced ' + action + ' after initial attempts failed');
+      }
+    });
+  }
+
+  // Fallback from behavioral log — still before → after
+  if (sentences.length === 0 && bLog.length > 0) {
+    var blocked = bLog.filter(function(e) { return e.status === 'BLOCK'; }).length;
+    var modified = bLog.filter(function(e) { return e.status === 'MODIFY' || e.status === 'PAUSE'; }).length;
+    var proceeded = bLog.length - blocked - modified;
+
+    if (blocked > 0) {
+      var bPct = Math.round((blocked / bLog.length) * 100);
+      sentences.push(bPct + '% of agents (' + blocked + ') shifted from aggressive to conservative strategies');
+    }
+    if (modified > 0) {
+      var mPct = Math.round((modified / bLog.length) * 100);
+      sentences.push(mPct + '% of agents (' + modified + ') reduced position size after initial attempts failed');
+    }
+    if (proceeded > 0 && (blocked > 0 || modified > 0)) {
+      var pPct = Math.round((proceeded / bLog.length) * 100);
+      sentences.push(pPct + '% of agents (' + proceeded + ') maintained their original strategy throughout');
+    }
+  }
+
+  // Volatility insight — before → after framing
+  if (shiftData.governedVol < shiftData.baselineVol && shiftData.baselineVol > 0) {
+    var volDrop = Math.round((1 - shiftData.governedVol / shiftData.baselineVol) * 100);
+    sentences.push('Uncertainty dropped ' + volDrop + '% as agents moved from exploration to caution');
+  }
+
+  // Add emergent pattern insights
+  if (shiftData.patterns && shiftData.patterns.length > 0) {
+    shiftData.patterns.slice(0, 2).forEach(function(p) {
+      sentences.push(p);
+    });
+  }
+
+  return sentences;
+}
+
+function generateCausation(shiftData, bLog) {
+  // Pure causation — why behavior changed — no governance terminology
+  var causes = [];
+  var total = shiftData.total || bLog.length || 0;
+  if (total === 0) return causes;
+
+  var blockRatio = shiftData.blocks / total;
+
+  // No system words (feedback, evaluation, validation, review)
+  // Only agent experience (failed attempts, uncertainty, risk, delay)
+  if (blockRatio > 0.4) {
+    causes.push('Early aggressive attempts failed, forcing agents to rethink their strategy');
+  } else if (blockRatio > 0.1) {
+    causes.push('Some agents hit unexpected resistance and pulled back');
+  }
+
+  if (shiftData.governedVol < shiftData.baselineVol) {
+    causes.push('Uncertainty dropped as agents stopped experimenting and committed to safer positions');
+  }
+
+  if (shiftData.patterns && shiftData.patterns.length > 0) {
+    if (shiftData.patterns.some(function(p) { return p.toLowerCase().includes('hold') || p.toLowerCase().includes('caution'); })) {
+      causes.push('Risk became too visible — agents chose to wait rather than act');
+    }
+    if (shiftData.patterns.some(function(p) { return p.toLowerCase().includes('coordination') || p.toLowerCase().includes('coordinated'); })) {
+      causes.push('Agents independently converged on similar strategies under shared pressure');
+    }
+  }
+
+  // Detect adaptation pattern from behavior log
+  if (bLog.length >= 3) {
+    var recent = bLog.slice(-6);
+    var earlyBlocks = recent.slice(0, 3).filter(function(e) { return e.status === 'BLOCK'; }).length;
+    var lateAllows = recent.slice(-3).filter(function(e) { return e.status === 'ALLOW'; }).length;
+    if (earlyBlocks >= 2 && lateAllows >= 2) {
+      causes.push('Agents became more cautious after early attempts failed');
+    }
+  }
+
+  if (causes.length === 0) {
+    causes.push('Agents held steady — no major shifts in strategy throughout the simulation');
+  }
+
+  return causes;
+}
+
+// ============================================
+// STATE
+// ============================================
+let worlds = [];
+let scenarios = {};
+let narratives = {};
+let currentWorld = null;
+let injectedEvents = [];
+let totalInterventions = 0;
+let totalActions = 0;
+let narrativeEventsByRound = {}; // { round: [{ id, headline, severity }] }
+let ruleImpactTracker = {}; // { ruleId: { blocks: N, label: string } }
+let behaviorLog = []; // { agent, action, status, reason, ts }
+let latestStability = 0;
+let latestVolatility = 0;
+
+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');
+const outcomeStatementEl = document.getElementById('outcome-statement');
+const confidenceGridEl = document.getElementById('confidence-grid');
+const outcomeContextEl = document.getElementById('outcome-context');
+const behaviorShiftsEl = document.getElementById('behavior-shifts');
+const activityTimelineEl = document.getElementById('activity-timeline');
+const activityToggleEl = document.getElementById('activity-toggle');
+const whyContentEl = document.getElementById('why-content');
+
+// Audit + Export
+function openAudit() {
+  // Populate audit content from current data
+  var rulesEl = document.getElementById('audit-rules-content');
+  rulesEl.innerHTML = activeInvEl.innerHTML || '<div style="font-size:11px;color:#666">No rules loaded</div>';
+
+  var verdictsEl = document.getElementById('audit-verdicts-content');
+  var vHtml = '';
+  behaviorLog.forEach(function(e) {
+    vHtml += '<div style="font-size:10px;padding:2px 0;display:flex;gap:8px;border-bottom:1px solid var(--border)">' +
+      '<span style="color:var(--blue);min-width:100px">' + e.agent + '</span>' +
+      '<span style="flex:1;color:var(--text-secondary)">' + e.action + '</span>' +
+      '<span style="font-size:9px;font-weight:600;padding:0 4px;border-radius:2px;' +
+        (e.status === 'BLOCK' ? 'background:var(--red-bg);color:var(--red)' : e.status === 'ALLOW' ? 'background:var(--green-bg);color:var(--green)' : 'background:var(--yellow-bg);color:var(--yellow)') + '">' + e.status + '</span>' +
+      (e.reason ? '<span style="font-size:9px;color:var(--text-faint)">' + e.reason + '</span>' : '') +
+    '</div>';
+  });
+  verdictsEl.innerHTML = vHtml || '<div style="font-size:11px;color:#666">No verdict data</div>';
+
+  var traceEl = document.getElementById('audit-trace-content');
+  traceEl.innerHTML = logEl.innerHTML || '<div style="font-size:11px;color:#666">No trace data</div>';
+
+  document.getElementById('audit-overlay').classList.add('open');
+}
+
+function closeAudit() {
+  document.getElementById('audit-overlay').classList.remove('open');
+}
+
+function exportPDF() {
+  window.print();
+}
+
+function exportCSV() {
+  if (behaviorLog.length === 0) { alert('No data to export yet'); return; }
+  var csv = 'Agent,Action,Behavior,Round\\n';
+  behaviorLog.forEach(function(e) {
+    var behavior = translateBehaviorNarrative(e.action, { status: e.status });
+    csv += '"' + e.agent + '","' + e.action + '","' + behavior + '","' + (e.round || '') + '"\\n';
+  });
+  var blob = new Blob([csv], { type: 'text/csv' });
+  var url = URL.createObjectURL(blob);
+  var a = document.createElement('a');
+  a.href = url;
+  a.download = 'simulation-behavior-' + new Date().toISOString().slice(0, 10) + '.csv';
+  a.click();
+  URL.revokeObjectURL(url);
+}
+
+function copyShareSummary() {
+  var outcome = outcomeStatementEl.textContent;
+  var shifts = [];
+  behaviorShiftsEl.querySelectorAll('.behavior-shift-item').forEach(function(el) { shifts.push('- ' + el.textContent); });
+  var causes = [];
+  whyContentEl.querySelectorAll('.why-item').forEach(function(el) { causes.push('- ' + el.textContent); });
+
+  var text = 'OUTCOME: ' + outcome + '\\n\\n';
+  if (shifts.length) text += 'BEHAVIOR:\\n' + shifts.join('\\n') + '\\n\\n';
+  if (causes.length) text += 'WHY:\\n' + causes.join('\\n') + '\\n';
+  text += '\\nGenerated by NeuroVerse Simulations';
+
+  navigator.clipboard.writeText(text).then(function() {
+    alert('Summary copied to clipboard');
+  });
+}
+
+// ============================================
+// 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();
+
+  // Populate base world selector for custom rules mode
+  populateBaseWorldSelect();
+
+  // 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;
+  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() {
+  // Chart removed — no longer needed in outcome-first view
+}
+
+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;
+}
+
+// ============================================
+// PANEL RENDERING — Outcome / Behavior / Why
+// ============================================
+
+function recordBehavior(reactions, round) {
+  if (!reactions || !reactions.length) return;
+  reactions.forEach(function(r) {
+    var status = r.verdict ? r.verdict.status : 'ALLOW';
+    var reason = r.verdict ? (r.verdict.reason || '') : '';
+    behaviorLog.push({
+      agent: r.stakeholder_id,
+      action: r.reaction || 'acted',
+      status: status,
+      reason: reason,
+      round: round || 0,
+      ts: Date.now(),
+    });
+  });
+}
+
+function updateOutcomePanel() {
+  var worldThesis = currentWorld ? (currentWorld.thesis || currentWorld.description || '') : '';
+  var outcome = generateOutcome(latestStability, latestVolatility, shiftTracker, worldThesis);
+  outcomeStatementEl.textContent = outcome;
+
+  // Structured confidence card
+  var conf = computeConfidence(latestStability, latestVolatility, totalInterventions, totalActions);
+  confidenceGridEl.style.display = 'grid';
+  document.getElementById('cc-strength').textContent = conf.strength;
+  document.getElementById('cc-strength').className = 'cc-value ' + conf.strengthCls;
+  document.getElementById('cc-evidence').textContent = conf.evidence;
+  document.getElementById('cc-evidence').className = 'cc-value ' + conf.evidenceCls;
+  document.getElementById('cc-risk').textContent = conf.risk;
+  document.getElementById('cc-risk').className = 'cc-value ' + conf.riskCls;
+
+  // Context line
+  outcomeContextEl.textContent = 'Based on ' + totalActions + ' agent action' + (totalActions !== 1 ? 's' : '') +
+    (shiftTracker.total > 0 ? ' across ' + (document.getElementById('m-round').textContent || '') : '');
+}
+
+function updateBehaviorPanel() {
+  // Quantified behavioral shifts in human language
+  var shifts = generateBehaviorShifts(shiftTracker, behaviorLog);
+  if (shifts.length > 0) {
+    var html = shifts.map(function(s) {
+      return '<div class="behavior-shift-item">' + s + '</div>';
+    }).join('');
+    behaviorShiftsEl.innerHTML = html;
+  }
+
+  // Activity timeline (narrative micro-events, expandable)
+  if (behaviorLog.length > 0) {
+    activityToggleEl.style.display = 'block';
+    var recent = behaviorLog.slice(-30).reverse();
+    var tHtml = recent.map(function(e) {
+      var narrative = translateBehaviorNarrative(e.action, { status: e.status });
+      return '<div class="activity-item"><span class="activity-agent">' + e.agent + '</span> ' + narrative + '</div>';
+    }).join('');
+    activityTimelineEl.innerHTML = tHtml;
+  }
+}
+
+function updateWhyPanel() {
+  var causes = generateCausation(shiftTracker, behaviorLog);
+  if (causes.length > 0) {
+    var html = causes.map(function(c) {
+      return '<div class="why-item">' + c + '</div>';
+    }).join('');
+    whyContentEl.innerHTML = html;
+  }
+}
+
+function updateAllPanels() {
+  updateOutcomePanel();
+  updateBehaviorPanel();
+  updateWhyPanel();
+}
+
+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);
+    });
+    function parseRuleTitle(id, text) {
+      var parts = text.split(/\s*[—–-]{1,}\s*/);
+      var title = parts.length > 1 ? parts[0].trim() : id.replace(/[-_]/g, ' ');
+      var desc = parts.length > 1 ? parts.slice(1).join(' — ').trim() : text;
+      title = title.replace(/\b\w/g, function(c) { return c.toUpperCase(); });
+      return { title: title, desc: desc };
+    }
+    function generateWhy(text, type) {
+      var t = text.toLowerCase();
+      if (t.includes('liquidity') || t.includes('drain')) return 'Prevents system collapse from liquidity crises';
+      if (t.includes('panic') || t.includes('cascade')) return 'Stops runaway feedback loops during market shocks';
+      if (t.includes('leverage')) return 'Limits systemic risk from over-leveraged positions';
+      if (t.includes('price') || t.includes('pricing')) return 'Stabilizes pricing mechanisms during volatility';
+      if (t.includes('sentiment') || t.includes('consumer')) return 'Tracks behavioral feedback between price and confidence';
+      if (t.includes('military') || t.includes('escalat')) return 'Models how escalation constrains available options';
+      if (t.includes('diplomatic') || t.includes('window')) return 'Preserves negotiation pathways before they close';
+      if (t.includes('grid') || t.includes('capacity')) return 'Prevents infrastructure overload from demand surges';
+      if (t.includes('election') || t.includes('political')) return 'Captures how political pressure amplifies responses';
+      if (t.includes('supply') || t.includes('energy') || t.includes('oil')) return 'Guards against cascading supply chain disruptions';
+      if (t.includes('fraud') || t.includes('suspicious')) return 'Detects and contains anomalous behavior patterns';
+      if (t.includes('withdraw') || t.includes('limit')) return 'Constrains individual actions to protect system stability';
+      if (type === 'gate') return 'Blocks dangerous actions before they propagate';
+      if (type === 'warning') return 'Provides early warning before thresholds are breached';
+      return 'Maintains system integrity under stress conditions';
+    }
+    // Reset per-rule impact counters
+    ruleImpactTracker = {};
+    activeInvEl.innerHTML = event.invariants.map(function(inv) {
+      var parsed = parseRuleTitle(inv.id, inv.description);
+      var why = generateWhy(inv.description, 'invariant');
+      var isUser = inv.source === 'user';
+      var isFull = inv.enforcement === 'full';
+      var enfLabel = isFull ? 'Fully enforced across system' : 'Advisory only';
+      var enfIcon = isFull ? '&#x2713;' : '&#x26A0;';
+      var sourceTag = isUser ? '<span class="rule-source-tag">USER RULE</span>' : '';
+      ruleImpactTracker[inv.id] = { blocks: 0, label: parsed.title };
+      return '<div class="rule-card type-invariant' + (isUser ? ' user-rule' : '') + '" data-rule-id="' + inv.id + '">' +
+        '<div class="rule-header"><span class="rule-icon">&#x1F7E2;</span><span class="rule-title">' + parsed.title + '</span>' + sourceTag + '</div>' +
+        '<div class="rule-desc">' + parsed.desc + '</div>' +
+        '<div class="rule-meta">Invariant &bull; ' + enfIcon + ' ' + enfLabel + '</div>' +
+        '<div class="rule-why">' + why + '</div>' +
+        '<div class="rule-impact" data-impact-id="' + inv.id + '"></div>' +
+      '</div>';
+    }).join('') + event.gates.map(function(g) {
+      var isCritical = g.severity === 'critical';
+      var typeClass = isCritical ? 'type-gate' : 'type-warning';
+      var icon = isCritical ? '&#x1F534;' : '&#x1F7E1;';
+      var typeLabel = isCritical ? 'Gate' : 'Warning';
+      var effect = isCritical ? 'Blocks actions' : 'Signals risk';
+      var why = generateWhy(g.label + ' ' + (g.condition || ''), isCritical ? 'gate' : 'warning');
+      ruleImpactTracker[g.id] = { blocks: 0, label: g.label };
+      return '<div class="rule-card ' + typeClass + '" data-rule-id="' + g.id + '">' +
+        '<div class="rule-header"><span class="rule-icon">' + icon + '</span><span class="rule-title">' + g.label + '</span></div>' +
+        '<div class="rule-desc">' + (g.condition || g.label) + '</div>' +
+        '<div class="rule-meta">' + typeLabel + ' &bull; ' + effect + '</div>' +
+        '<div class="rule-why">' + why + '</div>' +
+        '<div class="rule-impact" data-impact-id="' + g.id + '"></div>' +
+      '</div>';
+    }).join('');
+  }
+
+  if (event.type === 'round') {
+    const isBridge = event.reactions && event.reactions[0] && event.reactions[0].trigger === 'bridge';
+
+    // Record behavior data (no governance display)
+    recordBehavior(event.reactions, event.round);
+    renderAgents(event.reactions); // hidden, kept for audit
+
+    // Track totals
+    totalActions += event.reactions ? event.reactions.length : 0;
+    totalInterventions += event.interventionCount;
+    latestVolatility = event.maxVolatility || 0;
+
+    // Update hidden data elements for audit
+    if (isBridge) {
+      document.getElementById('m-round').textContent = event.round + ' evals';
+    } else {
+      document.getElementById('m-round').textContent = event.round + '/' + event.totalRounds;
+    }
+    document.getElementById('m-volatility').textContent = (event.maxVolatility * 100).toFixed(0) + '%';
+    document.getElementById('m-interventions').textContent = totalInterventions;
+
+    // Track system shifts (data collection, not displayed)
+    trackShift(event);
+
+    // Update all visible panels
+    updateAllPanels();
+
+    // Add trace entry for audit
+    addTraceRound(event);
+  }
+
+  // Bridge metrics — updates stability from external /api/evaluate calls
+  if (event.type === 'bridge_metrics') {
+    latestStability = event.stability;
+    document.getElementById('m-stability').textContent = (event.stability * 100).toFixed(0) + '%';
+    updateAllPanels();
+  }
+
+  if (event.type === 'complete') {
+    statusEl.className = 'status complete';
+    statusEl.textContent = 'COMPLETE';
+    const r = event.result;
+    if (r.governed) {
+      latestStability = r.governed.metrics.stabilityScore;
+      latestVolatility = r.governed.metrics.maxVolatility || latestVolatility;
+      document.getElementById('m-stability').textContent = (r.governed.metrics.stabilityScore * 100).toFixed(0) + '%';
+      addLog('Simulation complete');
+      renderSystemShift(r);
+      renderRuleImpacts(r);
+      renderEnforcementClassification(r.enforcementClassification || []);
+      updateAllPanels();
+      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';
+  }
+}
+
+// ============================================
+// PER-RULE IMPACT RENDERING
+// ============================================
+function renderRuleImpacts(result) {
+  var totalBlocks = shiftTracker.blocks;
+  var cascadeAvoided = result && result.governed && result.baseline &&
+    result.governed.metrics.collapseProbability < result.baseline.metrics.collapseProbability;
+
+  Object.keys(ruleImpactTracker).forEach(function(ruleId) {
+    var tracker = ruleImpactTracker[ruleId];
+    var el = document.querySelector('[data-impact-id="' + ruleId + '"]');
+    if (!el) return;
+
+    var html = '';
+    if (tracker.blocks > 0) {
+      html += '<span class="impact-stat">' + tracker.blocks + ' action' + (tracker.blocks > 1 ? 's' : '') + ' blocked</span>';
+      if (cascadeAvoided) {
+        html += ' <span class="impact-label">&rarr; cascade avoided</span>';
+      } else {
+        html += ' <span class="impact-label">&rarr; behavior modified</span>';
+      }
+    } else {
+      // Rule was present but didn't fire — still useful info
+      html += '<span class="impact-label">No violations detected &mdash; agents complied</span>';
+    }
+    el.innerHTML = html;
+    el.classList.add('visible');
+  });
+}
+
+// ============================================
+// ENFORCEMENT CLASSIFICATION — Full vs Advisory
+// ============================================
+function renderEnforcementClassification(entries) {
+  if (!entries || entries.length === 0) return;
+  entries.forEach(function(entry) {
+    var card = document.querySelector('[data-rule-id="' + entry.id + '"]');
+    if (!card) return;
+    var metaEl = card.querySelector('.rule-meta');
+    if (!metaEl) return;
+    if (entry.level === 'full' && entry.fired) {
+      metaEl.innerHTML = 'Invariant &bull; &#x2713; Fully enforced &bull; <span style="color:#22c55e;font-weight:600">FIRED</span>';
+      card.style.borderLeftColor = '#22c55e';
+    } else if (entry.level === 'full' && !entry.fired) {
+      metaEl.innerHTML = 'Invariant &bull; &#x2713; Fully enforced &bull; <span style="color:var(--text-muted)">standby</span>';
+    } else if (entry.level === 'advisory') {
+      metaEl.innerHTML = 'Invariant &bull; &#x26A0; Advisory only &bull; <span style="color:var(--text-muted)">monitored</span>';
+      card.style.borderLeftColor = '#6b7280';
+      card.style.opacity = '0.75';
+    }
+  });
+}
+
+// ============================================
+// 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
+var ssRawToggle = document.getElementById('ss-raw-toggle');
+if (ssRawToggle) {
+  ssRawToggle.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: [] };
+  if (ssCard) 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');
+  // Reset behavior tracking
+  behaviorLog = [];
+  totalActions = 0;
+  totalInterventions = 0;
+  latestStability = 0;
+  latestVolatility = 0;
+  // Reset visible panels
+  if (outcomeStatementEl) outcomeStatementEl.innerHTML = '<span class="outcome-empty">Run a simulation or connect an agent to see outcomes</span>';
+  if (confidenceGridEl) confidenceGridEl.style.display = 'none';
+  if (outcomeContextEl) outcomeContextEl.textContent = '';
+  if (behaviorShiftsEl) behaviorShiftsEl.innerHTML = '<div class="behavior-empty">Waiting for agent actions</div>';
+  if (activityToggleEl) activityToggleEl.style.display = 'none';
+  if (activityTimelineEl) { activityTimelineEl.innerHTML = ''; activityTimelineEl.classList.remove('open'); }
+  if (whyContentEl) whyContentEl.innerHTML = '<div class="why-empty">Causation analysis appears after agent actions are evaluated</div>';
+}
+
+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;
+    // Track per-rule impacts for card display
+    var ruleId = r.verdict.ruleId || '';
+    if (ruleId && ruleImpactTracker[ruleId]) {
+      ruleImpactTracker[ruleId].blocks++;
+    } else {
+      // Try to match by pattern — governance may report with NV- prefix
+      Object.keys(ruleImpactTracker).forEach(function(k) {
+        if (ruleId.includes(k) || (r.verdict.reason && r.verdict.reason.toLowerCase().includes(ruleImpactTracker[k].label.toLowerCase()))) {
+          ruleImpactTracker[k].blocks++;
+        }
+      });
+    }
+    // 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;
+  if (!ssCard) return; // System shift card removed from visible UI
+
+  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,
+    };
+  }
+};
+
+// ============================================
+// THEME TOGGLE — Light / Dark mode
+// ============================================
+const themeToggleBtn = document.getElementById('theme-toggle');
+function applyTheme(theme) {
+  if (theme === 'light') {
+    document.body.classList.add('light');
+    themeToggleBtn.textContent = 'Dark Mode';
+  } else {
+    document.body.classList.remove('light');
+    themeToggleBtn.textContent = 'Light Mode';
+  }
+  localStorage.setItem('nv-theme', theme);
+}
+themeToggleBtn.addEventListener('click', () => {
+  const current = document.body.classList.contains('light') ? 'light' : 'dark';
+  applyTheme(current === 'light' ? 'dark' : 'light');
+});
+// Restore saved theme
+const savedTheme = localStorage.getItem('nv-theme');
+if (savedTheme) applyTheme(savedTheme);
+
+// ============================================
+// WORLD SOURCE SWITCHING
+// ============================================
+let currentWorldSource = 'preset';
+const worldSourceTabs = document.querySelectorAll('.ws-tab');
+const sourcePresetPanel = document.getElementById('source-preset');
+const sourceCustomPanel = document.getElementById('source-custom');
+const sourceUploadPanel = document.getElementById('source-upload');
+
+worldSourceTabs.forEach(tab => {
+  tab.addEventListener('click', () => {
+    const source = tab.dataset.source;
+    if (source === currentWorldSource) return;
+
+    currentWorldSource = source;
+
+    // Update tab visuals
+    worldSourceTabs.forEach(t => t.classList.remove('active'));
+    tab.classList.add('active');
+    tab.querySelector('input').checked = true;
+
+    // Show/hide panels
+    sourcePresetPanel.style.display = source === 'preset' ? '' : 'none';
+    sourceCustomPanel.style.display = source === 'custom' ? '' : 'none';
+    sourceUploadPanel.style.display = source === 'upload' ? '' : 'none';
+  });
+});
+
+// Populate base world selector in custom rules panel
+function populateBaseWorldSelect() {
+  const select = document.getElementById('custom-base-world');
+  if (!select) return;
+  worlds.forEach(w => {
+    const opt = document.createElement('option');
+    opt.value = w.id;
+    opt.textContent = w.title;
+    select.appendChild(opt);
+  });
+}
+
+// ============================================
+// WORLD ACTION BAR
+// ============================================
+
+// + New World
+document.getElementById('new-world-btn').addEventListener('click', () => {
+  // Switch to custom rules mode
+  currentWorldSource = 'custom';
+  worldSourceTabs.forEach(t => {
+    t.classList.toggle('active', t.dataset.source === 'custom');
+    t.querySelector('input').checked = t.dataset.source === 'custom';
+  });
+  sourcePresetPanel.style.display = 'none';
+  sourceCustomPanel.style.display = '';
+  sourceUploadPanel.style.display = 'none';
+
+  // Clear everything
+  document.getElementById('custom-world-name').value = '';
+  document.getElementById('custom-world-thesis').value = '';
+  document.getElementById('rule-input').value = '';
+  document.getElementById('parsed-rules').innerHTML = '';
+  document.getElementById('rule-status').textContent = '';
+  document.getElementById('rule-status').className = 'rule-status';
+  document.getElementById('custom-base-world').value = '';
+
+  // Clear active rules server-side
+  fetch('/api/clear-rules', { method: 'POST' });
+
+  // Reset right panel
+  document.getElementById('active-invariants').innerHTML = '<div style="font-size:11px;color:var(--text-muted)">No rules loaded. Define your world.</div>';
+});
+
+// Clear Rules
+document.getElementById('clear-rules-btn').addEventListener('click', async () => {
+  await fetch('/api/clear-rules', { method: 'POST' });
+
+  // Clear rule editor UI
+  const ruleInput = document.getElementById('rule-input');
+  if (ruleInput) ruleInput.value = '';
+  const parsed = document.getElementById('parsed-rules');
+  if (parsed) parsed.innerHTML = '';
+  const status = document.getElementById('rule-status');
+  if (status) { status.textContent = 'Rules cleared.'; status.className = 'rule-status success'; }
+
+  // Clear upload state
+  const uploadStatus = document.getElementById('upload-status');
+  if (uploadStatus) { uploadStatus.textContent = 'Rules cleared.'; uploadStatus.className = 'rule-status success'; }
+  const loadedInfo = document.getElementById('loaded-world-info');
+  if (loadedInfo) loadedInfo.style.display = 'none';
+});
+
+// Load World File (switch to upload tab)
+document.getElementById('load-file-btn').addEventListener('click', () => {
+  currentWorldSource = 'upload';
+  worldSourceTabs.forEach(t => {
+    t.classList.toggle('active', t.dataset.source === 'upload');
+    t.querySelector('input').checked = t.dataset.source === 'upload';
+  });
+  sourcePresetPanel.style.display = 'none';
+  sourceCustomPanel.style.display = 'none';
+  sourceUploadPanel.style.display = '';
+});
+
+// Save as World File (export)
+document.getElementById('export-world-btn').addEventListener('click', async () => {
+  try {
+    const resp = await fetch('/api/export-world');
+    const data = await resp.json();
+    const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = (currentWorld ? currentWorld.id : 'custom') + '-world.json';
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  } catch (err) {
+    alert('Export failed: ' + err.message);
+  }
+});
+
+// ============================================
+// WORLD FILE UPLOAD / PASTE
+// ============================================
+const uploadZone = document.getElementById('upload-zone');
+const uploadFileInput = document.getElementById('upload-file-input');
+const uploadBrowseBtn = document.getElementById('upload-browse-btn');
+const worldJsonInput = document.getElementById('world-json-input');
+const loadWorldBtn = document.getElementById('load-world-btn');
+const uploadStatusEl = document.getElementById('upload-status');
+
+// Drag and drop
+uploadZone.addEventListener('dragover', (e) => { e.preventDefault(); uploadZone.classList.add('dragover'); });
+uploadZone.addEventListener('dragleave', () => { uploadZone.classList.remove('dragover'); });
+uploadZone.addEventListener('drop', (e) => {
+  e.preventDefault();
+  uploadZone.classList.remove('dragover');
+  const file = e.dataTransfer.files[0];
+  if (file) readWorldFile(file);
+});
+
+// Browse button
+uploadBrowseBtn.addEventListener('click', (e) => { e.stopPropagation(); uploadFileInput.click(); });
+uploadFileInput.addEventListener('change', () => {
+  if (uploadFileInput.files[0]) readWorldFile(uploadFileInput.files[0]);
+});
+
+// Click zone to browse
+uploadZone.addEventListener('click', () => { uploadFileInput.click(); });
+
+function readWorldFile(file) {
+  const reader = new FileReader();
+  reader.onload = (e) => {
+    worldJsonInput.value = e.target.result;
+    uploadStatusEl.textContent = 'File loaded: ' + file.name + '. Click "Load into Runtime".';
+    uploadStatusEl.className = 'rule-status success';
+  };
+  reader.readAsText(file);
+}
+
+// Load into Runtime
+loadWorldBtn.addEventListener('click', async () => {
+  const jsonText = worldJsonInput.value.trim();
+  if (!jsonText) {
+    uploadStatusEl.textContent = 'Paste or upload a world file first.';
+    uploadStatusEl.className = 'rule-status error';
+    return;
+  }
+
+  let worldData;
+  try {
+    worldData = JSON.parse(jsonText);
+  } catch (err) {
+    uploadStatusEl.textContent = 'Invalid JSON: ' + err.message;
+    uploadStatusEl.className = 'rule-status error';
+    return;
+  }
+
+  // Normalize: if the JSON is { world: {...} } or just {...}
+  const worldPayload = worldData.world || worldData;
+
+  loadWorldBtn.textContent = 'Loading...';
+  loadWorldBtn.disabled = true;
+
+  try {
+    const resp = await fetch('/api/load-world-file', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ world: worldPayload }),
+    });
+    const result = await resp.json();
+
+    if (result.error) {
+      uploadStatusEl.textContent = result.error;
+      uploadStatusEl.className = 'rule-status error';
+    } else {
+      uploadStatusEl.textContent = result.message;
+      uploadStatusEl.className = 'rule-status success';
+
+      // Show loaded world info
+      const infoEl = document.getElementById('loaded-world-info');
+      infoEl.style.display = '';
+      document.getElementById('lw-name').textContent = result.world.title;
+      document.getElementById('lw-thesis').textContent = '"' + result.world.thesis + '"';
+      document.getElementById('lw-stats').textContent =
+        result.world.invariants.length + ' invariants, ' +
+        result.world.gates.length + ' gates, ' +
+        result.rulesApplied + ' rules';
+
+      // Update active invariants in right panel
+      const invHtml = result.world.invariants.map(inv =>
+        '<div class="inv-item">[' + inv.id + '] ' + inv.description + '</div>'
+      ).join('') + result.world.gates.map(g =>
+        '<div class="inv-item" style="color:' + (g.severity === 'critical' ? 'var(--red)' : 'var(--yellow)') + '">[' + g.id + '] ' + g.label + '</div>'
+      ).join('');
+      activeInvEl.innerHTML = invHtml || '<div style="font-size:11px;color:var(--text-muted)">No invariants defined</div>';
+
+      // Update state variables if present
+      if (result.world.stateVariables && result.world.stateVariables.length > 0) {
+        // Store as a pseudo-world so sliders render
+        currentWorld = {
+          id: 'custom-world',
+          title: result.world.title,
+          thesis: result.world.thesis,
+          stateVariables: result.world.stateVariables,
+          invariants: result.world.invariants,
+          gates: result.world.gates,
+        };
+        selectWorld('custom-world');
+      } else {
+        // Just set current world reference
+        currentWorld = {
+          id: 'custom-world',
+          title: result.world.title,
+          thesis: result.world.thesis,
+          stateVariables: [],
+          invariants: result.world.invariants,
+          gates: result.world.gates,
+        };
+      }
+    }
+  } catch (err) {
+    uploadStatusEl.textContent = 'Error: ' + err.message;
+    uploadStatusEl.className = 'rule-status error';
+  }
+
+  loadWorldBtn.textContent = 'Load into Runtime';
+  loadWorldBtn.disabled = false;
+});
+
+// ============================================
+// PLAIN-ENGLISH RULE EDITOR
+// ============================================
+const ruleInput = document.getElementById('rule-input');
+const parseRulesBtn = document.getElementById('parse-rules-btn');
+const parsedRulesEl = document.getElementById('parsed-rules');
+const ruleStatusEl = document.getElementById('rule-status');
+let parsedRuleData = [];
+
+parseRulesBtn.addEventListener('click', async () => {
+  const text = ruleInput.value.trim();
+  if (!text) return;
+
+  parseRulesBtn.disabled = true;
+  parseRulesBtn.textContent = 'Parsing...';
+  ruleStatusEl.textContent = '';
+  ruleStatusEl.className = 'rule-status';
+
+  try {
+    const resp = await fetch('/api/parse-rules', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ text, worldId: currentWorld ? currentWorld.id : 'trading' }),
+    });
+    const data = await resp.json();
+
+    if (data.error) {
+      ruleStatusEl.textContent = data.error;
+      ruleStatusEl.className = 'rule-status error';
+      parsedRulesEl.innerHTML = '';
+      parsedRuleData = [];
+    } else {
+      parsedRuleData = data.rules || [];
+      parsedRulesEl.innerHTML = parsedRuleData.map((r, i) => {
+        const enfType = r.enforcement || 'block';
+        const iconMap = { block: '&#x1F534;', allow: '&#x1F7E2;', modify: '&#x1F535;', warn: '&#x1F7E1;', pause: '&#x1F7E1;' };
+        const labelMap = { block: 'Gate', allow: 'Invariant', modify: 'Modifier', warn: 'Warning', pause: 'Warning' };
+        const effectMap = { block: 'Blocks actions', allow: 'Always enforced', modify: 'Adjusts behavior', warn: 'Signals risk', pause: 'Signals risk' };
+        const icon = iconMap[enfType] || '&#x1F7E2;';
+        const label = labelMap[enfType] || 'Rule';
+        const effect = effectMap[enfType] || 'Active';
+        return '<div class="parsed-rule enforcement-' + enfType + '">' +
+          '<div class="pr-header"><span class="pr-icon">' + icon + '</span><span class="pr-action">' + label + '</span></div>' +
+          '<div class="pr-desc">' + r.description + '</div>' +
+          '<div class="pr-patterns">' + effect + ' &bull; Matches: ' + r.intent_patterns.join(', ') + '</div>' +
+          '</div>';
+      }).join('');
+
+      if (parsedRuleData.length > 0) {
+        const btnLabel = currentWorldSource === 'custom' ? 'Generate World with ' + parsedRuleData.length + ' Rule' + (parsedRuleData.length > 1 ? 's' : '') : 'Apply ' + parsedRuleData.length + ' Rule' + (parsedRuleData.length > 1 ? 's' : '') + ' to Simulation';
+        parsedRulesEl.innerHTML += '<button class="btn btn-apply-rules" id="apply-rules-btn">' + btnLabel + '</button>';
+        document.getElementById('apply-rules-btn').addEventListener('click', async () => {
+          try {
+            // If in custom rules mode, use base world if selected
+            let worldId = currentWorld ? currentWorld.id : 'trading';
+            if (currentWorldSource === 'custom') {
+              const baseWorld = document.getElementById('custom-base-world').value;
+              if (baseWorld) worldId = baseWorld;
+            }
+
+            const applyResp = await fetch('/api/apply-rules', {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ rules: parsedRuleData, worldId }),
+            });
+            const applyData = await applyResp.json();
+            if (applyData.status === 'applied') {
+              ruleStatusEl.textContent = applyData.applied + ' rule(s) active. Run a simulation to see the effect.';
+              ruleStatusEl.className = 'rule-status success';
+
+              // Update right panel invariants with custom rules
+              const customName = document.getElementById('custom-world-name');
+              const worldName = (customName && customName.value) ? customName.value : 'Custom World';
+              const customThesis = document.getElementById('custom-world-thesis');
+              const thesis = (customThesis && customThesis.value) ? customThesis.value : 'User-defined governance rules';
+
+              // Show rules in active invariants panel
+              activeInvEl.innerHTML = parsedRuleData.map(r => {
+                const enfType = r.enforcement || 'block';
+                const colorMap = { block: 'var(--red)', allow: 'var(--green)', modify: 'var(--blue)', warn: 'var(--yellow)', pause: 'var(--yellow)' };
+                const color = colorMap[enfType] || 'var(--text-secondary)';
+                return '<div class="inv-item" style="color:' + color + '">[' + r.id + '] ' + r.description + '</div>';
+              }).join('');
+
+              // In custom mode, set a custom world reference
+              if (currentWorldSource === 'custom') {
+                const baseWorld = document.getElementById('custom-base-world').value;
+                if (baseWorld) {
+                  selectWorld(baseWorld);
+                } else {
+                  currentWorld = { id: 'custom-world', title: worldName, thesis, stateVariables: [], invariants: [], gates: [] };
+                }
+                document.getElementById('world-thesis').textContent = '"' + thesis + '"';
+              }
+            }
+          } catch (err) {
+            ruleStatusEl.textContent = 'Error applying rules: ' + err.message;
+            ruleStatusEl.className = 'rule-status error';
+          }
+        });
+        ruleStatusEl.textContent = 'Parsed ' + parsedRuleData.length + ' rule(s). Review and click ' + (currentWorldSource === 'custom' ? 'Generate.' : 'Apply.');
+        ruleStatusEl.className = 'rule-status success';
+      }
+    }
+  } catch (err) {
+    ruleStatusEl.textContent = 'Error: ' + err.message;
+    ruleStatusEl.className = 'rule-status error';
+  }
+
+  parseRulesBtn.disabled = false;
+  parseRulesBtn.textContent = 'Parse Rules';
+});
+
+// ============================================
+// SESSION TRACKING
+// ============================================
+
+let sessionPollInterval = null;
+
+async function pollSessionStats() {
+  try {
+    const resp = await fetch('/api/session');
+    const data = await resp.json();
+    const el = (id) => document.getElementById(id);
+    if (el('s-total')) el('s-total').textContent = data.evaluations.total;
+    if (el('s-blocked')) el('s-blocked').textContent = data.evaluations.blocked;
+    if (el('s-modified')) el('s-modified').textContent = data.evaluations.modified;
+    if (el('s-allowed')) el('s-allowed').textContent = data.evaluations.allowed;
+    if (el('s-agents')) {
+      el('s-agents').textContent = data.agents.length > 0
+        ? data.agents.length + ' agent(s): ' + data.agents.slice(0, 5).join(', ') + (data.agents.length > 5 ? '...' : '')
+        : 'No agents connected yet';
+    }
+    if (el('session-history') && data.historyCount > 0) {
+      el('session-history').textContent = data.historyCount + ' previous session(s) saved for comparison';
+    }
+  } catch {}
+}
+
+async function viewSessionReport() {
+  try {
+    const resp = await fetch('/api/session/report');
+    const text = await resp.text();
+    const log = document.getElementById('sim-log');
+    if (log) {
+      const div = document.createElement('div');
+      div.className = 'log-round';
+      div.innerHTML = '<h4 style="color:#818cf8">Enforcement Report</h4><pre style="white-space:pre-wrap;font-size:11px;color:#d4d4d8">' + text.replace(/</g,'&lt;') + '</pre>';
+      log.prepend(div);
+      log.scrollTop = 0;
+    }
+  } catch (err) { console.error('Failed to load report', err); }
+}
+
+async function resetSession() {
+  if (!confirm('Reset session? Current data will be saved for comparison.')) return;
+  try {
+    const resp = await fetch('/api/session/reset', { method: 'POST' });
+    const data = await resp.json();
+    const log = document.getElementById('sim-log');
+    if (log) {
+      const div = document.createElement('div');
+      div.className = 'log-round';
+      div.innerHTML = '<h4 style="color:#fbbf24">Session Reset</h4><div style="font-size:11px;color:#a8a29e">' + data.message + '</div>';
+      log.prepend(div);
+    }
+    pollSessionStats();
+  } catch (err) { console.error('Failed to reset session', err); }
+}
+
+async function saveExperiment() {
+  try {
+    const resp = await fetch('/api/session/save', { method: 'POST' });
+    const data = await resp.json();
+    if (data.error) { alert(data.error); return; }
+    const log = document.getElementById('sim-log');
+    if (log) {
+      const div = document.createElement('div');
+      div.className = 'log-round';
+      div.innerHTML = '<h4 style="color:#4ade80">Experiment Saved</h4><div style="font-size:11px;color:#a8a29e">ID: ' + data.experimentId + '<br>File: ' + data.filePath + '<br>Stability: ' + (data.metrics.stability * 100).toFixed(0) + '% | Effectiveness: ' + (data.metrics.effectiveness * 100).toFixed(0) + '%</div>';
+      log.prepend(div);
+    }
+  } catch (err) { console.error('Failed to save experiment', err); }
+}
+
+// Poll session stats every 2 seconds
+sessionPollInterval = setInterval(pollSessionStats, 2000);
+pollSessionStats();
+
+// ============================================
+// BOOT
+// ============================================
+init();
+<\/script>
+</body>
+</html>`;