@neuroverseos/nv-sim 0.1.4 → 0.1.5

package/dist/engine/liveVisualizer.js

@@ -48,6 +48,7 @@ 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");
@@ -97,9 +98,270 @@ function deleteVariant(variantId) {
  * 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) {
@@ -133,6 +395,18 @@ function startInteractiveServer(port, onReady) {
             });
             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]) {
@@ -156,7 +430,12 @@ function startInteractiveServer(port, onReady) {
             scenario: resolved.scenario,
             worldThesis: world.thesis,
             agents: resolved.stakeholders.map(s => s.id),
-            invariants: world.invariants.map(inv => ({ id: inv.id, description: inv.description })),
+            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,
@@ -238,7 +517,7 @@ function startInteractiveServer(port, onReady) {
         }
         if (req.url === "/api/worlds" && req.method === "GET") {
             const { resolveWorld } = await Promise.resolve().then(() => __importStar(require("./worldComparison")));
-            const worldIds = ["trading", "strait_of_hormuz", "gas_price_spike", "ai_regulation_crisis"];
+            const worldIds = ["trading", "strait_of_hormuz", "gas_price_spike", "ai_regulation_crisis", "science_research"];
             const worlds = worldIds.map(id => {
                 try {
                     const r = resolveWorld(id);
@@ -372,47 +651,170 @@ function startInteractiveServer(port, onReady) {
                 // Without guards, everything defaults to ALLOW. These guards define what
                 // simulation actions should be governed.
                 if (!nvWorld.guards) {
-                    nvWorld.guards = {
-                        guards: [
-                            {
-                                id: "sim-panic-actions",
-                                label: "Block panic-driven actions",
-                                description: "Prevents panic selling, aggressive shorting, and other destabilizing actions during high volatility",
-                                category: "structural",
-                                enforcement: "block",
-                                immutable: true,
-                                invariant_ref: nvWorld.invariants[0]?.id,
-                                intent_patterns: ["panic_sell", "panic sell", "panic buy", "panic_buy"],
-                                default_enabled: true,
-                            },
-                            {
-                                id: "sim-excessive-leverage",
-                                label: "Block excessive leverage",
-                                description: "Prevents increasing leverage positions that could amplify cascades",
-                                category: "structural",
-                                enforcement: "block",
-                                immutable: true,
-                                intent_patterns: ["increase_leverage", "increase leverage", "max leverage"],
-                                default_enabled: true,
-                            },
-                            {
-                                id: "sim-aggressive-actions",
-                                label: "Pause aggressive market actions",
-                                description: "Requires review for aggressive buying or shorting that could move markets",
-                                category: "operational",
-                                enforcement: "pause",
-                                immutable: false,
-                                intent_patterns: ["aggressive_buy", "aggressive buy", "aggressive_short", "short"],
-                                default_enabled: true,
-                            },
-                        ],
-                        intent_vocabulary: {
-                            "panic_sell": { label: "Panic Sell", pattern: "panic_sell" },
-                            "increase_leverage": { label: "Increase Leverage", pattern: "increase_leverage" },
-                            "aggressive_buy": { label: "Aggressive Buy", pattern: "aggressive_buy" },
-                            "short": { label: "Short Position", pattern: "short" },
+                    // 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
@@ -423,7 +825,7 @@ function startInteractiveServer(port, onReady) {
                     tool: "simulation",
                     scope: `bridge/${payload.actor}`,
                     actionCategory: "execute",
-                    riskLevel: (["panic_sell", "panic_buy", "increase_leverage"].includes(payload.action) ? "high" : "medium"),
+                    riskLevel: (["panic_sell", "panic_buy", "increase_leverage", "create_post", "repost", "quote_post"].includes(payload.action) ? "high" : "medium"),
                     args: {
                         actor: payload.actor,
                         action: payload.action,
@@ -450,25 +852,60 @@ function startInteractiveServer(port, onReady) {
                 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: 0,
+                    round: bridgeMetrics.evalCount,
                     totalRounds: 0,
                     phase: "governed",
                     reactions: [{
                             stakeholder_id: payload.actor,
                             reaction: payload.action,
-                            impact: 0,
+                            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: 0,
-                    maxVolatility: 0,
+                    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,
@@ -478,6 +915,12 @@ function startInteractiveServer(port, onReady) {
                 });
             }
             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",
@@ -489,6 +932,399 @@ function startInteractiveServer(port, onReady) {
             }
             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 => ({
@@ -616,6 +1452,81 @@ function startInteractiveServer(port, onReady) {
             }
             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);
@@ -632,251 +1543,611 @@ const INTERACTIVE_DASHBOARD_HTML = `<!DOCTYPE html>
 <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: #0a0a0a; color: #e0e0e0; overflow: hidden; }
-  .header { padding: 12px 20px; border-bottom: 1px solid #1a1a1a; display: flex; justify-content: space-between; align-items: center; }
-  .header h1 { font-size: 15px; color: #fff; }
-  .header .sub { font-size: 11px; color: #555; margin-left: 12px; }
+  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: #1a1a2e; color: #818cf8; }
-  .status.live { background: #052e16; color: #4ade80; animation: pulse 2s infinite; }
-  .status.complete { background: #1e1b4b; color: #818cf8; }
+  .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: #0d0d0d; border-right: 1px solid #1a1a1a; overflow-y: auto; padding: 16px; }
+  .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: #555; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid #1a1a1a; }
+  .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: #888; margin-bottom: 4px; display: flex; justify-content: space-between; }
-  .ctrl-label .val { color: #ccc; font-weight: 600; }
+  .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: #222; border-radius: 2px; outline: none; }
-  input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #818cf8; cursor: pointer; }
-  input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #818cf8; cursor: pointer; border: none; }
+  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: #111; color: #ccc; border: 1px solid #333; padding: 6px 8px; border-radius: 4px; font-family: inherit; font-size: 12px; }
+  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: #333; border-radius: 10px; cursor: pointer; transition: background 0.2s; }
-  .toggle.on { background: #4ade80; }
+  .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: #999; }
+  .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: #111; color: #ccc; border: 1px solid #333; padding: 4px 6px; border-radius: 4px; font-family: inherit; font-size: 12px; text-align: center; }
+  .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: #888; padding: 3px 6px; background: #111; border-radius: 3px; margin-bottom: 3px; display: flex; justify-content: space-between; }
-  .inject-item .remove { color: #f87171; cursor: pointer; }
+  .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: #4ade80; color: #0a0a0a; }
+  .btn-run { background: var(--green); color: #0a0a0a; }
   .btn-run:hover { background: #22c55e; }
-  .btn-run:disabled { background: #1a3a1a; color: #555; cursor: not-allowed; }
-  .btn-add { background: #222; color: #818cf8; padding: 6px; font-size: 11px; }
-  .btn-add:hover { background: #2a2a3a; }
+  .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: #111; border: 1px solid #222; border-radius: 4px; color: #ccc; font-family: inherit; font-size: 11px; text-align: left; cursor: pointer; }
-  .scenario-btn:hover { border-color: #818cf8; background: #151520; }
-  .scenario-btn .stitle { font-weight: 600; color: #e0e0e0; }
-  .scenario-btn .sdesc { color: #666; font-size: 10px; margin-top: 2px; }
+  .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: #1a1a2e; color: #818cf8; margin-top: 0; }
-  .btn-save:hover { background: #252540; }
-  .btn-confirm { flex: 1; background: #4ade80; color: #0a0a0a; padding: 7px; font-size: 11px; }
-  .btn-cancel { flex: 1; background: #222; color: #888; padding: 7px; font-size: 11px; }
-  .save-input { width: 100%; background: #111; color: #ccc; border: 1px solid #333; padding: 7px 8px; border-radius: 4px; font-family: inherit; font-size: 12px; }
-  .save-input:focus { border-color: #818cf8; outline: none; }
+  .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: #111; border: 1px solid #222; border-radius: 4px; padding: 8px 10px; margin-bottom: 4px; cursor: pointer; position: relative; }
-  .variant-card:hover { border-color: #4ade80; background: #0f1f0f; }
-  .variant-card .vname { font-size: 12px; font-weight: 600; color: #e0e0e0; }
-  .variant-card .vdesc { font-size: 10px; color: #666; margin-top: 2px; }
-  .variant-card .vmeta { font-size: 10px; color: #444; margin-top: 4px; }
-  .variant-card .vmeta .vresult { color: #4ade80; }
-  .variant-card .vdelete { position: absolute; top: 6px; right: 8px; color: #f87171; font-size: 10px; cursor: pointer; opacity: 0; transition: opacity 0.2s; }
+  .variant-card { 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: #1a1a2e; color: #818cf8; border-radius: 3px; margin-top: 3px; }
+  .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 1fr auto; overflow: hidden; }
-  .viewer-top { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #1a1a1a; }
-  .viewer-mid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #1a1a1a; overflow: hidden; }
-  .viewer-bottom { background: #0a0a0a; border-top: 1px solid #1a1a1a; padding: 12px 16px; max-height: 180px; overflow-y: auto; }
-
-  .vpanel { background: #0a0a0a; padding: 14px; overflow-y: auto; }
-  .vpanel h2 { font-size: 11px; color: #555; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
-
-  /* Metrics */
-  .metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
-  .metric-box { background: #111; border: 1px solid #222; border-radius: 6px; padding: 10px; text-align: center; }
-  .metric-box .value { font-size: 20px; font-weight: 700; color: #fff; }
-  .metric-box .label { font-size: 10px; color: #555; margin-top: 2px; }
-  .metric-box.good .value { color: #4ade80; }
-  .metric-box.bad .value { color: #ef4444; }
-  .metric-box.warn .value { color: #fbbf24; }
-
-  /* Agent bars */
-  .agent-row { display: flex; align-items: center; gap: 6px; padding: 3px 0; font-size: 11px; }
-  .agent-name { width: 130px; color: #777; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-  .impact-bar-bg { flex: 1; height: 14px; background: #1a1a1a; border-radius: 3px; position: relative; overflow: hidden; }
-  .impact-bar { height: 100%; border-radius: 3px; transition: width 0.4s ease; position: absolute; top: 0; }
-  .impact-bar.positive { background: #4ade80; right: 50%; }
-  .impact-bar.negative { background: #ef4444; left: 50%; }
-  .impact-val { width: 44px; text-align: right; color: #999; font-size: 10px; }
-  .center-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: #333; }
+  .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: #052e16; color: #4ade80; }
-  .verdict.BLOCK { background: #2d0606; color: #f87171; }
-  .verdict.PAUSE { background: #2d2006; color: #fbbf24; }
-
-  /* Chart */
-  .chart-container { position: relative; height: 100%; min-height: 150px; }
-  canvas { width: 100% !important; height: 100% !important; }
-
-  /* Simulation Trace */
-  .trace-round { margin-bottom: 10px; border: 1px solid #1a1a1a; border-radius: 4px; overflow: hidden; }
-  .trace-round-header { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: #111; cursor: pointer; user-select: none; }
-  .trace-round-header:hover { background: #181818; }
+  .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: #1e293b; color: #60a5fa; }
-  .trace-phase.governed { background: #052e16; color: #4ade80; }
-  .trace-round-label { font-size: 11px; color: #ccc; font-weight: 600; }
-  .trace-round-metrics { margin-left: auto; font-size: 10px; color: #666; display: flex; gap: 10px; }
+  .trace-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: #555; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 3px; display: flex; align-items: center; gap: 5px; }
+  .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: #e2e8f0; padding: 3px 0 3px 11px; border-left: 2px solid #f59e0b; margin-left: 2px; }
+  .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: #7f1d1d; color: #fca5a5; }
-  .trace-event-severity.moderate { background: #713f12; color: #fde68a; }
-  .trace-event-severity.minor { background: #1e3a2f; color: #86efac; }
+  .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: #93c5fd; font-weight: 500; min-width: 80px; }
-  .trace-agent-action { color: #a1a1aa; flex: 1; }
+  .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: #4ade80; }
-  .trace-agent-impact.negative { color: #f87171; }
+  .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: #999; font-family: monospace; }
-  .trace-gov-reason { color: #d1d5db; flex: 1; }
-  .trace-dynamics { font-size: 10px; color: #a78bfa; padding: 2px 0 2px 11px; border-left: 2px solid #7c3aed; margin-left: 2px; font-style: italic; }
-  .trace-arrow { color: #333; font-size: 10px; text-align: center; padding: 2px 0; }
-  .trace-empty { font-size: 10px; color: #444; font-style: italic; padding: 4px 0; }
+  .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: #ccc; font-style: italic; margin-bottom: 8px; }
-  .inv-item { font-size: 10px; color: #777; padding: 2px 0; }
+  .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: #333; }
+  .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; }
-  .empty-state .hint { font-size: 11px; color: #2a2a2a; margin-top: 6px; }
+  .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 #1a2e1a; border-radius: 8px; background: #0a0f0a; overflow: hidden; animation: fadeInUp 0.4s ease; }
+  .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: #0d150d; border-bottom: 1px solid #1a2e1a; }
-  .ss-icon { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 6px #4ade8066; }
-  .ss-title { font-size: 11px; font-weight: 700; color: #4ade80; text-transform: uppercase; letter-spacing: 1.5px; }
-  .ss-rule { font-size: 13px; font-weight: 600; color: #e0e0e0; padding: 10px 14px 0; }
+  .ss-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: #111; border: 1px solid #1a1a1a; border-radius: 6px; padding: 10px 12px; }
-  .ss-section-label { font-size: 9px; font-weight: 700; color: #555; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
-  .ss-adapt-rate { font-size: 20px; font-weight: 700; color: #4ade80; }
-  .ss-adapt-desc { font-size: 11px; color: #888; margin-top: 2px; }
-  .ss-shift-item { font-size: 11px; color: #999; padding: 2px 0; display: flex; align-items: center; gap: 6px; }
-  .ss-shift-arrow { color: #4ade80; font-weight: 600; }
-  .ss-pattern-tag { display: inline-block; font-size: 10px; padding: 2px 8px; background: #1a1a2e; color: #818cf8; border-radius: 3px; margin-right: 4px; margin-bottom: 4px; }
-  .ss-impact-row { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: #999; padding: 2px 0; }
-  .ss-impact-delta { color: #4ade80; font-weight: 600; }
-  .ss-impact-delta.negative { color: #f87171; }
-  .ss-narrative { font-size: 12px; color: #ccc; line-height: 1.5; font-style: italic; border-left: 2px solid #4ade80; padding-left: 10px; }
-  .ss-scale { font-size: 10px; color: #555; padding: 0 14px 6px; }
-  .ss-scale strong { color: #888; }
-  .ss-flow { display: flex; align-items: center; gap: 6px; padding: 6px 14px; font-size: 10px; color: #444; }
-  .ss-flow-arrow { color: #4ade80; }
-  .ss-raw-toggle { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: #0d0d0d; border: none; border-top: 1px solid #1a1a1a; color: #555; font-family: inherit; font-size: 10px; cursor: pointer; width: 100%; text-align: left; transition: color 0.2s; }
-  .ss-raw-toggle:hover { color: #888; }
+  .ss-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: #666; padding: 2px 0; display: flex; gap: 6px; }
-  .ss-raw-item .raw-agent { color: #888; min-width: 100px; }
-  .ss-raw-item .raw-action { color: #999; flex: 1; }
+  .ss-raw-item { 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: #2d0606; color: #f87171; }
-  .ss-raw-item .raw-verdict.MODIFY { background: #2d2006; color: #fbbf24; }
+  .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: #0d0d15; border: 1px solid #1a1a2e; border-radius: 6px; padding: 10px 12px; margin-top: 8px; }
-  .integrate-section h4 { font-size: 10px; color: #818cf8; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
-  .integrate-code { font-size: 10px; color: #ccc; background: #111; border: 1px solid #222; border-radius: 4px; padding: 8px; overflow-x: auto; white-space: pre; line-height: 1.5; }
-  .integrate-code .kw { color: #818cf8; }
-  .integrate-code .str { color: #4ade80; }
-  .integrate-code .comment { color: #555; }
-  .integrate-endpoint { font-size: 11px; color: #888; margin-top: 6px; }
-  .integrate-endpoint code { color: #4ade80; background: #111; padding: 1px 5px; border-radius: 3px; }
+  .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">Scenario Control Platform</span>
+    <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>
-  <span id="status" class="status idle">Ready</span>
 </div>
 
 <div class="layout">
   <!-- LEFT: CONTROLS -->
   <div class="controls" id="controls-panel">
-    <!-- Simulation Engine selector -->
+    <!-- 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>Simulation Engine</h3>
-      <div class="ctrl-row">
-        <select id="engine-select">
-          <option value="nv-sim" selected>NV-SIM (Built-in)</option>
-        </select>
+      <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 id="engine-status" style="font-size:10px;color:#555;margin-top:4px"></div>
     </div>
 
-    <!-- World selector -->
-    <div class="ctrl-section">
-      <h3>World</h3>
-      <div class="ctrl-row">
-        <select id="world-select"></select>
+    <!-- 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 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>
+    <!-- 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>
 
-    <!-- Scenario presets -->
-    <div class="ctrl-section">
-      <h3>Scenario Presets</h3>
-      <div id="scenario-list"></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 -->
@@ -920,122 +2191,532 @@ const INTERACTIVE_DASHBOARD_HTML = `<!DOCTYPE html>
 
     <!-- Saved variants -->
     <div class="ctrl-section" style="margin-top:16px">
-      <h3>Saved Variants</h3>
+      <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>Integrate Your Simulator</h3>
-      <div class="integrate-section">
-        <h4>Connect in 3 lines</h4>
-        <div class="integrate-code"><span class="kw">from</span> neuroverse_bridge <span class="kw">import</span> evaluate
+      <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">"agent_1"</span>,
-    action=<span class="str">"panic_sell"</span>,
-    world=<span class="str">"trading"</span>
+    actor=<span class="str">"Harry"</span>,
+    action=action,
+    world=<span class="str">"research"</span>
 )
 
-<span class="kw">if</span> verdict[<span class="str">"decision"</span>] == <span class="str">"BLOCK"</span>:
-    action = <span class="str">"hold"</span>  <span class="comment"># adapted</span></div>
-        <div class="integrate-endpoint">
-          Endpoint: <code id="integrate-url">POST /api/evaluate</code>
+<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 style="font-size:10px;color:#444;margin-top:6px">
-          Fail-open · 500ms timeout · Stateless
+      </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 style="margin-top:8px;font-size:10px">
-          <span style="display:inline-block;padding:2px 6px;background:#2d0606;color:#f87171;border-radius:3px;margin-right:3px">BLOCK</span> replaced
-          <span style="display:inline-block;padding:2px 6px;background:#2d2006;color:#fbbf24;border-radius:3px;margin-right:3px;margin-left:4px">MODIFY</span> constrained
+      </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">
-    <div class="viewer-top">
-      <div class="vpanel">
-        <h2>Live Metrics</h2>
-        <div class="metric-grid">
-          <div class="metric-box"><div class="value" id="m-stability">--</div><div class="label">Stability</div></div>
-          <div class="metric-box"><div class="value" id="m-volatility">--</div><div class="label">Volatility</div></div>
-          <div class="metric-box"><div class="value" id="m-round">--</div><div class="label">Round</div></div>
-          <div class="metric-box"><div class="value" id="m-interventions">0</div><div class="label">Interventions</div></div>
-        </div>
-      </div>
-      <div class="vpanel">
-        <h2>World Rules Active</h2>
-        <div id="active-invariants"></div>
-      </div>
-    </div>
+  <!-- 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');
+  }
 
-    <div class="viewer-mid">
-      <div class="vpanel" id="agents-panel">
-        <h2>Agent Impacts</h2>
-        <div id="agents">
-          <div class="empty-state"><div class="icon">&gt;_</div><div class="msg">Configure world and run simulation</div><div class="hint">Adjust rules on the left, then press Run</div></div>
-        </div>
-      </div>
-      <div class="vpanel">
-        <h2>Impact Timeline</h2>
-        <div class="chart-container"><canvas id="chart"></canvas></div>
-      </div>
-    </div>
+  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');
+    }
+  }
 
-    <!-- System Shift Card — the demo moment -->
-    <div id="system-shift" class="system-shift">
-      <div class="ss-header">
-        <div class="ss-icon"></div>
-        <span class="ss-title">System Shift</span>
-      </div>
-      <div class="ss-rule" id="ss-rule"></div>
-      <div class="ss-scale" id="ss-scale"></div>
-      <div class="ss-flow">
-        <span>Rule</span><span class="ss-flow-arrow">→</span>
-        <span>Behavioral Shift</span><span class="ss-flow-arrow">→</span>
-        <span>Emergent Pattern</span><span class="ss-flow-arrow">→</span>
-        <span>System Outcome</span>
-      </div>
-      <div class="ss-body">
-        <div class="ss-section">
-          <div class="ss-section-label">Behavioral Shift</div>
-          <div class="ss-adapt-rate" id="ss-adapt-rate"></div>
-          <div class="ss-adapt-desc" id="ss-adapt-desc"></div>
-          <div id="ss-shifts"></div>
-        </div>
-        <div class="ss-section">
-          <div class="ss-section-label">What Emerged</div>
-          <div id="ss-patterns"></div>
-        </div>
-        <div class="ss-section">
-          <div class="ss-section-label">System Outcome</div>
-          <div id="ss-impacts"></div>
-        </div>
-        <div class="ss-section">
-          <div class="ss-section-label">What Actually Happened</div>
-          <div class="ss-narrative" id="ss-narrative"></div>
-        </div>
-      </div>
-      <button class="ss-raw-toggle" id="ss-raw-toggle">
-        <span class="arrow">▶</span> View raw detail
-      </button>
-      <div class="ss-raw-detail" id="ss-raw-detail">
-        <div class="ss-raw-list" id="ss-raw-list"></div>
-      </div>
-    </div>
+  // 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');
+    }
+  }
 
-    <div class="viewer-bottom">
-      <h2 style="font-size:11px;color:#555;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px">Simulation Trace <span id="trace-source" style="color:#4ade80;font-weight:600;margin-left:6px"></span> <span style="color:#333;font-weight:400">— Events → Agents → Rules → Outcomes</span></h2>
-      <div id="log"></div>
-    </div>
-  </div>
-</div>
+  if (causes.length === 0) {
+    causes.push('Agents held steady — no major shifts in strategy throughout the simulation');
+  }
+
+  return causes;
+}
 
-<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"><\/script>
-<script>
 // ============================================
 // STATE
 // ============================================
@@ -1045,11 +2726,12 @@ let narratives = {};
 let currentWorld = null;
 let injectedEvents = [];
 let totalInterventions = 0;
-let baselineImpacts = [];
-let governedImpacts = [];
-let chartLabels = [];
-let chart = null;
+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');
@@ -1068,6 +2750,79 @@ 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
@@ -1123,6 +2878,9 @@ async function init() {
   // Load saved variants
   await loadVariants();
 
+  // Populate base world selector for custom rules mode
+  populateBaseWorldSelect();
+
   // Connect SSE
   connectSSE();
 }
@@ -1235,10 +2993,6 @@ runBtn.addEventListener('click', async () => {
 
   // Reset viewer state
   totalInterventions = 0;
-  baselineImpacts = [];
-  governedImpacts = [];
-  chartLabels = [];
-  if (chart) { chart.destroy(); chart = null; }
   agentsEl.innerHTML = '';
   logEl.innerHTML = '';
   document.getElementById('m-stability').textContent = '--';
@@ -1306,28 +3060,7 @@ function connectSSE() {
 }
 
 function initChart() {
-  if (typeof Chart === 'undefined') return;
-  const ctx = document.getElementById('chart');
-  chart = new Chart(ctx, {
-    type: 'line',
-    data: {
-      labels: chartLabels,
-      datasets: [
-        { label: 'Baseline', data: baselineImpacts, borderColor: '#ef4444', backgroundColor: 'rgba(239,68,68,0.1)', fill: true, tension: 0.3, pointRadius: 3 },
-        { label: 'Governed', data: governedImpacts, borderColor: '#4ade80', backgroundColor: 'rgba(74,222,128,0.1)', fill: true, tension: 0.3, pointRadius: 3 },
-      ]
-    },
-    options: {
-      animation: { duration: 400 },
-      responsive: true,
-      maintainAspectRatio: false,
-      plugins: { legend: { labels: { color: '#888', font: { family: 'monospace', size: 10 } } } },
-      scales: {
-        x: { ticks: { color: '#555' }, grid: { color: '#1a1a1a' } },
-        y: { ticks: { color: '#555' }, grid: { color: '#1a1a1a' }, min: -1, max: 1 }
-      }
-    }
-  });
+  // Chart removed — no longer needed in outcome-first view
 }
 
 function addLog(msg, cls) {
@@ -1438,6 +3171,84 @@ function renderAgents(reactions) {
   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';
@@ -1461,47 +3272,118 @@ function handleEvent(event) {
       if (!narrativeEventsByRound[ev.round]) narrativeEventsByRound[ev.round] = [];
       narrativeEventsByRound[ev.round].push(ev);
     });
-    activeInvEl.innerHTML = event.invariants.map(inv =>
-      '<div class="inv-item">[' + inv.id + '] ' + inv.description + '</div>'
-    ).join('') + event.gates.map(g =>
-      '<div class="inv-item" style="color:' + (g.severity === 'critical' ? '#f87171' : '#fbbf24') + '">[' + g.id + '] ' + g.label + '</div>'
-    ).join('');
-    initChart();
+    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') {
-    if (event.phase === 'baseline') {
-      chartLabels.push('R' + event.round);
-      baselineImpacts.push(event.avgImpact);
-    } else {
-      governedImpacts.push(event.avgImpact);
-    }
-    if (chart) chart.update();
+    const isBridge = event.reactions && event.reactions[0] && event.reactions[0].trigger === 'bridge';
 
-    renderAgents(event.reactions);
-    document.getElementById('m-round').textContent = event.round + '/' + event.totalRounds;
-    document.getElementById('m-volatility').textContent = (event.maxVolatility * 100).toFixed(0) + '%';
-    document.getElementById('m-volatility').parentElement.className = 'metric-box ' + (event.maxVolatility > 0.6 ? 'bad' : event.maxVolatility > 0.4 ? 'warn' : 'good');
+    // 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 for the card
+    // Track system shifts (data collection, not displayed)
     trackShift(event);
 
-    // Render structured trace entry instead of flat log line
+    // 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) + '%';
-      document.getElementById('m-stability').parentElement.className = 'metric-box ' + (r.governed.metrics.stabilityScore > 0.7 ? 'good' : 'warn');
-      addLog('Complete. Governance effectiveness: ' + (r.comparison.governanceEffectiveness * 100).toFixed(0) + '%');
+      addLog('Simulation complete');
       renderSystemShift(r);
+      renderRuleImpacts(r);
+      renderEnforcementClassification(r.enforcementClassification || []);
+      updateAllPanels();
       lastSimResult = {
         stability: r.governed.metrics.stabilityScore,
         volatility: r.governed.metrics.maxVolatility,
@@ -1514,6 +3396,59 @@ function handleEvent(event) {
   }
 }
 
+// ============================================
+// 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
 // ============================================
@@ -1527,20 +3462,37 @@ const ssImpactsEl = document.getElementById('ss-impacts');
 const ssNarrativeEl = document.getElementById('ss-narrative');
 
 // Raw detail toggle
-document.getElementById('ss-raw-toggle').addEventListener('click', function() {
-  this.classList.toggle('open');
-  document.getElementById('ss-raw-detail').classList.toggle('open');
-});
+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: [] };
-  ssCard.classList.remove('visible');
+  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) {
@@ -1551,6 +3503,18 @@ function trackShift(event) {
   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,
@@ -1571,6 +3535,7 @@ function trackShift(event) {
 
 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;
 
@@ -1848,6 +3813,468 @@ handleEvent = function(event) {
   }
 };
 
+// ============================================
+// 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
 // ============================================