@neuroverseos/nv-sim 0.1.9 → 0.1.10

package/dist/engine/liveVisualizer.js

@@ -46,6 +46,7 @@ exports.startInteractiveServer = startInteractiveServer;
 const http = __importStar(require("http"));
 const fs = __importStar(require("fs"));
 const path = __importStar(require("path"));
+const child_process_1 = require("child_process");
 const swarmSimulation_1 = require("./swarmSimulation");
 const worldBridge_1 = require("./worldBridge");
 const auditTrace_1 = require("./auditTrace");
@@ -186,24 +187,90 @@ function startInteractiveServer(port, onReady) {
     };
     // Session snapshots for multi-run comparison
     const sessionHistory = [];
+    // ── AI API Key (BYOK — Bring Your Own Key) ──
+    // Users configure their AI provider key through the dashboard.
+    // Stored in memory for the session; can also be set via environment variables.
+    let userAIConfig = {
+        provider: (process.env.ANTHROPIC_API_KEY ? "anthropic" : process.env.OPENAI_API_KEY ? "openai" : "anthropic"),
+        apiKey: process.env.ANTHROPIC_API_KEY ?? process.env.OPENAI_API_KEY ?? "",
+        baseUrl: process.env.OPENAI_BASE_URL,
+        model: process.env.OPENAI_MODEL,
+    };
+    // ── Active Bridge Process ──
+    // Tracks a spawned simulator (e.g., ScienceClaw) launched from the visualizer
+    let activeBridgeProcess = null;
     // ── Bridge Metrics Tracker ──
     // Computes meaningful live metrics from external /api/evaluate calls
     let bridgeEvalCount = 0;
     let bridgeBlockCount = 0;
     let bridgeModifyCount = 0;
+    let bridgeRewardCount = 0;
+    let bridgePenalizeCount = 0;
     function computeBridgeMetrics(decision) {
         bridgeEvalCount++;
         if (decision === "BLOCK")
             bridgeBlockCount++;
         if (decision === "MODIFY")
             bridgeModifyCount++;
-        const totalInterventions = bridgeBlockCount + bridgeModifyCount;
+        if (decision === "REWARD")
+            bridgeRewardCount++;
+        if (decision === "PENALIZE")
+            bridgePenalizeCount++;
+        const totalInterventions = bridgeBlockCount + bridgeModifyCount + bridgePenalizeCount;
         // 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 stability = bridgeEvalCount > 0 ? (bridgeEvalCount - bridgeBlockCount - bridgePenalizeCount) / bridgeEvalCount : 1;
+        // Volatility = ratio of interventions (blocks + modifies + penalizes) — more interventions = more volatile
         const volatility = bridgeEvalCount > 0 ? totalInterventions / bridgeEvalCount : 0;
         return { stability, volatility, totalInterventions, evalCount: bridgeEvalCount };
     }
+    // ── Agent Behavior State Registry ──
+    // Tracks per-agent incentive state: cooldowns, influence, rewards/penalties
+    // Uses @neuroverseos/governance decision-flow-engine when available, falls back to local tracking
+    const agentBehaviorStates = new Map();
+    function getOrCreateAgentState(agentId) {
+        if (!agentBehaviorStates.has(agentId)) {
+            agentBehaviorStates.set(agentId, {
+                agentId,
+                cooldownRemaining: 0,
+                influence: 1.0,
+                rewardMultiplier: 1.0,
+                totalPenalties: 0,
+                totalRewards: 0,
+                consequenceHistory: [],
+                rewardHistory: [],
+            });
+        }
+        return agentBehaviorStates.get(agentId);
+    }
+    function localApplyConsequence(agentId, consequence, ruleId) {
+        const state = getOrCreateAgentState(agentId);
+        state.totalPenalties++;
+        state.consequenceHistory.push({ ruleId, consequence, appliedAt: Date.now() });
+        if (consequence.type === "freeze" || consequence.type === "cooldown") {
+            state.cooldownRemaining = Math.max(state.cooldownRemaining, consequence.rounds ?? 1);
+        }
+        if (consequence.type === "reduce_influence") {
+            state.influence = Math.max(0, state.influence - (consequence.magnitude ?? 0.2));
+        }
+        return state;
+    }
+    function localApplyReward(agentId, reward, ruleId) {
+        const state = getOrCreateAgentState(agentId);
+        state.totalRewards++;
+        state.rewardHistory.push({ ruleId, reward, appliedAt: Date.now() });
+        if (reward.type === "boost_influence") {
+            state.influence = Math.min(2.0, state.influence + (reward.magnitude ?? 0.1));
+        }
+        if (reward.type === "weight_increase") {
+            state.rewardMultiplier = Math.min(3.0, state.rewardMultiplier + (reward.magnitude ?? 0.1));
+        }
+        return state;
+    }
+    function localTickAgentStates() {
+        for (const [, state] of agentBehaviorStates) {
+            state.cooldownRemaining = Math.max(0, state.cooldownRemaining - 1);
+        }
+    }
     function synthesizeSessionReport() {
         // Gather all sessions to report on (history + current if it has data)
         const allSessions = [
@@ -554,24 +621,47 @@ function startInteractiveServer(port, onReady) {
             try {
                 const body = await readBody(req);
                 const payload = JSON.parse(body);
-                if (!payload.name || !payload.baseWorld) {
-                    jsonResponse(res, 400, { error: "name and baseWorld are required" });
+                if (!payload.name) {
+                    jsonResponse(res, 400, { error: "name is required" });
                     return;
                 }
                 const id = slugify(payload.name);
-                const variant = {
-                    id,
-                    name: payload.name,
-                    description: payload.description ?? "",
-                    baseWorld: payload.baseWorld,
-                    stateOverrides: payload.stateOverrides ?? {},
-                    events: payload.events ?? [],
-                    rounds: payload.rounds ?? 5,
-                    createdAt: new Date().toISOString(),
-                    lastResult: payload.lastResult,
-                };
-                const filepath = saveVariant(variant);
-                jsonResponse(res, 200, { status: "saved", variant, filepath });
+                // Support both old WorldVariant format and new SimulationRules format
+                if (payload.thesis !== undefined) {
+                    // New SimulationRules format — complete snapshot
+                    const rules = {
+                        id,
+                        name: payload.name,
+                        description: payload.description ?? "",
+                        thesis: payload.thesis,
+                        bridgeId: payload.bridgeId,
+                        rules: payload.rules ?? [],
+                        worldDefinition: payload.worldDefinition,
+                        stateOverrides: payload.stateOverrides ?? {},
+                        createdAt: new Date().toISOString(),
+                        lastResult: payload.lastResult,
+                    };
+                    ensureVariantsDir();
+                    const filepath = path.join(getVariantsDir(), `${id}.json`);
+                    fs.writeFileSync(filepath, JSON.stringify(rules, null, 2), "utf-8");
+                    jsonResponse(res, 200, { status: "saved", variant: rules, filepath });
+                }
+                else {
+                    // Legacy WorldVariant format
+                    const variant = {
+                        id,
+                        name: payload.name,
+                        description: payload.description ?? "",
+                        baseWorld: payload.baseWorld ?? "unknown",
+                        stateOverrides: payload.stateOverrides ?? {},
+                        events: payload.events ?? [],
+                        rounds: payload.rounds ?? 5,
+                        createdAt: new Date().toISOString(),
+                        lastResult: payload.lastResult,
+                    };
+                    const filepath = saveVariant(variant);
+                    jsonResponse(res, 200, { status: "saved", variant, filepath });
+                }
             }
             catch (err) {
                 jsonResponse(res, 400, { error: "Invalid request body" });
@@ -689,7 +779,7 @@ function startInteractiveServer(port, onReady) {
                             default_enabled: true,
                         },
                     ];
-                    // Social media guards for MiroFish/OASIS agent actions.
+                    // Social media guards for OASIS agent actions.
                     // These govern what AI agents can do on simulated social platforms.
                     const socialGuards = [
                         {
@@ -759,6 +849,8 @@ function startInteractiveServer(port, onReady) {
                             immutable: false,
                             intent_patterns: cg.intent_patterns,
                             default_enabled: true,
+                            ...(cg.consequence ? { consequence: cg.consequence } : {}),
+                            ...(cg.reward ? { reward: cg.reward } : {}),
                         });
                         // Add patterns to vocabulary
                         for (const pat of cg.intent_patterns) {
@@ -816,6 +908,90 @@ function startInteractiveServer(port, onReady) {
                     });
                     return;
                 }
+                // ── Local incentive guard check ──
+                // Custom guards with enforcement=penalize or enforcement=reward need local matching
+                // because the fallback evaluateScenarioGuard only knows ALLOW/BLOCK/PAUSE.
+                // Also check state-based conditions (e.g. low confidence → penalize publishing).
+                const actionLower = payload.action.toLowerCase().replace(/_/g, " ");
+                const stateFacts = payload.state ?? {};
+                for (const cg of customGuards) {
+                    if (cg.enforcement !== "penalize" && cg.enforcement !== "reward")
+                        continue;
+                    // Check if action matches any intent pattern
+                    const matched = cg.intent_patterns.some(pat => {
+                        const p = pat.toLowerCase();
+                        return actionLower.includes(p) || p.includes(actionLower) || payload.action.toLowerCase() === p;
+                    });
+                    if (!matched)
+                        continue;
+                    // For penalize: check if state conditions indicate violation
+                    // For reward: check if state conditions indicate good behavior
+                    const isViolation = cg.enforcement === "penalize";
+                    const isReward = cg.enforcement === "reward";
+                    if (isViolation) {
+                        const consequence = cg.consequence ?? { type: "freeze", rounds: 1, description: cg.description };
+                        const v = {
+                            status: "PENALIZE",
+                            reason: cg.description,
+                            ruleId: cg.id,
+                            consequence: consequence,
+                        };
+                        // Record and respond
+                        const agState = getOrCreateAgentState(payload.actor);
+                        localApplyConsequence(payload.actor, consequence, cg.id);
+                        const metrics = computeBridgeMetrics("PENALIZE");
+                        broadcast({
+                            type: "round", round: metrics.evalCount, totalRounds: 0, phase: "governed",
+                            reactions: [{
+                                    stakeholder_id: payload.actor, reaction: payload.action, impact: -0.6, confidence: 0.5,
+                                    trigger: "bridge",
+                                    verdict: { status: "PENALIZE", reason: v.reason, ruleId: cg.id, incentive: { type: "penalize", magnitude: consequence.magnitude ?? 1, cooldownRounds: consequence.rounds ?? 0, description: consequence.description }, agentState: { cooldown: agState.cooldownRemaining, influence: agState.influence, penalties: agState.totalPenalties, rewards: agState.totalRewards } },
+                                }],
+                            avgImpact: -0.6, maxVolatility: metrics.volatility, dynamics: [], interventionCount: 1,
+                        });
+                        currentSession.evaluations.push({
+                            actor: payload.actor, action: payload.action, decision: "PENALIZE",
+                            reason: cg.description, ruleId: cg.id, world: payload.world ?? currentSession.world,
+                            timestamp: Date.now(), payload: payload.payload,
+                            incentive: { type: "penalize", magnitude: consequence.magnitude ?? 1, cooldownRounds: consequence.rounds ?? 0, description: consequence.description },
+                        });
+                        jsonResponse(res, 200, {
+                            decision: "PENALIZE", reason: cg.description, rule_id: cg.id,
+                            evidence: null, modified_action: null,
+                            consequence, reward: null,
+                            agent_state: { cooldown_remaining: agState.cooldownRemaining, influence: agState.influence, reward_multiplier: agState.rewardMultiplier, total_penalties: agState.totalPenalties, total_rewards: agState.totalRewards },
+                        });
+                        return;
+                    }
+                    if (isReward) {
+                        const reward = cg.reward ?? { type: "boost_influence", magnitude: 0.1, description: cg.description };
+                        const agState = getOrCreateAgentState(payload.actor);
+                        localApplyReward(payload.actor, reward, cg.id);
+                        const metrics = computeBridgeMetrics("REWARD");
+                        broadcast({
+                            type: "round", round: metrics.evalCount, totalRounds: 0, phase: "governed",
+                            reactions: [{
+                                    stakeholder_id: payload.actor, reaction: payload.action, impact: 0.5, confidence: 0.5,
+                                    trigger: "bridge",
+                                    verdict: { status: "REWARD", reason: cg.description, ruleId: cg.id, incentive: { type: "reward", magnitude: reward.magnitude ?? 0.1, cooldownRounds: 0, description: reward.description }, agentState: { cooldown: agState.cooldownRemaining, influence: agState.influence, penalties: agState.totalPenalties, rewards: agState.totalRewards } },
+                                }],
+                            avgImpact: 0.5, maxVolatility: metrics.volatility, dynamics: [], interventionCount: 0,
+                        });
+                        currentSession.evaluations.push({
+                            actor: payload.actor, action: payload.action, decision: "REWARD",
+                            reason: cg.description, ruleId: cg.id, world: payload.world ?? currentSession.world,
+                            timestamp: Date.now(), payload: payload.payload,
+                            incentive: { type: "reward", magnitude: reward.magnitude ?? 0.1, cooldownRounds: 0, description: reward.description },
+                        });
+                        jsonResponse(res, 200, {
+                            decision: "REWARD", reason: cg.description, rule_id: cg.id,
+                            evidence: null, modified_action: null,
+                            consequence: null, reward,
+                            agent_state: { cooldown_remaining: agState.cooldownRemaining, influence: agState.influence, reward_multiplier: agState.rewardMultiplier, total_penalties: agState.totalPenalties, total_rewards: agState.totalRewards },
+                        });
+                        return;
+                    }
+                }
                 // Build a proper GuardEvent — the guard engine matches intent against intent_patterns.
                 // Omit `direction` — setting it enables execution-intent safety checks (prompt injection
                 // detection) which falsely flag financial terms like "buy" and "sell". Bridge actions are
@@ -830,6 +1006,7 @@ function startInteractiveServer(port, onReady) {
                         actor: payload.actor,
                         action: payload.action,
                         ...(payload.payload ?? {}),
+                        ...(payload.state ? { state: payload.state } : {}),
                     },
                 };
                 // Evaluate directly via the governance module
@@ -848,12 +1025,77 @@ function startInteractiveServer(port, onReady) {
                         stakeholders: [{ id: payload.actor, description: payload.actor, disposition: "neutral", priorities: [] }],
                     }, nvWorld, { trace: true, level: "standard" });
                 }
-                // Map verdict to bridge protocol
+                // Map verdict to bridge protocol — includes REWARD/PENALIZE from governance engine
                 const decision = verdict.status === "BLOCK" ? "BLOCK"
                     : verdict.status === "PAUSE" ? "MODIFY"
-                        : "ALLOW";
+                        : verdict.status === "REWARD" ? "REWARD"
+                            : verdict.status === "PENALIZE" ? "PENALIZE"
+                                : "ALLOW";
+                // ── Apply incentive effects to agent behavior state ──
+                // Uses @neuroverseos/governance decision-flow-engine types (consequence/reward)
+                let agentState = getOrCreateAgentState(payload.actor);
+                // Check if agent is in cooldown — if so, block regardless of verdict
+                let effectiveDecision = decision;
+                if (agentState.cooldownRemaining > 0 && decision !== "REWARD") {
+                    effectiveDecision = "PENALIZE";
+                    // Override verdict reason to explain cooldown
+                    verdict.reason = `Agent frozen: ${agentState.cooldownRemaining} round(s) remaining on cooldown`;
+                }
+                // Apply consequence (PENALIZE verdict)
+                if (verdict.status === "PENALIZE" && verdict.consequence) {
+                    try {
+                        const nv = await Promise.resolve().then(() => __importStar(require("@neuroverseos/governance")));
+                        if (nv.applyConsequence) {
+                            agentState = nv.applyConsequence(agentState, verdict.consequence, verdict.ruleId ?? "unknown");
+                            agentBehaviorStates.set(payload.actor, agentState);
+                        }
+                        else {
+                            localApplyConsequence(payload.actor, verdict.consequence, verdict.ruleId ?? "unknown");
+                        }
+                    }
+                    catch {
+                        localApplyConsequence(payload.actor, verdict.consequence, verdict.ruleId ?? "unknown");
+                    }
+                }
+                else if (verdict.status === "PENALIZE") {
+                    // Fallback: no consequence payload, apply default freeze
+                    localApplyConsequence(payload.actor, { type: "freeze", rounds: 1, description: verdict.reason ?? "Penalized" }, verdict.ruleId ?? "unknown");
+                }
+                // Apply reward (REWARD verdict)
+                if (verdict.status === "REWARD" && verdict.reward) {
+                    try {
+                        const nv = await Promise.resolve().then(() => __importStar(require("@neuroverseos/governance")));
+                        if (nv.applyReward) {
+                            agentState = nv.applyReward(agentState, verdict.reward, verdict.ruleId ?? "unknown");
+                            agentBehaviorStates.set(payload.actor, agentState);
+                        }
+                        else {
+                            localApplyReward(payload.actor, verdict.reward, verdict.ruleId ?? "unknown");
+                        }
+                    }
+                    catch {
+                        localApplyReward(payload.actor, verdict.reward, verdict.ruleId ?? "unknown");
+                    }
+                }
+                else if (verdict.status === "REWARD") {
+                    // Fallback: no reward payload, apply default boost
+                    localApplyReward(payload.actor, { type: "boost_influence", magnitude: 0.1, description: verdict.reason ?? "Rewarded" }, verdict.ruleId ?? "unknown");
+                }
+                // Build incentive metadata for response (normalized from consequence/reward)
+                const incentive = verdict.consequence
+                    ? { type: "penalize", magnitude: verdict.consequence.magnitude ?? 1, cooldownRounds: verdict.consequence.rounds ?? 0, description: verdict.consequence.description }
+                    : verdict.reward
+                        ? { type: "reward", magnitude: verdict.reward.magnitude ?? 1, cooldownRounds: 0, description: verdict.reward.description }
+                        : undefined;
                 // Compute live metrics from cumulative bridge evaluations
-                const bridgeMetrics = computeBridgeMetrics(decision);
+                const bridgeMetrics = computeBridgeMetrics(effectiveDecision);
+                // Impact scoring — factor in agent influence level
+                const baseImpact = effectiveDecision === "BLOCK" ? -0.8
+                    : effectiveDecision === "PENALIZE" ? -0.6
+                        : effectiveDecision === "MODIFY" ? -0.3
+                            : effectiveDecision === "REWARD" ? 0.5
+                                : 0.1;
+                const impactForDecision = baseImpact * agentState.influence;
                 // Broadcast governance event to connected SSE clients
                 broadcast({
                     type: "round",
@@ -863,15 +1105,19 @@ function startInteractiveServer(port, onReady) {
                     reactions: [{
                             stakeholder_id: payload.actor,
                             reaction: payload.action,
-                            impact: decision === "BLOCK" ? -0.8 : decision === "MODIFY" ? -0.3 : 0.1,
-                            confidence: 0.5,
+                            impact: impactForDecision,
+                            confidence: 0.5 * agentState.rewardMultiplier,
                             trigger: "bridge",
-                            verdict: { status: verdict.status, reason: verdict.reason, ruleId: verdict.ruleId },
+                            verdict: {
+                                status: verdict.status, reason: verdict.reason, ruleId: verdict.ruleId,
+                                ...(incentive ? { incentive } : {}),
+                                agentState: { cooldown: agentState.cooldownRemaining, influence: agentState.influence, penalties: agentState.totalPenalties, rewards: agentState.totalRewards },
+                            },
                         }],
-                    avgImpact: decision === "BLOCK" ? -0.8 : decision === "MODIFY" ? -0.3 : 0.1,
+                    avgImpact: impactForDecision,
                     maxVolatility: bridgeMetrics.volatility,
                     dynamics: [],
-                    interventionCount: decision !== "ALLOW" ? 1 : 0,
+                    interventionCount: effectiveDecision !== "ALLOW" && effectiveDecision !== "REWARD" ? 1 : 0,
                 });
                 // Also broadcast a stability update so the metric refreshes live
                 broadcast({
@@ -884,10 +1130,11 @@ function startInteractiveServer(port, onReady) {
                 // Record in session
                 currentSession.evaluations.push({
                     actor: payload.actor, action: payload.action,
-                    decision: decision,
+                    decision: effectiveDecision,
                     reason: verdict.reason ?? "", ruleId: verdict.ruleId ?? null,
                     world: payload.world ?? currentSession.world,
                     timestamp: Date.now(), payload: payload.payload,
+                    incentive,
                 });
                 currentSession.guardCount = customGuards.length + (nvWorld.guards?.guards?.length ?? 0);
                 // Persist to audit trail on disk
@@ -895,23 +1142,32 @@ function startInteractiveServer(port, onReady) {
                     agent: payload.actor,
                     action: payload.action,
                     actionType: payload.payload?.type ?? "unknown",
-                    verdict: decision,
+                    verdict: effectiveDecision,
                     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,
+                            effect: effectiveDecision === "BLOCK" ? "blocked" : effectiveDecision === "PENALIZE" ? "blocked" : effectiveDecision === "MODIFY" ? "dampened" : effectiveDecision === "REWARD" ? "monitored" : "monitored",
+                            impactReduction: effectiveDecision === "BLOCK" ? 1 : effectiveDecision === "PENALIZE" ? 0.8 : effectiveDecision === "MODIFY" ? 0.5 : 0,
                         }] : [],
                     worldState: payload.world ?? currentSession.world,
                 });
                 jsonResponse(res, 200, {
-                    decision,
+                    decision: effectiveDecision,
                     reason: verdict.reason ?? null,
                     rule_id: verdict.ruleId ?? null,
                     evidence: verdict.evidence ?? null,
-                    modified_action: decision === "MODIFY" ? payload.payload : null,
+                    modified_action: effectiveDecision === "MODIFY" ? payload.payload : null,
+                    consequence: verdict.consequence ?? null,
+                    reward: verdict.reward ?? null,
+                    agent_state: {
+                        cooldown_remaining: agentState.cooldownRemaining,
+                        influence: agentState.influence,
+                        reward_multiplier: agentState.rewardMultiplier,
+                        total_penalties: agentState.totalPenalties,
+                        total_rewards: agentState.totalRewards,
+                    },
                 });
             }
             catch (err) {
@@ -1025,6 +1281,8 @@ function startInteractiveServer(port, onReady) {
                         immutable: false,
                         intent_patterns: rule.intent_patterns,
                         default_enabled: true,
+                        ...(rule.consequence ? { consequence: rule.consequence } : {}),
+                        ...(rule.reward ? { reward: rule.reward } : {}),
                     });
                 }
                 jsonResponse(res, 200, {
@@ -1169,6 +1427,8 @@ function startInteractiveServer(port, onReady) {
             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 rewarded = evals.filter(e => e.decision === "REWARD").length;
+            const penalized = evals.filter(e => e.decision === "PENALIZE").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))];
@@ -1182,6 +1442,8 @@ function startInteractiveServer(port, onReady) {
                     blocked,
                     modified,
                     allowed,
+                    rewarded,
+                    penalized,
                 },
                 agents: uniqueActors,
                 actionTypes: uniqueActions,
