ui/components.py

"""
Gradio-only UI components for ARF
Ensures full compatibility with app.py
"""

import gradio as gr
from typing import Dict, List, Any
from demo.scenarios import INCIDENT_SCENARIOS

# -----------------------------
# Header & Status
# -----------------------------
def create_header(version="3.3.6", mock_mode=False) -> gr.HTML:
    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>
    </div>
    """)

def create_status_bar() -> gr.HTML:
    return gr.HTML("""
    <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>
        <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;">📦 OSS Mode (Advisory Only)</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;">🔒 MCP Safety Enabled</span>
        <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
# -----------------------------
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.
    """
    
    # 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", {})
    
    # 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>
        """)
        
        # Live Telemetry Visualization
        telemetry_header = gr.Markdown("### 📈 Live Telemetry")
        telemetry_viz = gr.Plot(label="", show_label=False)
        
        # Business Impact Visualization
        impact_header = gr.Markdown("### 💰 Business Impact")
        impact_viz = gr.Plot(label="", show_label=False)
    
    # 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 #3b82f6; border-radius: 14px; padding: 18px; background: #eff6ff; text-align: center; flex: 1; margin: 5px; min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center;">
                <div style="font-size: 32px; margin-bottom: 10px;">🕵️‍♂️</div>
                <div style="width: 100%;">
                    <h4 style="margin: 0 0 8px 0; font-size: 16px; color: #1e293b;">Detection Agent</h4>
                    <p style="font-size: 13px; color: #475569; margin-bottom: 12px; line-height: 1.4;">Anomaly detected: <strong>99.8% confidence</strong></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.8); border-radius: 6px; color: #475569; font-weight: 500;">Response: 45s</span>
                        <span style="font-size: 11px; padding: 3px 8px; background: rgba(255, 255, 255, 0.8); border-radius: 6px; color: #475569; font-weight: 500;">Accuracy: 98.7%</span>
                    </div>
                    <div style="display: inline-block; padding: 5px 14px; background: linear-gradient(135deg, #10b981 0%, #059669 100%); border-radius: 20px; font-size: 12px; font-weight: bold; color: white; text-transform: uppercase; letter-spacing: 0.5px;">ACTIVE</div>
                </div>
            </div>
            """)
            
            recall_agent = gr.HTML("""
            <div style="border: 2px solid #8b5cf6; border-radius: 14px; padding: 18px; background: #f5f3ff; text-align: center; flex: 1; margin: 5px; min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center;">
                <div style="font-size: 32px; margin-bottom: 10px;">🧠</div>
                <div style="width: 100%;">
                    <h4 style="margin: 0 0 8px 0; font-size: 16px; color: #1e293b;">Recall Agent</h4>
                    <p style="font-size: 13px; color: #475569; margin-bottom: 12px; line-height: 1.4;"><strong>3 similar incidents</strong> found in RAG memory</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.8); border-radius: 6px; color: #475569; font-weight: 500;">Recall: 92%</span>
                        <span style="font-size: 11px; padding: 3px 8px; background: rgba(255, 255, 255, 0.8); border-radius: 6px; color: #475569; font-weight: 500;">Context: 5 patterns</span>
                    </div>
                    <div style="display: inline-block; padding: 5px 14px; background: linear-gradient(135deg, #10b981 0%, #059669 100%); border-radius: 20px; font-size: 12px; font-weight: bold; color: white; text-transform: uppercase; letter-spacing: 0.5px;">ACTIVE</div>
                </div>
            </div>
            """)
            
            decision_agent = gr.HTML("""
            <div style="border: 2px solid #10b981; border-radius: 14px; padding: 18px; background: #f0fdf4; text-align: center; flex: 1; margin: 5px; min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center;">
                <div style="font-size: 32px; margin-bottom: 10px;">🎯</div>
                <div style="width: 100%;">
                    <h4 style="margin: 0 0 8px 0; font-size: 16px; color: #1e293b;">Decision Agent</h4>
                    <p style="font-size: 13px; color: #475569; margin-bottom: 12px; line-height: 1.4;">Generating healing intent with <strong>94% confidence</strong></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.8); border-radius: 6px; color: #475569; font-weight: 500;">Success Rate: 87%</span>
                        <span style="font-size: 11px; padding: 3px 8px; background: rgba(255, 255, 255, 0.8); border-radius: 6px; color: #475569; font-weight: 500;">Safety: 100%</span>
                    </div>
                    <div style="display: inline-block; padding: 5px 14px; background: linear-gradient(135deg, #10b981 0%, #059669 100%); border-radius: 20px; font-size: 12px; font-weight: bold; color: white; text-transform: uppercase; letter-spacing: 0.5px;">ACTIVE</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)
    
    # 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
# -----------------------------
def create_tab3_enterprise_features() -> tuple:
    license_display = gr.JSON(
        value={"status": "🆓 OSS Mode Active", "features": ["Advisory Analysis", "RAG Memory", "HealingIntent"]},
        label="License Status"
    )
    validate_btn = gr.Button("🔍 Validate License", 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"
    )
    mcp_mode_info = gr.JSON(
        value={
            "current_mode": "advisory",
            "description": "OSS Edition - Analysis only, no execution",
            "features": ["Incident analysis", "RAG similarity", "HealingIntent creation"]
        },
        label="Mode Details"
    )
    
    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"]
    ]
    
    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)

# -----------------------------
# 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>
    """)