Update ui/components.py

ui/components.py

@@ -1,14 +1,17 @@
 """
 Gradio-only UI components for ARF
 Ensures full compatibility with app.py
-NOW WITH REAL ARF INSTALLATION DETECTION
-UPDATED: Added realism panel integration for Tab 1
-UPDATED: Added dynamic performance metrics function for Phase 2
+NOW WITH DOCTRINAL COMPLIANCE: Psychological Advantage Enforcement
+UPDATED: Language discipline, observation gate rendering, recall panel dominance
+UPDATED: Metric discipline, sequencing display, no early "critical" terminology
+DOCTRINAL VERSION: 3.3.9+restraint
 """
 
 import gradio as gr
 from typing import Dict, List, Any
 import logging
+import datetime
+import time
 
 logger = logging.getLogger(__name__)
 
@@ -22,21 +25,21 @@ except ImportError:
     from demo.scenarios import INCIDENT_SCENARIOS
 
 # -----------------------------
-# Header & Status - UPDATED WITH INSTALLATION CHECK
+# Header & Status - DOCTRINAL LANGUAGE
 # -----------------------------
 def create_header(version="3.3.9") -> gr.HTML:
     return gr.HTML(f"""
     <div style="text-align: center; margin-bottom: 25px; display: flex; justify-content: center;">
         <div style="max-width: 1200px; width: 100%;">
             <img src="https://raw.githubusercontent.com/petterjuan/agentic-reliability-framework/main/assets/agentic-reliability-banner.png" 
-                 alt="Agentic Reliability Framework" 
+                 alt="Reliability Framework" 
                  style="width: 100%; height: auto; border-radius: 12px; box-shadow: 0 8px 32px rgba(59, 130, 246, 0.15);">
             <div style="margin-top: 20px;">
                 <h2 style="margin: 0 0 8px 0; font-size: 24px; color: #1e293b; font-weight: 600;">
-                    v{version} (OSS + Enterprise Edition)
+                    v{version} (Policy + Enterprise Edition)
                 </h2>
                 <p style="margin: 0 0 15px 0; font-size: 16px; color: #64748b; max-width: 600px; margin-left: auto; margin-right: auto;">
-                    Production-grade multi-agent AI for autonomous system reliability intelligence
+                    Production-grade policy execution for system reliability intelligence
                 </p>
                 
                 <!-- Clean Architecture Badge -->
@@ -53,75 +56,267 @@ def create_status_bar() -> gr.HTML:
     return gr.HTML("""
     <div style="display: flex; justify-content: center; gap: 15px; margin-bottom: 30px; padding: 15px; background: #f8fafc; border-radius: 12px; border: 1px solid #e2e8f0; flex-wrap: wrap;">
         <span style="padding: 8px 16px; background: #10b981; color: white; border-radius: 8px; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 6px; border: 1px solid #10b981;">
-            ✅ System Online
+            ✅ Policy System Online
         </span>
         <span style="padding: 8px 16px; background: #8b5cf6; color: white; border-radius: 8px; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 6px; border: 1px solid #8b5cf6;">
             ✅ ARF OSS v3.3.9
         </span>
         <span style="padding: 8px 16px; background: #3b82f6; color: white; border-radius: 8px; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 6px; border: 1px solid #3b82f6;">
-            🏢 Enterprise Edition
+            🏢 Enterprise Execution
         </span>
     </div>
     """)
 
 # -----------------------------
-# Performance Metrics Function - NEW FOR PHASE 2
+# NEW: Observation Gate Renderer - CRITICAL PSYCHOLOGICAL FIX
+# -----------------------------
+def render_observation_gate(healing_intent: Dict[str, Any]) -> gr.HTML:
+    """
+    Render observation gate state as active restraint, not passive waiting.
+    Doctrinal: Make inaction an explicit, powerful decision.
+    """
+    deferral_reason = healing_intent.get("deferral_reason", "uncertainty_too_high_for_action")
+    frozen_until = healing_intent.get("decision_frozen_until", "")
+    confidence = healing_intent.get("confidence", 0.0)
+    
+    # Parse timestamp for countdown
+    countdown_text = ""
+    if frozen_until:
+        try:
+            frozen_dt = datetime.datetime.fromisoformat(frozen_until.replace("Z", "+00:00"))
+            now = datetime.datetime.now(datetime.timezone.utc)
+            if frozen_dt.tzinfo is None:
+                frozen_dt = frozen_dt.replace(tzinfo=datetime.timezone.utc)
+            time_left = frozen_dt - now
+            minutes_left = max(0, int(time_left.total_seconds() / 60))
+            countdown_text = f"{minutes_left}m"
+        except:
+            countdown_text = "5m"
+    
+    return gr.HTML(f"""
+    <div style="border: 3px solid #3b82f6; border-radius: 16px; padding: 25px; background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%); margin-bottom: 20px;">
+        <div style="display: flex; align-items: center; gap: 15px; margin-bottom: 20px;">
+            <div style="font-size: 40px; color: #3b82f6;">⏳</div>
+            <div style="flex: 1;">
+                <h3 style="margin: 0 0 8px 0; font-size: 20px; color: #1e293b; font-weight: 700;">
+                    Decision Intentionally Deferred
+                </h3>
+                <p style="margin: 0; font-size: 14px; color: #64748b;">
+                    System state: <strong>observe_only</strong> • Confidence: {confidence:.1%}
+                </p>
+            </div>
+            <div style="padding: 10px 20px; background: #dbeafe; color: #1e40af; border-radius: 25px; font-size: 14px; font-weight: bold;">
+                ACTIVE RESTRAINT
+            </div>
+        </div>
+        
+        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;">
+            <div style="padding: 18px; background: #f8fafc; border-radius: 12px;">
+                <div style="font-size: 13px; color: #64748b; margin-bottom: 8px; font-weight: 600;">REASON FOR DEFERRAL</div>
+                <div style="font-size: 15px; color: #1e293b; font-weight: 500; padding: 12px; background: white; border-radius: 8px; border-left: 4px solid #3b82f6;">
+                    {deferral_reason.replace('_', ' ').title()}
+                </div>
+            </div>
+            
+            <div style="padding: 18px; background: #f8fafc; border-radius: 12px;">
+                <div style="font-size: 13px; color: #64748b; margin-bottom: 8px; font-weight: 600;">NEXT EVALUATION</div>
+                <div style="font-size: 15px; color: #1e293b; font-weight: 500; padding: 12px; background: white; border-radius: 8px; border-left: 4px solid #10b981;">
+                    System re-evaluates in: <span style="font-size: 24px; font-weight: 700; color: #10b981;">{countdown_text}</span>
+                </div>
+            </div>
+        </div>
+        
+        <div style="background: #f0fdf4; border-radius: 12px; padding: 20px; border: 2px solid #10b981;">
+            <div style="display: flex; align-items: flex-start; gap: 15px;">
+                <div style="font-size: 24px; color: #10b981;">🎯</div>
+                <div style="flex: 1;">
+                    <div style="font-size: 16px; font-weight: 600; color: #065f46; margin-bottom: 8px;">
+                        This is a System Choice, Not a Limitation
+                    </div>
+                    <div style="font-size: 14px; color: #047857; line-height: 1.6;">
+                        The system is <strong>choosing not to act</strong> because uncertainty exceeds policy thresholds. 
+                        This restraint demonstrates operational maturity—eagerness is a liability in production.
+                        <br><br>
+                        <em>"What you are seeing is not waiting. It is judgment under uncertainty."</em>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <div style="margin-top: 20px; padding-top: 20px; border-top: 2px solid #e2e8f0;">
+            <div style="font-size: 14px; color: #64748b; font-weight: 600; margin-bottom: 10px;">PREVENTED ACTIONS (CONTRANDICATED)</div>
+            <div style="display: flex; flex-wrap: wrap; gap: 10px;">
+                <span style="padding: 8px 16px; background: #fee2e2; color: #7f1d1d; border-radius: 20px; font-size: 13px; font-weight: 500;">scale_during_retry_storm</span>
+                <span style="padding: 8px 16px; background: #fee2e2; color: #7f1d1d; border-radius: 20px; font-size: 13px; font-weight: 500;">add_capacity_during_amplification</span>
+                <span style="padding: 8px 16px; background: #fee2e2; color: #7f1d1d; border-radius: 20px; font-size: 13px; font-weight: 500;">any_action_during_high_uncertainty</span>
+            </div>
+        </div>
+    </div>
+    """)
+
+# -----------------------------
+# NEW: Historical Evidence Panel - RECALL DOMINANCE
+# -----------------------------
+def create_historical_evidence_panel(scenario_data: Dict[str, Any]) -> gr.HTML:
+    """
+    Create doctrinally compliant historical evidence panel.
+    Must be visually dominant with dates/environments.
+    """
+    # Extract from scenario or use defaults
+    historical_panel = scenario_data.get("historical_evidence_panel", {})
+    
+    scaling_failures = historical_panel.get("scaling_first_failures", [])
+    dampening_successes = historical_panel.get("dampening_first_successes", [])
+    
+    # Build failures HTML
+    failures_html = ""
+    for i, failure in enumerate(scaling_failures[:3]):  # Show top 3
+        failures_html += f"""
+        <div style="border-left: 4px solid #ef4444; padding-left: 15px; margin-bottom: 15px;">
+            <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 5px;">
+                <div style="font-size: 14px; font-weight: 600; color: #1e293b;">{failure.get('date', 'Unknown')} • {failure.get('environment', 'Unknown')}</div>
+                <div style="padding: 3px 10px; background: #fee2e2; color: #dc2626; border-radius: 12px; font-size: 11px; font-weight: bold;">FAILED</div>
+            </div>
+            <div style="font-size: 13px; color: #475569; margin-bottom: 5px;">
+                <strong>Action:</strong> {failure.get('action', 'Unknown')}
+            </div>
+            <div style="font-size: 13px; color: #dc2626; font-weight: 500; margin-bottom: 3px;">
+                <strong>Outcome:</strong> {failure.get('outcome', 'Unknown')}
+            </div>
+            <div style="font-size: 12px; color: #7f1d1d; font-style: italic; background: #fef2f2; padding: 8px; border-radius: 6px;">
+                {failure.get('lesson', 'No lesson captured')}
+            </div>
+        </div>
+        """
+    
+    # Build successes HTML
+    successes_html = ""
+    for i, success in enumerate(dampening_successes[:3]):  # Show top 3
+        successes_html += f"""
+        <div style="border-left: 4px solid #10b981; padding-left: 15px; margin-bottom: 15px;">
+            <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 5px;">
+                <div style="font-size: 14px; font-weight: 600; color: #1e293b;">{success.get('date', 'Unknown')} • {success.get('environment', 'Unknown')}</div>
+                <div style="padding: 3px 10px; background: #dcfce7; color: #166534; border-radius: 12px; font-size: 11px; font-weight: bold;">SUCCESS</div>
+            </div>
+            <div style="font-size: 13px; color: #475569; margin-bottom: 5px;">
+                <strong>Action:</strong> {success.get('action', 'Unknown')}
+            </div>
+            <div style="font-size: 13px; color: #10b981; font-weight: 500; margin-bottom: 3px;">
+                <strong>Outcome:</strong> {success.get('outcome', 'Unknown')}
+            </div>
+            <div style="font-size: 12px; color: #065f46; font-style: italic; background: #f0fdf4; padding: 8px; border-radius: 6px;">
+                {success.get('lesson', 'No lesson captured')}
+            </div>
+        </div>
+        """
+    
+    return gr.HTML(f"""
+    <div style="border: 3px solid #3b82f6; border-radius: 16px; padding: 25px; margin-bottom: 25px; background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);">
+        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px;">
+            <div>
+                <h3 style="margin: 0 0 8px 0; font-size: 20px; color: #1e293b; font-weight: 700;">
+                    🧠 Historical Evidence (Why Sequencing Matters)
+                </h3>
+                <p style="margin: 0; font-size: 14px; color: #64748b;">
+                    Real outcomes from similar incidents—this evidence dominates decision logic
+                </p>
+            </div>
+            <div style="padding: 8px 16px; background: #dbeafe; color: #1e40af; border-radius: 20px; font-size: 12px; font-weight: bold;">
+                RECALL DOMINANCE: POLICY OVER PREDICTION
+            </div>
+        </div>
+        
+        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin-bottom: 25px;">
+            <div>
+                <div style="font-size: 16px; font-weight: 600; color: #dc2626; margin-bottom: 15px; display: flex; align-items: center; gap: 8px;">
+                    <span>⛔</span> Scaling-First Failures
+                </div>
+                {failures_html if failures_html else """
+                <div style="padding: 20px; background: #fef2f2; border-radius: 10px; text-align: center;">
+                    <div style="font-size: 32px; color: #dc2626; margin-bottom: 10px;">📊</div>
+                    <div style="font-size: 14px; color: #7f1d1d;">No scaling failure evidence in memory</div>
+                </div>
+                """}
+            </div>
+            
+            <div>
+                <div style="font-size: 16px; font-weight: 600; color: #10b981; margin-bottom: 15px; display: flex; align-items: center; gap: 8px;">
+                    <span>✅</span> Dampening-First Successes
+                </div>
+                {successes_html if successes_html else """
+                <div style="padding: 20px; background: #f0fdf4; border-radius: 10px; text-align: center;">
+                    <div style="font-size: 32px; color: #10b981; margin-bottom: 10px;">📊</div>
+                    <div style="font-size: 14px; color: #065f46;">No dampening success evidence in memory</div>
+                </div>
+                """}
+            </div>
+        </div>
+        
+        <div style="background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); border-radius: 12px; padding: 20px; border: 2px solid #0ea5e9;">
+            <div style="display: flex; align-items: flex-start; gap: 15px;">
+                <div style="font-size: 28px; color: #0ea5e9;">🎯</div>
+                <div style="flex: 1;">
+                    <div style="font-size: 16px; font-weight: 600; color: #0369a1; margin-bottom: 8px;">
+                        Doctrinal Principle: Memory Dominates Models
+                    </div>
+                    <div style="font-size: 14px; color: #0c4a6e; line-height: 1.6;">
+                        The system prioritizes <strong>historical evidence over predictive confidence</strong>. 
+                        If scaling-first failed in similar conditions, scaling is contraindicated regardless of model confidence.
+                        <br><br>
+                        <em>"What happened is more important than what might happen."</em>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    """)
+
+# -----------------------------
+# Performance Metrics Function - DOCTRINAL METRICS
 # -----------------------------
 def update_performance_metrics(scenario_name: str, scenarios=INCIDENT_SCENARIOS) -> tuple:
     """
     Update performance metrics based on scenario
     Returns: (detection_time_html, mttr_html, auto_heal_html, savings_html)
-    
-    Different metrics based on scenario type:
-    - Cache scenarios: Fast detection, moderate recovery
-    - Database scenarios: Medium detection, slower recovery  
-    - Kubernetes scenarios: Slower detection, fast recovery
-    - Network scenarios: Very fast detection, very fast recovery
-    - Storage scenarios: Fast detection, slow recovery
+    Doctrinal: No red/green colors, use gradient colors instead of binary thresholds
     """
     
-    # Scenario-specific metrics mapping
+    # Scenario-specific metrics mapping WITH GRADIENT COLORS
     metrics_config = {
-        # Cache scenarios
         "Cache": {
-            "detection_time": ("45s", "↓89%", "#3b82f6"),
-            "mttr": ("12m", "↓73%", "#10b981"),
-            "auto_heal": ("81.7%", "↑5.4×", "#8b5cf6"),
+            "detection_time": ("45s", "89% faster", "linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%)"),
+            "mttr": ("12m", "73% reduction", "linear-gradient(135deg, #10b981 0%, #047857 100%)"),
+            "auto_heal": ("82%", "5.4× improvement", "linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%)"),
             "savings_multiplier": 0.85
         },
-        # Database scenarios
         "Database": {
-            "detection_time": ("38s", "↓91%", "#3b82f6"),
-            "mttr": ("18m", "↓68%", "#10b981"),
-            "auto_heal": ("74.3%", "↑4.8×", "#8b5cf6"),
+            "detection_time": ("38s", "91% faster", "linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%)"),
+            "mttr": ("18m", "68% reduction", "linear-gradient(135deg, #10b981 0%, #047857 100%)"),
+            "auto_heal": ("74%", "4.8× improvement", "linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%)"),
             "savings_multiplier": 0.82
         },
-        # Kubernetes scenarios
         "Kubernetes": {
-            "detection_time": ("52s", "↓87%", "#3b82f6"),
-            "mttr": ("15m", "↓71%", "#10b981"),
-            "auto_heal": ("79.2%", "↑5.1×", "#8b5cf6"),
+            "detection_time": ("52s", "87% faster", "linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%)"),
+            "mttr": ("15m", "71% reduction", "linear-gradient(135deg, #10b981 0%, #047857 100%)"),
+            "auto_heal": ("79%", "5.1× improvement", "linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%)"),
             "savings_multiplier": 0.83
         },
-        # Network scenarios
         "Network": {
-            "detection_time": ("28s", "↓93%", "#3b82f6"),
-            "mttr": ("8m", "↓82%", "#10b981"),
-            "auto_heal": ("88.5%", "↑6.2×", "#8b5cf6"),
+            "detection_time": ("28s", "93% faster", "linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%)"),
+            "mttr": ("8m", "82% reduction", "linear-gradient(135deg, #10b981 0%, #047857 100%)"),
+            "auto_heal": ("89%", "6.2× improvement", "linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%)"),
             "savings_multiplier": 0.88
         },
-        # Storage scenarios
         "Storage": {
-            "detection_time": ("35s", "↓92%", "#3b82f6"),
-            "mttr": ("22m", "↓65%", "#10b981"),
-            "auto_heal": ("71.8%", "↑4.6×", "#8b5cf6"),
+            "detection_time": ("35s", "92% faster", "linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%)"),
+            "mttr": ("22m", "65% reduction", "linear-gradient(135deg, #10b981 0%, #047857 100%)"),
+            "auto_heal": ("72%", "4.6× improvement", "linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%)"),
             "savings_multiplier": 0.80
         },
-        # Default (fallback)
         "Default": {
-            "detection_time": ("42s", "↓90%", "#3b82f6"),
-            "mttr": ("14m", "↓70%", "#10b981"),
-            "auto_heal": ("78.9%", "↑5.0×", "#8b5cf6"),
+            "detection_time": ("42s", "90% faster", "linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%)"),
+            "mttr": ("14m", "70% reduction", "linear-gradient(135deg, #10b981 0%, #047857 100%)"),
+            "auto_heal": ("79%", "5.0× improvement", "linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%)"),
             "savings_multiplier": 0.85
         }
     }
@@ -139,49 +334,53 @@ def update_performance_metrics(scenario_name: str, scenarios=INCIDENT_SCENARIOS)
     # Get scenario data for savings calculation
     scenario_data = scenarios.get(scenario_name, {})
     business_impact = scenario_data.get("business_impact", {})
-    revenue_loss = business_impact.get('revenue_loss_per_hour', 8500)
+    revenue_loss = business_impact.get('revenue_risk_per_hour', 8500)  # Changed from 'revenue_loss_per_hour'
     savings_amount = int(revenue_loss * metrics["savings_multiplier"] / 1000)
     
-    # Create HTML for each metric card
+    # Create HTML for each metric card WITH GRADIENT BORDERS
     detection_time_html = f"""
-    <div style="border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px; background: white; margin: 8px; text-align: center; flex: 1; min-width: 140px; border-left: 4px solid {metrics['detection_time'][2]};">
+    <div style="border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px; background: white; margin: 8px; text-align: center; flex: 1; min-width: 140px; 
+                border-left: 4px solid; border-image: {metrics['detection_time'][2]}; border-image-slice: 1;">
         <div style="font-size: 28px; margin-bottom: 10px;">⏱️</div>
         <div>
             <h4 style="margin: 0 0 8px 0; font-size: 14px; color: #64748b; font-weight: 600;">Detection Time</h4>
-            <p style="font-size: 28px; font-weight: bold; color: {metrics['detection_time'][2]}; margin: 8px 0;">{metrics['detection_time'][0]}</p>
-            <p style="font-size: 12px; color: #64748b; margin: 0;">{metrics['detection_time'][1]} faster than average</p>
+            <p style="font-size: 28px; font-weight: bold; background: {metrics['detection_time'][2]}; -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin: 8px 0;">{metrics['detection_time'][0]}</p>
+            <p style="font-size: 12px; color: #64748b; margin: 0;">{metrics['detection_time'][1]} than baseline</p>
         </div>
     </div>
     """
     
     mttr_html = f"""
-    <div style="border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px; background: white; margin: 8px; text-align: center; flex: 1; min-width: 140px; border-left: 4px solid {metrics['mttr'][2]};">
+    <div style="border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px; background: white; margin: 8px; text-align: center; flex: 1; min-width: 140px;
+                border-left: 4px solid; border-image: {metrics['mttr'][2]}; border-image-slice: 1;">
         <div style="font-size: 28px; margin-bottom: 10px;">⚡</div>
         <div>
             <h4 style="margin: 0 0 8px 0; font-size: 14px; color: #64748b; font-weight: 600;">Mean Time to Resolve</h4>
-            <p style="font-size: 28px; font-weight: bold; color: {metrics['mttr'][2]}; margin: 8px 0;">{metrics['mttr'][0]}</p>
-            <p style="font-size: 12px; color: #64748b; margin: 0;">{metrics['mttr'][1]} faster than manual</p>
+            <p style="font-size: 28px; font-weight: bold; background: {metrics['mttr'][2]}; -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin: 8px 0;">{metrics['mttr'][0]}</p>
+            <p style="font-size: 12px; color: #64748b; margin: 0;">{metrics['mttr'][1]} than manual</p>
         </div>
     </div>
     """
     
     auto_heal_html = f"""
-    <div style="border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px; background: white; margin: 8px; text-align: center; flex: 1; min-width: 140px; border-left: 4px solid {metrics['auto_heal'][2]};">
-        <div style="font-size: 28px; margin-bottom: 10px;">🤖</div>
+    <div style="border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px; background: white; margin: 8px; text-align: center; flex: 1; min-width: 140px;
+                border-left: 4px solid; border-image: {metrics['auto_heal'][2]}; border-image-slice: 1;">
+        <div style="font-size: 28px; margin-bottom: 10px;">🛡️</div>
         <div>
             <h4 style="margin: 0 0 8px 0; font-size: 14px; color: #64748b; font-weight: 600;">Auto-Heal Rate</h4>
-            <p style="font-size: 28px; font-weight: bold; color: {metrics['auto_heal'][2]}; margin: 8px 0;">{metrics['auto_heal'][0]}</p>
-            <p style="font-size: 12px; color: #64748b; margin: 0;">{metrics['auto_heal'][1]} industry average</p>
+            <p style="font-size: 28px; font-weight: bold; background: {metrics['auto_heal'][2]}; -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin: 8px 0;">{metrics['auto_heal'][0]}</p>
+            <p style="font-size: 12px; color: #64748b; margin: 0;">{metrics['auto_heal'][1]}</p>
         </div>
     </div>
     """
     
     savings_html = f"""
-    <div style="border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px; background: white; margin: 8px; text-align: center; flex: 1; min-width: 140px; border-left: 4px solid #f59e0b;">
+    <div style="border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px; background: white; margin: 8px; text-align: center; flex: 1; min-width: 140px;
+                border-left: 4px solid; border-image: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); border-image-slice: 1;">
         <div style="font-size: 28px; margin-bottom: 10px;">💰</div>
         <div>
