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 class="header-section">
        <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 class="status-bar">
        <span class="status-item active">✅ System Online</span>
        <span class="status-item active">🧠 Agentic Core Active</span>
        <span class="status-item active">📦 OSS Mode (Advisory Only)</span>
        <span class="status-item active">🔒 MCP Safety Enabled</span>
        <span class="status-item">💰 <a href="#tab2" style="color: #10b981; text-decoration: underline;">Enterprise ROI: 5.2×</a></span>
    </div>
    """)

# -----------------------------
# Tab 1: Live Incident Demo - UPDATED TO USE SCENARIOS DATA
# -----------------------------
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 - UPDATED TO USE SCENARIOS DATA
        scenario_card = gr.HTML(f"""
        <div class="scenario-card">
            <div class="scenario-header">
                <h3>🚨 {default_scenario}</h3>
                <span class="severity-badge {default_scenario_data.get('severity', 'HIGH').lower()}">{default_scenario_data.get('severity', 'HIGH')}</span>
            </div>
            <div class="scenario-details">
                <div class="scenario-detail-row">
                    <span class="detail-label">Component:</span>
                    <span class="detail-value">{default_scenario_data.get('component', 'Unknown').replace('_', ' ').title()}</span>
                </div>
                <div class="scenario-detail-row">
                    <span class="detail-label">Affected Users:</span>
                    <span class="detail-value">{metrics.get('affected_users', 'Unknown') if 'affected_users' in metrics else 'Unknown'}</span>
                </div>
                <div class="scenario-detail-row">
                    <span class="detail-label">Revenue Risk:</span>
                    <span class="detail-value revenue-risk">${business_impact.get('revenue_loss_per_hour', 0):,}/hour</span>
                </div>
                <div class="scenario-detail-row">
                    <span class="detail-label">Detection Time:</span>
                    <span class="detail-value">45 seconds (ARF AI)</span>
                </div>
                <div class="scenario-tags">
                    <span class="scenario-tag">{default_scenario_data.get('component', 'unknown').split('_')[0]}</span>
                    <span class="scenario-tag">{default_scenario_data.get('severity', 'high').lower()}</span>
                    <span class="scenario-tag">production</span>
                    <span class="scenario-tag">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
        with gr.Row():
            detection_agent = gr.HTML("""
            <div class="agent-card detection">
                <div class="agent-icon">🕵️‍♂️</div>
                <div class="agent-content">
                    <h4>Detection Agent</h4>
                    <p class="agent-status-text">Anomaly detected: <strong>99.8% confidence</strong></p>
                    <div class="agent-metrics">
                        <span class="agent-metric">Response: 45s</span>
                        <span class="agent-metric">Accuracy: 98.7%</span>
                    </div>
                    <div class="agent-status active">ACTIVE</div>
                </div>
            </div>
            """)
            
            recall_agent = gr.HTML("""
            <div class="agent-card recall">
                <div class="agent-icon">🧠</div>
                <div class="agent-content">
                    <h4>Recall Agent</h4>
                    <p class="agent-status-text"><strong>3 similar incidents</strong> found in RAG memory</p>
                    <div class="agent-metrics">
                        <span class="agent-metric">Recall: 92%</span>
                        <span class="agent-metric">Context: 5 patterns</span>
                    </div>
                    <div class="agent-status active">ACTIVE</div>
                </div>
            </div>
            """)
            
            decision_agent = gr.HTML("""
            <div class="agent-card decision">
                <div class="agent-icon">🎯</div>
                <div class="agent-content">
                    <h4>Decision Agent</h4>
                    <p class="agent-status-text">Generating healing intent with <strong>94% confidence</strong></p>
                    <div class="agent-metrics">
                        <span class="agent-metric">Success Rate: 87%</span>
                        <span class="agent-metric">Safety: 100%</span>
                    </div>
                    <div class="agent-status active">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 class="oss-section">
                <div class="edition-header">
                    <div class="edition-icon">🆓</div>
                    <h3>OSS Edition</h3>
                    <span class="edition-badge">Apache 2.0</span>
                </div>
                <div class="edition-description">
                    <p><strong>Analysis & Advisory Only</strong> - No execution, permanently safe</p>
                </div>
                <div class="boundary-content">
                    <div class="intent-card">
                        <div class="intent-header">
                            <h4>📝 Healing Intent Created</h4>
                            <span class="intent-confidence">94% confidence</span>
                        </div>
                        <div class="intent-details">
                            <p><strong>Action:</strong> Scale Redis cluster from 3 to 5 nodes</p>
                            <p><strong>Pattern Match:</strong> Similar incident resolved with scaling (87% success rate)</p>
                            <p><strong>Safety Check:</strong> ✅ Passed (blast radius: 2 services)</p>
                            <p><strong>Estimated Impact:</strong> Reduce MTTR from 45min to 12min</p>
                        </div>
                        <div class="boundary-stop">
                            <div class="stop-line"></div>
                            <div class="stop-text">🚫 OSS STOPS HERE - No execution</div>
                            <div class="stop-line"></div>
                        </div>
                    </div>
                </div>
            </div>
            """)
            
            enterprise_section = gr.HTML("""
            <div class="enterprise-section">
                <div class="edition-header">
                    <div class="edition-icon">💰</div>
                    <h3>Enterprise Edition</h3>
                    <span class="edition-badge">Commercial</span>
                </div>
                <div class="edition-description">
                    <p><strong>Full Execution & Learning</strong> - Autonomous healing with safety guarantees</p>
                </div>
                <div class="boundary-content">
                    <div class="execution-card">
                        <div class="execution-header">
                            <h4>⚡ Ready to Execute</h4>
                            <span class="execution-mode autonomous">AUTONOMOUS</span>
                        </div>
                        <div class="execution-details">
                            <p><strong>Mode:</strong> Autonomous (Requires Enterprise license)</p>
                            <p><strong>Expected Recovery:</strong> 12 minutes (vs 45 min manual)</p>
                            <p><strong>Cost Saved:</strong> <span class="savings-highlight">$6,375</span></p>
                            <p><strong>Users Protected:</strong> 45,000 → 0 impacted</p>
                        </div>
                        <div class="boundary-start">
                            <div class="start-line"></div>
                            <div class="start-text">✅ Enterprise executes with MCP safety</div>
                            <div class="start-line"></div>
                        </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",
                    elem_classes="oss-btn"
                )
                oss_info = gr.Markdown("*Free, open-source analysis*", elem_classes="button-info")
            
            with gr.Column(scale=1):
                enterprise_btn = gr.Button(
                    "💰 Execute Enterprise Healing",
                    variant="primary", 
                    size="lg",
                    elem_classes="enterprise-btn"
                )
                enterprise_info = gr.Markdown("*Requires Enterprise license*", elem_classes="button-info")
        
        # 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
        with gr.Row():
            detection_time = gr.HTML("""
            <div class="metric-card detection">
                <div class="metric-icon">⏱️</div>
                <div class="metric-content">
                    <h4>Detection Time</h4>
                    <p class="metric-value">45s</p>
                    <p class="metric-comparison">↓ 89% faster than average</p>
                </div>
            </div>
            """)
            
            mttr = gr.HTML("""
            <div class="metric-card mttr">
                <div class="metric-icon">⚡</div>
                <div class="metric-content">
                    <h4>Mean Time to Resolve</h4>
                    <p class="metric-value">12m</p>
                    <p class="metric-comparison">↓ 73% faster than manual</p>
                </div>
            </div>
            """)
        
        with gr.Row():
            auto_heal = gr.HTML("""
            <div class="metric-card auto-heal">
                <div class="metric-icon">🤖</div>
                <div class="metric-content">
                    <h4>Auto-Heal Rate</h4>
                    <p class="metric-value">81.7%</p>
                    <p class="metric-comparison">↑ 5.4× industry average</p>
                </div>
            </div>
            """)
            
            savings = gr.HTML(f"""
            <div class="metric-card savings">
                <div class="metric-icon">💰</div>
                <div class="metric-content">
                    <h4>Cost Saved</h4>
                    <p class="metric-value">${int(business_impact.get('revenue_loss_per_hour', 8500) * 0.85 / 1000):.1f}K</p>
                    <p class="metric-comparison">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
        approval_display = gr.HTML("""
        <div class="approval-status">
            <div class="approval-header">
                <h4>👤 Human Approval Status</h4>
                <span class="approval-badge not-required">Not Required</span>
            </div>
            <div class="approval-content">
                <p><strong>Current Mode:</strong> Advisory (OSS Only)</p>
                <p><em>Switch to "Approval" mode to enable human-in-the-loop workflows</em></p>
                <div class="approval-workflow">
                    <div class="workflow-step">1. ARF generates intent</div>
                    <div class="workflow-step">2. Human reviews & approves</div>
                    <div class="workflow-step">3. ARF executes safely</div>
                </div>
            </div>
        </div>
        """)
        
        # Demo Actions - FIXED: removed 'full_width' parameter
        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*", 
                               elem_classes="demo-info")
    
    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 class="footer">
        <p><strong>Agentic Reliability Framework</strong> © 2025</p>
        <p>Production-grade multi-agent AI for autonomous system reliability intelligence</p>
        <div class="footer-links">
            <a href="https://github.com/petterjuan/agentic-reliability-framework" target="_blank">GitHub</a> •
            <a href="https://huggingface.co/spaces/petter2025/agentic-reliability-framework" target="_blank">Demo</a> •
            <a href="https://pypi.org/project/agentic-reliability-framework" target="_blank">PyPI</a> •
            <a href="mailto:sales@arf.dev">Enterprise Inquiries</a>
        </div>
    </div>
    """)