Update app.py

app.py

@@ -1,10 +1,11 @@
-# app.py - Complete fixed version with Plotly compatibility
+# app.py - Complete fixed version with Plotly compatibility AND MODERN COMPONENTS
 # 🚀 ARF Ultimate Investor Demo v3.3.9 - ENTERPRISE EDITION
 # Enhanced with clear OSS vs Enterprise boundaries
 # UPDATED: Added realism panel integration for enterprise-seasoned SRE experience
 # UPDATED: Added dynamic performance metrics for Phase 2
 # SURGICAL FIX: Fixed AsyncRunner.async_to_sync contract violation
 # DOCTRINAL FIX: Updated unpacking contract from 24 to 26 values
+# MODERN UI: Integrated modern_components.py for enhanced UI foundation
 
 import logging
 import sys
@@ -33,6 +34,25 @@ logger = logging.getLogger(__name__)
 # Add parent directory to path
 sys.path.insert(0, str(Path(__file__).parent))
 
+# ===========================================
+# MODERN UI FEATURE FLAGS
+# ===========================================
+# Feature flags configuration for safe rollout
+FEATURE_FLAGS = {
+    'modern_ui': True,           # Use modern components
+    'dark_mode': True,           # Enable dark mode toggle
+    'responsive_design': True,   # Use responsive CSS
+    'progressive_disclosure': False,  # Start disabled
+    'keyboard_nav': False,
+    'realtime_updates': False
+}
+
+# Check URL parameters for feature flag overrides (placeholder)
+def get_feature_flags():
+    flags = FEATURE_FLAGS.copy()
+    # TODO: Add URL parameter parsing if needed
+    return flags
+
 # ===========================================
 # FIX FOR ASYNC EVENT LOOP ISSUES
 # ===========================================
@@ -388,7 +408,6 @@ def check_arf_installation():
         }
         logger.info(f"✅ ARF Enterprise v{results['enterprise_version']} detected")
     else:
-        # ✅ ADD THIS MISSING ENTERPRISE ELSE BLOCK:
         results["badges"]["enterprise"] = {
             "text": "🏢 Enterprise Edition",  # Changed from "🔒 Enterprise Required"
             "color": "#3b82f6",              # Changed from "#64748b" (gray to blue)
@@ -420,6 +439,112 @@ import numpy as np
 pio.templates.default = "plotly_white"
 logger.info("✅ Plotly configured for Gradio compatibility")
 
+# ===========================================
+# MODERN UI COMPONENTS IMPORT
+# ===========================================
+# Import modern components with fallback
+try:
+    from ui.modern_components import (
+        initialize_modern_ui,
+        Card, Grid, ObservationGate,
+        SequencingFlow, ProcessDisplay,
+        DESIGN_TOKENS, Button, Badge,
+        ResponsiveUtils, Accessibility, DarkMode,
+        create_example_dashboard
+    )
+    MODERN_UI_AVAILABLE = True
+    logger.info("✅ Modern UI components loaded successfully")
+except ImportError as e:
+    MODERN_UI_AVAILABLE = False
+    logger.warning(f"⚠️ Modern UI components not available: {e}")
+    
+    # Create minimal fallback classes
+    class Card:
+        @staticmethod
+        def create(content, **kwargs):
+            return f"<div class='card'>{content}</div>"
+    
+    class ObservationGate:
+        @staticmethod
+        def create(confidence=65.0, **kwargs):
+            return f"<div>Observation Gate: {confidence}%</div>"
+
+# ===========================================
+# CSS LOADING FUNCTION
+# ===========================================
+def load_css_files():
+    """Load CSS files for modern UI with fallback"""
+    css_content = ""
+    
+    if get_feature_flags().get('modern_ui', False) and MODERN_UI_AVAILABLE:
+        try:
+            # Try to load modern CSS files
+            with open("ui/styles/modern.css", "r") as f:
+                css_content += f.read()
+            logger.info("✅ Loaded modern.css")
+        except FileNotFoundError:
+            # Fallback inline modern CSS
+            css_content += """
+            :root {
+                --color-primary: #3b82f6;
+                --color-success: #10b981;
+                --color-warning: #f59e0b;
+                --color-danger: #ef4444;
+                --bg-primary: #ffffff;
+                --text-primary: #1e293b;
+                --border-color: #e2e8f0;
+            }
+            
+            .container {
+                width: 100%;
+                max-width: 1200px;
+                margin: 0 auto;
+                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; }
+            }
+            """
+        
+        try:
+            with open("ui/styles/responsive.css", "r") as f:
+                css_content += f.read()
+            logger.info("✅ Loaded responsive.css")
+        except FileNotFoundError:
+            # Fallback responsive utilities
+            css_content += """
+            .mobile-only { display: block; }
+            .desktop-only { display: none; }
+            
+            @media (min-width: 768px) {
+                .mobile-only { display: none; }
+                .desktop-only { display: block; }
+            }
+            
+            @media (max-width: 768px) {
+                .grid-2, .grid-4 { grid-template-columns: 1fr !important; }
+            }
+            """
+    else:
+        # Minimal fallback CSS
+        css_content = """
+        :root { --color-primary: #3b82f6; }
+        .container { max-width: 1200px; margin: 0 auto; }
+        """
+    
+    return f"<style>{css_content}</style>"
+
 # ===========================================
 # ENHANCED VISUALIZATION FUNCTIONS WITH GRADIO COMPATIBILITY
 # ===========================================
@@ -1863,74 +1988,99 @@ def update_scenario_display(scenario_name: str) -> tuple:
         "boundary_note": "Scenario not found"
     })
     