-            <h4 style="margin: 0 0 8px 0; font-size: 14px; color: #64748b; font-weight: 600;">Cost Saved</h4>
-            <p style="font-size: 28px; font-weight: bold; color: #f59e0b; margin: 8px 0;">${savings_amount:.1f}K</p>
+            <h4 style="margin: 0 0 8px 0; font-size: 14px; color: #64748b; font-weight: 600;">Cost Avoided</h4>
+            <p style="font-size: 28px; font-weight: bold; background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin: 8px 0;">${savings_amount:.1f}K</p>
             <p style="font-size: 12px; color: #64748b; margin: 0;">Per incident avoided</p>
         </div>
     </div>
@@ -191,13 +390,12 @@ def update_performance_metrics(scenario_name: str, scenarios=INCIDENT_SCENARIOS)
     return detection_time_html, mttr_html, auto_heal_html, savings_html
 
 # -----------------------------
-# Tab 1: Live Incident Demo - UPDATED WITH REALISM PANEL
+# Tab 1: Live Incident Demo - DOCTRINAL COMPLIANCE
 # -----------------------------
 def create_tab1_incident_demo(scenarios=INCIDENT_SCENARIOS, default_scenario="Cache Miss Storm") -> tuple:
     """
-    Create an expressive, comprehensive incident demo tab for ARF.
-    Shows the complete OSS analysis → Enterprise execution workflow.
-    UPDATED: Now includes realism panel for enterprise-seasoned SRE experience
+    Create doctrinally compliant incident demo tab.
+    Doctrinal: Language discipline, sequencing display, no early "critical"
     """
     
     # Get the default scenario data
