Update app.py

app.py

@@ -1,6 +1,6 @@
 """
 🚀 ARF Ultimate Investor Demo v3.8.0 - ENTERPRISE EDITION
-UPDATED: Scenario-integrated ROI Calculator + MCP Mode explanations
+MODULAR VERSION - Properly integrated with all components
 """
 
 import logging
@@ -28,852 +28,309 @@ logger = logging.getLogger(__name__)
 # Add parent directory to path
 sys.path.insert(0, str(Path(__file__).parent))
 
-# Import Plotly
-try:
-    import plotly.graph_objects as go
-    import plotly.express as px
-    from plotly.subplots import make_subplots
-    PLOTLY_AVAILABLE = True
-except ImportError:
-    PLOTLY_AVAILABLE = False
-
 # ===========================================
-# ENHANCED SCENARIOS WITH ROI CALCULATION DATA
+# IMPORT MODULAR COMPONENTS
 # ===========================================
-ENHANCED_SCENARIOS = {
-    "Cache Miss Storm": {
-        "description": "Redis cluster experiencing 80% cache miss rate causing database overload",
-        "severity": "CRITICAL",
-        "component": "redis_cache",
-        "metrics": {
-            "Cache Hit Rate": "18.5% (Critical)",
-            "Database Load": "92% (Overloaded)",
-            "Response Time": "1850ms (Slow)",
-            "Affected Users": "45,000",
-            "Eviction Rate": "125/sec"
-        },
-        "impact": {
-            "Revenue Loss": "$8,500/hour",
-            "Page Load Time": "+300%",
-            "Users Impacted": "45,000",
-            "SLA Violation": "Yes",
-            "Customer Sat": "-40%"
-        },
-        # ROI CALCULATION DATA (Extracted for calculator)
-        "roi_data": {
-            "hourly_revenue_loss": 8500,
-            "manual_recovery_hours": 1.0,  # 60 minutes
-            "enterprise_recovery_hours": 0.2,  # 12 minutes
-            "engineers_required": 4,  # 2-3 SREs + 1 DBA
-            "engineer_hourly_rate": 150,  # $150/hour
-            "estimated_monthly_occurrences": 2,  # Happens twice monthly on average
-            "enterprise_savings_percentage": 0.85  # 85% savings with Enterprise
-        },
-        # OSS RESULTS - ADVISORY ONLY
-        "oss_results": {
-            "status": "✅ OSS Analysis Complete",
-            "confidence": 0.87,
-            "similar_incidents": 3,
-            "rag_similarity_score": 0.72,
-            "recommendations": [
-                "Scale Redis cache memory from 4GB → 8GB",
-                "Implement cache warming strategy",
-                "Optimize key patterns with TTL adjustments",
-                "Add circuit breaker for database fallback"
-            ],
-            "estimated_time": "60+ minutes manually",
-            "engineers_needed": "2-3 SREs + 1 DBA",
-            "advisory_only": True,
-            "healing_intent": {
-                "action": "scale_out",
-                "component": "redis_cache",
-                "parameters": {"scale_factor": 2.0},
-                "confidence": 0.87,
-                "requires_enterprise": True
-            }
-        },
-        # ENTERPRISE RESULTS - ACTUAL EXECUTION
-        "enterprise_results": {
-            "execution_mode": "Autonomous",
-            "actions_executed": [
-                "✅ Auto-scaled Redis cluster: 4GB → 8GB",
-                "✅ Deployed intelligent cache warming service",
-                "✅ Optimized 12 key patterns with ML recommendations",
-                "✅ Implemented circuit breaker with 95% success rate"
-            ],
-            "metrics_improvement": {
-                "Cache Hit Rate": "18.5% → 72%",
-                "Response Time": "1850ms → 450ms",
-                "Database Load": "92% → 45%",
-                "Throughput": "1250 → 2450 req/sec"
-            },
-            "business_impact": {
-                "Recovery Time": "60 min → 12 min",
-                "Cost Saved": "$7,200",
-                "Users Impacted": "45,000 → 0",
-                "Revenue Protected": "$1,700",
-                "MTTR Improvement": "80% reduction"
-            }
-        }
-    },
+try:
+    # Import scenarios
+    from demo.scenarios import INCIDENT_SCENARIOS
     
-    "Database Connection Pool Exhaustion": {
-        "description": "PostgreSQL connection pool exhausted causing API timeouts",
-        "severity": "HIGH",
-        "component": "postgresql_database",
-        "metrics": {
-            "Active Connections": "98/100 (Critical)",
-            "API Latency": "2450ms",
-            "Error Rate": "15.2%",
-            "Queue Depth": "1250",
-            "Connection Wait": "45s"
-        },
-        "impact": {
-            "Revenue Loss": "$4,200/hour",
-            "Affected Services": "API Gateway, User Service, Payment",
-            "SLA Violation": "Yes",
-            "Partner Impact": "3 external APIs"
-        },
-        "roi_data": {
-            "hourly_revenue_loss": 4200,
-            "manual_recovery_hours": 0.75,  # 45 minutes
-            "enterprise_recovery_hours": 0.13,  # 8 minutes
-            "engineers_required": 2,  # 1 DBA + 1 Backend Engineer
-            "engineer_hourly_rate": 150,
-            "estimated_monthly_occurrences": 3,
-            "enterprise_savings_percentage": 0.82
-        },
-        "oss_results": {
-            "status": "✅ OSS Analysis Complete",
-            "confidence": 0.82,
-            "similar_incidents": 2,
-            "rag_similarity_score": 0.65,
-            "recommendations": [
-                "Increase connection pool size from 100 → 200",
-                "Implement connection pooling monitoring",
-                "Add query timeout enforcement",
-                "Deploy read replica for read-heavy queries"
-            ],
-            "estimated_time": "45+ minutes manually",
-            "engineers_needed": "1 DBA + 1 Backend Engineer",
-            "advisory_only": True
-        },
-        "enterprise_results": {
-            "execution_mode": "Approval Required",
-            "actions_executed": [
-                "✅ Increased connection pool: 100 → 200 connections",
-                "✅ Deployed real-time connection monitoring",
-                "✅ Implemented query timeout: 30s → 10s",
-                "✅ Automated read replica traffic routing"
-            ],
-            "metrics_improvement": {
-                "API Latency": "2450ms → 320ms",
-                "Error Rate": "15.2% → 0.8%",
-                "Connection Wait": "45s → 120ms",
-                "Throughput": "850 → 2100 req/sec"
-            },
-            "business_impact": {
-                "Recovery Time": "45 min → 8 min",
-                "Cost Saved": "$3,150",
-                "Failed Transactions": "12,500 → 0",
-                "SLA Compliance": "Restored to 99.9%"
-            }
-        }
-    },
+    # Import orchestrator
+    from demo.orchestrator import DemoOrchestrator
     
-    "Kubernetes Memory Leak": {
-        "description": "Java microservice memory leak causing pod restarts",
-        "severity": "HIGH",
-        "component": "java_payment_service",
-        "metrics": {
-            "Memory Usage": "96% (Critical)",
-            "GC Pause Time": "4500ms",
-            "Error Rate": "28.5%",
-            "Pod Restarts": "12/hour",
-            "Heap Fragmentation": "42%"
-        },
-        "impact": {
-            "Revenue Loss": "$5,500/hour",
-            "Session Loss": "8,500 users",
-            "Payment Failures": "3.2% of transactions",
-            "Support Tickets": "+300%"
-        },
-        "roi_data": {
-            "hourly_revenue_loss": 5500,
-            "manual_recovery_hours": 1.5,  # 90 minutes
-            "enterprise_recovery_hours": 0.25,  # 15 minutes
-            "engineers_required": 3,  # 2 Java Devs + 1 SRE
-            "engineer_hourly_rate": 150,
-            "estimated_monthly_occurrences": 1,
-            "enterprise_savings_percentage": 0.79
-        },
-        "oss_results": {
-            "status": "✅ OSS Analysis Complete",
-            "confidence": 0.79,
-            "similar_incidents": 4,
-            "rag_similarity_score": 0.68,
-            "recommendations": [
-                "Increase pod memory limits from 2GB → 4GB",
-                "Implement memory leak detection",
-                "Deploy canary with fixed version",
-                "Add circuit breaker for graceful degradation"
-            ],
-            "estimated_time": "90+ minutes manually",
-            "engineers_needed": "2 Java Devs + 1 SRE",
-            "advisory_only": True
-        },
-        "enterprise_results": {
-            "execution_mode": "Autonomous with Rollback",
-            "actions_executed": [
-                "✅ Scaled pod memory: 2GB → 4GB with monitoring",
-                "✅ Deployed memory leak detection service",
-                "✅ Rolled out canary with memory fixes",
-                "✅ Implemented auto-rollback on failure"
-            ],
-            "metrics_improvement": {
-                "Memory Usage": "96% → 68%",
-                "GC Pause Time": "4500ms → 320ms",
-                "Error Rate": "28.5% → 1.2%",
-                "Pod Stability": "12/hour → 0 restarts"
-            },
-            "business_impact": {
-                "Recovery Time": "90 min → 15 min",
-                "Cost Saved": "$4,950",
-                "Transaction Success": "96.8% → 99.9%",
-                "User Impact": "8,500 → 0 affected"
-            }
-        }
-    },
+    # Import ROI calculator
+    from core.calculators import ROI_Calculator
     
-    "API Rate Limit Storm": {
-        "description": "Third-party API rate limiting causing cascading failures",
-        "severity": "MEDIUM",
-        "component": "external_api_gateway",
-        "metrics": {
-            "Rate Limit Hits": "95% of requests",
-            "Error Rate": "42.8%",
-            "Retry Storm": "Active",
-            "Cascade Effect": "3 dependent services",
-            "Queue Backlog": "8,500 requests"
-        },
-        "impact": {
-            "Revenue Loss": "$3,800/hour",
-            "Partner SLA Breach": "Yes",
-            "Data Sync Delay": "4+ hours",
-            "Customer Reports": "Delayed by 6 hours"
-        },
-        "roi_data": {
-            "hourly_revenue_loss": 3800,
-            "manual_recovery_hours": 1.25,  # 75 minutes
-            "enterprise_recovery_hours": 0.17,  # 10 minutes
-            "engineers_required": 3,  # 2 Backend Engineers + 1 DevOps
-            "engineer_hourly_rate": 150,
-            "estimated_monthly_occurrences": 4,
-            "enterprise_savings_percentage": 0.85
-        },
-        "oss_results": {
-            "status": "✅ OSS Analysis Complete",
-            "confidence": 0.85,
-            "similar_incidents": 3,
-            "rag_similarity_score": 0.71,
-            "recommendations": [
-                "Implement exponential backoff with jitter",
-                "Deploy circuit breaker pattern",
-                "Add request queuing with prioritization",
-                "Implement adaptive rate limiting"
-            ],
-            "estimated_time": "75+ minutes manually",
-            "engineers_needed": "2 Backend Engineers + 1 DevOps",
-            "advisory_only": True
-        },
-        "enterprise_results": {
-            "execution_mode": "Autonomous",
-            "actions_executed": [
-                "✅ Implemented exponential backoff: 1s → 32s with jitter",
-                "✅ Deployed circuit breaker with 80% success threshold",
-                "✅ Added intelligent request queuing",
-                "✅ Enabled adaptive rate limiting based on API health"
-            ],
-            "metrics_improvement": {
-                "Rate Limit Hits": "95% → 12%",
-                "Error Rate": "42.8% → 3.5%",
-                "Successful Retries": "18% → 89%",
-                "Queue Processing": "8,500 → 0 backlog"
-            },
-            "business_impact": {
-                "Recovery Time": "75 min → 10 min",
-                "Cost Saved": "$3,420",
-                "SLA Compliance": "Restored within 5 minutes",
-                "Data Freshness": "4+ hours → <5 minute delay"
-            }
-        }
-    }
-}
-
-# ===========================================
-# MCP MODE EXPLANATIONS
-# ===========================================
-MCP_MODE_DESCRIPTIONS = {
-    "advisory": {
-        "name": "Advisory Mode",
-        "icon": "📋",
-        "description": "OSS Edition - Analysis only, no execution",
-        "purpose": "Analyzes incidents and provides recommendations. Perfect for teams starting with AI reliability.",
-        "features": [
-            "✅ Incident detection & analysis",
-            "✅ RAG similarity search",
-            "✅ HealingIntent creation",
-            "❌ No action execution",
-            "❌ Manual implementation required"
-        ],
-        "use_case": "Compliance-heavy environments, initial AI adoption phases"
-    },
-    "approval": {
-        "name": "Approval Mode",
-        "icon": "🔐",
-        "description": "Enterprise - Executes after human approval",
-        "purpose": "Balances automation with human oversight. Actions require explicit approval before execution.",
-        "features": [
-            "✅ All OSS advisory features",
-            "✅ Action execution capability",
-            "✅ Human-in-the-loop approval",
-            "✅ Audit trail & compliance",
-            "✅ Rollback capabilities"
-        ],
-        "use_case": "Regulated industries, critical production systems"
-    },
-    "autonomous": {
-        "name": "Autonomous Mode",
-        "icon": "⚡",
-        "description": "Enterprise - Fully autonomous execution",
-        "purpose": "Maximum efficiency with AI-driven autonomous healing. Self-corrects based on learned patterns.",
-        "features": [
-            "✅ All approval mode features",
-            "✅ Fully autonomous execution",
-            "✅ Machine learning optimization",
-            "✅ Predictive incident prevention",
-            "✅ Continuous learning loop"
-        ],
-        "use_case": "High-scale systems, mature reliability teams, 24/7 operations"
-    }
-}
+    # Import visualizations
+    from core.visualizations import EnhancedVisualizationEngine
+    
+    # Import UI components
+    from ui.components import (
+        create_header, create_status_bar, create_tab1_incident_demo,
+        create_tab2_business_roi, create_tab3_enterprise_features,
+        create_tab4_audit_trail, create_tab5_learning_engine,
+        create_footer
+    )
+    
+    logger.info("✅ Successfully imported all modular components")
+    
+except ImportError as e:
+    logger.error(f"Failed to import components: {e}")
+    logger.error(traceback.format_exc())
+    raise
 
 # ===========================================
