Delete ui

ui/enhancements/progressive_disclosure.py

@@ -1,279 +0,0 @@
-"""
-Progressive disclosure components for better UX
-Collapsible sections, tooltips, and conditional displays
-"""
-
-class ProgressiveDisclosure:
-    """Components that reveal information gradually"""
-    
-    @staticmethod
-    def create_collapsible_section(title: str, content: str, initially_open: bool = False, 
-                                  badge_text: str = "", badge_color: str = "#3b82f6"):
-        """Create expandable/collapsible section with optional badge"""
-        section_id = f"section_{hash(title)}"
-        
-        badge_html = ""
-        if badge_text:
-            badge_html = f"""
-            <span style="padding: 3px 10px; background: {badge_color}20; color: {badge_color}; 
-                        border-radius: 12px; font-size: 11px; font-weight: bold; margin-left: 10px;">
-                {badge_text}
-            </span>
-            """
-        
-        return f"""
-        <div class="collapsible-section" style="margin: 1rem 0;">
-            <button 
-                onclick="toggleSection('{section_id}')"
-                class="section-toggle {'open' if initially_open else ''}"
-                aria-expanded="{str(initially_open).lower()}"
-                aria-controls="{section_id}"
-                style="width: 100%; padding: 1rem; background: var(--color-neutral-50); 
-                       border: 1px solid var(--color-border); border-radius: 0.5rem;
-                       text-align: left; font-weight: 600; color: var(--color-text);
-                       cursor: pointer; display: flex; justify-content: space-between; 
-                       align-items: center; transition: background 0.2s;"
-            >
-                <div style="display: flex; align-items: center; gap: 0.5rem;">
-                    <span style="font-size: 1.25rem;">{'▼' if initially_open else '▶'}</span>
-                    <span>{title}</span>
-                    {badge_html}
-                </div>
-            </button>
-            <div 
-                id="{section_id}"
-                class="section-content"
-                style="display: {'block' if initially_open else 'none'}; padding: 1rem; 
-                       background: white; border: 1px solid var(--color-border);
-                       border-top: none; border-radius: 0 0 0.5rem 0.5rem;"
-                aria-hidden="{str(not initially_open).lower()}"
-            >
-                {content}
-            </div>
-        </div>
-        
-        <script>
-        function toggleSection(id) {{
-            const section = document.getElementById(id);
-            const button = section.previousElementSibling;
-            const isExpanded = section.style.display === 'none';
-            
-            // Toggle visibility
-            section.style.display = isExpanded ? 'block' : 'none';
-            section.setAttribute('aria-hidden', !isExpanded);
-            
-            // Update button state
-            button.classList.toggle('open', isExpanded);
-            button.setAttribute('aria-expanded', isExpanded);
-            
-            // Update toggle icon
-            const icon = button.querySelector('span:first-child');
-            icon.textContent = isExpanded ? '▼' : '▶';
-            
-            // Smooth scroll if opening
-            if (isExpanded) {{
-                section.scrollIntoView({{ behavior: 'smooth', block: 'nearest' }});
-            }}
-        }}
-        </script>
-        """
-    
-    @staticmethod
-    def create_tooltip(text: str, tooltip_content: str, position: str = "top"):
-        """Create text with a hover tooltip"""
-        position_classes = {
-            "top": "bottom: 125%; left: 50%; margin-left: -100px;",
-            "bottom": "top: 125%; left: 50%; margin-left: -100px;",
-            "left": "top: 50%; right: 125%; margin-top: -15px;",
-            "right": "top: 50%; left: 125%; margin-top: -15px;"
-        }
-        
-        position_css = position_classes.get(position, position_classes["top"])
-        
-        return f"""
-        <span class="tooltip-container" style="position: relative; display: inline-block;">
-            {text}
-            <span class="tooltip-text" style="
-                visibility: hidden; width: 200px; background: var(--color-neutral-800);
-                color: white; text-align: center; padding: 0.5rem; border-radius: 0.375rem;
-                position: absolute; z-index: 1000; {position_css} opacity: 0;
-                transition: opacity 0.3s; font-size: 0.875rem; font-weight: normal;
-                box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
-            ">
-                {tooltip_content}
-            </span>
-        </span>
-        
-        <style>
-        .tooltip-container:hover .tooltip-text {{
-            visibility: visible;
-            opacity: 1;
-        }}
-        </style>
-        """
-    
-    @staticmethod
-    def create_progressive_form(steps: list):
-        """Create a multi-step form with progressive disclosure"""
-        steps_html = ""
-        for i, step in enumerate(steps):
-            step_id = f"step_{i}"
-            steps_html += f"""
-            <div id="{step_id}" class="form-step" 
-                 style="display: {'block' if i == 0 else 'none'}; margin-bottom: 2rem;">
-                <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem;">
-                    <div style="width: 28px; height: 28px; background: {'var(--color-primary)' if i == 0 else 'var(--color-neutral-300)'}; 
-                              color: white; border-radius: 50%; display: flex; align-items: center; 
-                              justify-content: center; font-weight: bold; font-size: 0.875rem;">
-                        {i + 1}
-                    </div>
-                    <h3 style="margin: 0; font-size: 1.125rem; color: var(--color-text);">
-                        {step['title']}
-                    </h3>
-                </div>
-                <div style="background: var(--color-neutral-50); border-radius: 0.5rem; padding: 1.5rem;">
-                    {step['content']}
-                </div>
-            </div>
-            """
-        
-        # Navigation buttons HTML
-        nav_html = """
-        <div style="display: flex; justify-content: space-between; margin-top: 2rem;">
-            <button onclick="previousStep()" 
-                    style="padding: 0.5rem 1rem; background: var(--color-neutral-100); 
-                           border: 1px solid var(--color-border); border-radius: 0.375rem;
-                           cursor: pointer; font-weight: 500;" id="prevBtn">
-                ← Previous
-            </button>
-            <button onclick="nextStep()" 
-                    style="padding: 0.5rem 1rem; background: var(--color-primary); 
-                           color: white; border: none; border-radius: 0.375rem;
-                           cursor: pointer; font-weight: 500;" id="nextBtn">
-                Next →
-            </button>
-        </div>
-        """
-        
-        # JavaScript for step navigation
-        js = f"""
-        <script>
-        let currentStep = 0;
-        const totalSteps = {len(steps)};
-        
-        function updateButtons() {{
-            document.getElementById('prevBtn').style.display = currentStep === 0 ? 'none' : 'block';
-            document.getElementById('nextBtn').textContent = currentStep === totalSteps - 1 ? 'Finish' : 'Next →';
-        }}
-        
-        function showStep(stepIndex) {{
-            // Hide all steps
-            document.querySelectorAll('.form-step').forEach(step => {{
-                step.style.display = 'none';
-            }});
-            
-            // Show current step
-            document.getElementById('step_' + stepIndex).style.display = 'block';
-            currentStep = stepIndex;
-            updateButtons();
-            
-            // Smooth scroll to step
-            document.getElementById('step_' + stepIndex).scrollIntoView({{
-                behavior: 'smooth',
-                block: 'start'
-            }});
-        }}
-        
-        function nextStep() {{
-            if (currentStep < totalSteps - 1) {{
-                showStep(currentStep + 1);
-            }} else {{
-                // Form completion logic
-                alert('Form completed!');
-            }}
-        }}
-        
-        function previousStep() {{
-            if (currentStep > 0) {{
-                showStep(currentStep - 1);
-            }}
-        }}
-        
-        // Initialize
-        updateButtons();
-        </script>
-        """
-        
-        return f"""
-        <div style="max-width: 800px; margin: 0 auto;">
-            {steps_html}
-            {nav_html}
-            {js}
-        </div>
-        """
-    
-    @staticmethod
-    def create_accordion(items: list, allow_multiple: bool = False):
-        """Create an accordion with multiple collapsible items"""
-        accordion_id = f"accordion_{hash(str(items))}"
-        
-        items_html = ""
-        for i, item in enumerate(items):
-            item_id = f"{accordion_id}_item_{i}"
-            items_html += f"""
-            <div style="border: 1px solid var(--color-border); border-radius: 0.5rem; 
-                       margin-bottom: 0.5rem; overflow: hidden;">
-                <button 
-                    onclick="toggleAccordionItem('{item_id}', {str(allow_multiple).lower()})"
-                    style="width: 100%; padding: 1rem; background: var(--color-neutral-50);
-                           border: none; text-align: left; font-weight: 600; color: var(--color-text);
-                           cursor: pointer; display: flex; justify-content: space-between; 
-                           align-items: center; transition: background 0.2s;"
-                >
-                    <span>{item['title']}</span>
-                    <span style="font-size: 1.25rem; transition: transform 0.2s;" id="{item_id}_icon">
-                        ▼
-                    </span>
-                </button>
-                <div 
-                    id="{item_id}"
-                    style="display: none; padding: 1rem; background: white;"
-                >
-                    {item['content']}
-                </div>
-            </div>
-            """
-        
-        return f"""
-        <div id="{accordion_id}">
-            {items_html}
-        </div>
-        
-        <script>
-        function toggleAccordionItem(itemId, allowMultiple) {{
-            const content = document.getElementById(itemId);
-            const icon = document.getElementById(itemId + '_icon');
-            
-            if (!allowMultiple) {{
-                // Close all other items in this accordion
-                const accordion = document.getElementById('{accordion_id}');
-                accordion.querySelectorAll('div[id^="{accordion_id}_item_"]').forEach(item => {{
-                    if (item.id !== itemId) {{
-                        item.style.display = 'none';
-                        const otherIcon = document.getElementById(item.id + '_icon');
-                        if (otherIcon) otherIcon.textContent = '▼';
-                    }}
-                }});
-            }}
-            
-            // Toggle current item
-            if (content.style.display === 'none') {{
-                content.style.display = 'block';
-                icon.textContent = '▲';
-            }} else {{
-                content.style.display = 'none';
-                icon.textContent = '▼';
-            }}
-        }}
-        </script>
-        """

ui/modern_components.py

