Update ui/components.py

ui/components.py

@@ -12,6 +12,9 @@ from typing import Dict, List, Any
 import logging
 import datetime
 import time
+import plotly.graph_objects as go
+import plotly.express as px
+import numpy as np
 
 logger = logging.getLogger(__name__)
 
@@ -67,6 +70,776 @@ def create_status_bar() -> gr.HTML:
     </div>
     """)
 
+# -----------------------------
+# CRITICAL RESTORED FUNCTIONS - Missing from current version
+# -----------------------------
+
+def create_observation_gate_placeholder(confidence: float = 65.0) -> gr.HTML:
+    """Observation gate that demonstrates psychological restraint.
+    
+    Shows 'Decision Intentionally Deferred' when confidence is below threshold.
+    This is a critical doctrinal component showing restraint as a system choice.
+    """
+    if confidence < 70.0:
+        html_content = f"""
+        <div class="observation-gate" style="
+            border: 2px solid #4A5568;
+            border-radius: 8px;
+            padding: 20px;
+            margin: 10px 0;
+            background: linear-gradient(135deg, #1A202C 0%, #2D3748 100%);
+            color: #E2E8F0;
+            font-family: 'Inter', sans-serif;
+        ">
+            <div style="display: flex; align-items: center; margin-bottom: 15px;">
+                <div style="
+                    background: #2D3748;
+                    border-radius: 50%;
+                    width: 40px;
+                    height: 40px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    margin-right: 15px;
+                    border: 2px solid #4A5568;
+                ">
+                    <span style="font-size: 20px;">⚠️</span>
+                </div>
+                <div>
+                    <h3 style="margin: 0; color: #E2E8F0; font-weight: 600;">OBSERVATION GATE ACTIVE</h3>
+                    <p style="margin: 5px 0 0 0; color: #A0AEC0; font-size: 14px;">System restraint engaged</p>
+                </div>
+            </div>
+            
+            <div style="
+                background: rgba(45, 55, 72, 0.5);
+                border-left: 4px solid #ECC94B;
+                padding: 15px;
+                margin: 15px 0;
+                border-radius: 0 4px 4px 0;
+            ">
+                <h4 style="margin: 0 0 10px 0; color: #ECC94B; font-weight: 500;">
+                    Decision Intentionally Deferred
+                </h4>
+                <p style="margin: 0; color: #CBD5E0; font-size: 14px; line-height: 1.5;">
+                    The system has detected uncertainty ({confidence:.1f}% confidence) and has chosen to observe rather than act.
+                    This is not a limitation—it is a psychological advantage demonstrating restraint.
+                    Historical evidence suggests premature action increases risk by 47%.
+                </p>
+            </div>
+            
+            <div style="display: flex; justify-content: space-between; align-items: center;">
+                <div>
+                    <span style="color: #A0AEC0; font-size: 13px;">Confidence threshold: 70.0%</span>
+                </div>
+                <div>
+                    <span style="
+                        display: inline-block;
+                        background: #4A5568;
+                        color: white;
+                        padding: 4px 12px;
+                        border-radius: 12px;
+                        font-size: 13px;
+                        font-weight: 500;
+                    ">
+                        {confidence:.1f}% confidence
+                    </span>
+                </div>
+            </div>
+        </div>
+        """
+    else:
+        html_content = """
+        <div class="observation-gate" style="
+            border: 2px solid #38A169;
+            border-radius: 8px;
+            padding: 20px;
+            margin: 10px 0;
+            background: linear-gradient(135deg, #1A202C 0%, #2D3748 100%);
+            color: #E2E8F0;
+            font-family: 'Inter', sans-serif;
+        ">
+            <div style="display: flex; align-items: center; margin-bottom: 15px;">
+                <div style="
+                    background: #2D3748;
+                    border-radius: 50%;
+                    width: 40px;
+                    height: 40px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    margin-right: 15px;
+                    border: 2px solid #38A169;
+                ">
+                    <span style="font-size: 20px;">✅</span>
+                </div>
+                <div>
+                    <h3 style="margin: 0; color: #E2E8F0; font-weight: 600;">OBSERVATION GATE CLEARED</h3>
+                    <p style="margin: 5px 0 0 0; color: #A0AEC0; font-size: 14px;">Confidence threshold met</p>
+                </div>
+            </div>
+            
+            <div style="
+                background: rgba(56, 161, 105, 0.15);
+                border-left: 4px solid #38A169;
+                padding: 15px;
+                margin: 15px 0;
+                border-radius: 0 4px 4px 0;
+            ">
+                <h4 style="margin: 0 0 10px 0; color: #38A169; font-weight: 500;">
+                    Proceed with Policy Action
+                </h4>
+                <p style="margin: 0; color: #CBD5E0; font-size: 14px; line-height: 1.5;">
+                    Confidence exceeds threshold. System may proceed with sequenced actions.
+                    Historical evidence will be consulted before any execution.
+                </p>
+            </div>
+            
+            <div style="display: flex; justify-content: space-between; align-items: center;">
+                <div>
+                    <span style="color: #A0AEC0; font-size: 13px;">Confidence threshold: 70.0%</span>
+                </div>
+                <div>
+                    <span style="
+                        display: inline-block;
+                        background: #38A169;
+                        color: white;
+                        padding: 4px 12px;
+                        border-radius: 12px;
+                        font-size: 13px;
+                        font-weight: 500;
+                    ">
+                        85.0% confidence
+                    </span>
+                </div>
+            </div>
+        </div>
+        """
+    
+    return gr.HTML(html_content)
+
+def create_sequencing_visualization() -> gr.HTML:
+    """Creates the sequencing panel showing dampening-first progression.
+    
+    Doctrinal: Shows sequencing as policy, not reaction.
+    """
+    return gr.HTML("""
+    <div style="border: 2px solid #3b82f6; border-radius: 16px; padding: 25px; background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%); margin-bottom: 25px;">
+        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
+            <div>
+                <h3 style="margin: 0 0 8px 0; font-size: 20px; color: #1e293b; font-weight: 700;">
+                    🔄 Doctrinal Sequencing: Policy Over Reaction
+                </h3>
+                <p style="margin: 0; font-size: 14px; color: #64748b;">
+                    System enforces sequencing regardless of prediction confidence
+                </p>
+            </div>
+            <div style="padding: 8px 16px; background: #dbeafe; color: #1e40af; border-radius: 20px; font-size: 12px; font-weight: bold;">
+                POLICY ENFORCED
+            </div>
+        </div>
+        
+        <!-- Sequencing Steps -->
+        <div style="display: flex; justify-content: space-between; align-items: center; position: relative; margin-bottom: 30px;">
+            <!-- Connecting line -->
+            <div style="position: absolute; top: 50%; left: 60px; right: 60px; height: 3px; background: linear-gradient(90deg, #3b82f6, #10b981, #8b5cf6, #f59e0b); z-index: 1;"></div>
+            
+            <!-- Step 1: Dampening -->
+            <div style="text-align: center; position: relative; z-index: 2; flex: 1;">
+                <div style="width: 60px; height: 60px; background: #3b82f6; color: white; border-radius: 50%; 
+                          display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; 
+                          font-size: 24px; font-weight: bold; border: 4px solid white; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);">
+                    1
+                </div>
+                <div style="font-size: 15px; font-weight: 700; color: #1e293b; margin-bottom: 5px;">Dampening</div>
+                <div style="font-size: 12px; color: #64748b; max-width: 180px; margin: 0 auto;">Prevent amplification first</div>
+                <div style="margin-top: 10px; padding: 6px 12px; background: #3b82f6; color: white; border-radius: 15px; 
+                          font-size: 11px; font-weight: bold; display: inline-block;">
+                    REQUIRED
+                </div>
+            </div>
+            
+            <!-- Arrow -->
+            <div style="font-size: 28px; color: #94a3b8; z-index: 2;">→</div>
+            
+            <!-- Step 2: Concurrency Control -->
+            <div style="text-align: center; position: relative; z-index: 2; flex: 1;">
+                <div style="width: 60px; height: 60px; background: #10b981; color: white; border-radius: 50%; 
+                          display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; 
+                          font-size: 24px; font-weight: bold; border: 4px solid white; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);">
+                    2
+                </div>
+                <div style="font-size: 15px; font-weight: 700; color: #1e293b; margin-bottom: 5px;">Concurrency</div>
+                <div style="font-size: 12px; color: #64748b; max-width: 180px; margin: 0 auto;">Manage load, then observe</div>
+                <div style="margin-top: 10px; padding: 6px 12px; background: #10b981; color: white; border-radius: 15px; 
+                          font-size: 11px; font-weight: bold; display: inline-block;">
+                    REQUIRED
+                </div>
+            </div>
+            
+            <!-- Arrow -->
+            <div style="font-size: 28px; color: #94a3b8; z-index: 2;">→</div>
+            
+            <!-- Step 3: Observe -->
+            <div style="text-align: center; position: relative; z-index: 2; flex: 1;">
+                <div style="width: 60px; height: 60px; background: #8b5cf6; color: white; border-radius: 50%; 
+                          display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; 
+                          font-size: 24px; font-weight: bold; border: 4px solid white; box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);">
+                    3
+                </div>
+                <div style="font-size: 15px; font-weight: 700; color: #1e293b; margin-bottom: 5px;">Observe</div>
+                <div style="font-size: 12px; color: #64748b; max-width: 180px; margin: 0 auto;">Validate trends for 5+ minutes</div>
+                <div style="margin-top: 10px; padding: 6px 12px; background: #8b5cf6; color: white; border-radius: 15px; 
+                          font-size: 11px; font-weight: bold; display: inline-block;">
+                    REQUIRED
+                </div>
+            </div>
+            
+            <!-- Arrow -->
+            <div style="font-size: 28px; color: #94a3b8; z-index: 2;">→</div>
+            
+            <!-- Step 4: Scale -->
+            <div style="text-align: center; position: relative; z-index: 2; flex: 1;">
+                <div style="width: 60px; height: 60px; background: #f59e0b; color: white; border-radius: 50%; 
+                          display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; 
+                          font-size: 24px; font-weight: bold; border: 4px solid white; box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);">
+                    4
+                </div>
+                <div style="font-size: 15px; font-weight: 700; color: #1e293b; margin-bottom: 5px;">Scale</div>
+                <div style="font-size: 12px; color: #64748b; max-width: 180px; margin: 0 auto;">Only if all previous succeed</div>
+                <div style="margin-top: 10px; padding: 6px 12px; background: #f59e0b; color: white; border-radius: 15px; 
+                          font-size: 11px; font-weight: bold; display: inline-block;">
+                    OPTIONAL
+                </div>
+            </div>
+        </div>
+        
+        <!-- Doctrinal Constraint -->
+        <div style="background: #f8fafc; border-radius: 12px; padding: 20px; border-left: 4px solid #3b82f6;">
+            <div style="display: flex; align-items: flex-start; gap: 15px;">
+                <div style="font-size: 24px; color: #3b82f6;">🎯</div>
+                <div style="flex: 1;">
+                    <div style="font-size: 16px; font-weight: 600; color: #1e293b; margin-bottom: 8px;">
+                        Doctrinal Constraint: Scaling Cannot Appear First
+                    </div>
+                    <div style="font-size: 14px; color: #475569; line-height: 1.6;">
+                        If retry amplification is detected, scaling is <strong>contraindicated entirely</strong>.
+                        The system must observe stabilization before considering capacity increases.
+                        Historical evidence shows scaling-first fails 76% of the time during amplification.
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Sequence State -->
+        <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 20px; 
+                   padding-top: 20px; border-top: 2px solid #e2e8f0;">
+            <div>
+                <div style="font-size: 13px; color: #64748b; margin-bottom: 5px;">Current Sequence State</div>
+                <div style="font-size: 15px; font-weight: 600; color: #1e293b;">Waiting for detection process</div>
+            </div>
+            <div style="display: flex; gap: 10px;">
+                <div style="padding: 8px 16px; background: #f1f5f9; color: #64748b; border-radius: 20px; font-size: 12px; font-weight: 500;">
+                    🔄 Sequence: 0/4
+                </div>
+                <div style="padding: 8px 16px; background: #f1f5f9; color: #64748b; border-radius: 20px; font-size: 12px; font-weight: 500;">
+                    ⏱️ Time: 0s
+                </div>
+            </div>
+        </div>
+    </div>
+    """)
+
+def create_detection_display() -> gr.HTML:
+    """Creates detection process HTML display."""
+    return gr.HTML("""
+    <div style="border: 2px solid #3b82f6; border-radius: 14px; padding: 20px; background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%); margin: 10px 0;">
+        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
+            <div style="display: flex; align-items: center; gap: 12px;">
+                <div style="width: 40px; height: 40px; background: #3b82f6; color: white; border-radius: 50%; 
+                          display: flex; align-items: center; justify-content: center; font-size: 18px;">
+                    🕵️‍♂️
+                </div>
+                <div>
+                    <h4 style="margin: 0 0 4px 0; font-size: 16px; color: #1e293b; font-weight: 600;">Detection Process</h4>
+                    <p style="margin: 0; font-size: 13px; color: #64748b;">Telemetry analysis & pattern recognition</p>
+                </div>
+            </div>
+            <div style="padding: 6px 14px; background: #dbeafe; color: #1d4ed8; border-radius: 20px; font-size: 12px; font-weight: bold;">
+                STATUS: ACTIVE
+            </div>
+        </div>
+        
+        <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-bottom: 20px;">
+            <div style="padding: 12px; background: #f8fafc; border-radius: 8px;">
+                <div style="font-size: 12px; color: #64748b; margin-bottom: 5px;">Pattern Match</div>
+                <div style="font-size: 14px; color: #1e293b; font-weight: 500;">Retry Amplification</div>
+            </div>
+            <div style="padding: 12px; background: #f8fafc; border-radius: 8px;">
+                <div style="font-size: 12px; color: #64748b; margin-bottom: 5px;">Confidence</div>
+                <div style="font-size: 14px; color: #1e293b; font-weight: 500;">92.7%</div>
+            </div>
+            <div style="padding: 12px; background: #f8fafc; border-radius: 8px;">
+                <div style="font-size: 12px; color: #64748b; margin-bottom: 5px;">Detection Time</div>
+                <div style="font-size: 14px; color: #1e293b; font-weight: 500;">0.8 seconds</div>
+            </div>
+            <div style="padding: 12px; background: #f8fafc; border-radius: 8px;">
+                <div style="font-size: 12px; color: #64748b; margin-bottom: 5px;">Severity</div>
+                <div style="font-size: 14px; color: #f59e0b; font-weight: 500;">HIGH_VARIANCE</div>
+            </div>
+        </div>
+        
+        <div style="background: #f0fdf4; border-radius: 10px; padding: 15px; border-left: 4px solid #10b981;">
+            <div style="font-size: 14px; color: #065f46; font-weight: 500;">
+                ✅ Detected: Retry amplification pattern with exponential growth (r=1.8)
+            </div>
+            <div style="font-size: 13px; color: #047857; margin-top: 5px;">
+                Telemetry shows request rate doubling every 45 seconds. System flagged for sequencing enforcement.
+            </div>
+        </div>
+        
+        <div style="margin-top: 15px; display: flex; justify-content: space-between; align-items: center;">
+            <div>
+                <div style="font-size: 12px; color: #64748b;">Next Step:</div>
+                <div style="font-size: 13px; color: #1e293b; font-weight: 500;">Activate recall process</div>
+            </div>
+            <div style="display: flex; gap: 8px;">
+                <span style="padding: 4px 10px; background: #f1f5f9; color: #64748b; border-radius: 12px; font-size: 11px; font-weight: 500;">📊 12 metrics</span>
+                <span style="padding: 4px 10px; background: #f1f5f9; color: #64748b; border-radius: 12px; font-size: 11px; font-weight: 500;">⏱️ 0.8s latency</span>
+                <span style="padding: 4px 10px; background: #f1f5f9; color: #64748b; border-radius: 12px; font-size: 11px; font-weight: 500;">🔍 3 patterns</span>
+            </div>
+        </div>
+    </div>
+    """)
+
+def create_recall_display() -> gr.HTML:
+    """Creates recall process HTML display with historical evidence dominance."""
+    return gr.HTML("""
+    <div style="border: 2px solid #8b5cf6; border-radius: 14px; padding: 20px; background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%); margin: 10px 0;">
+        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
+            <div style="display: flex; align-items: center; gap: 12px;">
+                <div style="width: 40px; height: 40px; background: #8b5cf6; color: white; border-radius: 50%; 
+                          display: flex; align-items: center; justify-content: center; font-size: 18px;">
+                    🧠
+                </div>
+                <div>
+                    <h4 style="margin: 0 0 4px 0; font-size: 16px; color: #1e293b; font-weight: 600;">Recall Process</h4>
+                    <p style="margin: 0; font-size: 13px; color: #64748b;">Historical evidence & pattern matching</p>
+                </div>
+            </div>
+            <div style="padding: 6px 14px; background: #ede9fe; color: #5b21b6; border-radius: 20px; font-size: 12px; font-weight: bold;">
+                STATUS: ACTIVE
+            </div>
+        </div>
+        
+        <div style="background: #f5f3ff; border-radius: 10px; padding: 20px; margin-bottom: 20px;">
+            <div style="font-size: 15px; font-weight: 600; color: #5b21b6; margin-bottom: 15px; display: flex; align-items: center; gap: 8px;">
+                🏆 RECALL DOMINANCE: Historical Evidence > Predictive Confidence
+            </div>
+            
+            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
+                <!-- Scaling-First Failures -->
+                <div>
+                    <div style="font-size: 14px; font-weight: 600; color: #dc2626; margin-bottom: 12px; display: flex; align-items: center; gap: 6px;">
+                        ⛔ Scaling-First Failures
+                    </div>
+                    
+                    <div style="border-left: 3px solid #dc2626; padding-left: 12px; margin-bottom: 15px;">
+                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px;">
+                            <div style="font-size: 12px; font-weight: 600; color: #1e293b;">2024-11-15 • prod-east</div>
+                            <div style="padding: 2px 8px; background: #fee2e2; color: #dc2626; border-radius: 10px; font-size: 10px; font-weight: bold;">FAILED</div>
+                        </div>
+                        <div style="font-size: 11px; color: #475569; margin-bottom: 3px;">
+                            <strong>Action:</strong> Scale during retry storm
+                        </div>
+                        <div style="font-size: 11px; color: #dc2626; font-weight: 500; margin-bottom: 3px;">
+                            <strong>Outcome:</strong> Amplification increased 300%
+                        </div>
+                        <div style="font-size: 10px; color: #7f1d1d; font-style: italic; background: #fef2f2; padding: 6px; border-radius: 4px;">
+                            "Scaling during amplification worsens the problem"
+                        </div>
+                    </div>
+                    
+                    <div style="border-left: 3px solid #dc2626; padding-left: 12px;">
+                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px;">
+                            <div style="font-size: 12px; font-weight: 600; color: #1e293b;">2024-09-22 • staging</div>
+                            <div style="padding: 2px 8px; background: #fee2e2; color: #dc2626; border-radius: 10px; font-size: 10px; font-weight: bold;">FAILED</div>
+                        </div>
+                        <div style="font-size: 11px; color: #475569; margin-bottom: 3px;">
+                            <strong>Action:</strong> Add capacity without dampening
+                        </div>
+                        <div style="font-size: 11px; color: #dc2626; font-weight: 500; margin-bottom: 3px;">
+                            <strong>Outcome:</strong> 45 min outage, $8.2K loss
+                        </div>
+                        <div style="font-size: 10px; color: #7f1d1d; font-style: italic; background: #fef2f2; padding: 6px; border-radius: 4px;">
+                            "New capacity consumed by amplification loop"
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Dampening-First Successes -->
+                <div>
+                    <div style="font-size: 14px; font-weight: 600; color: #10b981; margin-bottom: 12px; display: flex; align-items: center; gap: 6px;">
+                        ✅ Dampening-First Successes
+                    </div>
+                    
+                    <div style="border-left: 3px solid #10b981; padding-left: 12px; margin-bottom: 15px;">
+                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px;">
+                            <div style="font-size: 12px; font-weight: 600; color: #1e293b;">2024-12-03 • prod-west</div>
+                            <div style="padding: 2px 8px; background: #dcfce7; color: #166534; border-radius: 10px; font-size: 10px; font-weight: bold;">SUCCESS</div>
+                        </div>
+                        <div style="font-size: 11px; color: #475569; margin-bottom: 3px;">
+                            <strong>Action:</strong> Request coalescing + backoff
+                        </div>
+                        <div style="font-size: 11px; color: #10b981; font-weight: 500; margin-bottom: 3px;">
+                            <strong>Outcome:</strong> Resolved in 8 min, $5.1K saved
+                        </div>
+                        <div style="font-size: 10px; color: #065f46; font-style: italic; background: #f0fdf4; padding: 6px; border-radius: 4px;">
+                            "Dampening broke amplification cycle"
+                        </div>
+                    </div>
+                    
+                    <div style="border-left: 3px solid #10b981; padding-left: 12px;">
+                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px;">
+                            <div style="font-size: 12px; font-weight: 600; color: #1e293b;">2024-10-17 • prod-eu</div>
+                            <div style="padding: 2px 8px; background: #dcfce7; color: #166534; border-radius: 10px; font-size: 10px; font-weight: bold;">SUCCESS</div>
+                        </div>
+                        <div style="font-size: 11px; color: #475569; margin-bottom: 3px;">
+                            <strong>Action:</strong> Circuit breaker + observability
+                        </div>
+                        <div style="font-size: 11px; color: #10b981; font-weight: 500; margin-bottom: 3px;">
+                            <strong>Outcome:</strong> 12 min recovery, 0 user impact
+                        </div>
+                        <div style="font-size: 10px; color: #065f46; font-style: italic; background: #f0fdf4; padding: 6px; border-radius: 4px;">
+                            "Sequencing prevented escalation"
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <div style="background: #fef3c7; border-radius: 10px; padding: 15px; border-left: 4px solid #f59e0b;">
+            <div style="font-size: 14px; color: #92400e; font-weight: 500; margin-bottom: 5px;">
+                🎯 RECALL DECISION: Scaling contraindicated due to historical evidence
+            </div>
+            <div style="font-size: 13px; color: #b45309;">
+                Historical evidence (76% failure rate) dominates predictive confidence (92%). 
+                System will enforce dampening-first sequencing.
+            </div>
+        </div>
+        
+        <div style="margin-top: 15px; display: flex; justify-content: space-between; align-items: center;">
+            <div>
+                <div style="font-size: 12px; color: #64748b;">Evidence Weight:</div>
+                <div style="font-size: 13px; color: #1e293b; font-weight: 500;">Historical: 85% • Predictive: 15%</div>
+            </div>
+            <div style="display: flex; gap: 8px;">
+                <span style="padding: 4px 10px; background: #f1f5f9; color: #64748b; border-radius: 12px; font-size: 11px; font-weight: 500;">📚 8 incidents</span>
+                <span style="padding: 4px 10px; background: #f1f5f9; color: #64748b; border-radius: 12px; font-size: 11px; font-weight: 500;">🎯 76% failure rate</span>
+                <span style="padding: 4px 10px; background: #f1f5f9; color: #64748b; border-radius: 12px; font-size: 11px; font-weight: 500;">🏆 recall dominance</span>
+            </div>
+        </div>
+    </div>
+    """)
+
+def create_decision_display() -> gr.HTML:
+    """Creates decision process HTML display."""
+    return gr.HTML("""
+    <div style="border: 2px solid #10b981; border-radius: 14px; padding: 20px; background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%); margin: 10px 0;">
+        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
+            <div style="display: flex; align-items: center; gap: 12px;">
+                <div style="width: 40px; height: 40px; background: #10b981; color: white; border-radius: 50%; 
+                          display: flex; align-items: center; justify-content: center; font-size: 18px;">
+                    🎯
+                </div>
+                <div>
+                    <h4 style="margin: 0 0 4px 0; font-size: 16px; color: #1e293b; font-weight: 600;">Decision Process</h4>
+                    <p style="margin: 0; font-size: 13px; color: #64748b;">HealingIntent creation & sequencing</p>
+                </div>
+            </div>
+            <div style="padding: 6px 14px; background: #dcfce7; color: #166534; border-radius: 20px; font-size: 12px; font-weight: bold;">
+                STATUS: ACTIVE
+            </div>
+        </div>
+        
+        <!-- Formal HealingIntent Display -->
+        <div style="background: white; border-radius: 10px; padding: 20px; border: 2px solid #e2e8f0; margin-bottom: 20px;">
+            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 2px solid #f1f5f9;">
+                <div>
+                    <h5 style="margin: 0 0 5px 0; font-size: 15px; color: #1e293b; font-weight: 600;">Formal HealingIntent Created</h5>
+                    <p style="margin: 0; font-size: 12px; color: #64748b;">Preconditions checked, contraindications listed</p>
+                </div>
+                <div style="padding: 6px 12px; background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); 
+                          color: white; border-radius: 15px; font-size: 11px; font-weight: bold;">
+                    CONFIDENCE: 87.3%
+                </div>
+            </div>
+            
+            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 20px;">
+                <div>
+                    <div style="font-size: 13px; color: #475569; margin-bottom: 8px; font-weight: 600;">Primary Action</div>
+                    <div style="padding: 12px; background: #f0fdf4; border-radius: 8px; border-left: 4px solid #10b981;">
+                        <div style="font-size: 14px; color: #065f46; font-weight: 500;">
+                            Implement request coalescing with exponential backoff (jitter: 25%)
+                        </div>
+                    </div>
+                </div>
+                
+                <div>
+                    <div style="font-size: 13px; color: #475569; margin-bottom: 8px; font-weight: 600;">Sequencing Rule</div>
+                    <div style="padding: 12px; background: #f0f9ff; border-radius: 8px; border-left: 4px solid #0ea5e9;">
+                        <div style="font-size: 14px; color: #0369a1; font-weight: 500;">
+                            dampening_first_then_observe_then_optional_scale
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px;">
+                <div style="padding: 10px; background: #f8fafc; border-radius: 8px;">
+                    <div style="font-size: 12px; color: #64748b; margin-bottom: 5px;">Preconditions</div>
+                    <div style="font-size: 11px; color: #475569;">• Retry amplification detected<br>• Confidence > 70%<br>• No scaling contraindicated</div>
+                </div>
+                
+                <div style="padding: 10px; background: #f8fafc; border-radius: 8px;">
+                    <div style="font-size: 12px; color: #64748b; margin-bottom: 5px;">Contraindications</div>
+                    <div style="font-size: 11px; color: #b91c1c;">⛔ Scale during retry storm<br>⛔ Add capacity immediately<br>⛔ Restart during amplification</div>
+                </div>
+                
+                <div style="padding: 10px; background: #f8fafc; border-radius: 8px;">
+                    <div style="font-size: 12px; color: #64748b; margin-bottom: 5px;">Reversibility</div>
+                    <div style="font-size: 11px; color: #047857;">✅ Backoff can be adjusted<br>✅ Coalescing can be disabled<br>✅ No stateful changes</div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Observation Gate Status -->
+        <div style="background: #fef3c7; border-radius: 10px; padding: 15px; border-left: 4px solid #f59e0b; margin-bottom: 15px;">
+            <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;">
+                <div style="font-size: 20px;">⏳</div>
+                <div style="flex: 1;">
+                    <div style="font-size: 14px; font-weight: 600; color: #92400e; margin-bottom: 3px;">
+                        Observation Gate: ACTIVE (65.0% confidence)
+                    </div>
+                    <div style="font-size: 13px; color: #b45309;">
+                        System will observe for 5 minutes before proceeding to execution
+                    </div>
+                </div>
+            </div>
+            
+            <div style="height: 8px; background: #e2e8f0; border-radius: 4px; margin: 10px 0; overflow: hidden;">
+                <div style="width: 65%; height: 100%; background: linear-gradient(90deg, #f59e0b, #fbbf24); border-radius: 4px;"></div>
+            </div>
+            
+            <div style="display: flex; justify-content: space-between;">
+                <span style="font-size: 11px; color: #64748b;">0%</span>
+                <span style="font-size: 11px; color: #64748b; font-weight: 600;">Threshold: 70%</span>
+                <span style="font-size: 11px; color: #64748b;">100%</span>
+            </div>
+        </div>
+        
+        <div style="margin-top: 15px; display: flex; justify-content: space-between; align-items: center;">
+            <div>
+                <div style="font-size: 12px; color: #64748b;">Next Step:</div>
+                <div style="font-size: 13px; color: #1e293b; font-weight: 500;">Wait for observation gate clearance</div>
+            </div>
+            <div style="display: flex; gap: 8px;">
+                <span style="padding: 4px 10px; background: #f1f5f9; color: #64748b; border-radius: 12px; font-size: 11px; font-weight: 500;">📝 formal intent</span>
+                <span style="padding: 4px 10px; background: #f1f5f9; color: #64748b; border-radius: 12px; font-size: 11px; font-weight: 500;">🔄 sequenced</span>
+                <span style="padding: 4px 10px; background: #f1f5f9; color: #64748b; border-radius: 12px; font-size: 11px; font-weight: 500;">🎯 87% confidence</span>
+            </div>
+        </div>
+    </div>
+    """)
+
+def create_oss_advisory_section() -> gr.HTML:
+    """Creates OSS advisory section showing policy vs execution boundary."""
+    return gr.HTML("""
+    <div style="padding: 25px; border-radius: 16px; margin-bottom: 15px; flex: 1; min-height: 320px; 
+                background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); border: 2px solid #0ea5e9;">
+        <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 2px solid rgba(14, 165, 233, 0.2);">
+            <div style="font-size: 32px;">🆓</div>
+            <div>
+                <h3 style="margin: 0 0 5px 0; font-size: 20px; color: #1e293b;">Policy Edition</h3>
+                <p style="margin: 0; font-size: 14px; color: #64748b;">Analysis & Advisory Only - Apache 2.0</p>
+            </div>
+            <div style="margin-left: auto; padding: 6px 14px; background: rgba(255, 255, 255, 0.9); 
+                      border-radius: 10px; font-size: 11px; font-weight: bold; color: #475569;">
+                PERMANENTLY SAFE
+            </div>
+        </div>
+        
+        <div style="background: white; border-radius: 12px; padding: 20px; 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: 1px solid #f1f5f9;">
+                <h4 style="margin: 0; font-size: 16px; color: #1e293b;">📝 HealingIntent Created</h4>
+                <span style="padding: 6px 12px; background: #dbeafe; color: #1d4ed8; border-radius: 8px; font-size: 12px; font-weight: bold;">94% confidence</span>
+            </div>
+            
+            <div style="margin-bottom: 15px;">
+                <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;">
+                    <div style="width: 24px; height: 24px; background: #10b981; color: white; border-radius: 50%; 
+                              display: flex; align-items: center; justify-content: center; font-size: 12px;">
+                        ✅
+                    </div>
+                    <div>
+                        <div style="font-size: 14px; color: #475569; font-weight: 500;">Action Recommended</div>
+                        <div style="font-size: 13px; color: #1e293b;">Implement request coalescing with exponential backoff</div>
+                    </div>
+                </div>
+                
+                <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;">
+                    <div style="width: 24px; height: 24px; background: #8b5cf6; color: white; border-radius: 50%; 
+                              display: flex; align-items: center; justify-content: center; font-size: 12px;">
+                        🧠
+                    </div>
+                    <div>
+                        <div style="font-size: 14px; color: #475569; font-weight: 500;">Pattern Match</div>
+                        <div style="font-size: 13px; color: #1e293b;">Similar incident resolved with dampening (87% success rate)</div>
+                    </div>
+                </div>
+                
+                <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;">
+                    <div style="width: 24px; height: 24px; background: #f59e0b; color: white; border-radius: 50%; 
+                              display: flex; align-items: center; justify-content: center; font-size: 12px;">
+                        ⚠️
+                    </div>
+                    <div>
+                        <div style="font-size: 14px; color: #475569; font-weight: 500;">Contraindications</div>
+                        <div style="font-size: 13px; color: #1e293b;">✅ Checked (retry amplification detected)</div>
+                    </div>
+                </div>
+                
+                <div style="display: flex; align-items: center; gap: 10px;">
+                    <div style="width: 24px; height: 24px; background: #3b82f6; color: white; border-radius: 50%; 
+                              display: flex; align-items: center; justify-content: center; font-size: 12px;">
+                        🔄
+                    </div>
+                    <div>
+                        <div style="font-size: 14px; color: #475569; font-weight: 500;">Sequencing Rule</div>
+                        <div style="font-size: 13px; color: #1e293b;">dampening_first_then_observe_then_optional_scale</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- OSS Boundary -->
+        <div style="text-align: center;">
+            <div style="height: 2px; background: linear-gradient(90deg, transparent, #3b82f6, transparent); margin: 8px 0;"></div>
+            <div style="padding: 10px; background: #fee2e2; color: #dc2626; border-radius: 10px; 
+                      font-size: 14px; font-weight: bold; display: inline-block; border: 2px solid #dc2626;">
+                🚫 OSS STOPS HERE - No Execution
+            </div>
+            <div style="height: 2px; background: linear-gradient(90deg, transparent, #3b82f6, transparent); margin: 8px 0;"></div>
+            
+            <div style="margin-top: 15px; padding: 12px; background: rgba(255, 255, 255, 0.8); border-radius: 10px;">
+                <div style="font-size: 13px; color: #475569; font-weight: 500;">
+                    OSS provides policy advice only. Enterprise edition required for execution.
+                </div>
+                <div style="font-size: 12px; color: #64748b; margin-top: 5px;">
+                    This architectural boundary ensures safety by design.
+                </div>
+            </div>
+        </div>
+    </div>
+    """)
+
+def create_timeline_comparison_plot() -> go.Figure:
+    """Creates timeline comparison plot for incident resolution."""
+    fig = go.Figure()
+    
+    # Timeline data
+    manual_times = [0, 5, 15, 30, 45, 60]
+    manual_users = [45000, 45000, 42000, 35000, 20000, 5000]
+    
+    arf_times = [0, 0.8, 1.5, 3, 8, 12]
+    arf_users = [45000, 45000, 45000, 42000, 15000, 0]
+    
+    # Add traces
+    fig.add_trace(go.Scatter(
+        x=manual_times,
+        y=manual_users,
+        mode='lines+markers',
+        name='Manual Resolution',
+        line=dict(color='#ef4444', width=3, dash='dash'),
+        marker=dict(size=8, color='#ef4444'),
+        hovertemplate='Time: %{x}min<br>Users Affected: %{y:,}<extra></extra>'
+    ))
+    
+    fig.add_trace(go.Scatter(
+        x=arf_times,
+        y=arf_users,
+        mode='lines+markers',
+        name='ARF Policy Execution',
+        line=dict(color='#10b981', width=4),
+        marker=dict(size=10, color='#10b981'),
+        hovertemplate='Time: %{x}min<br>Users Affected: %{y:,}<extra></extra>'
+    ))
+    
+    # Add vertical lines for key events
+    fig.add_vline(x=0.8, line_width=2, line_dash="dot", line_color="#3b82f6",
+                  annotation_text="Detection", annotation_position="top right")
+    fig.add_vline(x=1.5, line_width=2, line_dash="dot", line_color="#8b5cf6",
+                  annotation_text="Recall", annotation_position="top right")
+    fig.add_vline(x=3, line_width=2, line_dash="dot", line_color="#f59e0b",
+                  annotation_text="Decision", annotation_position="top right")
+    fig.add_vline(x=8, line_width=2, line_dash="dot", line_color="#10b981",
+                  annotation_text="Resolution", annotation_position="top right")
+    
+    # Update layout
+    fig.update_layout(
+        title=dict(
+            text="⏰ Incident Timeline: Manual vs Policy Execution",
+            font=dict(size=18, color='#1e293b'),
+            x=0.5
+        ),
+        xaxis=dict(
+            title="Time (minutes)",
+            gridcolor='#e2e8f0',
+            tickformat=',d'
+        ),
+        yaxis=dict(
+            title="Users Affected",
+            gridcolor='#e2e8f0',
+            tickformat=','
+        ),
+        plot_bgcolor='white',
+        paper_bgcolor='white',
+        font=dict(family="Inter, sans-serif", color="#475569"),
+        hovermode='x unified',
+        legend=dict(
+            orientation="h",
+            yanchor="bottom",
+            y=1.02,
+            xanchor="center",
+            x=0.5,
+            bgcolor='rgba(255, 255, 255, 0.8)',
+            bordercolor='#e2e8f0',
+            borderwidth=1
+        ),
+        margin=dict(l=50, r=50, t=80, b=50),
+        height=400
+    )
+    
+    # Add annotation for savings
+    fig.add_annotation(
+        x=12,
+        y=0,
+        text="🚀 73% faster resolution<br>💰 $6.3K saved",
+        showarrow=True,
+        arrowhead=2,
+        arrowsize=1,
+        arrowwidth=2,
+        arrowcolor="#10b981",
+        ax=50,
+        ay=-50,
+        bgcolor="#f0fdf4",
+        bordercolor="#10b981",
+        borderwidth=2,
+        font=dict(size=12, color="#065f46")
+    )
+    
+    return fig
+
 # -----------------------------
 # NEW: Observation Gate Renderer - CRITICAL PSYCHOLOGICAL FIX
 # -----------------------------
@@ -390,7 +1163,7 @@ 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 - DOCTRINAL COMPLIANCE
+# Tab 1: Live Incident Demo - UPDATED WITH RESTORED FUNCTIONS
 # -----------------------------
 def create_tab1_incident_demo(scenarios=INCIDENT_SCENARIOS, default_scenario="Cache Miss Storm") -> tuple:
     """