-# ROI CALCULATOR ENGINE
+# AUDIT TRAIL MANAGER
 # ===========================================
-class ROI_Calculator:
-    """Calculates ROI based on scenario data and user inputs"""
+class AuditTrailManager:
+    """Simple audit trail manager"""
     
-    @staticmethod
-    def calculate_scenario_roi(scenario_name, monthly_incidents, team_size):
-        """Calculate ROI for a specific scenario"""
-        scenario = ENHANCED_SCENARIOS.get(scenario_name, {})
-        roi_data = scenario.get("roi_data", {})
-        
-        if not roi_data:
-            return {"error": "No ROI data for this scenario"}
-        
-        # Extract data
-        hourly_loss = roi_data.get("hourly_revenue_loss", 0)
-        manual_hours = roi_data.get("manual_recovery_hours", 1)
-        enterprise_hours = roi_data.get("enterprise_recovery_hours", 0.2)
-        monthly_occurrences = roi_data.get("estimated_monthly_occurrences", 2)
-        savings_pct = roi_data.get("enterprise_savings_percentage", 0.85)
-        
-        # Calculate costs
-        monthly_manual_cost = hourly_loss * manual_hours * monthly_occurrences
-        monthly_enterprise_cost = hourly_loss * enterprise_hours * monthly_occurrences
-        monthly_savings = monthly_manual_cost - monthly_enterprise_cost
-        
-        # Annual calculations
-        annual_manual_cost = monthly_manual_cost * 12
-        annual_enterprise_cost = monthly_enterprise_cost * 12
-        annual_savings = monthly_savings * 12
-        
-        # Team costs
-        engineer_hourly = roi_data.get("engineer_hourly_rate", 150)
-        engineers_needed = roi_data.get("engineers_required", 2)
-        team_hourly_cost = engineers_needed * engineer_hourly
-        manual_team_cost = team_hourly_cost * manual_hours * monthly_occurrences * 12
-        
-        # Enterprise subscription (simplified)
-        enterprise_monthly_cost = 499  # Base subscription
-        enterprise_usage_cost = monthly_enterprise_cost * 0.10  # $0.10 per incident
-        
-        # ROI calculation
-        total_enterprise_cost = (enterprise_monthly_cost * 12) + (enterprise_usage_cost * 12)
-        roi_multiplier = annual_savings / total_enterprise_cost if total_enterprise_cost > 0 else 0
-        payback_months = total_enterprise_cost / (annual_savings / 12) if annual_savings > 0 else 0
-        
-        return {
-            "scenario": scenario_name,
-            "monthly_manual_cost": f"${monthly_manual_cost:,.0f}",
-            "monthly_enterprise_cost": f"${monthly_enterprise_cost:,.0f}",
-            "monthly_savings": f"${monthly_savings:,.0f}",
-            "annual_manual_cost": f"${annual_manual_cost:,.0f}",
-            "annual_enterprise_cost": f"${annual_enterprise_cost:,.0f}",
-            "annual_savings": f"${annual_savings:,.0f}",
-            "enterprise_subscription": f"${enterprise_monthly_cost:,.0f}/month",
-            "roi_multiplier": f"{roi_multiplier:.1f}×",
-            "payback_months": f"{payback_months:.1f} months",
-            "manual_recovery_time": f"{manual_hours*60:.0f} minutes",
-            "enterprise_recovery_time": f"{enterprise_hours*60:.0f} minutes",
-            "recovery_improvement": f"{(1 - enterprise_hours/manual_hours)*100:.0f}% faster"
+    def __init__(self):
+        self.executions = []
+        self.incidents = []
+    
+    def add_execution(self, scenario, mode, success=True, savings=0):
+        entry = {
+            "time": datetime.datetime.now().strftime("%H:%M"),
+            "scenario": scenario,
+            "mode": mode,
+            "status": "✅ Success" if success else "❌ Failed",
+            "savings": f"${savings:,}",
+            "details": f"{mode} execution"
         }
+        self.executions.insert(0, entry)
+        return entry
     
-    @staticmethod
-    def create_comparison_chart(scenario_name):
-        """Create ROI comparison chart"""
-        if not PLOTLY_AVAILABLE:
-            return None
-        
-        scenario = ENHANCED_SCENARIOS.get(scenario_name, {})
-        roi_data = scenario.get("roi_data", {})
-        
-        fig = go.Figure()
-        
-        # Manual vs Enterprise cost comparison
-        manual_cost = roi_data.get("hourly_revenue_loss", 0) * roi_data.get("manual_recovery_hours", 1)
-        enterprise_cost = roi_data.get("hourly_revenue_loss", 0) * roi_data.get("enterprise_recovery_hours", 0.2)
-        
-        fig.add_trace(go.Bar(
-            x=['Manual Resolution', 'ARF Enterprise'],
-            y=[manual_cost, enterprise_cost],
-            name='Cost per Incident',
-            marker_color=['#FF6B6B', '#4ECDC4'],
-            text=[f'${manual_cost:,.0f}', f'${enterprise_cost:,.0f}'],
-            textposition='auto'
-        ))
-        
-        fig.update_layout(
-            title=f"Cost Comparison: {scenario_name}",
-            yaxis_title="Cost ($)",
-            showlegend=False,
-            height=300
-        )
-        
-        return fig
+    def add_incident(self, scenario, severity="HIGH"):
+        entry = {
+            "time": datetime.datetime.now().strftime("%H:%M"),
+            "scenario": scenario,
+            "severity": severity,
+            "component": INCIDENT_SCENARIOS.get(scenario, {}).get("component", "unknown"),
+            "status": "Analyzed"
+        }
+        self.incidents.insert(0, entry)
+        return entry
+    
+    def get_execution_table(self):
+        return [
+            [e["time"], e["scenario"], e["mode"], e["status"], e["savings"], e["details"]]
+            for e in self.executions[:10]
+        ]
+    
+    def get_incident_table(self):
+        return [
+            [e["time"], e["component"], e["scenario"], e["severity"], e["status"]]
+            for e in self.incidents[:15]
+        ]
 
 # ===========================================
-# CREATE DEMO INTERFACE WITH ENHANCEMENTS
+# CREATE DEMO INTERFACE - MODULAR VERSION
 # ===========================================
 def create_demo_interface():
-    """Create demo with scenario-integrated ROI calculator and MCP explanations"""
+    """Create demo interface using modular components"""
     
     import gradio as gr
     
-    # Initialize
+    # Initialize components
+    viz_engine = EnhancedVisualizationEngine()
     roi_calculator = ROI_Calculator()
+    audit_manager = AuditTrailManager()
+    orchestrator = DemoOrchestrator()
     
-    # Custom CSS for enhancements
-    custom_css = """
-    .mcp-mode-card {
-        background: white !important;
-        border-radius: 10px !important;
-        padding: 20px !important;
-        margin-bottom: 15px !important;
-        border-left: 4px solid #4ECDC4 !important;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
-    }
-    .mcp-advisory { border-left-color: #2196f3 !important; }
-    .mcp-approval { border-left-color: #ff9800 !important; }
-    .mcp-autonomous { border-left-color: #4caf50 !important; }
-    .roi-highlight {
-        background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%) !important;
-        padding: 15px !important;
-        border-radius: 8px !important;
-        border-left: 4px solid #4caf50 !important;
-        margin: 10px 0 !important;
-    }
-    """
-    
-    with gr.Blocks(title="🚀 ARF Investor Demo v3.8.0", css=custom_css) as demo:
+    with gr.Blocks(
+        title="🚀 ARF Investor Demo v3.8.0",
+        theme=gr.themes.Soft(primary_hue="blue")
+    ) as demo:
         
         # Header
-        gr.Markdown("""
-        <div style="text-align: center; padding: 30px 20px 20px 20px; background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%); border-radius: 0 0 20px 20px; margin-bottom: 30px; border-bottom: 3px solid #4ECDC4;">
-            <h1 style="margin-bottom: 10px;">🚀 Agentic Reliability Framework</h1>
-            <h2 style="color: #4a5568; font-weight: 600; margin-bottom: 20px;">Investor Demo v3.8.0</h2>
-            
-            <div style="display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-bottom: 20px;">
-                <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 8px 16px; border-radius: 20px; font-weight: 700; font-size: 0.85rem;">
-                    🏢 Enterprise Edition
-                </div>
-                <div style="background: linear-gradient(135deg, #4299e1 0%, #38b2ac 100%); color: white; padding: 8px 16px; border-radius: 20px; font-weight: 700; font-size: 0.85rem;">
-                    🆓 OSS v3.3.6
-                </div>
-                <div style="background: #e8f5e8; color: #2d3748; padding: 8px 16px; border-radius: 20px; font-weight: 600; font-size: 0.85rem;">
-                    📈 5.2× ROI
-                </div>
-                <div style="background: #fff3cd; color: #856404; padding: 8px 16px; border-radius: 20px; font-weight: 600; font-size: 0.85rem;">
-                    ⚡ 85% MTTR Reduction
-                </div>
-            </div>
-            
-            <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>.
-                <span style="color: #4ECDC4; font-weight: 600;"> New: Scenario-integrated ROI Calculator</span>
-            </div>
-            
-            <div style="margin-top: 15px; font-size: 0.9rem; color: #FFA726; font-weight: 600;">
-                ⚠️ Mock Mode (Enhanced ROI Calculator)
-            </div>
-        </div>
-        """)
+        create_header("3.3.6", False)  # OSS version, Mock mode
         
-        # Status Bar
-        gr.Markdown("""
-        <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;">
-                <div style="font-size: 0.9rem; color: #718096; margin-bottom: 5px;">System Status</div>
-                <div style="display: flex; align-items: center; gap: 8px;">
-                    <div style="width: 10px; height: 10px; background: #4ECDC4; border-radius: 50%;"></div>
-                    <div style="font-weight: 700; color: #2d3748;">Operational</div>
-                </div>
-            </div>
-            
-            <div style="background: white; padding: 20px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); border-left: 4px solid #FFA726;">
-                <div style="font-size: 0.9rem; color: #718096; margin-bottom: 5px;">Active Scenario</div>
-                <div style="font-weight: 700; color: #2d3748; font-size: 1.1rem;">Cache Miss Storm</div>
-            </div>
-            
-            <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;">MCP Mode</div>
-                <div style="font-weight: 700; color: #2d3748; font-size: 1.1rem;">Advisory (OSS)</div>
-            </div>
-        </div>
-        """)
+        # Status bar
+        create_status_bar()
         
-        # Tabs
+        # ============ 5 TABS ============
         with gr.Tabs():
             
             # TAB 1: Live Incident Demo
-            with gr.TabItem("🔥 Live Incident Demo"):
-                with gr.Row():
-                    # Left Panel
-                    with gr.Column(scale=1):
-                        gr.Markdown("### 🎬 Select Incident Scenario")
-                        
-                        scenario_dropdown = gr.Dropdown(
-                            choices=list(ENHANCED_SCENARIOS.keys()),
-                            value="Cache Miss Storm",
-                            label="Choose an incident to analyze:",
-                            interactive=True
-                        )
-                        
-                        scenario_description = gr.Markdown()
-                        
-                        gr.Markdown("### 📊 Current Metrics")
-                        metrics_display = gr.JSON(label="")
-                        
-                        gr.Markdown("### 💰 Business Impact")
-                        impact_display = gr.JSON(label="")
-                    
-                    # Right Panel
-                    with gr.Column(scale=2):
-                        gr.Markdown("### 📈 Incident Timeline")
-                        timeline_output = gr.Plot()
-                        
-                        gr.Markdown("### ⚡ Take Action")
-                        with gr.Row():
-                            oss_btn = gr.Button("🆓 Run OSS Analysis", variant="secondary", size="lg")
-                            enterprise_btn = gr.Button("🚀 Execute Enterprise Healing", variant="primary", size="lg")
-                        
-                        with gr.Row():
-                            approval_toggle = gr.Checkbox(label="🔐 Require Manual Approval", value=True)
-                            demo_btn = gr.Button("⚡ Quick Demo", variant="secondary", size="sm")
-                        
-                        approval_display = gr.HTML(
-                            value="<div style='padding: 15px; background: #f8f9fa; border-radius: 8px; color: #6c757d;'>Approval workflow will appear here after execution</div>"
-                        )
-                        
-                        gr.Markdown("### 📋 OSS Analysis Results (Advisory Only)")
-                        oss_results = gr.JSON(label="")
-                        
-                        gr.Markdown("### 🎯 Enterprise Execution Results")
-                        enterprise_results = gr.JSON(label="")
+            with gr.TabItem("🔥 Live Incident Demo", id="tab1"):
+                # Get components from UI module
+                (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) = create_tab1_incident_demo(
+                    INCIDENT_SCENARIOS, "Cache Miss Storm"
+                )
+            
+            # TAB 2: Business Impact & ROI
+            with gr.TabItem("💰 Business Impact & ROI", id="tab2"):
+                (dashboard_output, roi_scenario_dropdown, monthly_slider, team_slider,
+                 calculate_btn, roi_output, roi_chart) = create_tab2_business_roi()
             
-            # TAB 2: Business Impact & ROI (ENHANCED)
-            with gr.TabItem("💰 Business Impact & ROI"):
-                with gr.Column():
-                    gr.Markdown("### 📊 Executive Dashboard")
-                    dashboard_output = gr.Plot()
-                    
-                    gr.Markdown("### 🧮 ROI Calculator (Scenario-Integrated)")
-                    with gr.Row():
-                        with gr.Column(scale=1):
-                            # Scenario selector for ROI
-                            roi_scenario_dropdown = gr.Dropdown(
-                                choices=list(ENHANCED_SCENARIOS.keys()),
-                                value="Cache Miss Storm",
-                                label="Select scenario for ROI calculation:",
-                                interactive=True
-                            )
-                            
-                            gr.Markdown("#### 📈 Adjust Parameters")
-                            monthly_slider = gr.Slider(
-                                1, 100, value=15, step=1,
-                                label="Monthly similar incidents:",
-                                info="How often this type of incident occurs",
-                                interactive=True
-                            )
-                            
-                            team_slider = gr.Slider(
-                                1, 20, value=5, step=1,
-                                label="Reliability team size:",
-                                info="Engineers available for manual resolution",
-                                interactive=True
-                            )
-                            
-                            calculate_roi_btn = gr.Button(
-                                "Calculate Scenario ROI",
-                                variant="primary",
-                                size="lg"
-                            )
-                            
-                            # Show scenario data being used
-                            gr.Markdown("#### 📊 Using Scenario Data:")
-                            scenario_data_display = gr.JSON(
-                                label="Extracted from selected scenario",
-                                value={}
-                            )
-                        
-                        with gr.Column(scale=2):
-                            gr.Markdown("#### 📈 ROI Analysis Results")
-                            roi_output = gr.JSON(label="")
-                            
-                            gr.Markdown("#### 📊 Cost Comparison")
-                            roi_chart = gr.Plot(label="")
-                            
-                            # Highlight key metrics
-                            gr.Markdown("""
-                            <div class="roi-highlight">
-                                <h4 style="margin: 0 0 10px 0;">💰 Key Insight</h4>
-                                <p style="margin: 0;">The ROI calculator now extracts real numbers from your selected incident scenario, showing the actual business impact of ARF Enterprise vs manual resolution.</p>
-                            </div>
-                            """)
+            # TAB 3: Enterprise Features
+            with gr.TabItem("🏢 Enterprise Features", id="tab3"):
+                (license_display, validate_btn, trial_btn, upgrade_btn,
+                 mcp_mode, mcp_mode_info, features_table, integrations_table) = create_tab3_enterprise_features()
             
-            # TAB 4: Enterprise Features (ENHANCED WITH MCP EXPLANATIONS)
-            with gr.TabItem("🏢 Enterprise Features"):
-                with gr.Row():
-                    # Left Column
-                    with gr.Column(scale=1):
-                        gr.Markdown("### 🔐 License Management")
-                        
-                        license_display = gr.JSON(
-                            value={
-                                "status": "Active",
-                                "tier": "Enterprise",
-                                "expires": "2024-12-31",
-                                "mcp_mode": "advisory"
-                            },
-                            label="Current License"
-                        )
-                        
-                        gr.Markdown("### ⚡ MCP Execution Modes")
-                        
-                        # MCP Mode Cards with explanations
-                        for mode_key, mode_info in MCP_MODE_DESCRIPTIONS.items():
-                            with gr.Column():
-                                gr.Markdown(f"""
-                                <div class="mcp-mode-card mcp-{mode_key}">
-                                    <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;">
-                                        <div style="font-size: 1.5rem;">{mode_info['icon']}</div>
-                                        <div>
-                                            <h4 style="margin: 0;">{mode_info['name']}</h4>
-                                            <div style="font-size: 0.9rem; color: #718096;">{mode_info['description']}</div>
-                                        </div>
-                                    </div>
-                                    <div style="margin-bottom: 10px;">
-                                        <strong>Purpose:</strong> {mode_info['purpose']}
-                                    </div>
-                                    <div>
-                                        <strong>Best for:</strong> {mode_info['use_case']}
-                                    </div>
-                                </div>
-                                """)
-                        
-                        # MCP Mode Selector
-                        gr.Markdown("### ⚙️ Configure MCP Mode")
-                        mcp_mode = gr.Radio(
-                            choices=list(MCP_MODE_DESCRIPTIONS.keys()),
-                            value="advisory",
-                            label="Execution Mode",
-                            info="Select the execution mode for demonstration",
-                            interactive=True
-                        )
-                        
-                        mcp_mode_info = gr.JSON(
-                            label="Selected Mode Details",
-                            value=MCP_MODE_DESCRIPTIONS["advisory"]
-                        )
-                    
-                    # Right Column
-                    with gr.Column(scale=1):
-                        gr.Markdown("### 📋 Feature Comparison")
-                        
-                        features_table = gr.Dataframe(
-                            headers=["Feature", "OSS", "Starter", "Enterprise"],
-                            value=[
-                                ["Autonomous Healing", "❌", "✅ Auto", "✅ AI-Driven"],
-                                ["MCP Modes", "Advisory only", "Advisory + Approval", "All 3 modes"],
-                                ["Compliance Automation", "❌", "✅", "✅ SOC2/GDPR"],
-                                ["Predictive Analytics", "❌", "Basic", "✅ ML-Powered"],
-                                ["Multi-Cloud Support", "❌", "❌", "✅ Native"],
-                                ["Audit Trail", "Basic", "✅", "✅ Comprehensive"],
-                                ["Role-Based Access", "❌", "✅", "✅ Granular"],
-                            ],
-                            label="",
-                            interactive=False
-                        )
-                        
-                        gr.Markdown("### 🔗 Integrations")
-                        
-                        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"],
-                            ],
-                            label="",
-                            interactive=False
-                        )
+            # TAB 4: Audit Trail & History
+            with gr.TabItem("📜 Audit Trail & History", id="tab4"):
+                (refresh_btn, clear_btn, export_btn, execution_table,
+                 incident_table, export_text) = create_tab4_audit_trail()
             
