Update ui/components.py

ui/components.py

@@ -2,6 +2,7 @@
 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
@@ -20,9 +21,29 @@ except ImportError:
     from demo.scenarios import INCIDENT_SCENARIOS
 
 # -----------------------------
-# Header & Status
+# Header & Status - UPDATED WITH INSTALLATION CHECK
 # -----------------------------
-def create_header(version="3.3.6", mock_mode=False) -> gr.HTML:
+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);">
@@ -31,16 +52,51 @@ def create_header(version="3.3.6", mock_mode=False) -> gr.HTML:
         <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:
-    return 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>
-        <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>
+        {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>
     """)
@@ -122,46 +178,43 @@ def create_tab1_incident_demo(scenarios=INCIDENT_SCENARIOS, default_scenario="Ca
         # 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="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: #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>
+                    <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.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>
+                        <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: 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 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 #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="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: #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>
+                    <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.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>
+                        <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: 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 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 #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="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: #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>
+                    <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.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>
+                        <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: 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 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>
             """)
@@ -422,14 +475,57 @@ def create_tab2_business_roi(scenarios=INCIDENT_SCENARIOS) -> tuple:
             calculate_btn, roi_output, roi_chart)
 
 # -----------------------------
-# Tab 3: Enterprise Features
+# 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={"status": "🆓 OSS Mode Active", "features": ["Advisory Analysis", "RAG Memory", "HealingIntent"]},
-        label="License Status"
+        value=license_data,
+        label="📦 Package Installation Status"
     )
-    validate_btn = gr.Button("🔍 Validate License", variant="secondary")
+    
+    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")
     
@@ -438,24 +534,19 @@ def create_tab3_enterprise_features() -> tuple:
         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"]
+            "features": ["Incident analysis", "RAG similarity", "HealingIntent creation"],
+            "package": "agentic-reliability-framework==3.3.7",
+            "license": "Apache 2.0"
         },
         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"],