Update app.py

app.py

@@ -1,7 +1,7 @@
 """
 🚀 ARF Ultimate Investor Demo v3.8.0 - ENTERPRISE EDITION
 MODULAR VERSION - Properly integrated with all components
-COMPLETE FIXED VERSION with enhanced architecture
+ULTIMATE FIXED VERSION with all critical issues resolved
 """
 
 import logging
@@ -31,10 +31,11 @@ logger = logging.getLogger(__name__)
 sys.path.insert(0, str(Path(__file__).parent))
 
 # ===========================================
-# ASYNC UTILITIES
+# ASYNC UTILITIES - ENHANCED VERSION
 # ===========================================
 class AsyncRunner:
-    """Simple async runner for sync context"""
+    """Enhanced async runner with better error handling"""
+    
     @staticmethod
     def run_async(coro):
         """Run async coroutine in sync context"""
@@ -43,20 +44,31 @@ class AsyncRunner:
         except RuntimeError:
             loop = asyncio.new_event_loop()
             asyncio.set_event_loop(loop)
-        return loop.run_until_complete(coro)
+        
+        try:
+            return loop.run_until_complete(coro)
+        except Exception as e:
+            logger.error(f"Async execution failed: {e}")
+            # Return error state instead of crashing
+            return {"error": str(e), "status": "failed"}
     
     @staticmethod
     def async_to_sync(async_func):
         """Decorator to convert async function to sync"""
         def wrapper(*args, **kwargs):
-            return AsyncRunner.run_async(async_func(*args, **kwargs))
+            try:
+                return AsyncRunner.run_async(async_func(*args, **kwargs))
+            except Exception as e:
+                logger.error(f"Async to sync conversion failed: {e}")
+                # Return a sensible fallback
+                return {"error": str(e), "status": "failed"}
         return wrapper
 
 # ===========================================
-# SIMPLE SETTINGS (No pydantic dependency)
+# SIMPLE SETTINGS
 # ===========================================
 class Settings:
-    """Simple settings class without external dependencies"""
+    """Simple settings class"""
     def __init__(self):
         self.arf_mode = "demo"
         self.use_mock_arf = True
@@ -67,47 +79,184 @@ class Settings:
 settings = Settings()
 
 # ===========================================
-# IMPORT MODULAR COMPONENTS - SAFE IMPORTS
+# FIXED DEMO ORCHESTRATOR (Inlined to avoid import issues)
+# ===========================================
+class FixedDemoOrchestrator:
+    """
+    Fixed orchestrator with proper analyze_incident method
+    This replaces the broken DemoOrchestrator from demo/orchestrator.py
+    """
+    
+    def __init__(self):
+        logger.info("FixedDemoOrchestrator initialized")
+        # Lazy load mock functions
+        self._mock_functions_loaded = False
+        self._simulate_arf_analysis = None
+        self._run_rag_similarity_search = None
+        self._create_mock_healing_intent = None
+        self._calculate_pattern_confidence = None
+    
+    def _load_mock_functions(self):
+        """Lazy load mock ARF functions"""
+        if not self._mock_functions_loaded:
+            try:
+                # Try to import mock ARF functions
+                from demo.mock_arf import (
+                    simulate_arf_analysis,
+                    run_rag_similarity_search,
+                    create_mock_healing_intent,
+                    calculate_pattern_confidence
+                )
+                self._simulate_arf_analysis = simulate_arf_analysis
+                self._run_rag_similarity_search = run_rag_similarity_search
+                self._create_mock_healing_intent = create_mock_healing_intent
+                self._calculate_pattern_confidence = calculate_pattern_confidence
+                self._mock_functions_loaded = True
+                logger.info("Mock ARF functions loaded successfully")
+            except ImportError as e:
+                logger.error(f"Failed to load mock ARF functions: {e}")
+                # Create fallback functions
+                self._create_fallback_functions()
+    
+    def _create_fallback_functions(self):
+        """Create fallback mock functions"""
+        import random
+        import time as ttime
+        
+        def simulate_arf_analysis(scenario):
+            return {
+                "analysis_complete": True,
+                "anomaly_detected": True,
+                "severity": "HIGH",
+                "confidence": 0.987,
+                "detection_time_ms": 45
+            }
+        
+        def run_rag_similarity_search(scenario):
+            return [
+                {
+                    "incident_id": f"inc_{int(ttime.time())}_1",
+                    "similarity_score": 0.92,
+                    "success": True,
+                    "resolution": "scale_out",
+                    "cost_savings": 6500
+                }
+            ]
+        
+        def calculate_pattern_confidence(scenario, similar_incidents):
+            return 0.94
+        
+        def create_mock_healing_intent(scenario, similar_incidents, confidence):
+            return {
+                "action": "scale_out",
+                "component": scenario.get("component", "unknown"),
+                "confidence": confidence,
+                "parameters": {"nodes": "3→5"},
+                "safety_checks": {"blast_radius": "2 services"}
+            }
+        
+        self._simulate_arf_analysis = simulate_arf_analysis
+        self._run_rag_similarity_search = run_rag_similarity_search
+        self._calculate_pattern_confidence = calculate_pattern_confidence
+        self._create_mock_healing_intent = create_mock_healing_intent
+        self._mock_functions_loaded = True
+        logger.info("Fallback mock functions created")
+    
+    async def analyze_incident(self, scenario_name: str, scenario_data: Dict[str, Any]) -> Dict[str, Any]:
+        """
+        Analyze an incident using the ARF agent workflow.
+        This is the method that was missing in the original DemoOrchestrator
+        """
+        logger.info(f"FixedDemoOrchestrator analyzing incident: {scenario_name}")
+        
+        # Load mock functions if not loaded
+        self._load_mock_functions()
+        
+        try:
+            # Step 1: Detection Agent
+            logger.debug("Running detection agent...")
+            detection_result = self._simulate_arf_analysis(scenario_data)
+            
+            # Step 2: Recall Agent  
+            logger.debug("Running recall agent...")
+            similar_incidents = self._run_rag_similarity_search(scenario_data)
+            
+            # Step 3: Decision Agent
+            logger.debug("Running decision agent...")
+            confidence = self._calculate_pattern_confidence(scenario_data, similar_incidents)
+            healing_intent = self._create_mock_healing_intent(scenario_data, similar_incidents, confidence)
+            
+            # Simulate processing time
+            await asyncio.sleep(0.5)
+            
+            result = {
+                "status": "success",
+                "scenario": scenario_name,
+                "detection": detection_result,
+                "recall": similar_incidents,
+                "decision": healing_intent,
+                "confidence": confidence,
+                "processing_time_ms": 450
+            }
+            
+            logger.info(f"Analysis complete for {scenario_name}")
+            return result
+            
+        except Exception as e:
+            logger.error(f"Error analyzing incident: {e}", exc_info=True)
+            return {
+                "status": "error",
+                "message": str(e),
+                "scenario": scenario_name
+            }
+
+# ===========================================
+# IMPORT MODULAR COMPONENTS - FIXED VERSION
 # ===========================================
-def import_components():
+def import_components() -> Dict[str, Any]:
     """Safely import all components with proper error handling"""
+    components = {
+        "all_available": False,
+        "error": None
+    }
+    
     try:
-        # Import scenarios - try demo module first
+        # First, import gradio (always available in Hugging Face Spaces)
+        import gradio as gr
+        components["gr"] = gr
+        
+        # Import scenarios
         try:
             from demo.scenarios import INCIDENT_SCENARIOS
             logger.info(f"Loaded {len(INCIDENT_SCENARIOS)} scenarios from demo module")
+            components["INCIDENT_SCENARIOS"] = INCIDENT_SCENARIOS
         except ImportError as e:
             logger.warning(f"Demo scenarios not available: {e}")
             # Create minimal fallback
-            INCIDENT_SCENARIOS = {
+            components["INCIDENT_SCENARIOS"] = {
                 "Cache Miss Storm": {
                     "component": "Redis Cache Cluster",
                     "severity": "HIGH",
                     "impact_radius": "85% of users",
                     "business_impact": {"revenue_loss_per_hour": 8500},
                     "detection_time": "45 seconds",
-                    "tags": ["cache", "redis", "latency"]
+                    "tags": ["cache", "redis", "latency"],
+                    "metrics": {"affected_users": 45000}
                 }
             }
         
-        # Import orchestrator
-        try:
-            from demo.orchestrator import DemoOrchestrator
-        except ImportError:
-            # Create mock orchestrator
-            class DemoOrchestrator:
-                async def analyze_incident(self, name, scenario):
-                    return {"status": "Mock analysis", "scenario": name}
-        
-        # Import ROI calculator - with fallback
+        # Use our fixed orchestrator instead of the broken one
+        components["DemoOrchestrator"] = FixedDemoOrchestrator
+        logger.info("Using FixedDemoOrchestrator")
+        
+        # Import ROI calculator
         try:
             from core.calculators import EnhancedROICalculator
-            roi_calculator_available = True
+            components["EnhancedROICalculator"] = EnhancedROICalculator()
             logger.info("EnhancedROICalculator imported successfully")
         except ImportError as e:
             logger.warning(f"EnhancedROICalculator not available: {e}")
-            # Create mock calculator
-            class EnhancedROICalculator:
+            class MockCalculator:
                 def calculate_comprehensive_roi(self, **kwargs):
                     return {
                         "status": "✅ Calculated Successfully",
@@ -120,23 +269,49 @@ def import_components():
                             "annual_roi_percentage": "420%"
                         }
                     }
-            roi_calculator_available = True
+            components["EnhancedROICalculator"] = MockCalculator()
         
-        # Import visualizations - with fallback
+        # Import visualizations
         try:
             from core.visualizations import EnhancedVisualizationEngine
-            viz_engine_available = True
+            components["EnhancedVisualizationEngine"] = EnhancedVisualizationEngine()
             logger.info("EnhancedVisualizationEngine imported successfully")
         except ImportError as e:
             logger.warning(f"EnhancedVisualizationEngine not available: {e}")
-            # Create mock visualization engine
-            class EnhancedVisualizationEngine:
+            class MockVisualizationEngine:
                 def create_executive_dashboard(self, data=None):
                     import plotly.graph_objects as go
                     fig = go.Figure()
-                    fig.update_layout(height=400)
+                    fig.update_layout(height=400, title="Executive Dashboard")
                     return fig
-            viz_engine_available = True
+                
+                def create_telemetry_plot(self, scenario_name, anomaly_detected=True):
+                    import plotly.graph_objects as go
+                    import numpy as np
+                    fig = go.Figure()
+                    fig.add_trace(go.Scatter(x=[0, 1, 2], y=[0, 1, 0]))
+                    fig.update_layout(height=300, title=f"Telemetry: {scenario_name}")
+                    return fig
+                
+                def create_impact_gauge(self, scenario_name):
+                    import plotly.graph_objects as go
+                    fig = go.Figure(go.Indicator(
+                        mode="gauge+number",
+                        value=8500,
+                        title={'text': "💰 Hourly Revenue Risk"},
+                        gauge={'axis': {'range': [0, 15000]}}
+                    ))
+                    fig.update_layout(height=300)
+                    return fig
+                
+                def create_timeline_comparison(self):
+                    import plotly.graph_objects as go
+                    fig = go.Figure()
+                    fig.add_trace(go.Bar(name='Manual', x=['Detection', 'Resolution'], y=[300, 2700]))
+                    fig.add_trace(go.Bar(name='ARF', x=['Detection', 'Resolution'], y=[45, 720]))
+                    fig.update_layout(height=400, title="Timeline Comparison")
+                    return fig
+            components["EnhancedVisualizationEngine"] = MockVisualizationEngine()
         
         # Import UI components
         try:
@@ -146,141 +321,66 @@ def import_components():
                 create_tab4_audit_trail, create_tab5_learning_engine,
                 create_footer
             )
-            ui_available = True
+            components.update({
+                "create_header": create_header,
+                "create_status_bar": create_status_bar,
+                "create_tab1_incident_demo": create_tab1_incident_demo,
+                "create_tab2_business_roi": create_tab2_business_roi,
+                "create_tab3_enterprise_features": create_tab3_enterprise_features,
+                "create_tab4_audit_trail": create_tab4_audit_trail,
+                "create_tab5_learning_engine": create_tab5_learning_engine,
+                "create_footer": create_footer,
+            })
             logger.info("UI components imported successfully")
         except ImportError as e:
             logger.error(f"UI components not available: {e}")
-            ui_available = False
             # Create minimal UI fallbacks
-            def create_header(version="3.3.6", mock_mode=False):
-                import gradio as gr
-                return gr.HTML(f"<h2>🚀 ARF v{version}</h2>")
-            
-            def create_status_bar():
-                import gradio as gr
-                return gr.HTML("<div>Status</div>")
-            
-            def create_tab1_incident_demo(*args, **kwargs):
-                import gradio as gr
-                return [gr.Dropdown()] * 24
-            
-            def create_tab2_business_roi(*args, **kwargs):
-                import gradio as gr
-                return [gr.Plot()] * 7
-            
-            def create_tab3_enterprise_features():
-                import gradio as gr
-                return [gr.JSON()] * 8
-            
-            def create_tab4_audit_trail():
-                import gradio as gr
-                return [gr.Button()] * 6
-            
-            def create_tab5_learning_engine():
-                import gradio as gr
-                return [gr.Plot()] * 10
-            
-            def create_footer():
-                import gradio as gr
-                return gr.HTML("<footer>ARF</footer>")
+            components.update({
+                "create_header": lambda version="3.3.6", mock=False: gr.HTML(f"<h2>🚀 ARF v{version}</h2>"),
+                "create_status_bar": lambda: gr.HTML("<div>Status</div>"),
+                "create_tab1_incident_demo": lambda *args: [gr.Dropdown()] * 24,
+                "create_tab2_business_roi": lambda *args: [gr.Plot()] * 7,
+                "create_tab3_enterprise_features": lambda: [gr.JSON()] * 8,
+                "create_tab4_audit_trail": lambda: [gr.Button()] * 6,
+                "create_tab5_learning_engine": lambda: [gr.Plot()] * 10,
+                "create_footer": lambda: gr.HTML("<footer>ARF</footer>"),
+            })
         
