Update app.py

app.py

@@ -1,6 +1,6 @@
 """
 🚀 ARF Ultimate Investor Demo v3.8.0 - ENTERPRISE EDITION
-COMPLETE FIXED VERSION - All components integrated
+UPDATED: Scenario-integrated ROI Calculator + MCP Mode explanations
 """
 
 import logging
@@ -28,45 +28,17 @@ logger = logging.getLogger(__name__)
 # Add parent directory to path
 sys.path.insert(0, str(Path(__file__).parent))
 
-# Import Plotly early to ensure availability
+# 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:
-    logger.warning("Plotly not available - visualizations will be simplified")
     PLOTLY_AVAILABLE = False
 
 # ===========================================
-# IMPORT MODULAR COMPONENTS
-# ===========================================
-try:
-    # Import scenarios from your modular file
-    from demo.scenarios import INCIDENT_SCENARIOS as SCENARIOS_DATA
-    
-    # Import orchestrator
-    from demo.orchestrator import DemoOrchestrator
-    
-    # Import UI components
-    from ui.components import (
-        create_header, create_status_bar, create_tab1_incident_demo,
-        create_tab2_business_roi, create_tab3_audit_trail,
-        create_tab4_enterprise_features, 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())
-    # Fallback to inline definitions
-    SCENARIOS_DATA = {}
-    DemoOrchestrator = None
-
-# ===========================================
-# ENHANCED SCENARIOS WITH OSS vs ENTERPRISE SEPARATION
+# ENHANCED SCENARIOS WITH ROI CALCULATION DATA
 # ===========================================
 ENHANCED_SCENARIOS = {
     "Cache Miss Storm": {
@@ -87,6 +59,16 @@ ENHANCED_SCENARIOS = {
             "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",
@@ -131,12 +113,6 @@ ENHANCED_SCENARIOS = {
                 "Users Impacted": "45,000 → 0",
                 "Revenue Protected": "$1,700",
                 "MTTR Improvement": "80% reduction"
-            },
-            "audit_info": {
-                "execution_id": "exec_001",
-                "timestamp": datetime.datetime.now().isoformat(),
-                "approval_required": False,
-                "success": True
             }
         }
     },
@@ -158,6 +134,15 @@ ENHANCED_SCENARIOS = {
             "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,
@@ -171,14 +156,7 @@ ENHANCED_SCENARIOS = {
             ],
             "estimated_time": "45+ minutes manually",
             "engineers_needed": "1 DBA + 1 Backend Engineer",
-            "advisory_only": True,
-            "healing_intent": {
-                "action": "scale_connection_pool",
-                "component": "postgresql_database",
-                "parameters": {"max_connections": 200},
-                "confidence": 0.82,
-                "requires_enterprise": True
-            }
+            "advisory_only": True
         },
         "enterprise_results": {
             "execution_mode": "Approval Required",
@@ -199,12 +177,6 @@ ENHANCED_SCENARIOS = {
                 "Cost Saved": "$3,150",
                 "Failed Transactions": "12,500 → 0",
                 "SLA Compliance": "Restored to 99.9%"
-            },
-            "audit_info": {
-                "execution_id": "exec_002",
-                "timestamp": datetime.datetime.now().isoformat(),
-                "approval_required": True,
-                "success": True
             }
         }
     },
@@ -226,6 +198,15 @@ ENHANCED_SCENARIOS = {
             "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,
@@ -239,14 +220,7 @@ ENHANCED_SCENARIOS = {
             ],
             "estimated_time": "90+ minutes manually",
             "engineers_needed": "2 Java Devs + 1 SRE",
-            "advisory_only": True,
-            "healing_intent": {
-                "action": "scale_memory",
-                "component": "java_payment_service",
-                "parameters": {"memory_limit_gb": 4},
-                "confidence": 0.79,
-                "requires_enterprise": True
-            }
+            "advisory_only": True
         },
         "enterprise_results": {
             "execution_mode": "Autonomous with Rollback",
@@ -267,12 +241,6 @@ ENHANCED_SCENARIOS = {
                 "Cost Saved": "$4,950",
                 "Transaction Success": "96.8% → 99.9%",
                 "User Impact": "8,500 → 0 affected"
-            },
-            "audit_info": {
-                "execution_id": "exec_003",
-                "timestamp": datetime.datetime.now().isoformat(),
-                "approval_required": False,
-                "success": True
             }
         }
     },