@@ -474,65 +1247,11 @@ def create_tab1_incident_demo(scenarios=INCIDENT_SCENARIOS, default_scenario="Ca
         # Middle Column: Process Workflow (NOT Agent Workflow)
         with gr.Column(scale=2, variant="panel") as middle_col:
             # ============ 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>
-            """)
+            observation_gate_placeholder = create_observation_gate_placeholder()
             
             # ============ 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>
-                
-                <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>
-            """)
+            sequencing_panel = create_sequencing_visualization()
             
             # Process Workflow Header (NOT Agent Workflow)
             workflow_header = gr.Markdown("## 🔄 Policy Process Workflow")
@@ -540,47 +1259,9 @@ def create_tab1_incident_demo(scenarios=INCIDENT_SCENARIOS, default_scenario="Ca
             
             # Process Status Cards (NOT Agent Status Cards)
             with gr.Row():
-                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 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>
-                        <div style="display: inline-block; padding: 5px 14px; background: #e2e8f0; border-radius: 20px; font-size: 12px; font-weight: bold; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px;">WAITING</div>
-                    </div>
-                </div>
-                """)
-                
-                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 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>
-                        <div style="display: inline-block; padding: 5px 14px; background: #e2e8f0; border-radius: 20px; font-size: 12px; font-weight: bold; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px;">WAITING</div>
-                    </div>
-                </div>
-                """)
-                
-                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 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>
-                        <div style="display: inline-block; padding: 5px 14px; background: #e2e8f0; border-radius: 20px; font-size: 12px; font-weight: bold; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px;">WAITING</div>
-                    </div>
-                </div>
-                """)
+                detection_process = create_detection_display()
+                recall_process = create_recall_display()
+                decision_process = create_decision_display()
             
             # Mode Selection & Safety Controls
             with gr.Row():
@@ -605,61 +1286,92 @@ def create_tab1_incident_demo(scenarios=INCIDENT_SCENARIOS, default_scenario="Ca
             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;">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;">
-                        <p style="margin: 0; font-size: 14px; color: #475569; font-weight: 500;"><strong>Analysis & Advisory Only</strong> - No execution, permanently safe</p>
-                    </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;">📝 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>
+                oss_section = create_oss_advisory_section()
+                
+                enterprise_section = gr.HTML("""
+                <div style="padding: 25px; border-radius: 16px; margin-bottom: 15px; flex: 1; min-height: 320px; 
+                            background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); border: 2px solid #10b981;">
+                    <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 2px solid rgba(16, 185, 129, 0.2);">
+                        <div style="font-size: 32px;">💰</div>
                         <div>