-        # Import styles - with fallback
+        # Import styles
         try:
             from ui.styles import get_styles
-            styles_available = True
+            components["get_styles"] = get_styles
         except ImportError as e:
             logger.warning(f"Styles not available: {e}")
-            get_styles = lambda: ""
-            styles_available = False
+            components["get_styles"] = lambda: ""
         
+        components["all_available"] = True
+        components["error"] = None
         logger.info("✅ Successfully imported all modular components")
         
-        return {
-            "INCIDENT_SCENARIOS": INCIDENT_SCENARIOS,
-            "DemoOrchestrator": DemoOrchestrator,
-            "EnhancedROICalculator": EnhancedROICalculator() if roi_calculator_available else None,
-            "EnhancedVisualizationEngine": EnhancedVisualizationEngine() if viz_engine_available else None,
-            "create_header": create_header,
-            "create_status_bar": create_status_bar,
-            "create_tab1_incident_demo": create_tab1_incident_demo,
-            "create_tab2_business_roi": create_tab2_business_roi,
-            "create_tab3_enterprise_features": create_tab3_enterprise_features,
-            "create_tab4_audit_trail": create_tab4_audit_trail,
-            "create_tab5_learning_engine": create_tab5_learning_engine,
-            "create_footer": create_footer,
-            "get_styles": get_styles if styles_available else lambda: "",
-            "all_available": True
-        }
-        
     except Exception as e:
         logger.error(f"❌ CRITICAL IMPORT ERROR: {e}")
         logger.error(traceback.format_exc())
-        
-        # Return minimal components for fallback
-        import gradio as gr
-        
-        # Create minimal mock components
-        class MockCalculator:
-            def calculate_comprehensive_roi(self, **kwargs):
-                return {
-                    "status": "Mock calculation",
-                    "summary": {"roi_multiplier": "5.2×"},
-                    "scenarios": {
-                        "base_case": {"roi": "5.2×"},
-                        "best_case": {"roi": "6.5×"},
-                        "worst_case": {"roi": "4.0×"}
-                    }
-                }
-        
-        class MockVisualizationEngine:
-            def create_executive_dashboard(self, data=None):
-                import plotly.graph_objects as go
-                fig = go.Figure()
-                fig.update_layout(height=400)
-                return fig
-        
-        class MockOrchestrator:
-            async def analyze_incident(self, name, scenario):
-                return {"status": "mock", "scenario": name}
-        
-        return {
-            "all_available": False, 
-            "error": str(e),
-            "INCIDENT_SCENARIOS": {"Cache Miss Storm": {}},
-            "DemoOrchestrator": MockOrchestrator(),
-            "EnhancedROICalculator": MockCalculator(),
-            "EnhancedVisualizationEngine": MockVisualizationEngine(),
-            "create_header": lambda version, mock: gr.HTML(f"<h2>🚀 ARF v{version}</h2>"),
-            "create_status_bar": lambda: gr.HTML("<div>Status</div>"),
-            "create_tab1_incident_demo": lambda *args: [gr.Dropdown()] * 24,
-            "create_tab2_business_roi": lambda *args: [gr.Plot()] * 7,
-            "create_tab3_enterprise_features": lambda: [gr.JSON()] * 8,
-            "create_tab4_audit_trail": lambda: [gr.Button()] * 6,
-            "create_tab5_learning_engine": lambda: [gr.Plot()] * 10,
-            "create_footer": lambda: gr.HTML("<footer>ARF</footer>"),
-            "get_styles": lambda: ""
-        }
+        components["error"] = str(e)
+        components["all_available"] = False
+    
+    return components
 
-# Import components safely
-components = import_components()
+# ===========================================
+# GLOBAL COMPONENTS - LAZY LOADED
+# ===========================================
+_components = None
+_audit_manager = None
 
-# Extract components
-INCIDENT_SCENARIOS = components["INCIDENT_SCENARIOS"]
-DemoOrchestrator = components["DemoOrchestrator"]
-EnhancedROICalculator = components["EnhancedROICalculator"]
-EnhancedVisualizationEngine = components["EnhancedVisualizationEngine"]
-create_header = components["create_header"]
-create_status_bar = components["create_status_bar"]
-create_tab1_incident_demo = components["create_tab1_incident_demo"]
-create_tab2_business_roi = components["create_tab2_business_roi"]
-create_tab3_enterprise_features = components["create_tab3_enterprise_features"]
-create_tab4_audit_trail = components["create_tab4_audit_trail"]
-create_tab5_learning_engine = components["create_tab5_learning_engine"]
-create_footer = components["create_footer"]
-get_styles = components["get_styles"]
+def get_components() -> Dict[str, Any]:
+    """Lazy load components singleton"""
+    global _components
+    if _components is None:
+        _components = import_components()
+    return _components
 
 # ===========================================
-# AUDIT TRAIL MANAGER - ENHANCED
+# AUDIT TRAIL MANAGER - FIXED VERSION
 # ===========================================
 class AuditTrailManager:
     """Enhanced audit trail manager"""
@@ -288,6 +388,7 @@ class AuditTrailManager:
     def __init__(self):
         self.executions = []
         self.incidents = []
+        logger.info("AuditTrailManager initialized")
     
     def add_execution(self, scenario: str, mode: str, success: bool = True, savings: float = 0) -> Dict:
         """Add execution to audit trail"""
@@ -308,7 +409,7 @@ class AuditTrailManager:
             "time": datetime.datetime.now().strftime("%H:%M"),
             "scenario": scenario,
             "severity": severity,
-            "component": INCIDENT_SCENARIOS.get(scenario, {}).get("component", "unknown"),
+            "component": get_components()["INCIDENT_SCENARIOS"].get(scenario, {}).get("component", "unknown"),
             "status": "Analyzed"
         }
         self.incidents.insert(0, entry)
@@ -333,6 +434,13 @@ class AuditTrailManager:
         self.executions = []
         self.incidents = []
 
+def get_audit_manager() -> AuditTrailManager:
+    """Lazy load audit manager singleton"""
+    global _audit_manager
+    if _audit_manager is None:
+        _audit_manager = AuditTrailManager()
+    return _audit_manager
+
 # ===========================================
 # HELPER FUNCTIONS
 # ===========================================
@@ -378,194 +486,61 @@ def extract_roi_multiplier(roi_result: Dict) -> float:
         return 5.2
 
 # ===========================================
-# VISUALIZATION HELPERS
+# VISUALIZATION HELPERS - USING ENHANCED ENGINE
 # ===========================================
 def create_telemetry_plot(scenario_name: str):
     """Create a telemetry visualization for the selected scenario"""