-    # Create scenario card HTML (unchanged)
-    severity_colors = {
-        "HIGH": "#ef4444",
-        "MEDIUM": "#f59e0b",
-        "LOW": "#10b981"
-    }
-    severity_color = severity_colors.get(scenario["severity"], "#64748b")
-    
-    impact = scenario["business_impact"].get("revenue_loss_per_hour", get_scenario_impact(scenario_name))
-    
-    scenario_card_html = f"""
-    <div style="border: 1px solid {severity_color}; border-radius: 14px; padding: 20px; 
-                background: linear-gradient(135deg, {severity_color}10 0%, #ffffff 100%);">
-        
-        <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px;">
-            <div>
-                <h3 style="margin: 0 0 8px 0; font-size: 18px; color: #1e293b; font-weight: 700;">
-                    {scenario_name}
-                </h3>
-                <div style="display: flex; align-items: center; gap: 10px;">
-                    <div style="padding: 4px 12px; background: {severity_color}; color: white; 
+    # Create scenario card HTML (MODERN: Use Card component if available)
+    if get_feature_flags().get('modern_ui', False) and MODERN_UI_AVAILABLE:
+        # Use modern Card component
+        scenario_card_html = Card.create(
+            title=scenario_name,
+            content=f"""
+            <div style="margin: 15px 0;">
+                <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;">
+                    <div style="padding: 4px 12px; background: var(--color-primary); color: white; 
                                border-radius: 12px; font-size: 12px; font-weight: bold;">
                         {scenario["severity"]} SEVERITY
                     </div>
-                    <div style="font-size: 13px; color: #64748b;">
+                    <div style="font-size: 13px; color: var(--text-secondary);">
                         {scenario["component"]}
                     </div>
                 </div>
+                
+                <div style="font-size: 14px; color: var(--text-secondary); line-height: 1.5;">
+                    <strong>Boundary Context:</strong> {scenario.get('boundary_note', 'OSS analyzes, Enterprise executes')}
+                </div>
             </div>
