Update app.py

app.py

@@ -473,26 +473,30 @@ except ImportError as e:
 # CSS LOADING FUNCTION
 # ===========================================
 def load_css_files():
-    """Load CSS files for modern UI with fallback"""
+    """Load CSS files for modern UI with fallback - ENHANCED"""
     css_content = ""
     
-    if get_feature_flags().get('modern_ui', False) and MODERN_UI_AVAILABLE:
+    # Feature flag check
+    flags = get_feature_flags()
+    
+    if flags.get('modern_ui', True):  # Default to True
         try:
-            # Try to load modern CSS files
-            with open("ui/styles/modern.css", "r") as f:
-                css_content += f.read()
+            # Load modern.css
+            with open("styles/modern.css", "r") as f:
+                css_content += f.read() + "\n"
             logger.info("✅ Loaded modern.css")
         except FileNotFoundError:
-            # Fallback inline modern CSS
+            logger.warning("⚠️ modern.css not found, using fallback")
             css_content += """
+            /* Modern CSS Fallback */
             :root {
                 --color-primary: #3b82f6;
                 --color-success: #10b981;
                 --color-warning: #f59e0b;
                 --color-danger: #ef4444;
-                --bg-primary: #ffffff;
-                --text-primary: #1e293b;
-                --border-color: #e2e8f0;
+                --color-bg: #ffffff;
+                --color-text: #1e293b;
+                --color-border: #e2e8f0;
             }
             
             .container {
@@ -502,48 +506,88 @@ def load_css_files():
                 padding: 0 1rem;
             }
             
-            .grid {
-                display: grid;
-                gap: 1rem;
-            }
-            
-            @media (min-width: 640px) {
-                .grid-2 { grid-template-columns: repeat(2, 1fr); }
-                .grid-4 { grid-template-columns: repeat(4, 1fr); }
-            }
-            
-            @media (max-width: 640px) {
-                .grid-2, .grid-4 { grid-template-columns: 1fr; }
+            .card {
+                background: white;
+                border-radius: 0.75rem;
+                border: 1px solid var(--color-border);
+                padding: 1.5rem;
+                box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
             }
             """
         
-        try:
-            with open("ui/styles/responsive.css", "r") as f:
-                css_content += f.read()
-            logger.info("✅ Loaded responsive.css")
-        except FileNotFoundError:
-            # Fallback responsive utilities
+        if flags.get('responsive_design', True):
+            try:
+                # Load responsive.css
+                with open("styles/responsive.css", "r") as f:
+                    css_content += f.read() + "\n"
+                logger.info("✅ Loaded responsive.css")
+            except FileNotFoundError:
+                logger.warning("⚠️ responsive.css not found, using fallback")
+                css_content += """
+                /* Responsive Fallback */
+                @media (max-width: 768px) {
+                    .grid-2, .grid-3, .grid-4 {
+                        grid-template-columns: 1fr !important;
+                    }
+                    
+                    .card {
+                        padding: 1rem;
+                    }
+                }
+                """
+        
+        # Add dark mode toggle CSS
+        if flags.get('dark_mode', True):
             css_content += """
-            .mobile-only { display: block; }
-            .desktop-only { display: none; }
+            /* Dark Mode Toggle */
+            .dark-mode-toggle {
+                position: fixed;
+                bottom: 20px;
+                right: 20px;
+                z-index: 1000;
+                background: white;
+                border: 2px solid var(--color-border);
+                border-radius: 50%;
+                width: 48px;
+                height: 48px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                cursor: pointer;
+                box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+                transition: all 0.3s ease;
+            }
+            
+            .dark-mode-toggle:hover {
+                transform: scale(1.1);
+                box-shadow: 0 6px 16px rgba(0,0,0,0.15);
+            }
             
-            @media (min-width: 768px) {
-                .mobile-only { display: none; }
-                .desktop-only { display: block; }
+            [data-theme="dark"] {
+                --color-bg: #0f172a;
+                --color-text: #f1f5f9;
+                --color-border: #334155;
             }
             
-            @media (max-width: 768px) {
-                .grid-2, .grid-4 { grid-template-columns: 1fr !important; }
+            [data-theme="dark"] .card {
+                background: #1e293b;
             }
             """
     else:
-        # Minimal fallback CSS
+        # Minimal CSS
         css_content = """
-        :root { --color-primary: #3b82f6; }
-        .container { max-width: 1200px; margin: 0 auto; }
+        :root { 
+            --color-primary: #3b82f6; 
+            --color-bg: #ffffff;
+            --color-text: #1e293b;
+        }
+        
+        body {
+            font-family: system-ui, -apple-system, sans-serif;
+        }
         """
     
-    return f"<style>{css_content}</style>"
+    return css_content
 
 # ===========================================
 # ENHANCED VISUALIZATION FUNCTIONS WITH GRADIO COMPATIBILITY
@@ -2330,26 +2374,32 @@ def create_demo_interface():
     # Get components
     components = get_components()
     
-    # Get CSS styles
-    css_styles = load_css_files()
-    
-    # Store CSS for later use in launch()
-    global _demo_css
-    _demo_css = css_styles
+    # Get feature flags
+    flags = get_feature_flags()
     
     # Create interface with modern UI initialization
     with gr.Blocks(
         title=f"🚀 ARF Investor Demo v3.3.9 - TRUE ARF OSS Integration",
-        css=css_styles
+        css=load_css_files()  # Load CSS directly
     ) as demo:
         
         # MODERN UI INITIALIZATION
-        if get_feature_flags().get('modern_ui', False) and MODERN_UI_AVAILABLE:
-            modern_ui_init = gr.HTML(initialize_modern_ui())
-            logger.info("✅ Modern UI initialized")
+        if flags.get('modern_ui', True) and MODERN_UI_AVAILABLE:
+            try:
+                # Initialize modern UI with theme support
+                modern_ui_init = gr.HTML(initialize_modern_ui())
+                logger.info("✅ Modern UI initialized")
+            except Exception as e:
+                logger.warning(f"⚠️ Modern UI initialization failed: {e}")
+                modern_ui_init = gr.HTML("<!-- Modern UI failed to initialize -->")
         else:
             modern_ui_init = gr.HTML("<!-- Modern UI not enabled -->")
         
+        # Add dark mode toggle if enabled
+        if flags.get('dark_mode', True):
+            dark_mode_toggle = gr.HTML(create_dark_mode_toggle())
+            logger.info("✅ Dark mode toggle added")
+        
         # Header
         header_html = components["create_header"]("3.3.9")
         
@@ -2470,6 +2520,20 @@ def create_demo_interface():
         # Footer
         footer_html = components["create_footer"]()
         
+        # Add CSS debug panel for testing
+        if flags.get('modern_ui', True):
+            debug_html = gr.HTML(f"""
+            <div style="position: fixed; bottom: 80px; right: 20px; z-index: 999;
+                        background: white; padding: 10px; border-radius: 8px;
+                        border: 1px solid var(--color-border, #e2e8f0); font-size: 12px;
+                        box-shadow: 0 2px 8px rgba(0,0,0,0.1); opacity: 0.9;">
+                <strong>CSS Debug:</strong><br>
+                Modern UI: {flags.get('modern_ui', False)}<br>
+                Dark Mode: {flags.get('dark_mode', False)}<br>
+                CSS Loaded: ✅
+            </div>
+            """)
+        
         # ============ EVENT HANDLERS ============
         
         # Update scenario display when dropdown changes - NOW INCLUDES PERFORMANCE METRICS
@@ -2478,7 +2542,7 @@ def create_demo_interface():
             inputs=[scenario_dropdown],
             outputs=[
                 scenario_card, telemetry_viz, impact_viz, timeline_viz,
-                detection_time, recall_quality, confidence_score, sequencing_stage  # ← CHANGED FROM mttr, auto_heal, savings
+                detection_time, recall_quality, confidence_score, sequencing_stage
             ]
         )
         
