Update ui/components.py

ui/components.py

@@ -1,180 +1,246 @@
 """
-Enhanced components with real ARF integration
-(Streamlit-optional, Hugging Face safe)
+ARF UI Components
+Gradio-first, Hugging Face Spaces safe
+Compatible with app.py v3.8.0
 """
-from __future__ import annotations
 
-import logging
-from datetime import datetime
-from typing import List, Dict, Any
-import time
+from __future__ import annotations
 
+import gradio as gr
 import plotly.graph_objects as go
-import plotly.express as px
-import pandas as pd
-import numpy as np
-
-logger = logging.getLogger(__name__)
-
-# --- OPTIONAL Streamlit import (HF-safe) ---
-try:
-    import streamlit as st  # type: ignore
-except Exception:
-    st = None
-    logger.info("Streamlit not available; ui.components running in headless mode.")
-
-
-# -----------------------------
-# Helpers
-# -----------------------------
-def _require_streamlit() -> bool:
-    """Guard to prevent crashes when Streamlit is unavailable."""
-    return st is not None
-
-
-# -----------------------------
-# Mock ARF object (demo-safe)
-# -----------------------------
-class MockHealingIntent:
-    def __init__(self, action, component, confidence, status, rag_similarity_score=None):
-        self.action = action
-        self.component = component
-        self.confidence = confidence
-        self.status = status
-        self.rag_similarity_score = rag_similarity_score
-        self.deterministic_id = f"intent_{int(time.time())}"
-        self.created_at = time.time()
-
-    def get_execution_summary(self):
-        return {
-            "intent_id": self.deterministic_id,
-            "action": self.action,
-            "component": self.component,
-            "confidence": self.confidence,
-            "status": self.status.value if hasattr(self.status, "value") else self.status,
-            "rag_similarity_score": self.rag_similarity_score,
-        }
-
-
-# -----------------------------
-# UI Components (SAFE)
-# -----------------------------
-def create_arf_enhanced_timeline(
-    incident_data: Dict[str, Any],
-    healing_intents: List[Dict[str, Any]] | None = None,
-):
-    if not _require_streamlit():
-        return
-
-    col1, col2 = st.columns([2, 1])
-
-    with col1:
-        st.markdown("### 📈 ARF-Enhanced Incident Timeline")
-
-        events = [
-            {"time": "-5m", "event": "📡 Alert Triggered", "phase": "detection", "color": "#FF6B6B"},
-            {"time": "-4m", "event": "🧠 ARF Analysis Started", "phase": "analysis", "color": "#4ECDC4"},
-            {"time": "-3.5m", "event": "🔍 RAG Similarity Search", "phase": "rag", "color": "#1E90FF"},
-            {"time": "-2.5m", "event": "🎯 Pattern Detection", "phase": "pattern", "color": "#9D4EDD"},
-            {"time": "-1.5m", "event": "💡 HealingIntent Generated", "phase": "intent", "color": "#FFD166"},
-            {"time": "-1m", "event": "⚡ MCP Execution", "phase": "execution", "color": "#06D6A0"},
-            {"time": "Now", "event": "✅ Resolution Complete", "phase": "resolution", "color": "#118AB2"},
-        ]
-
-        fig = go.Figure()
-
-        fig.add_trace(
-            go.Scatter(
-                x=list(range(len(events))),
-                y=[0] * len(events),
-                mode="lines+markers",
-                marker=dict(size=16, color=[e["color"] for e in events]),
-                line=dict(width=2),
-                hovertext=[e["event"] for e in events],
-                hoverinfo="text",
-            )
-        )
-
-        fig.update_layout(
-            height=250,
-            showlegend=False,
-            xaxis=dict(visible=False),
-            yaxis=dict(visible=False),
-            margin=dict(l=20, r=20, t=20, b=20),
-        )
-
-        st.plotly_chart(fig, use_container_width=True)
-
-    with col2:
-        st.markdown("### 🎯 ARF Pattern Detection")
-
-        rag_score = (
-            healing_intents[0].get("rag_similarity_score", 0.85)
-            if healing_intents
-            else 0.85
-        )
-
-        fig = go.Figure(
-            go.Indicator(
-                mode="gauge+number",
-                value=rag_score * 100,
-                gauge={"axis": {"range": [0, 100]}},
-                title={"text": "RAG Similarity"},
-            )
-        )
-
-        fig.update_layout(height=200)
-        st.plotly_chart(fig, use_container_width=True)
-
-
-def create_healing_intent_visualizer(healing_intent: Dict[str, Any]):
-    if not _require_streamlit():
-        return
-
-    st.markdown("### 💡 ARF HealingIntent")
-
-    confidence = healing_intent.get("confidence", 0.85)
-
-    fig = go.Figure(
-        go.Indicator(
-            mode="gauge+number",
-            value=confidence * 100,
-            gauge={"axis": {"range": [0, 100]}},
-            title={"text": "Confidence"},
-        )
-    )
+from typing import Dict, Any, List
+
+
+# ============================================================
+# HEADER / FOOTER
+# ============================================================
+
+def create_header(version: str, enterprise: bool = False):
+    badge = "ENTERPRISE EDITION" if enterprise else "OSS EDITION"
+    return gr.HTML(
+        f"""
+        <div style="padding:20px;border-bottom:1px solid #eee">
+            <h1>🚀 Agentic Reliability Framework</h1>
+            <p><b>Version:</b> {version} · <b>{badge}</b></p>
+        </div>
+        """
+    )
+
+
+def create_footer():
+    return gr.HTML(
+        """
+        <div style="padding:20px;border-top:1px solid #eee;text-align:center;color:#666">
+            ARF © 2025 · Self-Healing Agentic Systems
+        </div>
+        """
+    )
 
