Update ui/components.py

ui/components.py

@@ -1,5 +1,5 @@
 """
-UI components for the 5-tab demo
+UI components for the 5-tab demo - FIXED VERSION
 """
 
 import gradio as gr
@@ -8,7 +8,7 @@ import plotly.graph_objects as go
 
 
 def create_header(oss_version: str, oss_available: bool) -> gr.Markdown:
-    """Create the demo header"""
+    """Create the demo header - FIXED VERSION"""
     status_badge = "✅ Connected" if oss_available else "⚠️ Mock Mode"
     
     return gr.Markdown(f"""
@@ -34,7 +34,6 @@ def create_header(oss_version: str, oss_available: bool) -> gr.Markdown:
         <div style="color: #718096; font-size: 16px; max-width: 800px; margin: 0 auto; line-height: 1.6;">
             From <span style="font-weight: 700; color: #4299e1;">OSS Advisory</span> 
             to <span style="font-weight: 700; color: #764ba2;">Enterprise Autonomous Healing</span>.
-            Experience the complete journey in 5 focused tabs.
         </div>
         
         <div style="margin-top: 15px; font-size: 0.9rem; color: #4ECDC4; font-weight: 600;">
@@ -45,7 +44,7 @@ def create_header(oss_version: str, oss_available: bool) -> gr.Markdown:
 
 
 def create_status_bar() -> gr.HTML:
-    """Create system status bar"""
+    """Create system status bar - FIXED VERSION"""
     return gr.HTML("""
     <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 25px;">
         <div style="background: white; padding: 20px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); border-left: 4px solid #4ECDC4;">
@@ -63,14 +62,14 @@ def create_status_bar() -> gr.HTML:
         
         <div style="background: white; padding: 20px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); border-left: 4px solid #42A5F5;">
             <div style="font-size: 0.9rem; color: #718096; margin-bottom: 5px;">Learning Engine</div>
-            <div style="font-weight: 700; color: #2d3748; font-size: 1.1rem;">5 patterns detected</div>
+            <div style="font-weight: 700; color: #2d3748; font-size: 1.1rem;">6 patterns detected</div>
         </div>
     </div>
     """)
 
 
 def create_tab1_incident_demo(scenarios: Dict, default_scenario: str = "Cache Miss Storm") -> Tuple:
-    """Create Tab 1: Live Incident Demo"""
+    """Create Tab 1: Live Incident Demo - FIXED WORKING VERSION"""
     with gr.Row():
         # Left Panel
         with gr.Column(scale=1):
@@ -96,7 +95,7 @@ def create_tab1_incident_demo(scenarios: Dict, default_scenario: str = "Cache Mi
             
             gr.Markdown("### 💰 Business Impact")
             impact_display = gr.JSON(
-                value=scenarios[default_scenario].get("impact", {}),
+                value=scenarios[default_scenario].get("business_impact", {}),
                 label="",
                 show_label=False
             )
@@ -104,7 +103,7 @@ def create_tab1_incident_demo(scenarios: Dict, default_scenario: str = "Cache Mi
         # Right Panel
         with gr.Column(scale=2):
             gr.Markdown("### 📈 Incident Timeline")
-            timeline_output = gr.Plot(label="")
+            timeline_output = gr.Plot(label="", show_label=False)
             
             gr.Markdown("### ⚡ Take Action")
             with gr.Row():
@@ -112,13 +111,13 @@ def create_tab1_incident_demo(scenarios: Dict, default_scenario: str = "Cache Mi
                     "🆓 Run OSS Analysis",
                     variant="secondary",
                     size="lg",
-                    min_width=150
+                    elem_id="oss_btn"
                 )
                 enterprise_btn = gr.Button(
                     "🚀 Execute Enterprise Healing",
                     variant="primary",
                     size="lg",
-                    min_width=150
+                    elem_id="enterprise_btn"
                 )
             
             with gr.Row():
@@ -139,204 +138,185 @@ def create_tab1_incident_demo(scenarios: Dict, default_scenario: str = "Cache Mi
                       "</div>"
             )
             
-            gr.Markdown("### ⚙️ Configuration")
-            config_display = gr.JSON(
-                value={"mode": "approval", "safety_guardrails": "active"},
-                label=""
-            )
-            
-            gr.Markdown("### 🎯 Results")
-            results_display = gr.JSON(
-                value={"status": "Ready to analyze incident..."},
-                label=""
-            )
+            with gr.Row():
+                with gr.Column():
+                    gr.Markdown("### 📋 OSS Results")
+                    oss_results_display = gr.JSON(label="", value={})
+                
+                with gr.Column():
+                    gr.Markdown("### 🎯 Enterprise Results")
+                    enterprise_results_display = gr.JSON(label="", value={})
     
     return (scenario_dropdown, scenario_description, metrics_display, impact_display,
             timeline_output, oss_btn, enterprise_btn, approval_toggle, demo_btn,
-            approval_display, config_display, results_display)
+            approval_display, oss_results_display, enterprise_results_display)
 
 
 def create_tab2_business_roi() -> Tuple:
-    """Create Tab 2: Business Impact & ROI"""
+    """Create Tab 2: Business Impact & ROI - FIXED VERSION"""
     with gr.Column():
         gr.Markdown("### 📊 Executive Dashboard")
-        dashboard_output = gr.Plot(label="")
+        dashboard_output = gr.Plot(label="", show_label=False)
         
         gr.Markdown("### 🧮 ROI Calculator")
         with gr.Row():
             with gr.Column(scale=1):
-                monthly_slider = gr.Slider(
-                    1, 100, value=15, step=1,
-                    label="Monthly incidents",
+                # Scenario selector
+                roi_scenario_dropdown = gr.Dropdown(
+                    choices=[],
+                    value="",
+                    label="Select scenario for ROI calculation:",
                     interactive=True
                 )
-                impact_slider = gr.Slider(
-                    1000, 50000, value=8500, step=500,
-                    label="Average cost per incident ($)",
+                
+                monthly_slider = gr.Slider(
+                    1, 100, value=15, step=1,
+                    label="Monthly similar incidents",
                     interactive=True
                 )
+                
                 team_slider = gr.Slider(
                     1, 20, value=5, step=1,
                     label="Reliability team size",
                     interactive=True
                 )
+                
                 calculate_btn = gr.Button(
-                    "Calculate My ROI",
+                    "Calculate ROI",
                     variant="primary",
                     size="lg"
                 )
             
             with gr.Column(scale=2):
                 roi_output = gr.JSON(
-                    value={},
-                    label="Your Analysis"
+                    label="ROI Analysis Results",
+                    value={}
                 )
-        
-        with gr.Row():
-            with gr.Column():
-                gr.Markdown("""
-                **📈 Industry Benchmarks**
-                - **5.2×** Average ROI (first year)
-                - **2-3 months** Payback period
-                - **81.7%** Auto-heal rate
-                - **85%** MTTR reduction
-                - **$6.2M** Average annual savings
-                """)
-            
-            with gr.Column():
-                gr.Markdown("""
-                **🎯 Business Outcomes**
-                - **325+ hours** Engineer time reclaimed
-                - **99.9%** SLA compliance maintained
-                - **+40%** Customer satisfaction
-                - **60%** Increased innovation capacity
-                - **Zero** Audit findings
-                """)
+                
+                roi_chart = gr.Plot(label="Cost Comparison", show_label=False)
     
-    return (dashboard_output, monthly_slider, impact_slider, team_slider, 
-            calculate_btn, roi_output)
+    return (dashboard_output, roi_scenario_dropdown, monthly_slider, team_slider,
+            calculate_btn, roi_output, roi_chart)
 
 
-def create_tab3_audit_trail() -> Tuple:
-    """Create Tab 3: Audit Trail & History"""
+def create_tab3_enterprise_features() -> Tuple:
+    """Create Tab 3: Enterprise Features"""
     with gr.Row():
         # Left Column
         with gr.Column(scale=1):
-            gr.Markdown("### 📋 Execution History")
+            gr.Markdown("### 🔐 License Management")
+            
+            license_display = gr.JSON(
+                value={
+                    "status": "Active",
+                    "tier": "Enterprise",
+                    "expires": "2024-12-31",
+                    "features": ["autonomous_healing", "compliance", "audit_trail"]
+                },
+                label="Current License"
+            )
             
             with gr.Row():
-                refresh_btn = gr.Button("🔄 Refresh", variant="secondary", size="sm")
-                clear_btn = gr.Button("🗑️ Clear", variant="stop", size="sm")
-                export_btn = gr.Button("📥 Export", variant="secondary", size="sm")
+                validate_btn = gr.Button("🔍 Validate", variant="secondary")
+                trial_btn = gr.Button("🆓 Start Trial", variant="primary")
+                upgrade_btn = gr.Button("🚀 Upgrade", variant="secondary")
             
-            execution_table = gr.Dataframe(
-                headers=["Time", "Scenario", "Actions", "Status", "Savings", "Details"],
-                value=[],
-                label="",
-                interactive=False
+            gr.Markdown("### ⚡ MCP Execution Modes")
+            
+            mcp_mode = gr.Radio(
+                choices=["advisory", "approval", "autonomous"],
+                value="advisory",
+                label="Execution Mode",
+                interactive=True,
+                info="advisory = OSS only, approval = human review, autonomous = AI-driven"
             )
             
-            gr.Markdown("### 📈 Cost Savings")
-            savings_chart = gr.Plot(label="")
+            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"
+            )
         
         # Right Column
         with gr.Column(scale=1):
-            gr.Markdown("### 📊 Incident History")
+            gr.Markdown("### 📋 Feature Comparison")
             
-            incident_table = gr.Dataframe(
-                headers=["Time", "Service", "Type", "Severity", "Description"],
-                value=[],
+            features_table = gr.Dataframe(
+                headers=["Feature", "OSS", "Enterprise"],
+                value=[
+                    ["Autonomous Healing", "❌", "✅"],
+                    ["Compliance Automation", "❌", "✅"],
+                    ["Predictive Analytics", "❌", "✅"],
+                    ["Multi-Cloud Support", "❌", "✅"],
+                    ["Audit Trail", "Basic", "Comprehensive"],
+                    ["Role-Based Access", "❌", "✅"],
+                ],
                 label="",
                 interactive=False
             )
             
-            gr.Markdown("### 🧠 Memory Graph")
-            memory_graph = gr.Plot(label="")
+            gr.Markdown("### 🔗 Integrations")
             
-            gr.Markdown("### 📤 Export")
-            export_text = gr.Textbox(
-                label="Audit Trail (JSON)",
-                lines=6,
+            integrations_table = gr.Dataframe(
+                headers=["Platform", "Status"],
+                value=[
+                    ["AWS", "✅ Connected"],
+                    ["Azure", "✅ Connected"],
+                    ["GCP", "✅ Connected"],
+                    ["Datadog", "✅ Connected"],
+                    ["PagerDuty", "✅ Connected"],
+                    ["ServiceNow", "✅ Connected"],
+                ],
+                label="",
                 interactive=False
             )
     
-    return (refresh_btn, clear_btn, export_btn, execution_table, savings_chart,
-            incident_table, memory_graph, export_text)
+    return (license_display, validate_btn, trial_btn, upgrade_btn,
+            mcp_mode, mcp_mode_info, features_table, integrations_table)
 
 
-def create_tab4_enterprise_features() -> Tuple:
-    """Create Tab 4: Enterprise Features"""
+def create_tab4_audit_trail() -> Tuple:
+    """Create Tab 4: Audit Trail & History"""
     with gr.Row():
         # Left Column
         with gr.Column(scale=1):
-            gr.Markdown("### 🔐 License Management")
-            
-            license_display = gr.JSON(
-                value={},
-                label="Current License"
-            )
+            gr.Markdown("### 📋 Execution History")
             
             with gr.Row():
-                validate_btn = gr.Button("🔍 Validate", variant="secondary")
-                trial_btn = gr.Button("🆓 Start Trial", variant="primary")
-                upgrade_btn = gr.Button("🚀 Upgrade", variant="secondary")
-            
-            gr.Markdown("### ⚡ Feature Comparison")
+                refresh_btn = gr.Button("🔄 Refresh", variant="secondary", size="sm")
+                clear_btn = gr.Button("🗑️ Clear", variant="stop", size="sm")
+                export_btn = gr.Button("📥 Export", variant="secondary", size="sm")
             
-            features_table = gr.Dataframe(
-                headers=["Feature", "OSS", "Starter", "Enterprise"],
-                value=[
-                    ["Autonomous Healing", "❌", "✅ Auto", "✅ AI-Driven"],
-                    ["Compliance Automation", "❌", "✅", "✅ SOC2/GDPR"],
-                    ["Predictive Analytics", "❌", "Basic", "✅ ML-Powered"],
-                    ["Multi-Cloud Support", "❌", "❌", "✅ Native"],
-                    ["Audit Trail", "Basic", "✅", "✅ Comprehensive"],
-                    ["Role-Based Access", "❌", "✅", "✅ Granular"],
-                ],
+            execution_table = gr.Dataframe(
+                headers=["Time", "Scenario", "Mode", "Status", "Savings", "Details"],
+                value=[],
                 label="",
                 interactive=False
             )
         
         # Right Column
         with gr.Column(scale=1):
-            gr.Markdown("### 📋 Compliance")
-            
-            compliance_display = gr.JSON(
-                value={
-                    "SOC2": "✅ Certified",
-                    "GDPR": "✅ Compliant",
-                    "ISO27001": "✅ Certified",
-                    "CCPA": "✅ Compliant"
-                },
-                label="Certifications"
-            )
-            
-            gr.Markdown("### 🔗 Integrations")
+            gr.Markdown("### 📊 Incident History")
             
-            integrations_table = gr.Dataframe(
-                headers=["Platform", "Status", "Last Sync"],
-                value=[
-                    ["AWS", "✅ Connected", "5 min ago"],
-                    ["Azure", "✅ Connected", "8 min ago"],
-                    ["GCP", "✅ Connected", "3 min ago"],
-                    ["Datadog", "✅ Connected", "Active"],
-                    ["PagerDuty", "✅ Connected", "Active"],
-                    ["ServiceNow", "✅ Connected", "15 min ago"],
-                ],
+            incident_table = gr.Dataframe(
+                headers=["Time", "Component", "Scenario", "Severity", "Status"],
+                value=[],
                 label="",
                 interactive=False
             )
             
-            gr.Markdown("### ⚙️ MCP Mode")
-            mcp_mode = gr.Radio(
-                choices=["advisory", "approval", "autonomous"],
-                value="approval",
-                label="Execution Mode",
-                interactive=True
+            gr.Markdown("### 📤 Export")
+            export_text = gr.Textbox(
+                label="Audit Trail (JSON)",
+                lines=6,
+                interactive=False
             )
     
-    return (license_display, validate_btn, trial_btn, upgrade_btn, features_table,
-            compliance_display, integrations_table, mcp_mode)
+    return (refresh_btn, clear_btn, export_btn, execution_table,
+            incident_table, export_text)
 
 
 def create_tab5_learning_engine() -> Tuple:
@@ -346,7 +326,7 @@ def create_tab5_learning_engine() -> Tuple:
         with gr.Column(scale=2):
             gr.Markdown("### 🧠 Incident Memory Graph")
             
-            learning_graph = gr.Plot(label="")
+            learning_graph = gr.Plot(label="", show_label=False)
             
             with gr.Row():
                 graph_type = gr.Radio(
@@ -414,42 +394,9 @@ def create_tab5_learning_engine() -> Tuple:
 
 
 def create_footer() -> gr.Markdown:
-    """Create the demo footer"""
+    """Create the demo footer - SIMPLIFIED VERSION"""
     return gr.Markdown("""
     <div style="margin-top: 40px; padding: 30px; background: linear-gradient(135deg, #1a365d 0%, #2d3748 100%); border-radius: 20px; color: white;">
-        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-bottom: 30px;">
-            <div>
-                <h4 style="color: white; margin-bottom: 15px;">🚀 User Journey</h4>
-                <ol style="color: #cbd5e0; padding-left: 20px;">
-                    <li style="margin-bottom: 8px;">Start with OSS Analysis</li>
-                    <li style="margin-bottom: 8px;">Calculate Your ROI</li>
-                    <li style="margin-bottom: 8px;">Execute Enterprise Healing</li>
-                    <li style="margin-bottom: 8px;">Explore Audit Trail</li>
-                    <li>Discover Learning Engine</li>
-                </ol>
-            </div>
-            
-            <div>
-                <h4 style="color: white; margin-bottom: 15px;">📞 Get Started</h4>
-                <ul style="color: #cbd5e0; list-style: none; padding: 0;">
-                    <li style="margin-bottom: 8px;">📧 sales@arfinvestor.com</li>
-                    <li style="margin-bottom: 8px;">📚 docs.arfinvestor.com</li>
-                    <li style="margin-bottom: 8px;">💬 Join Slack Community</li>
-                    <li>🆓 30-Day Enterprise Trial</li>
-                </ul>
-            </div>
-            
-            <div>
-                <h4 style="color: white; margin-bottom: 15px;">🛡️ Enterprise Grade</h4>
-                <ul style="color: #cbd5e0; list-style: none; padding: 0;">
-                    <li style="margin-bottom: 8px;">✅ SOC 2 Type II</li>
-                    <li style="margin-bottom: 8px;">✅ GDPR & CCPA</li>
-                    <li style="margin-bottom: 8px;">✅ ISO 27001</li>
-                    <li>✅ HIPAA Ready</li>
-                </ul>
-            </div>
-        </div>
-        
         <div style="border-top: 1px solid #4a5568; padding-top: 20px; text-align: center; color: #a0aec0; font-size: 0.9rem;">
             <p style="margin: 0;">© 2024 Agentic Reliability Framework. Demo v3.8.0 Enterprise Edition.</p>
             <p style="margin: 10px 0 0 0; font-size: 0.8rem;">This demonstration showcases capabilities. Actual results may vary.</p>