@@ -1,1710 +0,0 @@
-"""
-ui/modern_components.py - ENHANCED VERSION
-🚀 Modern UI Components for ARF v3.3.9 with Complete Psychological Integration
-Features:
-1. Design token system with CSS variables
-2. All psychological features (observation gate, sequencing, historical evidence, healing intent)
-3. Accessibility (ARIA labels, keyboard nav)
-4. Performance optimizations
-5. Dark mode support
-6. Integration with arf_modern_ui.py systems
-"""
-
-import json
-from datetime import datetime, timezone
-from typing import Dict, List, Any, Optional, Tuple
-import plotly.graph_objects as go
-import plotly.express as px
-import numpy as np
-
-# ===========================================
-# DESIGN TOKEN SYSTEM - ALIGNED WITH arf_modern_ui.py
-# ===========================================
-DESIGN_TOKENS = {
-    "colors": {
-        "primary": {
-            "50": "#eff6ff",
-            "100": "#dbeafe",
-            "200": "#bfdbfe",
-            "300": "#93c5fd",
-            "400": "#60a5fa",
-            "500": "#3b82f6",      # enterprise_primary
-            "600": "#2563eb",
-            "700": "#1d4ed8",
-            "800": "#1e40af",
-            "900": "#1e3a8a"
-        },
-        "success": {
-            "50": "#f0fdf4",
-            "100": "#dcfce7",
-            "200": "#bbf7d0",
-            "300": "#86efac",
-            "400": "#4ade80",
-            "500": "#22c55e",      # success
-            "600": "#16a34a",
-            "700": "#15803d",
-            "800": "#166534",
-            "900": "#14532d"
-        },
-        "warning": {
-            "50": "#fffbeb",
-            "100": "#fef3c7",
-            "200": "#fde68a",
-            "300": "#fcd34d",
-            "400": "#fbbf24",
-            "500": "#f59e0b",      # warning
-            "600": "#d97706",
-            "700": "#b45309",
-            "800": "#92400e",
-            "900": "#78350f"
-        },
-        "danger": {
-            "50": "#fef2f2",
-            "100": "#fee2e2",
-            "200": "#fecaca",
-            "300": "#fca5a5",
-            "400": "#f87171",
-            "500": "#ef4444",      # danger
-            "600": "#dc2626",
-            "700": "#b91c1c",
-            "800": "#991b1b",
-            "900": "#7f1d1d"
-        },
-        "neutral": {
-            "50": "#f8fafc",
-            "100": "#f1f5f9",
-            "200": "#e2e8f0",
-            "300": "#cbd5e1",
-            "400": "#94a3b8",
-            "500": "#64748b",
-            "600": "#475569",
-            "700": "#334155",
-            "800": "#1e293b",
-            "900": "#0f172a"
-        }
-    },
-    "spacing": {
-        "1": "0.25rem",
-        "2": "0.5rem",
-        "3": "0.75rem",
-        "4": "1rem",
-        "5": "1.25rem",
-        "6": "1.5rem",
-        "8": "2rem",
-        "10": "2.5rem",
-        "12": "3rem",
-        "16": "4rem",
-        "20": "5rem"
-    },
-    "typography": {
-        "fontSizes": {
-            "xs": "0.75rem",
-            "sm": "0.875rem",
-            "base": "1rem",
-            "lg": "1.125rem",
-            "xl": "1.25rem",
-            "2xl": "1.5rem",
-            "3xl": "1.875rem",
-            "4xl": "2.25rem"
-        },
-        "fontWeights": {
-            "light": "300",
-            "normal": "400",
-            "medium": "500",
-            "semibold": "600",
-            "bold": "700",
-            "extrabold": "800"
-        }
-    },
-    "breakpoints": {
-        "sm": "640px",
-        "md": "768px",
-        "lg": "1024px",
-        "xl": "1280px",
-        "2xl": "1536px"
-    },
-    "shadows": {
-        "sm": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
-        "md": "0 4px 6px -1px rgb(0 0 0 / 0.1)",
-        "lg": "0 10px 15px -3px rgb(0 0 0 / 0.1)",
-        "xl": "0 20px 25px -5px rgb(0 0 0 / 0.1)"
-    },
-    "borderRadius": {
-        "sm": "0.25rem",
-        "md": "0.375rem",
-        "lg": "0.5rem",
-        "xl": "0.75rem",
-        "2xl": "1rem",
-        "full": "9999px"
-    }
-}
-
-# ===========================================
-# CSS VARIABLES INJECTION
-# ===========================================
-def inject_design_tokens() -> str:
-    """Inject CSS variables for design tokens into the page"""
-    css_variables = []
-    
-    # Convert design tokens to CSS variables
-    for category, values in DESIGN_TOKENS.items():
-        if isinstance(values, dict):
-            for key, value in values.items():
-                if isinstance(value, dict):
-                    for subkey, subvalue in value.items():
-                        css_variables.append(f"--{category}-{key}-{subkey}: {subvalue};")
-                else:
-                    css_variables.append(f"--{category}-{key}: {value};")
-    
-    return f"""
-    <style id="design-tokens">
-    :root {{
-        {chr(10).join(css_variables)}
-        
-        /* Semantic aliases matching arf_modern_ui.py */
-        --color-enterprise-primary: var(--colors-primary-500);
-        --color-success: var(--colors-success-500);
-        --color-warning: var(--colors-warning-500);
-        --color-danger: var(--colors-danger-500);
-        --color-oss-primary: var(--colors-success-500);
-        --color-surface-light: #ffffff;
-        --color-surface-dark: var(--colors-neutral-800);
-        --color-background-light: var(--colors-neutral-50);
-        --color-background-dark: var(--colors-neutral-900);
-        
-        /* Spacing aliases */
-        --spacing-xs: var(--spacing-2);
-        --spacing-sm: var(--spacing-3);
-        --spacing-md: var(--spacing-4);
-        --spacing-lg: var(--spacing-6);
-        --spacing-xl: var(--spacing-8);
-        
-        /* Font families */
-        --font-sans: system-ui, -apple-system, sans-serif;
-        --font-mono: 'JetBrains Mono', 'SF Mono', Monaco, 'Cascadia Code', monospace;
-        
-        /* Transitions matching arf_modern_ui.py */
-        --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
-        --transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
-        --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
-    }}
-    
-    /* Dark mode overrides */
-    [data-theme="dark"] {{
-        --colors-neutral-50: #0f172a;
-        --colors-neutral-100: #1e293b;
-        --colors-neutral-200: #334155;
-        --colors-neutral-300: #475569;
-        --colors-neutral-400: #64748b;
-        --colors-neutral-500: #94a3b8;
-        --colors-neutral-600: #cbd5e1;
-        --colors-neutral-700: #e2e8f0;
-        --colors-neutral-800: #f1f5f9;
-        --colors-neutral-900: #f8fafc;
-    }}
-    
-    /* Utility classes */
-    .sr-only {{
-        position: absolute;
-        width: 1px;
-        height: 1px;
-        padding: 0;
-        margin: -1px;
-        overflow: hidden;
-        clip: rect(0, 0, 0, 0);
-        white-space: nowrap;
-        border: 0;
-    }}
-    
-    .focus-ring {{
-        outline: 2px solid var(--color-enterprise-primary);
-        outline-offset: 2px;
-    }}
-    
-    .focus-ring:focus:not(:focus-visible) {{
-        outline: none;
-    }}
-    
-    @media (prefers-reduced-motion: reduce) {{
-        *,
-        *::before,
-        *::after {{
-            animation-duration: 0.01ms !important;
-            animation-iteration-count: 1 !important;
-            transition-duration: 0.01ms !important;
-        }}
-    }}
-    </style>
-    """
-
-# ===========================================
-# BASE COMPONENT CLASS
-# ===========================================
-class ModernComponent:
-    """Base class for all modern components with consistent styling"""
-    
-    def __init__(self):
-        self.component_id = f"component_{datetime.now().timestamp()}"
-    
-    @staticmethod
-    def create_container(children: str, **kwargs) -> str:
-        """Create a responsive container"""
-        classes = kwargs.get('classes', '')
-        style = kwargs.get('style', '')
-        
-        return f"""
-        <div class="container {classes}" style="{style}">
-            {children}
-        </div>
-        """
-    
-    @staticmethod
-    def create_section(title: str = "", children: str = "", **kwargs) -> str:
-        """Create a semantic section with optional title"""
-        section_id = kwargs.get('id', '')
-        aria_label = kwargs.get('aria_label', title)
-        
-        title_html = f'<h2 class="section-title">{title}</h2>' if title else ''
-        
-        return f"""
-        <section id="{section_id}" class="section" aria-label="{aria_label}">
-            {title_html}
-            <div class="section-content">
-                {children}
-            </div>
-        </section>
-        """
-
-# ===========================================
-# ATOMIC COMPONENTS
-# ===========================================
-class Card(ModernComponent):
-    """Card component with multiple variants"""
-    
-    @staticmethod
-    def create(content: str, **kwargs) -> str:
-        """Create a card with optional header and footer"""
-        title = kwargs.get('title', '')
-        footer = kwargs.get('footer', '')
-        variant = kwargs.get('variant', 'default')  # default, elevated, outlined, filled
-        border_color = kwargs.get('border_color', 'var(--colors-neutral-200)')
-        
-        variant_classes = {
-            'default': 'card-default',
-            'elevated': 'card-elevated',
-            'outlined': 'card-outlined',
-            'filled': 'card-filled'
-        }
-        
-        header_html = f"""
-        <div class="card-header">
-            <h3 class="card-title">{title}</h3>
-        </div>
-        """ if title else ''
-        
-        footer_html = f"""
-        <div class="card-footer">
-            {footer}
-        </div>
-        """ if footer else ''
-        
-        return f"""
-        <div class="card {variant_classes.get(variant, 'card-default')}" 
-             style="--border-color: {border_color};">
-            {header_html}
-            <div class="card-body">
-                {content}
-            </div>
-            {footer_html}
-        </div>
-        """
-    
-    @staticmethod
-    def create_metric(value: str, label: str, **kwargs) -> str:
-        """Create a metric card for KPIs"""
-        trend = kwargs.get('trend', None)  # 'up', 'down', 'neutral'
-        change = kwargs.get('change', '')
-        
-        trend_icon = {
-            'up': '↗',
-            'down': '↘',
-            'neutral': '→'
-        }.get(trend, '')
-        
-        trend_color = {
-            'up': 'var(--color-success)',
-            'down': 'var(--color-danger)',
-            'neutral': 'var(--colors-neutral-500)'
-        }.get(trend, 'var(--colors-neutral-500)')
-        
-        return f"""
-        <div class="card card-metric" role="status" aria-label="{label}: {value}">
-            <div class="metric-value" aria-live="polite">{value}</div>
-            <div class="metric-label">{label}</div>
-            {f'<div class="metric-trend" style="color: {trend_color};">{trend_icon} {change}</div>' if trend else ''}
-        </div>
-        """
-
-# ===========================================
-# CRITICAL PSYCHOLOGICAL COMPONENTS
-# ===========================================
-class ObservationGate(ModernComponent):
-    """Observation gate component showing system restraint - PSYCHOLOGICAL CORE"""
-    
-    @staticmethod
-    def create(confidence: float = 65.0, **kwargs) -> str:
-        """Create observation gate display with psychological restraint"""
-        reason = kwargs.get('reason', 'uncertainty_too_high_for_action')
-        frozen_until = kwargs.get('frozen_until', '')
-        
-        threshold = 70.0
-        is_blocked = confidence < threshold
-        
-        # Format countdown if available
-        countdown_html = ""
-        if frozen_until:
-            try:
-                frozen_dt = datetime.fromisoformat(frozen_until.replace("Z", "+00:00"))
-                now = datetime.now(timezone.utc)
-                if frozen_dt.tzinfo is None:
-                    frozen_dt = frozen_dt.replace(tzinfo=timezone.utc)
-                time_left = frozen_dt - now
-                minutes_left = max(0, int(time_left.total_seconds() / 60))
-                countdown_html = f"""
-                <div class="countdown">
-                    <div class="countdown-label">Next evaluation:</div>
-                    <div class="countdown-timer">{minutes_left}:00</div>
-                </div>
-                """
-            except:
-                countdown_html = """
-                <div class="countdown">
-                    <div class="countdown-label">Next evaluation:</div>
-                    <div class="countdown-timer">5:00</div>
-                </div>
-                """
-        
-        status_text = "Observation Gate: Awaiting confirmation" if is_blocked else "Observation Gate Cleared"
-        status_color = "var(--color-warning)" if is_blocked else "var(--color-success)"
-        icon = "⏳" if is_blocked else "✅"
-        
-        # Psychological messaging
-        restraint_message = """
-        <div class="psych-message">
-            <h4>Decision Intentionally Deferred</h4>
-            <p>The system has detected uncertainty (<strong>{confidence:.1f}% confidence</strong>) 
-            and has <strong>chosen to observe</strong> rather than act. Historical evidence indicates 
-            premature action increases risk by <strong>47%</strong>, so the system is enforcing an observation-first policy.</p>
-            <p class="psych-note"><em>"What you are seeing is not waiting. It is judgment under uncertainty."</em></p>
-        </div>
-        """ if is_blocked else """
-        <div class="psych-message">
-            <h4>Proceed with Policy Action</h4>
-            <p>Confidence exceeds threshold. System may proceed with sequenced actions.
-            Historical evidence will be consulted before any execution.</p>
-        </div>
-        """
-        
-        return f"""
-        <div class="observation-gate" style="--status-color: {status_color};">
-            <div class="observation-gate-header">
-                <div class="observation-icon">{icon}</div>
-                <div class="observation-title">
-                    <h3>{status_text}</h3>
-                    <p>System restraint engaged</p>
-                </div>
-                <div class="observation-badge">
-                    ACTIVE RESTRAINT
-                </div>
-            </div>
-            
-            <div class="observation-content">
-                {restraint_message}
-                
-                <div class="confidence-comparison">
-                    <div class="confidence-item">
-                        <div class="confidence-label">Confidence Threshold</div>
-                        <div class="confidence-value">{threshold}%</div>
-                        <div class="confidence-note">Required for action</div>
-                    </div>
-                    
-                    <div class="confidence-item">
-                        <div class="confidence-label">Current Confidence</div>
-                        <div class="confidence-value" style="color: {status_color};">{confidence:.1f}%</div>
-                        <div class="confidence-note">{"Below threshold → Observe" if is_blocked else "Above threshold → Proceed"}</div>
-                    </div>
-                </div>
-                
-                <div class="confidence-visualization">
-                    <div class="confidence-scale">
-                        <div class="scale-marker" style="left: {confidence}%;"></div>
-                        <div class="scale-bar" style="width: {confidence}%; background: {status_color};"></div>
-                    </div>
-                    <div class="scale-labels">
-                        <span>{"Observe" if is_blocked else "Ready"} ({confidence:.1f}%)</span>
-                        <span>Threshold ({threshold}%)</span>
-                        <span>{"Act" if is_blocked else "Proceed"} (75%+)</span>
-                    </div>
-                </div>
-                
-                {countdown_html}
-                
-                <div class="prevented-actions">
-                    <h5>Prevented Actions (Contraindicated)</h5>
-                    <div class="action-tags">
-                        <span class="action-tag">scale_during_retry_storm</span>
-                        <span class="action-tag">add_capacity_during_amplification</span>
-                        <span class="action-tag">any_action_during_high_uncertainty</span>
-                    </div>
-                </div>
-            </div>
-        </div>
-        """
-
-class SequencingFlow(ModernComponent):
-    """Visualization of policy-enforced sequencing - PSYCHOLOGICAL CORE"""
-    
-    @staticmethod
-    def create(steps: List[Dict[str, Any]] = None, **kwargs) -> str:
-        """Create sequencing flow visualization"""
-        if steps is None:
-            steps = [
-                {"title": "Dampening", "description": "Prevent amplification first", "badge": "REQUIRED"},
-                {"title": "Concurrency", "description": "Manage load, then observe", "badge": "REQUIRED"},
-                {"title": "Observe", "description": "Validate trends for 5+ minutes", "badge": "REQUIRED"},
-                {"title": "Scale", "description": "Only if all previous succeed", "badge": "OPTIONAL"}
-            ]
-        
-        current_step = kwargs.get('current_step', 0)
-        
-        steps_html = []
-        for i, step in enumerate(steps):
-            is_current = i == current_step
-            is_completed = i < current_step
-            is_future = i > current_step
-            
-            status_class = 'completed' if is_completed else 'current' if is_current else 'future'
-            
-            steps_html.append(f"""
-            <div class="sequencing-step {status_class}" data-step="{i}">
-                <div class="step-number">{i + 1}</div>
-                <div class="step-content">
-                    <div class="step-title">{step.get('title', 'Step')}</div>
-                    <div class="step-description">{step.get('description', '')}</div>
-                    <div class="step-badge">{step.get('badge', 'REQUIRED')}</div>
-                </div>
-            </div>
-            """)
-        
-        # Add connecting lines
-        connectors_html = '<div class="step-connectors">'
-        for i in range(len(steps) - 1):
-            is_completed = i < current_step
-            connector_class = 'completed' if is_completed else ''
-            connectors_html += f'<div class="step-connector {connector_class}"></div>'
-        connectors_html += '</div>'
-        
-        return f"""
-        <div class="sequencing-flow">
-            <div class="sequencing-header">
-                <h3>🔄 Doctrinal Sequencing: Policy Over Reaction</h3>
-                <p>System enforces sequencing regardless of prediction confidence</p>
-                <div class="policy-badge">POLICY ENFORCED</div>
-            </div>
-            
-            <div class="sequencing-steps">
-                {connectors_html}
-                {''.join(steps_html)}
-            </div>
-            
-            <div class="sequencing-constraint">
-                <div class="constraint-icon">🎯</div>
-                <div class="constraint-content">
-                    <h4>Doctrinal Constraint: Scaling Cannot Appear First</h4>
-                    <p>If retry amplification is detected, scaling is <strong>contraindicated entirely</strong>.
-                    The system must observe stabilization before considering capacity increases.
-                    Historical evidence shows scaling-first fails <strong>76%</strong> of the time during amplification.</p>
-                    <p class="psych-note"><em>"What happened is more important than what might happen."</em></p>
-                </div>
-            </div>
-        </div>
-        """
-
-class ProcessDisplay(ModernComponent):
-    """Display for ARF processes (Detection, Recall, Decision) - PSYCHOLOGICAL CORE"""
-    
-    @staticmethod
-    def create(process_type: str, data: Dict[str, Any]) -> str:
-        """Create process display card"""
-        icons = {
-            'detection': '🕵️‍♂️',
-            'recall': '🧠',
-            'decision': '🎯',
-            'safety': '🛡️',
-            'execution': '⚡',
-            'learning': '📚'
-        }
-        
-        status_colors = {
-            'active': 'var(--color-success)',
-            'inactive': 'var(--colors-neutral-400)',
-            'error': 'var(--color-danger)'
-        }
-        
-        icon = icons.get(process_type, '📊')
-        status = data.get('status', 'inactive')
-        title = data.get('title', process_type.title())
-        description = data.get('description', '')
-        
-        # Metrics display
-        metrics_html = ""
-        if 'metrics' in data:
-            metrics = data['metrics']
-            metrics_html = '<div class="process-metrics">'
-            for key, value in metrics.items():
-                metrics_html += f"""
-                <div class="process-metric">
-                    <div class="metric-key">{key}</div>
-                    <div class="metric-value">{value}</div>
-                </div>
-                """
-            metrics_html += '</div>'
-        
-        # Next step
-        next_step_html = ""
-        if 'next_step' in data:
-            next_step_html = f"""
-            <div class="process-next-step">
-                <div class="next-step-label">Next Step:</div>
-                <div class="next-step-value">{data['next_step']}</div>
-            </div>
-            """
-        
-        # Content with psychological emphasis
-        content_html = data.get('content', '')
-        if process_type == 'recall' and 'historical_evidence' in data:
-            content_html += f"""
-            <div class="psych-emphasis">
-                <div class="emphasis-icon">🧠</div>
-                <div class="emphasis-content">
-                    <strong>Recall Dominance:</strong> Historical evidence outweighs predictive confidence.
-                    The system prioritizes what <em>has happened</em> over what <em>might happen</em>.
-                </div>
-            </div>
-            """
-        
-        return f"""
-        <div class="process-card" data-process="{process_type}" data-status="{status}">
-            <div class="process-header">
-                <div class="process-icon">{icon}</div>
-                <div class="process-title">
-                    <h4>{title}</h4>
-                    <p>{description}</p>
-                </div>
-                <div class="process-status" style="--status-color: {status_colors.get(status, 'var(--colors-neutral-400)')};">
-                    STATUS: {status.upper()}
-                </div>
-            </div>
-            
-            <div class="process-body">
-                {metrics_html}
-                {content_html}
-                {next_step_html}
-            </div>
-        </div>
-        """
-
-class HistoricalEvidencePanel(ModernComponent):
-    """Historical evidence panel - PSYCHOLOGICAL CORE (Recall Dominance)"""
-    
-    @staticmethod
-    def create(evidence_data: Dict[str, Any] = None, **kwargs) -> str:
-        """Create historical evidence panel showing recall dominance"""
-        if evidence_data is None:
-            evidence_data = {
-                "scaling_failures": [
-                    {
-                        "date": "2024-11-15",
-                        "environment": "prod-east",
-                        "action": "Scale during retry storm",
-                        "outcome": "Amplification increased 300%",
-                        "lesson": "Scaling during amplification worsens the problem"
-                    },
-                    {
-                        "date": "2024-09-22", 
-                        "environment": "staging",
-                        "action": "Add capacity without dampening",
-                        "outcome": "45 min outage, $8.2K loss",
-                        "lesson": "New capacity consumed by amplification loop"
-                    }
-                ],
-                "dampening_successes": [
-                    {
-                        "date": "2024-12-03",
-                        "environment": "prod-west",
-                        "action": "Request coalescing + backoff",
-                        "outcome": "Resolved in 8 min, $5.1K saved",
-                        "lesson": "Dampening broke amplification cycle"
-                    },
-                    {
-                        "date": "2024-10-17",
-                        "environment": "prod-eu",
-                        "action": "Circuit breaker + observability",
-                        "outcome": "12 min recovery, 0 user impact",
-                        "lesson": "Sequencing prevented escalation"
-                    }
-                ]
-            }
-        
-        # Build failures HTML
-        failures_html = ""
-        for i, failure in enumerate(evidence_data.get('scaling_failures', [])[:3]):
-            failures_html += f"""
-            <div class="evidence-item evidence-failure">
-                <div class="evidence-header">
-                    <div class="evidence-date">{failure.get('date', 'Unknown')} • {failure.get('environment', 'Unknown')}</div>
-                    <div class="evidence-badge failure">FAILED</div>
-                </div>
-                <div class="evidence-content">
-                    <div class="evidence-action"><strong>Action:</strong> {failure.get('action', 'Unknown')}</div>
-                    <div class="evidence-outcome"><strong>Outcome:</strong> {failure.get('outcome', 'Unknown')}</div>
-                    <div class="evidence-lesson">"{failure.get('lesson', 'No lesson captured')}"</div>
-                </div>
-            </div>
-            """
-        
-        # Build successes HTML
-        successes_html = ""
-        for i, success in enumerate(evidence_data.get('dampening_successes', [])[:3]):
-            successes_html += f"""
-            <div class="evidence-item evidence-success">
-                <div class="evidence-header">
-                    <div class="evidence-date">{success.get('date', 'Unknown')} • {success.get('environment', 'Unknown')}</div>
-                    <div class="evidence-badge success">SUCCESS</div>
-                </div>
-                <div class="evidence-content">
-                    <div class="evidence-action"><strong>Action:</strong> {success.get('action', 'Unknown')}</div>
-                    <div class="evidence-outcome"><strong>Outcome:</strong> {success.get('outcome', 'Unknown')}</div>
-                    <div class="evidence-lesson">"{success.get('lesson', 'No lesson captured')}"</div>
-                </div>
-            </div>
-            """
-        
-        return f"""
-        <div class="historical-evidence-panel">
-            <div class="evidence-header-main">
-                <div>
-                    <h3>🧠 Historical Evidence (Why Sequencing Matters)</h3>
-                    <p>Real outcomes from similar incidents—this evidence dominates decision logic</p>
-                </div>
-                <div class="evidence-dominance-badge">
-                    Historical evidence outweighs model confidence
-                </div>
-            </div>
-            
-            <div class="evidence-comparison">
-                <div class="evidence-column">
-                    <div class="column-header failure">
-                        <span>⛔</span> Scaling-First Failures
-                    </div>
-                    {failures_html if failures_html else '''
-                    <div class="evidence-empty">
-                        <div class="empty-icon">📊</div>
-                        <div class="empty-text">Scaling-First Failures (Evidence Present)</div>
-                    </div>
-                    '''}
-                </div>
-                
-                <div class="evidence-column">
-                    <div class="column-header success">
-                        <span>✅</span> Dampening-First Successes
-                    </div>
-                    {successes_html if successes_html else '''
-                    <div class="evidence-empty">
-                        <div class="empty-icon">📊</div>
-                        <div class="empty-text">Dampening-First Successes (Evidence Present)</div>
-                    </div>
-                    '''}
-                </div>
-            </div>
-            
-            <div class="psych-principle">
-                <div class="principle-icon">🎯</div>
-                <div class="principle-content">
-                    <h4>If history shows failure, the system will not repeat it.</h4>
-                    <p>The system prioritizes <strong>historical evidence over predictive confidence</strong>. 
-                    If scaling-first failed in similar conditions, scaling is contraindicated regardless of model confidence.</p>
-                    <p class="psych-note"><em>"What happened is more important than what might happen."</em></p>
-                </div>
-            </div>
-        </div>
-        """
-
-class HealingIntentDisplay(ModernComponent):
-    """Formal HealingIntent display - PSYCHOLOGICAL CORE"""
-    
-    @staticmethod
-    def create(healing_intent: Dict[str, Any], **kwargs) -> str:
-        """Create formal HealingIntent display with all fields"""
-        confidence = healing_intent.get('confidence', 0.0)
-        primary_action = healing_intent.get('primary_action', '')
-        sequencing_rule = healing_intent.get('sequencing_rule', '')
-        preconditions = healing_intent.get('preconditions', [])
-        contraindications = healing_intent.get('contraindications', [])
-        reversibility = healing_intent.get('reversibility_statement', '')
-        historical_evidence = healing_intent.get('historical_evidence', [])
-        
-        # Preconditions HTML
-        preconditions_html = ""
-        if preconditions:
-            preconditions_html = "<div class='preconditions-list'>"
-            for pre in preconditions:
-                preconditions_html += f"<div class='precondition-item'>• {pre}</div>"
-            preconditions_html += "</div>"
-        
-        # Contraindications HTML
-        contraindications_html = ""
-        if contraindications:
-            contraindications_html = "<div class='contraindications-list'>"
-            for contra in contraindications:
-                contraindications_html += f"<div class='contraindication-item'>⛔ {contra}</div>"
-            contraindications_html += "</div>"
-        
-        # Historical evidence HTML
-        historical_html = ""
-        if historical_evidence:
-            historical_html = "<div class='historical-list'>"
-            for evidence in historical_evidence:
-                historical_html += f"<div class='historical-item'>📊 {evidence}</div>"
-            historical_html += "</div>"
-        
-        return f"""
-        <div class="healing-intent-display">
-            <div class="intent-header">
-                <div>
-                    <h3>📝 Formal HealingIntent Created</h3>
-                    <p>Preconditions checked, contraindications listed, reversibility guaranteed</p>
-                </div>
-                <div class="confidence-badge" style="--confidence-color: {'' if confidence >= 70 else 'var(--color-warning)'};">
-                    CONFIDENCE: {confidence:.1f}%
-                </div>
-            </div>
-            
-            <div class="intent-grid">
-                <div class="intent-section">
-                    <div class="section-title">Primary Action</div>
-                    <div class="section-content primary-action">
-                        {primary_action}
-                    </div>
-                </div>
-                
-                <div class="intent-section">
-                    <div class="section-title">Sequencing Rule</div>
-                    <div class="section-content sequencing-rule">
-                        {sequencing_rule}
-                    </div>
-                </div>
-            </div>
-            
-            <div class="intent-details">
-                <div class="detail-section">
-                    <div class="detail-title">Preconditions</div>
-                    <div class="detail-content">
-                        {preconditions_html if preconditions_html else '<div class="empty-detail">No preconditions specified</div>'}
-                    </div>
-                </div>
-                
-                <div class="detail-section">
-                    <div class="detail-title">Contraindications</div>
-                    <div class="detail-content">
-                        {contraindications_html if contraindications_html else '<div class="empty-detail">No contraindications</div>'}
-                    </div>
-                </div>
-                
-                <div class="detail-section">
-                    <div class="detail-title">Reversibility Statement</div>
-                    <div class="detail-content reversibility">
-                        {reversibility if reversibility else '<div class="empty-detail">No reversibility statement</div>'}
-                    </div>
-                </div>
-            </div>
-            
-            {historical_html if historical_html else ''}
-            
-            <div class="psych-doctrine">
-                <div class="doctrine-icon">⚖️</div>
-                <div class="doctrine-content">
-                    <h4>Doctrinal Principle: Formal Documentation Prevents Mistakes</h4>
-                    <p>Every HealingIntent must document preconditions, contraindications, and reversibility.
-                    This formal structure ensures decisions are reviewable, reversible, and grounded in evidence.</p>
-                </div>
-            </div>
-        </div>
-        """
-
-# ===========================================
-# COMPONENT STYLES (CSS) - ENHANCED
-# ===========================================
-def create_component_styles() -> str:
-    """Create all component styles with psychological enhancements"""
-    return """
-    <style>
-    /* Base styles */
-    body, .gr-box, .gr-form, .gr-panel, .gr-tab, .gr-container {
-        background-color: var(--color-background-light) !important;
-        color: var(--colors-neutral-900) !important;
-        font-family: var(--font-sans);
-    }
-    
-    [data-theme="dark"] body,
-    [data-theme="dark"] .gr-box,
-    [data-theme="dark"] .gr-form,
-    [data-theme="dark"] .gr-panel,
-    [data-theme="dark"] .gr-tab,
-    [data-theme="dark"] .gr-container {
-        background-color: var(--color-background-dark) !important;
-        color: var(--colors-neutral-100) !important;
-    }
-    
-    /* Card styles */
-    .card {
-        background: var(--color-surface-light);
-        border-radius: var(--borderRadius-lg);
-        padding: var(--spacing-6);
-        border: 1px solid var(--border-color, var(--colors-neutral-200));
-        transition: box-shadow var(--transition-normal);
-        color: var(--colors-neutral-900);
-    }
-    
-    [data-theme="dark"] .card {
-        background: var(--color-surface-dark);
-        border-color: var(--colors-neutral-700);
-        color: var(--colors-neutral-100);
-    }
-    
-    .card:hover {
-        box-shadow: var(--shadows-md);
-    }
-    
-    /* Observation gate styles */
-    .observation-gate {
-        border: 3px solid var(--status-color, var(--color-warning));
-        border-radius: var(--borderRadius-xl);
-        padding: var(--spacing-6);
-        background: linear-gradient(135deg, 
-            color-mix(in srgb, var(--status-color, var(--color-warning)) 5%, transparent), 
-            color-mix(in srgb, var(--status-color, var(--color-warning)) 10%, transparent));
-        margin: var(--spacing-6) 0;
-        color: var(--colors-neutral-900);
-    }
-    
-    [data-theme="dark"] .observation-gate {
-        color: var(--colors-neutral-100);
-    }
-    
-    .observation-gate-header {
-        display: flex;
-        align-items: center;
-        gap: var(--spacing-4);
-        margin-bottom: var(--spacing-4);
-    }
-    
-    .observation-icon {
-        font-size: 48px;
-        color: var(--status-color, var(--color-warning));
-    }
-    
-    .observation-title h3 {
-        margin: 0;
-        color: color-mix(in srgb, var(--status-color, var(--color-warning)) 90%, var(--colors-neutral-900));
-        font-size: var(--typography-fontSizes-2xl);
-        font-weight: var(--typography-fontWeights-bold);
-    }
-    
-    .observation-title p {
-        margin: var(--spacing-1) 0 0 0;
-        color: color-mix(in srgb, var(--status-color, var(--color-warning)) 70%, var(--colors-neutral-700));
-    }
-    
-    .observation-badge {
-        margin-left: auto;
-        padding: var(--spacing-2) var(--spacing-4);
-        background: var(--status-color, var(--color-warning));
-        color: white;
-        border-radius: var(--borderRadius-full);
-        font-size: var(--typography-fontSizes-xs);
-        font-weight: var(--typography-fontWeights-bold);
-        text-transform: uppercase;
-        letter-spacing: 1px;
-    }
-    
-    .psych-message {
-        background: white;
-        border: 2px solid var(--status-color, var(--color-warning));
-        padding: var(--spacing-4);
-        margin: var(--spacing-4) 0;
-        border-radius: var(--borderRadius-lg);
-    }
-    
-    [data-theme="dark"] .psych-message {
-        background: var(--colors-neutral-800);
-    }
-    
-    .psych-message h4 {
-        margin: 0 0 var(--spacing-2) 0;
-        color: var(--colors-neutral-900);
-        font-size: var(--typography-fontSizes-lg);
-    }
-    
-    .psych-message p {
-        margin: var(--spacing-2) 0;
-        color: var(--colors-neutral-700);
-        line-height: 1.6;
-    }
-    
-    .psych-note {
-        font-style: italic;
-        color: var(--colors-neutral-600);
-        margin-top: var(--spacing-2);
-        border-left: 3px solid var(--status-color, var(--color-warning));
-        padding-left: var(--spacing-3);
-    }
-    
-    .confidence-comparison {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: var(--spacing-4);
-        margin: var(--spacing-4) 0;
-    }
-    
-    .confidence-item {
-        background: var(--color-surface-light);
-        border-radius: var(--borderRadius-lg);
-        padding: var(--spacing-4);
-        text-align: center;
-        border: 1px solid var(--colors-neutral-200);
-    }
-    
-    [data-theme="dark"] .confidence-item {
-        background: var(--colors-neutral-800);
-        border-color: var(--colors-neutral-700);
-    }
-    
-    .confidence-label {
-        font-size: var(--typography-fontSizes-sm);
-        color: var(--colors-neutral-600);
-        text-transform: uppercase;
-        letter-spacing: 0.05em;
-        margin-bottom: var(--spacing-2);
-    }
-    
-    .confidence-value {
-        font-size: var(--typography-fontSizes-3xl);
-        font-weight: var(--typography-fontWeights-bold);
-        margin-bottom: var(--spacing-1);
-    }
-    
-    .confidence-note {
-        font-size: var(--typography-fontSizes-xs);
-        color: var(--colors-neutral-500);
-    }
-    
-    .confidence-visualization {
-        margin: var(--spacing-6) 0;
-    }
-    
-    .confidence-scale {
-        height: 8px;
-        background: var(--colors-neutral-200);
-        border-radius: var(--borderRadius-full);
-        position: relative;
-        margin: var(--spacing-4) 0 var(--spacing-2);
-    }
-    
-    .scale-bar {
-        height: 100%;
-        border-radius: var(--borderRadius-full);
-        transition: width var(--transition-normal);
-    }
-    
-    .scale-marker {
-        position: absolute;
-        top: -4px;
-        width: 16px;
-        height: 16px;
-        background: white;
-        border: 2px solid var(--colors-neutral-900);
-        border-radius: 50%;
-        transform: translateX(-50%);
-    }
-    
-    .scale-labels {
-        display: flex;
-        justify-content: space-between;
-        font-size: var(--typography-fontSizes-xs);
-        color: var(--colors-neutral-600);
-    }
-    
-    .prevented-actions {
-        margin-top: var(--spacing-6);
-        padding-top: var(--spacing-4);
-        border-top: 2px solid var(--colors-neutral-200);
-    }
-    
-    .prevented-actions h5 {
-        margin: 0 0 var(--spacing-3) 0;
-        color: var(--colors-neutral-700);
-        font-size: var(--typography-fontSizes-sm);
-        text-transform: uppercase;
-        letter-spacing: 0.05em;
-    }
-    
-    .action-tags {
-        display: flex;
-        flex-wrap: wrap;
-        gap: var(--spacing-2);
-    }
-    
-    .action-tag {
-        padding: var(--spacing-1) var(--spacing-3);
-        background: var(--color-danger);
-        color: white;
-        border-radius: var(--borderRadius-full);
-        font-size: var(--typography-fontSizes-xs);
-        font-weight: var(--typography-fontWeights-medium);
-    }
-    
-    /* Sequencing flow styles */
-    .sequencing-flow {
-        background: var(--color-surface-light);
-        border: 2px solid var(--color-enterprise-primary);
-        border-radius: var(--borderRadius-xl);
-        padding: var(--spacing-6);
-        margin: var(--spacing-6) 0;
-    }
-    
-    [data-theme="dark"] .sequencing-flow {
-        background: var(--colors-neutral-800);
-    }
-    
-    .sequencing-header {
-        margin-bottom: var(--spacing-6);
-        text-align: center;
-    }
-    
-    .sequencing-header h3 {
-        margin: 0 0 var(--spacing-2) 0;
-        color: var(--colors-neutral-900);
-        font-size: var(--typography-fontSizes-xl);
-    }
-    
-    .sequencing-header p {
-        margin: 0;
-        color: var(--colors-neutral-600);
-    }
-    
-    .policy-badge {
-        display: inline-block;
-        margin-top: var(--spacing-3);
-        padding: var(--spacing-2) var(--spacing-4);
-        background: var(--color-enterprise-primary);
-        color: white;
-        border-radius: var(--borderRadius-full);
-        font-size: var(--typography-fontSizes-xs);
-        font-weight: var(--typography-fontWeights-bold);
-        text-transform: uppercase;
-        letter-spacing: 1px;
-    }
-    
-    .sequencing-steps {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        position: relative;
-        margin: var(--spacing-8) 0;
-    }
-    
-    .step-connectors {
-        position: absolute;
-        top: 30px;
-        left: 60px;
-        right: 60px;
-        display: flex;
-        justify-content: space-between;
-        z-index: 1;
-    }
-    
-    .step-connector {
-        flex: 1;
-        height: 3px;
-        background: var(--colors-neutral-300);
-        margin: 0 var(--spacing-2);
-    }
-    
-    .step-connector.completed {
-        background: linear-gradient(90deg, var(--color-enterprise-primary), var(--color-success));
-    }
-    
-    .sequencing-step {
-        text-align: center;
-        position: relative;
-        z-index: 2;
-        flex: 1;
-    }
-    
-    .step-number {
-        width: 60px;
-        height: 60px;
-        background: var(--colors-neutral-100);
-        color: var(--colors-neutral-700);
-        border-radius: 50%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin: 0 auto var(--spacing-3);
-        font-size: var(--typography-fontSizes-xl);
-        font-weight: var(--typography-fontWeights-bold);
-        border: 4px solid white;
-        transition: all var(--transition-normal);
-    }
-    
-    .sequencing-step.current .step-number {
-        background: var(--color-enterprise-primary);
-        color: white;
-        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
-    }
-    
-    .sequencing-step.completed .step-number {
-        background: var(--color-success);
-        color: white;
-    }
-    
-    .step-title {
-        font-size: var(--typography-fontSizes-base);
-        font-weight: var(--typography-fontWeights-bold);
-        color: var(--colors-neutral-900);
-        margin-bottom: var(--spacing-1);
-    }
-    
-    .step-description {
-        font-size: var(--typography-fontSizes-sm);
-        color: var(--colors-neutral-600);
-        margin-bottom: var(--spacing-2);
-        max-width: 180px;
-        margin: 0 auto;
-    }
-    
-    .step-badge {
-        display: inline-block;
-        padding: var(--spacing-1) var(--spacing-3);
-        background: var(--colors-neutral-100);
-        color: var(--colors-neutral-700);
-        border-radius: var(--borderRadius-full);
-        font-size: var(--typography-fontSizes-xs);
-        font-weight: var(--typography-fontWeights-bold);
-        margin-top: var(--spacing-2);
-    }
-    
-    .sequencing-step.current .step-badge {
-        background: var(--color-enterprise-primary);
-        color: white;
-    }
-    
-    .sequencing-constraint {
-        background: var(--colors-neutral-50);
-        border-radius: var(--borderRadius-lg);
-        padding: var(--spacing-4);
-        border-left: 4px solid var(--color-enterprise-primary);
-        margin-top: var(--spacing-6);
-    }
-    
-    [data-theme="dark"] .sequencing-constraint {
-        background: var(--colors-neutral-800);
-    }
-    
-    .constraint-icon {
-        font-size: 24px;
-        color: var(--color-enterprise-primary);
-        margin-bottom: var(--spacing-2);
-    }
-    
-    .constraint-content h4 {
-        margin: 0 0 var(--spacing-2) 0;
-        color: var(--colors-neutral-900);
-        font-size: var(--typography-fontSizes-lg);
-    }
-    
-    .constraint-content p {
-        margin: 0;
-        color: var(--colors-neutral-700);
-        line-height: 1.6;
-    }
-    
-    /* Historical evidence panel styles */
-    .historical-evidence-panel {
-        border: 3px solid var(--color-enterprise-primary);
-        border-radius: var(--borderRadius-xl);
-        padding: var(--spacing-6);
-        margin: var(--spacing-6) 0;
-        background: var(--color-surface-light);
-    }
-    
-    [data-theme="dark"] .historical-evidence-panel {
-        background: var(--colors-neutral-800);
-    }
-    
-    .evidence-header-main {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: var(--spacing-6);
-    }
-    
-    .evidence-header-main h3 {
-        margin: 0 0 var(--spacing-2) 0;
-        color: var(--colors-neutral-900);
-        font-size: var(--typography-fontSizes-xl);
-    }
-    
-    .evidence-header-main p {
-        margin: 0;
-        color: var(--colors-neutral-600);
-    }
-    
-    .evidence-dominance-badge {
-        padding: var(--spacing-2) var(--spacing-4);
-        background: var(--color-enterprise-primary);
-        color: white;
-        border-radius: var(--borderRadius-full);
-        font-size: var(--typography-fontSizes-xs);
-        font-weight: var(--typography-fontWeights-bold);
-    }
-    
-    .evidence-comparison {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: var(--spacing-6);
-        margin-bottom: var(--spacing-6);
-    }
-    
-    .evidence-column {
-        display: flex;
-        flex-direction: column;
-        gap: var(--spacing-4);
-    }
-    
-    .column-header {
-        font-size: var(--typography-fontSizes-lg);
-        font-weight: var(--typography-fontWeights-bold);
-        margin-bottom: var(--spacing-2);
-        display: flex;
-        align-items: center;
-        gap: var(--spacing-2);
-    }
-    
-    .column-header.failure {
-        color: var(--color-danger);
-    }
-    
-    .column-header.success {
-        color: var(--color-success);
-    }
-    
-    .evidence-item {
-        border-left: 4px solid;
-        padding-left: var(--spacing-4);
-        margin-bottom: var(--spacing-3);
-    }
-    
-    .evidence-failure {
-        border-left-color: var(--color-danger);
-    }
-    
-    .evidence-success {
-        border-left-color: var(--color-success);
-    }
-    
-    .evidence-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: flex-start;
-        margin-bottom: var(--spacing-2);
-    }
-    
-    .evidence-date {
-        font-size: var(--typography-fontSizes-sm);
-        font-weight: var(--typography-fontWeights-semibold);
-        color: var(--colors-neutral-900);
-    }
-    
-    .evidence-badge {
-        padding: 2px 8px;
-        border-radius: var(--borderRadius-full);
-        font-size: var(--typography-fontSizes-xs);
-        font-weight: var(--typography-fontWeights-bold);
-    }
-    
-    .evidence-badge.failure {
-        background: var(--color-danger);
-        color: white;
-    }
-    
-    .evidence-badge.success {
-        background: var(--color-success);
-        color: white;
-    }
-    
-    .evidence-content {
-        font-size: var(--typography-fontSizes-sm);
-    }
-    
-    .evidence-action {
-        color: var(--colors-neutral-700);
-        margin-bottom: var(--spacing-1);
-    }
-    
-    .evidence-outcome {
-        color: var(--colors-neutral-600);
-        margin-bottom: var(--spacing-2);
-        font-weight: var(--typography-fontWeights-medium);
-    }
-    
-    .evidence-failure .evidence-outcome {
-        color: var(--color-danger);
-    }
-    
-    .evidence-success .evidence-outcome {
-        color: var(--color-success);
-    }
-    
-    .evidence-lesson {
-        font-style: italic;
-        color: var(--colors-neutral-500);
-        background: var(--colors-neutral-50);
-        padding: var(--spacing-2);
-        border-radius: var(--borderRadius-md);
-        font-size: var(--typography-fontSizes-xs);
-    }
-    
-    [data-theme="dark"] .evidence-lesson {
-        background: var(--colors-neutral-700);
-    }
-    
-    .psych-principle {
-        background: linear-gradient(135deg, var(--colors-primary-50), var(--colors-neutral-50));
-        border-radius: var(--borderRadius-lg);
-        padding: var(--spacing-4);
-        border: 2px solid var(--colors-primary-300);
-        margin-top: var(--spacing-6);
-    }
-    
-    [data-theme="dark"] .psych-principle {
-        background: linear-gradient(135deg, var(--colors-primary-900), var(--colors-neutral-800));
-        border-color: var(--colors-primary-700);
-    }
-    
-    .principle-icon {
-        font-size: 28px;
-        color: var(--color-enterprise-primary);
-        margin-bottom: var(--spacing-2);
-    }
-    
-    .principle-content h4 {
-        margin: 0 0 var(--spacing-2) 0;
-        color: var(--colors-neutral-900);
-        font-size: var(--typography-fontSizes-lg);
-    }
-    
-    .principle-content p {
-        margin: 0;
-        color: var(--colors-neutral-700);
-        line-height: 1.6;
-    }
-    
-    /* Healing intent display styles */
-    .healing-intent-display {
-        background: var(--color-surface-light);
-        border: 2px solid var(--color-success);
-        border-radius: var(--borderRadius-xl);
-        padding: var(--spacing-6);
-        margin: var(--spacing-6) 0;
-    }
-    
-    [data-theme="dark"] .healing-intent-display {
-        background: var(--colors-neutral-800);
-    }
-    
-    .intent-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: var(--spacing-6);
-        padding-bottom: var(--spacing-4);
-        border-bottom: 2px solid var(--colors-neutral-200);
-    }
-    
-    .intent-header h3 {
-        margin: 0 0 var(--spacing-2) 0;
-        color: var(--colors-neutral-900);
-        font-size: var(--typography-fontSizes-xl);
-    }
-    
-    .intent-header p {
-        margin: 0;
-        color: var(--colors-neutral-600);
-    }
-    
-    .confidence-badge {
-        padding: var(--spacing-2) var(--spacing-4);
-        background: var(--confidence-color, var(--color-success));
-        color: white;
-        border-radius: var(--borderRadius-full);
-        font-size: var(--typography-fontSizes-sm);
-        font-weight: var(--typography-fontWeights-bold);
-        text-transform: uppercase;
-        letter-spacing: 0.05em;
-    }
-    
-    .intent-grid {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: var(--spacing-4);
-        margin-bottom: var(--spacing-6);
-    }
-    
-    .intent-section {
-        background: var(--colors-neutral-50);
-        border-radius: var(--borderRadius-lg);
-        padding: var(--spacing-4);
-    }
-    
-    [data-theme="dark"] .intent-section {
-        background: var(--colors-neutral-700);
-    }
-    
-    .section-title {
-        font-size: var(--typography-fontSizes-sm);
-        color: var(--colors-neutral-600);
-        text-transform: uppercase;
-        letter-spacing: 0.05em;
-        margin-bottom: var(--spacing-2);
-    }
-    
-    .section-content {
-        font-size: var(--typography-fontSizes-base);
-        color: var(--colors-neutral-900);
-        font-weight: var(--typography-fontWeights-medium);
-    }
-    
-    [data-theme="dark"] .section-content {
-        color: var(--colors-neutral-100);
-    }
-    
-    .primary-action {
-        color: var(--color-success);
-        font-weight: var(--typography-fontWeights-semibold);
-    }
-    
-    .sequencing-rule {
-        color: var(--color-enterprise-primary);
-        font-family: var(--font-mono);
-        font-size: var(--typography-fontSizes-sm);
-    }
-    
-    .intent-details {
-        display: grid;
-        grid-template-columns: repeat(3, 1fr);
-        gap: var(--spacing-4);
-        margin-bottom: var(--spacing-6);
-    }
-    
-    .detail-section {
-        background: var(--colors-neutral-50);
-        border-radius: var(--borderRadius-lg);
-        padding: var(--spacing-4);
-    }
-    
-    [data-theme="dark"] .detail-section {
-        background: var(--colors-neutral-700);
-    }
-    
-    .detail-title {
-        font-size: var(--typography-fontSizes-sm);
-        color: var(--colors-neutral-600);
-        text-transform: uppercase;
-        letter-spacing: 0.05em;
-        margin-bottom: var(--spacing-2);
-    }
-    
-    .detail-content {
-        font-size: var(--typography-fontSizes-sm);
-        color: var(--colors-neutral-700);
-        line-height: 1.5;
-    }
-    
-    [data-theme="dark"] .detail-content {
-        color: var(--colors-neutral-300);
-    }
-    
-    .preconditions-list {
-        display: flex;
-        flex-direction: column;
-        gap: var(--spacing-1);
-    }
-    
-    .precondition-item {
-        color: var(--colors-neutral-700);
-    }
-    
-    .contraindications-list {
-        display: flex;
-        flex-direction: column;
-        gap: var(--spacing-1);
-    }
-    
-    .contraindication-item {
-        color: var(--color-danger);
-        font-weight: var(--typography-fontWeights-medium);
-    }
-    
-    .reversibility {
-        color: var(--color-success);
-        font-style: italic;
-    }
-    
-    .psych-doctrine {
-        background: linear-gradient(135deg, var(--colors-success-50), var(--colors-neutral-50));
-        border-radius: var(--borderRadius-lg);
-        padding: var(--spacing-4);
-        border: 2px solid var(--colors-success-300);
-        margin-top: var(--spacing-6);
-    }
-    
-    [data-theme="dark"] .psych-doctrine {
-        background: linear-gradient(135deg, var(--colors-success-900), var(--colors-neutral-800));
-        border-color: var(--colors-success-700);
-    }
-    
-    .doctrine-icon {
-        font-size: 28px;
-        color: var(--color-success);
-        margin-bottom: var(--spacing-2);
-    }
-    
-    .doctrine-content h4 {
-        margin: 0 0 var(--spacing-2) 0;
-        color: var(--colors-neutral-900);
-        font-size: var(--typography-fontSizes-lg);
-    }
-    
-    .doctrine-content p {
-        margin: 0;
-        color: var(--colors-neutral-700);
-        line-height: 1.6;
-    }
-    
-    /* Responsive adjustments */
-    @media (max-width: 768px) {
-        .confidence-comparison {
-            grid-template-columns: 1fr;
-        }
-        
-        .sequencing-steps {
-            flex-direction: column;
-            gap: var(--spacing-6);
-        }
-        
-        .step-connectors {
-            display: none;
-        }
-        
-        .evidence-comparison {
-            grid-template-columns: 1fr;
-        }
-        
-        .intent-grid {
-            grid-template-columns: 1fr;
-        }
-        
-        .intent-details {
-            grid-template-columns: 1fr;
-        }
-    }
-    
-    @media (max-width: 480px) {
-        .observation-gate-header {
-            flex-direction: column;
-            text-align: center;
-            gap: var(--spacing-2);
-        }
-        
-        .observation-badge {
-            margin-left: 0;
-            margin-top: var(--spacing-2);
-        }
-        
-        .card {
-            padding: var(--spacing-3);
-        }
-        
-        .sequencing-flow,
-        .historical-evidence-panel,
-        .healing-intent-display {
-            padding: var(--spacing-3);
-        }
-    }
-    </style>
-    """
-
-# ===========================================
-# INITIALIZATION FUNCTION
-# ===========================================
-def initialize_modern_ui() -> str:
-    """Initialize all modern UI components and styles"""
-    components = [
-        inject_design_tokens(),
-        create_component_styles(),
-        """
-        <style>
-        /* Additional responsive utilities */
-        .container {
-            width: 100%;
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 0 var(--spacing-4);
-        }
-        
-        @media (min-width: 768px) {
-            .container {
-                padding: 0 var(--spacing-6);
-            }
-        }
-        
-        @media (min-width: 1024px) {
-            .container {
-                padding: 0 var(--spacing-8);
-            }
-        }
-        </style>
-        """
-    ]
-    
-    return "\n".join(components)
-
-# ===========================================
-# EXPORT LIST
-# ===========================================
-__all__ = [
-    # Core components
-    'ModernComponent', 'Card',
-    
-    # CRITICAL PSYCHOLOGICAL COMPONENTS
-    'ObservationGate', 'SequencingFlow', 'ProcessDisplay',
-    'HistoricalEvidencePanel', 'HealingIntentDisplay',
-    
-    # Design system
-    'DESIGN_TOKENS',
-    
-    # Initialization
-    'initialize_modern_ui', 'inject_design_tokens', 'create_component_styles'
-]