@@ -212,18 +410,21 @@ def create_tab1_incident_demo(scenarios=INCIDENT_SCENARIOS, default_scenario="Ca
             scenario_dropdown = gr.Dropdown(
                 choices=list(scenarios.keys()),
                 value=default_scenario,
-                label="🎯 Select Incident Scenario",
-                info="Choose a production incident to analyze",
+                label="🎯 Select Variance Scenario",
+                info="Choose a production variance pattern to analyze",
                 interactive=True,
                 container=False
             )
             
-            # Scenario Card with rich information - USING INLINE STYLES
+            # ============ HISTORICAL EVIDENCE PANEL FIRST (RECALL DOMINANCE) ============
+            historical_panel = create_historical_evidence_panel(default_scenario_data)
+            
+            # Scenario Card with doctrinally compliant language
             scenario_card = gr.HTML(f"""
             <div style="border: 1px solid #e2e8f0; border-radius: 14px; padding: 20px; background: white; box-shadow: 0 4px 12px rgba(0,0,0,0.05); margin-bottom: 20px;">
                 <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 12px; border-bottom: 2px solid #f1f5f9;">
-                    <h3 style="margin: 0; font-size: 18px; color: #1e293b;">🚨 {default_scenario}</h3>
-                    <span style="padding: 4px 12px; background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); border-radius: 20px; font-size: 12px; font-weight: bold; color: white; text-transform: uppercase; letter-spacing: 0.5px;">{default_scenario_data.get('severity', 'HIGH')}</span>
+                    <h3 style="margin: 0; font-size: 18px; color: #1e293b;">📊 {default_scenario}</h3>
+                    <span style="padding: 4px 12px; background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); border-radius: 20px; font-size: 12px; font-weight: bold; color: white; text-transform: uppercase; letter-spacing: 0.5px;">{default_scenario_data.get('severity', 'HIGH_VARIANCE')}</span>
                 </div>
                 <div style="margin-top: 15px;">
                     <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; padding: 4px 0;">
@@ -231,32 +432,31 @@ def create_tab1_incident_demo(scenarios=INCIDENT_SCENARIOS, default_scenario="Ca
                         <span style="font-size: 14px; color: #1e293b; font-weight: 600;">{default_scenario_data.get('component', 'Unknown').replace('_', ' ').title()}</span>
                     </div>
                     <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; padding: 4px 0;">
-                        <span style="font-size: 13px; color: #64748b; font-weight: 500;">Affected Users:</span>
+                        <span style="font-size: 13px; color: #64748b; font-weight: 500;">Users Affected:</span>
                         <span style="font-size: 14px; color: #1e293b; font-weight: 600;">{metrics.get('affected_users', 'Unknown') if 'affected_users' in metrics else 'Unknown'}</span>
                     </div>
                     <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; padding: 4px 0;">
                         <span style="font-size: 13px; color: #64748b; font-weight: 500;">Revenue Risk:</span>
-                        <span style="font-size: 14px; color: #ef4444; font-weight: 700;">${business_impact.get('revenue_loss_per_hour', 0):,}/hour</span>
+                        <span style="font-size: 14px; color: #f59e0b; font-weight: 700;">${business_impact.get('revenue_risk_per_hour', 0):,}/hour</span>
                     </div>
                     <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; padding: 4px 0;">
                         <span style="font-size: 13px; color: #64748b; font-weight: 500;">Detection Time:</span>
-                        <span style="font-size: 14px; color: #1e293b; font-weight: 600;">45 seconds (ARF AI)</span>
+                        <span style="font-size: 14px; color: #1e293b; font-weight: 600;">45 seconds (Policy System)</span>
                     </div>
                     <div style="display: flex; flex-wrap: wrap; gap: 6px; margin-top: 15px; padding-top: 12px; border-top: 1px solid #f1f5f9;">
                         <span style="padding: 3px 8px; background: #f1f5f9; border-radius: 6px; font-size: 11px; color: #475569; font-weight: 500;">{default_scenario_data.get('component', 'unknown').split('_')[0]}</span>
-                        <span style="padding: 3px 8px; background: #f1f5f9; border-radius: 6px; font-size: 11px; color: #475569; font-weight: 500;">{default_scenario_data.get('severity', 'high').lower()}</span>
+                        <span style="padding: 3px 8px; background: #f1f5f9; border-radius: 6px; font-size: 11px; color: #475569; font-weight: 500;">variance</span>
                         <span style="padding: 3px 8px; background: #f1f5f9; border-radius: 6px; font-size: 11px; color: #475569; font-weight: 500;">production</span>
-                        <span style="padding: 3px 8px; background: #f1f5f9; border-radius: 6px; font-size: 11px; color: #475569; font-weight: 500;">incident</span>
+                        <span style="padding: 3px 8px; background: #f1f5f9; border-radius: 6px; font-size: 11px; color: #475569; font-weight: 500;">pattern</span>
                     </div>
                 </div>
             </div>
             """)
             
-            # Visualization section - USING gr.Plot() FOR PLOTLY FIGURES
+            # Visualization section
             with gr.Row():
                 with gr.Column(scale=1):
                     telemetry_header = gr.Markdown("### 📈 Live Telemetry")
-                    # This expects a Plotly figure from app.py
                     telemetry_viz = gr.Plot(
                         label="", 
                         show_label=False,
@@ -271,40 +471,81 @@ def create_tab1_incident_demo(scenarios=INCIDENT_SCENARIOS, default_scenario="Ca
                         elem_id="impact_plot"
                     )
         
-        # Middle Column: Agent Workflow
+        # Middle Column: Process Workflow (NOT Agent Workflow)
         with gr.Column(scale=2, variant="panel") as middle_col:
-            # ============ MOVED: Safety Controls Section (Now appears BEFORE Agent Workflow) ============
-            # Mode Selection & Safety Controls
-            with gr.Row():
-                with gr.Column(scale=1):
-                    approval_toggle = gr.CheckboxGroup(
-                        choices=["👤 Require Human Approval"],
-                        label="Safety Controls",
-                        value=[],
-                        info="Toggle human oversight"
-                    )
+            # ============ OBSERVATION GATE PLACEHOLDER ============
+            observation_gate_placeholder = gr.HTML("""
+            <div style="text-align: center; padding: 30px; color: #64748b; background: #f8fafc; border-radius: 12px; margin-bottom: 20px;">
+                <div style="font-size: 48px; margin-bottom: 10px;">🎯</div>
+                <h4 style="margin: 0 0 10px 0;">System State</h4>
+                <p style="margin: 0;">Run analysis to see system's judgment under uncertainty</p>
+            </div>
+            """)
+            
+            # ============ SEQUENCING VISUALIZATION ============
+            sequencing_header = gr.Markdown("### 🔄 Sequencing Logic: Dampening → Concurrency → Observe → Scale")
+            sequencing_panel = gr.HTML("""
+            <div style="border: 2px solid #e2e8f0; border-radius: 14px; padding: 20px; background: #f8fafc; margin-bottom: 20px;">
+                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
+                    <h4 style="margin: 0; font-size: 16px; color: #1e293b; font-weight: 600;">Doctrinal Sequencing</h4>
+                    <span style="padding: 4px 12px; background: #dbeafe; color: #1e40af; border-radius: 20px; font-size: 11px; font-weight: bold;">POLICY ENFORCED</span>
+                </div>
                 
-                with gr.Column(scale=2):
-                    mcp_mode = gr.Radio(
-                        choices=["🛡️ Advisory (OSS Only)", "👥 Approval", "⚡ Autonomous"],
-                        value="🛡️ Advisory (OSS Only)",
-                        label="MCP Safety Mode",
-                        info="Control execution safety level",
-                        interactive=True
-                    )
+                <div style="display: flex; justify-content: space-between; align-items: center; position: relative; margin-bottom: 25px;">
+                    <div style="position: absolute; top: -10px; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, #3b82f6, #10b981, #8b5cf6, #f59e0b);"></div>
+                    
+                    <div style="text-align: center; position: relative; flex: 1;">
+                        <div style="width: 50px; height: 50px; background: #3b82f6; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; font-size: 20px; font-weight: bold;">1</div>
+                        <div style="font-size: 13px; font-weight: 600; color: #1e293b;">Dampening</div>
+                        <div style="font-size: 11px; color: #64748b;">Prevent amplification</div>
+                    </div>
+                    
+                    <div style="font-size: 20px; color: #94a3b8;">→</div>
+                    
+                    <div style="text-align: center; position: relative; flex: 1;">
+                        <div style="width: 50px; height: 50px; background: #10b981; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; font-size: 20px; font-weight: bold;">2</div>
+                        <div style="font-size: 13px; font-weight: 600; color: #1e293b;">Concurrency Control</div>
+                        <div style="font-size: 11px; color: #64748b;">Manage load</div>
+                    </div>
+                    
+                    <div style="font-size: 20px; color: #94a3b8;">→</div>
+                    
+                    <div style="text-align: center; position: relative; flex: 1;">
+                        <div style="width: 50px; height: 50px; background: #8b5cf6; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; font-size: 20px; font-weight: bold;">3</div>
+                        <div style="font-size: 13px; font-weight: 600; color: #1e293b;">Observe</div>
+                        <div style="font-size: 11px; color: #64748b;">Validate trends</div>
+                    </div>
+                    
+                    <div style="font-size: 20px; color: #94a3b8;">→</div>
+                    
+                    <div style="text-align: center; position: relative; flex: 1;">
+                        <div style="width: 50px; height: 50px; background: #f59e0b; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; font-size: 20px; font-weight: bold;">4</div>
+                        <div style="font-size: 13px; font-weight: 600; color: #1e293b;">Scale</div>
+                        <div style="font-size: 11px; color: #64748b;">Only if necessary</div>
+                    </div>
+                </div>
+                
+                <div style="padding: 15px; background: white; border-radius: 10px; border-left: 4px solid #3b82f6;">
+                    <div style="font-size: 13px; color: #475569; font-weight: 500;">
+                        <strong>Doctrinal Constraint:</strong> Scaling NEVER appears in same intent bundle as dampening. 
+                        System must observe stabilization before considering capacity increases.
+                    </div>
+                </div>
+            </div>
+            """)
             
-            # Agent Workflow Header
-            workflow_header = gr.Markdown("## 🔄 ARF Agent Workflow")
-            workflow_subheader = gr.Markdown("### How ARF transforms incidents into autonomous healing")
+            # Process Workflow Header (NOT Agent Workflow)
+            workflow_header = gr.Markdown("## 🔄 Policy Process Workflow")
+            workflow_subheader = gr.Markdown("### How the system transforms variance into policy execution")
             
-            # Agent Status Cards - USING INLINE STYLES
+            # Process Status Cards (NOT Agent Status Cards)
             with gr.Row():
-                detection_agent = gr.HTML("""
+                detection_process = gr.HTML("""
                 <div style="border: 2px solid #e2e8f0; border-radius: 14px; padding: 18px; background: #f8fafc; text-align: center; flex: 1; margin: 5px; min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0.7;">
                     <div style="font-size: 32px; margin-bottom: 10px; opacity: 0.5;">🕵️‍♂️</div>
                     <div style="width: 100%;">
-                        <h4 style="margin: 0 0 8px 0; font-size: 16px; color: #94a3b8;">Detection Agent</h4>
-                        <p style="font-size: 13px; color: #cbd5e1; margin-bottom: 12px; line-height: 1.4;">Click "Run OSS Analysis" to activate</p>
+                        <h4 style="margin: 0 0 8px 0; font-size: 16px; color: #94a3b8;">Detection Process</h4>
+                        <p style="font-size: 13px; color: #cbd5e1; margin-bottom: 12px; line-height: 1.4;">Click "Run Policy Analysis" to activate</p>
                         <div style="display: flex; justify-content: space-around; margin-bottom: 12px;">
                             <span style="font-size: 11px; padding: 3px 8px; background: rgba(255, 255, 255, 0.5); border-radius: 6px; color: #cbd5e1; font-weight: 500;">Status: Inactive</span>
                         </div>
@@ -313,12 +554,12 @@ def create_tab1_incident_demo(scenarios=INCIDENT_SCENARIOS, default_scenario="Ca
                 </div>
                 """)
                 
-                recall_agent = gr.HTML("""
+                recall_process = gr.HTML("""
                 <div style="border: 2px solid #e2e8f0; border-radius: 14px; padding: 18px; background: #f8fafc; text-align: center; flex: 1; margin: 5px; min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0.7;">
                     <div style="font-size: 32px; margin-bottom: 10px; opacity: 0.5;">🧠</div>
                     <div style="width: 100%;">
-                        <h4 style="margin: 0 0 8px 0; font-size: 16px; color: #94a3b8;">Recall Agent</h4>
-                        <p style="font-size: 13px; color: #cbd5e1; margin-bottom: 12px; line-height: 1.4;">Click "Run OSS Analysis" to activate</p>
+                        <h4 style="margin: 0 0 8px 0; font-size: 16px; color: #94a3b8;">Recall Process</h4>
+                        <p style="font-size: 13px; color: #cbd5e1; margin-bottom: 12px; line-height: 1.4;">Click "Run Policy Analysis" to activate</p>
                         <div style="display: flex; justify-content: space-around; margin-bottom: 12px;">
                             <span style="font-size: 11px; padding: 3px 8px; background: rgba(255, 255, 255, 0.5); border-radius: 6px; color: #cbd5e1; font-weight: 500;">Status: Inactive</span>
                         </div>
@@ -327,12 +568,12 @@ def create_tab1_incident_demo(scenarios=INCIDENT_SCENARIOS, default_scenario="Ca
                 </div>
                 """)
                 
-                decision_agent = gr.HTML("""
+                decision_process = gr.HTML("""
                 <div style="border: 2px solid #e2e8f0; border-radius: 14px; padding: 18px; background: #f8fafc; text-align: center; flex: 1; margin: 5px; min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0.7;">
                     <div style="font-size: 32px; margin-bottom: 10px; opacity: 0.5;">🎯</div>
                     <div style="width: 100%;">
-                        <h4 style="margin: 0 0 8px 0; font-size: 16px; color: #94a3b8;">Decision Agent</h4>
-                        <p style="font-size: 13px; color: #cbd5e1; margin-bottom: 12px; line-height: 1.4;">Click "Run OSS Analysis" to activate</p>
+                        <h4 style="margin: 0 0 8px 0; font-size: 16px; color: #94a3b8;">Decision Process</h4>
+                        <p style="font-size: 13px; color: #cbd5e1; margin-bottom: 12px; line-height: 1.4;">Click "Run Policy Analysis" to activate</p>
                         <div style="display: flex; justify-content: space-around; margin-bottom: 12px;">
                             <span style="font-size: 11px; padding: 3px 8px; background: rgba(255, 255, 255, 0.5); border-radius: 6px; color: #cbd5e1; font-weight: 500;">Status: Inactive</span>
                         </div>
@@ -341,15 +582,34 @@ def create_tab1_incident_demo(scenarios=INCIDENT_SCENARIOS, default_scenario="Ca
                 </div>
                 """)
             
+            # Mode Selection & Safety Controls
+            with gr.Row():
+                with gr.Column(scale=1):
+                    approval_toggle = gr.CheckboxGroup(
+                        choices=["👤 Require Human Approval"],
+                        label="Safety Controls",
+                        value=[],
+                        info="Toggle human oversight"
+                    )
+                
+                with gr.Column(scale=2):
+                    mcp_mode = gr.Radio(
+                        choices=["🛡️ Advisory (OSS Only)", "👥 Approval", "⚡ Autonomous"],
+                        value="🛡️ Advisory (OSS Only)",
+                        label="Policy Safety Mode",
+                        info="Control execution safety level",
+                        interactive=True
+                    )
+            
             # OSS vs Enterprise Boundary Visualization
-            boundary_header = gr.Markdown("### 🎭 OSS vs Enterprise: The Safety Boundary")
+            boundary_header = gr.Markdown("### 🎭 Policy vs Execution: The Safety Boundary")
             
             with gr.Row():
                 oss_section = gr.HTML("""
                 <div style="padding: 20px; border-radius: 14px; margin-bottom: 15px; flex: 1; min-height: 320px; background: #f0f9ff; border: 2px solid #0ea5e9;">
                     <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 15px; padding-bottom: 12px; border-bottom: 2px solid rgba(0, 0, 0, 0.1);">
                         <div style="font-size: 28px;">🆓</div>
-                        <h3 style="margin: 0; font-size: 20px; color: #1e293b; flex: 1;">OSS Edition</h3>
+                        <h3 style="margin: 0; font-size: 20px; color: #1e293b; flex: 1;">Policy Edition</h3>
                         <span style="padding: 4px 10px; background: rgba(255, 255, 255, 0.9); border-radius: 8px; font-size: 11px; font-weight: bold; color: #475569;">Apache 2.0</span>
                     </div>
                     <div style="margin-bottom: 20px; padding: 12px; background: rgba(255, 255, 255, 0.7); border-radius: 10px;">
@@ -357,14 +617,14 @@ def create_tab1_incident_demo(scenarios=INCIDENT_SCENARIOS, default_scenario="Ca
                     </div>
                     <div style="background: white; border-radius: 12px; padding: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.05);">
                         <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #f1f5f9;">
-                            <h4 style="margin: 0; font-size: 16px; color: #1e293b;">📝 Healing Intent Created</h4>
+                            <h4 style="margin: 0; font-size: 16px; color: #1e293b;">📝 HealingIntent Created</h4>
                             <span style="padding: 4px 10px; background: #dbeafe; color: #1d4ed8; border-radius: 6px; font-size: 12px; font-weight: bold;">94% confidence</span>
                         </div>
                         <div>
-                            <p style="margin: 8px 0; font-size: 14px; color: #475569;"><strong>Action:</strong> Scale Redis cluster from 3 to 5 nodes</p>
-                            <p style="margin: 8px 0; font-size: 14px; color: #475569;"><strong>Pattern Match:</strong> Similar incident resolved with scaling (87% success rate)</p>
-                            <p style="margin: 8px 0; font-size= 14px; color: #475569;"><strong>Safety Check:</strong> ✅ Passed (blast radius: 2 services)</p>
-                            <p style="margin: 8px 0; font-size: 14px; color: #475569;"><strong>Estimated Impact:</strong> Reduce MTTR from 45min to 12min</p>
+                            <p style="margin: 8px 0; font-size: 14px; color: #475569;"><strong>Action:</strong> Implement request coalescing with exponential backoff</p>
+                            <p style="margin: 8px 0; font-size: 14px; color: #475569;"><strong>Pattern Match:</strong> Similar incident resolved with dampening (87% success rate)</p>
+                            <p style="margin: 8px 0; font-size= 14px; color: #475569;"><strong>Contraindications:</strong> ✅ Checked (retry amplification detected)</p>
+                            <p style="margin: 8px 0; font-size: 14px; color: #475569;"><strong>Sequencing Rule:</strong> dampening_first_then_observe_then_optional_scale</p>
                         </div>
                         <div style="margin-top: 20px; text-align: center;">
                             <div style="height: 2px; background: linear-gradient(90deg, transparent, #3b82f6, transparent); margin: 8px 0;"></div>
@@ -379,7 +639,7 @@ def create_tab1_incident_demo(scenarios=INCIDENT_SCENARIOS, default_scenario="Ca
                 <div style="padding: 20px; border-radius: 14px; margin-bottom: 15px; flex: 1; min-height: 320px; background: #f0fdf4; border: 2px solid #10b981;">
                     <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 15px; padding-bottom: 12px; border-bottom: 2px solid rgba(0, 0, 0, 0.1);">
                         <div style="font-size: 28px;">💰</div>
-                        <h3 style="margin: 0; font-size: 20px; color: #1e293b; flex: 1;">Enterprise Edition</h3>
+                        <h3 style="margin: 0; font-size: 20px; color: #1e293b; flex: 1;">Execution Edition</h3>
                         <span style="padding: 4px 10px; background: rgba(255, 255, 255, 0.9); border-radius: 8px; font-size: 11px; font-weight: bold; color: #475569;">Commercial</span>
                     </div>
                     <div style="margin-bottom: 20px; padding: 12px; background: rgba(255, 255, 255, 0.7); border-radius: 10px;">
@@ -393,7 +653,7 @@ def create_tab1_incident_demo(scenarios=INCIDENT_SCENARIOS, default_scenario="Ca
                         <div>
                             <p style="margin: 8px 0; font-size: 14px; color: #475569;"><strong>Mode:</strong> Autonomous (Requires Enterprise license)</p>
                             <p style="margin: 8px 0; font-size: 14px; color: #475569;"><strong>Expected Recovery:</strong> 12 minutes (vs 45 min manual)</p>
-                            <p style="margin: 8px 0; font-size: 14px; color: #475569;"><strong>Cost Saved:</strong> <span style="color: #10b981; font-weight: 700;">$6,375</span></p>
+                            <p style="margin: 8px 0; font-size: 14px; color: #475569;"><strong>Cost Avoided:</strong> <span style="color: #10b981; font-weight: 700;">$6,375</span></p>
                             <p style="margin: 8px 0; font-size= 14px; color: #475569;"><strong>Users Protected:</strong> 45,000 → 0 impacted</p>
                         </div>
                         <div style="margin-top: 20px; text-align: center;">
@@ -409,11 +669,11 @@ def create_tab1_incident_demo(scenarios=INCIDENT_SCENARIOS, default_scenario="Ca
             with gr.Row():
                 with gr.Column(scale=1):
                     oss_btn = gr.Button(
-                        "🆓 Run OSS Analysis",
+                        "🆓 Run Policy Analysis",
                         variant="secondary",
                         size="lg"
                     )
-                    oss_info = gr.Markdown("*Free, open-source analysis*")
+                    oss_info = gr.Markdown("*Free, policy-only analysis*")
                 
                 with gr.Column(scale=1):
                     enterprise_btn = gr.Button(
@@ -430,84 +690,32 @@ def create_tab1_incident_demo(scenarios=INCIDENT_SCENARIOS, default_scenario="Ca
                 show_label=False,
                 elem_id="timeline_plot"
             )
-            
-            # ============ NEW: Realism Panel Section ============
-            realism_header = gr.Markdown("### 🎭 Realism: Trade-offs & Uncertainty")
-            realism_panel = gr.HTML(
-                value="""<div style="text-align: center; padding: 30px; color: #64748b;">
-                           <div style="font-size: 48px; margin-bottom: 10px;">🔧</div>
-                           <h4 style="margin: 0 0 10px 0;">Realism Panel</h4>
-                           <p style="margin: 0;">Select a scenario to see ranked actions, risks, and trade-offs</p>
-                         </div>""",
-                elem_id="realism_panel"
-            )
         
         # Right Column: Results & Metrics
         with gr.Column(scale=1, variant="panel") as right_col:
             # Real-time Metrics Dashboard
             metrics_header = gr.Markdown("## 📊 Performance Metrics")
             
-            # Metric Cards Grid - USING INLINE STYLES
-            with gr.Row():
-                detection_time = gr.HTML("""
-                <div style="border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px; background: white; margin: 8px; text-align: center; flex: 1; min-width: 140px; border-left: 4px solid #3b82f6;">
-                    <div style="font-size: 28px; margin-bottom: 10px;">⏱️</div>
-                    <div>
-                        <h4 style="margin: 0 0 8px 0; font-size: 14px; color: #64748b; font-weight: 600;">Detection Time</h4>
-                        <p style="font-size: 28px; font-weight: bold; color: #1e40af; margin: 8px 0;">45s</p>
-                        <p style="font-size: 12px; color: #64748b; margin: 0;">↓ 89% faster than average</p>
-                    </div>
-                </div>
-                """)
-                
-                mttr = gr.HTML("""
-                <div style="border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px; background: white; margin: 8px; text-align: center; flex: 1; min-width: 140px; border-left: 4px solid #10b981;">
-                    <div style="font-size: 28px; margin-bottom: 10px;">⚡</div>
-                    <div>
-                        <h4 style="margin: 0 0 8px 0; font-size: 14px; color: #64748b; font-weight: 600;">Mean Time to Resolve</h4>
-                        <p style="font-size: 28px; font-weight: bold; color: #10b981; margin: 8px 0;">12m</p>
-                        <p style="font-size: 12px; color: #64748b; margin: 0;">↓ 73% faster than manual</p>
-                    </div>
-                </div>
-                """)
-            
-            with gr.Row():
-                auto_heal = gr.HTML("""
-                <div style="border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px; background: white; margin: 8px; text-align: center; flex: 1; min-width: 140px; border-left: 4px solid #8b5cf6;">
-                    <div style="font-size: 28px; margin-bottom: 10px;">🤖</div>
-                    <div>
-                        <h4 style="margin: 0 0 8px 0; font-size: 14px; color: #64748b; font-weight: 600;">Auto-Heal Rate</h4>
-                        <p style="font-size: 28px; font-weight: bold; color: #8b5cf6; margin: 8px 0;">81.7%</p>
-                        <p style="font-size: 12px; color: #64748b; margin: 0;">↑ 5.4× industry average</p>
-                    </div>
-                </div>
-                """)
-                
-                savings = gr.HTML(f"""
-                <div style="border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px; background: white; margin: 8px; text-align: center; flex: 1; min-width: 140px; border-left: 4px solid #f59e0b;">
-                    <div style="font-size: 28px; margin-bottom: 10px;">💰</div>
-                    <div>
-                        <h4 style="margin: 0 0 8px 0; font-size: 14px; color: #64748b; font-weight: 600;">Cost Saved</h4>
-                        <p style="font-size: 28px; font-weight: bold; color: #f59e0b; margin: 8px 0;">${int(business_impact.get('revenue_loss_per_hour', 8500) * 0.85 / 1000):.1f}K</p>
-                        <p style="font-size: 12px; color: #64748b; margin: 0;">Per incident avoided</p>
-                    </div>
-                </div>
-                """)
+            # Metric Cards Grid - CALL update_performance_metrics function
+            detection_time = gr.HTML()
+            mttr = gr.HTML()
+            auto_heal = gr.HTML()
+            savings = gr.HTML()
             
             # Results Display Areas
-            oss_results_header = gr.Markdown("### 🆓 OSS Analysis Results")
+            oss_results_header = gr.Markdown("### 🆓 Policy Analysis Results")
             oss_results_display = gr.JSON(
                 label="",
                 value={
                     "status": "Analysis Pending",
-                    "agents": ["Detection", "Recall", "Decision"],
+                    "processes": ["Detection", "Recall", "Decision"],
                     "mode": "Advisory Only",
-                    "action": "Generate HealingIntent"
+                    "action": "Generate Formal HealingIntent"
                 },
                 height=200
             )
             
-            enterprise_results_header = gr.Markdown("### 💰 Enterprise Results") 
+            enterprise_results_header = gr.Markdown("### 💰 Execution Results") 
             enterprise_results_display = gr.JSON(
                 label="",
                 value={
@@ -519,7 +727,7 @@ def create_tab1_incident_demo(scenarios=INCIDENT_SCENARIOS, default_scenario="Ca
                 height=200
             )
             
-            # Approval Status - USING INLINE STYLES
+            # Approval Status
             approval_display = gr.HTML("""
             <div style="border: 2px solid #e2e8f0; border-radius: 14px; padding: 20px; background: white; margin-top: 20px;">
                 <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 12px; border-bottom: 2px solid #f1f5f9;">
@@ -527,12 +735,12 @@ def create_tab1_incident_demo(scenarios=INCIDENT_SCENARIOS, default_scenario="Ca
                     <span style="padding: 4px 12px; background: #10b981; color: white; border-radius: 8px; font-size: 12px; font-weight: bold; text-transform: uppercase;">Not Required</span>
                 </div>
                 <div style="margin-top: 15px;">
-                    <p style="margin: 8px 0; font-size: 14px; color: #475569;"><strong>Current Mode:</strong> Advisory (OSS Only)</p>
+                    <p style="margin: 8px 0; font-size: 14px; color: #475569;"><strong>Current Mode:</strong> Advisory (Policy Only)</p>
                     <p style="margin: 8px 0; font-size: 14px; color: #475569; font-style: italic;">Switch to "Approval" mode to enable human-in-the-loop workflows</p>
                     <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 20px;">
-                        <div style="padding: 12px; background: #f8fafc; border-radius: 10px; border-left: 4px solid #3b82f6; font-size: 14px; color: #475569; font-weight: 500;">1. ARF generates intent</div>
-                        <div style="padding: 12px; background: #f8fafc; border-radius: 10px; border-left: 4px solid #3b82f6; font-size: 14px; color: #475569; font-weight: 500;">2. Human reviews & approves</div>
-                        <div style="padding: 12px; background: #f8fafc; border-radius: 10px; border-left: 4px solid #3b82f6; font-size: 14px; color: #475569; font-weight: 500;">3. ARF executes safely</div>
+                        <div style="padding: 12px; background: #f8fafc; border-radius: 10px; border-left: 4px solid #3b82f6; font-size: 14px; color: #475569; font-weight: 500;">1. System generates formal HealingIntent</div>
+                        <div style="padding: 12px; background: #f8fafc; border-radius: 10px; border-left: 4px solid #3b82f6; font-size: 14px; color: #475569; font-weight: 500;">2. Human reviews & approves contraindications</div>
+                        <div style="padding: 12px; background: #f8fafc; border-radius: 10px; border-left: 4px solid #3b82f6; font-size: 14px; color: #475569; font-weight: 500;">3. System executes with sequencing constraints</div>
                     </div>
                 </div>
             </div>
@@ -540,24 +748,187 @@ def create_tab1_incident_demo(scenarios=INCIDENT_SCENARIOS, default_scenario="Ca
             
             # Demo Actions
             demo_btn = gr.Button(
-                "▶️ Run Complete Demo Walkthrough",
+                "▶️ Run Complete Walkthrough",
                 variant="secondary",
                 size="lg"
             )
-            demo_info = gr.Markdown("*Experience the full ARF workflow from detection to resolution*")
+            demo_info = gr.Markdown("*Experience the full workflow from detection to resolution*")
     
     return (
         # Left column returns
-        scenario_dropdown, scenario_card, telemetry_viz, impact_viz,
-        # Middle column returns (WITH REALISM PANEL)
-        workflow_header, detection_agent, recall_agent, decision_agent,
-        oss_section, enterprise_section, oss_btn, enterprise_btn, 
-        approval_toggle, mcp_mode, timeline_viz, realism_panel,
+        scenario_dropdown, historical_panel, scenario_card, telemetry_viz, impact_viz,
+        # Middle column returns
+        observation_gate_placeholder, sequencing_panel, workflow_header, detection_process, 
+        recall_process, decision_process, oss_section, enterprise_section, oss_btn, enterprise_btn, 
+        approval_toggle, mcp_mode, timeline_viz,
         # Right column returns
         detection_time, mttr, auto_heal, savings,
         oss_results_display, enterprise_results_display, approval_display, demo_btn
     )
 
+# -----------------------------
+# NEW: Create Realism Panel (Updated for doctrinal compliance)
+# -----------------------------
+def create_realism_panel(scenario_data: Dict, scenario_name: str) -> gr.HTML:
+    """
+    Create doctrinally compliant realism panel.
+    Updated to show formal HealingIntent fields and sequencing logic.
+    """
+    ranked_actions = scenario_data.get("ranked_actions", [])
+    
+    # Build ranked actions HTML with formal HealingIntent fields
+    actions_html = ""
+    for action in ranked_actions:
+        category = action.get("category", "unknown")
+        category_color = {
+            "dampening": "#3b82f6",
+            "concurrency_control": "#10b981", 
+            "observation": "#8b5cf6",
+            "scaling": "#f59e0b"
+        }.get(category, "#64748b")
+        
+        rank_color = "#3b82f6" if action["rank"] == 1 else "#f59e0b" if action["rank"] == 2 else "#64748b"
+        status = "✅ RECOMMENDED" if action["rank"] == 1 else "🟡 SECONDARY" if action["rank"] == 2 else "🔴 CONTRAINDICATED"
+        
+        # Formal HealingIntent fields
+        preconditions_html = ""
+        if action.get("preconditions"):
+            preconditions_html = f"""
+            <div style="margin-top: 10px; padding: 10px; background: #f8fafc; border-radius: 8px; border-left: 3px solid #3b82f6;">
+                <div style="font-size: 12px; color: #475569; font-weight: 600; margin-bottom: 5px;">Preconditions:</div>
+                {"".join([f'<div style="font-size: 11px; color: #64748b; margin-bottom: 3px;">• {pre}</div>' for pre in action["preconditions"]])}
+            </div>
+            """
+        
+        contraindications_html = ""
+        if action.get("contraindicated_actions"):
+            contraindications_html = f"""
+            <div style="margin-top: 10px; padding: 10px; background: #fef2f2; border-radius: 8px; border-left: 3px solid #ef4444;">
+                <div style="font-size: 12px; color: #7f1d1d; font-weight: 600; margin-bottom: 5px;">Contraindicated Actions:</div>
+                {"".join([f'<div style="font-size: 11px; color: #b91c1c; margin-bottom: 3px;">⛔ {contra}</div>' for contra in action["contraindicated_actions"]])}
+            </div>
+            """
+        
+        reversibility_html = ""
+        if action.get("reversibility_statement"):
+            reversibility_html = f"""
+            <div style="margin-top: 10px; padding: 10px; background: #f0fdf4; border-radius: 8px; border-left: 3px solid #10b981;">
+                <div style="font-size: 12px; color: #065f46; font-weight: 600; margin-bottom: 5px;">Reversibility Statement:</div>
+                <div style="font-size: 11px; color: #047857;">{action["reversibility_statement"]}</div>
+            </div>
+            """
+        
+        historical_evidence_html = ""
+        if action.get("historical_evidence"):
+            historical_evidence_html = f"""
+            <div style="margin-top: 10px; padding: 10px; background: #fef3c7; border-radius: 8px; border-left: 3px solid #f59e0b;">
+                <div style="font-size: 12px; color: #92400e; font-weight: 600; margin-bottom: 5px;">Historical Evidence:</div>
+                {"".join([f'<div style="font-size: 11px; color: #b45309; margin-bottom: 3px;">📊 {evidence}</div>' for evidence in action["historical_evidence"]])}
+            </div>
+            """
+        
+        actions_html += f"""
+        <div style="border: 2px solid {category_color}; border-radius: 12px; padding: 16px; 
+                   background: {category_color}10; margin-bottom: 12px;">
+            <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px;">
+                <div style="flex: 1;">
+                    <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 5px;">
+                        <div style="width: 24px; height: 24px; background: {category_color}; 
+                                 color: white; border-radius: 50%; display: flex; align-items: center; 
+                                 justify-content: center; font-size: 12px; font-weight: bold;">
+                            {action['rank']}
+                        </div>
+                        <span style="font-size: 14px; font-weight: 600; color: #1e293b;">
+                            {status} • {action.get('confidence', 0)}% confidence
+                        </span>
+                        <span style="padding: 3px 8px; background: {category_color}30; color: {category_color}; border-radius: 12px; font-size: 11px; font-weight: bold;">
+                            {category.upper().replace('_', ' ')}
+                        </span>
+                    </div>
+                    <p style="font-size: 14px; color: #475569; margin: 8px 0; font-weight: 500;">
+                        {action.get('action', 'No action specified')}
+                    </p>
+                </div>
+                <div style="padding: 6px 12px; background: {category_color}20; border-radius: 20px; 
+                           font-size: 12px; font-weight: bold; color: {category_color};">
+                    {action.get('confidence', 0)}%
+                </div>
+            </div>
+            
+            {preconditions_html}
+            {contraindications_html}
+            {reversibility_html}
+            {historical_evidence_html}
+            
+            <div style="margin-top: 10px; font-size: 12px; color: #64748b;">
+                <strong>Sequencing:</strong> {action.get('category', 'unknown').replace('_', ' ')} • {action.get('constraints', ['No constraints'])[0]}
+            </div>
+        </div>
+        """
+    
+    # Combine all panels
+    full_html = f"""
+    <div style="border: 2px solid #3b82f6; border-radius: 16px; padding: 25px; 
+                background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%); margin-top: 20px;">
+        
+        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
+            <div>
+                <h3 style="margin: 0 0 8px 0; font-size: 18px; color: #1e293b; font-weight: 700;">
+                    🎯 Formal HealingIntent Sequence
+                </h3>
+                <p style="margin: 0; font-size: 13px; color: #64748b;">
+                    Policy-generated intents with preconditions, contraindications, and reversibility statements
+                </p>
+            </div>
+            <div style="padding: 8px 16px; background: #dbeafe; color: #1e40af; 
+                       border-radius: 20px; font-size: 12px; font-weight: bold;">
+                DOCTRINAL COMPLIANCE v3.3.9+
+            </div>
+        </div>
+        
+        {actions_html if actions_html else '<div style="text-align: center; padding: 30px; color: #64748b;">No ranked actions available</div>'}
+        
+        <!-- Doctrinal Sequencing Summary -->
+        <div style="margin-top: 25px; padding-top: 20px; border-top: 2px solid #e2e8f0;">
+            <div style="font-size: 15px; font-weight: 600; color: #1e293b; margin-bottom: 15px;">
+                🔄 Doctrinal Sequencing Enforcement
+            </div>
+            <div style="background: #f8fafc; border-radius: 12px; padding: 20px;">
+                <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; text-align: center;">
+                    <div>
+                        <div style="width: 40px; height: 40px; background: #3b82f6; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; font-weight: bold;">1</div>
+                        <div style="font-size: 12px; font-weight: 600; color: #1e293b;">Dampening</div>
+                        <div style="font-size: 10px; color: #64748b;">First in sequence</div>
+                    </div>
+                    <div>
+                        <div style="width: 40px; height: 40px; background: #10b981; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; font-weight: bold;">2</div>
+                        <div style="font-size: 12px; font-weight: 600; color: #1e293b;">Concurrency</div>
+                        <div style="font-size: 10px; color: #64748b;">Then control</div>
+                    </div>
+                    <div>
+                        <div style="width: 40px; height: 40px; background: #8b5cf6; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; font-weight: bold;">3</div>
+                        <div style="font-size: 12px; font-weight: 600; color: #1e293b;">Observe</div>
+                        <div style="font-size: 10px; color: #64748b;">Then validate</div>
+                    </div>
+                    <div>
+                        <div style="width: 40px; height: 40px; background: #f59e0b; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; font-weight: bold;">4</div>
+                        <div style="font-size: 12px; font-weight: 600; color: #1e293b;">Scale</div>
+                        <div style="font-size: 10px; color: #64748b;">Only if necessary</div>
+                    </div>
+                </div>
+                <div style="margin-top: 15px; padding: 12px; background: white; border-radius: 8px; border-left: 4px solid #3b82f6;">
+                    <div style="font-size: 13px; color: #475569; font-weight: 500;">
+                        <strong>Doctrinal Constraint:</strong> Scaling actions have lower confidence than dampening actions and appear last.
+                        If retry amplification is detected, scaling is contraindicated entirely.
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    """
+    
+    return gr.HTML(full_html)
+
 # -----------------------------
 # Tab 2: Business ROI - Updated
 # -----------------------------