+            """,
+            footer=f"Revenue Impact: ${scenario['business_impact'].get('revenue_loss_per_hour', get_scenario_impact(scenario_name)):,}/hour"
+        )
+    else:
+        # Legacy scenario card
+        severity_colors = {
+            "HIGH": "#ef4444",
+            "MEDIUM": "#f59e0b",
+            "LOW": "#10b981"
+        }
+        severity_color = severity_colors.get(scenario["severity"], "#64748b")
+        
+        impact = scenario["business_impact"].get("revenue_loss_per_hour", get_scenario_impact(scenario_name))
+        
+        scenario_card_html = f"""
+        <div style="border: 1px solid {severity_color}; border-radius: 14px; padding: 20px; 
+                    background: linear-gradient(135deg, {severity_color}10 0%, #ffffff 100%);">
             
-            <div style="text-align: right;">
-                <div style="font-size: 28px; font-weight: 700; color: {severity_color};">
-                    ${impact:,}
+            <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px;">
+                <div>
+                    <h3 style="margin: 0 0 8px 0; font-size: 18px; color: #1e293b; font-weight: 700;">
+                        {scenario_name}
+                    </h3>
+                    <div style="display: flex; align-items: center; gap: 10px;">
+                        <div style="padding: 4px 12px; background: {severity_color}; color: white; 
+                                   border-radius: 12px; font-size: 12px; font-weight: bold;">
+                            {scenario["severity"]} SEVERITY
+                        </div>
+                        <div style="font-size: 13px; color: #64748b;">
+                            {scenario["component"]}
+                        </div>
+                    </div>
                 </div>
-                <div style="font-size: 12px; color: #64748b;">
-                    Revenue Loss/Hour
+                
+                <div style="text-align: right;">
+                    <div style="font-size: 28px; font-weight: 700; color: {severity_color};">
+                        ${impact:,}
+                    </div>
+                    <div style="font-size: 12px; color: #64748b;">
+                        Revenue Loss/Hour
+                    </div>
                 </div>
             </div>
-        </div>
-        
-        <!-- Impact breakdown -->
-        <div style="margin-top: 20px; padding-top: 20px; border-top: 1px solid #f1f5f9;">
-            <div style="font-size: 14px; color: #475569; font-weight: 600; margin-bottom: 10px;">
-                Business Impact Analysis
-            </div>
-            <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px;">
-                <div style="text-align: center;">
-                    <div style="font-size: 16px; font-weight: 700; color: {severity_color};">45 min</div>
-                    <div style="font-size: 11px; color: #64748b;">Without ARF</div>
-                </div>
-                <div style="text-align: center;">
-                    <div style="font-size: 16px; font-weight: 700; color: #10b981;">12 min</div>
-                    <div style="font-size: 11px; color: #64748b;">With ARF</div>
+            
+            <!-- Impact breakdown -->
+            <div style="margin-top: 20px; padding-top: 20px; border-top: 1px solid #f1f5f9;">
+                <div style="font-size: 14px; color: #475569; font-weight: 600; margin-bottom: 10px;">
+                    Business Impact Analysis
                 </div>
-                <div style="text-align: center;">
-                    <div style="font-size: 16px; font-weight: 700; color: #10b981;">${int(impact * 0.85):,}</div>
-                    <div style="font-size: 11px; color: #64748b;">Savings</div>
+                <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px;">
+                    <div style="text-align: center;">
+                        <div style="font-size: 16px; font-weight: 700; color: {severity_color};">45 min</div>
+                        <div style="font-size: 11px; color: #64748b;">Without ARF</div>
+                    </div>
+                    <div style="text-align: center;">
+                        <div style="font-size: 16px; font-weight: 700; color: #10b981;">12 min</div>
+                        <div style="font-size: 11px; color: #64748b;">With ARF</div>
+                    </div>
+                    <div style="text-align: center;">
+                        <div style="font-size: 16px; font-weight: 700; color: #10b981;">${int(impact * 0.85):,}</div>
+                        <div style="font-size: 11px; color: #64748b;">Savings</div>
+                    </div>
                 </div>
             </div>
+            
+            <!-- Boundary context -->
+            <div style="margin-top: 20px; padding: 12px; background: #f8fafc; border-radius: 8px;
+                        border-left: 3px solid {severity_color}; font-size: 12px; color: #475569;">
+                <strong>Boundary Context:</strong> {scenario.get('boundary_note', 'OSS analyzes, Enterprise executes')}
+            </div>
         </div>
-        
-        <!-- Boundary context -->
-        <div style="margin-top: 20px; padding: 12px; background: #f8fafc; border-radius: 8px;
-                    border-left: 3px solid {severity_color}; font-size: 12px; color: #475569;">
-            <strong>Boundary Context:</strong> {scenario.get('boundary_note', 'OSS analyzes, Enterprise executes')}
-        </div>
-    </div>
-    """
+        """
     
     # Get visualizations as Plotly figures (ENHANCED)
     telemetry_fig = create_simple_telemetry_plot(scenario_name, settings.use_true_arf)
@@ -2170,10 +2320,10 @@ def calculate_roi(scenario_name, monthly_incidents, team_size):
     return roi_result, fig
 
 # ===========================================
-# CREATE DEMO INTERFACE - UPDATED WITH REALISM PANEL INTEGRATION
+# CREATE DEMO INTERFACE - UPDATED WITH MODERN UI INTEGRATION
 # ===========================================
 def create_demo_interface():
-    """Create demo interface using modular components with boundary awareness and realism panel"""
+    """Create demo interface using modular components with boundary awareness and modern UI"""
     
     import gradio as gr
     
@@ -2181,17 +2331,25 @@ def create_demo_interface():
     components = get_components()
     
     # Get CSS styles
-    css_styles = components["get_styles"]()
+    css_styles = load_css_files()
     
     # Store CSS for later use in launch()
     global _demo_css
     _demo_css = css_styles
     
-    # Create interface without css parameter (will be added in launch)
+    # Create interface with modern UI initialization
     with gr.Blocks(
-        title=f"🚀 ARF Investor Demo v3.3.9 - TRUE ARF OSS Integration"
+        title=f"🚀 ARF Investor Demo v3.3.9 - TRUE ARF OSS Integration",
+        css=css_styles
     ) 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")
+        else:
+            modern_ui_init = gr.HTML("<!-- Modern UI not enabled -->")
+        
         # Header
         header_html = components["create_header"]("3.3.9")
         
@@ -2202,7 +2360,7 @@ def create_demo_interface():
         # ============ 5 TABS ============
         with gr.Tabs(elem_classes="tab-nav"):
             
-            # TAB 1: Live Incident Demo - NOW WITH DOCTRINAL COMPONENTS
+            # TAB 1: Live Incident Demo - NOW WITH MODERN COMPONENTS
             with gr.TabItem("🔥 Live Incident Demo", id="tab1"):
                 # ===== SURGICAL FIX: SAFE UNPACKING WITH ERROR HANDLING =====
                 try:
@@ -2692,7 +2850,7 @@ def create_demo_interface():
             outputs=[roi_output, roi_chart]
         )
         
-        logger.info("✅ Demo interface created successfully with boundary awareness, doctrinal components, and dynamic performance metrics")
+        logger.info("✅ Demo interface created successfully with modern UI integration")
     
     return demo
 # ===========================================
@@ -2712,15 +2870,12 @@ def launch_demo():
         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()
         
-        # Get CSS styles
-        components = get_components()
-        css_styles = components["get_styles"]()
-        
         # Configure for Hugging Face Spaces
         launch_config = {
             "server_name": "0.0.0.0",
@@ -2734,6 +2889,7 @@ def launch_demo():
         }
         
         # Add CSS if available
+        css_styles = load_css_files()
         if css_styles:
             launch_config["css"] = css_styles
         
@@ -2776,6 +2932,7 @@ if __name__ == "__main__":
         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)
         
@@ -2786,6 +2943,7 @@ if __name__ == "__main__":
         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")