ui/components.py

"""
Gradio-only UI components for ARF
Ensures full compatibility with app.py
Updated with proper imports and error handling
NOW WITH REAL ARF INSTALLATION DETECTION
"""

import gradio as gr
from typing import Dict, List, Any
import logging

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 - UPDATED WITH INSTALLATION CHECK
# -----------------------------
def create_header(version="3.3.7", mock_mode=False) -> gr.HTML:
    # Try to get installation status
    try:
        from app import get_installation_badges
        installation_badges = get_installation_badges()
    except ImportError:
        installation_badges = """
        <div style="display: flex; justify-content: center; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
            <span style="padding: 4px 12px; background: #f59e0b; 
                        color: white; border-radius: 20px; font-size: 12px; font-weight: bold; 
                        display: flex; align-items: center; gap: 6px;">
                ⚠️ Mock ARF
            </span>
            <span style="padding: 4px 12px; background: #64748b; 
                        color: white; border-radius: 20px; font-size: 12px; font-weight: bold;
                        display: flex; align-items: center; gap: 6px;">
                🔒 Enterprise Required
            </span>
        </div>
        """
    
    mock_text = " · MOCK MODE" if mock_mode else ""
    return gr.HTML(f"""
    <div style="text-align: center; margin-bottom: 25px; padding: 30px 40px; background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%); color: white; border-radius: 16px; box-shadow: 0 8px 32px rgba(59, 130, 246, 0.15);">
        <h1 style="margin: 0 0 10px 0; font-size: 32px;">🚀 Agentic Reliability Framework</h1>
        <h2 style="margin: 0; font-size: 24px; opacity: 0.9;">v{version} (OSS Edition){mock_text}</h2>
        <p style="margin: 15px 0 0 0; font-size: 16px; opacity: 0.8;">
            Production-grade multi-agent AI for autonomous system reliability intelligence
        </p>
        
        <!-- Installation Status Badges -->
        {installation_badges}
    </div>
    """)

def create_status_bar() -> gr.HTML:
    # Try to get installation status
    try:
        from app import get_installation_status
        installation = get_installation_status()
        oss_badge = installation["badges"]["oss"]
        enterprise_badge = installation["badges"]["enterprise"]
        
        oss_status_html = f"""
        <span style="padding: 8px 16px; background: {oss_badge['color']}; color: white; border-radius: 8px; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 6px; border: 1px solid {oss_badge['color']};">
            {oss_badge['icon']} {oss_badge['text']}
        </span>
        """
        
        enterprise_status_html = f"""
        <span style="padding: 8px 16px; background: {enterprise_badge['color']}; color: white; border-radius: 8px; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 6px; border: 1px solid {enterprise_badge['color']};">
            {enterprise_badge['icon']} {enterprise_badge['text']}
        </span>
        """
        
    except ImportError:
        oss_status_html = """
        <span style="padding: 8px 16px; background: #f59e0b; color: white; border-radius: 8px; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 6px; border: 1px solid #f59e0b;">
            ⚠️ Mock ARF
        </span>
        """
        
        enterprise_status_html = """
        <span style="padding: 8px 16px; background: #64748b; color: white; border-radius: 8px; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 6px; border: 1px solid #64748b;">
            🔒 Enterprise Required
        </span>
        """
    
    return gr.HTML(f"""
    <div style="display: flex; justify-content: center; gap: 20px; margin-bottom: 30px; padding: 15px; background: #f8fafc; border-radius: 12px; border: 1px solid #e2e8f0; flex-wrap: wrap;">
        <span style="padding: 8px 16px; background: #10b981; color: white; border-radius: 8px; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 6px; border: 1px solid #10b981;">✅ System Online</span>
        <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;">🧠 Agentic Core Active</span>
        {oss_status_html}
        {enterprise_status_html}
        <span style="padding: 8px 16px; background: white; border-radius: 8px; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 6px; border: 1px solid #e2e8f0;">💰 <a href="#tab2" style="color: #10b981; text-decoration: underline;">Enterprise ROI: 5.2×</a></span>
    </div>
    """)