ui/modern_integration.py

@@ -1,80 +0,0 @@
-"""
-ui/modern_integration.py
-Modern UI integration for Gradio app
-"""
-
-import gradio as gr
-from ui.modern_components import (
-    initialize_modern_ui,
-    Card, Button, Badge, Grid, Stack,
-    ObservationGate, SequencingFlow, ProcessDisplay, Chart,
-    ResponsiveUtils, Accessibility, DarkMode
-)
-
-class ModernUIIntegration:
-    """Integrate modern UI components with Gradio"""
-    
-    @staticmethod
-    def inject_css_and_js() -> str:
-        """Inject modern UI CSS and JavaScript"""
-        return initialize_modern_ui()
-    
-    @staticmethod
-    def create_modern_layout() -> dict:
-        """Create modern layout structure for tabs"""
-        return {
-            "css": ModernUIIntegration.inject_css_and_js(),
-            "container_class": "container container-lg",
-            "header": """
-                <div class="app-header">
-                    <h1 class="text-3xl font-bold text-primary mb-2">
-                        🚀 Agentic Reliability Framework v3.3.9
-                    </h1>
-                    <p class="text-muted mb-6">
-                        OSS advises → Enterprise executes | Modern UI Enabled
-                    </p>
-                </div>
-            """,
-            "tab_classes": {
-                "live_demo": "p-4 bg-gradient-to-br from-green-50 to-white dark:from-green-900/20 dark:to-gray-900",
-                "roi": "p-4 bg-gradient-to-br from-blue-50 to-white dark:from-blue-900/20 dark:to-gray-900",
-                "enterprise": "p-4 bg-gradient-to-br from-purple-50 to-white dark:from-purple-900/20 dark:to-gray-900",
-                "audit": "p-4 bg-gradient-to-br from-orange-50 to-white dark:from-orange-900/20 dark:to-gray-900",
-                "learning": "p-4 bg-gradient-to-br from-indigo-50 to-white dark:from-indigo-900/20 dark:to-gray-900"
-            }
-        }
-    
-    @staticmethod
-    def wrap_component(component, card_config=None):
-        """Wrap Gradio component with modern styling"""
-        if card_config:
-            # Create a card wrapper
-            title = card_config.get("title", "")
-            variant = card_config.get("variant", "default")
-            border_color = card_config.get("border_color", "")
-            
-            with gr.Group(elem_classes=f"card card-{variant}"):
-                if title:
-                    gr.Markdown(f"### {title}", elem_classes="card-title")
-                return component
-        return component
-    
-    @staticmethod
-    def create_boundary_display(oss_content, enterprise_content):
-        """Create OSS vs Enterprise boundary display"""
-        with gr.Row(elem_classes="boundary-row"):
-            with gr.Column(scale=1, elem_classes="oss-column"):
-                with gr.Group(elem_classes="card card-outlined border-l-4 border-l-green-500"):
-                    gr.Markdown("### 🟢 OSS Advisory Layer", 
-                              elem_classes="text-lg font-semibold mb-2")
-                    gr.Markdown("*Analysis & Recommendations*", 
-                              elem_classes="text-sm text-muted mb-4")
-                    yield oss_content
-            
-            with gr.Column(scale=1, elem_classes="enterprise-column"):
-                with gr.Group(elem_classes="card card-elevated border-l-4 border-l-purple-500"):
-                    gr.Markdown("### 🟣 Enterprise Execution Layer", 
-                              elem_classes="text-lg font-semibold mb-2")
-                    gr.Markdown("*Autonomous Action & Execution*", 
-                              elem_classes="text-sm text-muted mb-4")
-                    yield enterprise_content