@@ -1388,6 +1650,308 @@ function startInteractiveServer(port, onReady) {
             jsonResponse(res, 200, { adapters });
             return;
         }
+        // ── Agent Behavior States ──
+        // Returns per-agent incentive state (cooldowns, influence, penalties, rewards)
+        if (req.url === "/api/agent-states" && req.method === "GET") {
+            const states = {};
+            for (const [id, state] of agentBehaviorStates) {
+                states[id] = {
+                    ...state,
+                    isFrozen: state.cooldownRemaining > 0,
+                };
+            }
+            jsonResponse(res, 200, {
+                agents: states,
+                totalTracked: agentBehaviorStates.size,
+                frozen: [...agentBehaviorStates.values()].filter(s => s.cooldownRemaining > 0).length,
+            });
+            return;
+        }
+        // Tick agent cooldowns — called once per simulation round to decrement timers
+        if (req.url === "/api/agent-states/tick" && req.method === "POST") {
+            try {
+                const nv = await Promise.resolve().then(() => __importStar(require("@neuroverseos/governance")));
+                if (nv.tickAgentStates) {
+                    const updated = nv.tickAgentStates(agentBehaviorStates);
+                    // Update our map with ticked values
+                    for (const [id, state] of updated) {
+                        agentBehaviorStates.set(id, state);
+                    }
+                }
+                else {
+                    localTickAgentStates();
+                }
+            }
+            catch {
+                localTickAgentStates();
+            }
+            const frozen = [...agentBehaviorStates.values()].filter(s => s.cooldownRemaining > 0).length;
+            jsonResponse(res, 200, { status: "ticked", totalTracked: agentBehaviorStates.size, frozen });
+            return;
+        }
+        // Bridge capabilities — returns what each bridge can/cannot control
+        if (req.url === "/api/bridge-capabilities" && req.method === "GET") {
+            const { SCIENCECLAW_CAPABILITIES } = await Promise.resolve().then(() => __importStar(require("../adapters/scienceclaw")));
+            jsonResponse(res, 200, {
+                bridges: [SCIENCECLAW_CAPABILITIES],
+            });
+            return;
+        }
+        // Bridge connection check — test if a bridge endpoint is reachable
+        if (req.url === "/api/bridge-check" && req.method === "POST") {
+            try {
+                const body = await readBody(req);
+                const { bridgeId, endpoint } = JSON.parse(body);
+                if (bridgeId === "scienceclaw") {
+                    // Auto-detect scienceclaw-post on PATH
+                    let scienceClawPath = null;
+                    let scienceClawVersion = null;
+                    try {
+                        const whichCmd = process.platform === "win32" ? "where scienceclaw-post" : "which scienceclaw-post";
+                        scienceClawPath = (0, child_process_1.execSync)(whichCmd, { encoding: "utf-8", timeout: 3000 }).trim();
+                    }
+                    catch { /* not found */ }
+                    if (!scienceClawPath && endpoint) {
+                        // User provided a custom path/endpoint — check if it exists
+                        try {
+                            if (fs.existsSync(endpoint))
+                                scienceClawPath = endpoint;
+                        }
+                        catch { /* ignore */ }
+                    }
+                    if (scienceClawPath) {
+                        // Try to get version
+                        try {
+                            scienceClawVersion = (0, child_process_1.execSync)(`"${scienceClawPath}" --version 2>/dev/null || echo "unknown"`, { encoding: "utf-8", timeout: 3000 }).trim();
+                        }
+                        catch {
+                            scienceClawVersion = "detected";
+                        }
+                    }
+                    jsonResponse(res, 200, {
+                        connected: true, // governance server is always ready
+                        bridgeId,
+                        detected: !!scienceClawPath,
+                        binaryPath: scienceClawPath,
+                        version: scienceClawVersion,
+                        endpoint: "this server",
+                        governanceReady: true,
+                        canLaunch: !!scienceClawPath,
+                        note: scienceClawPath
+                            ? `ScienceClaw detected at ${scienceClawPath}. Ready to launch governed sessions.`
+                            : "ScienceClaw not found on PATH. Governance server ready — ScienceClaw can connect via /api/evaluate, or provide the binary path.",
+                    });
+                }
+                else {
+                    jsonResponse(res, 400, { error: "Unknown bridge: " + bridgeId });
+                }
+            }
+            catch (err) {
+                jsonResponse(res, 200, { connected: false, error: String(err) });
+            }
+            return;
+        }
+        // ── Bridge Launch — spawn governed ScienceClaw from the visualizer ──
+        if (req.url === "/api/bridge-launch" && req.method === "POST") {
+            try {
+                const body = await readBody(req);
+                const { bridgeId, args: launchArgs, binaryPath } = JSON.parse(body);
+                if (bridgeId !== "scienceclaw") {
+                    jsonResponse(res, 400, { error: "Launch only supported for scienceclaw" });
+                    return;
+                }
+                // Find binary
+                let bin = binaryPath || "scienceclaw-post";
+                if (!binaryPath) {
+                    try {
+                        const whichCmd = process.platform === "win32" ? "where scienceclaw-post" : "which scienceclaw-post";
+                        bin = (0, child_process_1.execSync)(whichCmd, { encoding: "utf-8", timeout: 3000 }).trim();
+                    }
+                    catch {
+                        jsonResponse(res, 400, { error: "scienceclaw-post not found on PATH. Install ScienceClaw or provide binaryPath." });
+                        return;
+                    }
+                }
+                // Kill any existing bridge process
+                if (activeBridgeProcess) {
+                    try {
+                        activeBridgeProcess.kill();
+                    }
+                    catch { /* ignore */ }
+                    activeBridgeProcess = null;
+                }
+                // Build the governed wrapper command
+                // We use the Python wrapper if available, otherwise call directly
+                const wrapperPath = path.join(__dirname, "..", "..", "connectors", "nv_scienceclaw_wrapper.py");
+                const addr = server.address();
+                const nvPort = (addr && typeof addr === "object") ? addr.port : port;
+                const cmdArgs = launchArgs ?? [];
+                let child;
+                let launchMethod;
+                if (fs.existsSync(wrapperPath)) {
+                    // Launch through Python governance wrapper
+                    child = (0, child_process_1.spawn)("python3", [wrapperPath, ...cmdArgs], {
+                        env: {
+                            ...process.env,
+                            NEUROVERSE_URL: `http://localhost:${nvPort}`,
+                            SCIENCECLAW_BIN: bin,
+                        },
+                        stdio: ["pipe", "pipe", "pipe"],
+                    });
+                    launchMethod = "python-wrapper";
+                }
+                else {
+                    // Launch directly — governance via /api/evaluate endpoint
+                    child = (0, child_process_1.spawn)(bin, cmdArgs, {
+                        stdio: ["pipe", "pipe", "pipe"],
+                    });
+                    launchMethod = "direct";
+                }
+                activeBridgeProcess = child;
+                const pid = child.pid;
+                // Stream output to SSE clients
+                child.stdout?.on("data", (chunk) => {
+                    const text = chunk.toString();
+                    broadcast({ type: "bridge_output", source: "scienceclaw", stream: "stdout", text });
+                    // Try parsing JSON lines for live adapter integration
+                    for (const line of text.split("\n").filter(Boolean)) {
+                        if (line.startsWith("{")) {
+                            try {
+                                const data = JSON.parse(line);
+                                if (data.cycle || data.step) {
+                                    broadcast({ type: "bridge_round", source: "scienceclaw", data });
+                                }
+                            }
+                            catch { /* not JSON */ }
+                        }
+                    }
+                });
+                child.stderr?.on("data", (chunk) => {
+                    broadcast({ type: "bridge_output", source: "scienceclaw", stream: "stderr", text: chunk.toString() });
+                });
+                child.on("close", (code) => {
+                    activeBridgeProcess = null;
+                    broadcast({ type: "bridge_exit", source: "scienceclaw", code, pid });
+                });
+                child.on("error", (err) => {
+                    activeBridgeProcess = null;
+                    broadcast({ type: "bridge_error", source: "scienceclaw", error: err.message });
+                });
+                jsonResponse(res, 200, {
+                    launched: true,
+                    pid,
+                    binary: bin,
+                    launchMethod,
+                    args: cmdArgs,
+                    message: `ScienceClaw launched (PID ${pid}) with ${launchMethod} governance. Output streaming to dashboard.`,
+                });
+            }
+            catch (err) {
+                jsonResponse(res, 500, { error: `Launch failed: ${err instanceof Error ? err.message : String(err)}` });
+            }
+            return;
+        }
+        // ── Bridge Stop — kill running bridge process ──
+        if (req.url === "/api/bridge-stop" && req.method === "POST") {
+            if (activeBridgeProcess) {
+                const pid = activeBridgeProcess.pid;
+                try {
+                    activeBridgeProcess.kill();
+                }
+                catch { /* ignore */ }
+                activeBridgeProcess = null;
+                jsonResponse(res, 200, { stopped: true, pid });
+            }
+            else {
+                jsonResponse(res, 200, { stopped: false, message: "No active bridge process" });
+            }
+            return;
+        }
+        // ── Bridge Status — check if a bridge process is running ──
+        if (req.url === "/api/bridge-status" && req.method === "GET") {
+            jsonResponse(res, 200, {
+                running: !!activeBridgeProcess,
+                pid: activeBridgeProcess?.pid ?? null,
+            });
+            return;
+        }
+        // ── AI API Key Management ──
+        // GET: returns current provider config (key masked)
+        // POST: sets provider config for world file compiling and AI-powered features
+        if (req.url === "/api/ai-config" && req.method === "GET") {
+            jsonResponse(res, 200, {
+                provider: userAIConfig.provider,
+                hasKey: userAIConfig.apiKey.length > 0,
+                keyPreview: userAIConfig.apiKey.length > 8
+                    ? userAIConfig.apiKey.slice(0, 4) + "..." + userAIConfig.apiKey.slice(-4)
+                    : userAIConfig.apiKey.length > 0 ? "****" : "",
+                baseUrl: userAIConfig.baseUrl ?? null,
+                model: userAIConfig.model ?? null,
+            });
+            return;
+        }
+        if (req.url === "/api/ai-config" && req.method === "POST") {
+            try {
+                const body = await readBody(req);
+                const payload = JSON.parse(body);
+                if (payload.provider)
+                    userAIConfig.provider = payload.provider;
+                if (payload.apiKey !== undefined)
+                    userAIConfig.apiKey = payload.apiKey;
+                if (payload.baseUrl !== undefined)
+                    userAIConfig.baseUrl = payload.baseUrl || undefined;
+                if (payload.model !== undefined)
+                    userAIConfig.model = payload.model || undefined;
+                jsonResponse(res, 200, {
+                    status: "updated",
+                    provider: userAIConfig.provider,
+                    hasKey: userAIConfig.apiKey.length > 0,
+                });
+            }
+            catch {
+                jsonResponse(res, 400, { error: "Invalid request body" });
+            }
+            return;
+        }
+        // Generate governance rules from thesis description
+        if (req.url === "/api/generate-rules" && req.method === "POST") {
+            try {
+                const body = await readBody(req);
+                const { thesis } = JSON.parse(body);
+                if (!thesis || thesis.trim().length === 0) {
+                    jsonResponse(res, 400, { error: "thesis is required" });
+                    return;
+                }
+                // Use existing policy engine to generate a world from the thesis
+                const { parseRulesFromText, policyToWorld } = await Promise.resolve().then(() => __importStar(require("./policyEngine")));
+                const parsed = parseRulesFromText(thesis);
+                const world = policyToWorld(parsed);
+                // Also set custom guards so they're active for governance
+                customGuards.length = 0;
+                parsed.rules.forEach((r, i) => {
+                    customGuards.push({
+                        id: r.id || "user-rule-" + (i + 1),
+                        label: r.description,
+                        description: r.description,
+                        category: "user",
+                        enforcement: r.enforcement || "block",
+                        immutable: false,
+                        intent_patterns: r.intent_patterns || [],
+                        default_enabled: true,
+                    });
+                });
+                jsonResponse(res, 200, {
+                    status: "generated",
+                    parsed: { total: parsed.rules.length, rules: parsed.rules },
+                    world,
+                    guardsApplied: customGuards.length,
+                });
+            }
+            catch (err) {
+                jsonResponse(res, 400, { error: "Failed to generate rules: " + String(err) });
+            }
+            return;
+        }
         // Run simulation via live adapter (external process)
         if (req.url === "/api/run-live" && req.method === "POST") {
             if (isRunning) {
@@ -1441,7 +2005,7 @@ function startInteractiveServer(port, onReady) {
                 // Listen for rounds from the adapter
                 adapter.on("round", (liveRound) => {
                     // Build lookup of original verdicts from adapter's adaptation data.
-                    // When an external bridge (e.g. MiroFish) already applied governance,
+                    // When an external bridge already applied governance,
                     // the verdict lives in adaptation.deltas — use it instead of re-evaluating
                     // (re-evaluating the MODIFIED action would return ALLOW, hiding the BLOCK).
                     const adaptationByAgent = new Map();
@@ -1958,6 +2522,185 @@ const INTERACTIVE_DASHBOARD_HTML = `<!DOCTYPE html>
     .scenario-btn { padding: 6px; }
   }
 
+  /* Bridge Selector */
+  .bridge-selector { display: flex; gap: 6px; margin-bottom: 8px; }
+  .bridge-btn { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 12px 8px; background: var(--bg-surface); border: 2px solid var(--border); border-radius: 6px; cursor: pointer; transition: all 0.2s; font-family: inherit; color: var(--text-primary); }
+  .bridge-btn:hover { border-color: var(--text-muted); }
+  .bridge-btn.active { border-color: var(--accent); background: var(--accent-bg); }
+  .bridge-name { font-size: 12px; font-weight: 700; }
+  .bridge-sub { font-size: 9px; color: var(--text-muted); margin-top: 2px; }
+  .bridge-btn.active .bridge-name { color: var(--accent); }
+  .bridge-status { font-size: 11px; margin-top: 4px; }
+  .bridge-setup { margin-top: 8px; animation: fadeIn 0.2s ease; }
+  .bridge-instructions { font-size: 11px; color: var(--text-secondary); line-height: 1.6; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 4px; padding: 10px; margin-bottom: 8px; white-space: pre-wrap; }
+  .bridge-connect-row { display: flex; gap: 6px; }
+  .bridge-endpoint-input { flex: 1; 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; }
+  .bridge-endpoint-input:focus { border-color: var(--accent); outline: none; }
+  .btn-connect { background: var(--accent); color: #fff; border: none; border-radius: 4px; padding: 8px 16px; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 600; }
+  .btn-connect:hover { filter: brightness(1.1); }
+  .bridge-info-row { font-size: 11px; color: var(--text-secondary); padding: 4px 0; display: flex; align-items: center; gap: 6px; }
+  .bridge-info-icon { font-size: 8px; }
+
+  /* World File Toggle */
+  .worldfile-toggle { font-size: 11px; color: var(--text-muted); cursor: pointer; padding: 4px 0; transition: color 0.2s; }
+  .worldfile-toggle:hover { color: var(--text-secondary); }
+  .wf-arrow { font-size: 9px; margin-right: 4px; display: inline-block; transition: transform 0.2s; }
+  .worldfile-hint { font-size: 10px; color: var(--text-faint); margin-top: 8px; line-height: 1.5; }
+  .worldfile-hint strong { color: var(--accent); }
+  .worldfile-hint code { background: var(--bg-surface); padding: 1px 4px; border-radius: 2px; color: var(--text-secondary); }
+
+  /* Governance Suggestions */
+  .governance-suggestions { }
+  .suggestion-item { background: var(--bg-surface); border-radius: 4px; padding: 8px 10px; margin-bottom: 6px; animation: fadeIn 0.3s ease; }
+  .suggestion-text { font-size: 11px; color: var(--text-secondary); line-height: 1.5; }
+
+  /* ============================================ */
+  /* OBSERVATION DECK                             */
+  /* ============================================ */
+
+  .deck-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 8px; }
+  .deck-title { font-size: 14px; font-weight: 700; color: var(--text-primary); margin: 0; letter-spacing: 0.5px; }
+  .deck-status { font-size: 10px; color: var(--text-faint); padding: 3px 8px; border: 1px solid var(--border); border-radius: 10px; }
+  .deck-status.live { color: var(--green); border-color: var(--green); }
+  .deck-status.complete { color: var(--accent); border-color: var(--accent); }
+
+  .deck-section { padding: 0 20px 16px; }
+  .deck-label { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
+
+  /* Choice Landscape — bubble visualization */
+  .choice-landscape { min-height: 180px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px; padding: 16px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; position: relative; transition: all 0.3s ease; }
+  .choice-empty { text-align: center; color: var(--text-faint); font-size: 11px; line-height: 1.6; }
+  .choice-empty-icon { font-size: 32px; opacity: 0.3; margin-bottom: 8px; }
+
+  /* Choice Bubble */
+  .choice-bubble { display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); position: relative; cursor: default; }
+  .choice-bubble .cb-count { font-weight: 800; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.4); }
+  .choice-bubble .cb-label { font-size: 8px; color: rgba(255,255,255,0.85); text-align: center; max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; letter-spacing: 0.3px; }
+  .choice-bubble .cb-pct { font-size: 8px; color: rgba(255,255,255,0.6); margin-top: 1px; }
+
+  /* Decision Flow — intended → rule → actual */
+  .decision-flow { margin-top: 12px; }
+  .flow-row { display: grid; grid-template-columns: 1fr 40px 1fr; gap: 0; align-items: center; margin-bottom: 6px; min-height: 32px; }
+  .flow-intended { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
+  .flow-actual { display: flex; align-items: center; gap: 6px; }
+  .flow-bar { height: 24px; border-radius: 4px; display: flex; align-items: center; padding: 0 8px; font-size: 10px; font-weight: 600; min-width: 20px; transition: width 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); }
+  .flow-bar.intended { justify-content: flex-end; background: var(--bg-elevated); color: var(--text-secondary); border-radius: 4px 0 0 4px; }
+  .flow-bar.actual-allow { background: #052e16; color: #4ade80; border-radius: 0 4px 4px 0; }
+  .flow-bar.actual-block { background: #2d0606; color: #f87171; border-radius: 0 4px 4px 0; }
+  .flow-bar.actual-modify { background: #2d2006; color: #fbbf24; border-radius: 0 4px 4px 0; }
+  .flow-arrow { text-align: center; font-size: 12px; color: var(--text-faint); }
+  .flow-arrow.blocked { color: var(--red); }
+  .flow-arrow.modified { color: var(--yellow); }
+  .flow-arrow.allowed { color: var(--green); }
+  .flow-label { font-size: 9px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .flow-count { font-size: 10px; font-weight: 700; min-width: 16px; }
+  .flow-legend { display: flex; gap: 12px; margin-top: 8px; justify-content: center; }
+  .flow-legend-item { font-size: 9px; color: var(--text-faint); display: flex; align-items: center; gap: 4px; }
+  .flow-legend-dot { width: 6px; height: 6px; border-radius: 50%; }
+
+  /* Choice Round Label */
+  .choice-round-label { font-size: 10px; color: var(--text-faint); text-align: center; margin-top: 6px; }
+
+  /* Choice Stream */
+  .choice-stream { max-height: 160px; overflow-y: auto; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 6px; padding: 8px; }
+  .stream-empty { font-size: 11px; color: var(--text-faint); text-align: center; padding: 16px 0; }
+  .stream-item { font-size: 10px; color: var(--text-secondary); padding: 3px 0; border-bottom: 1px solid var(--border); display: flex; gap: 8px; align-items: baseline; animation: streamIn 0.3s ease; }
+  .stream-item:last-child { border-bottom: none; }
+  @keyframes streamIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }
+  .stream-agent { color: var(--accent); font-weight: 600; min-width: 80px; }
+  .stream-action { flex: 1; }
+  .stream-round { color: var(--text-faint); font-size: 9px; }
+  .stream-count { font-size: 9px; color: var(--text-faint); }
+
+  /* Behavioral Drift — post-run comparison */
+  .drift-verdict { font-size: 14px; font-weight: 700; color: var(--text-primary); line-height: 1.5; margin-bottom: 12px; }
+  .drift-comparison { display: grid; gap: 8px; }
+  .drift-row { display: grid; grid-template-columns: 120px 1fr 40px 1fr; gap: 8px; align-items: center; font-size: 11px; }
+  .drift-action { color: var(--text-secondary); font-weight: 600; text-align: right; }
+  .drift-bar-container { height: 20px; background: var(--bg-elevated); border-radius: 3px; overflow: hidden; position: relative; }
+  .drift-bar { height: 100%; border-radius: 3px; transition: width 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); display: flex; align-items: center; padding-left: 6px; font-size: 9px; font-weight: 700; color: rgba(255,255,255,0.9); }
+  .drift-bar.early { background: linear-gradient(90deg, var(--text-muted), var(--text-faint)); }
+  .drift-bar.late { background: linear-gradient(90deg, var(--accent), #6366f1); }
+  .drift-arrow-col { text-align: center; font-size: 14px; color: var(--text-faint); }
+  .drift-delta { font-size: 10px; font-weight: 700; text-align: center; }
+  .drift-delta.up { color: var(--green); }
+  .drift-delta.down { color: var(--red); }
+  .drift-delta.flat { color: var(--text-faint); }
+
+  .drift-header-row { display: grid; grid-template-columns: 120px 1fr 40px 1fr; gap: 8px; font-size: 9px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
+  .drift-header-row span:first-child { text-align: right; }
+  .drift-header-row span:nth-child(3) { text-align: center; }
+
+  /* What-If section */
+  .whatif-content { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px; padding: 16px; }
+  .whatif-stat { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
+  .whatif-num { font-size: 28px; font-weight: 800; }
+  .whatif-num.bad { color: var(--red); }
+  .whatif-num.good { color: var(--green); }
+  .whatif-label { font-size: 12px; color: var(--text-secondary); }
+  .whatif-compare { font-size: 11px; color: var(--text-muted); margin-top: 8px; line-height: 1.5; }
+
+  /* Start Here button */
+  .btn-start-here { width: 100%; padding: 8px; margin-bottom: 12px; background: transparent; color: var(--accent); border: 1px dashed var(--accent); border-radius: 6px; font-size: 11px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.2s; letter-spacing: 0.5px; }
+  .btn-start-here:hover { background: var(--accent-bg); border-style: solid; }
+
+  /* AI API Key Section — always visible */
+  .ai-key-section { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-bottom: 16px; }
+  .ai-key-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
+  .ai-key-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
+  .ai-key-status { font-size: 10px; padding: 2px 8px; border-radius: 10px; }
+  .ai-key-status.connected { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
+  .ai-key-status.missing { background: rgba(248, 113, 113, 0.15); color: #f87171; }
+  .ai-key-provider-row { display: flex; gap: 4px; margin-bottom: 8px; }
+  .ai-key-provider-btn { flex: 1; padding: 5px 4px; background: var(--bg-secondary); color: var(--text-muted); border: 1px solid var(--border-subtle); border-radius: 4px; font-size: 10px; font-family: inherit; cursor: pointer; transition: all 0.2s; text-align: center; }
+  .ai-key-provider-btn:hover { border-color: var(--text-muted); }
+  .ai-key-provider-btn.active { background: var(--accent-bg); color: var(--accent); border-color: var(--accent); }
+  .ai-key-input { width: 100%; background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border-subtle); padding: 6px 8px; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 11px; }
+  .ai-key-input:focus { border-color: var(--accent); outline: none; }
+  .ai-key-input::placeholder { color: var(--text-faint); }
+  .ai-key-extra { margin-top: 6px; }
+  .ai-key-extra input { width: 100%; background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border-subtle); padding: 5px 8px; border-radius: 4px; font-family: inherit; font-size: 10px; margin-bottom: 4px; }
+  .ai-key-extra input:focus { border-color: var(--accent); outline: none; }
+  .ai-key-save-row { display: flex; gap: 6px; margin-top: 6px; align-items: center; }
+  .btn-save-key { padding: 5px 12px; background: var(--accent-bg); color: var(--accent); border: 1px solid var(--accent); border-radius: 4px; font-size: 10px; font-family: inherit; cursor: pointer; transition: all 0.2s; }
+  .btn-save-key:hover { filter: brightness(1.2); }
+  .ai-key-hint { font-size: 9px; color: var(--text-faint); line-height: 1.4; }
+
+  /* Incentive indicators (reward/penalize) */
+  .incentive-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 10px; }
+  .incentive-badge.reward { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
+  .incentive-badge.penalize { background: rgba(251, 146, 60, 0.15); color: #fb923c; }
+  .flow-arrow.rewarded { color: #4ade80; font-size: 16px; }
+  .flow-arrow.penalized { color: #fb923c; font-size: 16px; }
+  .actual-reward { background: rgba(74, 222, 128, 0.2); border: 1px solid rgba(74, 222, 128, 0.3); }
+  .actual-penalize { background: rgba(251, 146, 60, 0.2); border: 1px solid rgba(251, 146, 60, 0.3); }
+
+  /* Onboarding Overlay */
+  .onboard-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.7); backdrop-filter: blur(6px); animation: fadeIn 0.3s ease; }
+  .onboard-card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 12px; max-width: 520px; width: 90vw; max-height: 85vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
+  .onboard-header { padding: 24px 24px 0; }
+  .onboard-header h2 { font-size: 18px; color: var(--text-primary); font-weight: 700; margin: 0; }
+  .onboard-header .onboard-tagline { font-size: 13px; color: var(--text-secondary); margin-top: 6px; line-height: 1.5; }
+  .onboard-body { padding: 16px 24px 24px; }
+  .onboard-step { display: flex; gap: 12px; margin-bottom: 16px; }
+  .onboard-step-num { min-width: 24px; height: 24px; background: var(--accent-bg); color: var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; margin-top: 2px; }
+  .onboard-step-content h4 { font-size: 13px; color: var(--text-primary); font-weight: 700; margin: 0 0 4px; }
+  .onboard-step-content p { font-size: 11px; color: var(--text-muted); margin: 0; line-height: 1.5; }
+  .onboard-example { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 6px; padding: 12px; margin: 12px 0; }
+  .onboard-example-label { font-size: 9px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
+  .onboard-example-text { font-size: 12px; color: var(--accent); font-style: italic; line-height: 1.5; }
+  .onboard-example-result { font-size: 10px; color: var(--text-muted); margin-top: 8px; line-height: 1.5; }
+  .onboard-example-result strong { color: var(--text-secondary); }
+  .onboard-section { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
+  .onboard-section h4 { font-size: 11px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1px; margin: 0 0 8px; }
+  .onboard-capability { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; font-size: 11px; color: var(--text-secondary); line-height: 1.4; }
+  .onboard-capability .cap-icon { color: var(--green); flex-shrink: 0; margin-top: 1px; }
+  .onboard-footer { padding: 0 24px 20px; display: flex; gap: 8px; align-items: center; }
+  .btn-onboard-start { flex: 1; padding: 12px; background: var(--accent); color: #fff; border: none; border-radius: 6px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; transition: filter 0.2s; }
+  .btn-onboard-start:hover { filter: brightness(1.1); }
+  .onboard-dismiss { font-size: 10px; color: var(--text-faint); cursor: pointer; white-space: nowrap; }
+  .onboard-dismiss:hover { color: var(--text-muted); }
+
   /* 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; }
@@ -2047,7 +2790,7 @@ const INTERACTIVE_DASHBOARD_HTML = `<!DOCTYPE html>
 <body>
 <div class="header">
   <div style="display:flex;align-items:center">
-    <h1>NV-SIM</h1>
+    <h1>NeuroVerse</h1>
     <span class="sub">Governance Runtime</span>
   </div>
   <div class="header-right">
@@ -2059,116 +2802,58 @@ const INTERACTIVE_DASHBOARD_HTML = `<!DOCTYPE html>
 <div class="layout">
   <!-- LEFT: CONTROLS -->
   <div class="controls" id="controls-panel">
-    <!-- World Action Bar -->
-    <div class="world-action-bar">
-      <button class="btn btn-world-action" id="new-world-btn" title="Clear everything and start fresh">+ New World</button>
-      <button class="btn btn-world-action" id="load-file-btn" title="Load a .json world file">Load World File</button>
-      <button class="btn btn-world-action" id="clear-rules-btn" title="Clear custom rules only">Clear Rules</button>
-      <button class="btn btn-world-action btn-export" id="export-world-btn" title="Export current world as JSON">Save as World File</button>
-    </div>
 
-    <!-- World Source selector -->
-    <div class="ctrl-section">
-      <h3>World Source</h3>
-      <div class="world-source-tabs">
-        <label class="ws-tab active" data-source="preset">
-          <input type="radio" name="world-source" value="preset" checked>
-          <span class="ws-label">Preset</span>
-          <span class="ws-hint">Demo scenarios</span>
-        </label>
-        <label class="ws-tab" data-source="custom">
-          <input type="radio" name="world-source" value="custom">
-          <span class="ws-label">Custom Rules</span>
-          <span class="ws-hint">Define your world</span>
-        </label>
-        <label class="ws-tab" data-source="upload">
-          <input type="radio" name="world-source" value="upload">
-          <span class="ws-label">World File</span>
-          <span class="ws-hint">JSON / .nv-world</span>
-        </label>
-      </div>
-    </div>
+    <!-- Start Here -->
+    <button class="btn-start-here" id="start-here-btn">Start Here</button>
 
-    <!-- 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>
+    <!-- AI API Key — always visible -->
+    <div class="ai-key-section" id="ai-key-section">
+      <div class="ai-key-header">
+        <span class="ai-key-label">AI Runtime Key</span>
+        <span class="ai-key-status missing" id="ai-key-status">No key</span>
       </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 class="ai-key-provider-row">
+        <button class="ai-key-provider-btn active" id="ai-prov-anthropic" data-provider="anthropic">Anthropic</button>
+        <button class="ai-key-provider-btn" id="ai-prov-openai" data-provider="openai">OpenAI</button>
+        <button class="ai-key-provider-btn" id="ai-prov-custom" data-provider="custom">Custom</button>
       </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>
+      <input type="password" class="ai-key-input" id="ai-key-input" placeholder="sk-... or api key" autocomplete="off">
+      <div class="ai-key-extra" id="ai-key-extra" style="display:none">
+        <input type="text" id="ai-base-url" placeholder="Base URL (e.g. http://localhost:11434/v1)">
+        <input type="text" id="ai-model" placeholder="Model name (e.g. gpt-4o, llama3)">
       </div>
-    </div>
-
-    <!-- SOURCE: Custom Rules (Define Your World) -->
-    <div class="world-source-panel" id="source-custom" style="display:none">
-      <div class="ctrl-section">
-        <h3>Define Your World</h3>
-        <div class="custom-world-header">
-          <input type="text" class="world-name-input" id="custom-world-name" placeholder="World name (e.g. Marketing Governance)">
-          <textarea class="world-thesis-input" id="custom-world-thesis" placeholder="What is this world about? (thesis)"></textarea>
-        </div>
-        <div class="rule-editor">
-          <div class="rule-editor-label">Type your governance rules:</div>
-          <textarea class="rule-input rule-input-large" id="rule-input" placeholder="No agent may spend more than $10k without approval&#10;All outbound emails must be reviewed&#10;Block deletion of production data&#10;Limit API calls to 100 per minute&#10;Require manager approval for refunds over $500"></textarea>
-          <button class="btn btn-generate-world" id="parse-rules-btn">Generate World</button>
-          <div id="parsed-rules" class="parsed-rules"></div>
-          <div id="rule-status" class="rule-status"></div>
-          <div class="rule-examples">
-            Rule patterns:<br>
-            <code>Block [action]</code> — hard suppression<br>
-            <code>Limit [X] to [N]</code> — cap extremes<br>
-            <code>Require [X] for [Y]</code> — structural constraint<br>
-            <code>Pause [X] for review</code> — human-in-the-loop<br>
-            <code>Allow [X]</code> — explicit permission<br>
-            <code>Monitor [X]</code> — circuit breaker gate
-          </div>
-        </div>
+      <div class="ai-key-save-row">
+        <button class="btn-save-key" id="ai-key-save-btn">Save Key</button>
+        <span class="ai-key-hint">Required for world file compiling &amp; AI features</span>
       </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>
+    <!-- STEP 1: What are you trying to control? -->
+    <div class="ctrl-section">
+      <h3>What are you trying to control?</h3>
+      <textarea class="rule-input" id="thesis-input" placeholder="Describe what you want to govern in plain English.&#10;&#10;Examples:&#10;- Ensure no single agent dominates more than 15% of activity&#10;- Prevent panic-driven cascades in volatile markets&#10;- Block unverified research from being published&#10;- Require approval for transactions over $10k"></textarea>
+      <button class="btn btn-generate-world" id="generate-rules-btn" style="margin-top:8px">Generate Governance Rules</button>
+      <div id="rule-generation-status" class="rule-status"></div>
+      <div id="generated-rules-preview" class="parsed-rules"></div>
     </div>
 
-    <!-- SOURCE: Upload World File -->
-    <div class="world-source-panel" id="source-upload" style="display:none">
-      <div class="ctrl-section">
-        <h3>Load World File</h3>
+    <!-- OR: Load World File -->
+    <div class="ctrl-section">
+      <div class="worldfile-toggle" id="worldfile-toggle">
+        <span class="wf-arrow">&#x25B6;</span> Or load a world file
+      </div>
+      <div id="worldfile-panel" style="display:none">
         <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 class="upload-paste-section" style="margin-top:8px">
+          <textarea class="rule-input" id="world-json-input" placeholder="Or paste world JSON here..." style="min-height:60px"></textarea>
         </div>
-        <button class="btn btn-load-world" id="load-world-btn">Load into Runtime</button>
+        <button class="btn btn-load-world" id="load-world-btn" style="margin-top:6px">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>
@@ -2176,65 +2861,54 @@ const INTERACTIVE_DASHBOARD_HTML = `<!DOCTYPE html>
             <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 class="worldfile-hint">
+          Build detailed world files at <strong>neuroverseos.com</strong> or via <code>npm install @neuroverseos/governance</code>
         </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>
+    <!-- STEP 2: Connect to Simulator -->
+    <div class="ctrl-section">
+      <h3>Connect to Simulator</h3>
+      <div class="bridge-selector">
+        <button class="bridge-btn" id="bridge-scienceclaw" data-bridge="scienceclaw">
+          <span class="bridge-name">ScienceClaw</span>
+          <span class="bridge-sub">Research governance</span>
+        </button>
+      </div>
+      <div id="bridge-status" class="bridge-status"></div>
+      <div id="bridge-setup" class="bridge-setup" style="display:none">
+        <div id="bridge-setup-content"></div>
+        <div class="bridge-connect-row">
+          <input type="text" id="bridge-endpoint" class="bridge-endpoint-input" placeholder="http://localhost:5001">
+          <button class="btn btn-connect" id="bridge-connect-btn">Connect</button>
+        </div>
       </div>
-      <div id="engine-status" style="font-size:10px;color:var(--text-faint);margin-top:4px"></div>
     </div>
 
-    <!-- Narrative injection -->
-    <div class="ctrl-section">
-      <h3>Narrative Events</h3>
-      <div class="inject-row">
-        <select id="event-select"></select>
-        <input type="number" id="event-round" min="1" max="20" value="3" placeholder="R">
-      </div>
-      <button class="btn btn-add" id="add-event-btn">+ Add Event</button>
-      <div id="inject-list" class="inject-list" style="margin-top:8px"></div>
+    <!-- STEP 3: Bridge-specific controls (shown after connection) -->
+    <div class="ctrl-section" id="bridge-controls-section" style="display:none">
+      <h3 id="bridge-controls-label">Settings</h3>
+      <div id="bridge-controls"></div>
     </div>
 
-    <!-- Rounds -->
-    <div class="ctrl-section">
-      <h3>Simulation</h3>
-      <div class="ctrl-row">
-        <div class="ctrl-label">
-          <span>Rounds</span>
-          <span class="val" id="rounds-val">5</span>
-        </div>
-        <input type="range" id="rounds-slider" min="3" max="12" value="5">
-      </div>
+    <!-- Starting Conditions (shown when world has state variables) -->
+    <div class="ctrl-section" id="state-vars-section" style="display:none">
+      <h3 style="cursor:pointer" id="state-vars-toggle">
+        <span class="wf-arrow" id="sv-arrow">&#x25B6;</span> Starting Conditions
+      </h3>
+      <div id="state-vars" style="display:none"></div>
     </div>
 
     <!-- Run button -->
-    <button class="btn btn-run" id="run-btn">Run Simulation</button>
+    <button class="btn btn-run" id="run-btn">Run Governance</button>
 
-    <!-- Save as variant -->
+    <!-- Save as Simulation Rules -->
     <div id="save-section" style="margin-top:12px">
-      <button class="btn btn-save" id="save-btn">Save as World Variant</button>
+      <button class="btn btn-save" id="save-btn">Save as Simulation Rules</button>
       <div id="save-form" style="display:none;margin-top:8px">
-        <input type="text" id="variant-name" placeholder="Variant name (e.g. Hormuz Closed + 3x Leverage)" class="save-input">
-        <input type="text" id="variant-desc" placeholder="What does this variant test?" class="save-input" style="margin-top:4px">
+        <input type="text" id="variant-name" placeholder="Name these rules (e.g. Strict Market Controls)" class="save-input">
+        <input type="text" id="variant-desc" placeholder="What does this ruleset control?" class="save-input" style="margin-top:4px">
         <div style="display:flex;gap:6px;margin-top:6px">
           <button class="btn btn-confirm" id="confirm-save-btn">Save</button>
           <button class="btn btn-cancel" id="cancel-save-btn">Cancel</button>
@@ -2242,218 +2916,28 @@ const INTERACTIVE_DASHBOARD_HTML = `<!DOCTYPE html>
       </div>
     </div>
 
-    <!-- Saved variants -->
+    <!-- Saved Simulation Rules -->
     <div class="ctrl-section" style="margin-top:16px">
-      <h3>Your Worlds</h3>
-      <div id="variant-list"><div style="font-size:11px;color:#333">No saved variants yet</div></div>
+      <h3>Saved Rules</h3>
+      <div id="variant-list"><div style="font-size:11px;color:var(--text-muted)">No saved rules yet</div></div>
     </div>
 
-    <!-- Integration Quick-Start -->
-    <div class="ctrl-section" style="margin-top:16px">
-      <h3>Govern Any Agent System</h3>
-
-      <div class="arch-callout">
-        <div class="arch-title">Pre-Execution Enforcement</div>
-        <div class="arch-flow">
-          Agent decides → <span class="arch-yes">Governance evaluates</span> → <span class="arch-yes">THEN executes</span>
-        </div>
-        <div class="arch-warn">Governance MUST happen BEFORE execution. Post-execution = audit only, not control.</div>
-      </div>
-
-      <div class="fw-tabs">
-        <button class="fw-tab active" onclick="switchFw('generic',this)">Generic<span class="fw-sub">any agent</span></button>
-        <button class="fw-tab" onclick="switchFw('scienceclaw',this)">ScienceClaw<span class="fw-sub">research</span></button>
-        <button class="fw-tab" onclick="switchFw('mirofish',this)">MiroFish<span class="fw-sub">OASIS</span></button>
-        <button class="fw-tab" onclick="switchFw('langchain',this)">LangChain<span class="fw-sub">tools</span></button>
-      </div>
-
-      <div class="fw-panel active" id="fw-generic">
-        <div class="integrate-section">
-          <h4>Insert before your agent executes</h4>
-          <div class="lang-tabs">
-            <button class="lang-tab active" onclick="switchLang('generic-py',this)">Python</button>
-            <button class="lang-tab" onclick="switchLang('generic-js',this)">JavaScript</button>
-            <button class="lang-tab" onclick="switchLang('generic-curl',this)">cURL</button>
-          </div>
-          <div class="lang-code-panel active" id="lang-generic-py"><div class="integrate-code"><span class="kw">import</span> requests
-
-<span class="kw">for</span> agent <span class="kw">in</span> agents:
-    raw_action = agent.decide()
-
-    <span class="kw">try</span>:
-        verdict = requests.post(
-            <span class="str">"http://localhost:3456/api/evaluate"</span>,
-            json={<span class="str">"actor"</span>: agent.id,
-                  <span class="str">"action"</span>: raw_action,
-                  <span class="str">"world"</span>: <span class="str">"trading"</span>},
-            timeout=0.5
-        ).json()
-    <span class="kw">except</span>:
-        verdict = {<span class="str">"decision"</span>: <span class="str">"ALLOW"</span>}
-
-    <span class="kw">if</span> verdict[<span class="str">"decision"</span>] == <span class="str">"BLOCK"</span>:
-        <span class="kw">continue</span>  <span class="comment"># skip this action entirely</span>
-    <span class="kw">elif</span> verdict[<span class="str">"decision"</span>] == <span class="str">"MODIFY"</span>:
-        raw_action = verdict[<span class="str">"modified_action"</span>]
-
-    environment.apply(agent, raw_action)</div></div>
-          <div class="lang-code-panel" id="lang-generic-js"><div class="integrate-code"><span class="kw">for</span> (<span class="kw">const</span> agent <span class="kw">of</span> agents) {
-  <span class="kw">let</span> action = agent.decide()
-
-  <span class="kw">const</span> verdict = <span class="kw">await</span> fetch(
-    <span class="str">"http://localhost:3456/api/evaluate"</span>, {
-    method: <span class="str">"POST"</span>,
-    headers: {<span class="str">"Content-Type"</span>: <span class="str">"application/json"</span>},
-    body: JSON.stringify({
-      actor: agent.id, action, world: <span class="str">"trading"</span>
-    })
-  }).then(r => r.json())
-
-  <span class="kw">if</span> (verdict.decision === <span class="str">"BLOCK"</span>) <span class="kw">continue</span>
-  <span class="kw">if</span> (verdict.decision === <span class="str">"MODIFY"</span>)
-    action = verdict.modified_action
-
-  environment.apply(agent, action)
-}</div></div>
-          <div class="lang-code-panel" id="lang-generic-curl"><div class="integrate-code">curl -X POST http://localhost:3456/api/evaluate \
-  -H <span class="str">"Content-Type: application/json"</span> \
-  -d <span class="str">'{"actor":"agent_1","action":"panic_sell"}'</span>
-
-<span class="comment"># Returns: {"decision":"BLOCK","reason":"..."}</span>
-<span class="comment"># Watch it appear in the dashboard →</span></div></div>
-        </div>
-      </div>
-
-      <div class="fw-panel" id="fw-scienceclaw">
-        <div class="integrate-section">
-          <h4>Detect action type, then evaluate</h4>
-          <div style="font-size:10px;color:var(--yellow);margin-bottom:6px;line-height:1.4">
-            Don't hardcode <code style="background:var(--bg-surface);padding:1px 4px;border-radius:2px">action = "post"</code> — detect intent from agent output so rules can differentiate.
-          </div>
-          <div class="integrate-code"><span class="kw">from</span> neuroverse_bridge <span class="kw">import</span> evaluate, detect_action_type
-
-<span class="comment"># Step 1: Agent generates content</span>
-results = generator.run_pubmed_search(topic)
-output = generator.generate_content(topic, results)
-
-<span class="comment"># Step 2: Detect what kind of action this is</span>
-action = detect_action_type(output[<span class="str">"content"</span>])
-<span class="comment"># → "analyze", "publish", "cite", "recommend"</span>
-
-<span class="comment"># Step 3: Evaluate BEFORE executing</span>
-verdict = evaluate(
-    actor=<span class="str">"Harry"</span>,
-    action=action,
-    world=<span class="str">"research"</span>
-)
-
-<span class="comment"># Step 4: Only execute if allowed</span>
-<span class="kw">if</span> verdict[<span class="str">"decision"</span>] != <span class="str">"BLOCK"</span>:
-    generator.post_to_infinite(output)</div>
-          <div style="font-size:9px;color:var(--text-muted);margin-top:6px;line-height:1.5">
-            See <code style="background:var(--bg-surface);padding:1px 4px;border-radius:2px">bridge/scienceclaw_governed.py</code> for full example
-          </div>
-        </div>
-      </div>
-
-      <div class="fw-panel" id="fw-mirofish">
-        <div class="integrate-section">
-          <h4>Replace the dict comprehension</h4>
-          <div style="font-size:10px;color:var(--red);margin-bottom:6px;line-height:1.4">
-            MiroFish executes inside <code style="background:var(--bg-surface);padding:1px 4px;border-radius:2px">env.step()</code> — governance MUST happen before that call.
-          </div>
-          <div class="integrate-code" style="margin-bottom:6px;border-left:3px solid var(--red);opacity:0.6"><span class="comment"># ❌ BEFORE (opaque — no governance possible)</span>
-actions = {agent: LLMAction()
-           <span class="kw">for</span> _, agent <span class="kw">in</span> active_agents}
-<span class="kw">await</span> result.env.step(actions)</div>
-          <div class="integrate-code" style="border-left:3px solid var(--green)"><span class="comment"># ✅ AFTER (expand the loop, insert governance)</span>
-<span class="kw">import</span> requests
-
-actions = {}
-<span class="kw">for</span> _, agent <span class="kw">in</span> active_agents:
-    raw_action = LLMAction()
-
-    <span class="kw">try</span>:
-        verdict = requests.post(
-            <span class="str">"http://localhost:3456/api/evaluate"</span>,
-            json={
-                <span class="str">"actor"</span>: getattr(agent, <span class="str">"id"</span>, str(agent)),
-                <span class="str">"action"</span>: str(raw_action),
-                <span class="str">"world"</span>: <span class="str">"social_media"</span>
-            },
-            timeout=0.5
-        ).json()
-    <span class="kw">except</span>:
-        verdict = {<span class="str">"decision"</span>: <span class="str">"ALLOW"</span>}
-
-    <span class="kw">if</span> verdict[<span class="str">"decision"</span>] == <span class="str">"BLOCK"</span>:
-        <span class="kw">continue</span>
-    <span class="kw">elif</span> verdict[<span class="str">"decision"</span>] == <span class="str">"MODIFY"</span>:
-        raw_action = verdict.get(<span class="str">"modified_action"</span>, raw_action)
-
-    actions[agent] = raw_action
-
-<span class="kw">await</span> result.env.step(actions)</div>
-          <div style="font-size:9px;color:var(--text-muted);margin-top:6px;line-height:1.5">
-            Apply to all 3 scripts: <code style="background:var(--bg-surface);padding:1px 4px;border-radius:2px">run_twitter_simulation.py</code>
-            <code style="background:var(--bg-surface);padding:1px 4px;border-radius:2px">run_reddit_simulation.py</code>
-            <code style="background:var(--bg-surface);padding:1px 4px;border-radius:2px">run_parallel_simulation.py</code>
-          </div>
-        </div>
-      </div>
-
-      <div class="fw-panel" id="fw-langchain">
-        <div class="integrate-section">
-          <h4>Wrap your tool or agent executor</h4>
-          <div class="integrate-code"><span class="kw">import</span> requests
-<span class="kw">from</span> langchain.tools <span class="kw">import</span> tool
-
-<span class="kw">def</span> governed(fn, world=<span class="str">"trading"</span>):
-    <span class="kw">def</span> wrapper(*args, **kwargs):
-        action = fn.__name__
-        <span class="kw">try</span>:
-            v = requests.post(
-                <span class="str">"http://localhost:3456/api/evaluate"</span>,
-                json={<span class="str">"actor"</span>: <span class="str">"langchain"</span>,
-                      <span class="str">"action"</span>: action,
-                      <span class="str">"world"</span>: world},
-                timeout=0.5
-            ).json()
-        <span class="kw">except</span>:
-            v = {<span class="str">"decision"</span>: <span class="str">"ALLOW"</span>}
-        <span class="kw">if</span> v[<span class="str">"decision"</span>] == <span class="str">"BLOCK"</span>:
-            <span class="kw">return</span> f<span class="str">"Blocked: {v['reason']}"</span>
-        <span class="kw">return</span> fn(*args, **kwargs)
-    <span class="kw">return</span> wrapper
-
-<span class="comment"># Usage: wrap any tool</span>
-@tool
-@governed
-<span class="kw">def</span> execute_trade(ticker, amount):
-    ...</div>
-        </div>
-      </div>
-
-      <div style="margin-top:8px">
-        <div class="integrate-hint">
-          <span style="display:inline-block;padding:2px 6px;background:#2d0606;color:#f87171;border-radius:3px;margin-right:3px">BLOCK</span> stopped
-          <span style="display:inline-block;padding:2px 6px;background:#2d2006;color:#fbbf24;border-radius:3px;margin-right:3px;margin-left:4px">MODIFY</span> adjusted
-          <span style="display:inline-block;padding:2px 6px;background:#052e16;color:#4ade80;border-radius:3px;margin-left:4px">ALLOW</span> proceeds
-        </div>
-        <div style="font-size:10px;color:var(--text-faint);margin-top:8px;border-top:1px solid var(--border);padding-top:6px">
-          The world file controls everything. Same rules govern simulated and live systems.
-        </div>
-      </div>
+    <!-- Post-Run Governance Suggestions -->
+    <div class="ctrl-section" id="governance-suggestions-section" style="display:none;margin-top:16px">
+      <h3>Governance Suggestions</h3>
+      <div id="governance-suggestions" class="governance-suggestions"></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-grid" style="grid-template-columns:1fr 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 class="metric-box"><div class="value" id="s-rewarded" style="color:#4ade80">0</div><div class="label">Rewarded</div></div>
+          <div class="metric-box"><div class="value" id="s-penalized" style="color:#fb923c">0</div><div class="label">Penalized</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">
@@ -2466,52 +2950,58 @@ actions = {}
     </div>
   </div>
 
-  <!-- RIGHT: VIEWER -->
+  <!-- RIGHT: OBSERVATION DECK -->
   <div class="viewer">
+    <div class="deck-header">
+      <h2 class="deck-title">Observation Deck</h2>
+      <div class="deck-status" id="deck-status">Waiting for agents</div>
+    </div>
 
-    <!-- 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>
+    <!-- LIVE: Agent Choices — bubble visualization -->
+    <div class="deck-section" id="deck-choices-section">
+      <div class="deck-label">Agent Choices</div>
+      <div class="choice-landscape" id="choice-landscape">
+        <div class="choice-empty" id="choice-empty">
+          <div class="choice-empty-icon">&#x25CC;</div>
+          <div>Agents will appear here when the simulation runs.</div>
+          <div style="margin-top:4px;color:var(--text-faint)">Each bubble = a type of decision. Size = how many agents chose it.</div>
         </div>
       </div>
-      <div class="outcome-context" id="outcome-context"></div>
+      <div class="choice-round-label" id="choice-round-label" style="display:none">Round <span id="choice-round-num">1</span></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>
+    <!-- LIVE: Choice Stream — latest agent decisions -->
+    <div class="deck-section" id="deck-stream-section">
+      <div class="deck-label">
+        <span>Live Decisions</span>
+        <span class="stream-count" id="stream-count"></span>
       </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 class="choice-stream" id="choice-stream">
+        <div class="stream-empty">Agent decisions will stream here in real time</div>
       </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>
+    <!-- AFTER: Behavioral Drift — first vs last round -->
+    <div class="deck-section" id="deck-drift-section" style="display:none">
+      <div class="deck-label">Behavioral Drift</div>
+      <div class="drift-verdict" id="drift-verdict"></div>
+      <div class="drift-comparison" id="drift-comparison"></div>
+    </div>
+
+    <!-- AFTER: Incentive Tracker (Reward/Penalize) — shown when governance engine supports it -->
+    <div class="deck-section" id="deck-incentive-section" style="display:none">
+      <div class="deck-label">Incentive Tracker</div>
+      <div class="incentive-summary" id="incentive-summary"></div>
+      <div class="incentive-agents" id="incentive-agents"></div>
     </div>
 
-    <!-- LAYER 4: EXPORT -->
+    <!-- AFTER: What-If counterfactual -->
+    <div class="deck-section" id="deck-whatif-section" style="display:none">
+      <div class="deck-label">What If There Were No Rules?</div>
+      <div class="whatif-content" id="whatif-content"></div>
+    </div>
+
+    <!-- EXPORT -->
     <div class="export-bar">
       <button class="export-btn" onclick="exportPDF()">Download PDF</button>
       <button class="export-btn" onclick="exportCSV()">Export CSV</button>
@@ -2555,27 +3045,65 @@ actions = {}
   </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');
-}
+<!-- ONBOARDING OVERLAY (first visit) -->
+<div class="onboard-overlay" id="onboard-overlay" style="display:none">
+  <div class="onboard-card">
+    <div class="onboard-header">
+      <h2>NeuroVerse Governance Runtime</h2>
+      <div class="onboard-tagline">
+        Define what your AI agents <em>cannot</em> do. Watch what happens when they try.
+      </div>
+    </div>
+    <div class="onboard-body">
 
-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');
-}
+      <div class="onboard-step">
+        <div class="onboard-step-num">1</div>
+        <div class="onboard-step-content">
+          <h4>Say what you want to control</h4>
+          <p>Type plain English. No config files, no YAML, no code.</p>
+        </div>
+      </div>
+
+      <div class="onboard-example">
+        <div class="onboard-example-label">Example</div>
+        <div class="onboard-example-text">"No agent may sell more than 10% of its portfolio in a single round. Block any agent that attempts to front-run another's trade."</div>
+        <div class="onboard-example-result">
+          <strong>&#x2192;</strong> Generates 2 governance rules: a <span style="color:#f87171">GATE</span> on portfolio concentration and a <span style="color:#f87171">BLOCK</span> on front-running patterns. These rules gate agent invocations at entry points before they execute.
+        </div>
+      </div>
+
+      <div class="onboard-step">
+        <div class="onboard-step-num">2</div>
+        <div class="onboard-step-content">
+          <h4>Connect your simulator</h4>
+          <p>Plug in ScienceClaw (research governance) or any simulator. Governance works with any system that sends actions to the <code style="background:var(--bg-surface);padding:1px 4px;border-radius:2px;font-size:10px">/api/evaluate</code> endpoint.</p>
+        </div>
+      </div>
+
+      <div class="onboard-step">
+        <div class="onboard-step-num">3</div>
+        <div class="onboard-step-content">
+          <h4>Run and see what emerges</h4>
+          <p>Agents act. Rules intervene. The right panel shows you <strong>what happened</strong>, <strong>what agents did</strong>, and <strong>why</strong> &mdash; not charts.</p>
+        </div>
+      </div>
 
+      <div class="onboard-section">
+        <h4>What you get</h4>
+        <div class="onboard-capability"><span class="cap-icon">&#x25CF;</span> <span><strong>Behavioral reports</strong> &mdash; "7 agents attempted panic sells, all blocked. Stability improved 34 points." Plain language, not dashboards.</span></div>
+        <div class="onboard-capability"><span class="cap-icon">&#x25CF;</span> <span><strong>Full audit trail</strong> &mdash; Every action, every verdict, every rule that fired. Exportable as CSV or PDF.</span></div>
+        <div class="onboard-capability"><span class="cap-icon">&#x25CF;</span> <span><strong>Shape emergence</strong> &mdash; Change one rule, re-run, see how 1000 agents behave differently. Your rules define the boundaries where complex behavior can safely happen.</span></div>
+        <div class="onboard-capability"><span class="cap-icon">&#x25CF;</span> <span><strong>Save &amp; compare</strong> &mdash; Save rule configurations, reload them, compare results across runs.</span></div>
+      </div>
+    </div>
+    <div class="onboard-footer">
+      <button class="btn-onboard-start" id="onboard-start-btn">Start</button>
+      <span class="onboard-dismiss" id="onboard-dismiss">Don't show again</span>
+    </div>
+  </div>
+</div>
+
+<script>
 // ============================================
 // OUTCOME INTELLIGENCE LAYER
 // ============================================
@@ -2659,6 +3187,12 @@ function translateBehaviorNarrative(reaction, verdict) {
   if (status === 'BLOCK') {
     return 'abandoned ' + action + ' and switched to a safer strategy';
   }
+  if (status === 'PENALIZE') {
+    return 'was penalized for ' + action + ' and frozen for cooldown';
+  }
+  if (status === 'REWARD') {
+    return 'was rewarded for ' + action + ' — behavior reinforced';
+  }
   if (status === 'MODIFY' || status === 'PAUSE') {
     return 'scaled back ' + action + ' after early resistance';
   }
@@ -2692,7 +3226,9 @@ function generateBehaviorShifts(shiftData, bLog) {
   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;
+    var penalized = bLog.filter(function(e) { return e.status === 'PENALIZE'; }).length;
+    var rewarded = bLog.filter(function(e) { return e.status === 'REWARD'; }).length;
+    var proceeded = bLog.length - blocked - modified - penalized;
 
     if (blocked > 0) {
       var bPct = Math.round((blocked / bLog.length) * 100);
@@ -2702,7 +3238,15 @@ function generateBehaviorShifts(shiftData, bLog) {
       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)) {
+    if (penalized > 0) {
+      var penPct = Math.round((penalized / bLog.length) * 100);
+      sentences.push(penPct + '% of agents (' + penalized + ') were penalized and frozen for cooldown periods');
+    }
+    if (rewarded > 0) {
+      var rewPct = Math.round((rewarded / bLog.length) * 100);
+      sentences.push(rewPct + '% of agents (' + rewarded + ') were rewarded for desirable behavior');
+    }
+    if (proceeded > 0 && (blocked > 0 || modified > 0 || penalized > 0)) {
       var pPct = Math.round((proceeded / bLog.length) * 100);
       sentences.push(pPct + '% of agents (' + proceeded + ') maintained their original strategy throughout');
     }
@@ -2786,22 +3330,19 @@ let behaviorLog = []; // { agent, action, status, reason, ts }
 let latestStability = 0;
 let latestVolatility = 0;
 
+// Bridge state
+let connectedBridge = null; // { id, label, capabilities, endpoint }
+let currentThesis = ''; // What the user is trying to control
+let currentRules = []; // Generated governance rules
+let bridgeCapabilities = {}; // { scienceclaw: {...} }
+
 const statusEl = document.getElementById('status');
-const worldSelect = document.getElementById('world-select');
 const stateVarsSection = document.getElementById('state-vars-section');
 const stateVarsEl = document.getElementById('state-vars');
-const scenarioListEl = document.getElementById('scenario-list');
-const eventSelect = document.getElementById('event-select');
-const eventRoundInput = document.getElementById('event-round');
-const injectListEl = document.getElementById('inject-list');
-const roundsSlider = document.getElementById('rounds-slider');
-const roundsVal = document.getElementById('rounds-val');
 const runBtn = document.getElementById('run-btn');
 const agentsEl = document.getElementById('agents');
 const logEl = document.getElementById('log');
 const activeInvEl = document.getElementById('active-invariants');
-const engineSelect = document.getElementById('engine-select');
-const engineStatusEl = document.getElementById('engine-status');
 const traceSourceEl = document.getElementById('trace-source');
 const outcomeStatementEl = document.getElementById('outcome-statement');
 const confidenceGridEl = document.getElementById('confidence-grid');
@@ -2861,79 +3402,50 @@ function exportCSV() {
 }
 
 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 = 'OBSERVATION DECK SUMMARY\\n\\n';
 
-  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';
+  // Drift verdict
+  var driftVerdict = document.getElementById('drift-verdict');
+  if (driftVerdict && driftVerdict.textContent) {
+    text += 'BEHAVIORAL DRIFT: ' + driftVerdict.textContent + '\\n\\n';
+  }
 
-  navigator.clipboard.writeText(text).then(function() {
-    alert('Summary copied to clipboard');
+  // What-if
+  var whatifContent = document.getElementById('whatif-content');
+  if (whatifContent && whatifContent.textContent) {
+    text += 'COUNTERFACTUAL: ' + whatifContent.textContent + '\\n\\n';
+  }
+
+  // Basic stats
+  text += 'Total agent actions: ' + totalActions + '\\n';
+  text += 'Interventions: ' + totalInterventions + '\\n';
+  text += '\\nGenerated by NeuroVerse Governance Runtime';
+
+  navigator.clipboard.writeText(text).then(function() {
+    alert('Summary copied to clipboard');
   });
 }
 
 // ============================================
-// INIT — Load worlds, scenarios, narratives, adapters
+// INIT — Load bridge capabilities and saved rules
 // ============================================
 async function init() {
-  const [wRes, sRes, nRes, aRes] = await Promise.all([
-    fetch('/api/worlds').then(r => r.json()),
-    fetch('/api/scenarios').then(r => r.json()),
-    fetch('/api/narratives').then(r => r.json()),
-    fetch('/api/adapters').then(r => r.json()).catch(() => ({ adapters: [] })),
+  // Load bridge capabilities and worlds (for file uploads that reference presets)
+  const [bcRes, wRes] = await Promise.all([
+    fetch('/api/bridge-capabilities').then(r => r.json()).catch(() => ({ bridges: [] })),
+    fetch('/api/worlds').then(r => r.json()).catch(() => ({ worlds: [] })),
   ]);
 
   worlds = wRes.worlds;
-  scenarios = sRes.scenarios;
-  narratives = nRes.narratives;
-
-  // Populate engine selector with live adapters
-  (aRes.adapters || []).forEach(function(a) {
-    const opt = document.createElement('option');
-    opt.value = a.id;
-    opt.textContent = a.label;
-    engineSelect.appendChild(opt);
-  });
 
-  // Populate world select
-  worlds.forEach(w => {
-    const opt = document.createElement('option');
-    opt.value = w.id;
-    opt.textContent = w.title;
-    worldSelect.appendChild(opt);
+  // Index bridge capabilities
+  (bcRes.bridges || []).forEach(function(b) {
+    bridgeCapabilities[b.id] = b;
   });
 
-  // Populate event select
-  Object.entries(narratives).forEach(([id, ev]) => {
-    const opt = document.createElement('option');
-    opt.value = id;
-    opt.textContent = ev.headline.slice(0, 40);
-    eventSelect.appendChild(opt);
-  });
-
-  // Populate scenario presets
-  Object.entries(scenarios).forEach(([id, s]) => {
-    const btn = document.createElement('button');
-    btn.className = 'scenario-btn';
-    btn.innerHTML = '<div class="stitle">' + s.title + '</div><div class="sdesc">' + s.description + '</div>';
-    btn.onclick = () => loadScenario(id, s);
-    scenarioListEl.appendChild(btn);
-  });
-
-  // Select first world
-  if (worlds.length > 0) selectWorld(worlds[0].id);
-
-  // Load saved variants
+  // Load saved rules
   await loadVariants();
 
-  // Populate base world selector for custom rules mode
-  populateBaseWorldSelect();
-
   // Connect SSE
   connectSSE();
 }
@@ -2942,110 +3454,384 @@ function selectWorld(worldId) {
   currentWorld = worlds.find(w => w.id === worldId);
   if (!currentWorld) return;
 
-  worldSelect.value = worldId;
-  document.getElementById('world-thesis').textContent = '"' + currentWorld.thesis + '"';
+  // Render state variable controls if world has them
+  renderStateVars();
+}
 
-  // Render state variable controls
-  if (currentWorld.stateVariables && currentWorld.stateVariables.length > 0) {
-    stateVarsSection.style.display = '';
-    stateVarsEl.innerHTML = '';
-    currentWorld.stateVariables.forEach(sv => {
-      const row = document.createElement('div');
-      row.className = 'ctrl-row';
-
-      if (sv.type === 'number' && sv.range) {
-        const step = sv.range.max <= 1 ? 0.01 : (sv.range.max <= 10 ? 0.1 : 1);
-        row.innerHTML =
-          '<div class="ctrl-label"><span>' + sv.label + '</span><span class="val" id="sv-val-' + sv.id + '">' + sv.default_value + '</span></div>' +
-          '<input type="range" id="sv-' + sv.id + '" min="' + sv.range.min + '" max="' + sv.range.max + '" step="' + step + '" value="' + sv.default_value + '" data-sv="' + sv.id + '">';
-        stateVarsEl.appendChild(row);
-        const slider = row.querySelector('input');
-        slider.addEventListener('input', () => {
-          document.getElementById('sv-val-' + sv.id).textContent = slider.value;
-        });
-      } else if (sv.type === 'enum' && sv.enum_values) {
-        row.innerHTML =
-          '<div class="ctrl-label"><span>' + sv.label + '</span></div>' +
-          '<select id="sv-' + sv.id + '" data-sv="' + sv.id + '">' +
-          sv.enum_values.map(v => '<option value="' + v + '"' + (v === sv.default_value ? ' selected' : '') + '>' + v + '</option>').join('') +
-          '</select>';
-        stateVarsEl.appendChild(row);
-      } else if (sv.type === 'boolean') {
-        row.innerHTML =
-          '<div class="toggle-row">' +
-          '<div class="toggle' + (sv.default_value ? ' on' : '') + '" id="sv-' + sv.id + '" data-sv="' + sv.id + '"></div>' +
-          '<span class="toggle-label">' + sv.label + '</span>' +
-          '</div>';
-        stateVarsEl.appendChild(row);
-        const toggle = row.querySelector('.toggle');
-        toggle.addEventListener('click', () => {
-          toggle.classList.toggle('on');
-        });
-      }
-    });
-  } else {
+function renderStateVars() {
+  if (!currentWorld || !currentWorld.stateVariables || currentWorld.stateVariables.length === 0) {
     stateVarsSection.style.display = 'none';
+    return;
   }
-
-  // Show invariants
-  activeInvEl.innerHTML = currentWorld.invariants.map(inv =>
-    '<div class="inv-item">[' + inv.id + '] ' + inv.description + '</div>'
-  ).join('') + (currentWorld.gates || []).map(g =>
-    '<div class="inv-item" style="color:' + (g.severity === 'critical' ? '#f87171' : '#fbbf24') + '">[' + g.id + '] ' + g.label + '</div>'
-  ).join('');
+  stateVarsSection.style.display = '';
+  stateVarsEl.innerHTML = '';
+  stateVarsEl.style.display = 'none'; // collapsed by default
+
+  currentWorld.stateVariables.forEach(sv => {
+    const row = document.createElement('div');
+    row.className = 'ctrl-row';
+
+    if (sv.type === 'number' && sv.range) {
+      const step = sv.range.max <= 1 ? 0.01 : (sv.range.max <= 10 ? 0.1 : 1);
+      row.innerHTML =
+        '<div class="ctrl-label"><span>' + sv.label + '</span><span class="val" id="sv-val-' + sv.id + '">' + sv.default_value + '</span></div>' +
+        '<input type="range" id="sv-' + sv.id + '" min="' + sv.range.min + '" max="' + sv.range.max + '" step="' + step + '" value="' + sv.default_value + '" data-sv="' + sv.id + '">';
+      stateVarsEl.appendChild(row);
+      const slider = row.querySelector('input');
+      slider.addEventListener('input', () => {
+        document.getElementById('sv-val-' + sv.id).textContent = slider.value;
+      });
+    } else if (sv.type === 'enum' && sv.enum_values) {
+      row.innerHTML =
+        '<div class="ctrl-label"><span>' + sv.label + '</span></div>' +
+        '<select id="sv-' + sv.id + '" data-sv="' + sv.id + '">' +
+        sv.enum_values.map(v => '<option value="' + v + '"' + (v === sv.default_value ? ' selected' : '') + '>' + v + '</option>').join('') +
+        '</select>';
+      stateVarsEl.appendChild(row);
+    } else if (sv.type === 'boolean') {
+      row.innerHTML =
+        '<div class="toggle-row">' +
+        '<div class="toggle' + (sv.default_value ? ' on' : '') + '" id="sv-' + sv.id + '" data-sv="' + sv.id + '"></div>' +
+        '<span class="toggle-label">' + sv.label + '</span>' +
+        '</div>';
+      stateVarsEl.appendChild(row);
+      const toggle = row.querySelector('.toggle');
+      toggle.addEventListener('click', () => {
+        toggle.classList.toggle('on');
+      });
+    }
+  });
 }
 
-function loadScenario(id, scenario) {
-  // Set world
-  selectWorld(scenario.world);
-  // Set events
-  injectedEvents = scenario.events.slice();
-  renderInjectedEvents();
-  // Set rounds
-  const r = scenario.rounds || 5;
-  roundsSlider.value = Math.min(r, 12);
-  roundsVal.textContent = Math.min(r, 12);
-}
+// State vars toggle (collapsed by default)
+document.getElementById('state-vars-toggle').addEventListener('click', () => {
+  const el = stateVarsEl;
+  const arrow = document.getElementById('sv-arrow');
+  if (el.style.display === 'none') {
+    el.style.display = '';
+    arrow.innerHTML = '&#x25BC;';
+  } else {
+    el.style.display = 'none';
+    arrow.innerHTML = '&#x25B6;';
+  }
+});
 
 // ============================================
-// NARRATIVE EVENT INJECTION
+// THESIS INPUT — Generate Governance Rules
 // ============================================
-document.getElementById('add-event-btn').addEventListener('click', () => {
-  const eventId = eventSelect.value;
-  const round = parseInt(eventRoundInput.value);
-  if (!eventId || isNaN(round)) return;
-  injectedEvents.push(eventId + '@' + round);
-  renderInjectedEvents();
-});
+const thesisInput = document.getElementById('thesis-input');
+const generateRulesBtn = document.getElementById('generate-rules-btn');
+const ruleGenStatusEl = document.getElementById('rule-generation-status');
+const generatedRulesPreviewEl = document.getElementById('generated-rules-preview');
+
+generateRulesBtn.addEventListener('click', async () => {
+  const thesis = thesisInput.value.trim();
+  if (!thesis) return;
 
-function renderInjectedEvents() {
-  injectListEl.innerHTML = injectedEvents.map((ev, i) =>
-    '<div class="inject-item"><span>' + ev + '</span><span class="remove" data-idx="' + i + '">x</span></div>'
-  ).join('');
-  injectListEl.querySelectorAll('.remove').forEach(el => {
-    el.addEventListener('click', () => {
-      injectedEvents.splice(parseInt(el.dataset.idx), 1);
-      renderInjectedEvents();
+  currentThesis = thesis;
+  generateRulesBtn.disabled = true;
+  generateRulesBtn.textContent = 'Generating...';
+  ruleGenStatusEl.textContent = '';
+
+  try {
+    const resp = await fetch('/api/generate-rules', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ thesis }),
     });
-  });
-}
+    const data = await resp.json();
+
+    if (data.error) {
+      ruleGenStatusEl.textContent = data.error;
+      ruleGenStatusEl.className = 'rule-status error';
+    } else {
+      currentRules = data.parsed.rules || [];
+      ruleGenStatusEl.textContent = data.parsed.total + ' governance rule' + (data.parsed.total !== 1 ? 's' : '') + ' generated. Ready to run.';
+      ruleGenStatusEl.className = 'rule-status success';
+
+      // Show preview of generated rules
+      var iconMap = { block: '&#x1F534;', allow: '&#x1F7E2;', modify: '&#x1F535;', warn: '&#x1F7E1;', pause: '&#x1F7E1;' };
+      generatedRulesPreviewEl.innerHTML = currentRules.map(function(r) {
+        var icon = iconMap[r.enforcement] || '&#x1F7E2;';
+        return '<div class="parsed-rule enforcement-' + r.enforcement + '">' +
+          '<div class="pr-header"><span class="pr-icon">' + icon + '</span><span class="pr-action">' + (r.enforcement || 'rule') + '</span></div>' +
+          '<div class="pr-desc">' + r.description + '</div>' +
+          '</div>';
+      }).join('');
+
+      // Update active invariants display (hidden, for audit)
+      activeInvEl.innerHTML = currentRules.map(function(r) {
+        return '<div class="inv-item">[' + r.id + '] ' + r.description + '</div>';
+      }).join('');
+
+      // If the generated world has state variables, show them
+      if (data.world && data.world.stateVariables && data.world.stateVariables.length > 0) {
+        currentWorld = {
+          id: data.world.id || 'generated',
+          title: data.world.title || 'Generated World',
+          thesis: thesis,
+          stateVariables: data.world.stateVariables,
+          invariants: data.world.invariants || [],
+          gates: data.world.gates || [],
+        };
+        renderStateVars();
+      }
+    }
+  } catch (err) {
+    ruleGenStatusEl.textContent = 'Error: ' + err.message;
+    ruleGenStatusEl.className = 'rule-status error';
+  }
+
+  generateRulesBtn.disabled = false;
+  generateRulesBtn.textContent = 'Generate Governance Rules';
+});
+
+// ============================================
+// WORLD FILE TOGGLE
+// ============================================
+document.getElementById('worldfile-toggle').addEventListener('click', () => {
+  const panel = document.getElementById('worldfile-panel');
+  const arrow = document.querySelector('#worldfile-toggle .wf-arrow');
+  if (panel.style.display === 'none') {
+    panel.style.display = '';
+    arrow.innerHTML = '&#x25BC;';
+  } else {
+    panel.style.display = 'none';
+    arrow.innerHTML = '&#x25B6;';
+  }
+});
 
 // ============================================
-// WORLD SELECT
+// BRIDGE CONNECTION
 // ============================================
-worldSelect.addEventListener('change', () => selectWorld(worldSelect.value));
-roundsSlider.addEventListener('input', () => { roundsVal.textContent = roundsSlider.value; });
+const bridgeButtons = document.querySelectorAll('.bridge-btn');
+const bridgeStatusEl = document.getElementById('bridge-status');
+const bridgeSetupEl = document.getElementById('bridge-setup');
+const bridgeSetupContentEl = document.getElementById('bridge-setup-content');
+const bridgeEndpointInput = document.getElementById('bridge-endpoint');
+const bridgeConnectBtn = document.getElementById('bridge-connect-btn');
+const bridgeControlsSection = document.getElementById('bridge-controls-section');
+const bridgeControlsEl = document.getElementById('bridge-controls');
+
+// Track detected bridge binary info
+let detectedBridgeInfo = null; // { binaryPath, version, canLaunch }
+
+bridgeButtons.forEach(btn => {
+  btn.addEventListener('click', async () => {
+    const bridgeId = btn.dataset.bridge;
+    const caps = bridgeCapabilities[bridgeId];
+
+    // Highlight selected bridge
+    bridgeButtons.forEach(b => b.classList.remove('active'));
+    btn.classList.add('active');
+
+    if (bridgeId === 'scienceclaw') {
+      // Auto-detect ScienceClaw — no manual setup needed
+      bridgeSetupEl.style.display = '';
+      bridgeEndpointInput.style.display = 'none';
+      bridgeStatusEl.innerHTML = '<span style="color:var(--dim)">Detecting ScienceClaw...</span>';
+      bridgeSetupContentEl.innerHTML = '';
+      bridgeConnectBtn.disabled = true;
+
+      try {
+        const resp = await fetch('/api/bridge-check', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ bridgeId: 'scienceclaw', endpoint: '' }),
+        });
+        const data = await resp.json();
+        detectedBridgeInfo = data;
+
+        if (data.detected && data.canLaunch) {
+          // ScienceClaw found on PATH — show launch UI
+          bridgeStatusEl.innerHTML = '<span style="color:var(--green)">ScienceClaw detected</span>';
+          bridgeSetupContentEl.innerHTML =
+            '<div class="bridge-instructions">' +
+            '<div style="color:var(--green);margin-bottom:8px">Binary: ' + data.binaryPath + '</div>' +
+            (data.version ? '<div style="color:var(--dim);margin-bottom:12px">Version: ' + data.version + '</div>' : '') +
+            '<div style="margin-bottom:8px">Governance server ready. Click <strong>Launch</strong> to run a governed ScienceClaw session.</div>' +
+            '<div class="bridge-launch-row" style="margin-top:12px">' +
+            '<input type="text" id="bridge-sc-args" class="bridge-endpoint-input" placeholder="--agent MyAgent --topic &quot;CRISPR risks&quot;" style="display:block">' +
+            '</div>' +
+            '</div>';
+          bridgeConnectBtn.textContent = 'Launch Governed Session';
+          bridgeConnectBtn.disabled = false;
+        } else {
+          // ScienceClaw not auto-detected — show manual connection options
+          bridgeStatusEl.innerHTML = '<span style="color:var(--accent)">ScienceClaw not detected on PATH</span>';
+          bridgeSetupContentEl.innerHTML =
+            '<div class="bridge-instructions">' +
+            '<div style="margin-bottom:8px">ScienceClaw runs independently — NeuroVerse connects and governs it live.</div>' +
+            '<div style="margin-bottom:4px"><strong>Option 1:</strong> Install ScienceClaw on your PATH, then re-click to auto-detect and launch directly from here.</div>' +
+            '<div style="margin-bottom:4px"><strong>Option 2:</strong> Run the governance wrapper in a separate terminal:</div>' +
+            '<div style="font-family:monospace;background:rgba(255,255,255,0.05);padding:8px;border-radius:4px;margin:8px 0">' +
+            'python connectors/nv_scienceclaw_wrapper.py --agent MyAgent --topic "..."' +
+            '</div>' +
+            '<div style="color:var(--dim);margin-bottom:8px;font-size:0.85em">The wrapper launches ScienceClaw and streams each artifact cycle through governance in real time.</div>' +
+            '<div style="margin-bottom:4px"><strong>Option 3:</strong> Point any running ScienceClaw instance at the governance endpoint:</div>' +
+            '<div style="font-family:monospace;background:rgba(255,255,255,0.05);padding:8px;border-radius:4px;margin:8px 0">' +
+            'POST /api/evaluate { actor, action, payload }' +
+            '</div>' +
+            '<div style="color:var(--dim);font-size:0.85em">Once ScienceClaw is running, click Connect to begin governed evaluation.</div>' +
+            '</div>';
+          bridgeConnectBtn.textContent = 'Connect';
+          bridgeConnectBtn.disabled = false;
+        }
+      } catch (err) {
+        bridgeStatusEl.innerHTML = '<span style="color:var(--red)">Detection failed: ' + err.message + '</span>';
+        bridgeConnectBtn.disabled = false;
+      }
+    } else if (caps) {
+      // Other bridges — show standard setup
+      bridgeSetupEl.style.display = '';
+      bridgeSetupContentEl.innerHTML = '<div class="bridge-instructions">' +
+        caps.setupInstructions.replace(/\\n/g, '<br>') +
+        '</div>';
+      bridgeEndpointInput.value = 'http://localhost:5001';
+      bridgeEndpointInput.style.display = '';
+      bridgeConnectBtn.textContent = 'Connect';
+      bridgeConnectBtn.disabled = false;
+      bridgeStatusEl.innerHTML = '';
+    }
+  });
+});
+
+bridgeConnectBtn.addEventListener('click', async () => {
+  const activeBridge = document.querySelector('.bridge-btn.active');
+  if (!activeBridge) return;
+  const bridgeId = activeBridge.dataset.bridge;
+  const endpoint = bridgeEndpointInput.value.trim();
+
+  bridgeConnectBtn.disabled = true;
+
+  if (bridgeId === 'scienceclaw' && detectedBridgeInfo && detectedBridgeInfo.canLaunch) {
+    // ── LAUNCH governed ScienceClaw session ──
+    bridgeConnectBtn.textContent = 'Launching...';
+    bridgeStatusEl.innerHTML = '<span style="color:var(--dim)">Starting ScienceClaw with governance...</span>';
+
+    const scArgsInput = document.getElementById('bridge-sc-args');
+    const scArgs = scArgsInput ? scArgsInput.value.trim().split(/\\s+/).filter(Boolean) : [];
+
+    try {
+      const resp = await fetch('/api/bridge-launch', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          bridgeId: 'scienceclaw',
+          args: scArgs.length > 0 ? scArgs : undefined,
+          binaryPath: detectedBridgeInfo.binaryPath,
+        }),
+      });
+      const data = await resp.json();
+
+      if (data.launched) {
+        connectedBridge = {
+          id: bridgeId,
+          label: 'ScienceClaw',
+          capabilities: bridgeCapabilities[bridgeId],
+          endpoint: 'local (PID ' + data.pid + ')',
+        };
+        bridgeStatusEl.innerHTML =
+          '<span style="color:var(--green)">ScienceClaw running (PID ' + data.pid + ')</span>' +
+          '<br><span style="color:var(--dim);font-size:11px">Governance: ' + data.launchMethod + ' | Output streaming to dashboard</span>';
+        bridgeSetupEl.style.display = 'none';
+
+        // Change connect button to stop button
+        bridgeConnectBtn.textContent = 'Stop';
+        bridgeConnectBtn.disabled = false;
+        bridgeConnectBtn.onclick = async () => {
+          await fetch('/api/bridge-stop', { method: 'POST' });
+          bridgeStatusEl.innerHTML = '<span style="color:var(--dim)">ScienceClaw stopped</span>';
+          bridgeConnectBtn.textContent = 'Launch Governed Session';
+          bridgeConnectBtn.onclick = null; // reset to default handler
+        };
+
+        showBridgeControls(bridgeId);
+      } else {
+        bridgeStatusEl.innerHTML = '<span style="color:var(--red)">Launch failed' + (data.error ? ': ' + data.error : '') + '</span>';
+      }
+    } catch (err) {
+      bridgeStatusEl.innerHTML = '<span style="color:var(--red)">Launch error: ' + err.message + '</span>';
+    }
+
+    bridgeConnectBtn.disabled = false;
+    if (bridgeConnectBtn.textContent === 'Launching...') bridgeConnectBtn.textContent = 'Launch Governed Session';
+    return;
+  }
+
+  // ── Standard connect flow (ScienceClaw without auto-detect, or other bridges) ──
+  bridgeConnectBtn.textContent = 'Connecting...';
+  bridgeStatusEl.innerHTML = '';
+
+  try {
+    const resp = await fetch('/api/bridge-check', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ bridgeId, endpoint }),
+    });
+    const data = await resp.json();
+
+    if (data.connected) {
+      connectedBridge = {
+        id: bridgeId,
+        label: bridgeCapabilities[bridgeId]?.label || bridgeId,
+        capabilities: bridgeCapabilities[bridgeId],
+        endpoint: endpoint || 'local',
+      };
+      bridgeStatusEl.innerHTML = '<span style="color:var(--green)">Connected to ' + connectedBridge.label + '</span>';
+      bridgeSetupEl.style.display = 'none';
+
+      showBridgeControls(bridgeId);
+    } else {
+      bridgeStatusEl.innerHTML = '<span style="color:var(--red)">Connection failed' + (data.error ? ': ' + data.error : '') + '</span>';
+    }
+  } catch (err) {
+    bridgeStatusEl.innerHTML = '<span style="color:var(--red)">Error: ' + err.message + '</span>';
+  }
+
+  bridgeConnectBtn.disabled = false;
+  bridgeConnectBtn.textContent = 'Connect';
+});
+
+function showBridgeControls(bridgeId) {
+  const caps = bridgeCapabilities[bridgeId];
+  if (!caps) return;
+
+  bridgeControlsSection.style.display = '';
+  document.getElementById('bridge-controls-label').textContent = caps.label + ' Settings';
+
+  var html = '';
+  if (caps.governanceTiming === 'live') {
+    html += '<div class="bridge-info-row"><span class="bridge-info-icon" style="color:var(--green)">&#x25CF;</span> Live governance — interventions happen during simulation</div>';
+  } else {
+    html += '<div class="bridge-info-row"><span class="bridge-info-icon" style="color:var(--accent)">&#x25CF;</span> Post-hoc governance — evaluation after each batch</div>';
+  }
+  if (caps.canHalt) {
+    html += '<div class="bridge-info-row"><span class="bridge-info-icon">&#x23F9;</span> Can halt simulation if safety thresholds are exceeded</div>';
+  }
+  if (bridgeId === 'scienceclaw') {
+    html += '<div class="bridge-info-row"><span class="bridge-info-icon" style="color:var(--green)">&#x25CF;</span> REWARD/PENALIZE incentive system active</div>';
+  }
+
+  bridgeControlsEl.innerHTML = html;
+}
 
 // ============================================
-// RUN SIMULATION
+// RUN GOVERNANCE
 // ============================================
 runBtn.addEventListener('click', async () => {
-  if (!currentWorld) return;
+  if (!connectedBridge && currentRules.length === 0) {
+    ruleGenStatusEl.textContent = 'Generate governance rules or connect to a simulator first.';
+    ruleGenStatusEl.className = 'rule-status error';
+    return;
+  }
+
   runBtn.disabled = true;
   runBtn.textContent = 'Running...';
 
   // Reset viewer state
   totalInterventions = 0;
+  totalActions = 0;
   agentsEl.innerHTML = '';
   logEl.innerHTML = '';
   document.getElementById('m-stability').textContent = '--';
@@ -3053,9 +3839,9 @@ runBtn.addEventListener('click', async () => {
   document.getElementById('m-round').textContent = '--';
   document.getElementById('m-interventions').textContent = '0';
 
-  // Gather state overrides
+  // Gather state overrides from sliders (if world has them)
   const stateOverrides = {};
-  if (currentWorld.stateVariables) {
+  if (currentWorld && currentWorld.stateVariables) {
     currentWorld.stateVariables.forEach(sv => {
       const el = document.getElementById('sv-' + sv.id);
       if (!el) return;
@@ -3065,39 +3851,36 @@ runBtn.addEventListener('click', async () => {
     });
   }
 
-  const selectedEngine = engineSelect.value;
-
   try {
-    if (selectedEngine === 'nv-sim') {
-      // Built-in simulation
-      const config = {
-        worldId: currentWorld.id,
+    if (connectedBridge) {
+      // Run via bridge adapter
+      const payload = {
+        adapterId: connectedBridge.id,
+        worldId: currentWorld ? currentWorld.id : 'social_simulation',
         stateOverrides,
-        injectEvents: injectedEvents.length > 0 ? injectedEvents : undefined,
-        rounds: parseInt(roundsSlider.value),
       };
-      await fetch('/api/run-sim', {
+      await fetch('/api/run-live', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(config),
+        body: JSON.stringify(payload),
       });
     } else {
-      // Live adapter (external simulator)
-      const payload = {
-        adapterId: selectedEngine,
-        worldId: currentWorld.id,
+      // Fallback: run internal simulation with generated rules
+      const config = {
+        worldId: currentWorld ? currentWorld.id : 'social_simulation',
         stateOverrides,
+        rounds: 5,
       };
-      await fetch('/api/run-live', {
+      await fetch('/api/run-sim', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(payload),
+        body: JSON.stringify(config),
       });
     }
   } catch (err) {
-    addLog('Error starting simulation: ' + err.message, 'block');
+    addLog('Error starting governance: ' + err.message, 'block');
     runBtn.disabled = false;
-    runBtn.textContent = 'Run Simulation';
+    runBtn.textContent = 'Run Governance';
   }
 });
 
@@ -3225,9 +4008,13 @@ function renderAgents(reactions) {
 }
 
 // ============================================
-// PANEL RENDERING — Outcome / Behavior / Why
+// OBSERVATION DECK — Rendering
 // ============================================
 
+// Per-round snapshots for behavioral drift
+var roundSnapshots = []; // [{ round, choices: { action: count }, flows: [{ from, to, count, status }] }]
+var firstRoundSnapshot = null;
+
 function recordBehavior(reactions, round) {
   if (!reactions || !reactions.length) return;
   reactions.forEach(function(r) {
@@ -3244,62 +4031,283 @@ function recordBehavior(reactions, round) {
   });
 }
 
-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 || '') : '');
+// Normalize action names into readable categories
+function normalizeAction(action) {
+  if (!action) return 'act';
+  var a = action.toLowerCase().replace(/_/g, ' ');
+  // Collapse similar actions
+  if (a.includes('panic sell') || a.includes('panic_sell')) return 'panic sell';
+  if (a.includes('reduce') || a.includes('de-risk')) return 'reduce exposure';
+  if (a.includes('hold') || a.includes('maintain') || a.includes('steady')) return 'hold steady';
+  if (a.includes('aggressive') && a.includes('buy')) return 'aggressive buy';
+  if (a.includes('buy') || a.includes('accumulate')) return 'buy';
+  if (a.includes('sell') || a.includes('liquidat')) return 'sell';
+  if (a.includes('diversif')) return 'diversify';
+  if (a.includes('hedge')) return 'hedge';
+  if (a.includes('wait') || a.includes('observe') || a.includes('monitor')) return 'wait & observe';
+  if (a.includes('short')) return 'short';
+  if (a.includes('post') || a.includes('create')) return 'create content';
+  if (a.includes('follow') || a.includes('like') || a.includes('repost')) return 'engage';
+  if (a.includes('publish') || a.includes('cite')) return 'publish';
+  if (a.includes('analyze') || a.includes('research')) return 'research';
+  // Return first 20 chars
+  return a.slice(0, 20);
 }
 
-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;
-  }
+// Color for an action category
+function actionColor(action) {
+  var colors = {
+    'panic sell': '#ef4444', 'sell': '#f87171', 'short': '#dc2626',
+    'aggressive buy': '#f59e0b', 'buy': '#22c55e', 'accumulate': '#22c55e',
+    'hold steady': '#3b82f6', 'wait & observe': '#6366f1',
+    'reduce exposure': '#a78bfa', 'diversify': '#8b5cf6', 'hedge': '#7c3aed',
+    'create content': '#06b6d4', 'engage': '#14b8a6', 'publish': '#0ea5e9', 'research': '#818cf8',
+  };
+  return colors[action] || '#64748b';
+}
 
-  // 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;
+// ── Choice Bubbles ──
+function renderChoiceBubbles(reactions) {
+  var landscapeEl = document.getElementById('choice-landscape');
+  if (!landscapeEl) return;
+
+  // Group by normalized action
+  var groups = {};
+  reactions.forEach(function(r) {
+    var action = normalizeAction(r.reaction);
+    if (!groups[action]) groups[action] = { count: 0, totalImpact: 0 };
+    groups[action].count++;
+    groups[action].totalImpact += r.impact || 0;
+  });
+
+  var total = reactions.length;
+  var entries = Object.entries(groups).sort(function(a, b) { return b[1].count - a[1].count; });
+
+  // Hide empty state
+  var emptyEl = document.getElementById('choice-empty');
+  if (emptyEl) emptyEl.style.display = 'none';
+
+  var html = entries.map(function(entry) {
+    var action = entry[0];
+    var data = entry[1];
+    var pct = Math.round(data.count / total * 100);
+    // Size: min 48px, max 120px, proportional to count
+    var size = Math.max(48, Math.min(120, 48 + (data.count / total) * 100));
+    var color = actionColor(action);
+    var fontSize = size > 70 ? 18 : 14;
+    return '<div class="choice-bubble" style="width:' + size + 'px;height:' + size + 'px;background:' + color + '" title="' + data.count + ' agents chose ' + action + '">' +
+      '<div class="cb-count" style="font-size:' + fontSize + 'px">' + data.count + '</div>' +
+      '<div class="cb-label">' + action + '</div>' +
+      '<div class="cb-pct">' + pct + '%</div>' +
+      '</div>';
+  }).join('');
+
+  landscapeEl.innerHTML = html;
+}
+
+// ── Decision Flow (rules in center, agents flowing around) ──
+function renderDecisionFlow(reactions) {
+  var landscapeEl = document.getElementById('choice-landscape');
+  if (!landscapeEl) return;
+
+  // Build flow data: what agents intended → what happened
+  var flows = {}; // key: "intended|status|actual" → count
+  var intendedCounts = {};
+  var actualCounts = {};
+
+  reactions.forEach(function(r) {
+    var intended = normalizeAction(r.reaction);
+    var status = r.verdict ? r.verdict.status : 'ALLOW';
+    var actual = intended; // for ALLOW, actual = intended
+    if (status === 'BLOCK') actual = '(blocked)';
+    else if (status === 'MODIFY') actual = normalizeAction(r.verdict && r.verdict.modified_action ? r.verdict.modified_action : r.reaction) + ' (adj)';
+    else if (status === 'PENALIZE') actual = intended + ' (penalized)';
+    else if (status === 'REWARD') actual = intended + ' (rewarded)';
+
+    var key = intended + '|' + status + '|' + actual;
+    flows[key] = (flows[key] || 0) + 1;
+    intendedCounts[intended] = (intendedCounts[intended] || 0) + 1;
+    actualCounts[actual] = (actualCounts[actual] || 0) + 1;
+  });
+
+  // Sort by count
+  var sortedFlows = Object.entries(flows).sort(function(a, b) { return b[1] - a[1]; }).slice(0, 12);
+  var total = reactions.length;
+  var hasGovernance = sortedFlows.some(function(f) { return f[0].indexOf('BLOCK') >= 0 || f[0].indexOf('MODIFY') >= 0 || f[0].indexOf('REWARD') >= 0 || f[0].indexOf('PENALIZE') >= 0; });
+
+  if (!hasGovernance) {
+    // No governance interventions — just show bubbles
+    renderChoiceBubbles(reactions);
+    return;
   }
+
+  // Hide empty state
+  var emptyEl = document.getElementById('choice-empty');
+  if (emptyEl) emptyEl.style.display = 'none';
+
+  // Build flow rows
+  var maxCount = sortedFlows.length > 0 ? sortedFlows[0][1] : 1;
+  var html = '<div class="decision-flow">';
+
+  sortedFlows.forEach(function(entry) {
+    var parts = entry[0].split('|');
+    var intended = parts[0], status = parts[1], actual = parts[2];
+    var count = entry[1];
+    var barWidth = Math.max(20, (count / maxCount) * 100);
+    var arrowCls = status === 'BLOCK' ? 'blocked' : status === 'PENALIZE' ? 'penalized' : status === 'MODIFY' ? 'modified' : status === 'REWARD' ? 'rewarded' : 'allowed';
+    var arrowChar = status === 'BLOCK' ? '&#x2716;' : status === 'PENALIZE' ? '&#x26A0;' : status === 'MODIFY' ? '&#x2794;' : status === 'REWARD' ? '&#x2605;' : '&#x2192;';
+    var actualCls = 'actual-' + (status === 'BLOCK' ? 'block' : status === 'PENALIZE' ? 'penalize' : status === 'MODIFY' ? 'modify' : status === 'REWARD' ? 'reward' : 'allow');
+
+    html += '<div class="flow-row">' +
+      '<div class="flow-intended"><span class="flow-label">' + intended + '</span><div class="flow-bar intended" style="width:' + barWidth + '%"><span class="flow-count">' + count + '</span></div></div>' +
+      '<div class="flow-arrow ' + arrowCls + '">' + arrowChar + '</div>' +
+      '<div class="flow-actual"><div class="flow-bar ' + actualCls + '" style="width:' + barWidth + '%"><span class="flow-count">' + count + '</span></div><span class="flow-label">' + actual + '</span></div>' +
+      '</div>';
+  });
+
+  html += '<div class="flow-legend">' +
+    '<div class="flow-legend-item"><span class="flow-legend-dot" style="background:#4ade80"></span> proceeded</div>' +
+    '<div class="flow-legend-item"><span class="flow-legend-dot" style="background:#fbbf24"></span> adjusted</div>' +
+    '<div class="flow-legend-item"><span class="flow-legend-dot" style="background:#f87171"></span> stopped</div>' +
+    '<div class="flow-legend-item"><span class="flow-legend-dot" style="background:#4ade80;border:1px solid #22c55e"></span> rewarded</div>' +
+    '<div class="flow-legend-item"><span class="flow-legend-dot" style="background:#fb923c"></span> penalized</div>' +
+    '</div>';
+  html += '</div>';
+
+  landscapeEl.innerHTML = html;
 }
 
-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;
+// ── Choice Stream ──
+function updateChoiceStream(reactions, round) {
+  var streamEl = document.getElementById('choice-stream');
+  var countEl = document.getElementById('stream-count');
+  if (!streamEl) return;
+
+  // Take latest 8 reactions to show
+  var recent = reactions.slice(-8).reverse();
+  var html = recent.map(function(r) {
+    var status = r.verdict ? r.verdict.status : 'ALLOW';
+    var badge = '';
+    if (status === 'PENALIZE') badge = '<span class="incentive-badge penalize">&#x26A0;</span> ';
+    else if (status === 'REWARD') badge = '<span class="incentive-badge reward">&#x2605;</span> ';
+    else if (status === 'BLOCK') badge = '<span style="color:#f87171;font-size:9px">&#x2716;</span> ';
+    var frozenInfo = r.verdict && r.verdict.agentState && r.verdict.agentState.cooldown > 0
+      ? ' <span style="color:#818cf8;font-size:9px">(frozen)</span>' : '';
+    return '<div class="stream-item">' +
+      badge +
+      '<span class="stream-agent">' + r.stakeholder_id + '</span>' +
+      '<span class="stream-action">chose to <strong>' + normalizeAction(r.reaction) + '</strong>' + frozenInfo + '</span>' +
+      '<span class="stream-round">R' + round + '</span>' +
+      '</div>';
+  }).join('');
+
+  streamEl.innerHTML = html;
+  if (countEl) countEl.textContent = totalActions + ' total';
+}
+
+// ── Snapshot for drift ──
+function takeRoundSnapshot(reactions, round) {
+  var choices = {};
+  reactions.forEach(function(r) {
+    var action = normalizeAction(r.reaction);
+    choices[action] = (choices[action] || 0) + 1;
+  });
+
+  var snapshot = { round: round, choices: choices, total: reactions.length };
+  roundSnapshots.push(snapshot);
+  if (!firstRoundSnapshot) firstRoundSnapshot = snapshot;
+}
+
+// ── Behavioral Drift (post-run) ──
+function renderBehavioralDrift() {
+  var driftSection = document.getElementById('deck-drift-section');
+  var verdictEl = document.getElementById('drift-verdict');
+  var comparisonEl = document.getElementById('drift-comparison');
+  if (!driftSection || !verdictEl || !comparisonEl) return;
+  if (roundSnapshots.length < 2) return;
+
+  var first = firstRoundSnapshot;
+  var last = roundSnapshots[roundSnapshots.length - 1];
+  driftSection.style.display = '';
+
+  // Collect all actions across both snapshots
+  var allActions = {};
+  Object.keys(first.choices).forEach(function(a) { allActions[a] = true; });
+  Object.keys(last.choices).forEach(function(a) { allActions[a] = true; });
+  var actions = Object.keys(allActions).sort(function(a, b) {
+    return (last.choices[b] || 0) - (last.choices[a] || 0);
+  });
+
+  // Generate verdict
+  var biggestGain = { action: '', delta: 0 };
+  var biggestLoss = { action: '', delta: 0 };
+  actions.forEach(function(a) {
+    var earlyPct = first.total > 0 ? (first.choices[a] || 0) / first.total : 0;
+    var latePct = last.total > 0 ? (last.choices[a] || 0) / last.total : 0;
+    var delta = latePct - earlyPct;
+    if (delta > biggestGain.delta) { biggestGain = { action: a, delta: delta }; }
+    if (delta < biggestLoss.delta) { biggestLoss = { action: a, delta: delta }; }
+  });
+
+  var verdictParts = [];
+  if (biggestGain.action && biggestGain.delta > 0.05) {
+    verdictParts.push('Agents shifted toward <strong>' + biggestGain.action + '</strong> (+' + Math.round(biggestGain.delta * 100) + '%)');
+  }
+  if (biggestLoss.action && biggestLoss.delta < -0.05) {
+    verdictParts.push('abandoned <strong>' + biggestLoss.action + '</strong> (' + Math.round(biggestLoss.delta * 100) + '%)');
   }
+  verdictEl.innerHTML = verdictParts.length > 0
+    ? verdictParts.join(', ')
+    : 'Agent behavior remained relatively stable across rounds.';
+
+  // Render drift bars
+  var html = '<div class="drift-header-row"><span>Choice</span><span>Round 1</span><span></span><span>Final Round</span></div>';
+  actions.slice(0, 8).forEach(function(action) {
+    var earlyCount = first.choices[action] || 0;
+    var lateCount = last.choices[action] || 0;
+    var earlyPct = first.total > 0 ? Math.round(earlyCount / first.total * 100) : 0;
+    var latePct = last.total > 0 ? Math.round(lateCount / last.total * 100) : 0;
+    var delta = latePct - earlyPct;
+    var deltaCls = delta > 2 ? 'up' : delta < -2 ? 'down' : 'flat';
+    var deltaStr = delta > 0 ? '+' + delta + '%' : delta + '%';
+    if (Math.abs(delta) <= 2) deltaStr = '—';
+    var color = actionColor(action);
+
+    html += '<div class="drift-row">' +
+      '<div class="drift-action">' + action + '</div>' +
+      '<div class="drift-bar-container"><div class="drift-bar early" style="width:' + Math.max(2, earlyPct) + '%;background:' + color + ';opacity:0.5">' + earlyPct + '%</div></div>' +
+      '<div class="drift-delta ' + deltaCls + '">' + deltaStr + '</div>' +
+      '<div class="drift-bar-container"><div class="drift-bar late" style="width:' + Math.max(2, latePct) + '%;background:' + color + '">' + latePct + '%</div></div>' +
+      '</div>';
+  });
+
+  comparisonEl.innerHTML = html;
+}
+
+// ── What-If counterfactual ──
+function renderWhatIf(result) {
+  var section = document.getElementById('deck-whatif-section');
+  var contentEl = document.getElementById('whatif-content');
+  if (!section || !contentEl || !result || !result.governed || !result.baseline) return;
+
+  section.style.display = '';
+  var govCollapse = Math.round(result.governed.metrics.collapseProbability * 100);
+  var baseCollapse = Math.round(result.baseline.metrics.collapseProbability * 100);
+  var govStability = Math.round(result.governed.metrics.stabilityScore * 100);
+  var baseStability = Math.round(result.baseline.metrics.stabilityScore * 100);
+
+  contentEl.innerHTML =
+    '<div class="whatif-stat"><span class="whatif-num bad">' + baseCollapse + '%</span><span class="whatif-label">collapse probability <em>without</em> your rules</span></div>' +
+    '<div class="whatif-stat"><span class="whatif-num good">' + govCollapse + '%</span><span class="whatif-label">collapse probability <em>with</em> your rules</span></div>' +
+    '<div class="whatif-compare">Stability went from ' + baseStability + '% to ' + govStability + '%. ' +
+    (govStability > baseStability ? 'Your rules made the system ' + (govStability - baseStability) + ' points more stable.' : 'Agents found alternative strategies within your constraints.') +
+    '</div>';
 }
 
+// ── Master update ──
 function updateAllPanels() {
-  updateOutcomePanel();
-  updateBehaviorPanel();
-  updateWhyPanel();
+  // Observation Deck updates are driven by renderChoiceBubbles/renderDecisionFlow
+  // called directly from handleEvent — this function exists for compatibility
 }
 
 function handleEvent(event) {
@@ -3307,18 +4315,34 @@ function handleEvent(event) {
     statusEl.className = 'status live';
     statusEl.textContent = 'LIVE';
     // Show simulation source
-    const src = event.source || 'nv-sim';
-    if (src !== 'nv-sim') {
+    const src = event.source || 'governance';
+    if (src !== 'nv-sim' && src !== 'governance') {
       traceSourceEl.textContent = '● ' + src.toUpperCase() + ' (LIVE)';
       traceSourceEl.style.color = '#4ade80';
-      engineStatusEl.textContent = 'Streaming from ' + src;
-      engineStatusEl.style.color = '#4ade80';
     } else {
       traceSourceEl.textContent = '';
-      engineStatusEl.textContent = '';
     }
     addLog('Simulation started: ' + event.agents.length + ' agents, ' + event.totalRounds + ' rounds' + (src !== 'nv-sim' ? ' [source: ' + src + ']' : ''));
     resetShiftTracker();
+    // Reset Observation Deck state
+    roundSnapshots = [];
+    firstRoundSnapshot = null;
+    var deckStatusEl = document.getElementById('deck-status');
+    if (deckStatusEl) { deckStatusEl.textContent = 'LIVE'; deckStatusEl.className = 'deck-status live'; }
+    var driftSec = document.getElementById('deck-drift-section');
+    if (driftSec) driftSec.style.display = 'none';
+    var whatifSec = document.getElementById('deck-whatif-section');
+    if (whatifSec) whatifSec.style.display = 'none';
+    var choiceEmpty = document.getElementById('choice-empty');
+    if (choiceEmpty) choiceEmpty.style.display = '';
+    var roundLabel = document.getElementById('choice-round-label');
+    if (roundLabel) roundLabel.style.display = 'none';
+    var streamEl = document.getElementById('choice-stream');
+    if (streamEl) streamEl.innerHTML = '<div class="stream-empty">Agent decisions will stream here in real time</div>';
+    // Reset incentive tracker
+    incentiveLog = [];
+    var incentiveSec = document.getElementById('deck-incentive-section');
+    if (incentiveSec) incentiveSec.style.display = 'none';
     // Store narrative events by round for trace rendering
     narrativeEventsByRound = {};
     (event.narrativeEvents || []).forEach(function(ev) {
@@ -3407,11 +4431,25 @@ function handleEvent(event) {
     document.getElementById('m-volatility').textContent = (event.maxVolatility * 100).toFixed(0) + '%';
     document.getElementById('m-interventions').textContent = totalInterventions;
 
-    // Track system shifts (data collection, not displayed)
+    // Track system shifts (data collection)
     trackShift(event);
 
-    // Update all visible panels
-    updateAllPanels();
+    // ── Observation Deck: live updates ──
+    // Choice bubbles or decision flow (shows what agents chose and how it flowed)
+    if (event.reactions && event.reactions.length > 0) {
+      renderDecisionFlow(event.reactions);
+      updateChoiceStream(event.reactions, event.round);
+      takeRoundSnapshot(event.reactions, event.round);
+
+      // Track incentives (reward/penalize) from governance engine
+      event.reactions.forEach(function(r) { trackIncentive(r, event.round); });
+
+      // Update round label
+      var roundLabelEl = document.getElementById('choice-round-label');
+      var roundNumEl = document.getElementById('choice-round-num');
+      if (roundLabelEl) roundLabelEl.style.display = '';
+      if (roundNumEl) roundNumEl.textContent = event.round;
+    }
 
     // Add trace entry for audit
     addTraceRound(event);
@@ -3436,7 +4474,12 @@ function handleEvent(event) {
       renderSystemShift(r);
       renderRuleImpacts(r);
       renderEnforcementClassification(r.enforcementClassification || []);
-      updateAllPanels();
+
+      // Observation Deck: post-run views
+      var deckStatusEl2 = document.getElementById('deck-status');
+      if (deckStatusEl2) { deckStatusEl2.textContent = 'Complete'; deckStatusEl2.className = 'deck-status complete'; }
+      renderBehavioralDrift();
+      renderWhatIf(r);
       lastSimResult = {
         stability: r.governed.metrics.stabilityScore,
         volatility: r.governed.metrics.maxVolatility,
@@ -3445,7 +4488,88 @@ function handleEvent(event) {
       };
     }
     runBtn.disabled = false;
-    runBtn.textContent = 'Run Simulation';
+    runBtn.textContent = 'Run Governance';
+
+    // Generate post-run governance suggestions
+    generateGovernanceSuggestions(r);
+  }
+}
+
+// ============================================
+// POST-RUN GOVERNANCE SUGGESTIONS
+// ============================================
+function generateGovernanceSuggestions(result) {
+  var suggestionsSection = document.getElementById('governance-suggestions-section');
+  var suggestionsEl = document.getElementById('governance-suggestions');
+  if (!suggestionsSection || !suggestionsEl) return;
+
+  var suggestions = [];
+  var thesis = currentThesis || '';
+
+  if (result && result.governed && result.baseline) {
+    var gov = result.governed.metrics;
+    var base = result.baseline.metrics;
+    var effectiveness = result.comparison ? result.comparison.governanceEffectiveness : 0;
+
+    // Analyze what happened and suggest improvements
+    if (gov.collapseProbability > 0.3) {
+      suggestions.push({
+        type: 'warning',
+        text: 'Collapse probability is ' + (gov.collapseProbability * 100).toFixed(0) + '% even with governance. Consider adding stricter gates or lower thresholds.',
+      });
+    }
+
+    if (effectiveness < 0.3) {
+      suggestions.push({
+        type: 'warning',
+        text: 'Governance effectiveness is low (' + (effectiveness * 100).toFixed(0) + '%). Your rules may be too loose or not matching agent behaviors. Consider tightening intent patterns.',
+      });
+    } else if (effectiveness > 0.8) {
+      suggestions.push({
+        type: 'success',
+        text: 'Strong governance effectiveness (' + (effectiveness * 100).toFixed(0) + '%). Rules are actively shaping behavior.',
+      });
+    }
+
+    if (gov.stabilityScore > base.stabilityScore) {
+      var delta = ((gov.stabilityScore - base.stabilityScore) * 100).toFixed(0);
+      suggestions.push({
+        type: 'success',
+        text: 'Governance improved stability by ' + delta + ' points (from ' + (base.stabilityScore * 100).toFixed(0) + '% to ' + (gov.stabilityScore * 100).toFixed(0) + '%).',
+      });
+    }
+
+    // Check which rules never fired
+    var unfiredRules = [];
+    Object.keys(ruleImpactTracker).forEach(function(ruleId) {
+      if (ruleImpactTracker[ruleId].blocks === 0) {
+        unfiredRules.push(ruleImpactTracker[ruleId].label);
+      }
+    });
+    if (unfiredRules.length > 0) {
+      suggestions.push({
+        type: 'info',
+        text: unfiredRules.length + ' rule' + (unfiredRules.length > 1 ? 's' : '') + ' never triggered: ' + unfiredRules.slice(0, 3).join(', ') + (unfiredRules.length > 3 ? '...' : '') + '. Agents may already comply, or thresholds may be too high.',
+      });
+    }
+
+    // Thesis-aware suggestion
+    if (thesis) {
+      suggestions.push({
+        type: 'thesis',
+        text: 'Your goal: "' + thesis + '". ' + (effectiveness > 0.5 ? 'Current rules are aligned with this goal.' : 'Consider adjusting rules to better match this intent.'),
+      });
+    }
+  }
+
+  if (suggestions.length > 0) {
+    suggestionsSection.style.display = '';
+    var colorMap = { warning: 'var(--yellow)', success: 'var(--green)', info: 'var(--accent)', thesis: '#818cf8' };
+    suggestionsEl.innerHTML = suggestions.map(function(s) {
+      return '<div class="suggestion-item" style="border-left:3px solid ' + (colorMap[s.type] || 'var(--text-muted)') + '">' +
+        '<div class="suggestion-text">' + s.text + '</div>' +
+        '</div>';
+    }).join('');
   }
 }
 
@@ -3720,11 +4844,11 @@ cancelSaveBtn.addEventListener('click', () => {
 
 confirmSaveBtn.addEventListener('click', async () => {
   const name = variantNameInput.value.trim();
-  if (!name || !currentWorld) return;
+  if (!name) return;
 
   // Gather current state overrides
   const stateOverrides = {};
-  if (currentWorld.stateVariables) {
+  if (currentWorld && currentWorld.stateVariables) {
     currentWorld.stateVariables.forEach(sv => {
       const el = document.getElementById('sv-' + sv.id);
       if (!el) return;
@@ -3734,13 +4858,17 @@ confirmSaveBtn.addEventListener('click', async () => {
     });
   }
 
+  // Save as SimulationRules (complete snapshot)
   const payload = {
     name,
     description: variantDescInput.value.trim(),
-    baseWorld: currentWorld.id,
+    thesis: currentThesis,
+    bridgeId: connectedBridge ? connectedBridge.id : undefined,
+    rules: currentRules.map(function(r) {
+      return { id: r.id, description: r.description, enforcement: r.enforcement, intent_patterns: r.intent_patterns || [] };
+    }),
+    worldDefinition: currentWorld || undefined,
     stateOverrides,
-    events: injectedEvents.slice(),
-    rounds: parseInt(roundsSlider.value),
     lastResult: lastSimResult,
   };
 
@@ -3773,18 +4901,21 @@ async function loadVariants() {
 
 function renderVariants(variants) {
   if (variants.length === 0) {
-    variantListEl.innerHTML = '<div style="font-size:11px;color:#333">No saved variants yet</div>';
+    variantListEl.innerHTML = '<div style="font-size:11px;color:var(--text-muted)">No saved rules yet</div>';
     return;
   }
   variantListEl.innerHTML = variants.map(v => {
     const resultHtml = v.lastResult
       ? '<span class="vresult">Stability: ' + (v.lastResult.stability * 100).toFixed(0) + '% | Effectiveness: ' + (v.lastResult.governanceEffectiveness * 100).toFixed(0) + '%</span>'
-      : '<span style="color:#555">Not yet run</span>';
+      : '<span style="color:var(--text-faint)">Not yet run</span>';
+    const rulesCount = v.rules ? v.rules.length + ' rules' : (v.events ? v.events.length + ' events' : '');
+    const bridgeLabel = v.bridgeId ? '<span class="vbase">' + v.bridgeId + '</span>' : (v.baseWorld ? '<span class="vbase">' + v.baseWorld + '</span>' : '');
     return '<div class="variant-card" data-vid="' + v.id + '">' +
       '<div class="vname">' + v.name + '</div>' +
+      (v.thesis ? '<div class="vdesc" style="font-style:italic">' + v.thesis + '</div>' : '') +
       (v.description ? '<div class="vdesc">' + v.description + '</div>' : '') +
-      '<span class="vbase">' + v.baseWorld + '</span>' +
-      '<div class="vmeta">' + resultHtml + ' | ' + v.events.length + ' events | ' + v.rounds + ' rounds</div>' +
+      bridgeLabel +
+      '<div class="vmeta">' + resultHtml + (rulesCount ? ' | ' + rulesCount : '') + '</div>' +
       '<span class="vdelete" data-vid="' + v.id + '">delete</span>' +
       '</div>';
   }).join('');
@@ -3815,38 +4946,49 @@ function renderVariants(variants) {
 }
 
 function loadVariant(variant) {
-  // Set world
-  selectWorld(variant.baseWorld);
-
-  // Apply state overrides
-  if (variant.stateOverrides && currentWorld && currentWorld.stateVariables) {
-    currentWorld.stateVariables.forEach(sv => {
-      if (sv.id in variant.stateOverrides) {
-        const el = document.getElementById('sv-' + sv.id);
-        if (!el) return;
-        if (sv.type === 'boolean') {
-          const val = variant.stateOverrides[sv.id];
-          if (val && !el.classList.contains('on')) el.classList.add('on');
-          if (!val && el.classList.contains('on')) el.classList.remove('on');
-        } else {
-          el.value = variant.stateOverrides[sv.id];
-          // Update value display for sliders
-          const valEl = document.getElementById('sv-val-' + sv.id);
-          if (valEl) valEl.textContent = variant.stateOverrides[sv.id];
-        }
-      }
-    });
-  }
+  // Handle new SimulationRules format
+  if (variant.thesis !== undefined) {
+    // Restore thesis
+    currentThesis = variant.thesis;
+    if (thesisInput) thesisInput.value = variant.thesis;
+
+    // Restore rules
+    if (variant.rules && variant.rules.length > 0) {
+      currentRules = variant.rules;
+      // Re-apply rules to server
+      fetch('/api/generate-rules', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ thesis: variant.thesis }),
+      }).catch(() => {});
+
+      // Show rules preview
+      var iconMap = { block: '&#x1F534;', allow: '&#x1F7E2;', modify: '&#x1F535;', warn: '&#x1F7E1;' };
+      generatedRulesPreviewEl.innerHTML = variant.rules.map(function(r) {
+        var icon = iconMap[r.enforcement] || '&#x1F7E2;';
+        return '<div class="parsed-rule enforcement-' + r.enforcement + '">' +
+          '<div class="pr-header"><span class="pr-icon">' + icon + '</span><span class="pr-action">' + (r.enforcement || 'rule') + '</span></div>' +
+          '<div class="pr-desc">' + r.description + '</div>' +
+          '</div>';
+      }).join('');
 
-  // Set events
-  injectedEvents = variant.events.slice();
-  renderInjectedEvents();
+      ruleGenStatusEl.textContent = variant.rules.length + ' rule(s) loaded from "' + variant.name + '".';
+      ruleGenStatusEl.className = 'rule-status success';
+    }
 
-  // Set rounds
-  roundsSlider.value = Math.min(variant.rounds, 12);
-  roundsVal.textContent = Math.min(variant.rounds, 12);
+    // Restore world definition
+    if (variant.worldDefinition) {
+      currentWorld = variant.worldDefinition;
+      renderStateVars();
+    }
+  } else {
+    // Legacy WorldVariant format — try to load base world
+    if (variant.baseWorld) {
+      selectWorld(variant.baseWorld);
+    }
+  }
 
-  addLog('Loaded variant: ' + variant.name, '');
+  addLog('Loaded rules: ' + variant.name, '');
 }
 
 // ============================================
@@ -3889,129 +5031,15 @@ const savedTheme = localStorage.getItem('nv-theme');
 if (savedTheme) applyTheme(savedTheme);
 
 // ============================================
-// WORLD SOURCE SWITCHING
+// (Old world source switching removed — replaced by thesis + bridge flow)
 // ============================================
-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
+// (Old world action bar removed — replaced by thesis + bridge flow)
 // ============================================
 
-// + 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
+// WORLD FILE UPLOAD / PASTE (simplified)
 // ============================================
 const uploadZone = document.getElementById('upload-zone');
 const uploadFileInput = document.getElementById('upload-file-input');
@@ -4020,56 +5048,43 @@ 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(); });
+if (uploadZone) {
+  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);
+  });
+  uploadZone.addEventListener('click', () => { if (uploadFileInput) uploadFileInput.click(); });
+}
+if (uploadBrowseBtn) uploadBrowseBtn.addEventListener('click', (e) => { e.stopPropagation(); if (uploadFileInput) uploadFileInput.click(); });
+if (uploadFileInput) uploadFileInput.addEventListener('change', () => { if (uploadFileInput.files[0]) readWorldFile(uploadFileInput.files[0]); });
 
 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';
+    if (worldJsonInput) worldJsonInput.value = e.target.result;
+    if (uploadStatusEl) { 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 (loadWorldBtn) loadWorldBtn.addEventListener('click', async () => {
+  const jsonText = worldJsonInput ? worldJsonInput.value.trim() : '';
   if (!jsonText) {
-    uploadStatusEl.textContent = 'Paste or upload a world file first.';
-    uploadStatusEl.className = 'rule-status error';
+    if (uploadStatusEl) { 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';
+  try { worldData = JSON.parse(jsonText); } catch (err) {
+    if (uploadStatusEl) { 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;
 
@@ -4082,202 +5097,50 @@ loadWorldBtn.addEventListener('click', async () => {
     const result = await resp.json();
 
     if (result.error) {
-      uploadStatusEl.textContent = result.error;
-      uploadStatusEl.className = 'rule-status error';
+      if (uploadStatusEl) { uploadStatusEl.textContent = result.error; uploadStatusEl.className = 'rule-status error'; }
     } else {
-      uploadStatusEl.textContent = result.message;
-      uploadStatusEl.className = 'rule-status success';
+      if (uploadStatusEl) { 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 =>
+      var infoEl = document.getElementById('loaded-world-info');
+      if (infoEl) infoEl.style.display = '';
+      var lwName = document.getElementById('lw-name');
+      if (lwName) lwName.textContent = result.world.title;
+      var lwThesis = document.getElementById('lw-thesis');
+      if (lwThesis) lwThesis.textContent = '"' + result.world.thesis + '"';
+      var lwStats = document.getElementById('lw-stats');
+      if (lwStats) lwStats.textContent = result.world.invariants.length + ' invariants, ' + result.world.gates.length + ' gates, ' + result.rulesApplied + ' rules';
+
+      // Set thesis from loaded world
+      if (result.world.thesis && thesisInput) {
+        thesisInput.value = result.world.thesis;
+        currentThesis = result.world.thesis;
+      }
+
+      // Set current world
+      currentWorld = {
+        id: 'loaded-world',
+        title: result.world.title,
+        thesis: result.world.thesis,
+        stateVariables: result.world.stateVariables || [],
+        invariants: result.world.invariants || [],
+        gates: result.world.gates || [],
+      };
+      renderStateVars();
+
+      // Update active invariants (hidden, for audit)
+      activeInvEl.innerHTML = (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';
+    if (uploadStatusEl) { 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 : 'social_simulation' }),
-    });
-    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 (currentWorldSource === 'custom') {
-              // CUSTOM MODE: Generate a full governed world (state vars, gates, thesis)
-              const customName = document.getElementById('custom-world-name');
-              const worldName = (customName && customName.value) ? customName.value : 'Custom World';
-              const ruleText = document.getElementById('rule-input').value;
-
-              const genResp = await fetch('/api/generate-world', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ text: ruleText, name: worldName }),
-              });
-              const genData = await genResp.json();
-
-              if (genData.status === 'generated') {
-                ruleStatusEl.textContent = genData.parsed.total + ' rules parsed. Full world generated: ' + genData.world.stateVariables.length + ' state variables, ' + genData.world.gates.length + ' gates, ' + genData.world.invariants.length + ' invariants.';
-                ruleStatusEl.className = 'rule-status success';
-
-                // Show invariants in active panel
-                activeInvEl.innerHTML = genData.world.invariants.map(function(inv) {
-                  const color = inv.enforceable ? 'var(--red)' : 'var(--green)';
-                  return '<div class="inv-item" style="color:' + color + '">[' + inv.id + '] ' + inv.description + '</div>';
-                }).join('');
-
-                // Set the generated world as the current world — with real state variables and gates
-                currentWorld = {
-                  id: genData.world.id,
-                  title: genData.world.title,
-                  thesis: genData.world.thesis,
-                  stateVariables: genData.world.stateVariables,
-                  invariants: genData.world.invariants,
-                  gates: genData.world.gates,
-                };
-                worlds.push(currentWorld);
-
-                // Update world selector dropdown
-                var opt = document.createElement('option');
-                opt.value = currentWorld.id;
-                opt.textContent = currentWorld.title;
-                worldSelect.appendChild(opt);
-                worldSelect.value = currentWorld.id;
-
-                // Render the state variable sliders
-                selectWorld(currentWorld.id);
-                document.getElementById('world-thesis').textContent = '"' + genData.world.thesis + '"';
-              }
-            } else {
-              // PRESET MODE: Just apply rules on top of existing world
-              let worldId = currentWorld ? currentWorld.id : 'social_simulation';
-
-              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';
-
-                // Show rules in active invariants panel
-                activeInvEl.innerHTML = parsedRuleData.map(function(r) {
-                  var enfType = r.enforcement || 'block';
-                  var colorMap = { block: 'var(--red)', allow: 'var(--green)', modify: 'var(--blue)', warn: 'var(--yellow)', pause: 'var(--yellow)' };
-                  var color = colorMap[enfType] || 'var(--text-secondary)';
-                  return '<div class="inv-item" style="color:' + color + '">[' + r.id + '] ' + r.description + '</div>';
-                }).join('');
-              }
-            }
-          } 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
 // ============================================
@@ -4293,6 +5156,8 @@ async function pollSessionStats() {
     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-rewarded')) el('s-rewarded').textContent = data.evaluations.rewarded || 0;
+    if (el('s-penalized')) el('s-penalized').textContent = data.evaluations.penalized || 0;
     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 ? '...' : '')
@@ -4354,6 +5219,189 @@ async function saveExperiment() {
 sessionPollInterval = setInterval(pollSessionStats, 2000);
 pollSessionStats();
 
+// ============================================
+// AI API KEY MANAGEMENT
+// ============================================
+var aiKeyInput = document.getElementById('ai-key-input');
+var aiKeyStatus = document.getElementById('ai-key-status');
+var aiKeySaveBtn = document.getElementById('ai-key-save-btn');
+var aiKeyExtra = document.getElementById('ai-key-extra');
+var aiBaseUrl = document.getElementById('ai-base-url');
+var aiModel = document.getElementById('ai-model');
+var selectedProvider = 'anthropic';
+
+// Provider buttons
+document.querySelectorAll('.ai-key-provider-btn').forEach(function(btn) {
+  btn.addEventListener('click', function() {
+    document.querySelectorAll('.ai-key-provider-btn').forEach(function(b) { b.classList.remove('active'); });
+    btn.classList.add('active');
+    selectedProvider = btn.getAttribute('data-provider');
+    // Show extra fields for custom/openai providers
+    if (aiKeyExtra) {
+      aiKeyExtra.style.display = (selectedProvider === 'custom' || selectedProvider === 'openai') ? '' : 'none';
+    }
+    // Update placeholder
+    if (aiKeyInput) {
+      if (selectedProvider === 'anthropic') aiKeyInput.placeholder = 'sk-ant-... (Anthropic API key)';
+      else if (selectedProvider === 'openai') aiKeyInput.placeholder = 'sk-... (OpenAI API key)';
+      else aiKeyInput.placeholder = 'API key (or "none" for local models)';
+    }
+  });
+});
+
+// Load current config on boot
+fetch('/api/ai-config').then(function(r) { return r.json(); }).then(function(data) {
+  if (data.hasKey && aiKeyStatus) {
+    aiKeyStatus.textContent = data.keyPreview;
+    aiKeyStatus.className = 'ai-key-status connected';
+  }
+  if (data.provider) {
+    selectedProvider = data.provider;
+    document.querySelectorAll('.ai-key-provider-btn').forEach(function(b) {
+      b.classList.toggle('active', b.getAttribute('data-provider') === data.provider);
+    });
+    if (aiKeyExtra) {
+      aiKeyExtra.style.display = (data.provider === 'custom' || data.provider === 'openai') ? '' : 'none';
+    }
+  }
+  if (data.baseUrl && aiBaseUrl) aiBaseUrl.value = data.baseUrl;
+  if (data.model && aiModel) aiModel.value = data.model;
+}).catch(function() {});
+
+// Save key
+if (aiKeySaveBtn) aiKeySaveBtn.addEventListener('click', function() {
+  var key = aiKeyInput ? aiKeyInput.value.trim() : '';
+  if (!key) return;
+  var payload = { provider: selectedProvider, apiKey: key };
+  if (aiBaseUrl && aiBaseUrl.value.trim()) payload.baseUrl = aiBaseUrl.value.trim();
+  if (aiModel && aiModel.value.trim()) payload.model = aiModel.value.trim();
+
+  fetch('/api/ai-config', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  }).then(function(r) { return r.json(); }).then(function(data) {
+    if (data.status === 'updated' && aiKeyStatus) {
+      aiKeyStatus.textContent = 'Connected';
+      aiKeyStatus.className = 'ai-key-status connected';
+      if (aiKeyInput) aiKeyInput.value = '';
+      aiKeyInput.placeholder = 'Key saved — enter new key to change';
+    }
+  }).catch(function(err) {
+    if (aiKeyStatus) { aiKeyStatus.textContent = 'Error'; aiKeyStatus.className = 'ai-key-status missing'; }
+  });
+});
+
+// ============================================
+// INCENTIVE TRACKER (Reward/Penalize)
+// ============================================
+var incentiveLog = []; // { agent, type, magnitude, cooldown, round, action }
+
+function trackIncentive(reaction, round) {
+  if (!reaction || !reaction.verdict) return;
+  var v = reaction.verdict;
+  // Check for incentive data (from governance engine consequence/reward)
+  if (!v.incentive && v.status !== 'REWARD' && v.status !== 'PENALIZE') return;
+
+  var inc = v.incentive || {};
+  var agentState = v.agentState || {};
+
+  incentiveLog.push({
+    agent: reaction.stakeholder_id,
+    type: inc.type || (v.status === 'REWARD' ? 'reward' : 'penalize'),
+    magnitude: inc.magnitude || 1,
+    cooldown: inc.cooldownRounds || agentState.cooldown || 0,
+    round: round,
+    action: reaction.reaction,
+    description: inc.description || v.reason || '',
+    influence: agentState.influence || 1.0,
+    totalPenalties: agentState.penalties || 0,
+    totalRewards: agentState.rewards || 0,
+  });
+  renderIncentiveTracker();
+}
+
+function renderIncentiveTracker() {
+  var section = document.getElementById('deck-incentive-section');
+  var summaryEl = document.getElementById('incentive-summary');
+  var agentsEl = document.getElementById('incentive-agents');
+  if (!section || !summaryEl || !agentsEl) return;
+  if (incentiveLog.length === 0) { section.style.display = 'none'; return; }
+
+  section.style.display = '';
+
+  var rewards = incentiveLog.filter(function(i) { return i.type === 'reward'; });
+  var penalties = incentiveLog.filter(function(i) { return i.type === 'penalize'; });
+
+  // Count unique frozen agents (latest state)
+  var latestStates = {};
+  incentiveLog.forEach(function(i) { latestStates[i.agent] = i; });
+  var frozenCount = Object.values(latestStates).filter(function(s) { return s.cooldown > 0; }).length;
+
+  summaryEl.innerHTML =
+    '<div style="display:flex;gap:8px;margin-bottom:12px">' +
+    '<div style="flex:1;text-align:center;padding:8px;background:rgba(74,222,128,0.1);border-radius:6px">' +
+    '<div style="font-size:24px;font-weight:800;color:#4ade80">' + rewards.length + '</div>' +
+    '<div style="font-size:10px;color:#86efac">Rewards</div></div>' +
+    '<div style="flex:1;text-align:center;padding:8px;background:rgba(251,146,60,0.1);border-radius:6px">' +
+    '<div style="font-size:24px;font-weight:800;color:#fb923c">' + penalties.length + '</div>' +
+    '<div style="font-size:10px;color:#fdba74">Penalties</div></div>' +
+    '<div style="flex:1;text-align:center;padding:8px;background:rgba(99,102,241,0.1);border-radius:6px">' +
+    '<div style="font-size:24px;font-weight:800;color:#818cf8">' + frozenCount + '</div>' +
+    '<div style="font-size:10px;color:#a5b4fc">Frozen</div></div>' +
+    '</div>';
+
+  // Show per-agent incentive history (latest 10)
+  var recent = incentiveLog.slice(-10).reverse();
+  var agentHtml = recent.map(function(inc) {
+    var icon = inc.type === 'reward' ? '&#x2605;' : '&#x26A0;';
+    var cls = inc.type === 'reward' ? 'reward' : 'penalize';
+    var cooldownStr = inc.cooldown > 0 ? ' <span style="color:#818cf8;font-size:9px">(frozen ' + inc.cooldown + 'r)</span>' : '';
+    var influenceStr = inc.influence !== undefined && inc.influence !== 1.0 ? ' <span style="color:#a78bfa;font-size:9px">inf:' + inc.influence.toFixed(1) + '</span>' : '';
+    var descStr = inc.description ? '<div style="font-size:9px;color:var(--text-faint);margin-top:2px;padding-left:4px">' + inc.description + '</div>' : '';
+    return '<div class="stream-item" style="flex-wrap:wrap">' +
+      '<span class="incentive-badge ' + cls + '">' + icon + ' ' + inc.type + '</span>' +
+      '<span class="stream-agent">' + inc.agent + '</span>' +
+      '<span class="stream-action">' + normalizeAction(inc.action) + cooldownStr + influenceStr + '</span>' +
+      '<span class="stream-round">R' + inc.round + '</span>' +
+      descStr +
+      '</div>';
+  }).join('');
+
+  agentsEl.innerHTML = agentHtml;
+}
+
+// ============================================
+// ONBOARDING
+// ============================================
+var onboardOverlay = document.getElementById('onboard-overlay');
+var onboardStartBtn = document.getElementById('onboard-start-btn');
+var onboardDismiss = document.getElementById('onboard-dismiss');
+var startHereBtn = document.getElementById('start-here-btn');
+
+function showOnboarding() {
+  if (onboardOverlay) onboardOverlay.style.display = '';
+}
+
+function hideOnboarding(permanent) {
+  if (onboardOverlay) onboardOverlay.style.display = 'none';
+  if (permanent) localStorage.setItem('nv-onboarded', '1');
+}
+
+// "Start" = close and mark as seen
+if (onboardStartBtn) onboardStartBtn.addEventListener('click', function() { hideOnboarding(true); });
+// "Don't show again" = same
+if (onboardDismiss) onboardDismiss.addEventListener('click', function() { hideOnboarding(true); });
+// Close on backdrop click
+if (onboardOverlay) onboardOverlay.addEventListener('click', function(e) { if (e.target === onboardOverlay) hideOnboarding(false); });
+// "Start Here" button in left panel = always show
+if (startHereBtn) startHereBtn.addEventListener('click', showOnboarding);
+
+// Show on first visit
+if (!localStorage.getItem('nv-onboarded')) {
+  showOnboarding();
+}
+
 // ============================================
 // BOOT
 // ============================================