-    import plotly.graph_objects as go
-    import numpy as np
-    
-    # Generate sample data
-    time_points = np.arange(0, 100, 1)
-    
-    # Different patterns for different scenarios
-    if "Cache" in scenario_name:
-        data = 100 + 50 * np.sin(time_points * 0.2) + np.random.normal(0, 10, 100)
-        threshold = 180
-        metric_name = "Cache Hit Rate (%)"
-    elif "Database" in scenario_name:
-        data = 70 + 30 * np.sin(time_points * 0.15) + np.random.normal(0, 8, 100)
-        threshold = 120
-        metric_name = "Connection Pool Usage"
-    elif "Memory" in scenario_name:
-        data = 50 + 40 * np.sin(time_points * 0.1) + np.random.normal(0, 12, 100)
-        threshold = 95
-        metric_name = "Memory Usage (%)"
-    else:
-        data = 80 + 20 * np.sin(time_points * 0.25) + np.random.normal(0, 5, 100)
-        threshold = 110
-        metric_name = "System Load"
-    
-    # Create the plot
-    fig = go.Figure()
-    
-    # Add normal data
-    fig.add_trace(go.Scatter(
-        x=time_points[:70],
-        y=data[:70],
-        mode='lines',
-        name='Normal',
-        line=dict(color='#3b82f6', width=3),
-        fill='tozeroy',
-        fillcolor='rgba(59, 130, 246, 0.1)'
-    ))
-    
-    # Add anomaly data
-    fig.add_trace(go.Scatter(
-        x=time_points[70:],
-        y=data[70:],
-        mode='lines',
-        name='Anomaly Detected',
-        line=dict(color='#ef4444', width=3, dash='dash'),
-        fill='tozeroy',
-        fillcolor='rgba(239, 68, 68, 0.1)'
-    ))
-    
-    # Add threshold line
-    fig.add_hline(
-        y=threshold,
-        line_dash="dot",
-        line_color="#f59e0b",
-        annotation_text="Threshold",
-        annotation_position="bottom right"
-    )
-    
-    # Add detection point
-    fig.add_vline(
-        x=70,
-        line_dash="dash",
-        line_color="#10b981",
-        annotation_text="ARF Detection",
-        annotation_position="top"
-    )
-    
-    # Update layout
-    fig.update_layout(
-        title=f"📈 {metric_name} - Live Telemetry",
-        xaxis_title="Time (minutes)",
-        yaxis_title=metric_name,
-        height=300,
-        margin=dict(l=20, r=20, t=50, b=20),
-        plot_bgcolor='rgba(0,0,0,0)',
-        paper_bgcolor='rgba(0,0,0,0)',
-        legend=dict(
-            orientation="h",
-            yanchor="bottom",
-            y=1.02,
-            xanchor="right",
-            x=1
-        )
-    )
-    
-    return fig
+    try:
+        viz_engine = get_components()["EnhancedVisualizationEngine"]
+        return viz_engine.create_telemetry_plot(scenario_name, anomaly_detected=True)
+    except Exception as e:
+        logger.error(f"Failed to create telemetry plot: {e}")
+        # Fallback
+        import plotly.graph_objects as go
+        fig = go.Figure()
+        fig.add_trace(go.Scatter(x=[0, 1, 2], y=[0, 1, 0]))
+        fig.update_layout(height=300, title=f"Telemetry: {scenario_name}")
+        return fig
 
 def create_impact_plot(scenario_name: str):
     """Create a business impact visualization"""
-    import plotly.graph_objects as go
-    
-    # Get impact data
-    impact_map = {
-        "Cache Miss Storm": {"revenue": 8500, "users": 45000, "services": 12},
-        "Database Connection Pool Exhaustion": {"revenue": 4200, "users": 22000, "services": 8},
-        "Kubernetes Memory Leak": {"revenue": 5500, "users": 28000, "services": 15},
-        "API Rate Limit Storm": {"revenue": 3800, "users": 19000, "services": 6},
-        "Network Partition": {"revenue": 12000, "users": 65000, "services": 25},
-        "Storage I/O Saturation": {"revenue": 6800, "users": 32000, "services": 10}
-    }
-    
-    impact = impact_map.get(scenario_name, {"revenue": 5000, "users": 25000, "services": 10})
-    
-    # Create gauge
-    fig = go.Figure(go.Indicator(
-        mode="gauge+number",
-        value=impact["revenue"],
-        title={'text': "💰 Hourly Revenue Risk", 'font': {'size': 16}},
-        number={'prefix': "$", 'font': {'size': 28}},
-        gauge={
-            'axis': {'range': [0, 15000], 'tickwidth': 1},
-            'bar': {'color': "#ef4444"},
-            'steps': [
-                {'range': [0, 3000], 'color': '#10b981'},
-                {'range': [3000, 7000], 'color': '#f59e0b'},
-                {'range': [7000, 15000], 'color': '#ef4444'}
-            ],
-            'threshold': {
-                'line': {'color': "black", 'width': 4},
-                'thickness': 0.75,
-                'value': impact["revenue"]
-            }
-        }
-    ))
-    
-    fig.update_layout(
-        height=300,
-        margin=dict(l=20, r=20, t=50, b=20),
-        paper_bgcolor='rgba(0,0,0,0)'
-    )
-    
-    return fig
+    try:
+        viz_engine = get_components()["EnhancedVisualizationEngine"]
+        return viz_engine.create_impact_gauge(scenario_name)
+    except Exception as e:
+        logger.error(f"Failed to create impact plot: {e}")
+        # Fallback
+        import plotly.graph_objects as go
+        fig = go.Figure(go.Indicator(
+            mode="gauge+number",
+            value=8500,
+            title={'text': "💰 Hourly Revenue Risk"},
+            gauge={'axis': {'range': [0, 15000]}}
+        ))
+        fig.update_layout(height=300)
+        return fig
 
 def create_timeline_plot(scenario_name: str):
     """Create an incident timeline visualization"""
-    import plotly.graph_objects as go
-    
-    # Timeline data
-    events = [
-        {"time": 0, "event": "Incident Starts", "duration": 45},
-        {"time": 45, "event": "ARF Detection", "duration": 30},
-        {"time": 75, "event": "OSS Analysis Complete", "duration": 60},
-        {"time": 135, "event": "Enterprise Execution", "duration": 720},
-        {"time": 2700, "event": "Manual Resolution", "duration": 0}
-    ]
-    
-    # Create timeline
-    fig = go.Figure()
-    
-    # Add event bars
-    for i, event in enumerate(events):
-        if event["duration"] > 0:
-            fig.add_trace(go.Bar(
-                x=[event["duration"]],
-                y=[event["event"]],
-                orientation='h',
-                name=event["event"],
-                marker_color=['#3b82f6', '#10b981', '#8b5cf6', '#f59e0b', '#ef4444'][i],
-                text=[f"{event['duration']}s"],
-                textposition='auto',
-                hoverinfo='text',
-                hovertemplate=f"{event['event']}: {event['duration']} seconds<extra></extra>"
-            ))
-    
-    fig.update_layout(
-        title="⏰ Incident Timeline Comparison",
-        xaxis_title="Time (seconds)",
-        yaxis_title="",
-        barmode='stack',
-        height=300,
-        margin=dict(l=20, r=20, t=50, b=20),
-        plot_bgcolor='rgba(0,0,0,0)',
-        paper_bgcolor='rgba(0,0,0,0)',
-        showlegend=False
-    )
-    
-    return fig
+    try:
+        viz_engine = get_components()["EnhancedVisualizationEngine"]
+        return viz_engine.create_timeline_comparison()
+    except Exception as e:
+        logger.error(f"Failed to create timeline plot: {e}")
+        # Fallback
+        import plotly.graph_objects as go
+        fig = go.Figure()
+        fig.add_trace(go.Bar(name='Manual', x=['Detection', 'Resolution'], y=[300, 2700]))
+        fig.add_trace(go.Bar(name='ARF', x=['Detection', 'Resolution'], y=[45, 720]))
+        fig.update_layout(height=400, title="Timeline Comparison")
+        return fig
 
 # ===========================================
 # SCENARIO UPDATE HANDLER
 # ===========================================
 def update_scenario_display(scenario_name: str) -> tuple:
     """Update all scenario-related displays"""