@@ -294,6 +262,15 @@ ENHANCED_SCENARIOS = {
             "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,
@@ -307,14 +284,7 @@ ENHANCED_SCENARIOS = {
             ],
             "estimated_time": "75+ minutes manually",
             "engineers_needed": "2 Backend Engineers + 1 DevOps",
-            "advisory_only": True,
-            "healing_intent": {
-                "action": "implement_rate_limiting",
-                "component": "external_api_gateway",
-                "parameters": {"backoff_strategy": "exponential"},
-                "confidence": 0.85,
-                "requires_enterprise": True
-            }
+            "advisory_only": True
         },
         "enterprise_results": {
             "execution_mode": "Autonomous",
@@ -335,468 +305,575 @@ ENHANCED_SCENARIOS = {
                 "Cost Saved": "$3,420",
                 "SLA Compliance": "Restored within 5 minutes",
                 "Data Freshness": "4+ hours → <5 minute delay"
-            },
-            "audit_info": {
-                "execution_id": "exec_004",
-                "timestamp": datetime.datetime.now().isoformat(),
-                "approval_required": False,
-                "success": True
             }
         }
     }
 }
 
 # ===========================================
-# SIMPLE VISUALIZATION ENGINE (No external dependencies)
+# MCP MODE EXPLANATIONS
 # ===========================================
-class SimpleVizEngine:
-    """Simple visualization engine that works without complex imports"""
+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"
+    }
+}
+
+# ===========================================
+# ROI CALCULATOR ENGINE
+# ===========================================
+class ROI_Calculator:
+    """Calculates ROI based on scenario data and user inputs"""
     
     @staticmethod
-    def create_timeline_plot(scenario_name="Incident"):
-        """Create a simple timeline plot"""
-        if not PLOTLY_AVAILABLE:
-            # Return a placeholder if plotly not available
-            import matplotlib.pyplot as plt
-            import io
-            import base64
-            
-            fig, ax = plt.subplots(figsize=(10, 4))
-            events = ['Detection', 'Analysis', 'Action', 'Recovery']
-            times = [0, 1, 2, 3]
-            
-            ax.plot(times, [1, 1, 1, 1], 'bo-', markersize=10)
-            for i, (event, t) in enumerate(zip(events, times)):
-                ax.text(t, 1.1, event, ha='center', fontsize=10)
-            
-            ax.set_ylim(0.5, 1.5)
-            ax.set_xlim(-0.5, 3.5)
-            ax.set_title(f'Timeline: {scenario_name}')
-            ax.axis('off')
-            
-            buf = io.BytesIO()
-            plt.savefig(buf, format='png', bbox_inches='tight')
-            plt.close(fig)
-            buf.seek(0)
-            
-            return f"data:image/png;base64,{base64.b64encode(buf.read()).decode()}"
+    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", {})
         
-        # Use Plotly if available
-        fig = go.Figure()
+        if not roi_data:
+            return {"error": "No ROI data for this scenario"}
         
-        events = [
-            {"time": "T-5m", "event": "Detection", "type": "detection"},
-            {"time": "T-3m", "event": "OSS Analysis", "type": "analysis"},
-            {"time": "T-2m", "event": "Enterprise Action", "type": "action"},
-            {"time": "T-0m", "event": "Recovery", "type": "recovery"}
-        ]
+        # 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)
         