ui/styles.py

@@ -1,235 +0,0 @@
-"""
-UI Styles for ARF Demo - LIGHT THEME FOR READABILITY
-"""
-import logging
-
-logger = logging.getLogger(__name__)
-
-def get_styles() -> str:
-    """
-    Return CSS styles for the ARF demo - LIGHT THEME FOR READABILITY
-    """
-    css = """
-    /* ARF Demo Styles - Clean Light Theme */
-    
-    /* Fix for all text to be readable */
-    body, .gr-box, .gr-form, .gr-panel, .gr-tab, .gr-container {
-        background-color: #f8fafc !important;
-        color: #1e293b !important;
-    }
-    
-    /* Make all text black/dark */
-    h1, h2, h3, h4, h5, h6, p, span, div, label, .markdown, .gr-markdown {
-        color: #1e293b !important;
-    }
-    
-    /* Header gradient - keep but ensure text is white */
-    .header-gradient {
-        background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%) !important;
-        border-radius: 16px;
-        padding: 30px 40px !important;
-        color: white !important;
-    }
-    
-    .header-gradient h1,
-    .header-gradient h2,
-    .header-gradient h3,
-    .header-gradient p {
-        color: white !important;
-    }
-    
-    /* Status bar */
-    .status-bar {
-        background: #f1f5f9 !important;
-        border: 1px solid #e2e8f0 !important;
-        border-radius: 12px;
-        padding: 15px !important;
-    }
-    
-    /* Cards - white background with readable text */
-    .arf-card, .gr-box, .gr-panel {
-        background: white !important;
-        border: 1px solid #e2e8f0 !important;
-        border-radius: 14px !important;
-        color: #1e293b !important;
-    }
-    
-    /* Tab navigation */
-    .tab-nav {
-        background: white !important;
-        border-bottom: 2px solid #e2e8f0 !important;
-    }
-    
-    .tab-nav .tab {
-        color: #64748b !important;
-        padding: 12px 24px !important;
-    }
-    
-    .tab-nav .tab.selected {
-        color: #3b82f6 !important;
-        background: #f8fafc !important;
-        border: 2px solid #e2e8f0 !important;
-        border-bottom-color: white !important;
-    }
-    
-    /* Buttons */
-    button {
-        border-radius: 10px !important;
-        font-weight: 600 !important;
-    }
-    
-    button.primary {
-        background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
-        color: white !important;
-        border: none !important;
-    }
-    
-    button.secondary {
-        background: white !important;
-        border: 2px solid #e2e8f0 !important;
-        color: #1e293b !important;
-    }
-    
-    /* Form elements */
-    .gr-dropdown, .gr-slider, .gr-textbox, .gr-checkbox, .gr-radio {
-        background: white !important;
-        border: 1px solid #e2e8f0 !important;
-        color: #1e293b !important;
-    }
-    
-    .gr-dropdown label, .gr-slider label, .gr-textbox label {
-        color: #1e293b !important;
-        font-weight: 600 !important;
-    }
-    
-    /* Plots - ensure they have white background */
-    .gr-plot, .plotly.js-plotly-plot {
-        background: white !important;
-        border-radius: 12px;
-        border: 1px solid #e2e8f0;
-    }
-    
-    /* JSON display */
-    .gr-json {
-        background: white !important;
-        border: 1px solid #e2e8f0 !important;
-        border-radius: 8px;
-        color: #1e293b !important;
-    }
-    
-    /* Dataframes */
-    .gr-dataframe {
-        background: white !important;
-        border: 1px solid #e2e8f0 !important;
-        border-radius: 8px;
-    }
-    
-    /* Agent cards */
-    .agent-card {
-        background: white !important;
-        border: 2px solid #e2e8f0 !important;
-        border-radius: 14px;
-        color: #1e293b !important;
-    }
-    
-    .agent-card.active {
-        border-color: #10b981 !important;
-        background: #f0fdf4 !important;
-    }
-    
-    /* Metric cards */
-    .metric-card {
-        background: white !important;
-        border: 1px solid #e2e8f0 !important;
-        border-left: 4px solid #3b82f6 !important;
-        border-radius: 12px;
-        color: #1e293b !important;
-    }
-    
-    /* Footer */
-    footer {
-        background: #f1f5f9 !important;
-        color: #64748b !important;
-        border-top: 2px solid #e2e8f0 !important;
-    }
-    
-    footer a {
-        color: #3b82f6 !important;
-    }
-    
-    /* Badges */
-    .badge {
-        color: white !important;
-        font-weight: bold !important;
-    }
-    
-    /* Ensure all HTML content has proper colors */
-    .gr-html div, .gr-html span, .gr-html p, .gr-html h1, .gr-html h2, .gr-html h3, .gr-html h4 {
-        color: #1e293b !important;
-    }
-    
-    /* Fix for scenario card */
-    .scenario-card {
-        background: white !important;
-        border: 1px solid #e2e8f0 !important;
-        color: #1e293b !important;
-    }
-    
-    /* Make sure all text in the workflow section is readable */
-    #tab1 .gr-markdown, 
-    #tab1 .gr-html,
-    #tab1 h1, #tab1 h2, #tab1 h3,
-    #tab1 p, #tab1 span, #tab1 div {
-        color: #1e293b !important;
-    }
-    
-    /* Plot titles */
-    .gr-plot h3, .gr-plot .plot-title {
-        color: #1e293b !important;
-    }
-    
-    /* Section headers */
-    .section-header {
-        color: #1e293b !important;
-        border-bottom: 2px solid #e2e8f0 !important;
-    }
-    
-    /* Fix for approval display */
-    .approval-display {
-        background: white !important;
-        border: 2px solid #e2e8f0 !important;
-        color: #1e293b !important;
-    }
-    
-    /* OSS vs Enterprise sections */
-    .oss-section, .enterprise-section {
-        background: white !important;
-        border: 2px solid #e2e8f0 !important;
-        color: #1e293b !important;
-    }
-    
-    .oss-section {
-        border-color: #0ea5e9 !important;
-    }
-    
-    .enterprise-section {
-        border-color: #10b981 !important;
-    }
-    """
-    
-    return css
-
-
-def get_installation_badges() -> str:
-    """Get installation badge HTML - SIMPLIFIED VERSION"""
-    return """
-    <div style="display: flex; justify-content: center; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
-        <span style="padding: 4px 12px; background: #f59e0b; 
-                    color: white; border-radius: 20px; font-size: 12px; font-weight: bold; 
-                    display: flex; align-items: center; gap: 6px;">
-            ⚠️ Checking ARF Installation...
-        </span>
-    </div>
-    """
-
-__all__ = ["get_styles", "get_installation_badges"]