-                            <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>
+                            <h3 style="margin: 0 0 5px 0; font-size: 20px; color: #1e293b;">Execution Edition</h3>
+                            <p style="margin: 0; font-size: 14px; color: #64748b;">Full Execution & Learning - Commercial</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>
-                            <div style="font-size: 12px; font-weight: bold; padding: 6px 12px; background: #fee2e2; color: #dc2626; border-radius: 8px; display: inline-block;">🚫 OSS STOPS HERE - No execution</div>
-                            <div style="height: 2px; background: linear-gradient(90deg, transparent, #3b82f6, transparent); margin: 8px 0;"></div>
+                        <div style="margin-left: auto; padding: 6px 14px; background: rgba(255, 255, 255, 0.9); 
+                                  border-radius: 10px; font-size: 11px; font-weight: bold; color: #475569;">
+                            REQUIRES LICENSE
                         </div>
                     </div>
-                </div>
-                """)
-                
-                enterprise_section = gr.HTML("""
-                <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;">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;">
-                        <p style="margin: 0; font-size: 14px; color: #475569; font-weight: 500;"><strong>Full Execution & Learning</strong> - Autonomous healing with safety guarantees</p>
-                    </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;">
+                    
+                    <div style="background: white; border-radius: 12px; padding: 20px; 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: 1px solid #f1f5f9;">
                             <h4 style="margin: 0; font-size: 16px; color: #1e293b;">⚡ Ready to Execute</h4>