-    scenario = INCIDENT_SCENARIOS.get(scenario_name, {})
+    scenario = get_components()["INCIDENT_SCENARIOS"].get(scenario_name, {})
     impact = scenario.get("business_impact", {})
     metrics = scenario.get("metrics", {})
     
@@ -594,7 +569,7 @@ def update_scenario_display(scenario_name: str) -> tuple:
                 <span style="font-size: 14px; color: #1e293b; font-weight: 600;">45 seconds (ARF AI)</span>
             </div>
             <div style="display: flex; flex-wrap: wrap; gap: 6px; margin-top: 15px; padding-top: 12px; border-top: 1px solid #f1f5f9;">
-                <span style="padding: 3px 8px; background: #f1f5f9; border-radius: 6px; font-size: 11px; color: #475569; font-weight: 500;">{scenario.get('component', 'unknown').split('_')[0]}</span>
+                <span style="padding: 3px 8px; background: #f1f5f9; border-radius: 6px; font-size: 11px; color: #475569; font-weight: 500;">{scenario.get('component', 'unknown').split('_')[0] if '_' in scenario.get('component', '') else scenario.get('component', 'unknown')}</span>
                 <span style="padding: 3px 8px; background: #f1f5f9; border-radius: 6px; font-size: 11px; color: #475569; font-weight: 500;">{scenario.get('severity', 'high').lower()}</span>
                 <span style="padding: 3px 8px; background: #f1f5f9; border-radius: 6px; font-size: 11px; color: #475569; font-weight: 500;">production</span>
                 <span style="padding: 3px 8px; background: #f1f5f9; border-radius: 6px; font-size: 11px; color: #475569; font-weight: 500;">incident</span>
@@ -616,100 +591,143 @@ def update_scenario_display(scenario_name: str) -> tuple:
     )
 
 # ===========================================
-# OSS ANALYSIS HANDLER
+# OSS ANALYSIS HANDLER - FIXED VERSION
 # ===========================================
 @AsyncRunner.async_to_sync
 async def run_oss_analysis(scenario_name: str):