-        for event in events:
-            fig.add_trace(go.Scatter(
-                x=[event["time"]],
-                y=[1],
-                mode='markers+text',
-                marker=dict(size=20, color='#4ECDC4'),
-                text=[event["event"]],
-                textposition="top center"
-            ))
+        # 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
         
-        fig.update_layout(
-            title=f"Timeline: {scenario_name}",
-            height=300,
-            showlegend=False,
-            yaxis=dict(showticklabels=False, range=[0.5, 1.5]),
-            margin=dict(l=20, r=20, t=40, b=20)
-        )
+        # Annual calculations
+        annual_manual_cost = monthly_manual_cost * 12
+        annual_enterprise_cost = monthly_enterprise_cost * 12
+        annual_savings = monthly_savings * 12
         
-        return fig
+        # 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"
+        }
     
     @staticmethod
-    def create_dashboard_plot():
-        """Create simple dashboard plot"""
+    def create_comparison_chart(scenario_name):
+        """Create ROI comparison chart"""
         if not PLOTLY_AVAILABLE:
             return None
         
-        fig = make_subplots(rows=1, cols=2, subplot_titles=('Cost Savings', 'MTTR Improvement'))
+        scenario = ENHANCED_SCENARIOS.get(scenario_name, {})
+        roi_data = scenario.get("roi_data", {})
         
-        # Cost savings
-        fig.add_trace(
-            go.Bar(x=['Without ARF', 'With ARF'], y=[100, 25], name='Cost'),
-            row=1, col=1
-        )
+        fig = go.Figure()
         
-        # MTTR improvement
-        fig.add_trace(
-            go.Bar(x=['Manual', 'ARF OSS', 'ARF Enterprise'], y=[120, 25, 8], name='MTTR'),
-            row=1, col=2
+        # 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
         )
         
-        fig.update_layout(height=400, showlegend=False)
         return fig
 
 # ===========================================
-# AUDIT TRAIL MANAGER
-# ===========================================
-class AuditTrailManager:
-    def __init__(self):
-        self.executions = []
-        self.incidents = []
-        
-    def add_execution(self, scenario_name, mode, success=True, savings=0):
-        entry = {
-            "id": f"exec_{len(self.executions):03d}",
-            "time": datetime.datetime.now().strftime("%H:%M"),
-            "scenario": scenario_name,
-            "mode": mode,
-            "status": "✅ Success" if success else "❌ Failed",
-            "savings": f"${savings:,}",
-            "details": f"{mode} execution"
-        }
-        self.executions.insert(0, entry)
-        return entry
-    
-    def add_incident(self, scenario_name, severity="HIGH"):
-        entry = {
-            "id": f"inc_{len(self.incidents):03d}",
-            "time": datetime.datetime.now().strftime("%H:%M"),
-            "scenario": scenario_name,
-            "severity": severity,
-            "component": ENHANCED_SCENARIOS.get(scenario_name, {}).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 - FIXED VERSION
+# CREATE DEMO INTERFACE WITH ENHANCEMENTS
 # ===========================================
 def create_demo_interface():
-    """Create the demo interface with all fixes applied"""
+    """Create demo with scenario-integrated ROI calculator and MCP explanations"""
     
     import gradio as gr
     
-    # Initialize components
-    viz_engine = SimpleVizEngine()
-    audit_manager = AuditTrailManager()
-    
-    # Initialize orchestrator if available
-    orchestrator = None
-    if DemoOrchestrator:
-        try:
-            orchestrator = DemoOrchestrator()
-        except:
-            pass
+    # Initialize
+    roi_calculator = ROI_Calculator()
     
-    # Custom CSS for OSS vs Enterprise separation
+    # Custom CSS for enhancements
     custom_css = """
-    .oss-section {
-        background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%) !important;
-        border-left: 4px solid #2196f3 !important;
-        padding: 15px !important;
-        border-radius: 8px !important;
+    .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;
     }
-    .enterprise-section {
+    .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;
-        border-left: 4px solid #4caf50 !important;
         padding: 15px !important;
         border-radius: 8px !important;
-        margin-bottom: 15px !important;
+        border-left: 4px solid #4caf50 !important;
+        margin: 10px 0 !important;
     }
-    .critical { color: #d32f2f !important; font-weight: bold; }
-    .success { color: #388e3c !important; font-weight: bold; }
     """
     
     with gr.Blocks(title="🚀 ARF Investor Demo v3.8.0", css=custom_css) as demo:
         
-        # Use your modular header
-        create_header("3.3.6", False)  # OSS version, Mock mode
+        # 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>
+        """)
         
-        # Status bar
-        create_status_bar()
+        # 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>
+        """)
         
         # Tabs
         with gr.Tabs():
             