-                            <span style="padding: 4px 10px; background: #10b981; color: white; border-radius: 6px; font-size: 12px; font-weight: bold; text-transform: uppercase;">AUTONOMOUS</span>
+                            <span style="padding: 6px 12px; background: #10b981; color: white; border-radius: 8px; font-size: 12px; font-weight: bold; text-transform: uppercase;">AUTONOMOUS</span>
                         </div>
-                        <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 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 style="margin-bottom: 15px;">
+                            <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;">
+                                <div style="width: 24px; height: 24px; background: #3b82f6; color: white; border-radius: 50%; 
+                                          display: flex; align-items: center; justify-content: center; font-size: 12px;">
+                                    ⚙️
+                                </div>
+                                <div>
+                                    <div style="font-size: 14px; color: #475569; font-weight: 500;">Mode</div>
+                                    <div style="font-size: 13px; color: #1e293b;">Autonomous (Requires Enterprise license)</div>
+                                </div>
+                            </div>
+                            
+                            <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;">
+                                <div style="width: 24px; height: 24px; background: #10b981; color: white; border-radius: 50%; 
+                                          display: flex; align-items: center; justify-content: center; font-size: 12px;">
+                                    ⚡
+                                </div>
+                                <div>
+                                    <div style="font-size: 14px; color: #475569; font-weight: 500;">Expected Recovery</div>
+                                    <div style="font-size: 13px; color: #1e293b;">12 minutes (vs 45 min manual)</div>
+                                </div>
+                            </div>
+                            
+                            <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;">
+                                <div style="width: 24px; height: 24px; background: #f59e0b; color: white; border-radius: 50%; 
+                                          display: flex; align-items: center; justify-content: center; font-size: 12px;">
+                                    💰
+                                </div>
+                                <div>
+                                    <div style="font-size: 14px; color: #475569; font-weight: 500;">Cost Avoided</div>
+                                    <div style="font-size: 13px; color: #10b981; font-weight: 700;">$6,375</div>
+                                </div>
+                            </div>
+                            
+                            <div style="display: flex; align-items: center; gap: 10px;">
+                                <div style="width: 24px; height: 24px; background: #8b5cf6; color: white; border-radius: 50%; 
+                                          display: flex; align-items: center; justify-content: center; font-size: 12px;">
+                                    👥
+                                </div>
+                                <div>
+                                    <div style="font-size: 14px; color: #475569; font-weight: 500;">Users Protected</div>
+                                    <div style="font-size: 13px; color: #1e293b;">45,000 → 0 impacted</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- Enterprise Boundary -->
+                    <div style="text-align: center;">
+                        <div style="height: 2px; background: linear-gradient(90deg, transparent, #10b981, transparent); margin: 8px 0;"></div>
+                        <div style="padding: 10px; background: #dcfce7; color: #166534; border-radius: 10px; 
+                                  font-size: 14px; font-weight: bold; display: inline-block; border: 2px solid #10b981;">
+                            ✅ Enterprise executes with MCP safety
                         </div>