-    """Run OSS analysis"""
-    scenario = INCIDENT_SCENARIOS.get(scenario_name, {})
-    
-    # Use orchestrator
-    orchestrator = DemoOrchestrator()
-    analysis = await orchestrator.analyze_incident(scenario_name, scenario)
-    
-    # Add to audit trail
-    audit_manager.add_incident(scenario_name, scenario.get("severity", "HIGH"))
-    
-    # Update incident table
-    incident_table_data = audit_manager.get_incident_table()
-    
-    # Enhanced OSS results
-    oss_results = {
-        "status": "✅ OSS Analysis Complete",
-        "scenario": scenario_name,
-        "confidence": 0.85,
-        "agents_executed": ["Detection", "Recall", "Decision"],
-        "findings": [
-            "Anomaly detected with 99.8% confidence",
-            "3 similar incidents found in RAG memory",
-            "Historical success rate for similar actions: 87%"
-        ],
-        "recommendations": [
-            "Scale resources based on historical patterns",
-            "Implement circuit breaker pattern",
-            "Add enhanced monitoring for key metrics"
-        ],
-        "healing_intent": {
-            "action": "scale_out",
-            "component": scenario.get("component", "unknown"),
-            "parameters": {"nodes": "3→5", "region": "auto-select"},
-            "confidence": 0.94,
-            "requires_enterprise": True,
-            "advisory_only": True,
-            "safety_check": "✅ Passed (blast radius: 2 services)"
+    """Run OSS analysis with robust error handling"""
+    try:
+        logger.info(f"Running OSS analysis for: {scenario_name}")
+        
+        scenario = get_components()["INCIDENT_SCENARIOS"].get(scenario_name, {})
+        
+        if not scenario:
+            raise ValueError(f"Scenario '{scenario_name}' not found")
+        
+        # Use fixed orchestrator
+        orchestrator = get_components()["DemoOrchestrator"]()
+        analysis = await orchestrator.analyze_incident(scenario_name, scenario)
+        
+        # Check for errors
+        if analysis.get("status") == "error":
+            error_msg = analysis.get("message", "Unknown error")
+            raise ValueError(f"Analysis failed: {error_msg}")
+        
+        # Add to audit trail
+        get_audit_manager().add_incident(scenario_name, scenario.get("severity", "HIGH"))
+        
+        # Update incident table
+        incident_table_data = get_audit_manager().get_incident_table()
+        
+        # Enhanced OSS results
+        detection_confidence = analysis.get("detection", {}).get("confidence", 99.8)
+        similar_count = len(analysis.get("recall", []))
+        decision_confidence = analysis.get("confidence", 94.0)
+        
+        oss_results = {
+            "status": "✅ OSS Analysis Complete",
+            "scenario": scenario_name,
+            "confidence": decision_confidence,
+            "agents_executed": ["Detection", "Recall", "Decision"],
+            "findings": [
+                f"Anomaly detected with {detection_confidence}% confidence",
+                f"{similar_count} similar incidents found in RAG memory",
+                f"Historical success rate for similar actions: 87%"
+            ],
+            "recommendations": [
+                "Scale resources based on historical patterns",
+                "Implement circuit breaker pattern",
+                "Add enhanced monitoring for key metrics"
+            ],
+            "healing_intent": analysis.get("decision", {
+                "action": "scale_out",
+                "component": scenario.get("component", "unknown"),
+                "parameters": {"nodes": "3→5", "region": "auto-select"},
+                "confidence": decision_confidence,
+                "requires_enterprise": True,
+                "advisory_only": True,
+                "safety_check": "✅ Passed (blast radius: 2 services)"
+            })
         }
-    }
-    
-    # Update agent status
-    detection_html = """
-    <div class="agent-card detection">
-        <div class="agent-icon">🕵️‍♂️</div>
-        <div class="agent-content">
-            <h4>Detection Agent</h4>
-            <p class="agent-status-text">Analysis complete: <strong>99.8% confidence</strong></p>
-            <div class="agent-metrics">
-                <span class="agent-metric">Time: 45s</span>
-                <span class="agent-metric">Accuracy: 98.7%</span>
+        
+        # Update agent status HTML - FIXED: Proper HTML with CSS classes
+        detection_html = f"""
+        <div style="border: 2px solid #3b82f6; border-radius: 14px; padding: 18px; background: #eff6ff; text-align: center; min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center;">
+            <div style="font-size: 32px; margin-bottom: 10px;">🕵️‍♂️</div>
+            <div style="width: 100%;">
+                <h4 style="margin: 0 0 8px 0; font-size: 16px; color: #1e293b;">Detection Agent</h4>
+                <p style="font-size: 13px; color: #475569; margin-bottom: 12px; line-height: 1.4;">Analysis complete: <strong>{detection_confidence}% confidence</strong></p>
+                <div style="display: flex; justify-content: space-around; margin-bottom: 12px;">
+                    <span style="font-size: 11px; padding: 3px 8px; background: rgba(255, 255, 255, 0.8); border-radius: 6px; color: #475569; font-weight: 500;">Time: 45s</span>
+                    <span style="font-size: 11px; padding: 3px 8px; background: rgba(255, 255, 255, 0.8); border-radius: 6px; color: #475569; font-weight: 500;">Accuracy: 98.7%</span>
+                </div>
+                <div style="display: inline-block; padding: 5px 14px; background: linear-gradient(135deg, #10b981 0%, #059669 100%); border-radius: 20px; font-size: 12px; font-weight: bold; color: white; text-transform: uppercase; letter-spacing: 0.5px;">COMPLETE</div>
             </div>
-            <div class="agent-status completed">COMPLETE</div>
         </div>
-    </div>
-    """
-    
-    recall_html = """
-    <div class="agent-card recall">
-        <div class="agent-icon">🧠</div>
-        <div class="agent-content">
-            <h4>Recall Agent</h4>
-            <p class="agent-status-text"><strong>3 similar incidents</strong> retrieved from memory</p>
-            <div class="agent-metrics">
-                <span class="agent-metric">Recall: 92%</span>
-                <span class="agent-metric">Patterns: 5</span>
+        """
+        
+        recall_html = f"""
+        <div style="border: 2px solid #8b5cf6; border-radius: 14px; padding: 18px; background: #f5f3ff; text-align: center; min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center;">
+            <div style="font-size: 32px; margin-bottom: 10px;">🧠</div>
+            <div style="width: 100%;">
+                <h4 style="margin: 0 0 8px 0; font-size: 16px; color: #1e293b;">Recall Agent</h4>
+                <p style="font-size: 13px; color: #475569; margin-bottom: 12px; line-height: 1.4;"><strong>{similar_count} similar incidents</strong> retrieved from memory</p>
+                <div style="display: flex; justify-content: space-around; margin-bottom: 12px;">
+                    <span style="font-size: 11px; padding: 3px 8px; background: rgba(255, 255, 255, 0.8); border-radius: 6px; color: #475569; font-weight: 500;">Recall: 92%</span>
+                    <span style="font-size: 11px; padding: 3px 8px; background: rgba(255, 255, 255, 0.8); border-radius: 6px; color: #475569; font-weight: 500;">Patterns: 5</span>
+                </div>
+                <div style="display: inline-block; padding: 5px 14px; background: linear-gradient(135deg, #10b981 0%, #059669 100%); border-radius: 20px; font-size: 12px; font-weight: bold; color: white; text-transform: uppercase; letter-spacing: 0.5px;">COMPLETE</div>
             </div>
-            <div class="agent-status completed">COMPLETE</div>
         </div>
-    </div>
-    """
-    
-    decision_html = """
-    <div class="agent-card decision">
-        <div class="agent-icon">🎯</div>
-        <div class="agent-content">
-            <h4>Decision Agent</h4>
-            <p class="agent-status-text">HealingIntent created with <strong>94% confidence</strong></p>
-            <div class="agent-metrics">
-                <span class="agent-metric">Success Rate: 87%</span>
-                <span class="agent-metric">Safety: 100%</span>
+        """
+        
+        decision_html = f"""
+        <div style="border: 2px solid #10b981; border-radius: 14px; padding: 18px; background: #f0fdf4; text-align: center; min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center;">
+            <div style="font-size: 32px; margin-bottom: 10px;">🎯</div>
+            <div style="width: 100%;">
+                <h4 style="margin: 0 0 8px 0; font-size: 16px; color: #1e293b;">Decision Agent</h4>
+                <p style="font-size: 13px; color: #475569; margin-bottom: 12px; line-height: 1.4;">HealingIntent created with <strong>{decision_confidence}% confidence</strong></p>
+                <div style="display: flex; justify-content: space-around; margin-bottom: 12px;">
+                    <span style="font-size: 11px; padding: 3px 8px; background: rgba(255, 255, 255, 0.8); border-radius: 6px; color: #475569; font-weight: 500;">Success Rate: 87%</span>
+                    <span style="font-size: 11px; padding: 3px 8px; background: rgba(255, 255, 255, 0.8); border-radius: 6px; color: #475569; font-weight: 500;">Safety: 100%</span>
+                </div>
+                <div style="display: inline-block; padding: 5px 14px; background: linear-gradient(135deg, #10b981 0%, #059669 100%); border-radius: 20px; font-size: 12px; font-weight: bold; color: white; text-transform: uppercase; letter-spacing: 0.5px;">COMPLETE</div>
             </div>
-            <div class="agent-status completed">COMPLETE</div>
         </div>
-    </div>
-    """
-    
-    return (
-        detection_html, recall_html, decision_html,
-        oss_results, incident_table_data
-    )
+        """
+        
+        logger.info(f"OSS analysis completed successfully for {scenario_name}")
+        return (
+            detection_html, recall_html, decision_html,
+            oss_results, incident_table_data
+        )
+        
+    except Exception as e:
+        logger.error(f"OSS analysis failed: {e}", exc_info=True)
+        
+        # Return error state with proper HTML
+        error_html = f"""
+        <div style="border: 2px solid #ef4444; border-radius: 14px; padding: 18px; background: #fef2f2; text-align: center; min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center;">
+            <div style="font-size: 32px; margin-bottom: 10px;">❌</div>
+            <div style="width: 100%;">
+                <h4 style="margin: 0 0 8px 0; font-size: 16px; color: #1e293b;">Analysis Failed</h4>
+                <p style="font-size: 13px; color: #475569; margin-bottom: 12px; line-height: 1.4;">Error: {str(e)[:80]}...</p>
+                <div style="display: inline-block; padding: 5px 14px; background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); border-radius: 20px; font-size: 12px; font-weight: bold; color: white; text-transform: uppercase; letter-spacing: 0.5px;">ERROR</div>
+            </div>
+        </div>
+        """
+        
+        error_results = {
+            "status": "❌ Analysis Failed",
+            "error": str(e),
+            "scenario": scenario_name,
+            "suggestion": "Check logs and try again"
+        }
+        
+        return (
+            error_html, error_html, error_html,
+            error_results, []
+        )
 
 # ===========================================
 # CREATE DEMO INTERFACE
@@ -719,13 +737,8 @@ def create_demo_interface():
     
     import gradio as gr
     
-    # Initialize components
-    viz_engine = EnhancedVisualizationEngine
-    roi_calculator = EnhancedROICalculator
-    audit_manager = AuditTrailManager()
-    
     # Get CSS styles
-    css_styles = get_styles()
+    css_styles = get_components()["get_styles"]()
     
     with gr.Blocks(
         title=f"🚀 ARF Investor Demo v3.8.0 - {settings.arf_mode.upper()} Mode",
@@ -733,10 +746,10 @@ def create_demo_interface():
     ) as demo:
         
         # Header
-        header_html = create_header("3.8.0", settings.use_mock_arf)
+        header_html = get_components()["create_header"]("3.8.0", settings.use_mock_arf)
         
         # Status bar
-        status_html = create_status_bar()
+        status_html = get_components()["create_status_bar"]()
         
         # ============ 5 TABS ============
         with gr.Tabs(elem_classes="tab-nav"):
@@ -748,31 +761,31 @@ def create_demo_interface():
                  oss_section, enterprise_section, oss_btn, enterprise_btn, 
                  approval_toggle, mcp_mode, timeline_viz,
                  detection_time, mttr, auto_heal, savings,
-                 oss_results_display, enterprise_results_display, approval_display, demo_btn) = create_tab1_incident_demo()
+                 oss_results_display, enterprise_results_display, approval_display, demo_btn) = get_components()["create_tab1_incident_demo"]()
             
             # TAB 2: Business 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(INCIDENT_SCENARIOS)