-            # Other tabs...
-            with gr.TabItem("📜 Audit Trail & History"):
-                with gr.Row():
-                    with gr.Column():
-                        gr.Markdown("### 📋 Execution History")
-                        execution_table = gr.Dataframe(
-                            headers=["Time", "Scenario", "Mode", "Status", "Savings", "Details"],
-                            value=[],
-                            label=""
-                        )
-                    
-                    with gr.Column():
-                        gr.Markdown("### 📊 Incident History")
-                        incident_table = gr.Dataframe(
-                            headers=["Time", "Component", "Scenario", "Severity", "Status"],
-                            value=[],
-                            label=""
-                        )
+            # TAB 5: Learning Engine
+            with gr.TabItem("🧠 Learning Engine", id="tab5"):
+                (learning_graph, graph_type, show_labels, search_query, search_btn,
+                 clear_btn_search, search_results, stats_display, patterns_display,
+                 performance_display) = create_tab5_learning_engine()
         
         # Footer
-        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;">1. Select Incident Scenario</li>
-                        <li style="margin-bottom: 8px;">2. Calculate Scenario-specific ROI</li>
-                        <li style="margin-bottom: 8px;">3. Execute Enterprise Healing</li>
-                        <li style="margin-bottom: 8px;">4. Compare MCP Execution Modes</li>
-                        <li>5. Explore Audit Trail</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;">Enhanced with scenario-integrated ROI calculator and MCP mode explanations</p>
-            </div>
-        </div>
-        """)
+        create_footer()
         
         # ============ EVENT HANDLERS ============
         
-        # Update scenario (enhanced with ROI data)
-        def update_scenario(scenario_name):
-            scenario = ENHANCED_SCENARIOS.get(scenario_name, {})
+        # Update scenario dropdown in ROI tab
+        def update_roi_scenario_dropdown():
+            return gr.Dropdown.update(
+                choices=list(INCIDENT_SCENARIOS.keys()),
+                value="Cache Miss Storm"
+            )
+        
+        # Run OSS Analysis
+        async def run_oss_analysis(scenario_name):
+            scenario = INCIDENT_SCENARIOS.get(scenario_name, {})
+            
+            # Use orchestrator
+            analysis = await orchestrator.analyze_incident(scenario_name, scenario)
+            
+            # Add to audit trail
+            audit_manager.add_incident(scenario_name, scenario.get("severity", "HIGH"))
             
-            # Extract ROI data for display
-            roi_data = scenario.get("roi_data", {})
-            display_roi_data = {
-                "Hourly Revenue Loss": f"${roi_data.get('hourly_revenue_loss', 0):,.0f}",
-                "Manual Recovery Time": f"{roi_data.get('manual_recovery_hours', 1)*60:.0f} minutes",
-                "Enterprise Recovery Time": f"{roi_data.get('enterprise_recovery_hours', 0.2)*60:.0f} minutes",
-                "Monthly Occurrences": roi_data.get("estimated_monthly_occurrences", 2),
-                "Engineers Required": roi_data.get("engineers_required", 2)
+            # Update incident table
+            incident_table_data = audit_manager.get_incident_table()
+            
+            # Format OSS results
+            oss_results = {
+                "status": "✅ OSS Analysis Complete",
+                "scenario": scenario_name,
+                "confidence": 0.85,
+                "recommendations": [
+                    "Scale resources based on historical patterns",
+                    "Implement circuit breaker",
+                    "Add monitoring for key metrics"
+                ],
+                "healing_intent": {
+                    "action": "scale_out",
+                    "component": scenario.get("component", "unknown"),
+                    "requires_enterprise": True,
+                    "advisory_only": True
+                }
             }
             
-            return (
-                f"### {scenario_name}\n{scenario.get('description', '')}",
-                scenario.get("metrics", {}),
-                scenario.get("impact", {}),
-                None,  # Placeholder for timeline
-                {},  # Clear OSS results
-                {},  # Clear Enterprise results
-                display_roi_data
-            )
+            return oss_results, incident_table_data
         
-        scenario_dropdown.change(
-            fn=update_scenario,
+        oss_btn.click(
+            fn=run_oss_analysis,
             inputs=[scenario_dropdown],
-            outputs=[scenario_description, metrics_display, impact_display,
-                    timeline_output, oss_results, enterprise_results, scenario_data_display]
+            outputs=[oss_results_display, incident_table]
         )
         
-        # Update ROI scenario dropdown
-        roi_scenario_dropdown.change(
-            fn=lambda name: ENHANCED_SCENARIOS.get(name, {}).get("roi_data", {}),
-            inputs=[roi_scenario_dropdown],
-            outputs=[scenario_data_display]
+        # Execute Enterprise Healing
+        def execute_enterprise_healing(scenario_name, approval_required):
+            scenario = INCIDENT_SCENARIOS.get(scenario_name, {})
+            
+            # Determine mode
+            mode = "Approval" if approval_required else "Autonomous"
+            
+            # Calculate savings
+            impact = scenario.get("business_impact", {})
+            revenue_loss = impact.get("revenue_loss_per_hour", 5000)
+            savings = int(revenue_loss * 0.85)  # 85% savings
+            
+            # Add to audit trail
+            audit_manager.add_execution(scenario_name, mode, savings=savings)
+            
+            # Create approval display
+            if approval_required:
+                approval_html = f"""
+                <div style='padding: 20px; background: #e8f5e8; border-radius: 10px; border-left: 4px solid #28a745;'>
+                    <h4 style='margin: 0 0 10px 0; color: #1a365d;'>✅ Approved & Executed</h4>
+                    <p style='margin: 0; color: #2d3748;'>
+                        Action for <strong>{scenario_name}</strong> was approved and executed successfully.
+                    </p>
+                    <p style='margin: 10px 0 0 0; color: #2d3748;'>
+                        <strong>Mode:</strong> {mode}<br>
+                        <strong>Cost Saved:</strong> ${savings:,}
+                    </p>
+                </div>
+                """
+            else:
+                approval_html = f"""
+                <div style='padding: 20px; background: #e3f2fd; border-radius: 10px; border-left: 4px solid #2196f3;'>
+                    <h4 style='margin: 0 0 10px 0; color: #1a365d;'>⚡ Auto-Executed</h4>
+                    <p style='margin: 0; color: #2d3748;'>
+                        Action for <strong>{scenario_name}</strong> was executed autonomously.
+                    </p>
+                    <p style='margin: 10px 0 0 0; color: #2d3748;'>
+                        <strong>Mode:</strong> {mode}<br>
+                        <strong>Cost Saved:</strong> ${savings:,}
+                    </p>
+                </div>
+                """
+            
+            # Enterprise results
+            enterprise_results = {
+                "execution_mode": mode,
+                "scenario": scenario_name,
+                "actions_executed": [
+                    "✅ Scaled resources based on ML recommendations",
+                    "✅ Implemented circuit breaker pattern",
+                    "✅ Deployed enhanced monitoring"
+                ],
+                "business_impact": {
+                    "recovery_time": "60 min → 12 min",
+                    "cost_saved": f"${savings:,}",
+                    "users_impacted": "45,000 → 0"
+                }
+            }
+            
+            # Update execution table
+            execution_table_data = audit_manager.get_execution_table()
+            
+            return approval_html, enterprise_results, execution_table_data
+        
+        enterprise_btn.click(
+            fn=execute_enterprise_healing,
+            inputs=[scenario_dropdown, approval_toggle],
+            outputs=[approval_display, enterprise_results_display, execution_table]
         )
         
-        # Calculate ROI with scenario data
-        def calculate_scenario_roi(scenario_name, monthly_incidents, team_size):
-            """Calculate ROI using scenario-specific data"""
-            roi_result = roi_calculator.calculate_scenario_roi(scenario_name, monthly_incidents, team_size)
-            roi_chart_plot = roi_calculator.create_comparison_chart(scenario_name)
+        # Calculate ROI
+        def calculate_roi(scenario_name, monthly_incidents, team_size):
+            # Use ROI calculator
+            roi_result = roi_calculator.calculate_scenario_roi(
+                scenario_name, monthly_incidents, team_size
+            )
+            
+            # Create chart
+            chart = roi_calculator.create_comparison_chart(scenario_name)
             
-            return roi_result, roi_chart_plot
+            return roi_result, chart
         
-        calculate_roi_btn.click(
-            fn=calculate_scenario_roi,
+        calculate_btn.click(
+            fn=calculate_roi,
             inputs=[roi_scenario_dropdown, monthly_slider, team_slider],
             outputs=[roi_output, roi_chart]
         )
         
-        # Update MCP mode info
-        def update_mcp_mode(mode):
-            return MCP_MODE_DESCRIPTIONS.get(mode, {})
+        # Audit Trail Refresh
+        def refresh_audit_trail():
+            return audit_manager.get_execution_table(), audit_manager.get_incident_table()
+        
+        refresh_btn.click(
+            fn=refresh_audit_trail,
+            outputs=[execution_table, incident_table]
+        )
         
-        mcp_mode.change(
-            fn=update_mcp_mode,
-            inputs=[mcp_mode],
-            outputs=[mcp_mode_info]
+        # Clear History
+        def clear_audit_trail():
+            audit_manager.executions = []
+            audit_manager.incidents = []
+            return audit_manager.get_execution_table(), audit_manager.get_incident_table()
+        
+        clear_btn.click(
+            fn=clear_audit_trail,
+            outputs=[execution_table, incident_table]
+        )
+        
+        # Initialize ROI scenario dropdown
+        demo.load(
+            fn=update_roi_scenario_dropdown,
+            outputs=[roi_scenario_dropdown]
         )
         
-        # Initialize with first scenario ROI data
+        # Initialize dashboard
         demo.load(
-            fn=lambda: ENHANCED_SCENARIOS["Cache Miss Storm"].get("roi_data", {}),
-            outputs=[scenario_data_display]
+            fn=lambda: viz_engine.create_executive_dashboard(),
+            outputs=[dashboard_output]
         )
     
     return demo
@@ -885,13 +342,12 @@ def main():
     """Main entry point"""
     print("🚀 Starting ARF Ultimate Investor Demo v3.8.0...")
     print("=" * 70)
-    print("📊 New Features:")
-    print("  • Scenario-integrated ROI Calculator")
-    print("  • Extracts revenue loss from incident scenarios")
-    print("  • MCP Mode explanations with use cases")
-    print("  • 4 Enhanced incident scenarios")
+    print("📊 Features:")
+    print("  • 6 Incident Scenarios")
+    print("  • Modular Architecture")
+    print("  • Working Button Handlers")
+    print("  • 5 Functional Tabs")
     print("=" * 70)
-    print("🌐 Opening web interface...")
     
     demo = create_demo_interface()
     demo.launch(