@@ -2562,18 +2626,18 @@ def create_demo_interface():
             
             # Create demo completion message with enhanced boundary context
             demo_message = f"""
-            <div style="border: 1px solid #e2e8f0; border-radius: 14px; padding: 20px; 
+            <div style="border: 1px solid var(--color-border, #e2e8f0); border-radius: 14px; padding: 20px; 
                         background: linear-gradient(135deg, #f0fdf4 0%, #e9d5ff 100%); margin-top: 20px;
                         box-shadow: 0 8px 32px rgba(16, 185, 129, 0.1);">
                 
                 <!-- Header with dual-color badge showing boundary -->
                 <div style="display: flex; justify-content: space-between; align-items: center; 
-                            margin-bottom: 20px; padding-bottom: 12px; border-bottom: 2px solid #e2e8f0;">
+                            margin-bottom: 20px; padding-bottom: 12px; border-bottom: 2px solid var(--color-border, #e2e8f0);">
                     <div>
-                        <h3 style="margin: 0; font-size: 18px; color: #1e293b; font-weight: 700;">
+                        <h3 style="margin: 0; font-size: 18px; color: var(--color-text, #1e293b); font-weight: 700;">
                             ✅ Complete Demo: Architecture Validated
                         </h3>
-                        <p style="margin: 5px 0 0 0; font-size: 13px; color: #64748b;">
+                        <p style="margin: 5px 0 0 0; font-size: 13px; color: var(--color-text-secondary, #64748b);">
                             ARF v3.3.9 • OSS advises → Enterprise executes
                         </p>
                     </div>
@@ -2588,13 +2652,13 @@ def create_demo_interface():
                 <!-- Key Results Grid -->
                 <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 20px;">
                     <!-- Left Column: OSS Results -->
-                    <div style="border-left: 4px solid #10b981; padding: 12px; background: #f8fafc; border-radius: 8px;">
-                        <div style="font-size: 11px; color: #64748b; text-transform: uppercase; font-weight: 600; 
+                    <div style="border-left: 4px solid #10b981; padding: 12px; background: var(--color-bg-secondary, #f8fafc); border-radius: 8px;">
+                        <div style="font-size: 11px; color: var(--color-text-secondary, #64748b); text-transform: uppercase; font-weight: 600; 
                                    margin-bottom: 5px; display: flex; align-items: center; gap: 6px;">
                             <span style="display: inline-block; width: 8px; height: 8px; background: #10b981; border-radius: 50%;"></span>
                             {boundaries['oss']['label']}
                         </div>
-                        <div style="font-size: 14px; color: #475569; line-height: 1.5;">
+                        <div style="font-size: 14px; color: var(--color-text, #475569); line-height: 1.5;">
                             • Anomaly detected in 45s<br>
                             • 3 similar incidents recalled<br>
                             • 94% confidence healing plan<br>
@@ -2603,13 +2667,13 @@ def create_demo_interface():
                     </div>
                     
                     <!-- Right Column: Enterprise Results -->
-                    <div style="border-left: 4px solid #8b5cf6; padding: 12px; background: #f8fafc; border-radius: 8px;">
-                        <div style="font-size: 11px; color: #64748b; text-transform: uppercase; font-weight: 600; 
+                    <div style="border-left: 4px solid #8b5cf6; padding: 12px; background: var(--color-bg-secondary, #f8fafc); border-radius: 8px;">
+                        <div style="font-size: 11px; color: var(--color-text-secondary, #64748b); text-transform: uppercase; font-weight: 600; 
                                    margin-bottom: 5px; display: flex; align-items: center; gap: 6px;">
                             <span style="display: inline-block; width: 8px; height: 8px; background: #8b5cf6; border-radius: 50%;"></span>
                             {boundaries['enterprise']['label']}
                         </div>
-                        <div style="font-size: 14px; color: #475569; line-height: 1.5;">
+                        <div style="font-size: 14px; color: var(--color-text, #475569); line-height: 1.5;">
                             • Autonomous execution simulated<br>
                             • Rollback guarantee: 100%<br>
                             • 12min vs 45min recovery<br>
@@ -2620,7 +2684,7 @@ def create_demo_interface():
                 
                 <!-- Boundary Progression Visualization -->
                 <div style="margin-bottom: 20px;">
-                    <div style="font-size: 12px; color: #64748b; text-transform: uppercase; font-weight: 600; 
+                    <div style="font-size: 12px; color: var(--color-text-secondary, #64748b); text-transform: uppercase; font-weight: 600; 
                                margin-bottom: 12px; text-align: center;">
                         🏗️ Architecture Flow
                     </div>
@@ -2633,12 +2697,12 @@ def create_demo_interface():
                         </div>
                         
                         <!-- Arrow -->
-                        <div style="padding: 0 5px; background: #f1f5f9; position: relative;">
+                        <div style="padding: 0 5px; background: var(--color-bg-secondary, #f1f5f9); position: relative;">
                             <div style="width: 0; height: 0; border-top: 15px solid transparent; 
                                        border-bottom: 15px solid transparent; border-left: 15px solid #10b981;"></div>
                             <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
                                        background: white; padding: 2px 6px; border-radius: 10px; font-size: 11px;
-                                       color: #64748b; border: 1px solid #e2e8f0; white-space: nowrap;">
+                                       color: var(--color-text-secondary, #64748b); border: 1px solid var(--color-border, #e2e8f0); white-space: nowrap;">
                                 advises
                             </div>
                         </div>
@@ -2653,19 +2717,19 @@ def create_demo_interface():
                 </div>
                 
                 <!-- ROI Summary -->
-                <div style="background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); 
+                <div style="background: linear-gradient(135deg, var(--color-bg-secondary, #f8fafc) 0%, var(--color-bg, #f1f5f9) 100%); 
                             border-radius: 10px; padding: 15px; margin-bottom: 15px;">
                     <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; text-align: center;">
                         <div>
-                            <div style="font-size: 11px; color: #64748b; margin-bottom: 5px;">Time Saved</div>
+                            <div style="font-size: 11px; color: var(--color-text-secondary, #64748b); margin-bottom: 5px;">Time Saved</div>
                             <div style="font-size: 18px; font-weight: 700; color: #10b981;">73%</div>
                         </div>
                         <div>
-                            <div style="font-size: 11px; color: #64748b; margin-bottom: 5px;">Cost Saved</div>
+                            <div style="font-size: 11px; color: var(--color-text-secondary, #64748b); margin-bottom: 5px;">Cost Saved</div>
                             <div style="font-size: 18px; font-weight: 700; color: #10b981;">${savings_amount:,}</div>
                         </div>
                         <div>
-                            <div style="font-size: 11px; color: #64748b; margin-bottom: 5px;">ROI Multiplier</div>
+                            <div style="font-size: 11px; color: var(--color-text-secondary, #64748b); margin-bottom: 5px;">ROI Multiplier</div>
                             <div style="font-size: 18px; font-weight: 700; color: #8b5cf6;">5.2×</div>
                         </div>
                     </div>
@@ -2687,8 +2751,8 @@ def create_demo_interface():
                 </div>
                 
                 <!-- Call to action -->
-                <div style="margin-top: 15px; padding-top: 15px; border-top: 1px dashed #e2e8f0; 
-                            text-align: center; font-size: 12px; color: #64748b;">
+                <div style="margin-top: 15px; padding-top: 15px; border-top: 1px dashed var(--color-border, #e2e8f0); 
+                            text-align: center; font-size: 12px; color: var(--color-text-secondary, #64748b);">
                     Ready for production? <a href="#" style="color: #8b5cf6; font-weight: 600; text-decoration: none;">
                     Install ARF Enterprise →</a>
                 </div>
@@ -2852,118 +2916,4 @@ def create_demo_interface():
         
         logger.info("✅ Demo interface created successfully with modern UI integration")
     
-    return demo
-# ===========================================
-# LAUNCH FUNCTION
-# ===========================================
-def launch_demo():
-    """Launch the demo application with proper configuration"""
-    try:
-        logger.info("🚀 Starting ARF Ultimate Investor Demo v3.3.9 - ENTERPRISE EDITION")
-        
-        # Check installation
-        installation = get_installation_status()
-        boundaries = BoundaryManager.get_system_boundaries()
-        
-        logger.info("=" * 60)
-        logger.info("🏗️  SYSTEM ARCHITECTURE BOUNDARIES:")
-        logger.info(f"  OSS: {boundaries['oss']['label']} v{boundaries['oss']['version']}")
-        logger.info(f"  Enterprise: {boundaries['enterprise']['label']} v{boundaries['enterprise']['version']}")
-        logger.info(f"  Mode: {boundaries['demo_mode']['architecture']}")
-        logger.info(f"  Modern UI: {'Enabled' if get_feature_flags().get('modern_ui', False) else 'Disabled'}")
-        logger.info("=" * 60)
-        
-        # Create interface
-        demo = create_demo_interface()
-        
-        # Configure for Hugging Face Spaces
-        launch_config = {
-            "server_name": "0.0.0.0",
-            "server_port": 7860,
-            "share": False,
-            "favicon_path": None,
-            "quiet": False,
-            "show_error": True,
-            "debug": False,
-            "max_threads": 40,
-        }
-        
-        # Add CSS if available
-        css_styles = load_css_files()
-        if css_styles:
-            launch_config["css"] = css_styles
-        
-        logger.info("✅ Launch configuration ready")
-        
-        return demo, launch_config
-        
-    except Exception as e:
-        logger.error(f"❌ Launch failed: {e}", exc_info=True)
-        
-        # Create minimal fallback interface
-        import gradio as gr
-        
-        with gr.Blocks(title="ARF Demo - Fallback Mode") as fallback_demo:
-            gr.HTML(f"""
-                <div style="text-align: center; padding: 50px;">
-                    <h1 style="color: #ef4444;">🚨 ARF Demo Failed to Start</h1>
-                    <p style="color: #64748b; font-size: 16px;">Error: {str(e)}</p>
-                    <div style="margin-top: 30px; padding: 20px; background: #fef2f2; border-radius: 10px; display: inline-block;">
-                        <p style="color: #dc2626; font-weight: bold;">Troubleshooting Steps:</p>
-                        <ol style="text-align: left; color: #475569;">
-                            <li>Check logs for detailed error</li>
-                            <li>Ensure all dependencies are installed</li>
-                            <li>Try: pip install agentic-reliability-framework==3.3.9</li>
-                            <li>Restart the application</li>
-                        </ol>
-                    </div>
-                </div>
-            """)
-        
-        return fallback_demo, {"server_name": "0.0.0.0", "server_port": 7860}
-
-# ===========================================
-# MAIN EXECUTION
-# ===========================================
-if __name__ == "__main__":
-    try:
-        logger.info("🚀 ARF Ultimate Investor Demo v3.3.9 - ENTERPRISE EDITION")
-        logger.info("=" * 60)
-        logger.info("Enhanced with clear OSS vs Enterprise boundaries")
-        logger.info("DOCTRINAL COMPLIANCE: Historical Evidence, Observation Gate, Sequencing")
-        logger.info("PHASE 2: Dynamic Performance Metrics by Scenario")
-        logger.info(f"Modern UI: {'Enabled' if get_feature_flags().get('modern_ui', False) else 'Disabled'}")
-        logger.info(f"True ARF OSS v3.3.9 integration with simulated Enterprise execution")
-        logger.info("=" * 60)
-        
-        # Launch the demo
-        demo, config = launch_demo()
-        
-        print("\n" + "="*60)
-        print("🚀 ARF Ultimate Investor Demo v3.3.9 - ENTERPRISE EDITION")
-        print("📊 Architecture: OSS advises → Enterprise executes")
-        print("🎭 DOCTRINAL: Historical Evidence + Observation Gate + Sequencing")
-        print("🎨 MODERN UI: Design system with responsive components")
-        print("🌐 Starting on http://localhost:7860")
-        print("="*60 + "\n")
-        
-        # Launch with error handling
-        try:
-            demo.launch(**config)
-        except Exception as launch_error:
-            logger.error(f"❌ Launch error: {launch_error}")
-            
-            # Try alternative launch without CSS
-            if "css" in config:
-                logger.info("⚠️ Retrying without CSS...")
-                config.pop("css", None)
-                demo.launch(**config)
-            else:
-                # Last resort: simple launch
-                demo.launch(server_name="0.0.0.0", server_port=7860)
-        
-    except KeyboardInterrupt:
-        logger.info("👋 Demo stopped by user")
-    except Exception as e:
-        logger.error(f"❌ Fatal error: {e}", exc_info=True)
-        sys.exit(1)
+    return demo