+                 calculate_btn, roi_output, roi_chart) = get_components()["create_tab2_business_roi"](get_components()["INCIDENT_SCENARIOS"])
             
             # TAB 3: Enterprise Features
             with gr.TabItem("🏢 Enterprise Features", id="tab3"):
                 (license_display, validate_btn, trial_btn, upgrade_btn,
-                 mcp_mode_tab3, mcp_mode_info, features_table, integrations_table) = create_tab3_enterprise_features()
+                 mcp_mode_tab3, mcp_mode_info, features_table, integrations_table) = get_components()["create_tab3_enterprise_features"]()
             
             # TAB 4: Audit Trail
             with gr.TabItem("📜 Audit Trail & History", id="tab4"):
                 (refresh_btn, clear_btn, export_btn, execution_table,
-                 incident_table, export_text) = create_tab4_audit_trail()
+                 incident_table, export_text) = get_components()["create_tab4_audit_trail"]()
             
             # 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()
+                 performance_display) = get_components()["create_tab5_learning_engine"]()
         
         # Footer
-        footer_html = create_footer()
+        footer_html = get_components()["create_footer"]()
         
         # ============ EVENT HANDLERS ============
         
@@ -795,12 +808,12 @@ def create_demo_interface():
         
         # Execute Enterprise Healing
         def execute_enterprise_healing(scenario_name, approval_required, mcp_mode_value):
-            scenario = INCIDENT_SCENARIOS.get(scenario_name, {})
+            scenario = get_components()["INCIDENT_SCENARIOS"].get(scenario_name, {})
             
             # Determine mode
             mode = "Approval" if approval_required else "Autonomous"
             if "Advisory" in mcp_mode_value:
-                return gr.HTML.update(value="<div class='approval-status'><p>❌ Cannot execute in Advisory mode. Switch to Approval or Autonomous mode.</p></div>"), {}, []
+                return gr.HTML.update(value="<div style='padding: 20px; background: #fef2f2; border-radius: 14px;'><p>❌ Cannot execute in Advisory mode. Switch to Approval or Autonomous mode.</p></div>"), {}, []
             
             # Calculate savings
             impact = scenario.get("business_impact", {})
@@ -808,45 +821,45 @@ def create_demo_interface():
             savings = int(revenue_loss * 0.85)
             
             # Add to audit trail
-            audit_manager.add_execution(scenario_name, mode, savings=savings)
+            get_audit_manager().add_execution(scenario_name, mode, savings=savings)
             
             # Create approval display
             if approval_required:
                 approval_html = f"""
-                <div class="approval-status">
-                    <div class="approval-header">
-                        <h4>👤 Human Approval Required</h4>
-                        <span class="approval-badge pending">PENDING</span>
+                <div style="border: 2px solid #e2e8f0; border-radius: 14px; padding: 20px; background: white; margin-top: 20px;">
+                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 12px; border-bottom: 2px solid #f1f5f9;">
+                        <h4 style="margin: 0; font-size: 16px; color: #1e293b;">👤 Human Approval Required</h4>
+                        <span style="padding: 4px 12px; background: #f59e0b; color: white; border-radius: 8px; font-size: 12px; font-weight: bold; text-transform: uppercase;">PENDING</span>
                     </div>
-                    <div class="approval-content">
-                        <p><strong>Scenario:</strong> {scenario_name}</p>
-                        <p><strong>Action:</strong> Scale Redis cluster from 3 to 5 nodes</p>
-                        <p><strong>Estimated Savings:</strong> <span class='savings-highlight'>${savings:,}</span></p>
-                        <div class="approval-workflow">
-                            <div class="workflow-step">✅ 1. ARF generated intent (94% confidence)</div>
-                            <div class="workflow-step">⏳ 2. Awaiting human review...</div>
-                            <div class="workflow-step">3. ARF will execute upon approval</div>
+                    <div style="margin-top: 15px;">
+                        <p style="margin: 8px 0; font-size: 14px; color: #475569;"><strong>Scenario:</strong> {scenario_name}</p>
+                        <p style="margin: 8px 0; font-size: 14px; color: #475569;"><strong>Action:</strong> Scale Redis cluster from 3 to 5 nodes</p>
+                        <p style="margin: 8px 0; font-size: 14px; color: #475569;"><strong>Estimated Savings:</strong> <span style="color: #10b981; font-weight: 700;">${savings:,}</span></p>
+                        <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 20px;">
+                            <div style="padding: 12px; background: #f8fafc; border-radius: 10px; border-left: 4px solid #3b82f6; font-size: 14px; color: #475569; font-weight: 500;">✅ 1. ARF generated intent (94% confidence)</div>
+                            <div style="padding: 12px; background: #f8fafc; border-radius: 10px; border-left: 4px solid #f59e0b; font-size: 14px; color: #475569; font-weight: 500;">⏳ 2. Awaiting human review...</div>
+                            <div style="padding: 12px; background: #f8fafc; border-radius: 10px; border-left: 4px solid #3b82f6; font-size: 14px; color: #475569; font-weight: 500;">3. ARF will execute upon approval</div>
                         </div>
                     </div>
                 </div>
                 """
             else:
                 approval_html = f"""
-                <div class="approval-status">
-                    <div class="approval-header">
-                        <h4>⚡ Autonomous Execution Complete</h4>
-                        <span class="approval-badge not-required">AUTO-EXECUTED</span>
+                <div style="border: 2px solid #e2e8f0; border-radius: 14px; padding: 20px; background: white; margin-top: 20px;">
+                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 12px; border-bottom: 2px solid #f1f5f9;">
+                        <h4 style="margin: 0; font-size: 16px; color: #1e293b;">⚡ Autonomous Execution Complete</h4>
+                        <span style="padding: 4px 12px; background: #10b981; color: white; border-radius: 8px; font-size: 12px; font-weight: bold; text-transform: uppercase;">AUTO-EXECUTED</span>
                     </div>
-                    <div class="approval-content">
-                        <p><strong>Scenario:</strong> {scenario_name}</p>
-                        <p><strong>Mode:</strong> Autonomous</p>
-                        <p><strong>Action Executed:</strong> Scaled Redis cluster from 3 to 5 nodes</p>
-                        <p><strong>Recovery Time:</strong> 12 minutes (vs 45 min manual)</p>
-                        <p><strong>Cost Saved:</strong> <span class='savings-highlight'>${savings:,}</span></p>
-                        <div class="approval-workflow">
-                            <div class="workflow-step">✅ 1. ARF generated intent</div>
-                            <div class="workflow-step">✅ 2. Safety checks passed</div>
-                            <div class="workflow-step">✅ 3. Autonomous execution completed</div>
+                    <div style="margin-top: 15px;">
+                        <p style="margin: 8px 0; font-size: 14px; color: #475569;"><strong>Scenario:</strong> {scenario_name}</p>
+                        <p style="margin: 8px 0; font-size: 14px; color: #475569;"><strong>Mode:</strong> Autonomous</p>
+                        <p style="margin: 8px 0; font-size: 14px; color: #475569;"><strong>Action Executed:</strong> Scaled Redis cluster from 3 to 5 nodes</p>
+                        <p style="margin: 8px 0; font-size: 14px; color: #475569;"><strong>Recovery Time:</strong> 12 minutes (vs 45 min manual)</p>
+                        <p style="margin: 8px 0; font-size: 14px; color: #475569;"><strong>Cost Saved:</strong> <span style="color: #10b981; font-weight: 700;">${savings:,}</span></p>
+                        <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 20px;">
+                            <div style="padding: 12px; background: #f8fafc; border-radius: 10px; border-left: 4px solid #10b981; font-size: 14px; color: #475569; font-weight: 500;">✅ 1. ARF generated intent</div>
+                            <div style="padding: 12px; background: #f8fafc; border-radius: 10px; border-left: 4px solid #10b981; font-size: 14px; color: #475569; font-weight: 500;">✅ 2. Safety checks passed</div>
+                            <div style="padding: 12px; background: #f8fafc; border-radius: 10px; border-left: 4px solid #10b981; font-size: 14px; color: #475569; font-weight: 500;">✅ 3. Autonomous execution completed</div>
                         </div>
                     </div>
                 </div>
@@ -878,7 +891,7 @@ def create_demo_interface():
             }
             
             # Update execution table
-            execution_table_data = audit_manager.get_execution_table()
+            execution_table_data = get_audit_manager().get_execution_table()
             
             return approval_html, enterprise_results, execution_table_data
         
@@ -899,9 +912,9 @@ def create_demo_interface():
             oss_result = await run_oss_analysis(scenario_name)
             
             # Step 3: Execute Enterprise (simulated)
-            await asyncio.sleep(2)
+            await asyncio.sleep(1)
             
-            scenario = INCIDENT_SCENARIOS.get(scenario_name, {})
+            scenario = get_components()["INCIDENT_SCENARIOS"].get(scenario_name, {})
             impact = scenario.get("business_impact", {})
             revenue_loss = impact.get("revenue_loss_per_hour", 5000)
             savings = int(revenue_loss * 0.85)
@@ -928,17 +941,17 @@ def create_demo_interface():
             
             # Create demo completion message
             demo_message = f"""