-    fig.update_layout(height=180)
-    st.plotly_chart(fig, use_container_width=True)
-
-    st.json(healing_intent)
 
+def create_status_bar():
+    return gr.HTML(
+        """
+        <div style="padding:10px;background:#f5f7fa;border-radius:8px">
+            ✅ System Online · 🧠 Agentic Core Active · 📦 OSS Mode
+        </div>
+        """
+    )
 
-def create_rag_similarity_panel(query: str, similar_incidents: List[Dict[str, Any]]):
-    if not _require_streamlit():
-        return
 
-    st.markdown("### 🔍 RAG Similarity Search")
+# ============================================================
+# TAB 1 — INCIDENT DEMO
+# ============================================================
 
-    if not similar_incidents:
-        st.info("No similar incidents found")
-        return
+def create_tab1_incident_demo(scenarios: Dict[str, Any], default: str):
+    scenario_dropdown = gr.Dropdown(
+        choices=list(scenarios.keys()),
+        value=default,
+        label="Incident Scenario"
+    )
 
-    df = pd.DataFrame(similar_incidents)
-    st.dataframe(df, use_container_width=True)
+    scenario_description = gr.Markdown("Select a scenario to begin analysis.")
+    metrics_display = gr.JSON(label="Live Metrics")
+    impact_display = gr.Markdown("### Estimated Business Impact")
+    timeline_output = gr.Markdown("Timeline will render here")
+
+    oss_btn = gr.Button("Run OSS Analysis")
+    enterprise_btn = gr.Button("Execute Enterprise Healing", variant="primary")
+    approval_toggle = gr.Checkbox(label="Require Human Approval", value=True)
+
+    demo_btn = gr.Button("Run Demo")
+    approval_display = gr.HTML()
+    oss_results_display = gr.JSON(label="OSS Results")
+    enterprise_results_display = gr.JSON(label="Enterprise Results")
+
+    return (
+        scenario_dropdown,
+        scenario_description,
+        metrics_display,
+        impact_display,
+        timeline_output,
+        oss_btn,
+        enterprise_btn,
+        approval_toggle,
+        demo_btn,
+        approval_display,
+        oss_results_display,
+        enterprise_results_display,
+    )
 
 
-def create_learning_engine_panel(learning_stats: Dict[str, Any]):
-    if not _require_streamlit():
-        return
+# ============================================================
+# TAB 2 — ROI / BUSINESS IMPACT
+# ============================================================
 