-            # TAB 1: Live Incident Demo (Fixed)
+            # TAB 1: Live Incident Demo
             with gr.TabItem("🔥 Live Incident Demo"):
-                # Get components from your UI module
-                (scenario_dropdown, scenario_description, metrics_display, impact_display,
-                 timeline_output, oss_btn, enterprise_btn, approval_toggle, demo_btn,
-                 approval_display, config_display, results_display) = create_tab1_incident_demo(
-                    ENHANCED_SCENARIOS, "Cache Miss Storm"
-                )
-                
-                # Add OSS and Enterprise results displays
                 with gr.Row():
-                    with gr.Column():
-                        gr.Markdown("### 📋 OSS Analysis Results (Advisory Only)")
-                        oss_results = gr.JSON(
-                            value={},
-                            label=""
+                    # 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="")
                     
-                    with gr.Column():
-                        gr.Markdown("### 🎯 Enterprise Execution Results")
-                        enterprise_results = gr.JSON(
-                            value={},
-                            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="")
             
-            # TAB 2: Business Impact & ROI
+            # TAB 2: Business Impact & ROI (ENHANCED)
             with gr.TabItem("💰 Business Impact & ROI"):
-                (dashboard_output, monthly_slider, impact_slider, team_slider,
-                 calculate_btn, roi_output) = create_tab2_business_roi()
-            
-            # TAB 3: Audit Trail
-            with gr.TabItem("📜 Audit Trail & History"):
-                (refresh_btn, clear_btn, export_btn, execution_table, savings_chart,
-                 incident_table, memory_graph, export_text) = create_tab3_audit_trail()
+                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>
+                            """)
             
-            # Other tabs...
+            # TAB 4: Enterprise Features (ENHANCED WITH MCP EXPLANATIONS)
             with gr.TabItem("🏢 Enterprise Features"):
-                create_tab4_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
+                        )
             
-            with gr.TabItem("🧠 Learning Engine"):
-                create_tab5_learning_engine()
+            # 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=""
+                        )
         
         # Footer
-        create_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>
+        """)
         
-        # ============ EVENT HANDLERS (FIXED) ============
+        # ============ EVENT HANDLERS ============
         
-        # Update scenario (FIXED: Proper parameter handling)
+        # Update scenario (enhanced with ROI data)
         def update_scenario(scenario_name):
             scenario = ENHANCED_SCENARIOS.get(scenario_name, {})
             