ui/styles/modern.css

@@ -1,342 +0,0 @@
-/* ui/styles/modern.css - Design System Foundation */
-:root {
-  /* Primary Colors (matching your current scheme) */
-  --color-primary-50: #eff6ff;
-  --color-primary-100: #dbeafe;
-  --color-primary-200: #bfdbfe;
-  --color-primary-300: #93c5fd;
-  --color-primary-400: #60a5fa;
-  --color-primary-500: #3b82f6;
-  --color-primary-600: #2563eb;
-  --color-primary-700: #1d4ed8;
-  --color-primary-800: #1e40af;
-  --color-primary-900: #1e3a8a;
-  
-  /* Success Colors */
-  --color-success-50: #f0fdf4;
-  --color-success-100: #dcfce7;
-  --color-success-200: #bbf7d0;
-  --color-success-300: #86efac;
-  --color-success-400: #4ade80;
-  --color-success-500: #22c55e;
-  --color-success-600: #16a34a;
-  --color-success-700: #15803d;
-  --color-success-800: #166534;
-  --color-success-900: #14532d;
-  
-  /* Warning Colors */
-  --color-warning-50: #fffbeb;
-  --color-warning-100: #fef3c7;
-  --color-warning-200: #fde68a;
-  --color-warning-300: #fcd34d;
-  --color-warning-400: #fbbf24;
-  --color-warning-500: #f59e0b;
-  --color-warning-600: #d97706;
-  --color-warning-700: #b45309;
-  --color-warning-800: #92400e;
-  --color-warning-900: #78350f;
-  
-  /* Danger Colors */
-  --color-danger-50: #fef2f2;
-  --color-danger-100: #fee2e2;
-  --color-danger-200: #fecaca;
-  --color-danger-300: #fca5a5;
-  --color-danger-400: #f87171;
-  --color-danger-500: #ef4444;
-  --color-danger-600: #dc2626;
-  --color-danger-700: #b91c1c;
-  --color-danger-800: #991b1b;
-  --color-danger-900: #7f1d1d;
-  
-  /* Neutral Colors */
-  --color-neutral-50: #f8fafc;
-  --color-neutral-100: #f1f5f9;
-  --color-neutral-200: #e2e8f0;
-  --color-neutral-300: #cbd5e1;
-  --color-neutral-400: #94a3b8;
-  --color-neutral-500: #64748b;
-  --color-neutral-600: #475569;
-  --color-neutral-700: #334155;
-  --color-neutral-800: #1e293b;
-  --color-neutral-900: #0f172a;
-  
-  /* Spacing */
-  --spacing-1: 0.25rem;
-  --spacing-2: 0.5rem;
-  --spacing-3: 0.75rem;
-  --spacing-4: 1rem;
-  --spacing-5: 1.25rem;
-  --spacing-6: 1.5rem;
-  --spacing-8: 2rem;
-  --spacing-10: 2.5rem;
-  --spacing-12: 3rem;
-  --spacing-16: 4rem;
-  --spacing-20: 5rem;
-  
-  /* Typography */
-  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  --font-mono: 'JetBrains Mono', 'SF Mono', Monaco, monospace;
-  
-  /* Border Radius */
-  --radius-sm: 0.25rem;
-  --radius-md: 0.5rem;
-  --radius-lg: 0.75rem;
-  --radius-xl: 1rem;
-  --radius-2xl: 1.5rem;
-  --radius-full: 9999px;
-  
-  /* Shadows */
-  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
-  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
-  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
-  
-  /* Transitions */
-  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
-  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
-  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-/* Semantic aliases for easier use */
-:root {
-  --color-primary: var(--color-primary-500);
-  --color-success: var(--color-success-500);
-  --color-warning: var(--color-warning-500);
-  --color-danger: var(--color-danger-500);
-  --color-border: var(--color-neutral-200);
-  --color-bg: var(--color-neutral-50);
-  --color-text: var(--color-neutral-900);
-  --color-text-secondary: var(--color-neutral-600);
-}
-
-/* Dark mode overrides */
-[data-theme="dark"] {
-  --color-primary: var(--color-primary-400);
-  --color-success: var(--color-success-400);
-  --color-warning: var(--color-warning-400);
-  --color-danger: var(--color-danger-400);
-  --color-border: var(--color-neutral-700);
-  --color-bg: var(--color-neutral-900);
-  --color-text: var(--color-neutral-100);
-  --color-text-secondary: var(--color-neutral-400);
-}
-
-/* Base styles */
-* {
-  box-sizing: border-box;
-}
-
-body {
-  font-family: var(--font-sans);
-  color: var(--color-text);
-  background: var(--color-bg);
-  margin: 0;
-  padding: 0;
-  line-height: 1.5;
-}
-
-/* Container utilities */
-.container {
-  width: 100%;
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 var(--spacing-4);
-}
-
-.container-sm {
-  max-width: 800px;
-}
-
-.container-lg {
-  max-width: 1400px;
-}
-
-/* Grid system */
-.grid {
-  display: grid;
-  gap: var(--spacing-4);
-}
-
-.grid-2 {
-  grid-template-columns: repeat(2, 1fr);
-}
-
-.grid-3 {
-  grid-template-columns: repeat(3, 1fr);
-}
-
-.grid-4 {
-  grid-template-columns: repeat(4, 1fr);
-}
-
-/* Flex utilities */
-.flex {
-  display: flex;
-}
-
-.flex-col {
-  flex-direction: column;
-}
-
-.items-center {
-  align-items: center;
-}
-
-.justify-between {
-  justify-content: space-between;
-}
-
-.justify-center {
-  justify-content: center;
-}
-
-.gap-2 {
-  gap: var(--spacing-2);
-}
-
-.gap-4 {
-  gap: var(--spacing-4);
-}
-
-.gap-6 {
-  gap: var(--spacing-6);
-}
-
-/* Card base styles */
-.card {
-  background: white;
-  border-radius: var(--radius-lg);
-  border: 1px solid var(--color-border);
-  padding: var(--spacing-6);
-  transition: box-shadow var(--transition-normal);
-}
-
-.card:hover {
-  box-shadow: var(--shadow-md);
-}
-
-.card-elevated {
-  box-shadow: var(--shadow-lg);
-  border: none;
-}
-
-.card-outlined {
-  border: 2px solid var(--color-primary);
-  background: transparent;
-}
-
-/* Button base styles */
-.btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--spacing-2) var(--spacing-4);
-  border-radius: var(--radius-md);
-  font-weight: 500;
-  font-size: 0.875rem;
-  border: none;
-  cursor: pointer;
-  transition: all var(--transition-fast);
-  text-decoration: none;
-  gap: var(--spacing-2);
-}
-
-.btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.btn-primary {
-  background: var(--color-primary);
-  color: white;
-}
-
-.btn-primary:hover:not(:disabled) {
-  background: var(--color-primary-600);
-}
-
-.btn-secondary {
-  background: var(--color-neutral-100);
-  color: var(--color-text);
-  border: 1px solid var(--color-border);
-}
-
-.btn-secondary:hover:not(:disabled) {
-  background: var(--color-neutral-200);
-}
-
-/* Typography utilities */
-.text-sm {
-  font-size: 0.875rem;
-}
-
-.text-base {
-  font-size: 1rem;
-}
-
-.text-lg {
-  font-size: 1.125rem;
-}
-
-.text-xl {
-  font-size: 1.25rem;
-}
-
-.text-2xl {
-  font-size: 1.5rem;
-}
-
-.font-medium {
-  font-weight: 500;
-}
-
-.font-semibold {
-  font-weight: 600;
-}
-
-.font-bold {
-  font-weight: 700;
-}
-
-.text-primary {
-  color: var(--color-primary);
-}
-
-.text-success {
-  color: var(--color-success);
-}
-
-.text-warning {
-  color: var(--color-warning);
-}
-
-.text-danger {
-  color: var(--color-danger);
-}
-
-.text-muted {
-  color: var(--color-text-secondary);
-}
-
-/* Utility classes for gradients */
-.gradient-primary {
-  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-700) 100%);
-}
-
-.gradient-success {
-  background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-700) 100%);
-}
-
-.gradient-warning {
-  background: linear-gradient(135deg, var(--color-warning) 0%, var(--color-warning-700) 100%);
-}
-
-/* Focus styles for accessibility */
-:focus {
-  outline: 2px solid var(--color-primary);
-  outline-offset: 2px;
-}
-
-:focus:not(:focus-visible) {
-  outline: none;
-}