-    st.markdown("### 🧠 ARF Learning Engine")
-    st.json(learning_stats)
+def create_tab2_business_roi(scenarios: Dict[str, Any]):
+    dashboard_output = gr.Plot(label="Executive ROI Dashboard")
 
+    roi_scenario_dropdown = gr.Dropdown(
+        choices=list(scenarios.keys()),
+        label="Scenario"
+    )
 
-def create_execution_mode_toggle(current_mode: str = "advisory") -> str:
-    if not _require_streamlit():
-        return current_mode
+    monthly_slider = gr.Slider(
+        1, 100, value=15, step=1, label="Monthly Incidents"
+    )
 
-    modes = ["advisory", "approval", "autonomous"]
-    return st.selectbox("Execution Mode", modes, index=modes.index(current_mode))
+    team_slider = gr.Slider(
+        1, 50, value=5, step=1, label="On-call Team Size"
+    )
+
+    calculate_btn = gr.Button("Calculate ROI", variant="primary")
+    roi_output = gr.JSON(label="ROI Breakdown")
+    roi_chart = gr.Plot(label="ROI Multiplier")
+
+    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():
+    license_display = gr.JSON(label="License Status")
+
+    validate_btn = gr.Button("Validate License")
+    trial_btn = gr.Button("Start Trial")
+    upgrade_btn = gr.Button("Upgrade")
+
+    mcp_mode = gr.Radio(
+        ["advisory", "approval", "autonomous"],
+        value="advisory",
+        label="MCP Execution Mode"
+    )
+
+    mcp_mode_info = gr.JSON(label="Mode Details")
+
+    features_table = gr.Dataframe(
+        headers=["Feature", "Available"],
+        value=[
+            ["Autonomous Healing", "Enterprise"],
+            ["Audit Trail", "Enterprise"],
+            ["Compliance", "Enterprise"],
+        ],
+        interactive=False
+    )
+
+    integrations_table = gr.Dataframe(
+        headers=["Integration", "Status"],
+        value=[
+            ["Kubernetes", "Ready"],
+            ["AWS", "Ready"],
+            ["GCP", "Ready"],
+        ],
+        interactive=False
+    )
+
+    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():
+    refresh_btn = gr.Button("Refresh")
+    clear_btn = gr.Button("Clear")
+    export_btn = gr.Button("Export")
+
+    execution_table = gr.Dataframe(
+        headers=["Time", "Scenario", "Mode", "Status", "Savings", "Details"],
+        interactive=False
+    )
+
+    incident_table = gr.Dataframe(
+        headers=["Time", "Component", "Scenario", "Severity", "Status"],
+        interactive=False
+    )
+
+    export_text = gr.Textbox(
+        label="Exported Audit JSON",
+        lines=15
+    )
+
+    return (
+        refresh_btn,
+        clear_btn,
+        export_btn,
+        execution_table,
+        incident_table,
+        export_text,
+    )
+
+
+# ============================================================
+# TAB 5 — LEARNING ENGINE
+# ============================================================
+
+def create_tab5_learning_engine():
+    learning_graph = gr.Plot(label="Learning Graph")
+
+    graph_type = gr.Dropdown(
+        ["patterns", "performance", "confidence"],
+        value="patterns",
+        label="Graph Type"
+    )
+
+    show_labels = gr.Checkbox(value=True, label="Show Labels")
+
+    search_query = gr.Textbox(label="Search Incidents")
+    search_btn = gr.Button("Search")
+    clear_btn_search = gr.Button("Clear")
+
+    search_results = gr.JSON(label="Search Results")
+    stats_display = gr.JSON(label="Learning Stats")
+    patterns_display = gr.JSON(label="Detected Patterns")
+    performance_display = gr.JSON(label="Performance Metrics")
+
+    return (
+        learning_graph,
+        graph_type,
+        show_labels,
+        search_query,
+        search_btn,
+        clear_btn_search,
+        search_results,
+        stats_display,
+        patterns_display,
+        performance_display,
+    )