ui/components.py

"""
Gradio-only UI components for ARF
Ensures full compatibility with app.py
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__)

# Try to import scenarios from registry first
try:
    from config.scenario_registry import ScenarioRegistry
    INCIDENT_SCENARIOS = ScenarioRegistry.load_scenarios()
    logger.info(f"Loaded {len(INCIDENT_SCENARIOS)} scenarios from registry")
except ImportError:
    logger.warning("Scenario registry not available, falling back to demo scenarios")
    from demo.scenarios import INCIDENT_SCENARIOS

# -----------------------------
# 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="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} (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 policy execution for system reliability intelligence
                </p>
                
                <!-- Clean Architecture Badge -->
                <div style="display: inline-block; padding: 8px 20px; background: linear-gradient(135deg, #f0f9ff 0%, #dbeafe 100%); 
                            border: 2px solid #3b82f6; border-radius: 20px; font-size: 14px; font-weight: 600; color: #1e40af;">
                    🏗️ Architecture: OSS advises → Enterprise executes
                </div>
            </div>
        </div>
    </div>
    """)

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;">
            ✅ 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 Execution
        </span>
    </div>
    """)

# -----------------------------
# 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)
    Doctrinal: No red/green colors, use gradient colors instead of binary thresholds
    """
    
    # Scenario-specific metrics mapping WITH GRADIENT COLORS
    metrics_config = {
        "Cache": {
            "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": {
            "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": {
            "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": {
            "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": {
            "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": {
            "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
        }
    }
    
    # Determine scenario type
    scenario_type = "Default"
    for key in ["Cache", "Database", "Kubernetes", "Network", "Storage"]:
        if key.lower() in scenario_name.lower():
            scenario_type = key
            break
    
    # Get metrics for scenario type
    metrics = metrics_config.get(scenario_type, metrics_config["Default"])
    
    # 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_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 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; 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; 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; 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; 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; 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; 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; 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 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>
    """
    
    logger.info(f"✅ Updated performance metrics for {scenario_name} ({scenario_type} type)")
    return detection_time_html, mttr_html, auto_heal_html, savings_html

# -----------------------------
# Tab 1: Live Incident Demo - DOCTRINAL COMPLIANCE
# -----------------------------
def create_tab1_incident_demo(scenarios=INCIDENT_SCENARIOS, default_scenario="Cache Miss Storm") -> tuple:
    """
    Create doctrinally compliant incident demo tab.
    Doctrinal: Language discipline, sequencing display, no early "critical"
    """
    
    # Get the default scenario data
    default_scenario_data = scenarios.get(default_scenario, {})
    business_impact = default_scenario_data.get("business_impact", {})
    metrics = default_scenario_data.get("metrics", {})
    
    with gr.Row():
        # Left Column: Scenario Selection & Live Visualization
        with gr.Column(scale=1, variant="panel") as left_col:
            # Scenario Selection with rich preview
            scenario_dropdown = gr.Dropdown(
                choices=list(scenarios.keys()),
                value=default_scenario,
                label="🎯 Select Variance Scenario",
                info="Choose a production variance pattern to analyze",
                interactive=True,
                container=False
            )
            
            # ============ 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, #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;">
                        <span style="font-size: 13px; color: #64748b; font-weight: 500;">Component:</span>
                        <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;">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: #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 (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;">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;">pattern</span>
                    </div>
                </div>
            </div>
            """)
            
            # Visualization section
            with gr.Row():
                with gr.Column(scale=1):
                    telemetry_header = gr.Markdown("### 📈 Live Telemetry")
                    telemetry_viz = gr.Plot(
                        label="", 
                        show_label=False,
                        elem_id="telemetry_plot"
                    )
                    
                with gr.Column(scale=1):
                    impact_header = gr.Markdown("### 💰 Business Impact")
                    impact_viz = gr.Plot(
                        label="",
                        show_label=False,
                        elem_id="impact_plot"
                    )
        
        # 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>
            """)
            
            # ============ 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>
            """)
            
            # 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")
            
            # 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>
                """)
            
            # 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("### 🎭 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>
                        <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>
                        </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>
                    </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;">
                            <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>
                        </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>
                        <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>
                    </div>
                </div>
                """)
            
            # Execution Controls
            with gr.Row():
                with gr.Column(scale=1):
                    oss_btn = gr.Button(
                        "🆓 Run Policy Analysis",
                        variant="secondary",
                        size="lg"
                    )
                    oss_info = gr.Markdown("*Free, policy-only analysis*")
                
                with gr.Column(scale=1):
                    enterprise_btn = gr.Button(
                        "💰 Execute Enterprise Healing",
                        variant="primary", 
                        size="lg"
                    )
                    enterprise_info = gr.Markdown("*Requires Enterprise license*")
            
            # Timeline visualization
            timeline_header = gr.Markdown("### ⏰ Incident Timeline")
            timeline_viz = gr.Plot(
                label="",
                show_label=False,
                elem_id="timeline_plot"
            )
        
        # 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 - 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("### 🆓 Policy Analysis Results")
            oss_results_display = gr.JSON(
                label="",
                value={
                    "status": "Analysis Pending",
                    "processes": ["Detection", "Recall", "Decision"],
                    "mode": "Advisory Only",
                    "action": "Generate Formal HealingIntent"
                },
                height=200
            )
            
            enterprise_results_header = gr.Markdown("### 💰 Execution Results") 
            enterprise_results_display = gr.JSON(
                label="",
                value={
                    "status": "Execution Pending",
                    "requires_license": True,
                    "available_modes": ["Approval", "Autonomous"],
                    "expected_outcome": "12m MTTR, $6.3K saved"
                },
                height=200
            )
            
            # 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;">
                    <h4 style="margin: 0; font-size: 16px; color: #1e293b;">👤 Human Approval Status</h4>
                    <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 (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. 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>
            """)
            
            # Demo Actions
            demo_btn = gr.Button(
                "▶️ Run Complete Walkthrough",
                variant="secondary",
                size="lg"
            )
            demo_info = gr.Markdown("*Experience the full workflow from detection to resolution*")
    
    return (
        # Left column returns
        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
# -----------------------------
def create_tab2_business_roi(scenarios=INCIDENT_SCENARIOS) -> tuple:
    dashboard_output = gr.Plot(label="Executive Dashboard", show_label=True)
    roi_scenario_dropdown = gr.Dropdown(
        choices=list(scenarios.keys()), 
        value="Cache Miss Storm", 
        label="Scenario for ROI Analysis",
        info="Select the primary incident type for ROI calculation"
    )
    monthly_slider = gr.Slider(
        minimum=1, 
        maximum=50, 
        value=15, 
        step=1, 
        label="Monthly Incidents",
        info="Average number of incidents per month"
    )
    team_slider = gr.Slider(
        minimum=1, 
        maximum=50, 
        value=5, 
        step=1, 
        label="Team Size",
        info="Number of engineers on reliability team"
    )
    calculate_btn = gr.Button("📊 Calculate Comprehensive ROI", variant="primary", size="lg")
    roi_output = gr.JSON(label="ROI Analysis Results", value={})
    roi_chart = gr.Plot(label="ROI Visualization")
    
    return (dashboard_output, roi_scenario_dropdown, monthly_slider, team_slider,
            calculate_btn, roi_output, roi_chart)

# -----------------------------
# Tab 3: Enterprise Features - UPDATED WITH INSTALLATION STATUS
# -----------------------------
def create_tab3_enterprise_features() -> tuple:
    # Get installation status
    try:
        from app import get_installation_status
        installation = get_installation_status()
        
        license_data = {
            "status": "✅ OSS Installed" if installation["oss_installed"] else "⚠️ OSS Not Installed",
            "oss_version": installation["oss_version"] or "Not installed",
            "enterprise_installed": installation["enterprise_installed"],
            "enterprise_version": installation["enterprise_version"] or "Not installed",
            "execution_allowed": installation["execution_allowed"],
            "recommendations": installation["recommendations"],
            "badges": installation["badges"]
        }
        
        # Update features table based on installation
        features_data = [
            ["ARF OSS Package", "✅ Installed" if installation["oss_installed"] else "❌ Not Installed", "OSS"],
            ["Self-Healing Core", "✅ Active", "Enterprise"],
            ["RAG Graph Memory", "✅ Active", "Both"],
            ["Predictive Analytics", "🔒 Enterprise" if not installation["enterprise_installed"] else "✅ Available", "Enterprise"],
            ["Audit Trail", "🔒 Enterprise" if not installation["enterprise_installed"] else "✅ Available", "Enterprise"],
            ["Compliance (SOC2)", "🔒 Enterprise" if not installation["enterprise_installed"] else "✅ Available", "Enterprise"]
        ]
        
    except ImportError:
        # Fallback if installation check fails
        license_data = {
            "status": "⚠️ Installation Check Failed",
            "oss_version": "Unknown",
            "enterprise_installed": False,
            "recommendations": ["Run installation check"]
        }
        features_data = [
            ["Self-Healing Core", "✅ Active", "Enterprise"],
            ["RAG Graph Memory", "✅ Active", "Both"],
            ["Predictive Analytics", "🔒 Enterprise", "Enterprise"],
            ["Audit Trail", "🔒 Enterprise", "Enterprise"],
            ["Compliance (SOC2)", "🔒 Enterprise", "Enterprise"],
            ["Multi-Cloud", "🔒 Enterprise", "Enterprise"]
        ]
    
    license_display = gr.JSON(
        value=license_data,
        label="📦 Package Installation Status"
    )
    
    validate_btn = gr.Button("🔍 Validate Installation", variant="secondary")
    trial_btn = gr.Button("🆓 Start 30-Day Trial", variant="secondary")
    upgrade_btn = gr.Button("🚀 Upgrade to Enterprise", variant="primary")
    
    mcp_mode = gr.Dropdown(
        choices=["advisory", "approval", "autonomous"], 
        value="advisory", 
        label="MCP Safety Mode"
    )
    
    # Initial mode info
    mcp_mode_info = gr.JSON(
        value={
            "current_mode": "advisory",
            "description": "OSS Edition - Analysis only, no execution",
            "features": ["Incident analysis", "RAG similarity", "HealingIntent creation"],
            "package": "agentic-reliability-framework==3.3.7",
            "license": "Apache 2.0"
        },
        label="Mode Details"
    )
    
    integrations_data = [
        ["Prometheus", "✅ Connected", "Monitoring"],
        ["Grafana", "✅ Connected", "Visualization"],
        ["Slack", "🔒 Enterprise", "Notifications"],
        ["PagerDuty", "🔒 Enterprise", "Alerting"],
        ["Jira", "🔒 Enterprise", "Ticketing"],
        ["Datadog", "🔒 Enterprise", "Monitoring"]
    ]
    
    features_table = gr.Dataframe(
        headers=["Feature", "Status", "Edition"], 
        value=features_data,
        label="Feature Comparison"
    )
    integrations_table = gr.Dataframe(
        headers=["Integration", "Status", "Type"], 
        value=integrations_data,
        label="Integration Status"
    )
    
    return (license_display, validate_btn, trial_btn, upgrade_btn,
            mcp_mode, mcp_mode_info, features_table, integrations_table)

# -----------------------------
# Tab 4: Audit Trail
# -----------------------------
def create_tab4_audit_trail() -> tuple:
    refresh_btn = gr.Button("🔄 Refresh Audit Trail", variant="secondary")
    clear_btn = gr.Button("🗑️ Clear History", variant="secondary")
    export_btn = gr.Button("📥 Export as JSON", variant="primary")
    
    execution_headers = ["Time", "Scenario", "Mode", "Status", "Savings", "Details"]
    incident_headers = ["Time", "Component", "Scenario", "Severity", "Status"]
    
    execution_table = gr.Dataframe(
        headers=execution_headers,
        value=[],
        label="Execution History"
    )
    incident_table = gr.Dataframe(
        headers=incident_headers,
        value=[],
        label="Incident History"
    )
    export_text = gr.JSON(
        value={"status": "Export ready"},
        label="Export Data"
    )
    
    return (refresh_btn, clear_btn, export_btn, execution_table, incident_table, export_text)

# -----------------------------
# Tab 5: Learning Engine
# -----------------------------
def create_tab5_learning_engine() -> tuple:
    learning_graph = gr.Plot(label="RAG Memory Graph")
    graph_type = gr.Dropdown(
        choices=["Incident Patterns", "Action-Outcome Chains", "System Dependencies"],
        value="Incident Patterns",
        label="Graph Type"
    )
    show_labels = gr.Checkbox(label="Show Labels", value=True)
    search_query = gr.Textbox(label="Search Patterns", placeholder="Enter pattern to search...")
    search_btn = gr.Button("🔍 Search Patterns", variant="secondary")
    clear_btn_search = gr.Button("🗑️ Clear Search", variant="secondary")
    search_results = gr.JSON(
        value={"status": "Ready for search"},
        label="Search Results"
    )
    stats_display = gr.JSON(
        value={"patterns": 42, "incidents": 156, "success_rate": "87.3%"},
        label="Learning Statistics"
    )
    patterns_display = gr.JSON(
        value={"common_patterns": ["cache_storm", "db_pool", "memory_leak"]},
        label="Pattern Library"
    )
    performance_display = gr.JSON(
        value={"accuracy": "94.2%", "recall": "89.7%", "precision": "92.1%"},
        label="Agent Performance"
    )
    
    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
# -----------------------------
def create_footer() -> gr.HTML:
    return gr.HTML("""
    <div style="text-align: center; padding: 25px; color: #6b7280; font-size: 14px; margin-top: 40px; border-top: 2px solid #e5e7eb; background: #f9fafb; border-radius: 12px;">
        <p><strong style="color: #1e293b; font-size: 16px;">Agentic Reliability Framework</strong> © 2026</p>
        <p>Production-grade multi-agent AI for autonomous system reliability intelligence</p>
        <div style="margin-top: 15px; display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;">
            <a href="https://github.com/petterjuan/agentic-reliability-framework" target="_blank" style="color: #3b82f6; text-decoration: none; font-weight: 500;">GitHub</a> •
            <a href="https://huggingface.co/spaces/petter2025/agentic-reliability-framework" target="_blank" style="color: #3b82f6; text-decoration: none; font-weight: 500;">Demo</a> •
            <a href="https://pypi.org/project/agentic-reliability-framework" target="_blank" style="color: #3b82f6; text-decoration: none; font-weight: 500;">PyPI</a> •
            <a href="mailto:petter2025us@outmail.com" style="color: #3b82f6; text-decoration: none; font-weight: 500;">Enterprise Inquiries</a>
        </div>
    </div>
    """)