# -----------------------------
# Tab 1: Live Incident Demo - UPDATED TO USE INLINE STYLES AND PROPER PLOTLY HANDLING
# -----------------------------
def create_tab1_incident_demo(scenarios=INCIDENT_SCENARIOS, default_scenario="Cache Miss Storm") -> tuple:
    """
    Create an expressive, comprehensive incident demo tab for ARF.
    Shows the complete OSS analysis → Enterprise execution workflow.
    UPDATED: Properly handles Plotly figures from app.py
    """
    
    # 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 Incident Scenario",
                info="Choose a production incident to analyze",
                interactive=True,
                container=False
            )
            
            # Scenario Card with rich information - USING INLINE STYLES
            scenario_card = gr.HTML(f"""
            <div style="border: 1px solid #e2e8f0; border-radius: 14px; padding: 20px; background: white; box-shadow: 0 4px 12px rgba(0,0,0,0.05); margin-bottom: 20px;">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 12px; border-bottom: 2px solid #f1f5f9;">
                    <h3 style="margin: 0; font-size: 18px; color: #1e293b;">🚨 {default_scenario}</h3>
                    <span style="padding: 4px 12px; background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); border-radius: 20px; font-size: 12px; font-weight: bold; color: white; text-transform: uppercase; letter-spacing: 0.5px;">{default_scenario_data.get('severity', 'HIGH')}</span>
                </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;">Affected Users:</span>
                        <span style="font-size: 14px; color: #1e293b; font-weight: 600;">{metrics.get('affected_users', 'Unknown') if 'affected_users' in metrics else 'Unknown'}</span>
                    </div>
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; padding: 4px 0;">
                        <span style="font-size: 13px; color: #64748b; font-weight: 500;">Revenue Risk:</span>
                        <span style="font-size: 14px; color: #ef4444; font-weight: 700;">${business_impact.get('revenue_loss_per_hour', 0):,}/hour</span>
                    </div>
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; padding: 4px 0;">
                        <span style="font-size: 13px; color: #64748b; font-weight: 500;">Detection Time:</span>
                        <span style="font-size: 14px; color: #1e293b; font-weight: 600;">45 seconds (ARF AI)</span>
                    </div>
                    <div style="display: flex; flex-wrap: wrap; gap: 6px; margin-top: 15px; padding-top: 12px; border-top: 1px solid #f1f5f9;">
                        <span style="padding: 3px 8px; background: #f1f5f9; border-radius: 6px; font-size: 11px; color: #475569; font-weight: 500;">{default_scenario_data.get('component', 'unknown').split('_')[0]}</span>
                        <span style="padding: 3px 8px; background: #f1f5f9; border-radius: 6px; font-size: 11px; color: #475569; font-weight: 500;">{default_scenario_data.get('severity', 'high').lower()}</span>
                        <span style="padding: 3px 8px; background: #f1f5f9; border-radius: 6px; font-size: 11px; color: #475569; font-weight: 500;">production</span>
                        <span style="padding: 3px 8px; background: #f1f5f9; border-radius: 6px; font-size: 11px; color: #475569; font-weight: 500;">incident</span>
                    </div>
                </div>
            </div>
            """)
            
            # Visualization section - USING gr.Plot() FOR PLOTLY FIGURES
            with gr.Row():
                with gr.Column(scale=1):
                    telemetry_header = gr.Markdown("### 📈 Live Telemetry")
                    # This expects a Plotly figure from app.py
                    telemetry_viz = gr.Plot(
                        label="", 
                        show_label=False,
                        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: Agent Workflow
        with gr.Column(scale=2, variant="panel") as middle_col:
            # Agent Workflow Header
            workflow_header = gr.Markdown("## 🔄 ARF Agent Workflow")
            workflow_subheader = gr.Markdown("### How ARF transforms incidents into autonomous healing")
            
            # Agent Status Cards - USING INLINE STYLES
            with gr.Row():
                detection_agent = gr.HTML("""
                <div style="border: 2px solid #e2e8f0; border-radius: 14px; padding: 18px; background: #f8fafc; text-align: center; flex: 1; margin: 5px; min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0.7;">
                    <div style="font-size: 32px; margin-bottom: 10px; opacity: 0.5;">🕵️‍♂️</div>
                    <div style="width: 100%;">
                        <h4 style="margin: 0 0 8px 0; font-size: 16px; color: #94a3b8;">Detection Agent</h4>
                        <p style="font-size: 13px; color: #cbd5e1; margin-bottom: 12px; line-height: 1.4;">Click "Run OSS Analysis" to activate</p>
                        <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_agent = gr.HTML("""
                <div style="border: 2px solid #e2e8f0; border-radius: 14px; padding: 18px; background: #f8fafc; text-align: center; flex: 1; margin: 5px; min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0.7;">
                    <div style="font-size: 32px; margin-bottom: 10px; opacity: 0.5;">🧠</div>
                    <div style="width: 100%;">
                        <h4 style="margin: 0 0 8px 0; font-size: 16px; color: #94a3b8;">Recall Agent</h4>
                        <p style="font-size: 13px; color: #cbd5e1; margin-bottom: 12px; line-height: 1.4;">Click "Run OSS Analysis" to activate</p>
                        <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_agent = gr.HTML("""
                <div style="border: 2px solid #e2e8f0; border-radius: 14px; padding: 18px; background: #f8fafc; text-align: center; flex: 1; margin: 5px; min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0.7;">
                    <div style="font-size: 32px; margin-bottom: 10px; opacity: 0.5;">🎯</div>
                    <div style="width: 100%;">
                        <h4 style="margin: 0 0 8px 0; font-size: 16px; color: #94a3b8;">Decision Agent</h4>
                        <p style="font-size: 13px; color: #cbd5e1; margin-bottom: 12px; line-height: 1.4;">Click "Run OSS Analysis" to activate</p>
                        <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>
                """)
            
            # OSS vs Enterprise Boundary Visualization
            boundary_header = gr.Markdown("### 🎭 OSS vs Enterprise: The Safety Boundary")
            
            with gr.Row():
                oss_section = gr.HTML("""
                <div style="padding: 20px; border-radius: 14px; margin-bottom: 15px; flex: 1; min-height: 320px; background: #f0f9ff; border: 2px solid #0ea5e9;">
                    <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 15px; padding-bottom: 12px; border-bottom: 2px solid rgba(0, 0, 0, 0.1);">
                        <div style="font-size: 28px;">🆓</div>
                        <h3 style="margin: 0; font-size: 20px; color: #1e293b; flex: 1;">OSS Edition</h3>
                        <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;">📝 Healing Intent Created</h4>
                            <span style="padding: 4px 10px; background: #dbeafe; color: #1d4ed8; border-radius: 6px; font-size: 12px; font-weight: bold;">94% confidence</span>
                        </div>
                        <div>
                            <p style="margin: 8px 0; font-size: 14px; color: #475569;"><strong>Action:</strong> Scale Redis cluster from 3 to 5 nodes</p>
                            <p style="margin: 8px 0; font-size: 14px; color: #475569;"><strong>Pattern Match:</strong> Similar incident resolved with scaling (87% success rate)</p>
                            <p style="margin: 8px 0; font-size= 14px; color: #475569;"><strong>Safety Check:</strong> ✅ Passed (blast radius: 2 services)</p>
                            <p style="margin: 8px 0; font-size: 14px; color: #475569;"><strong>Estimated Impact:</strong> Reduce MTTR from 45min to 12min</p>
                        </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;">Enterprise 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 Saved:</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 OSS Analysis",
                        variant="secondary",
                        size="lg"
                    )
                    oss_info = gr.Markdown("*Free, open-source analysis*")
                
                with gr.Column(scale=1):
                    enterprise_btn = gr.Button(
                        "💰 Execute Enterprise Healing",
                        variant="primary", 
                        size="lg"
                    )
                    enterprise_info = gr.Markdown("*Requires Enterprise license*")
            
            # 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="MCP Safety Mode",
                        info="Control execution safety level",
                        interactive=True
                    )
            
            # 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 - USING INLINE STYLES
            with gr.Row():
                detection_time = gr.HTML("""
                <div style="border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px; background: white; margin: 8px; text-align: center; flex: 1; min-width: 140px; border-left: 4px solid #3b82f6;">
                    <div style="font-size: 28px; margin-bottom: 10px;">⏱️</div>
                    <div>
                        <h4 style="margin: 0 0 8px 0; font-size: 14px; color: #64748b; font-weight: 600;">Detection Time</h4>
                        <p style="font-size: 28px; font-weight: bold; color: #1e40af; margin: 8px 0;">45s</p>
                        <p style="font-size: 12px; color: #64748b; margin: 0;">↓ 89% faster than average</p>
                    </div>
                </div>
                """)
                
                mttr = gr.HTML("""
                <div style="border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px; background: white; margin: 8px; text-align: center; flex: 1; min-width: 140px; border-left: 4px solid #10b981;">
                    <div style="font-size: 28px; margin-bottom: 10px;">⚡</div>
                    <div>
                        <h4 style="margin: 0 0 8px 0; font-size: 14px; color: #64748b; font-weight: 600;">Mean Time to Resolve</h4>
                        <p style="font-size: 28px; font-weight: bold; color: #10b981; margin: 8px 0;">12m</p>
                        <p style="font-size: 12px; color: #64748b; margin: 0;">↓ 73% faster than manual</p>
                    </div>
                </div>
                """)
            
            with gr.Row():
                auto_heal = gr.HTML("""
                <div style="border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px; background: white; margin: 8px; text-align: center; flex: 1; min-width: 140px; border-left: 4px solid #8b5cf6;">
                    <div style="font-size: 28px; margin-bottom: 10px;">🤖</div>
                    <div>
                        <h4 style="margin: 0 0 8px 0; font-size: 14px; color: #64748b; font-weight: 600;">Auto-Heal Rate</h4>
                        <p style="font-size: 28px; font-weight: bold; color: #8b5cf6; margin: 8px 0;">81.7%</p>
                        <p style="font-size: 12px; color: #64748b; margin: 0;">↑ 5.4× industry average</p>
                    </div>
                </div>
                """)
                
                savings = gr.HTML(f"""
                <div style="border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px; background: white; margin: 8px; text-align: center; flex: 1; min-width: 140px; border-left: 4px solid #f59e0b;">
                    <div style="font-size: 28px; margin-bottom: 10px;">💰</div>
                    <div>
                        <h4 style="margin: 0 0 8px 0; font-size: 14px; color: #64748b; font-weight: 600;">Cost Saved</h4>
                        <p style="font-size: 28px; font-weight: bold; color: #f59e0b; margin: 8px 0;">${int(business_impact.get('revenue_loss_per_hour', 8500) * 0.85 / 1000):.1f}K</p>
                        <p style="font-size: 12px; color: #64748b; margin: 0;">Per incident avoided</p>
                    </div>
                </div>
                """)
            
            # Results Display Areas
            oss_results_header = gr.Markdown("### 🆓 OSS Analysis Results")
            oss_results_display = gr.JSON(
                label="",
                value={
                    "status": "Analysis Pending",
                    "agents": ["Detection", "Recall", "Decision"],
                    "mode": "Advisory Only",
                    "action": "Generate HealingIntent"
                },
                height=200
            )
            
            enterprise_results_header = gr.Markdown("### 💰 Enterprise 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 - USING INLINE STYLES
            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 (OSS Only)</p>
                    <p style="margin: 8px 0; font-size: 14px; color: #475569; font-style: italic;">Switch to "Approval" mode to enable human-in-the-loop workflows</p>
                    <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 20px;">
                        <div style="padding: 12px; background: #f8fafc; border-radius: 10px; border-left: 4px solid #3b82f6; font-size: 14px; color: #475569; font-weight: 500;">1. ARF generates intent</div>
                        <div style="padding: 12px; background: #f8fafc; border-radius: 10px; border-left: 4px solid #3b82f6; font-size: 14px; color: #475569; font-weight: 500;">2. Human reviews & approves</div>
                        <div style="padding: 12px; background: #f8fafc; border-radius: 10px; border-left: 4px solid #3b82f6; font-size: 14px; color: #475569; font-weight: 500;">3. ARF executes safely</div>
                    </div>
                </div>
            </div>
            """)
            
            # Demo Actions
            demo_btn = gr.Button(
                "▶️ Run Complete Demo Walkthrough",
                variant="secondary",
                size="lg"
            )
            demo_info = gr.Markdown("*Experience the full ARF workflow from detection to resolution*")
    
    return (
        # Left column returns
        scenario_dropdown, scenario_card, telemetry_viz, impact_viz,
        # Middle column returns
        workflow_header, detection_agent, recall_agent, decision_agent,
        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
    )
# -----------------------------
# 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)
    
# Add this function to ui/components.py (new 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> © 2025</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:sales@arf.dev" style="color: #3b82f6; text-decoration: none; font-weight: 500;">Enterprise Inquiries</a>
        </div>
    </div>
    """)