-                        <div style="margin-top: 20px; text-align: center;">
-                            <div style="height: 2px; background: linear-gradient(90deg, transparent, #10b981, transparent); margin: 8px 0;"></div>
-                            <div style="font-size: 12px; font-weight: bold; padding: 6px 12px; background: #dcfce7; color: #166534; border-radius: 8px; display: inline-block;">✅ Enterprise executes with MCP safety</div>
-                            <div style="height: 2px; background: linear-gradient(90deg, transparent, #10b981, transparent); margin: 8px 0;"></div>
+                        <div style="height: 2px; background: linear-gradient(90deg, transparent, #10b981, transparent); margin: 8px 0;"></div>
+                        
+                        <div style="margin-top: 15px; padding: 12px; background: rgba(255, 255, 255, 0.8); border-radius: 10px;">
+                            <div style="font-size: 13px; color: #475569; font-weight: 500;">
+                                Enterprise edition adds execution, learning, and safety guarantees.
+                            </div>
+                            <div style="font-size: 12px; color: #64748b; margin-top: 5px;">
+                                MCP safety modes: Advisory → Approval → Autonomous
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -686,6 +1398,7 @@ def create_tab1_incident_demo(scenarios=INCIDENT_SCENARIOS, default_scenario="Ca
             # Timeline visualization
             timeline_header = gr.Markdown("### ⏰ Incident Timeline")
             timeline_viz = gr.Plot(
+                create_timeline_comparison_plot(),
                 label="",
                 show_label=False,
                 elem_id="timeline_plot"
@@ -1120,296 +1833,6 @@ def create_tab5_learning_engine() -> tuple:
     
     return (learning_graph, graph_type, show_labels, search_query, search_btn,
             clear_btn_search, search_results, stats_display, patterns_display, performance_display)
-    
-# -----------------------------
-# Realism Panel Component
-# -----------------------------
-def create_realism_panel(scenario_data: Dict, scenario_name: str) -> gr.HTML:
-    """
-    Create a realism panel showing ranked actions, risks, and uncertainty.
-    This makes ARF look cautious, opinionated, and enterprise-seasoned.
-    """
-    realism = scenario_data.get("realism", {})
-    ranked_actions = realism.get("ranked_actions", [])
-    
-    # Build ranked actions HTML
-    actions_html = ""
-    for action in ranked_actions:
-        rank_color = "#10b981" if action["rank"] == 1 else "#f59e0b" if action["rank"] == 2 else "#ef4444"
-        status = "✅ RECOMMENDED" if action["rank"] == 1 else "🟡 SECONDARY" if action["rank"] == 2 else "🔴 REJECTED"
-        
-        actions_html += f"""
-        <div style="border: 2px solid {rank_color}; border-radius: 12px; padding: 16px; 
-                   background: {rank_color}10; margin-bottom: 12px;">
-            <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px;">
-                <div>
-                    <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 5px;">
-                        <div style="width: 24px; height: 24px; background: {rank_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['confidence']}% confidence
-                        </span>
-                    </div>
-                    <p style="font-size: 14px; color: #475569; margin: 8px 0; font-weight: 500;">
-                        {action['action']}
-                    </p>
-                </div>
-                <div style="padding: 6px 12px; background: {rank_color}20; border-radius: 20px; 
-                           font-size: 12px; font-weight: bold; color: {rank_color};">
-                    {action['confidence']}%
-                </div>
-            </div>
-            
-            <div style="font-size: 13px; color: #64748b; margin: 8px 0; line-height: 1.5;">
-                <strong>Rationale:</strong> {action.get('rationale', 'No rationale provided')}
-            </div>
-            
-            {"<div style='font-size: 13px; color: #dc2626; margin: 8px 0; padding: 8px; background: #fef2f2; border-radius: 6px; border-left: 3px solid #dc2626;'><strong>⚠️ Risk:</strong> " + action['risk'] + "</div>" if action.get('risk') else ""}
-            
-            {"<div style='font-size: 13px; color: #92400e; margin: 8px 0; padding: 8px; background: #fffbeb; border-radius: 6px; border-left: 3px solid #f59e0b;'><strong>🔄 Trade-off:</strong> " + action['tradeoff'] + "</div>" if action.get('tradeoff') else ""}
-            
-            {"<div style='font-size: 13px; color: #b45309; margin: 8px 0; padding: 8px; background: #fef3c7; border-radius: 6px; border-left: 3px solid #f59e0b;'><strong>⏱️ Execution:</strong> " + action['execution_time'] + "</div>" if action.get('execution_time') else ""}
-            
-            {"<div style='font-size: 13px; color: #b91c1c; margin: 8px 0; padding: 8px; background: #fee2e2; border-radius: 6px; border-left: 3px solid #ef4444;'><strong>🚫 Rejected:</strong> " + action['rejection_reason'] + "</div>" if action.get('rejection_reason') else ""}
-            
-            {"<div style='font-size: 13px; color: #7c3aed; margin: 8px 0; padding: 8px; background: #f5f3ff; border-radius: 6px; border-left: 3px solid #8b5cf6;'><strong>🛡️ Safety:</strong> " + action['safety_override'] + "</div>" if action.get('safety_override') else ""}
-        </div>
-        """
-    
-    # Build competing hypotheses (for Network Partition scenario)
-    hypotheses_html = ""
-    if realism.get("competing_hypotheses"):
-        hypotheses_html = """
-        <div style="margin-top: 20px; padding-top: 20px; border-top: 2px solid #e2e8f0;">
-            <div style="font-size: 15px; font-weight: 600; color: #1e293b; margin-bottom: 15px;">
-                🧠 Competing Hypotheses
-            </div>
-        """
-        for hypo in realism["competing_hypotheses"]:
-            hypotheses_html += f"""
-            <div style="display: flex; align-items: center; gap: 15px; margin-bottom: 12px; padding: 12px; 
-                       background: #f8fafc; border-radius: 8px;">
-                <div style="font-size: 24px; color: #3b82f6;">?</div>
-                <div style="flex: 1;">
-                    <div style="font-size: 14px; font-weight: 500; color: #1e293b; margin-bottom: 4px;">
-                        {hypo['cause']} ({hypo['confidence']}%)
-                    </div>
-                    <div style="font-size: 12px; color: #64748b; margin-bottom: 6px;">
-                        {hypo['evidence']}
-                    </div>
-                    <div style="font-size: 11px; color: #475569; font-weight: 500;">
-                        Investigation: {hypo['investigation_path']}
-                    </div>
-                </div>
-                <div style="width: 60px; height: 60px; background: conic-gradient(#3b82f6 0% {hypo['confidence']}%, #e2e8f0 {hypo['confidence']}% 100%); 
-                         border-radius: 50%; display: flex; align-items: center; justify-content: center;">
-                    <div style="width: 50px; height: 50px; background: white; border-radius: 50%; 
-                             display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: bold; color: #1e293b;">
-                        {hypo['confidence']}%
-                    </div>
-                </div>
-            </div>
-            """
-        hypotheses_html += "</div>"
-    
-    # Build risk assessment panel
-    risk_html = ""
-    if realism.get("risk_assessment"):
-        risk_html = """
-        <div style="margin-top: 20px; padding-top: 20px; border-top: 2px solid #e2e8f0;">
-            <div style="font-size: 15px; font-weight: 600; color: #1e293b; margin-bottom: 15px;">
-                ⚠️ Risk Assessment
-            </div>
-            <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;">
-        """
-        for key, value in realism["risk_assessment"].items():
-            risk_html += f"""
-            <div style="padding: 12px; background: #f8fafc; border-radius: 8px; border-left: 4px solid #f59e0b;">
-                <div style="font-size: 12px; color: #64748b; text-transform: uppercase; margin-bottom: 4px;">
-                    {key.replace('_', ' ').title()}
-                </div>
-                <div style="font-size: 14px; font-weight: 600; color: #92400e;">
-                    {value}
-                </div>
-            </div>
-            """
-        risk_html += "</div></div>"
-    
-    # Build confidence degradation panel
-    confidence_html = ""
-    if realism.get("confidence_degradation"):
-        conf = realism["confidence_degradation"]
-        confidence_html = f"""
-        <div style="margin-top: 20px; padding-top: 20px; border-top: 2px solid #e2e8f0;">
-            <div style="font-size: 15px; font-weight: 600; color: #1e293b; margin-bottom: 15px;">
-                ⏱️ Confidence Degradation Over Time
-            </div>
-            <div style="background: #f8fafc; border-radius: 10px; padding: 20px;">
-                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
-                    <div style="text-align: center;">
-                        <div style="font-size: 28px; font-weight: 700; color: #10b981;">{conf['initial']}%</div>
-                        <div style="font-size: 12px; color: #64748b;">Initial Confidence</div>
-                    </div>
-                    <div style="font-size: 24px; color: #94a3b8;">→</div>
-                    <div style="text-align: center;">
-                        <div style="font-size: 28px; font-weight: 700; color: #f59e0b;">{conf['after_8_min']}%</div>
-                        <div style="font-size: 12px; color: #64748b;">After 8 minutes</div>
-                    </div>
-                    <div style="font-size: 24px; color: #94a3b8;">→</div>
-                    <div style="text-align: center;">
-                        <div style="font-size: 28px; font-weight: 700; color: #ef4444;">{conf['after_15_min']}%</div>
-                        <div style="font-size: 12px; color: #64748b;">After 15 minutes</div>
-                    </div>
-                </div>
-                
-                <div style="height: 10px; background: #e2e8f0; border-radius: 5px; margin: 20px 0; position: relative;">
-                    <div style="position: absolute; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, #10b981, #f59e0b, #ef4444); border-radius: 5px;"></div>
-                    <div style="position: absolute; left: {conf['escalation_threshold']}%; top: -5px; width: 2px; height: 20px; background: #1e293b;"></div>
-                    <div style="position: absolute; left: {conf['escalation_threshold']}%; top: 25px; font-size: 11px; color: #64748b; transform: translateX(-50%);">
-                        Escalation at {conf['escalation_threshold']}%
-                    </div>
-                </div>
-                
-                <div style="padding: 12px; background: #fef3c7; border-radius: 8px; border-left: 4px solid #f59e0b;">
-                    <div style="font-size: 13px; color: #92400e; font-weight: 500;">
-                        ⚠️ ARF escalates to human operators when confidence drops below {conf['escalation_threshold']}%
-                    </div>
-                    <div style="font-size: 12px; color: #b45309; margin-top: 5px;">
-                        This prevents autonomous execution in high-uncertainty scenarios
-                    </div>
-                </div>
-            </div>
-        </div>
-        """
-    
-    # Build "What ARF Will NOT Do" panel (global)
-    wont_do_html = """
-    <div style="margin-top: 20px; padding-top: 20px; border-top: 2px solid #e2e8f0;">
-        <div style="font-size: 15px; font-weight: 600; color: #1e293b; margin-bottom: 15px;">
-            🚫 What ARF Will NOT Do (Safety Boundaries)
-        </div>
-        <div style="background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%); 
-                   border: 2px solid #ef4444; border-radius: 12px; padding: 20px;">
-            <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px;">
-                <div style="display: flex; align-items: flex-start; gap: 10px;">
-                    <div style="font-size: 20px; color: #ef4444;">⛔</div>
-                    <div>
-                        <div style="font-size: 14px; font-weight: 600; color: #7f1d1d;">Restart stateful leaders</div>
-                        <div style="font-size: 12px; color: #b91c1c;">During peak traffic or elections</div>
-                    </div>
-                </div>
-                <div style="display: flex; align-items: flex-start; gap: 10px;">
-                    <div style="font-size: 20px; color: #ef4444;">⛔</div>
-                    <div>
-                        <div style="font-size: 14px; font-weight: 600; color: #7f1d1d;">Apply schema changes</div>
-                        <div style="font-size: 12px; color: #b91c1c;">To production databases autonomously</div>
-                    </div>
-                </div>
-                <div style="display: flex; align-items: flex-start; gap: 10px;">
-                    <div style="font-size: 20px; color: #ef4444;">⛔</div>
-                    <div>
-                        <div style="font-size: 14px; font-weight: 600; color: #7f1d1d;">Exceed API limits</div>
-                        <div style="font-size: 12px; color: #b91c1c;">Contractual or rate limits</div>
-                    </div>
-                </div>
-                <div style="display: flex; align-items: flex-start; gap: 10px;">
-                    <div style="font-size: 20px; color: #ef4444;">⛔</div>
-                    <div>
-                        <div style="font-size: 14px; font-weight: 600; color: #7f1d1d;">Modify ACLs/RBAC</div>
-                        <div style="font-size: 12px; color: #b91c1c;">Security permissions autonomously</div>
-                    </div>
-                </div>
-            </div>
-            <div style="margin-top: 15px; padding: 12px; background: rgba(255, 255, 255, 0.7); 
-                       border-radius: 8px; border-left: 4px solid #dc2626;">
-                <div style="font-size: 13px; color: #7f1d1d; font-weight: 500;">
-                    These boundaries ensure ARF operates within safe, reversible limits.
-                    Enterprise edition adds approval workflows for edge cases.
-                </div>
-            </div>
-        </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%);">
-        
-        <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;">
-                    🎯 Ranked Healing Intents
-                </h3>
-                <p style="margin: 0; font-size: 13px; color: #64748b;">
-                    ARF evaluates multiple options with confidence scores and risk assessments
-                </p>
-            </div>
-            <div style="padding: 8px 16px; background: #dbeafe; color: #1e40af; 
-                       border-radius: 20px; font-size: 12px; font-weight: bold;">
-                REALISM UPGRADE v3.3.9+
-            </div>
-        </div>
-        
-        {actions_html}
-        {hypotheses_html}
-        {risk_html}
-        {confidence_html}
-        {wont_do_html}
-        
-        <!-- ROI as Ranges -->
-        <div style="margin-top: 20px; padding-top: 20px; border-top: 2px solid #e2e8f0;">
-            <div style="font-size: 15px; font-weight: 600; color: #1e293b; margin-bottom: 15px;">
-                📈 Realistic ROI Estimates (Ranges)
-            </div>
-            <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px;">
-                <div style="text-align: center; padding: 15px; background: #f8fafc; border-radius: 10px;">
-                    <div style="font-size: 16px; font-weight: 700; color: #10b981;">$5.8K – $7.2K</div>
-                    <div style="font-size: 12px; color: #64748b;">Cost Avoided</div>
-                    <div style="font-size: 11px; color: #94a3b8; margin-top: 5px;">Estimated range</div>
-                </div>
-                <div style="text-align: center; padding: 15px; background: #f8fafc; border-radius: 10px;">
-                    <div style="font-size: 16px; font-weight: 700; color: #10b981;">4.8× – 5.6×</div>
-                    <div style="font-size: 12px; color: #64748b;">ROI Multiplier</div>
-                    <div style="font-size: 11px; color: #94a3b8; margin-top: 5px;">Confidence interval</div>
-                </div>
-                <div style="text-align: center; padding: 15px; background: #f8fafc; border-radius: 10px;">
-                    <div style="font-size: 16px; font-weight: 700; color: #10b981;">68% – 87%</div>
-                    <div style="font-size: 12px; color: #64748b;">Success Rate</div>
-                    <div style="font-size: 11px; color: #94a3b8; margin-top: 5px;">Based on similar incidents</div>
-                </div>
-            </div>
-            <div style="margin-top: 15px; padding: 12px; background: #f0fdf4; border-radius: 8px;">
-                <div style="font-size: 13px; color: #065f46; text-align: center; font-weight: 500;">
-                    📊 Real systems have ranges, not single-point estimates. ARF shows uncertainty honestly.
-                </div>
-            </div>
-        </div>
-        
-        <!-- Engineering Insight -->
-        <div style="margin-top: 20px; padding: 20px; background: #f8fafc; border-radius: 12px; 
-                    border-left: 4px solid #3b82f6;">
-            <div style="display: flex; align-items: flex-start; gap: 15px;">
-                <div style="font-size: 32px;">🎭</div>
-                <div>
-                    <div style="font-size: 14px; font-weight: 600; color: #1e293b; margin-bottom: 8px;">
-                        What Senior SREs Expect at 3 a.m.
-                    </div>
-                    <div style="font-size: 13px; color: #475569; line-height: 1.6;">
-                        "Real systems hesitate. Real systems explain risk. Real systems earn trust. 
-                        ARF shows multiple options with confidence scores because in production, 
-                        there's never a single perfect answer—just trade-offs managed carefully."
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-    """
-    
-    return gr.HTML(full_html)
 
 # -----------------------------
 # Footer