-            <div class="scenario-card" style="background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);">
-                <div class="scenario-header">
-                    <h3>✅ Demo Complete</h3>
-                    <span class="severity-badge low">SUCCESS</span>
+            <div style="border: 1px solid #e2e8f0; border-radius: 14px; padding: 20px; background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); margin-top: 20px;">
+                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 12px; border-bottom: 2px solid rgba(0,0,0,0.1);">
+                    <h3 style="margin: 0; font-size: 18px; color: #1e293b;">✅ Demo Complete</h3>
+                    <span style="padding: 4px 12px; background: #10b981; color: white; border-radius: 20px; font-size: 12px; font-weight: bold; text-transform: uppercase;">SUCCESS</span>
                 </div>
-                <div class="scenario-details">
-                    <p><strong>Scenario:</strong> {scenario_name}</p>
-                    <p><strong>Workflow:</strong> OSS Analysis → Enterprise Execution</p>
-                    <p><strong>Time Saved:</strong> 33 minutes (73% faster)</p>
-                    <p><strong>Cost Avoided:</strong> ${savings:,}</p>
-                    <p><em>This demonstrates the complete ARF value proposition from detection to autonomous healing.</em></p>
+                <div style="margin-top: 15px;">
+                    <p style="margin: 8px 0; font-size: 14px; color: #475569;"><strong>Scenario:</strong> {scenario_name}</p>
+                    <p style="margin: 8px 0; font-size: 14px; color: #475569;"><strong>Workflow:</strong> OSS Analysis → Enterprise Execution</p>
+                    <p style="margin: 8px 0; font-size: 14px; color: #475569;"><strong>Time Saved:</strong> 33 minutes (73% faster)</p>
+                    <p style="margin: 8px 0; font-size: 14px; color: #475569;"><strong>Cost Avoided:</strong> ${savings:,}</p>
+                    <p style="margin: 8px 0; font-size: 14px; color: #64748b; font-style: italic;">This demonstrates the complete ARF value proposition from detection to autonomous healing.</p>
                 </div>
             </div>
             """
@@ -976,6 +989,7 @@ def create_demo_interface():
                 avg_impact = get_scenario_impact(scenario_name)
                 
                 # Calculate ROI
+                roi_calculator = get_components()["EnhancedROICalculator"]
                 roi_result = roi_calculator.calculate_comprehensive_roi(
                     monthly_incidents=monthly_incidents,
                     avg_impact=float(avg_impact),
@@ -986,6 +1000,7 @@ def create_demo_interface():
                 roi_multiplier = extract_roi_multiplier(roi_result)
                 
                 # Create visualization
+                viz_engine = get_components()["EnhancedVisualizationEngine"]
                 chart = viz_engine.create_executive_dashboard({"roi_multiplier": roi_multiplier})
                 
                 return roi_result, chart
@@ -1007,6 +1022,7 @@ def create_demo_interface():
                 }
                 
                 # Always return a valid chart
+                viz_engine = get_components()["EnhancedVisualizationEngine"]
                 fallback_chart = viz_engine.create_executive_dashboard({"roi_multiplier": 5.2})
                 
                 return fallback_result, fallback_chart
@@ -1079,16 +1095,17 @@ def create_demo_interface():
         # ============ TAB 4 HANDLERS ============
         
         def refresh_audit_trail():
-            return audit_manager.get_execution_table(), audit_manager.get_incident_table()
+            return get_audit_manager().get_execution_table(), get_audit_manager().get_incident_table()
         
         def clear_audit_trail():
-            audit_manager.clear()
-            return audit_manager.get_execution_table(), audit_manager.get_incident_table()
+            get_audit_manager().clear()
+            return get_audit_manager().get_execution_table(), get_audit_manager().get_incident_table()
         
         def export_audit_trail():
             try:
                 # Calculate total savings
                 total_savings = 0
+                audit_manager = get_audit_manager()
                 for e in audit_manager.executions:
                     if e['savings'] != '$0':
                         try:
@@ -1127,6 +1144,7 @@ def create_demo_interface():
         # Initialize dashboard
         def initialize_dashboard():
             try:
+                viz_engine = get_components()["EnhancedVisualizationEngine"]
                 chart = viz_engine.create_executive_dashboard()
                 return chart
             except Exception as e:
@@ -1168,7 +1186,8 @@ def main():
     demo.launch(
         server_name="0.0.0.0",
         server_port=7860,
-        share=False
+        share=False,
+        show_error=True  # Show errors in UI
     )