Create modern_components.py

ui/modern_components.py

@@ -0,0 +1,1884 @@
+"""
+ui/modern_components.py
+🚀 Modern UI Components for ARF v3.3.9
+Enhanced with design system, accessibility, and performance features
+
+Features:
+1. Design token system with CSS variables
+2. Responsive, mobile-first components
+3. Accessibility (ARIA labels, keyboard nav)
+4. Performance optimizations
+5. Dark mode support
+6. Progressive enhancement
+"""
+
+import json
+from datetime import datetime
+from typing import Dict, List, Any, Optional, Tuple
+import plotly.graph_objects as go
+import plotly.express as px
+import numpy as np
+import pandas as pd
+
+# ===========================================
+# DESIGN TOKEN SYSTEM (CSS Variables in JavaScript)
+# ===========================================
+DESIGN_TOKENS = {
+    "colors": {
+        "primary": {
+            "50": "#eff6ff",
+            "100": "#dbeafe",
+            "200": "#bfdbfe",
+            "300": "#93c5fd",
+            "400": "#60a5fa",
+            "500": "#3b82f6",
+            "600": "#2563eb",
+            "700": "#1d4ed8",
+            "800": "#1e40af",
+            "900": "#1e3a8a"
+        },
+        "success": {
+            "50": "#f0fdf4",
+            "100": "#dcfce7",
+            "200": "#bbf7d0",
+            "300": "#86efac",
+            "400": "#4ade80",
+            "500": "#22c55e",
+            "600": "#16a34a",
+            "700": "#15803d",
+            "800": "#166534",
+            "900": "#14532d"
+        },
+        "warning": {
+            "50": "#fffbeb",
+            "100": "#fef3c7",
+            "200": "#fde68a",
+            "300": "#fcd34d",
+            "400": "#fbbf24",
+            "500": "#f59e0b",
+            "600": "#d97706",
+            "700": "#b45309",
+            "800": "#92400e",
+            "900": "#78350f"
+        },
+        "danger": {
+            "50": "#fef2f2",
+            "100": "#fee2e2",
+            "200": "#fecaca",
+            "300": "#fca5a5",
+            "400": "#f87171",
+            "500": "#ef4444",
+            "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 */
+        --color-primary: var(--colors-primary-500);
+        --color-success: var(--colors-success-500);
+        --color-warning: var(--colors-warning-500);
+        --color-danger: var(--colors-danger-500);
+        
+        /* 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: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+        --font-mono: 'JetBrains Mono', 'SF Mono', Monaco, 'Cascadia Code', monospace;
+        
+        /* 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);
+    }}
+    
+    /* 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-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>
+        """
+
+class Button(ModernComponent):
+    """Accessible button component with variants"""
+    
+    @staticmethod
+    def create(text: str, **kwargs) -> str:
+        """Create a styled button"""
+        variant = kwargs.get('variant', 'primary')  # primary, secondary, danger, ghost
+        size = kwargs.get('size', 'md')  # sm, md, lg
+        disabled = kwargs.get('disabled', False)
+        full_width = kwargs.get('full_width', False)
+        
+        variant_classes = {
+            'primary': 'btn-primary',
+            'secondary': 'btn-secondary',
+            'danger': 'btn-danger',
+            'ghost': 'btn-ghost'
+        }
+        
+        size_classes = {
+            'sm': 'btn-sm',
+            'md': 'btn-md',
+            'lg': 'btn-lg'
+        }
+        
+        classes = [
+            'btn',
+            variant_classes.get(variant, 'btn-primary'),
+            size_classes.get(size, 'btn-md'),
+            'full-width' if full_width else ''
+        ]
+        
+        disabled_attr = 'disabled aria-disabled="true"' if disabled else ''
+        
+        return f"""
+        <button class="{' '.join(classes)}" {disabled_attr}>
+            {text}
+        </button>
+        """
+    
+    @staticmethod
+    def create_icon_button(icon: str, label: str, **kwargs) -> str:
+        """Create an icon-only button with proper accessibility"""
+        return f"""
+        <button class="btn-icon" aria-label="{label}">
+            <span class="btn-icon-inner">{icon}</span>
+        </button>
+        """
+
+class Badge(ModernComponent):
+    """Badge component for status, tags, etc."""
+    
+    @staticmethod
+    def create(text: str, **kwargs) -> str:
+        """Create a badge"""
+        variant = kwargs.get('variant', 'default')  # default, success, warning, danger
+        size = kwargs.get('size', 'md')  # sm, md, lg
+        
+        variant_classes = {
+            'default': 'badge-default',
+            'success': 'badge-success',
+            'warning': 'badge-warning',
+            'danger': 'badge-danger'
+        }
+        
+        size_classes = {
+            'sm': 'badge-sm',
+            'md': 'badge-md',
+            'lg': 'badge-lg'
+        }
+        
+        return f"""
+        <span class="badge {variant_classes.get(variant, 'badge-default')} {size_classes.get(size, 'badge-md')}">
+            {text}
+        </span>
+        """
+
+# ===========================================
+# LAYOUT COMPONENTS
+# ===========================================
+class Grid(ModernComponent):
+    """Responsive grid system"""
+    
+    @staticmethod
+    def create(children: List[str], **kwargs) -> str:
+        """Create a responsive grid"""
+        columns = kwargs.get('columns', {  # responsive column definitions
+            'default': 1,
+            'sm': 2,
+            'lg': 3
+        })
+        
+        gap = kwargs.get('gap', 'var(--spacing-4)')
+        
+        # Convert columns dict to CSS
+        grid_template = []
+        for breakpoint, col_count in columns.items():
+            if breakpoint == 'default':
+                grid_template.append(f"grid-template-columns: repeat({col_count}, 1fr);")
+            else:
+                grid_template.append(f"@media (min-width: {DESIGN_TOKENS['breakpoints'][breakpoint]}) {{")
+                grid_template.append(f"  grid-template-columns: repeat({col_count}, 1fr);")
+                grid_template.append("}")
+        
+        return f"""
+        <div class="grid" style="gap: {gap};">
+            {''.join(children)}
+        </div>
+        
+        <style>
+        .grid {{
+            display: grid;
+            {grid_template[0] if grid_template else ''}
+        }}
+        
+        {''.join(grid_template[1:]) if len(grid_template) > 1 else ''}
+        </style>
+        """
+    
+    @staticmethod
+    def create_metric_grid(metrics: List[Dict[str, Any]]) -> str:
+        """Create a grid of metric cards"""
+        metric_cards = []
+        for metric in metrics:
+            metric_cards.append(
+                Card.create_metric(
+                    value=metric.get('value', ''),
+                    label=metric.get('label', ''),
+                    trend=metric.get('trend'),
+                    change=metric.get('change', '')
+                )
+            )
+        
+        return Grid.create(
+            children=metric_cards,
+            columns={'default': 2, 'sm': 2, 'lg': 4}
+        )
+
+class Stack(ModernComponent):
+    """Vertical stack layout"""
+    
+    @staticmethod
+    def create(children: List[str], **kwargs) -> str:
+        """Create a vertical stack"""
+        spacing = kwargs.get('spacing', 'var(--spacing-4)')
+        align = kwargs.get('align', 'stretch')  # start, center, end, stretch
+        
+        return f"""
+        <div class="stack" style="--spacing: {spacing}; --align: {align};">
+            {''.join([f'<div class="stack-item">{child}</div>' for child in children])}
+        </div>
+        
+        <style>
+        .stack {{
+            display: flex;
+            flex-direction: column;
+            align-items: var(--align);
+            gap: var(--spacing);
+        }}
+        
+        .stack-item {{
+            width: 100%;
+        }}
+        </style>
+        """
+
+# ===========================================
+# SPECIALIZED ARF COMPONENTS
+# ===========================================
+class ObservationGate(ModernComponent):
+    """Observation gate component showing system restraint"""
+    
+    @staticmethod
+    def create(confidence: float = 65.0, **kwargs) -> str:
+        """Create observation gate display"""
+        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:
+            countdown_html = f"""
+            <div class="countdown">
+                <span class="countdown-label">Next evaluation:</span>
+                <span class="countdown-timer" data-until="{frozen_until}">5:00</span>
+            </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)"
+        
+        return f"""
+        <div class="observation-gate" style="--status-color: {status_color};">
+            <div class="observation-gate-header">
+                <div class="observation-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">
+                <div class="observation-message">
+                    <h4>Decision Intentionally Deferred</h4>
+                    <p>The system has detected uncertainty (<strong>{confidence:.1f}% confidence</strong>) 
+                    and has chosen to observe rather than act. Historical evidence indicates 
+                    premature action increases risk by <strong>47%</strong>.</p>
+                </div>
+                
+                <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</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}%;"></div>
+                    </div>
+                    <div class="scale-labels">
+                        <span>Observe ({confidence:.1f}%)</span>
+                        <span>Threshold ({threshold}%)</span>
+                        <span>Act (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"""
+    
+    @staticmethod
+    def create(steps: List[Dict[str, Any]], **kwargs) -> str:
+        """Create sequencing flow visualization"""
+        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 76% of the time during amplification.</p>
+                </div>
+            </div>
+        </div>
+        """
+
+class ProcessDisplay(ModernComponent):
+    """Display for ARF processes (Detection, Recall, Decision)"""
+    
+    @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>
+            """
+        
+        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}
+                
+                {data.get('content', '')}
+                
+                {next_step_html}
+            </div>
+        </div>
+        """
+
+# ===========================================
+# DATA VISUALIZATION COMPONENTS
+# ===========================================
+class Chart(ModernComponent):
+    """Wrapper for Plotly charts with consistent styling"""
+    
+    @staticmethod
+    def create_line(data: Dict[str, Any], **kwargs) -> go.Figure:
+        """Create a line chart with ARF styling"""
+        title = kwargs.get('title', '')
+        height = kwargs.get('height', 300)
+        
+        fig = go.Figure()
+        
+        # Add traces
+        for trace in data.get('traces', []):
+            fig.add_trace(go.Scatter(
+                x=trace.get('x', []),
+                y=trace.get('y', []),
+                mode=trace.get('mode', 'lines'),
+                name=trace.get('name', ''),
+                line=dict(
+                    color=trace.get('color', 'var(--color-primary)'),
+                    width=trace.get('width', 3)
+                ),
+                fill=trace.get('fill', None)
+            ))
+        
+        # Update layout
+        fig.update_layout(
+            title={
+                'text': title,
+                'font': {
+                    'size': 18,
+                    'color': 'var(--colors-neutral-900)',
+                    'family': 'var(--font-sans)'
+                }
+            },
+            height=height,
+            plot_bgcolor='white',
+            paper_bgcolor='white',
+            font={
+                'family': 'var(--font-sans)',
+                'color': 'var(--colors-neutral-700)'
+            },
+            margin=dict(l=40, r=20, t=60, b=40),
+            hovermode='x unified',
+            showlegend=kwargs.get('show_legend', True),
+            legend=dict(
+                orientation="h",
+                yanchor="bottom",
+                y=1.02,
+                xanchor="center",
+                x=0.5
+            )
+        )
+        
+        # Update axes
+        fig.update_xaxes(
+            gridcolor='var(--colors-neutral-200)',
+            linecolor='var(--colors-neutral-300)',
+            title_font=dict(size=12)
+        )
+        
+        fig.update_yaxes(
+            gridcolor='var(--colors-neutral-200)',
+            linecolor='var(--colors-neutral-300)',
+            title_font=dict(size=12)
+        )
+        
+        return fig
+    
+    @staticmethod
+    def create_gauge(value: float, **kwargs) -> go.Figure:
+        """Create a gauge chart for metrics"""
+        title = kwargs.get('title', '')
+        min_val = kwargs.get('min', 0)
+        max_val = kwargs.get('max', 100)
+        
+        fig = go.Figure(go.Indicator(
+            mode="gauge+number",
+            value=value,
+            domain={'x': [0, 1], 'y': [0, 1]},
+            title={
+                'text': title,
+                'font': {
+                    'size': 16,
+                    'family': 'var(--font-sans)'
+                }
+            },
+            number={
+                'font': {
+                    'size': 28,
+                    'family': 'var(--font-sans)'
+                }
+            },
+            gauge={
+                'axis': {
+                    'range': [min_val, max_val],
+                    'tickwidth': 1,
+                    'tickcolor': "var(--colors-neutral-700)"
+                },
+                'bar': {'color': "var(--color-primary)"},
+                'bgcolor': "white",
+                'borderwidth': 2,
+                'bordercolor': "var(--colors-neutral-300)",
+                'steps': [
+                    {
+                        'range': [min_val, max_val * 0.3],
+                        'color': 'var(--color-success)'
+                    },
+                    {
+                        'range': [max_val * 0.3, max_val * 0.7],
+                        'color': 'var(--color-warning)'
+                    },
+                    {
+                        'range': [max_val * 0.7, max_val],
+                        'color': 'var(--color-danger)'
+                    }
+                ],
+                'threshold': {
+                    'line': {'color': "var(--colors-neutral-900)", 'width': 4},
+                    'thickness': 0.75,
+                    'value': value
+                }
+            }
+        ))
+        
+        fig.update_layout(
+            height=300,
+            margin=dict(l=30, r=30, t=70, b=30),
+            paper_bgcolor='white',
+            font={
+                'family': 'var(--font-sans)'
+            }
+        )
+        
+        return fig
+
+# ===========================================
+# RESPONSIVE UTILITIES
+# ===========================================
+class ResponsiveUtils:
+    """Responsive design utilities"""
+    
+    @staticmethod
+    def create_responsive_styles() -> str:
+        """Generate responsive CSS utilities"""
+        return """
+        <style>
+        /* Container utilities */
+        .container {
+            width: 100%;
+            margin-left: auto;
+            margin-right: auto;
+            padding-left: var(--spacing-4);
+            padding-right: var(--spacing-4);
+        }
+        
+        @media (min-width: 640px) {
+            .container {
+                max-width: 640px;
+            }
+        }
+        
+        @media (min-width: 768px) {
+            .container {
+                max-width: 768px;
+            }
+        }
+        
+        @media (min-width: 1024px) {
+            .container {
+                max-width: 1024px;
+            }
+        }
+        
+        @media (min-width: 1280px) {
+            .container {
+                max-width: 1280px;
+            }
+        }
+        
+        /* Responsive hide/show */
+        .hide-on-mobile {
+            display: none;
+        }
+        
+        .show-on-mobile {
+            display: block;
+        }
+        
+        @media (min-width: 768px) {
+            .hide-on-mobile {
+                display: block;
+            }
+            
+            .show-on-mobile {
+                display: none;
+            }
+        }
+        
+        /* Responsive text sizes */
+        .text-responsive {
+            font-size: var(--typography-fontSizes-sm);
+        }
+        
+        @media (min-width: 768px) {
+            .text-responsive {
+                font-size: var(--typography-fontSizes-base);
+            }
+        }
+        
+        @media (min-width: 1024px) {
+            .text-responsive {
+                font-size: var(--typography-fontSizes-lg);
+            }
+        }
+        
+        /* Responsive spacing */
+        .responsive-padding {
+            padding: var(--spacing-2);
+        }
+        
+        @media (min-width: 768px) {
+            .responsive-padding {
+                padding: var(--spacing-4);
+            }
+        }
+        
+        @media (min-width: 1024px) {
+            .responsive-padding {
+                padding: var(--spacing-6);
+            }
+        }
+        </style>
+        """
+    
+    @staticmethod
+    def create_mobile_navigation() -> str:
+        """Create mobile-friendly navigation toggle"""
+        return """
+        <style>
+        /* Mobile navigation */
+        .mobile-nav-toggle {
+            display: none;
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            z-index: 1000;
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            background: var(--color-primary);
+            color: white;
+            border: none;
+            font-size: 24px;
+            cursor: pointer;
+            align-items: center;
+            justify-content: center;
+            box-shadow: var(--shadows-md);
+        }
+        
+        @media (max-width: 768px) {
+            .mobile-nav-toggle {
+                display: flex;
+            }
+            
+            .main-nav {
+                position: fixed;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background: var(--colors-neutral-50);
+                padding: 80px 20px 20px;
+                transform: translateX(-100%);
+                transition: transform var(--transition-normal);
+                z-index: 999;
+                overflow-y: auto;
+            }
+            
+            .main-nav.open {
+                transform: translateX(0);
+            }
+        }
+        
+        /* Touch-friendly buttons */
+        @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 */
+            }
+        }
+        </style>
+        
+        <button class="mobile-nav-toggle" id="mobileNavToggle" aria-label="Toggle navigation">
+            ☰
+        </button>
+        
+        <script>
+        document.getElementById('mobileNavToggle').addEventListener('click', function() {
+            const nav = document.querySelector('.main-nav');
+            nav.classList.toggle('open');
+            this.setAttribute('aria-expanded', nav.classList.contains('open'));
+        });
+        
+        // Close mobile nav when clicking outside
+        document.addEventListener('click', function(event) {
+            const nav = document.querySelector('.main-nav');
+            const toggle = document.getElementById('mobileNavToggle');
+            
+            if (nav && nav.classList.contains('open') && 
+                !nav.contains(event.target) && 
+                !toggle.contains(event.target)) {
+                nav.classList.remove('open');
+                toggle.setAttribute('aria-expanded', 'false');
+            }
+        });
+        </script>
+        """
+
+# ===========================================
+# ACCESSIBILITY ENHANCEMENTS
+# ===========================================
+class Accessibility:
+    """Accessibility enhancements"""
+    
+    @staticmethod
+    def create_skip_link() -> str:
+        """Create skip to content link for keyboard users"""
+        return """
+        <a href="#main-content" class="skip-link">
+            Skip to main content
+        </a>
+        
+        <style>
+        .skip-link {
+            position: absolute;
+            top: -40px;
+            left: 0;
+            background: var(--color-primary);
+            color: white;
+            padding: 8px 16px;
+            text-decoration: none;
+            z-index: 9999;
+            border-radius: 0 0 var(--borderRadius-md) 0;
+        }
+        
+        .skip-link:focus {
+            top: 0;
+        }
+        </style>
+        """
+    
+    @staticmethod
+    def create_focus_management() -> str:
+        """Focus management for modals and dialogs"""
+        return """
+        <script>
+        // Focus trap for modals
+        class FocusTrap {
+            constructor(container) {
+                this.container = container;
+                this.firstFocusable = null;
+                this.lastFocusable = null;
+                this.previousFocus = null;
+                
+                this.init();
+            }
+            
+            init() {
+                const focusableElements = this.container.querySelectorAll(
+                    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+                );
+                
+                if (focusableElements.length > 0) {
+                    this.firstFocusable = focusableElements[0];
+                    this.lastFocusable = focusableElements[focusableElements.length - 1];
+                    this.previousFocus = document.activeElement;
+                    
+                    this.firstFocusable.focus();
+                    
+                    // Add keydown listener for trap
+                    this.container.addEventListener('keydown', (e) => this.handleKeyDown(e));
+                }
+            }
+            
+            handleKeyDown(e) {
+                if (e.key === 'Tab') {
+                    if (e.shiftKey) {
+                        // Shift + Tab
+                        if (document.activeElement === this.firstFocusable) {
+                            e.preventDefault();
+                            this.lastFocusable.focus();
+                        }
+                    } else {
+                        // Tab
+                        if (document.activeElement === this.lastFocusable) {
+                            e.preventDefault();
+                            this.firstFocusable.focus();
+                        }
+                    }
+                } else if (e.key === 'Escape') {
+                    // Close modal and return focus
+                    this.close();
+                }
+            }
+            
+            close() {
+                if (this.previousFocus) {
+                    this.previousFocus.focus();
+                }
+                this.container.removeEventListener('keydown', this.handleKeyDown);
+            }
+        }
+        
+        // Initialize focus traps for all modals
+        document.addEventListener('DOMContentLoaded', () => {
+            document.querySelectorAll('[role="dialog"]').forEach(modal => {
+                new FocusTrap(modal);
+            });
+        });
+        </script>
+        """
+    
+    @staticmethod
+    def create_aria_live_regions() -> str:
+        """Create ARIA live regions for dynamic content"""
+        return """
+        <div aria-live="polite" aria-atomic="true" class="sr-only" id="status-announcements">
+            <!-- Status messages will be injected here -->
+        </div>
+        
+        <div aria-live="assertive" aria-atomic="true" class="sr-only" id="alert-announcements">
+            <!-- Alert messages will be injected here -->
+        </div>
+        
+        <script>
+        // Utility functions for announcing messages
+        const AriaAnnouncer = {
+            announceStatus(message) {
+                const region = document.getElementById('status-announcements');
+                region.textContent = message;
+                
+                // Clear after announcement
+                setTimeout(() => {
+                    region.textContent = '';
+                }, 1000);
+            },
+            
+            announceAlert(message) {
+                const region = document.getElementById('alert-announcements');
+                region.textContent = message;
+                
+                // Clear after announcement
+                setTimeout(() => {
+                    region.textContent = '';
+                }, 1000);
+            }
+        };
+        
+        // Example usage:
+        // AriaAnnouncer.announceStatus('Analysis complete');
+        // AriaAnnouncer.announceAlert('Error detected');
+        </script>
+        """
+
+# ===========================================
+# DARK MODE SUPPORT
+# ===========================================
+class DarkMode:
+    """Dark mode toggle and management"""
+    
+    @staticmethod
+    def create_toggle() -> str:
+        """Create dark mode toggle with system preference detection"""
+        return """
+        <button class="dark-mode-toggle" id="darkModeToggle" aria-label="Toggle dark mode">
+            <span class="light-icon">☀️</span>
+            <span class="dark-icon">🌙</span>
+        </button>
+        
+        <script>
+        class DarkModeManager {
+            constructor() {
+                this.toggle = document.getElementById('darkModeToggle');
+                this.prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
+                this.savedTheme = localStorage.getItem('theme');
+                
+                this.init();
+            }
+            
+            init() {
+                // Set initial theme
+                const initialTheme = this.savedTheme || 
+                    (this.prefersDark.matches ? 'dark' : 'light');
+                this.setTheme(initialTheme);
+                
+                // Add click listener
+                this.toggle.addEventListener('click', () => this.toggleTheme());
+                
+                // Listen for system preference changes
+                this.prefersDark.addEventListener('change', (e) => {
+                    if (!this.savedTheme) {
+                        this.setTheme(e.matches ? 'dark' : 'light');
+                    }
+                });
+            }
+            
+            setTheme(theme) {
+                document.documentElement.setAttribute('data-theme', theme);
+                localStorage.setItem('theme', theme);
+                
+                // Update toggle state
+                if (theme === 'dark') {
+                    this.toggle.classList.add('dark');
+                    this.toggle.setAttribute('aria-label', 'Switch to light mode');
+                } else {
+                    this.toggle.classList.remove('dark');
+                    this.toggle.setAttribute('aria-label', 'Switch to dark mode');
+                }
+            }
+            
+            toggleTheme() {
+                const currentTheme = document.documentElement.getAttribute('data-theme');
+                const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+                
+                this.setTheme(newTheme);
+                this.savedTheme = newTheme;
+            }
+        }
+        
+        // Initialize when DOM is ready
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', () => new DarkModeManager());
+        } else {
+            new DarkModeManager();
+        }
+        </script>
+        
+        <style>
+        .dark-mode-toggle {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            background: var(--colors-neutral-100);
+            border: 2px solid var(--colors-neutral-300);
+            color: var(--colors-neutral-700);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all var(--transition-normal);
+            z-index: 1000;
+        }
+        
+        .dark-mode-toggle:hover {
+            transform: scale(1.1);
+            box-shadow: var(--shadows-md);
+        }
+        
+        .dark-mode-toggle.dark {
+            background: var(--colors-neutral-800);
+            border-color: var(--colors-neutral-600);
+            color: var(--colors-neutral-300);
+        }
+        
+        .dark-icon {
+            display: none;
+        }
+        
+        .dark-mode-toggle.dark .light-icon {
+            display: none;
+        }
+        
+        .dark-mode-toggle.dark .dark-icon {
+            display: inline;
+        }
+        
+        /* Smooth transitions for theme changes */
+        * {
+            transition: background-color var(--transition-normal),
+                       border-color var(--transition-normal),
+                       color var(--transition-normal);
+        }
+        </style>
+        """
+
+# ===========================================
+# COMPONENT STYLES (CSS)
+# ===========================================
+def create_component_styles() -> str:
+    """Create all component styles in one place"""
+    return """
+    <style>
+    /* Card styles */
+    .card {
+        background: var(--colors-neutral-50);
+        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);
+    }
+    
+    .card:hover {
+        box-shadow: var(--shadows-md);
+    }
+    
+    .card-elevated {
+        box-shadow: var(--shadows-lg);
+        border: none;
+    }
+    
+    .card-outlined {
+        border: 2px solid var(--border-color, var(--color-primary));
+        background: transparent;
+    }
+    
+    .card-filled {
+        background: var(--color-primary);
+        color: white;
+        border: none;
+    }
+    
+    .card-header {
+        margin-bottom: var(--spacing-4);
+        border-bottom: 1px solid var(--colors-neutral-200);
+        padding-bottom: var(--spacing-3);
+    }
+    
+    .card-title {
+        margin: 0;
+        font-size: var(--typography-fontSizes-xl);
+        font-weight: var(--typography-fontWeights-semibold);
+        color: var(--colors-neutral-900);
+    }
+    
+    .card-body {
+        color: var(--colors-neutral-700);
+    }
+    
+    .card-footer {
+        margin-top: var(--spacing-4);
+        padding-top: var(--spacing-3);
+        border-top: 1px solid var(--colors-neutral-200);
+        color: var(--colors-neutral-600);
+        font-size: var(--typography-fontSizes-sm);
+    }
+    
+    /* Metric card */
+    .card-metric {
+        text-align: center;
+        padding: var(--spacing-4);
+    }
+    
+    .metric-value {
+        font-size: var(--typography-fontSizes-3xl);
+        font-weight: var(--typography-fontWeights-bold);
+        color: var(--colors-neutral-900);
+        margin-bottom: var(--spacing-2);
+        font-family: var(--font-mono);
+    }
+    
+    .metric-label {
+        font-size: var(--typography-fontSizes-sm);
+        color: var(--colors-neutral-600);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        margin-bottom: var(--spacing-2);
+    }
+    
+    .metric-trend {
+        font-size: var(--typography-fontSizes-sm);
+        font-weight: var(--typography-fontWeights-semibold);
+    }
+    
+    /* Button styles */
+    .btn {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: var(--spacing-2) var(--spacing-4);
+        border-radius: var(--borderRadius-md);
+        font-weight: var(--typography-fontWeights-medium);
+        font-size: var(--typography-fontSizes-sm);
+        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(--colors-primary-600);
+    }
+    
+    .btn-secondary {
+        background: var(--colors-neutral-100);
+        color: var(--colors-neutral-700);
+        border: 1px solid var(--colors-neutral-300);
+    }
+    
+    .btn-secondary:hover:not(:disabled) {
+        background: var(--colors-neutral-200);
+    }
+    
+    .btn-danger {
+        background: var(--color-danger);
+        color: white;
+    }
+    
+    .btn-danger:hover:not(:disabled) {
+        background: var(--colors-danger-600);
+    }
+    
+    .btn-ghost {
+        background: transparent;
+        color: var(--colors-neutral-700);
+    }
+    
+    .btn-ghost:hover:not(:disabled) {
+        background: var(--colors-neutral-100);
+    }
+    
+    .btn-sm {
+        padding: var(--spacing-1) var(--spacing-3);
+        font-size: var(--typography-fontSizes-xs);
+    }
+    
+    .btn-lg {
+        padding: var(--spacing-3) var(--spacing-6);
+        font-size: var(--typography-fontSizes-base);
+    }
+    
+    .btn.full-width {
+        width: 100%;
+    }
+    
+    .btn-icon {
+        width: 40px;
+        height: 40px;
+        border-radius: var(--borderRadius-md);
+        background: transparent;
+        border: none;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: background var(--transition-fast);
+    }
+    
+    .btn-icon:hover {
+        background: var(--colors-neutral-100);
+    }
+    
+    /* Badge styles */
+    .badge {
+        display: inline-block;
+        padding: var(--spacing-1) var(--spacing-2);
+        border-radius: var(--borderRadius-full);
+        font-size: var(--typography-fontSizes-xs);
+        font-weight: var(--typography-fontWeights-medium);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+    }
+    
+    .badge-default {
+        background: var(--colors-neutral-100);
+        color: var(--colors-neutral-700);
+    }
+    
+    .badge-success {
+        background: var(--colors-success-100);
+        color: var(--colors-success-700);
+    }
+    
+    .badge-warning {
+        background: var(--colors-warning-100);
+        color: var(--colors-warning-700);
+    }
+    
+    .badge-danger {
+        background: var(--colors-danger-100);
+        color: var(--colors-danger-700);
+    }
+    
+    .badge-sm {
+        padding: 2px 6px;
+        font-size: 10px;
+    }
+    
+    .badge-lg {
+        padding: var(--spacing-1) var(--spacing-3);
+        font-size: var(--typography-fontSizes-sm);
+    }
+    
+    /* 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-4) 0;
+    }
+    
+    .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%, black);
+        font-size: var(--typography-fontSizes-2xl);
+    }
+    
+    .observation-title p {
+        margin: var(--spacing-1) 0 0 0;
+        color: color-mix(in srgb, var(--status-color, var(--color-warning)) 70%, black);
+    }
+    
+    .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;
+    }
+    
+    .confidence-comparison {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: var(--spacing-4);
+        margin: var(--spacing-4) 0;
+    }
+    
+    .confidence-item {
+        background: white;
+        border-radius: var(--borderRadius-lg);
+        padding: var(--spacing-4);
+        text-align: center;
+        border: 1px solid var(--colors-neutral-200);
+    }
+    
+    .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);
+    }
+    
+    /* Process display styles */
+    .process-card {
+        border: 2px solid var(--colors-neutral-300);
+        border-radius: var(--borderRadius-lg);
+        padding: var(--spacing-4);
+        margin: var(--spacing-3) 0;
+        background: var(--colors-neutral-50);
+    }
+    
+    .process-card[data-status="active"] {
+        border-color: var(--color-success);
+        background: color-mix(in srgb, var(--color-success) 5%, transparent);
+    }
+    
+    .process-card[data-status="error"] {
+        border-color: var(--color-danger);
+        background: color-mix(in srgb, var(--color-danger) 5%, transparent);
+    }
+    
+    .process-header {
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-3);
+        margin-bottom: var(--spacing-3);
+    }
+    
+    .process-icon {
+        font-size: 32px;
+    }
+    
+    .process-title h4 {
+        margin: 0;
+        font-size: var(--typography-fontSizes-lg);
+        color: var(--colors-neutral-900);
+    }
+    
+    .process-title p {
+        margin: var(--spacing-1) 0 0 0;
+        font-size: var(--typography-fontSizes-sm);
+        color: var(--colors-neutral-600);
+    }
+    
+    .process-status {
+        margin-left: auto;
+        padding: var(--spacing-1) var(--spacing-3);
+        background: var(--status-color, var(--colors-neutral-300));
+        color: white;
+        border-radius: var(--borderRadius-full);
+        font-size: var(--typography-fontSizes-xs);
+        font-weight: var(--typography-fontWeights-bold);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+    }
+    
+    .process-metrics {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: var(--spacing-3);
+        margin-bottom: var(--spacing-3);
+    }
+    
+    .process-metric {
+        background: white;
+        border-radius: var(--borderRadius-md);
+        padding: var(--spacing-2);
+        border: 1px solid var(--colors-neutral-200);
+    }
+    
+    .metric-key {
+        font-size: var(--typography-fontSizes-xs);
+        color: var(--colors-neutral-600);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+    }
+    
+    .metric-value {
+        font-size: var(--typography-fontSizes-lg);
+        font-weight: var(--typography-fontWeights-semibold);
+        color: var(--colors-neutral-900);
+        font-family: var(--font-mono);
+    }
+    
+    /* Responsive adjustments */
+    @media (max-width: 768px) {
+        .confidence-comparison {
+            grid-template-columns: 1fr;
+        }
+        
+        .process-metrics {
+            grid-template-columns: 1fr;
+        }
+        
+        .observation-gate-header {
+            flex-direction: column;
+            text-align: center;
+            gap: var(--spacing-2);
+        }
+        
+        .observation-badge {
+            margin-left: 0;
+            margin-top: var(--spacing-2);
+        }
+    }
+    
+    @media (max-width: 480px) {
+        .card {
+            padding: var(--spacing-3);
+        }
+        
+        .observation-gate {
+            padding: var(--spacing-3);
+        }
+        
+        .metric-value {
+            font-size: var(--typography-fontSizes-2xl);
+        }
+    }
+    </style>
+    """
+
+# ===========================================
+# INITIALIZATION FUNCTION
+# ===========================================
+def initialize_modern_ui() -> str:
+    """Initialize all modern UI components and styles"""
+    components = [
+        inject_design_tokens(),
+        create_component_styles(),
+        ResponsiveUtils.create_responsive_styles(),
+        Accessibility.create_skip_link(),
+        Accessibility.create_aria_live_regions(),
+        DarkMode.create_toggle(),
+        ResponsiveUtils.create_mobile_navigation(),
+        Accessibility.create_focus_management()
+    ]
+    
+    return "\n".join(components)
+
+# ===========================================
+# EXAMPLE USAGE (for documentation)
+# ===========================================
+def create_example_dashboard() -> str:
+    """Create an example dashboard using modern components"""
+    
+    # Example metrics
+    metrics = [
+        {"value": "42s", "label": "Detection Time", "trend": "down", "change": "↓ 90%"},
+        {"value": "94%", "label": "Recall Quality", "trend": "up", "change": "↑ 8%"},
+        {"value": "87%", "label": "Confidence Score", "trend": "neutral", "change": "→"},
+        {"value": "Dampening", "label": "Sequencing Stage", "trend": None}
+    ]
+    
+    # Example process data
+    detection_process = {
+        "status": "active",
+        "title": "Detection Process",
+        "description": "Telemetry analysis & pattern recognition",
+        "metrics": {
+            "Pattern Match": "Retry Amplification",
+            "Confidence": "92.7%",
+            "Detection Time": "0.8 seconds",
+            "Severity": "HIGH_VARIANCE"
+        },
+        "content": """
+        <div class="success-message">
+            ✅ Detected: Retry amplification pattern with exponential growth (r=1.8)
+        </div>
+        """,
+        "next_step": "Activate recall process"
+    }
+    
+    # Build dashboard
+    dashboard = f"""
+    {initialize_modern_ui()}
+    
+    <div class="container" style="max-width: 1200px; margin: 0 auto;">
+        <h1>Modern ARF Dashboard</h1>
+        
+        <!-- Metric Grid -->
+        {Grid.create_metric_grid(metrics)}
+        
+        <!-- Observation Gate -->
+        {ObservationGate.create(confidence=65.0)}
+        
+        <!-- Process Display -->
+        {ProcessDisplay.create('detection', detection_process)}
+        
+        <!-- Sequencing Flow -->
+        {SequencingFlow.create([
+            {"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"}
+        ])}
+        
+        <!-- Example Cards -->
+        <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 30px;">
+            {Card.create(
+                title="OSS Analysis",
+                content="Open source advisory intelligence",
+                footer="Apache 2.0 License",
+                variant="outlined",
+                border_color="var(--color-success)"
+            )}
+            
+            {Card.create(
+                title="Enterprise Execution",
+                content="Commercial autonomous execution",
+                footer="Requires License",
+                variant="elevated"
+            )}
+        </div>
+    </div>
+    """
+    
+    return dashboard
+
+# ===========================================
+# EXPORT LIST
+# ===========================================
+__all__ = [
+    # Core components
+    'ModernComponent', 'Card', 'Button', 'Badge',
+    'Grid', 'Stack',
+    
+    # ARF-specific components
+    'ObservationGate', 'SequencingFlow', 'ProcessDisplay',
+    
+    # Visualization
+    'Chart',
+    
+    # Utilities
+    'ResponsiveUtils', 'Accessibility', 'DarkMode',
+    
+    # Initialization
+    'initialize_modern_ui', 'create_example_dashboard',
+    
+    # Constants
+    'DESIGN_TOKENS'
+]
+
+# ===========================================
+# TESTING CODE (Remove in production)
+# ===========================================
+if __name__ == "__main__":
+    # Test that components can be created
+    print("Testing modern components...")
+    
+    # Create example dashboard
+    example = create_example_dashboard()
+    
+    # Save to file for inspection
+    with open("modern_dashboard_example.html", "w") as f:
+        f.write(example)
+    
+    print("✅ Modern components created successfully")
+    print("📄 Example saved to: modern_dashboard_example.html")