@neuroverseos/nv-sim 0.1.7 → 0.1.9

package/dist/engine/liveVisualizer.js

@@ -180,12 +180,30 @@ 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 = [];
+    // ── Bridge Metrics Tracker ──
+    // Computes meaningful live metrics from external /api/evaluate calls
+    let bridgeEvalCount = 0;
+    let bridgeBlockCount = 0;
+    let bridgeModifyCount = 0;
+    function computeBridgeMetrics(decision) {
+        bridgeEvalCount++;
+        if (decision === "BLOCK")
+            bridgeBlockCount++;
+        if (decision === "MODIFY")
+            bridgeModifyCount++;
+        const totalInterventions = bridgeBlockCount + bridgeModifyCount;
+        // Stability = ratio of non-blocked actions (higher = more stable)
+        const stability = bridgeEvalCount > 0 ? (bridgeEvalCount - bridgeBlockCount) / bridgeEvalCount : 1;
+        // Volatility = ratio of interventions (blocks + modifies) — more interventions = more volatile
+        const volatility = bridgeEvalCount > 0 ? totalInterventions / bridgeEvalCount : 0;
+        return { stability, volatility, totalInterventions, evalCount: bridgeEvalCount };
+    }
     function synthesizeSessionReport() {
         // Gather all sessions to report on (history + current if it has data)
         const allSessions = [
@@ -499,7 +517,7 @@ function startInteractiveServer(port, onReady) {
         }
         if (req.url === "/api/worlds" && req.method === "GET") {
             const { resolveWorld } = await Promise.resolve().then(() => __importStar(require("./worldComparison")));
-            const worldIds = ["trading", "strait_of_hormuz", "gas_price_spike", "ai_regulation_crisis"];
+            const worldIds = ["social_simulation", "science_research"];
             const worlds = worldIds.map(id => {
                 try {
                     const r = resolveWorld(id);
@@ -602,7 +620,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")));
@@ -834,25 +852,35 @@ function startInteractiveServer(port, onReady) {
                 const decision = verdict.status === "BLOCK" ? "BLOCK"
                     : verdict.status === "PAUSE" ? "MODIFY"
                         : "ALLOW";
+                // Compute live metrics from cumulative bridge evaluations
+                const bridgeMetrics = computeBridgeMetrics(decision);
                 // Broadcast governance event to connected SSE clients
                 broadcast({
                     type: "round",
-                    round: 0,
+                    round: bridgeMetrics.evalCount,
                     totalRounds: 0,
                     phase: "governed",
                     reactions: [{
                             stakeholder_id: payload.actor,
                             reaction: payload.action,
-                            impact: 0,
+                            impact: decision === "BLOCK" ? -0.8 : decision === "MODIFY" ? -0.3 : 0.1,
                             confidence: 0.5,
                             trigger: "bridge",
                             verdict: { status: verdict.status, reason: verdict.reason, ruleId: verdict.ruleId },
                         }],
-                    avgImpact: 0,
-                    maxVolatility: 0,
+                    avgImpact: decision === "BLOCK" ? -0.8 : decision === "MODIFY" ? -0.3 : 0.1,
+                    maxVolatility: bridgeMetrics.volatility,
                     dynamics: [],
                     interventionCount: decision !== "ALLOW" ? 1 : 0,
                 });
+                // Also broadcast a stability update so the metric refreshes live
+                broadcast({
+                    type: "bridge_metrics",
+                    stability: bridgeMetrics.stability,
+                    volatility: bridgeMetrics.volatility,
+                    evalCount: bridgeMetrics.evalCount,
+                    totalInterventions: bridgeMetrics.totalInterventions,
+                });
                 // Record in session
                 currentSession.evaluations.push({
                     actor: payload.actor, action: payload.action,
@@ -923,6 +951,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 {
@@ -1050,7 +1131,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);
@@ -1243,6 +1324,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,
@@ -1321,7 +1406,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 => {
@@ -1636,42 +1721,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 +1904,60 @@ 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; }
+  }
+
   /* 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; }
@@ -1928,10 +2105,10 @@ const INTERACTIVE_DASHBOARD_HTML = `<!DOCTYPE html>
         <div id="state-vars"></div>
       </div>
 
-      <!-- Scenario presets -->
+      <!-- Scenario presets (collapsed by default) -->
       <div class="ctrl-section">
-        <h3>Scenarios</h3>
-        <div id="scenario-list"></div>
+        <h3 style="cursor:pointer" onclick="var el=document.getElementById('scenario-list');var a=this.querySelector('.arrow');if(el.style.display==='none'){el.style.display='';a.textContent='▼'}else{el.style.display='none';a.textContent='▶'}"><span class="arrow" style="font-size:9px;margin-right:4px">▶</span>Scenarios</h3>
+        <div id="scenario-list" style="display:none"></div>
       </div>
     </div>
 
@@ -2067,37 +2244,207 @@ const INTERACTIVE_DASHBOARD_HTML = `<!DOCTYPE html>
 
     <!-- Saved variants -->
     <div class="ctrl-section" style="margin-top:16px">
-      <h3>Saved Variants</h3>
+      <h3>Your Worlds</h3>
       <div id="variant-list"><div style="font-size:11px;color:#333">No saved variants yet</div></div>
     </div>
 
     <!-- Integration Quick-Start -->
     <div class="ctrl-section" style="margin-top:16px">
-      <h3>Integrate Your Simulator</h3>
-      <div class="integrate-section">
-        <h4>Connect in 3 lines</h4>
-        <div class="integrate-code"><span class="kw">from</span> neuroverse_bridge <span class="kw">import</span> evaluate
+      <h3>Govern Any Agent System</h3>
+
+      <div class="arch-callout">
+        <div class="arch-title">Pre-Execution Enforcement</div>
+        <div class="arch-flow">
+          Agent decides → <span class="arch-yes">Governance evaluates</span> → <span class="arch-yes">THEN executes</span>
+        </div>
+        <div class="arch-warn">Governance MUST happen BEFORE execution. Post-execution = audit only, not control.</div>
+      </div>
+
+      <div class="fw-tabs">
+        <button class="fw-tab active" onclick="switchFw('generic',this)">Generic<span class="fw-sub">any agent</span></button>
+        <button class="fw-tab" onclick="switchFw('scienceclaw',this)">ScienceClaw<span class="fw-sub">research</span></button>
+        <button class="fw-tab" onclick="switchFw('mirofish',this)">MiroFish<span class="fw-sub">OASIS</span></button>
+        <button class="fw-tab" onclick="switchFw('langchain',this)">LangChain<span class="fw-sub">tools</span></button>
+      </div>
 
+      <div class="fw-panel active" id="fw-generic">
+        <div class="integrate-section">
+          <h4>Insert before your agent executes</h4>
+          <div class="lang-tabs">
+            <button class="lang-tab active" onclick="switchLang('generic-py',this)">Python</button>
+            <button class="lang-tab" onclick="switchLang('generic-js',this)">JavaScript</button>
+            <button class="lang-tab" onclick="switchLang('generic-curl',this)">cURL</button>
+          </div>
+          <div class="lang-code-panel active" id="lang-generic-py"><div class="integrate-code"><span class="kw">import</span> requests
+
+<span class="kw">for</span> agent <span class="kw">in</span> agents:
+    raw_action = agent.decide()
+
+    <span class="kw">try</span>:
+        verdict = requests.post(
+            <span class="str">"http://localhost:3456/api/evaluate"</span>,
+            json={<span class="str">"actor"</span>: agent.id,
+                  <span class="str">"action"</span>: raw_action,
+                  <span class="str">"world"</span>: <span class="str">"trading"</span>},
+            timeout=0.5
+        ).json()
+    <span class="kw">except</span>:
+        verdict = {<span class="str">"decision"</span>: <span class="str">"ALLOW"</span>}
+
+    <span class="kw">if</span> verdict[<span class="str">"decision"</span>] == <span class="str">"BLOCK"</span>:
+        <span class="kw">continue</span>  <span class="comment"># skip this action entirely</span>
+    <span class="kw">elif</span> verdict[<span class="str">"decision"</span>] == <span class="str">"MODIFY"</span>:
+        raw_action = verdict[<span class="str">"modified_action"</span>]
+
+    environment.apply(agent, raw_action)</div></div>
+          <div class="lang-code-panel" id="lang-generic-js"><div class="integrate-code"><span class="kw">for</span> (<span class="kw">const</span> agent <span class="kw">of</span> agents) {
+  <span class="kw">let</span> action = agent.decide()
+
+  <span class="kw">const</span> verdict = <span class="kw">await</span> fetch(
+    <span class="str">"http://localhost:3456/api/evaluate"</span>, {
+    method: <span class="str">"POST"</span>,
+    headers: {<span class="str">"Content-Type"</span>: <span class="str">"application/json"</span>},
+    body: JSON.stringify({
+      actor: agent.id, action, world: <span class="str">"trading"</span>
+    })
+  }).then(r => r.json())
+
+  <span class="kw">if</span> (verdict.decision === <span class="str">"BLOCK"</span>) <span class="kw">continue</span>
+  <span class="kw">if</span> (verdict.decision === <span class="str">"MODIFY"</span>)
+    action = verdict.modified_action
+
+  environment.apply(agent, action)
+}</div></div>
+          <div class="lang-code-panel" id="lang-generic-curl"><div class="integrate-code">curl -X POST http://localhost:3456/api/evaluate \
+  -H <span class="str">"Content-Type: application/json"</span> \
+  -d <span class="str">'{"actor":"agent_1","action":"panic_sell"}'</span>
+
+<span class="comment"># Returns: {"decision":"BLOCK","reason":"..."}</span>
+<span class="comment"># Watch it appear in the dashboard →</span></div></div>
+        </div>
+      </div>
+
+      <div class="fw-panel" id="fw-scienceclaw">
+        <div class="integrate-section">
+          <h4>Detect action type, then evaluate</h4>
+          <div style="font-size:10px;color:var(--yellow);margin-bottom:6px;line-height:1.4">
+            Don't hardcode <code style="background:var(--bg-surface);padding:1px 4px;border-radius:2px">action = "post"</code> — detect intent from agent output so rules can differentiate.
+          </div>
+          <div class="integrate-code"><span class="kw">from</span> neuroverse_bridge <span class="kw">import</span> evaluate, detect_action_type
+
+<span class="comment"># Step 1: Agent generates content</span>
+results = generator.run_pubmed_search(topic)
+output = generator.generate_content(topic, results)
+
+<span class="comment"># Step 2: Detect what kind of action this is</span>
+action = detect_action_type(output[<span class="str">"content"</span>])
+<span class="comment"># → "analyze", "publish", "cite", "recommend"</span>
+
+<span class="comment"># Step 3: Evaluate BEFORE executing</span>
 verdict = evaluate(
-    actor=<span class="str">"agent_1"</span>,
-    action=<span class="str">"panic_sell"</span>,
-    world=<span class="str">"trading"</span>
+    actor=<span class="str">"Harry"</span>,
+    action=action,
+    world=<span class="str">"research"</span>
 )
 
-<span class="kw">if</span> verdict[<span class="str">"decision"</span>] == <span class="str">"BLOCK"</span>:
-    action = <span class="str">"hold"</span>  <span class="comment"># adapted</span></div>
-        <div class="integrate-endpoint">
-          Endpoint: <code id="integrate-url">POST /api/evaluate</code>
+<span class="comment"># Step 4: Only execute if allowed</span>
+<span class="kw">if</span> verdict[<span class="str">"decision"</span>] != <span class="str">"BLOCK"</span>:
+    generator.post_to_infinite(output)</div>
+          <div style="font-size:9px;color:var(--text-muted);margin-top:6px;line-height:1.5">
+            See <code style="background:var(--bg-surface);padding:1px 4px;border-radius:2px">bridge/scienceclaw_governed.py</code> for full example
+          </div>
         </div>
-        <div style="font-size:10px;color:#444;margin-top:6px">
-          Fail-open · 500ms timeout · Stateless
+      </div>
+
+      <div class="fw-panel" id="fw-mirofish">
+        <div class="integrate-section">
+          <h4>Replace the dict comprehension</h4>
+          <div style="font-size:10px;color:var(--red);margin-bottom:6px;line-height:1.4">
+            MiroFish executes inside <code style="background:var(--bg-surface);padding:1px 4px;border-radius:2px">env.step()</code> — governance MUST happen before that call.
+          </div>
+          <div class="integrate-code" style="margin-bottom:6px;border-left:3px solid var(--red);opacity:0.6"><span class="comment"># ❌ BEFORE (opaque — no governance possible)</span>
+actions = {agent: LLMAction()
+           <span class="kw">for</span> _, agent <span class="kw">in</span> active_agents}
+<span class="kw">await</span> result.env.step(actions)</div>
+          <div class="integrate-code" style="border-left:3px solid var(--green)"><span class="comment"># ✅ AFTER (expand the loop, insert governance)</span>
+<span class="kw">import</span> requests
+
+actions = {}
+<span class="kw">for</span> _, agent <span class="kw">in</span> active_agents:
+    raw_action = LLMAction()
+
+    <span class="kw">try</span>:
+        verdict = requests.post(
+            <span class="str">"http://localhost:3456/api/evaluate"</span>,
+            json={
+                <span class="str">"actor"</span>: getattr(agent, <span class="str">"id"</span>, str(agent)),
+                <span class="str">"action"</span>: str(raw_action),
+                <span class="str">"world"</span>: <span class="str">"social_media"</span>
+            },
+            timeout=0.5
+        ).json()
+    <span class="kw">except</span>:
+        verdict = {<span class="str">"decision"</span>: <span class="str">"ALLOW"</span>}
+
+    <span class="kw">if</span> verdict[<span class="str">"decision"</span>] == <span class="str">"BLOCK"</span>:
+        <span class="kw">continue</span>
+    <span class="kw">elif</span> verdict[<span class="str">"decision"</span>] == <span class="str">"MODIFY"</span>:
+        raw_action = verdict.get(<span class="str">"modified_action"</span>, raw_action)
+
+    actions[agent] = raw_action
+
+<span class="kw">await</span> result.env.step(actions)</div>
+          <div style="font-size:9px;color:var(--text-muted);margin-top:6px;line-height:1.5">
+            Apply to all 3 scripts: <code style="background:var(--bg-surface);padding:1px 4px;border-radius:2px">run_twitter_simulation.py</code>
+            <code style="background:var(--bg-surface);padding:1px 4px;border-radius:2px">run_reddit_simulation.py</code>
+            <code style="background:var(--bg-surface);padding:1px 4px;border-radius:2px">run_parallel_simulation.py</code>
+          </div>
+        </div>
+      </div>
+
+      <div class="fw-panel" id="fw-langchain">
+        <div class="integrate-section">
+          <h4>Wrap your tool or agent executor</h4>
+          <div class="integrate-code"><span class="kw">import</span> requests
+<span class="kw">from</span> langchain.tools <span class="kw">import</span> tool
+
+<span class="kw">def</span> governed(fn, world=<span class="str">"trading"</span>):
+    <span class="kw">def</span> wrapper(*args, **kwargs):
+        action = fn.__name__
+        <span class="kw">try</span>:
+            v = requests.post(
+                <span class="str">"http://localhost:3456/api/evaluate"</span>,
+                json={<span class="str">"actor"</span>: <span class="str">"langchain"</span>,
+                      <span class="str">"action"</span>: action,
+                      <span class="str">"world"</span>: world},
+                timeout=0.5
+            ).json()
+        <span class="kw">except</span>:
+            v = {<span class="str">"decision"</span>: <span class="str">"ALLOW"</span>}
+        <span class="kw">if</span> v[<span class="str">"decision"</span>] == <span class="str">"BLOCK"</span>:
+            <span class="kw">return</span> f<span class="str">"Blocked: {v['reason']}"</span>
+        <span class="kw">return</span> fn(*args, **kwargs)
+    <span class="kw">return</span> wrapper
+
+<span class="comment"># Usage: wrap any tool</span>
+@tool
+@governed
+<span class="kw">def</span> execute_trade(ticker, amount):
+    ...</div>
         </div>
-        <div style="margin-top:8px;font-size:10px">
-          <span style="display:inline-block;padding:2px 6px;background:#2d0606;color:#f87171;border-radius:3px;margin-right:3px">BLOCK</span> replaced
-          <span style="display:inline-block;padding:2px 6px;background:#2d2006;color:#fbbf24;border-radius:3px;margin-right:3px;margin-left:4px">MODIFY</span> constrained
+      </div>
+
+      <div style="margin-top:8px">
+        <div class="integrate-hint">
+          <span style="display:inline-block;padding:2px 6px;background:#2d0606;color:#f87171;border-radius:3px;margin-right:3px">BLOCK</span> stopped
+          <span style="display:inline-block;padding:2px 6px;background:#2d2006;color:#fbbf24;border-radius:3px;margin-right:3px;margin-left:4px">MODIFY</span> adjusted
           <span style="display:inline-block;padding:2px 6px;background:#052e16;color:#4ade80;border-radius:3px;margin-left:4px">ALLOW</span> proceeds
         </div>
+        <div style="font-size:10px;color:var(--text-faint);margin-top:8px;border-top:1px solid var(--border);padding-top:6px">
+          The world file controls everything. Same rules govern simulated and live systems.
+        </div>
       </div>
+    </div>
 
       <!-- Session Report Panel -->
       <div class="ctrl-section" id="session-panel">
@@ -2121,86 +2468,308 @@ verdict = evaluate(
 
   <!-- RIGHT: VIEWER -->
   <div class="viewer">
-    <div class="viewer-top">
-      <div class="vpanel">
-        <h2>Live Metrics</h2>
-        <div class="metric-grid">
-          <div class="metric-box"><div class="value" id="m-stability">--</div><div class="label">Stability</div></div>
-          <div class="metric-box"><div class="value" id="m-volatility">--</div><div class="label">Volatility</div></div>
-          <div class="metric-box"><div class="value" id="m-round">--</div><div class="label">Round</div></div>
-          <div class="metric-box"><div class="value" id="m-interventions">0</div><div class="label">Interventions</div></div>
-        </div>
+
+    <!-- LAYER 1: OUTCOME -->
+    <div class="outcome-panel" id="outcome-panel">
+      <div class="outcome-statement" id="outcome-statement">
+        <span class="outcome-empty">Run a simulation or connect an agent to see outcomes</span>
       </div>
-      <div class="vpanel">
-        <h2>World Rules Active</h2>
-        <div id="active-invariants"></div>
+      <div class="confidence-grid" id="confidence-grid" style="display:none">
+        <div class="confidence-card">
+          <div class="cc-label">Conclusion Strength</div>
+          <div class="cc-value" id="cc-strength">--</div>
+        </div>
+        <div class="confidence-card">
+          <div class="cc-label">Evidence Quality</div>
+          <div class="cc-value" id="cc-evidence">--</div>
+        </div>
+        <div class="confidence-card">
+          <div class="cc-label">Risk of Error</div>
+          <div class="cc-value" id="cc-risk">--</div>
+        </div>
       </div>
+      <div class="outcome-context" id="outcome-context"></div>
     </div>
 
-    <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>
+    <!-- LAYER 2: BEHAVIOR -->
+    <div class="behavior-panel" id="behavior-panel-v2">
+      <h2>What Agents Did</h2>
+      <div class="behavior-shifts" id="behavior-shifts">
+        <div class="behavior-empty">Waiting for agent actions</div>
       </div>
-      <div class="vpanel">
-        <h2>Impact Timeline</h2>
-        <div class="chart-container"><canvas id="chart"></canvas></div>
+      <div class="activity-toggle" id="activity-toggle" onclick="document.getElementById('activity-timeline').classList.toggle('open');this.querySelector('.arrow').textContent=document.getElementById('activity-timeline').classList.contains('open')?'▼':'▶'" style="display:none">
+        <span class="arrow">▶</span> See activity timeline
       </div>
+      <div class="activity-timeline" id="activity-timeline"></div>
     </div>
 
-    <!-- System Shift Card — the demo moment -->
-    <div id="system-shift" class="system-shift">
-      <div class="ss-header">
-        <div class="ss-icon"></div>
-        <span class="ss-title">System Shift</span>
-      </div>
-      <div class="ss-rule" id="ss-rule"></div>
-      <div class="ss-scale" id="ss-scale"></div>
-      <div class="ss-flow">
-        <span>Rule</span><span class="ss-flow-arrow">→</span>
-        <span>Behavioral Shift</span><span class="ss-flow-arrow">→</span>
-        <span>Emergent Pattern</span><span class="ss-flow-arrow">→</span>
-        <span>System Outcome</span>
-      </div>
-      <div class="ss-body">
-        <div class="ss-section">
-          <div class="ss-section-label">Behavioral Shift</div>
-          <div class="ss-adapt-rate" id="ss-adapt-rate"></div>
-          <div class="ss-adapt-desc" id="ss-adapt-desc"></div>
-          <div id="ss-shifts"></div>
-        </div>
-        <div class="ss-section">
-          <div class="ss-section-label">What Emerged</div>
-          <div id="ss-patterns"></div>
-        </div>
-        <div class="ss-section">
-          <div class="ss-section-label">System Outcome</div>
-          <div id="ss-impacts"></div>
-        </div>
-        <div class="ss-section">
-          <div class="ss-section-label">What Actually Happened</div>
-          <div class="ss-narrative" id="ss-narrative"></div>
-        </div>
-      </div>
-      <button class="ss-raw-toggle" id="ss-raw-toggle">
-        <span class="arrow">▶</span> View raw detail
-      </button>
-      <div class="ss-raw-detail" id="ss-raw-detail">
-        <div class="ss-raw-list" id="ss-raw-list"></div>
+    <!-- LAYER 3: WHY -->
+    <div class="why-panel" id="why-panel">
+      <h2>Why This Happened</h2>
+      <div id="why-content">
+        <div class="why-empty">Causation analysis appears after agent actions are evaluated</div>
       </div>
     </div>
 
-    <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>
+    <!-- LAYER 4: EXPORT -->
+    <div class="export-bar">
+      <button class="export-btn" onclick="exportPDF()">Download PDF</button>
+      <button class="export-btn" onclick="exportCSV()">Export CSV</button>
+      <button class="export-btn" onclick="copyShareSummary()">Copy Summary</button>
+      <button class="export-btn audit-btn" onclick="openAudit()">Audit Trail</button>
+    </div>
+
+    <!-- Hidden elements for data tracking (not displayed) -->
+    <div style="display:none">
+      <span id="m-stability">--</span>
+      <span id="m-volatility">--</span>
+      <span id="m-round">--</span>
+      <span id="m-interventions">0</span>
+      <span id="trace-source"></span>
+      <div id="agents"></div>
+      <div id="active-invariants"></div>
       <div id="log"></div>
     </div>
   </div>
+
+  <!-- LAYER 5: AUDIT OVERLAY (separate from dashboard) -->
+  <div class="audit-overlay" id="audit-overlay" onclick="if(event.target===this)closeAudit()">
+    <div class="audit-modal">
+      <div class="audit-header">
+        <h2>Audit Trail</h2>
+        <button class="audit-close" onclick="closeAudit()">Close</button>
+      </div>
+      <div class="audit-section" id="audit-rules">
+        <h3>Active Rules</h3>
+        <div id="audit-rules-content"></div>
+      </div>
+      <div class="audit-section" id="audit-verdicts">
+        <h3>Verdict Log</h3>
+        <div id="audit-verdicts-content"></div>
+      </div>
+      <div class="audit-section" id="audit-trace">
+        <h3>Detailed Trace</h3>
+        <div id="audit-trace-content"></div>
+      </div>
+    </div>
+  </div>
 </div>
 
-<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"><\/script>
 <script>
+// ============================================
+// LANGUAGE & FRAMEWORK TABS
+// ============================================
+function switchLang(lang, btn) {
+  const container = btn.closest('.integrate-section') || document;
+  container.querySelectorAll('.lang-tab').forEach(t => t.classList.remove('active'));
+  container.querySelectorAll('.lang-code-panel').forEach(p => p.classList.remove('active'));
+  btn.classList.add('active');
+  const panel = document.getElementById('lang-' + lang);
+  if (panel) panel.classList.add('active');
+}
+
+function switchFw(fw, btn) {
+  document.querySelectorAll('.fw-tab').forEach(t => t.classList.remove('active'));
+  document.querySelectorAll('.fw-panel').forEach(p => p.classList.remove('active'));
+  btn.classList.add('active');
+  const panel = document.getElementById('fw-' + fw);
+  if (panel) panel.classList.add('active');
+}
+
+// ============================================
+// OUTCOME INTELLIGENCE LAYER
+// ============================================
+
+function generateOutcome(stability, volatility, shiftData, worldThesis) {
+  var st = stability || 0;
+  var vol = volatility || 0;
+  var blockRatio = shiftData.total > 0 ? shiftData.blocks / shiftData.total : 0;
+  var thesis = worldThesis || '';
+
+  // Determine outcome direction + dominant behavior (state + what agents did)
+  var direction = '';
+  var behavior = '';
+  if (st > 0.7 && vol < 0.3) {
+    direction = 'stabilized';
+    behavior = 'agents shifted toward safer positions';
+  } else if (st > 0.7 && vol >= 0.3) {
+    direction = 'held under pressure';
+    behavior = 'agents maintained cautious strategies despite volatility';
+  } else if (st > 0.4 && vol < 0.5) {
+    direction = 'partially converged';
+    behavior = 'agents split between aggressive and conservative approaches';
+  } else if (st <= 0.4 && vol >= 0.5) {
+    direction = 'fragmented';
+    behavior = 'agents competed with conflicting strategies';
+  } else if (st <= 0.4) {
+    direction = 'remains uncertain';
+    behavior = 'agents failed to find a dominant strategy';
+  } else {
+    direction = 'showed mixed results';
+    behavior = 'agents oscillated between risk-taking and caution';
+  }
+
+  // Enrich with world context if available
+  if (thesis) {
+    var nouns = thesis.match(/\b(market|research|supply|trade|financial|climate|regulatory|investment|innovation|security)\b/i);
+    if (nouns) {
+      var subject = nouns[1].charAt(0).toUpperCase() + nouns[1].slice(1).toLowerCase();
+      return subject + ' ' + direction + ' as ' + behavior;
+    }
+  }
+
+  // Build behavior-enriched statement — always state + dominant behavior
+  if (blockRatio > 0.4 && st > 0.6) return 'System ' + direction + ' after agents abandoned high-risk strategies';
+  if (blockRatio > 0.2) return 'Outcome ' + direction + ' as ' + behavior;
+  if (shiftData.patterns && shiftData.patterns.length > 0) return 'Outcome ' + direction + ' — ' + behavior;
+  return 'Outcome ' + direction + ' as ' + behavior;
+}
+
+function computeConfidence(stability, volatility, interventions, total) {
+  var interventionRate = total > 0 ? interventions / total : 0;
+  var score = stability * 0.5 + (1 - volatility) * 0.3 + (1 - interventionRate) * 0.2;
+
+  var strength, evidence, risk, strengthCls, evidenceCls, riskCls;
+
+  if (score > 0.75) {
+    strength = 'Strong'; strengthCls = 'good';
+    evidence = 'Solid'; evidenceCls = 'good';
+    risk = 'Low'; riskCls = 'good';
+  } else if (score > 0.55) {
+    strength = 'Moderate'; strengthCls = 'warn';
+    evidence = stability > 0.6 ? 'Solid' : 'Mixed'; evidenceCls = stability > 0.6 ? 'good' : 'warn';
+    risk = volatility > 0.4 ? 'Elevated' : 'Moderate'; riskCls = volatility > 0.4 ? 'warn' : 'warn';
+  } else if (score > 0.35) {
+    strength = 'Moderate'; strengthCls = 'warn';
+    evidence = 'Mixed'; evidenceCls = 'warn';
+    risk = 'Elevated'; riskCls = 'bad';
+  } else {
+    strength = 'Weak'; strengthCls = 'bad';
+    evidence = 'Thin'; evidenceCls = 'bad';
+    risk = 'High'; riskCls = 'bad';
+  }
+
+  return { score: score, strength: strength, strengthCls: strengthCls, evidence: evidence, evidenceCls: evidenceCls, risk: risk, riskCls: riskCls };
+}
+
+function translateBehaviorNarrative(reaction, verdict) {
+  // Convert verdict+action into before → after narrative — no system words
+  var status = verdict ? verdict.status : 'ALLOW';
+  var action = reaction || 'acted';
+  if (status === 'BLOCK') {
+    return 'abandoned ' + action + ' and switched to a safer strategy';
+  }
+  if (status === 'MODIFY' || status === 'PAUSE') {
+    return 'scaled back ' + action + ' after early resistance';
+  }
+  return action;
+}
+
+function generateBehaviorShifts(shiftData, bLog) {
+  // Quantified behavioral shifts in human language
+  var sentences = [];
+  var total = shiftData.total || bLog.length || 0;
+  if (total === 0) return sentences;
+
+  // Group by what agents actually did — always anchor in before → after
+  var keys = Object.keys(shiftData.shifts || {}).sort(function(a, b) { return shiftData.shifts[b] - shiftData.shifts[a]; });
+  if (keys.length > 0 && total > 0) {
+    keys.slice(0, 3).forEach(function(k) {
+      var parts = k.split(': ');
+      var action = parts[1] || parts[0];
+      var count = shiftData.shifts[k];
+      var pct = Math.round((count / total) * 100);
+      // before → after: what they tried → what they did instead
+      if (parts[0] === 'BLOCK') {
+        sentences.push(pct + '% of agents (' + count + ') shifted from ' + action + ' to conservative strategies');
+      } else {
+        sentences.push(pct + '% of agents (' + count + ') reduced ' + action + ' after initial attempts failed');
+      }
+    });
+  }
+
+  // Fallback from behavioral log — still before → after
+  if (sentences.length === 0 && bLog.length > 0) {
+    var blocked = bLog.filter(function(e) { return e.status === 'BLOCK'; }).length;
+    var modified = bLog.filter(function(e) { return e.status === 'MODIFY' || e.status === 'PAUSE'; }).length;
+    var proceeded = bLog.length - blocked - modified;
+
+    if (blocked > 0) {
+      var bPct = Math.round((blocked / bLog.length) * 100);
+      sentences.push(bPct + '% of agents (' + blocked + ') shifted from aggressive to conservative strategies');
+    }
+    if (modified > 0) {
+      var mPct = Math.round((modified / bLog.length) * 100);
+      sentences.push(mPct + '% of agents (' + modified + ') reduced position size after initial attempts failed');
+    }
+    if (proceeded > 0 && (blocked > 0 || modified > 0)) {
+      var pPct = Math.round((proceeded / bLog.length) * 100);
+      sentences.push(pPct + '% of agents (' + proceeded + ') maintained their original strategy throughout');
+    }
+  }
+
+  // Volatility insight — before → after framing
+  if (shiftData.governedVol < shiftData.baselineVol && shiftData.baselineVol > 0) {
+    var volDrop = Math.round((1 - shiftData.governedVol / shiftData.baselineVol) * 100);
+    sentences.push('Uncertainty dropped ' + volDrop + '% as agents moved from exploration to caution');
+  }
+
+  // Add emergent pattern insights
+  if (shiftData.patterns && shiftData.patterns.length > 0) {
+    shiftData.patterns.slice(0, 2).forEach(function(p) {
+      sentences.push(p);
+    });
+  }
+
+  return sentences;
+}
+
+function generateCausation(shiftData, bLog) {
+  // Pure causation — why behavior changed — no governance terminology
+  var causes = [];
+  var total = shiftData.total || bLog.length || 0;
+  if (total === 0) return causes;
+
+  var blockRatio = shiftData.blocks / total;
+
+  // No system words (feedback, evaluation, validation, review)
+  // Only agent experience (failed attempts, uncertainty, risk, delay)
+  if (blockRatio > 0.4) {
+    causes.push('Early aggressive attempts failed, forcing agents to rethink their strategy');
+  } else if (blockRatio > 0.1) {
+    causes.push('Some agents hit unexpected resistance and pulled back');
+  }
+
+  if (shiftData.governedVol < shiftData.baselineVol) {
+    causes.push('Uncertainty dropped as agents stopped experimenting and committed to safer positions');
+  }
+
+  if (shiftData.patterns && shiftData.patterns.length > 0) {
+    if (shiftData.patterns.some(function(p) { return p.toLowerCase().includes('hold') || p.toLowerCase().includes('caution'); })) {
+      causes.push('Risk became too visible — agents chose to wait rather than act');
+    }
+    if (shiftData.patterns.some(function(p) { return p.toLowerCase().includes('coordination') || p.toLowerCase().includes('coordinated'); })) {
+      causes.push('Agents independently converged on similar strategies under shared pressure');
+    }
+  }
+
+  // Detect adaptation pattern from behavior log
+  if (bLog.length >= 3) {
+    var recent = bLog.slice(-6);
+    var earlyBlocks = recent.slice(0, 3).filter(function(e) { return e.status === 'BLOCK'; }).length;
+    var lateAllows = recent.slice(-3).filter(function(e) { return e.status === 'ALLOW'; }).length;
+    if (earlyBlocks >= 2 && lateAllows >= 2) {
+      causes.push('Agents became more cautious after early attempts failed');
+    }
+  }
+
+  if (causes.length === 0) {
+    causes.push('Agents held steady — no major shifts in strategy throughout the simulation');
+  }
+
+  return causes;
+}
+
 // ============================================
 // STATE
 // ============================================
@@ -2210,12 +2779,12 @@ let narratives = {};
 let currentWorld = null;
 let injectedEvents = [];
 let totalInterventions = 0;
-let baselineImpacts = [];
-let governedImpacts = [];
-let chartLabels = [];
-let chart = null;
+let totalActions = 0;
 let narrativeEventsByRound = {}; // { round: [{ id, headline, severity }] }
 let ruleImpactTracker = {}; // { ruleId: { blocks: N, label: string } }
+let behaviorLog = []; // { agent, action, status, reason, ts }
+let latestStability = 0;
+let latestVolatility = 0;
 
 const statusEl = document.getElementById('status');
 const worldSelect = document.getElementById('world-select');
@@ -2234,6 +2803,79 @@ const activeInvEl = document.getElementById('active-invariants');
 const engineSelect = document.getElementById('engine-select');
 const engineStatusEl = document.getElementById('engine-status');
 const traceSourceEl = document.getElementById('trace-source');
+const outcomeStatementEl = document.getElementById('outcome-statement');
+const confidenceGridEl = document.getElementById('confidence-grid');
+const outcomeContextEl = document.getElementById('outcome-context');
+const behaviorShiftsEl = document.getElementById('behavior-shifts');
+const activityTimelineEl = document.getElementById('activity-timeline');
+const activityToggleEl = document.getElementById('activity-toggle');
+const whyContentEl = document.getElementById('why-content');
+
+// Audit + Export
+function openAudit() {
+  // Populate audit content from current data
+  var rulesEl = document.getElementById('audit-rules-content');
+  rulesEl.innerHTML = activeInvEl.innerHTML || '<div style="font-size:11px;color:#666">No rules loaded</div>';
+
+  var verdictsEl = document.getElementById('audit-verdicts-content');
+  var vHtml = '';
+  behaviorLog.forEach(function(e) {
+    vHtml += '<div style="font-size:10px;padding:2px 0;display:flex;gap:8px;border-bottom:1px solid var(--border)">' +
+      '<span style="color:var(--blue);min-width:100px">' + e.agent + '</span>' +
+      '<span style="flex:1;color:var(--text-secondary)">' + e.action + '</span>' +
+      '<span style="font-size:9px;font-weight:600;padding:0 4px;border-radius:2px;' +
+        (e.status === 'BLOCK' ? 'background:var(--red-bg);color:var(--red)' : e.status === 'ALLOW' ? 'background:var(--green-bg);color:var(--green)' : 'background:var(--yellow-bg);color:var(--yellow)') + '">' + e.status + '</span>' +
+      (e.reason ? '<span style="font-size:9px;color:var(--text-faint)">' + e.reason + '</span>' : '') +
+    '</div>';
+  });
+  verdictsEl.innerHTML = vHtml || '<div style="font-size:11px;color:#666">No verdict data</div>';
+
+  var traceEl = document.getElementById('audit-trace-content');
+  traceEl.innerHTML = logEl.innerHTML || '<div style="font-size:11px;color:#666">No trace data</div>';
+
+  document.getElementById('audit-overlay').classList.add('open');
+}
+
+function closeAudit() {
+  document.getElementById('audit-overlay').classList.remove('open');
+}
+
+function exportPDF() {
+  window.print();
+}
+
+function exportCSV() {
+  if (behaviorLog.length === 0) { alert('No data to export yet'); return; }
+  var csv = 'Agent,Action,Behavior,Round\\n';
+  behaviorLog.forEach(function(e) {
+    var behavior = translateBehaviorNarrative(e.action, { status: e.status });
+    csv += '"' + e.agent + '","' + e.action + '","' + behavior + '","' + (e.round || '') + '"\\n';
+  });
+  var blob = new Blob([csv], { type: 'text/csv' });
+  var url = URL.createObjectURL(blob);
+  var a = document.createElement('a');
+  a.href = url;
+  a.download = 'simulation-behavior-' + new Date().toISOString().slice(0, 10) + '.csv';
+  a.click();
+  URL.revokeObjectURL(url);
+}
+
+function copyShareSummary() {
+  var outcome = outcomeStatementEl.textContent;
+  var shifts = [];
+  behaviorShiftsEl.querySelectorAll('.behavior-shift-item').forEach(function(el) { shifts.push('- ' + el.textContent); });
+  var causes = [];
+  whyContentEl.querySelectorAll('.why-item').forEach(function(el) { causes.push('- ' + el.textContent); });
+
+  var text = 'OUTCOME: ' + outcome + '\\n\\n';
+  if (shifts.length) text += 'BEHAVIOR:\\n' + shifts.join('\\n') + '\\n\\n';
+  if (causes.length) text += 'WHY:\\n' + causes.join('\\n') + '\\n';
+  text += '\\nGenerated by NeuroVerse Simulations';
+
+  navigator.clipboard.writeText(text).then(function() {
+    alert('Summary copied to clipboard');
+  });
+}
 
 // ============================================
 // INIT — Load worlds, scenarios, narratives, adapters
@@ -2404,10 +3046,6 @@ runBtn.addEventListener('click', async () => {
 
   // Reset viewer state
   totalInterventions = 0;
-  baselineImpacts = [];
-  governedImpacts = [];
-  chartLabels = [];
-  if (chart) { chart.destroy(); chart = null; }
   agentsEl.innerHTML = '';
   logEl.innerHTML = '';
   document.getElementById('m-stability').textContent = '--';
@@ -2475,28 +3113,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,6 +3224,84 @@ function renderAgents(reactions) {
   agentsEl.innerHTML = html;
 }
 
+// ============================================
+// PANEL RENDERING — Outcome / Behavior / Why
+// ============================================
+
+function recordBehavior(reactions, round) {
+  if (!reactions || !reactions.length) return;
+  reactions.forEach(function(r) {
+    var status = r.verdict ? r.verdict.status : 'ALLOW';
+    var reason = r.verdict ? (r.verdict.reason || '') : '';
+    behaviorLog.push({
+      agent: r.stakeholder_id,
+      action: r.reaction || 'acted',
+      status: status,
+      reason: reason,
+      round: round || 0,
+      ts: Date.now(),
+    });
+  });
+}
+
+function updateOutcomePanel() {
+  var worldThesis = currentWorld ? (currentWorld.thesis || currentWorld.description || '') : '';
+  var outcome = generateOutcome(latestStability, latestVolatility, shiftTracker, worldThesis);
+  outcomeStatementEl.textContent = outcome;
+
+  // Structured confidence card
+  var conf = computeConfidence(latestStability, latestVolatility, totalInterventions, totalActions);
+  confidenceGridEl.style.display = 'grid';
+  document.getElementById('cc-strength').textContent = conf.strength;
+  document.getElementById('cc-strength').className = 'cc-value ' + conf.strengthCls;
+  document.getElementById('cc-evidence').textContent = conf.evidence;
+  document.getElementById('cc-evidence').className = 'cc-value ' + conf.evidenceCls;
+  document.getElementById('cc-risk').textContent = conf.risk;
+  document.getElementById('cc-risk').className = 'cc-value ' + conf.riskCls;
+
+  // Context line
+  outcomeContextEl.textContent = 'Based on ' + totalActions + ' agent action' + (totalActions !== 1 ? 's' : '') +
+    (shiftTracker.total > 0 ? ' across ' + (document.getElementById('m-round').textContent || '') : '');
+}
+
+function updateBehaviorPanel() {
+  // Quantified behavioral shifts in human language
+  var shifts = generateBehaviorShifts(shiftTracker, behaviorLog);
+  if (shifts.length > 0) {
+    var html = shifts.map(function(s) {
+      return '<div class="behavior-shift-item">' + s + '</div>';
+    }).join('');
+    behaviorShiftsEl.innerHTML = html;
+  }
+
+  // Activity timeline (narrative micro-events, expandable)
+  if (behaviorLog.length > 0) {
+    activityToggleEl.style.display = 'block';
+    var recent = behaviorLog.slice(-30).reverse();
+    var tHtml = recent.map(function(e) {
+      var narrative = translateBehaviorNarrative(e.action, { status: e.status });
+      return '<div class="activity-item"><span class="activity-agent">' + e.agent + '</span> ' + narrative + '</div>';
+    }).join('');
+    activityTimelineEl.innerHTML = tHtml;
+  }
+}
+
+function updateWhyPanel() {
+  var causes = generateCausation(shiftTracker, behaviorLog);
+  if (causes.length > 0) {
+    var html = causes.map(function(c) {
+      return '<div class="why-item">' + c + '</div>';
+    }).join('');
+    whyContentEl.innerHTML = html;
+  }
+}
+
+function updateAllPanels() {
+  updateOutcomePanel();
+  updateBehaviorPanel();
+  updateWhyPanel();
+}
+
 function handleEvent(event) {
   if (event.type === 'meta') {
     statusEl.className = 'status live';
@@ -2689,44 +3384,59 @@ 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, not displayed)
     trackShift(event);
 
-    // Render structured trace entry instead of flat log line
+    // Update all visible panels
+    updateAllPanels();
+
+    // Add trace entry for audit
     addTraceRound(event);
   }
 
+  // Bridge metrics — updates stability from external /api/evaluate calls
+  if (event.type === 'bridge_metrics') {
+    latestStability = event.stability;
+    document.getElementById('m-stability').textContent = (event.stability * 100).toFixed(0) + '%';
+    updateAllPanels();
+  }
+
   if (event.type === 'complete') {
     statusEl.className = 'status complete';
     statusEl.textContent = 'COMPLETE';
     const r = event.result;
     if (r.governed) {
+      latestStability = r.governed.metrics.stabilityScore;
+      latestVolatility = r.governed.metrics.maxVolatility || latestVolatility;
       document.getElementById('m-stability').textContent = (r.governed.metrics.stabilityScore * 100).toFixed(0) + '%';
-      document.getElementById('m-stability').parentElement.className = 'metric-box ' + (r.governed.metrics.stabilityScore > 0.7 ? 'good' : 'warn');
-      addLog('Complete. Governance effectiveness: ' + (r.comparison.governanceEffectiveness * 100).toFixed(0) + '%');
+      addLog('Simulation complete');
       renderSystemShift(r);
       renderRuleImpacts(r);
       renderEnforcementClassification(r.enforcementClassification || []);
+      updateAllPanels();
       lastSimResult = {
         stability: r.governed.metrics.stabilityScore,
         volatility: r.governed.metrics.maxVolatility,
@@ -2805,20 +3515,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 +3588,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;
 
@@ -3151,18 +3879,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';
@@ -3445,7 +4161,7 @@ parseRulesBtn.addEventListener('click', async () => {
     const resp = await fetch('/api/parse-rules', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ text, worldId: currentWorld ? currentWorld.id : 'trading' }),
+      body: JSON.stringify({ text, worldId: currentWorld ? currentWorld.id : 'social_simulation' }),
     });
     const data = await resp.json();
 
@@ -3476,46 +4192,72 @@ parseRulesBtn.addEventListener('click', async () => {
         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
+              // CUSTOM MODE: Generate a full governed world (state vars, gates, thesis)
               const customName = document.getElementById('custom-world-name');
               const worldName = (customName && customName.value) ? customName.value : 'Custom World';
-              const 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 + '"';
+              const ruleText = document.getElementById('rule-input').value;
+
+              const genResp = await fetch('/api/generate-world', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ text: ruleText, name: worldName }),
+              });
+              const genData = await genResp.json();
+
+              if (genData.status === 'generated') {
+                ruleStatusEl.textContent = genData.parsed.total + ' rules parsed. Full world generated: ' + genData.world.stateVariables.length + ' state variables, ' + genData.world.gates.length + ' gates, ' + genData.world.invariants.length + ' invariants.';
+                ruleStatusEl.className = 'rule-status success';
+
+                // Show invariants in active panel
+                activeInvEl.innerHTML = genData.world.invariants.map(function(inv) {
+                  const color = inv.enforceable ? 'var(--red)' : 'var(--green)';
+                  return '<div class="inv-item" style="color:' + color + '">[' + inv.id + '] ' + inv.description + '</div>';
+                }).join('');
+
+                // Set the generated world as the current world — with real state variables and gates
+                currentWorld = {
+                  id: genData.world.id,
+                  title: genData.world.title,
+                  thesis: genData.world.thesis,
+                  stateVariables: genData.world.stateVariables,
+                  invariants: genData.world.invariants,
+                  gates: genData.world.gates,
+                };
+                worlds.push(currentWorld);
+
+                // Update world selector dropdown
+                var opt = document.createElement('option');
+                opt.value = currentWorld.id;
+                opt.textContent = currentWorld.title;
+                worldSelect.appendChild(opt);
+                worldSelect.value = currentWorld.id;
+
+                // Render the state variable sliders
+                selectWorld(currentWorld.id);
+                document.getElementById('world-thesis').textContent = '"' + genData.world.thesis + '"';
+              }
+            } else {
+              // PRESET MODE: Just apply rules on top of existing world
+              let worldId = currentWorld ? currentWorld.id : 'social_simulation';
+
+              const applyResp = await fetch('/api/apply-rules', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ rules: parsedRuleData, worldId }),
+              });
+              const applyData = await applyResp.json();
+              if (applyData.status === 'applied') {
+                ruleStatusEl.textContent = applyData.applied + ' rule(s) active. Run a simulation to see the effect.';
+                ruleStatusEl.className = 'rule-status success';
+
+                // Show rules in active invariants panel
+                activeInvEl.innerHTML = parsedRuleData.map(function(r) {
+                  var enfType = r.enforcement || 'block';
+                  var colorMap = { block: 'var(--red)', allow: 'var(--green)', modify: 'var(--blue)', warn: 'var(--yellow)', pause: 'var(--yellow)' };
+                  var color = colorMap[enfType] || 'var(--text-secondary)';
+                  return '<div class="inv-item" style="color:' + color + '">[' + r.id + '] ' + r.description + '</div>';
+                }).join('');
               }
             }
           } catch (err) {