@neuroverseos/nv-sim 0.1.7 → 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");
@@ -180,12 +181,96 @@ function startInteractiveServer(port, onReady) {
     let currentSession = {
         id: `session_${Date.now()}_${Math.random().toString(36).slice(2, 6)}`,
         startedAt: new Date().toISOString(),
-        world: "trading",
+        world: "social_simulation",
         guardCount: 0,
         evaluations: [],
     };
     // 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++;
+        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 - 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 = [
@@ -499,7 +584,7 @@ function startInteractiveServer(port, onReady) {
         }
         if (req.url === "/api/worlds" && req.method === "GET") {
             const { resolveWorld } = await Promise.resolve().then(() => __importStar(require("./worldComparison")));
-            const worldIds = ["trading", "strait_of_hormuz", "gas_price_spike", "ai_regulation_crisis"];
+            const worldIds = ["social_simulation", "science_research"];
             const worlds = worldIds.map(id => {
                 try {
                     const r = resolveWorld(id);
@@ -536,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" });
@@ -602,7 +710,7 @@ function startInteractiveServer(port, onReady) {
                     return;
                 }
                 // Resolve world for evaluation
-                const worldId = payload.world ?? "trading";
+                const worldId = payload.world ?? "social_simulation";
                 let nvWorld;
                 try {
                     const { resolveWorld } = await Promise.resolve().then(() => __importStar(require("./worldComparison")));
@@ -671,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 = [
                         {
@@ -741,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) {
@@ -798,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
@@ -812,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
@@ -830,36 +1025,116 @@ 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(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",
-                    round: 0,
+                    round: bridgeMetrics.evalCount,
                     totalRounds: 0,
                     phase: "governed",
                     reactions: [{
                             stakeholder_id: payload.actor,
                             reaction: payload.action,
-                            impact: 0,
-                            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: 0,
-                    maxVolatility: 0,
+                    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({
+                    type: "bridge_metrics",
+                    stability: bridgeMetrics.stability,
+                    volatility: bridgeMetrics.volatility,
+                    evalCount: bridgeMetrics.evalCount,
+                    totalInterventions: bridgeMetrics.totalInterventions,
                 });
                 // Record in session
                 currentSession.evaluations.push({
                     actor: payload.actor, action: payload.action,
-                    decision: decision,
+                    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
@@ -867,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) {
@@ -923,6 +1207,59 @@ function startInteractiveServer(port, onReady) {
             }
             return;
         }
+        // Generate a full governed world from plain-English rules
+        // Returns a complete world: thesis, state variables, invariants, gates
+        if (req.url === "/api/generate-world" && req.method === "POST") {
+            try {
+                const body = await readBody(req);
+                const payload = JSON.parse(body);
+                if (!payload.text) {
+                    jsonResponse(res, 400, { error: "text is required" });
+                    return;
+                }
+                const { parseRulesFromText, policyToWorld } = await Promise.resolve().then(() => __importStar(require("./policyEngine")));
+                const parsed = parseRulesFromText(payload.text);
+                const worldDef = policyToWorld(parsed);
+                const worldName = payload.name || "Custom World";
+                const worldId = "custom-" + worldName.toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9-]/g, "");
+                // Apply as the active world
+                customGuards.length = 0;
+                for (let i = 0; i < parsed.rules.length; i++) {
+                    const rule = parsed.rules[i];
+                    customGuards.push({
+                        id: worldDef.invariants[i]?.id ?? `custom-rule-${i}`,
+                        label: rule.description,
+                        description: rule.description,
+                        category: "custom",
+                        enforcement: (rule.category === "prohibit" || rule.category === "circuit_breaker") ? "block" : rule.category === "limit" ? "block" : "allow",
+                        immutable: false,
+                        intent_patterns: [...rule.keywords],
+                        default_enabled: true,
+                    });
+                }
+                jsonResponse(res, 200, {
+                    status: "generated",
+                    world: {
+                        id: worldId,
+                        title: worldName,
+                        thesis: worldDef.thesis,
+                        stateVariables: worldDef.state_variables,
+                        invariants: worldDef.invariants,
+                        gates: worldDef.gates ?? [],
+                    },
+                    parsed: {
+                        total: parsed.summary.total,
+                        enforced: parsed.summary.enforced,
+                        advisory: parsed.summary.advisory,
+                    },
+                    rulesApplied: customGuards.length,
+                });
+            }
+            catch (err) {
+                jsonResponse(res, 400, { error: err?.message ?? "Invalid request" });
+            }
+            return;
+        }
         // Apply parsed rules to the active governance context
         if (req.url === "/api/apply-rules" && req.method === "POST") {
             try {
@@ -944,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, {
@@ -1050,7 +1389,7 @@ function startInteractiveServer(port, onReady) {
         // Exports the current world configuration (base world + custom rules + overrides) as a world file
         if (req.url === "/api/export-world" && req.method === "GET") {
             const { resolveWorld } = await Promise.resolve().then(() => __importStar(require("./worldComparison")));
-            const worldId = currentSession.world || "trading";
+            const worldId = currentSession.world || "social_simulation";
             let baseWorld;
             try {
                 baseWorld = resolveWorld(worldId);
@@ -1088,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))];
@@ -1101,6 +1442,8 @@ function startInteractiveServer(port, onReady) {
                     blocked,
                     modified,
                     allowed,
+                    rewarded,
+                    penalized,
                 },
                 agents: uniqueActors,
                 actionTypes: uniqueActions,
@@ -1243,6 +1586,10 @@ function startInteractiveServer(port, onReady) {
                 guardCount: customGuards.length,
                 evaluations: [],
             };
+            // Reset bridge metrics counters
+            bridgeEvalCount = 0;
+            bridgeBlockCount = 0;
+            bridgeModifyCount = 0;
             jsonResponse(res, 200, {
                 status: "reset",
                 newSessionId: currentSession.id,
@@ -1303,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) {
@@ -1321,7 +1970,7 @@ function startInteractiveServer(port, onReady) {
                 jsonResponse(res, 200, { status: "started", adapter: payload.adapterId });
                 // Resolve world for governance evaluation
                 const { resolveWorld } = await Promise.resolve().then(() => __importStar(require("./worldComparison")));
-                const resolved = resolveWorld(payload.worldId ?? "trading");
+                const resolved = resolveWorld(payload.worldId ?? "social_simulation");
                 const world = { ...resolved.world };
                 if (payload.stateOverrides) {
                     const updatedVars = world.state_variables.map(sv => {
@@ -1356,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();
@@ -1636,42 +2285,80 @@ const INTERACTIVE_DASHBOARD_HTML = `<!DOCTYPE html>
   .variant-card .vbase { display: inline-block; font-size: 9px; padding: 1px 5px; background: var(--accent-bg); color: var(--accent); border-radius: 3px; margin-top: 3px; }
 
   /* RIGHT PANEL — Simulation viewer */
-  .viewer { display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; }
-  .viewer-top { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); }
-  .viewer-mid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); overflow: hidden; }
-  .viewer-bottom { background: var(--bg-primary); border-top: 1px solid var(--border); padding: 12px 16px; max-height: 180px; overflow-y: auto; }
-
-  .vpanel { background: var(--bg-primary); padding: 14px; overflow-y: auto; }
-  .vpanel h2 { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
-
-  /* Metrics */
-  .metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
-  .metric-box { background: var(--bg-surface); border: 1px solid var(--bg-elevated); border-radius: 6px; padding: 10px; text-align: center; }
-  .metric-box .value { font-size: 20px; font-weight: 700; color: var(--text-primary); }
-  .metric-box .label { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
-  .metric-box.good .value { color: var(--green); }
-  .metric-box.bad .value { color: var(--red); }
-  .metric-box.warn .value { color: var(--yellow); }
-
-  /* Agent bars */
-  .agent-row { display: flex; align-items: center; gap: 6px; padding: 3px 0; font-size: 11px; }
-  .agent-name { width: 130px; color: var(--text-secondary); flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-  .impact-bar-bg { flex: 1; height: 14px; background: var(--bg-surface); border-radius: 3px; position: relative; overflow: hidden; }
-  .impact-bar { height: 100%; border-radius: 3px; transition: width 0.4s ease; position: absolute; top: 0; }
-  .impact-bar.positive { background: var(--green); right: 50%; }
-  .impact-bar.negative { background: var(--red); left: 50%; }
-  .impact-val { width: 44px; text-align: right; color: var(--text-secondary); font-size: 10px; }
+  .viewer { display: grid; grid-template-rows: auto auto auto auto auto; overflow-y: auto; height: 100%; gap: 0; }
+
+  /* Outcome panel */
+  .outcome-panel { padding: 20px 24px 16px; border-bottom: 1px solid var(--border); }
+  .outcome-statement { font-size: 16px; font-weight: 600; color: var(--text-primary); line-height: 1.4; margin-bottom: 12px; }
+  .outcome-empty { font-size: 13px; color: var(--text-faint); font-style: italic; }
+  .confidence-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
+  .confidence-card { background: var(--bg-surface); border: 1px solid var(--bg-elevated); border-radius: 6px; padding: 8px 10px; }
+  .confidence-card .cc-label { font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; }
+  .confidence-card .cc-value { font-size: 13px; font-weight: 600; }
+  .confidence-card .cc-value.good { color: var(--green); }
+  .confidence-card .cc-value.warn { color: var(--yellow); }
+  .confidence-card .cc-value.bad { color: var(--red); }
+  .outcome-context { font-size: 10px; color: var(--text-faint); margin-top: 6px; }
+
+  /* Behavior panel */
+  .behavior-panel { padding: 16px 24px; border-bottom: 1px solid var(--border); }
+  .behavior-panel h2 { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
+  .behavior-shifts { margin-bottom: 10px; }
+  .behavior-shift-item { font-size: 12px; color: var(--text-secondary); padding: 4px 0 4px 12px; border-left: 2px solid var(--accent); line-height: 1.5; margin-bottom: 4px; }
+  .behavior-empty { font-size: 12px; color: var(--text-faint); font-style: italic; }
+
+  .activity-toggle { font-size: 10px; color: var(--text-muted); cursor: pointer; padding: 6px 0; margin-top: 4px; }
+  .activity-toggle:hover { color: var(--text-secondary); }
+  .activity-timeline { display: none; max-height: 180px; overflow-y: auto; margin-top: 6px; }
+  .activity-timeline.open { display: block; }
+  .activity-item { font-size: 11px; color: var(--text-secondary); padding: 3px 0; border-bottom: 1px solid var(--border); }
+  .activity-item:last-child { border-bottom: none; }
+  .activity-agent { color: var(--blue); font-weight: 500; }
+
+  /* Why panel */
+  .why-panel { padding: 16px 24px; border-bottom: 1px solid var(--border); }
+  .why-panel h2 { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
+  .why-item { font-size: 12px; color: var(--text-secondary); padding: 4px 0 4px 12px; border-left: 2px solid var(--green); line-height: 1.5; margin-bottom: 4px; }
+  .why-empty { font-size: 12px; color: var(--text-faint); font-style: italic; }
+
+  /* Export bar */
+  .export-bar { display: flex; gap: 8px; padding: 12px 24px; border-bottom: 1px solid var(--border); background: var(--bg-secondary); }
+  .export-btn { padding: 6px 14px; font-size: 11px; font-weight: 600; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-surface); color: var(--text-secondary); cursor: pointer; font-family: inherit; transition: all 0.2s; }
+  .export-btn:hover { background: var(--bg-elevated); color: var(--text-primary); }
+  .audit-btn { margin-left: auto; color: var(--text-faint); }
+
+  /* Audit overlay */
+  .audit-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000; background: rgba(0,0,0,0.7); }
+  .audit-overlay.open { display: flex; align-items: center; justify-content: center; }
+  .audit-modal { background: var(--bg-primary); border: 1px solid var(--border); border-radius: 8px; width: 90%; max-width: 900px; max-height: 85vh; overflow-y: auto; padding: 0; }
+  .audit-header { display: flex; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg-primary); z-index: 1; }
+  .audit-header h2 { font-size: 14px; font-weight: 700; color: var(--text-primary); margin: 0; }
+  .audit-close { margin-left: auto; padding: 4px 12px; font-size: 12px; background: none; border: 1px solid var(--border); border-radius: 4px; color: var(--text-muted); cursor: pointer; font-family: inherit; }
+  .audit-close:hover { color: var(--text-primary); }
+  .audit-section { padding: 16px 20px; border-bottom: 1px solid var(--border); }
+  .audit-section:last-child { border-bottom: none; }
+  .audit-section h3 { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
+  .audit-section .rule-card { margin-bottom: 6px; }
+
+  /* Print styles for PDF export */
+  @media print {
+    body { background: #fff !important; color: #111 !important; }
+    .controls, .export-bar, .audit-overlay, .activity-toggle { display: none !important; }
+    .viewer { overflow: visible !important; height: auto !important; }
+    .outcome-panel, .behavior-panel, .why-panel { border: 1px solid #ddd !important; margin-bottom: 8px; border-radius: 6px; }
+    .confidence-card { border: 1px solid #ddd !important; }
+    * { color: #111 !important; background: #fff !important; border-color: #ddd !important; }
+    .cc-value.good { color: #16a34a !important; }
+    .cc-value.warn { color: #ca8a04 !important; }
+    .cc-value.bad { color: #dc2626 !important; }
+  }
   .center-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--border-subtle); }
   .verdict { display: inline-block; padding: 1px 5px; border-radius: 3px; font-size: 9px; font-weight: 600; margin-left: 4px; }
   .verdict.ALLOW { background: var(--green-bg); color: var(--green); }
   .verdict.BLOCK { background: var(--red-bg); color: var(--red); }
   .verdict.PAUSE { background: var(--yellow-bg); color: var(--yellow); }
 
-  /* Chart */
-  .chart-container { position: relative; height: 100%; min-height: 150px; }
-  canvas { width: 100% !important; height: 100% !important; }
-
-  /* Simulation Trace */
+  /* Simulation Trace (audit only) */
   .trace-round { margin-bottom: 10px; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
   .trace-round-header { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--bg-surface); cursor: pointer; user-select: none; }
   .trace-round-header:hover { background: var(--bg-elevated); }
@@ -1781,6 +2468,239 @@ const INTERACTIVE_DASHBOARD_HTML = `<!DOCTYPE html>
   .integrate-endpoint { font-size: 11px; color: var(--text-secondary); margin-top: 6px; }
   .integrate-endpoint code { color: var(--green); background: var(--bg-surface); padding: 1px 5px; border-radius: 3px; }
 
+  /* Language tabs for integration code */
+  .lang-tabs { display: flex; gap: 2px; margin-bottom: 6px; }
+  .lang-tab { padding: 4px 10px; font-size: 10px; font-weight: 600; color: var(--text-muted); background: transparent; border: 1px solid transparent; border-bottom: none; border-radius: 4px 4px 0 0; cursor: pointer; font-family: inherit; transition: all 0.2s; }
+  .lang-tab:hover { color: var(--text-secondary); }
+  .lang-tab.active { color: var(--accent); background: var(--bg-surface); border-color: var(--bg-elevated); }
+  .lang-code-panel { display: none; }
+  .lang-code-panel.active { display: block; }
+  .integrate-hint { font-size: 10px; color: var(--text-muted); margin-top: 6px; line-height: 1.5; }
+  .integrate-hint strong { color: var(--text-secondary); }
+  .integrate-works { font-size: 10px; color: var(--text-faint); margin-top: 8px; line-height: 1.6; }
+  .integrate-works strong { color: var(--text-muted); }
+
+  /* Framework selector tabs */
+  .fw-tabs { display: flex; gap: 4px; margin-bottom: 10px; }
+  .fw-tab { flex: 1; padding: 8px 6px; font-size: 10px; font-weight: 700; color: var(--text-muted); background: var(--bg-surface); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; font-family: inherit; transition: all 0.2s; text-align: center; line-height: 1.3; }
+  .fw-tab:hover { border-color: var(--text-muted); color: var(--text-secondary); }
+  .fw-tab.active { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
+  .fw-tab .fw-sub { display: block; font-size: 8px; font-weight: 400; color: var(--text-faint); margin-top: 2px; }
+  .fw-tab.active .fw-sub { color: var(--accent); opacity: 0.7; }
+  .fw-panel { display: none; }
+  .fw-panel.active { display: block; }
+
+  /* Architecture callout */
+  .arch-callout { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; margin-bottom: 8px; }
+  .arch-callout .arch-title { font-size: 10px; font-weight: 700; color: var(--text-secondary); margin-bottom: 4px; }
+  .arch-flow { font-size: 10px; color: var(--text-muted); font-family: monospace; line-height: 1.6; }
+  .arch-flow .arch-yes { color: var(--green); }
+  .arch-flow .arch-no { color: var(--red); }
+  .arch-warn { font-size: 9px; color: var(--red); margin-top: 6px; padding: 4px 8px; background: #2d0606; border-radius: 4px; line-height: 1.5; }
+
+  /* Responsive / Adaptive Panels */
+  @media (max-width: 1200px) {
+    .layout { grid-template-columns: 300px 1fr; }
+    .controls { padding: 12px; }
+  }
+  @media (max-width: 960px) {
+    .layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: auto; min-height: 100vh; }
+    .controls { border-right: none; border-bottom: 1px solid var(--border); max-height: 50vh; overflow-y: auto; }
+    .viewer { min-height: 60vh; }
+    .viewer-top { grid-template-columns: 1fr; }
+    .viewer-mid { grid-template-columns: 1fr; }
+    .metric-grid { grid-template-columns: repeat(2, 1fr); }
+  }
+  @media (max-width: 640px) {
+    .header h1 { font-size: 14px; }
+    .header .sub { font-size: 10px; }
+    .controls { padding: 10px; }
+    .ctrl-section h3 { font-size: 10px; }
+    .confidence-grid { grid-template-columns: 1fr; }
+    .agent-name { width: 80px; }
+    .integrate-code { font-size: 9px; padding: 6px; }
+    .scenario-btn { padding: 6px; }
+  }
+
+  /* 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; }
@@ -1870,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">
@@ -1882,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 -->
-      <div class="ctrl-section">
-        <h3>Scenarios</h3>
-        <div id="scenario-list"></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>
@@ -1999,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>
@@ -2065,48 +2916,28 @@ const INTERACTIVE_DASHBOARD_HTML = `<!DOCTYPE html>
       </div>
     </div>
 
-    <!-- Saved variants -->
+    <!-- Saved Simulation Rules -->
     <div class="ctrl-section" style="margin-top:16px">
-      <h3>Saved Variants</h3>
-      <div id="variant-list"><div style="font-size:11px;color:#333">No saved variants yet</div></div>
+      <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>Integrate Your Simulator</h3>
-      <div class="integrate-section">
-        <h4>Connect in 3 lines</h4>
-        <div class="integrate-code"><span class="kw">from</span> neuroverse_bridge <span class="kw">import</span> evaluate
-
-verdict = evaluate(
-    actor=<span class="str">"agent_1"</span>,
-    action=<span class="str">"panic_sell"</span>,
-    world=<span class="str">"trading"</span>
-)
-
-<span class="kw">if</span> verdict[<span class="str">"decision"</span>] == <span class="str">"BLOCK"</span>:
-    action = <span class="str">"hold"</span>  <span class="comment"># adapted</span></div>
-        <div class="integrate-endpoint">
-          Endpoint: <code id="integrate-url">POST /api/evaluate</code>
-        </div>
-        <div style="font-size:10px;color:#444;margin-top:6px">
-          Fail-open · 500ms timeout · Stateless
-        </div>
-        <div style="margin-top:8px;font-size:10px">
-          <span style="display:inline-block;padding:2px 6px;background:#2d0606;color:#f87171;border-radius:3px;margin-right:3px">BLOCK</span> replaced
-          <span style="display:inline-block;padding:2px 6px;background:#2d2006;color:#fbbf24;border-radius:3px;margin-right:3px;margin-left:4px">MODIFY</span> constrained
-          <span style="display:inline-block;padding:2px 6px;background:#052e16;color:#4ade80;border-radius:3px;margin-left:4px">ALLOW</span> proceeds
-        </div>
-      </div>
+    <!-- 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">
@@ -2119,88 +2950,370 @@ verdict = evaluate(
     </div>
   </div>
 
-  <!-- RIGHT: VIEWER -->
+  <!-- RIGHT: OBSERVATION DECK -->
   <div class="viewer">
-    <div class="viewer-top">
-      <div class="vpanel">
-        <h2>Live Metrics</h2>
-        <div class="metric-grid">
-          <div class="metric-box"><div class="value" id="m-stability">--</div><div class="label">Stability</div></div>
-          <div class="metric-box"><div class="value" id="m-volatility">--</div><div class="label">Volatility</div></div>
-          <div class="metric-box"><div class="value" id="m-round">--</div><div class="label">Round</div></div>
-          <div class="metric-box"><div class="value" id="m-interventions">0</div><div class="label">Interventions</div></div>
+    <div class="deck-header">
+      <h2 class="deck-title">Observation Deck</h2>
+      <div class="deck-status" id="deck-status">Waiting for agents</div>
+    </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="vpanel">
-        <h2>World Rules Active</h2>
-        <div id="active-invariants"></div>
-      </div>
+      <div class="choice-round-label" id="choice-round-label" style="display:none">Round <span id="choice-round-num">1</span></div>
     </div>
 
-    <div class="viewer-mid">
-      <div class="vpanel" id="agents-panel">
-        <h2>Agent Impacts</h2>
-        <div id="agents">
-          <div class="empty-state"><div class="icon">&gt;_</div><div class="msg">Configure world and run simulation</div><div class="hint">Adjust rules on the left, then press Run</div></div>
-        </div>
+    <!-- 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="vpanel">
-        <h2>Impact Timeline</h2>
-        <div class="chart-container"><canvas id="chart"></canvas></div>
+      <div class="choice-stream" id="choice-stream">
+        <div class="stream-empty">Agent decisions will stream here in real time</div>
       </div>
     </div>
 
-    <!-- System Shift Card — the demo moment -->
-    <div id="system-shift" class="system-shift">
-      <div class="ss-header">
-        <div class="ss-icon"></div>
-        <span class="ss-title">System Shift</span>
+    <!-- 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>
+
+    <!-- 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>
+      <button class="export-btn" onclick="copyShareSummary()">Copy Summary</button>
+      <button class="export-btn audit-btn" onclick="openAudit()">Audit Trail</button>
+    </div>
+
+    <!-- Hidden elements for data tracking (not displayed) -->
+    <div style="display:none">
+      <span id="m-stability">--</span>
+      <span id="m-volatility">--</span>
+      <span id="m-round">--</span>
+      <span id="m-interventions">0</span>
+      <span id="trace-source"></span>
+      <div id="agents"></div>
+      <div id="active-invariants"></div>
+      <div id="log"></div>
+    </div>
+  </div>
+
+  <!-- LAYER 5: AUDIT OVERLAY (separate from dashboard) -->
+  <div class="audit-overlay" id="audit-overlay" onclick="if(event.target===this)closeAudit()">
+    <div class="audit-modal">
+      <div class="audit-header">
+        <h2>Audit Trail</h2>
+        <button class="audit-close" onclick="closeAudit()">Close</button>
       </div>
-      <div class="ss-rule" id="ss-rule"></div>
-      <div class="ss-scale" id="ss-scale"></div>
-      <div class="ss-flow">
-        <span>Rule</span><span class="ss-flow-arrow">→</span>
-        <span>Behavioral Shift</span><span class="ss-flow-arrow">→</span>
-        <span>Emergent Pattern</span><span class="ss-flow-arrow">→</span>
-        <span>System Outcome</span>
+      <div class="audit-section" id="audit-rules">
+        <h3>Active Rules</h3>
+        <div id="audit-rules-content"></div>
       </div>
-      <div class="ss-body">
-        <div class="ss-section">
-          <div class="ss-section-label">Behavioral Shift</div>
-          <div class="ss-adapt-rate" id="ss-adapt-rate"></div>
-          <div class="ss-adapt-desc" id="ss-adapt-desc"></div>
-          <div id="ss-shifts"></div>
+      <div class="audit-section" id="audit-verdicts">
+        <h3>Verdict Log</h3>
+        <div id="audit-verdicts-content"></div>
+      </div>
+      <div class="audit-section" id="audit-trace">
+        <h3>Detailed Trace</h3>
+        <div id="audit-trace-content"></div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- 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">
+
+      <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 class="ss-section">
-          <div class="ss-section-label">What Emerged</div>
-          <div id="ss-patterns"></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 class="ss-section">
-          <div class="ss-section-label">System Outcome</div>
-          <div id="ss-impacts"></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 class="ss-section">
-          <div class="ss-section-label">What Actually Happened</div>
-          <div class="ss-narrative" id="ss-narrative"></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>
-      <button class="ss-raw-toggle" id="ss-raw-toggle">
-        <span class="arrow">▶</span> View raw detail
-      </button>
-      <div class="ss-raw-detail" id="ss-raw-detail">
-        <div class="ss-raw-list" id="ss-raw-list"></div>
+
+      <div 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="viewer-bottom">
-      <h2 style="font-size:11px;color:#555;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px">Simulation Trace <span id="trace-source" style="color:#4ade80;font-weight:600;margin-left:6px"></span> <span style="color:#333;font-weight:400">— Events → Agents → Rules → Outcomes</span></h2>
-      <div id="log"></div>
+    <div 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 src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"><\/script>
 <script>
+// ============================================
+// OUTCOME INTELLIGENCE LAYER
+// ============================================
+
+function generateOutcome(stability, volatility, shiftData, worldThesis) {
+  var st = stability || 0;
+  var vol = volatility || 0;
+  var blockRatio = shiftData.total > 0 ? shiftData.blocks / shiftData.total : 0;
+  var thesis = worldThesis || '';
+
+  // Determine outcome direction + dominant behavior (state + what agents did)
+  var direction = '';
+  var behavior = '';
+  if (st > 0.7 && vol < 0.3) {
+    direction = 'stabilized';
+    behavior = 'agents shifted toward safer positions';
+  } else if (st > 0.7 && vol >= 0.3) {
+    direction = 'held under pressure';
+    behavior = 'agents maintained cautious strategies despite volatility';
+  } else if (st > 0.4 && vol < 0.5) {
+    direction = 'partially converged';
+    behavior = 'agents split between aggressive and conservative approaches';
+  } else if (st <= 0.4 && vol >= 0.5) {
+    direction = 'fragmented';
+    behavior = 'agents competed with conflicting strategies';
+  } else if (st <= 0.4) {
+    direction = 'remains uncertain';
+    behavior = 'agents failed to find a dominant strategy';
+  } else {
+    direction = 'showed mixed results';
+    behavior = 'agents oscillated between risk-taking and caution';
+  }
+
+  // Enrich with world context if available
+  if (thesis) {
+    var nouns = thesis.match(/\b(market|research|supply|trade|financial|climate|regulatory|investment|innovation|security)\b/i);
+    if (nouns) {
+      var subject = nouns[1].charAt(0).toUpperCase() + nouns[1].slice(1).toLowerCase();
+      return subject + ' ' + direction + ' as ' + behavior;
+    }
+  }
+
+  // Build behavior-enriched statement — always state + dominant behavior
+  if (blockRatio > 0.4 && st > 0.6) return 'System ' + direction + ' after agents abandoned high-risk strategies';
+  if (blockRatio > 0.2) return 'Outcome ' + direction + ' as ' + behavior;
+  if (shiftData.patterns && shiftData.patterns.length > 0) return 'Outcome ' + direction + ' — ' + behavior;
+  return 'Outcome ' + direction + ' as ' + behavior;
+}
+
+function computeConfidence(stability, volatility, interventions, total) {
+  var interventionRate = total > 0 ? interventions / total : 0;
+  var score = stability * 0.5 + (1 - volatility) * 0.3 + (1 - interventionRate) * 0.2;
+
+  var strength, evidence, risk, strengthCls, evidenceCls, riskCls;
+
+  if (score > 0.75) {
+    strength = 'Strong'; strengthCls = 'good';
+    evidence = 'Solid'; evidenceCls = 'good';
+    risk = 'Low'; riskCls = 'good';
+  } else if (score > 0.55) {
+    strength = 'Moderate'; strengthCls = 'warn';
+    evidence = stability > 0.6 ? 'Solid' : 'Mixed'; evidenceCls = stability > 0.6 ? 'good' : 'warn';
+    risk = volatility > 0.4 ? 'Elevated' : 'Moderate'; riskCls = volatility > 0.4 ? 'warn' : 'warn';
+  } else if (score > 0.35) {
+    strength = 'Moderate'; strengthCls = 'warn';
+    evidence = 'Mixed'; evidenceCls = 'warn';
+    risk = 'Elevated'; riskCls = 'bad';
+  } else {
+    strength = 'Weak'; strengthCls = 'bad';
+    evidence = 'Thin'; evidenceCls = 'bad';
+    risk = 'High'; riskCls = 'bad';
+  }
+
+  return { score: score, strength: strength, strengthCls: strengthCls, evidence: evidence, evidenceCls: evidenceCls, risk: risk, riskCls: riskCls };
+}
+
+function translateBehaviorNarrative(reaction, verdict) {
+  // Convert verdict+action into before → after narrative — no system words
+  var status = verdict ? verdict.status : 'ALLOW';
+  var action = reaction || 'acted';
+  if (status === 'BLOCK') {
+    return 'abandoned ' + action + ' and switched to a safer strategy';
+  }
+  if (status === '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';
+  }
+  return action;
+}
+
+function generateBehaviorShifts(shiftData, bLog) {
+  // Quantified behavioral shifts in human language
+  var sentences = [];
+  var total = shiftData.total || bLog.length || 0;
+  if (total === 0) return sentences;
+
+  // Group by what agents actually did — always anchor in before → after
+  var keys = Object.keys(shiftData.shifts || {}).sort(function(a, b) { return shiftData.shifts[b] - shiftData.shifts[a]; });
+  if (keys.length > 0 && total > 0) {
+    keys.slice(0, 3).forEach(function(k) {
+      var parts = k.split(': ');
+      var action = parts[1] || parts[0];
+      var count = shiftData.shifts[k];
+      var pct = Math.round((count / total) * 100);
+      // before → after: what they tried → what they did instead
+      if (parts[0] === 'BLOCK') {
+        sentences.push(pct + '% of agents (' + count + ') shifted from ' + action + ' to conservative strategies');
+      } else {
+        sentences.push(pct + '% of agents (' + count + ') reduced ' + action + ' after initial attempts failed');
+      }
+    });
+  }
+
+  // Fallback from behavioral log — still before → after
+  if (sentences.length === 0 && bLog.length > 0) {
+    var blocked = bLog.filter(function(e) { return e.status === 'BLOCK'; }).length;
+    var modified = bLog.filter(function(e) { return e.status === 'MODIFY' || e.status === 'PAUSE'; }).length;
+    var 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);
+      sentences.push(bPct + '% of agents (' + blocked + ') shifted from aggressive to conservative strategies');
+    }
+    if (modified > 0) {
+      var mPct = Math.round((modified / bLog.length) * 100);
+      sentences.push(mPct + '% of agents (' + modified + ') reduced position size after initial attempts failed');
+    }
+    if (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');
+    }
+  }
+
+  // Volatility insight — before → after framing
+  if (shiftData.governedVol < shiftData.baselineVol && shiftData.baselineVol > 0) {
+    var volDrop = Math.round((1 - shiftData.governedVol / shiftData.baselineVol) * 100);
+    sentences.push('Uncertainty dropped ' + volDrop + '% as agents moved from exploration to caution');
+  }
+
+  // Add emergent pattern insights
+  if (shiftData.patterns && shiftData.patterns.length > 0) {
+    shiftData.patterns.slice(0, 2).forEach(function(p) {
+      sentences.push(p);
+    });
+  }
+
+  return sentences;
+}
+
+function generateCausation(shiftData, bLog) {
+  // Pure causation — why behavior changed — no governance terminology
+  var causes = [];
+  var total = shiftData.total || bLog.length || 0;
+  if (total === 0) return causes;
+
+  var blockRatio = shiftData.blocks / total;
+
+  // No system words (feedback, evaluation, validation, review)
+  // Only agent experience (failed attempts, uncertainty, risk, delay)
+  if (blockRatio > 0.4) {
+    causes.push('Early aggressive attempts failed, forcing agents to rethink their strategy');
+  } else if (blockRatio > 0.1) {
+    causes.push('Some agents hit unexpected resistance and pulled back');
+  }
+
+  if (shiftData.governedVol < shiftData.baselineVol) {
+    causes.push('Uncertainty dropped as agents stopped experimenting and committed to safer positions');
+  }
+
+  if (shiftData.patterns && shiftData.patterns.length > 0) {
+    if (shiftData.patterns.some(function(p) { return p.toLowerCase().includes('hold') || p.toLowerCase().includes('caution'); })) {
+      causes.push('Risk became too visible — agents chose to wait rather than act');
+    }
+    if (shiftData.patterns.some(function(p) { return p.toLowerCase().includes('coordination') || p.toLowerCase().includes('coordinated'); })) {
+      causes.push('Agents independently converged on similar strategies under shared pressure');
+    }
+  }
+
+  // Detect adaptation pattern from behavior log
+  if (bLog.length >= 3) {
+    var recent = bLog.slice(-6);
+    var earlyBlocks = recent.slice(0, 3).filter(function(e) { return e.status === 'BLOCK'; }).length;
+    var lateAllows = recent.slice(-3).filter(function(e) { return e.status === 'ALLOW'; }).length;
+    if (earlyBlocks >= 2 && lateAllows >= 2) {
+      causes.push('Agents became more cautious after early attempts failed');
+    }
+  }
+
+  if (causes.length === 0) {
+    causes.push('Agents held steady — no major shifts in strategy throughout the simulation');
+  }
+
+  return causes;
+}
+
 // ============================================
 // STATE
 // ============================================
@@ -2210,88 +3323,129 @@ let narratives = {};
 let currentWorld = null;
 let injectedEvents = [];
 let totalInterventions = 0;
-let baselineImpacts = [];
-let governedImpacts = [];
-let chartLabels = [];
-let chart = null;
+let totalActions = 0;
 let narrativeEventsByRound = {}; // { round: [{ id, headline, severity }] }
 let ruleImpactTracker = {}; // { ruleId: { blocks: N, label: string } }
+let behaviorLog = []; // { agent, action, status, reason, ts }
+let latestStability = 0;
+let latestVolatility = 0;
+
+// 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');
+const outcomeContextEl = document.getElementById('outcome-context');
+const behaviorShiftsEl = document.getElementById('behavior-shifts');
+const activityTimelineEl = document.getElementById('activity-timeline');
+const activityToggleEl = document.getElementById('activity-toggle');
+const whyContentEl = document.getElementById('why-content');
+
+// Audit + Export
+function openAudit() {
+  // Populate audit content from current data
+  var rulesEl = document.getElementById('audit-rules-content');
+  rulesEl.innerHTML = activeInvEl.innerHTML || '<div style="font-size:11px;color:#666">No rules loaded</div>';
+
+  var verdictsEl = document.getElementById('audit-verdicts-content');
+  var vHtml = '';
+  behaviorLog.forEach(function(e) {
+    vHtml += '<div style="font-size:10px;padding:2px 0;display:flex;gap:8px;border-bottom:1px solid var(--border)">' +
+      '<span style="color:var(--blue);min-width:100px">' + e.agent + '</span>' +
+      '<span style="flex:1;color:var(--text-secondary)">' + e.action + '</span>' +
+      '<span style="font-size:9px;font-weight:600;padding:0 4px;border-radius:2px;' +
+        (e.status === 'BLOCK' ? 'background:var(--red-bg);color:var(--red)' : e.status === 'ALLOW' ? 'background:var(--green-bg);color:var(--green)' : 'background:var(--yellow-bg);color:var(--yellow)') + '">' + e.status + '</span>' +
+      (e.reason ? '<span style="font-size:9px;color:var(--text-faint)">' + e.reason + '</span>' : '') +
+    '</div>';
+  });
+  verdictsEl.innerHTML = vHtml || '<div style="font-size:11px;color:#666">No verdict data</div>';
+
+  var traceEl = document.getElementById('audit-trace-content');
+  traceEl.innerHTML = logEl.innerHTML || '<div style="font-size:11px;color:#666">No trace data</div>';
+
+  document.getElementById('audit-overlay').classList.add('open');
+}
+
+function closeAudit() {
+  document.getElementById('audit-overlay').classList.remove('open');
+}
+
+function exportPDF() {
+  window.print();
+}
+
+function exportCSV() {
+  if (behaviorLog.length === 0) { alert('No data to export yet'); return; }
+  var csv = 'Agent,Action,Behavior,Round\\n';
+  behaviorLog.forEach(function(e) {
+    var behavior = translateBehaviorNarrative(e.action, { status: e.status });
+    csv += '"' + e.agent + '","' + e.action + '","' + behavior + '","' + (e.round || '') + '"\\n';
+  });
+  var blob = new Blob([csv], { type: 'text/csv' });
+  var url = URL.createObjectURL(blob);
+  var a = document.createElement('a');
+  a.href = url;
+  a.download = 'simulation-behavior-' + new Date().toISOString().slice(0, 10) + '.csv';
+  a.click();
+  URL.revokeObjectURL(url);
+}
+
+function copyShareSummary() {
+  var text = 'OBSERVATION DECK SUMMARY\\n\\n';
+
+  // Drift verdict
+  var driftVerdict = document.getElementById('drift-verdict');
+  if (driftVerdict && driftVerdict.textContent) {
+    text += 'BEHAVIORAL DRIFT: ' + driftVerdict.textContent + '\\n\\n';
+  }
+
+  // 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();
 }
@@ -2300,114 +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;
+
+  currentThesis = thesis;
+  generateRulesBtn.disabled = true;
+  generateRulesBtn.textContent = 'Generating...';
+  ruleGenStatusEl.textContent = '';
 
-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();
+  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 SELECT
+// WORLD FILE TOGGLE
 // ============================================
-worldSelect.addEventListener('change', () => selectWorld(worldSelect.value));
-roundsSlider.addEventListener('input', () => { roundsVal.textContent = roundsSlider.value; });
+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;';
+  }
+});
 
 // ============================================
-// RUN SIMULATION
+// BRIDGE CONNECTION
+// ============================================
+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 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;
-  baselineImpacts = [];
-  governedImpacts = [];
-  chartLabels = [];
-  if (chart) { chart.destroy(); chart = null; }
+  totalActions = 0;
   agentsEl.innerHTML = '';
   logEl.innerHTML = '';
   document.getElementById('m-stability').textContent = '--';
@@ -2415,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;
@@ -2427,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';
   }
 });
 
@@ -2475,28 +3896,7 @@ function connectSSE() {
 }
 
 function initChart() {
-  if (typeof Chart === 'undefined') return;
-  const ctx = document.getElementById('chart');
-  chart = new Chart(ctx, {
-    type: 'line',
-    data: {
-      labels: chartLabels,
-      datasets: [
-        { label: 'Baseline', data: baselineImpacts, borderColor: '#ef4444', backgroundColor: 'rgba(239,68,68,0.1)', fill: true, tension: 0.3, pointRadius: 3 },
-        { label: 'Governed', data: governedImpacts, borderColor: '#4ade80', backgroundColor: 'rgba(74,222,128,0.1)', fill: true, tension: 0.3, pointRadius: 3 },
-      ]
-    },
-    options: {
-      animation: { duration: 400 },
-      responsive: true,
-      maintainAspectRatio: false,
-      plugins: { legend: { labels: { color: getComputedStyle(document.body).getPropertyValue('--text-muted').trim() || '#888', font: { family: 'monospace', size: 10 } } } },
-      scales: {
-        x: { ticks: { color: getComputedStyle(document.body).getPropertyValue('--text-muted').trim() || '#888' }, grid: { color: getComputedStyle(document.body).getPropertyValue('--border').trim() || '#2a2a2a' } },
-        y: { ticks: { color: getComputedStyle(document.body).getPropertyValue('--text-muted').trim() || '#888' }, grid: { color: getComputedStyle(document.body).getPropertyValue('--border').trim() || '#2a2a2a' }, min: -1, max: 1 }
-      }
-    }
-  });
+  // Chart removed — no longer needed in outcome-first view
 }
 
 function addLog(msg, cls) {
@@ -2607,23 +4007,342 @@ function renderAgents(reactions) {
   agentsEl.innerHTML = html;
 }
 
+// ============================================
+// 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) {
+    var status = r.verdict ? r.verdict.status : 'ALLOW';
+    var reason = r.verdict ? (r.verdict.reason || '') : '';
+    behaviorLog.push({
+      agent: r.stakeholder_id,
+      action: r.reaction || 'acted',
+      status: status,
+      reason: reason,
+      round: round || 0,
+      ts: Date.now(),
+    });
+  });
+}
+
+// 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);
+}
+
+// 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';
+}
+
+// ── 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;
+}
+
+// ── 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() {
+  // Observation Deck updates are driven by renderChoiceBubbles/renderDecisionFlow
+  // called directly from handleEvent — this function exists for compatibility
+}
+
 function handleEvent(event) {
   if (event.type === 'meta') {
     statusEl.className = 'status live';
     statusEl.textContent = 'LIVE';
     // Show simulation source
-    const src = event.source || 'nv-sim';
-    if (src !== 'nv-sim') {
+    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) {
@@ -2689,44 +4408,78 @@ function handleEvent(event) {
         '<div class="rule-impact" data-impact-id="' + g.id + '"></div>' +
       '</div>';
     }).join('');
-    initChart();
   }
 
   if (event.type === 'round') {
-    if (event.phase === 'baseline') {
-      chartLabels.push('R' + event.round);
-      baselineImpacts.push(event.avgImpact);
-    } else {
-      governedImpacts.push(event.avgImpact);
-    }
-    if (chart) chart.update();
+    const isBridge = event.reactions && event.reactions[0] && event.reactions[0].trigger === 'bridge';
 
-    renderAgents(event.reactions);
-    document.getElementById('m-round').textContent = event.round + '/' + event.totalRounds;
-    document.getElementById('m-volatility').textContent = (event.maxVolatility * 100).toFixed(0) + '%';
-    document.getElementById('m-volatility').parentElement.className = 'metric-box ' + (event.maxVolatility > 0.6 ? 'bad' : event.maxVolatility > 0.4 ? 'warn' : 'good');
+    // Record behavior data (no governance display)
+    recordBehavior(event.reactions, event.round);
+    renderAgents(event.reactions); // hidden, kept for audit
 
+    // Track totals
+    totalActions += event.reactions ? event.reactions.length : 0;
     totalInterventions += event.interventionCount;
+    latestVolatility = event.maxVolatility || 0;
+
+    // Update hidden data elements for audit
+    if (isBridge) {
+      document.getElementById('m-round').textContent = event.round + ' evals';
+    } else {
+      document.getElementById('m-round').textContent = event.round + '/' + event.totalRounds;
+    }
+    document.getElementById('m-volatility').textContent = (event.maxVolatility * 100).toFixed(0) + '%';
     document.getElementById('m-interventions').textContent = totalInterventions;
 
-    // Track system shifts for the card
+    // Track system shifts (data collection)
     trackShift(event);
 
-    // Render structured trace entry instead of flat log line
+    // ── 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);
   }
 
+  // Bridge metrics — updates stability from external /api/evaluate calls
+  if (event.type === 'bridge_metrics') {
+    latestStability = event.stability;
+    document.getElementById('m-stability').textContent = (event.stability * 100).toFixed(0) + '%';
+    updateAllPanels();
+  }
+
   if (event.type === 'complete') {
     statusEl.className = 'status complete';
     statusEl.textContent = 'COMPLETE';
     const r = event.result;
     if (r.governed) {
+      latestStability = r.governed.metrics.stabilityScore;
+      latestVolatility = r.governed.metrics.maxVolatility || latestVolatility;
       document.getElementById('m-stability').textContent = (r.governed.metrics.stabilityScore * 100).toFixed(0) + '%';
-      document.getElementById('m-stability').parentElement.className = 'metric-box ' + (r.governed.metrics.stabilityScore > 0.7 ? 'good' : 'warn');
-      addLog('Complete. Governance effectiveness: ' + (r.comparison.governanceEffectiveness * 100).toFixed(0) + '%');
+      addLog('Simulation complete');
       renderSystemShift(r);
       renderRuleImpacts(r);
       renderEnforcementClassification(r.enforcementClassification || []);
+
+      // 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,
@@ -2735,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('');
   }
 }
 
@@ -2805,20 +4639,37 @@ const ssImpactsEl = document.getElementById('ss-impacts');
 const ssNarrativeEl = document.getElementById('ss-narrative');
 
 // Raw detail toggle
-document.getElementById('ss-raw-toggle').addEventListener('click', function() {
-  this.classList.toggle('open');
-  document.getElementById('ss-raw-detail').classList.toggle('open');
-});
+var ssRawToggle = document.getElementById('ss-raw-toggle');
+if (ssRawToggle) {
+  ssRawToggle.addEventListener('click', function() {
+    this.classList.toggle('open');
+    document.getElementById('ss-raw-detail').classList.toggle('open');
+  });
+}
 
 let shiftTracker = { blocks: 0, total: 0, shifts: {}, patterns: [], baselineVol: 0, governedVol: 0, narrative: '', rawGoverned: [] };
 
 function resetShiftTracker() {
   shiftTracker = { blocks: 0, total: 0, shifts: {}, patterns: [], baselineVol: 0, governedVol: 0, narrative: '', rawGoverned: [] };
-  ssCard.classList.remove('visible');
+  if (ssCard) ssCard.classList.remove('visible');
   var rawToggle = document.getElementById('ss-raw-toggle');
   var rawDetail = document.getElementById('ss-raw-detail');
   if (rawToggle) rawToggle.classList.remove('open');
   if (rawDetail) rawDetail.classList.remove('open');
+  // Reset behavior tracking
+  behaviorLog = [];
+  totalActions = 0;
+  totalInterventions = 0;
+  latestStability = 0;
+  latestVolatility = 0;
+  // Reset visible panels
+  if (outcomeStatementEl) outcomeStatementEl.innerHTML = '<span class="outcome-empty">Run a simulation or connect an agent to see outcomes</span>';
+  if (confidenceGridEl) confidenceGridEl.style.display = 'none';
+  if (outcomeContextEl) outcomeContextEl.textContent = '';
+  if (behaviorShiftsEl) behaviorShiftsEl.innerHTML = '<div class="behavior-empty">Waiting for agent actions</div>';
+  if (activityToggleEl) activityToggleEl.style.display = 'none';
+  if (activityTimelineEl) { activityTimelineEl.innerHTML = ''; activityTimelineEl.classList.remove('open'); }
+  if (whyContentEl) whyContentEl.innerHTML = '<div class="why-empty">Causation analysis appears after agent actions are evaluated</div>';
 }
 
 function trackShift(event) {
@@ -2861,6 +4712,7 @@ function trackShift(event) {
 
 function renderSystemShift(result) {
   if (shiftTracker.blocks === 0) return;
+  if (!ssCard) return; // System shift card removed from visible UI
 
   var adaptRate = shiftTracker.total > 0 ? Math.round((shiftTracker.blocks / shiftTracker.total) * 100) : 0;
 
@@ -2992,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;
@@ -3006,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,
   };
 
@@ -3045,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('');
@@ -3087,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, '');
 }
 
 // ============================================
@@ -3151,18 +5021,6 @@ function applyTheme(theme) {
     themeToggleBtn.textContent = 'Light Mode';
   }
   localStorage.setItem('nv-theme', theme);
-  // Update chart colors if chart exists
-  if (chart && chart.options) {
-    const gridColor = theme === 'light' ? '#d4d4d4' : '#2a2a2a';
-    const tickColor = theme === 'light' ? '#666' : '#888';
-    const legendColor = theme === 'light' ? '#444' : '#888';
-    chart.options.scales.x.ticks.color = tickColor;
-    chart.options.scales.x.grid.color = gridColor;
-    chart.options.scales.y.ticks.color = tickColor;
-    chart.options.scales.y.grid.color = gridColor;
-    chart.options.plugins.legend.labels.color = legendColor;
-    chart.update();
-  }
 }
 themeToggleBtn.addEventListener('click', () => {
   const current = document.body.classList.contains('light') ? 'light' : 'dark';
@@ -3173,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');
@@ -3304,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;
 
@@ -3366,176 +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 : 'trading' }),
-    });
-    const data = await resp.json();
-
-    if (data.error) {
-      ruleStatusEl.textContent = data.error;
-      ruleStatusEl.className = 'rule-status error';
-      parsedRulesEl.innerHTML = '';
-      parsedRuleData = [];
-    } else {
-      parsedRuleData = data.rules || [];
-      parsedRulesEl.innerHTML = parsedRuleData.map((r, i) => {
-        const enfType = r.enforcement || 'block';
-        const iconMap = { block: '&#x1F534;', allow: '&#x1F7E2;', modify: '&#x1F535;', warn: '&#x1F7E1;', pause: '&#x1F7E1;' };
-        const labelMap = { block: 'Gate', allow: 'Invariant', modify: 'Modifier', warn: 'Warning', pause: 'Warning' };
-        const effectMap = { block: 'Blocks actions', allow: 'Always enforced', modify: 'Adjusts behavior', warn: 'Signals risk', pause: 'Signals risk' };
-        const icon = iconMap[enfType] || '&#x1F7E2;';
-        const label = labelMap[enfType] || 'Rule';
-        const effect = effectMap[enfType] || 'Active';
-        return '<div class="parsed-rule enforcement-' + enfType + '">' +
-          '<div class="pr-header"><span class="pr-icon">' + icon + '</span><span class="pr-action">' + label + '</span></div>' +
-          '<div class="pr-desc">' + r.description + '</div>' +
-          '<div class="pr-patterns">' + effect + ' &bull; Matches: ' + r.intent_patterns.join(', ') + '</div>' +
-          '</div>';
-      }).join('');
-
-      if (parsedRuleData.length > 0) {
-        const btnLabel = currentWorldSource === 'custom' ? 'Generate World with ' + parsedRuleData.length + ' Rule' + (parsedRuleData.length > 1 ? 's' : '') : 'Apply ' + parsedRuleData.length + ' Rule' + (parsedRuleData.length > 1 ? 's' : '') + ' to Simulation';
-        parsedRulesEl.innerHTML += '<button class="btn btn-apply-rules" id="apply-rules-btn">' + btnLabel + '</button>';
-        document.getElementById('apply-rules-btn').addEventListener('click', async () => {
-          try {
-            // If in custom rules mode, use base world if selected
-            let worldId = currentWorld ? currentWorld.id : 'trading';
-            if (currentWorldSource === 'custom') {
-              const baseWorld = document.getElementById('custom-base-world').value;
-              if (baseWorld) worldId = baseWorld;
-            }
-
-            const applyResp = await fetch('/api/apply-rules', {
-              method: 'POST',
-              headers: { 'Content-Type': 'application/json' },
-              body: JSON.stringify({ rules: parsedRuleData, worldId }),
-            });
-            const applyData = await applyResp.json();
-            if (applyData.status === 'applied') {
-              ruleStatusEl.textContent = applyData.applied + ' rule(s) active. Run a simulation to see the effect.';
-              ruleStatusEl.className = 'rule-status success';
-
-              // Update right panel invariants with custom rules
-              const customName = document.getElementById('custom-world-name');
-              const worldName = (customName && customName.value) ? customName.value : 'Custom World';
-              const customThesis = document.getElementById('custom-world-thesis');
-              const thesis = (customThesis && customThesis.value) ? customThesis.value : 'User-defined governance rules';
-
-              // Show rules in active invariants panel
-              activeInvEl.innerHTML = parsedRuleData.map(r => {
-                const enfType = r.enforcement || 'block';
-                const colorMap = { block: 'var(--red)', allow: 'var(--green)', modify: 'var(--blue)', warn: 'var(--yellow)', pause: 'var(--yellow)' };
-                const color = colorMap[enfType] || 'var(--text-secondary)';
-                return '<div class="inv-item" style="color:' + color + '">[' + r.id + '] ' + r.description + '</div>';
-              }).join('');
-
-              // In custom mode, set a custom world reference
-              if (currentWorldSource === 'custom') {
-                const baseWorld = document.getElementById('custom-base-world').value;
-                if (baseWorld) {
-                  selectWorld(baseWorld);
-                } else {
-                  currentWorld = { id: 'custom-world', title: worldName, thesis, stateVariables: [], invariants: [], gates: [] };
-                }
-                document.getElementById('world-thesis').textContent = '"' + thesis + '"';
-              }
-            }
-          } catch (err) {
-            ruleStatusEl.textContent = 'Error applying rules: ' + err.message;
-            ruleStatusEl.className = 'rule-status error';
-          }
-        });
-        ruleStatusEl.textContent = 'Parsed ' + parsedRuleData.length + ' rule(s). Review and click ' + (currentWorldSource === 'custom' ? 'Generate.' : 'Apply.');
-        ruleStatusEl.className = 'rule-status success';
-      }
-    }
-  } catch (err) {
-    ruleStatusEl.textContent = 'Error: ' + err.message;
-    ruleStatusEl.className = 'rule-status error';
-  }
-
-  parseRulesBtn.disabled = false;
-  parseRulesBtn.textContent = 'Parse Rules';
-});
-
 // ============================================
 // SESSION TRACKING
 // ============================================
@@ -3551,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 ? '...' : '')
@@ -3612,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
 // ============================================