ui/styles/responsive.css

@@ -1,161 +0,0 @@
-/* ui/styles/responsive.css - Mobile-First Responsive Utilities */
-
-/* Mobile-first: default styles are for mobile */
-.container {
-  padding: 0 var(--spacing-4);
-}
-
-/* Hide/show utilities for different screen sizes */
-.mobile-only {
-  display: block;
-}
-
-.tablet-only {
-  display: none;
-}
-
-.desktop-only {
-  display: none;
-}
-
-/* Responsive grid columns */
-.grid-2, .grid-3, .grid-4 {
-  grid-template-columns: 1fr;
-}
-
-/* Responsive typography */
-.text-responsive {
-  font-size: 0.875rem;
-}
-
-/* Responsive spacing */
-.responsive-padding {
-  padding: var(--spacing-4);
-}
-
-/* Tablet styles (≥ 768px) */
-@media (min-width: 768px) {
-  .container {
-    padding: 0 var(--spacing-6);
-  }
-  
-  .mobile-only {
-    display: none;
-  }
-  
-  .tablet-only {
-    display: block;
-  }
-  
-  .grid-2 {
-    grid-template-columns: repeat(2, 1fr);
-  }
-  
-  .grid-3 {
-    grid-template-columns: repeat(2, 1fr);
-  }
-  
-  .text-responsive {
-    font-size: 1rem;
-  }
-  
-  .responsive-padding {
-    padding: var(--spacing-6);
-  }
-}
-
-/* Desktop styles (≥ 1024px) */
-@media (min-width: 1024px) {
-  .container {
-    padding: 0 var(--spacing-8);
-  }
-  
-  .tablet-only {
-    display: none;
-  }
-  
-  .desktop-only {
-    display: block;
-  }
-  
-  .grid-3 {
-    grid-template-columns: repeat(3, 1fr);
-  }
-  
-  .grid-4 {
-    grid-template-columns: repeat(4, 1fr);
-  }
-  
-  .text-responsive {
-    font-size: 1.125rem;
-  }
-  
-  .responsive-padding {
-    padding: var(--spacing-8);
-  }
-}
-
-/* Large desktop (≥ 1280px) */
-@media (min-width: 1280px) {
-  .text-responsive {
-    font-size: 1.25rem;
-  }
-}
-
-/* Ultra-wide screens (≥ 1536px) */
-@media (min-width: 1536px) {
-  .container {
-    max-width: 1400px;
-  }
-}
-
-/* Touch-friendly styles for mobile */
-@media (hover: none) and (pointer: coarse) {
-  .btn, button, [role="button"] {
-    min-height: 44px;
-    min-width: 44px;
-  }
-  
-  input, select, textarea {
-    font-size: 16px; /* Prevents iOS zoom on focus */
-  }
-}
-
-/* Reduce motion preference */
-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-  }
-}
-
-/* High contrast mode support */
-@media (prefers-contrast: high) {
-  .card {
-    border: 2px solid var(--color-text);
-  }
-  
-  .btn {
-    border: 2px solid currentColor;
-  }
-}
-
-/* Print styles */
-@media print {
-  .no-print {
-    display: none !important;
-  }
-  
-  .card {
-    border: 1px solid #000;
-    box-shadow: none;
-  }
-  
-  a {
-    color: #000;
-    text-decoration: underline;
-  }
-}