-            # Get timeline plot
-            if PLOTLY_AVAILABLE:
-                timeline = viz_engine.create_timeline_plot(scenario_name)
-            else:
-                timeline = None
+            # 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)
+            }
             
             return (
-                f"### {scenario_name}\n{scenario.get('description', 'No description')}",
+                f"### {scenario_name}\n{scenario.get('description', '')}",
                 scenario.get("metrics", {}),
                 scenario.get("impact", {}),
-                timeline if timeline else gr.Plot(visible=False),
+                None,  # Placeholder for timeline
                 {},  # Clear OSS results
-                {}   # Clear Enterprise results
+                {},  # Clear Enterprise results
+                display_roi_data
             )
         
         scenario_dropdown.change(
             fn=update_scenario,
             inputs=[scenario_dropdown],
             outputs=[scenario_description, metrics_display, impact_display,
-                    timeline_output, oss_results, enterprise_results]
-        )
-        
-        # Run OSS Analysis (FIXED: Proper async handling)
-        async def run_oss_analysis(scenario_name):
-            scenario = ENHANCED_SCENARIOS.get(scenario_name, {})
-            
-            # Add to audit trail
-            audit_manager.add_incident(scenario_name, scenario.get("severity", "HIGH"))
-            
-            # Get OSS results
-            oss_result = scenario.get("oss_results", {})
-            
-            # Update tables
-            incident_table_data = audit_manager.get_incident_table()
-            
-            return oss_result, incident_table_data
-        
-        oss_btn.click(
-            fn=run_oss_analysis,
-            inputs=[scenario_dropdown],
-            outputs=[oss_results, incident_table]
-        )
-        
-        # Execute Enterprise Healing (FIXED: Proper parameter matching)
-        def execute_enterprise_healing(scenario_name, approval_required):
-            scenario = ENHANCED_SCENARIOS.get(scenario_name, {})
-            
-            # Get enterprise results
-            enterprise_result = scenario.get("enterprise_results", {})
-            
-            # Determine mode
-            mode = "Approval" if approval_required else "Autonomous"
-            
-            # Calculate savings from impact
-            impact = scenario.get("impact", {})
-            revenue_loss = impact.get("Revenue Loss", "$0")
-            try:
-                savings = int(revenue_loss.replace("$", "").replace(",", "").split("/")[0]) * 0.85
-            except:
-                savings = 5000
-            
-            # Add to audit trail
-            audit_manager.add_execution(
-                scenario_name,
-                mode,
-                savings=int(savings)
-            )
-            
-            # Create approval display
-            if approval_required:
-                approval_html = f"""
-                <div class='enterprise-section'>
-                    <h4>✅ Approved & Executed</h4>
-                    <p>Action for <strong>{scenario_name}</strong> was approved by system administrator and executed successfully.</p>
-                    <p><strong>Mode:</strong> Manual Approval</p>
-                    <p><strong>Cost Saved:</strong> ${int(savings):,}</p>
-                </div>
-                """
-            else:
-                approval_html = f"""
-                <div class='enterprise-section'>
-                    <h4>⚡ Auto-Executed</h4>
-                    <p>Action for <strong>{scenario_name}</strong> was executed autonomously by ARF Enterprise.</p>
-                    <p><strong>Mode:</strong> Fully Autonomous</p>
-                    <p><strong>Cost Saved:</strong> ${int(savings):,}</p>
-                </div>
-                """
-            
-            # Update execution table
-            execution_table_data = audit_manager.get_execution_table()
-            
-            return approval_html, enterprise_result, execution_table_data
-        
-        enterprise_btn.click(
-            fn=execute_enterprise_healing,
-            inputs=[scenario_dropdown, approval_toggle],
-            outputs=[approval_display, enterprise_results, execution_table]
+                    timeline_output, oss_results, enterprise_results, scenario_data_display]
         )
         
-        # Quick Demo (FIXED: Proper async)
-        async def run_quick_demo():
-            # Run OSS analysis
-            scenario = ENHANCED_SCENARIOS["Cache Miss Storm"]
-            oss_result = scenario.get("oss_results", {})
-            
-            # Execute enterprise
-            enterprise_result = scenario.get("enterprise_results", {})
-            
-            # Update audit trail
-            audit_manager.add_incident("Cache Miss Storm", "CRITICAL")
-            audit_manager.add_execution("Cache Miss Storm", "Autonomous", savings=7200)
-            
-            # Get table data
-            execution_table_data = audit_manager.get_execution_table()
-            incident_table_data = audit_manager.get_incident_table()
-            
-            # Create approval display
-            approval_html = """
-            <div class='enterprise-section'>
-                <h4>⚡ Quick Demo Completed</h4>
-                <p>Full OSS analysis → Enterprise execution completed successfully.</p>
-                <p><strong>Mode:</strong> Autonomous</p>
-                <p><strong>Cost Saved:</strong> $7,200</p>
-            </div>
-            """
-            
-            return (
-                oss_result,
-                approval_html,
-                enterprise_result,
-                execution_table_data,
-                incident_table_data,
-                gr.Checkbox.update(value=False)
-            )
-        
-        demo_btn.click(
-            fn=run_quick_demo,
-            outputs=[
-                oss_results,
-                approval_display,
-                enterprise_results,
-                execution_table,
-                incident_table,
-                approval_toggle
-            ]
+        # 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]
         )
         
-        # ROI Calculator (FIXED)
-        def calculate_roi(monthly, impact, team):
-            if orchestrator:
-                company_data = {
-                    "monthly_incidents": monthly,
-                    "avg_cost_per_incident": impact,
-                    "team_size": team
-                }
-                roi_result = orchestrator.calculate_roi(company_data)
-            else:
-                # Simple calculation
-                annual = monthly * 12 * impact
-                savings = annual * 0.82
-                team_cost = team * 150000
-                roi_multiplier = savings / team_cost if team_cost > 0 else 0
-                
-                roi_result = {
-                    "annual_impact": annual,
-                    "team_cost": team_cost,
-                    "potential_savings": savings,
-                    "roi_multiplier": roi_multiplier,
-                    "payback_months": (team_cost / (savings / 12)) if savings > 0 else 0
-                }
-            
-            # Format for display
-            formatted = {
-                "Annual Impact": f"${roi_result.get('annual_impact', 0):,.0f}",
-                "Team Cost": f"${roi_result.get('team_cost', 0):,.0f}",
-                "Potential Savings": f"${roi_result.get('potential_savings', 0):,.0f}",
-                "ROI Multiplier": f"{roi_result.get('roi_multiplier', 0):.1f}×",
-                "Payback Period": f"{roi_result.get('payback_months', 0):.1f} months"
-            }
+        # 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)
             
-            # Add dashboard
-            dashboard = viz_engine.create_dashboard_plot()
-            
-            return formatted, dashboard
+            return roi_result, roi_chart_plot
         
-        calculate_btn.click(
-            fn=calculate_roi,
-            inputs=[monthly_slider, impact_slider, team_slider],
-            outputs=[roi_output, dashboard_output]
+        calculate_roi_btn.click(
+            fn=calculate_scenario_roi,
+            inputs=[roi_scenario_dropdown, monthly_slider, team_slider],
+            outputs=[roi_output, roi_chart]
         )
         
-        # Audit Trail Refresh (FIXED)
-        def refresh_audit_trail():
-            return audit_manager.get_execution_table(), audit_manager.get_incident_table()
+        # Update MCP mode info
+        def update_mcp_mode(mode):
+            return MCP_MODE_DESCRIPTIONS.get(mode, {})
         
-        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 (FIXED)
-        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 with first scenario
+        # Initialize with first scenario ROI data
         demo.load(
-            fn=lambda: update_scenario("Cache Miss Storm"),
-            outputs=[scenario_description, metrics_display, impact_display,
-                    timeline_output, oss_results, enterprise_results]
+            fn=lambda: ENHANCED_SCENARIOS["Cache Miss Storm"].get("roi_data", {}),
+            outputs=[scenario_data_display]
         )
     
     return demo
@@ -808,11 +885,11 @@ def main():
     """Main entry point"""
     print("🚀 Starting ARF Ultimate Investor Demo v3.8.0...")
     print("=" * 70)
-    print("📊 Features:")
-    print("  • 4 Enhanced Incident Scenarios")
-    print("  • Clear OSS vs Enterprise Separation")
-    print("  • Fixed Visualization Engine")
-    print("  • Working Event Handlers")
+    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("=" * 70)
     print("🌐 Opening web interface...")