Update ui/modern_components.py

ui/modern_components.py

@@ -1,27 +1,24 @@
 """
-ui/modern_components.py
-🚀 Modern UI Components for ARF v3.3.9
-Enhanced with design system, accessibility, and performance features
-
+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. Responsive, mobile-first components
+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. Progressive enhancement
+6. Integration with arf_modern_ui.py systems
 """
 
 import json
-from datetime import datetime
+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
-import pandas as pd
 
 # ===========================================
-# DESIGN TOKEN SYSTEM (CSS Variables in JavaScript)
+# DESIGN TOKEN SYSTEM - ALIGNED WITH arf_modern_ui.py
 # ===========================================
 DESIGN_TOKENS = {
     "colors": {
@@ -31,7 +28,7 @@ DESIGN_TOKENS = {
             "200": "#bfdbfe",
             "300": "#93c5fd",
             "400": "#60a5fa",
-            "500": "#3b82f6",
+            "500": "#3b82f6",      # enterprise_primary
             "600": "#2563eb",
             "700": "#1d4ed8",
             "800": "#1e40af",
@@ -43,7 +40,7 @@ DESIGN_TOKENS = {
             "200": "#bbf7d0",
             "300": "#86efac",
             "400": "#4ade80",
-            "500": "#22c55e",
+            "500": "#22c55e",      # success
             "600": "#16a34a",
             "700": "#15803d",
             "800": "#166534",
@@ -55,7 +52,7 @@ DESIGN_TOKENS = {
             "200": "#fde68a",
             "300": "#fcd34d",
             "400": "#fbbf24",
-            "500": "#f59e0b",
+            "500": "#f59e0b",      # warning
             "600": "#d97706",
             "700": "#b45309",
             "800": "#92400e",
@@ -67,7 +64,7 @@ DESIGN_TOKENS = {
             "200": "#fecaca",
             "300": "#fca5a5",
             "400": "#f87171",
-            "500": "#ef4444",
+            "500": "#ef4444",      # danger
             "600": "#dc2626",
             "700": "#b91c1c",
             "800": "#991b1b",
@@ -164,11 +161,16 @@ def inject_design_tokens() -> str:
     :root {{
         {chr(10).join(css_variables)}
         
-        /* Semantic aliases */
-        --color-primary: var(--colors-primary-500);
+        /* 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);
@@ -178,13 +180,13 @@ def inject_design_tokens() -> str:
         --spacing-xl: var(--spacing-8);
         
         /* Font families */
-        --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+        --font-sans: system-ui, -apple-system, sans-serif;
         --font-mono: 'JetBrains Mono', 'SF Mono', Monaco, 'Cascadia Code', monospace;
         
-        /* Transitions */
+        /* Transitions matching arf_modern_ui.py */
         --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);
+        --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 */
@@ -215,7 +217,7 @@ def inject_design_tokens() -> str:
     }}
     
     .focus-ring {{
-        outline: 2px solid var(--color-primary);
+        outline: 2px solid var(--color-enterprise-primary);
         outline-offset: 2px;
     }}
     
@@ -343,180 +345,15 @@ class Card(ModernComponent):
         </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
+# CRITICAL PSYCHOLOGICAL COMPONENTS
 # ===========================================
 class ObservationGate(ModernComponent):
-    """Observation gate component showing system restraint"""
+    """Observation gate component showing system restraint - PSYCHOLOGICAL CORE"""
     
     @staticmethod
     def create(confidence: float = 65.0, **kwargs) -> str:
-        """Create observation gate display"""
+        """Create observation gate display with psychological restraint"""
         reason = kwargs.get('reason', 'uncertainty_too_high_for_action')
         frozen_until = kwargs.get('frozen_until', '')
         
@@ -526,20 +363,52 @@ class ObservationGate(ModernComponent):
         # 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>
-            """
+            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">⏳</div>
+                <div class="observation-icon">{icon}</div>
                 <div class="observation-title">
                     <h3>{status_text}</h3>
                     <p>System restraint engaged</p>
@@ -550,12 +419,7 @@ class ObservationGate(ModernComponent):
             </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>
+                {restraint_message}
                 
                 <div class="confidence-comparison">
                     <div class="confidence-item">
@@ -567,19 +431,19 @@ class ObservationGate(ModernComponent):
                     <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 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}%;"></div>
+                        <div class="scale-bar" style="width: {confidence}%; background: {status_color};"></div>
                     </div>
                     <div class="scale-labels">
-                        <span>Observe ({confidence:.1f}%)</span>
+                        <span>{"Observe" if is_blocked else "Ready"} ({confidence:.1f}%)</span>
                         <span>Threshold ({threshold}%)</span>
-                        <span>Act (75%+)</span>
+                        <span>{"Act" if is_blocked else "Proceed"} (75%+)</span>
                     </div>
                 </div>
                 
@@ -598,11 +462,19 @@ class ObservationGate(ModernComponent):
         """
 
 class SequencingFlow(ModernComponent):
-    """Visualization of policy-enforced sequencing"""
+    """Visualization of policy-enforced sequencing - PSYCHOLOGICAL CORE"""
     
     @staticmethod
-    def create(steps: List[Dict[str, Any]], **kwargs) -> str:
+    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 = []
@@ -651,14 +523,15 @@ class SequencingFlow(ModernComponent):
                     <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>
+                    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)"""
+    """Display for ARF processes (Detection, Recall, Decision) - PSYCHOLOGICAL CORE"""
     
     @staticmethod
     def create(process_type: str, data: Dict[str, Any]) -> str:
@@ -707,6 +580,19 @@ class ProcessDisplay(ModernComponent):
             </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">
@@ -722,687 +608,389 @@ class ProcessDisplay(ModernComponent):
             
             <div class="process-body">
                 {metrics_html}
-                
-                {data.get('content', '')}
-                
+                {content_html}
                 {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
+class HistoricalEvidencePanel(ModernComponent):
+    """Historical evidence panel - PSYCHOLOGICAL CORE (Recall Dominance)"""
     
     @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': [
+    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": [
                     {
-                        'range': [min_val, max_val * 0.3],
-                        'color': 'var(--color-success)'
+                        "date": "2024-11-15",
+                        "environment": "prod-east",
+                        "action": "Scale during retry storm",
+                        "outcome": "Amplification increased 300%",
+                        "lesson": "Scaling during amplification worsens the problem"
                     },
                     {
-                        'range': [max_val * 0.3, max_val * 0.7],
-                        'color': 'var(--color-warning)'
+                        "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"
                     },
                     {
-                        'range': [max_val * 0.7, max_val],
-                        'color': 'var(--color-danger)'
+                        "date": "2024-10-17",
+                        "environment": "prod-eu",
+                        "action": "Circuit breaker + observability",
+                        "outcome": "12 min recovery, 0 user impact",
+                        "lesson": "Sequencing prevented escalation"
                     }
-                ],
-                '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);
-        }
+        # 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>
+            """
         
-        @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);
-            }
-        }
+        # 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>
+            """
         
-        /* Touch-friendly buttons */
-        @media (hover: none) and (pointer: coarse) {
-            .btn, button, [role="button"] {
-                min-height: 44px;
-                min-width: 44px;
-            }
+        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>
             
-            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');
+            <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>
             
-            if (nav && nav.classList.contains('open') && 
-                !nav.contains(event.target) && 
-                !toggle.contains(event.target)) {
-                nav.classList.remove('open');
-                toggle.setAttribute('aria-expanded', 'false');
-            }
-        });
-        </script>
+            <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>
         """
 
-# ===========================================
-# ACCESSIBILITY ENHANCEMENTS
-# ===========================================
-class Accessibility:
-    """Accessibility enhancements"""
+class HealingIntentDisplay(ModernComponent):
+    """Formal HealingIntent display - PSYCHOLOGICAL CORE"""
     
     @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;
-        }
+    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>"
         
-        .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;
+        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>
                 
-                this.init();
-            }
+                <div class="intent-section">
+                    <div class="section-title">Sequencing Rule</div>
+                    <div class="section-content sequencing-rule">
+                        {sequencing_rule}
+                    </div>
+                </div>
+            </div>
             
-            init() {
-                const focusableElements = this.container.querySelectorAll(
-                    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-                );
+            <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>
                 
-                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));
-                }
-            }
+                <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>
             
-            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();
-                }
-            }
+            {historical_html if historical_html else ''}
             
-            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 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>
-        
-        <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
+# COMPONENT STYLES (CSS) - ENHANCED
 # ===========================================
-class DarkMode:
-    """Dark mode toggle and management"""
+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;
+    }
     
-    @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);
+        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);
     }
     
-    .card-elevated {
-        box-shadow: var(--shadows-lg);
-        border: none;
+    /* 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);
     }
     
-    .card-outlined {
-        border: 2px solid var(--border-color, var(--color-primary));
-        background: transparent;
+    [data-theme="dark"] .observation-gate {
+        color: var(--colors-neutral-100);
     }
     
-    .card-filled {
-        background: var(--color-primary);
-        color: white;
-        border: none;
+    .observation-gate-header {
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-4);
+        margin-bottom: var(--spacing-4);
     }
     
-    .card-header {
-        margin-bottom: var(--spacing-4);
-        border-bottom: 1px solid var(--colors-neutral-200);
-        padding-bottom: var(--spacing-3);
+    .observation-icon {
+        font-size: 48px;
+        color: var(--status-color, var(--color-warning));
     }
     
-    .card-title {
+    .observation-title h3 {
         margin: 0;
-        font-size: var(--typography-fontSizes-xl);
-        font-weight: var(--typography-fontWeights-semibold);
+        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);
     }
     
-    .card-body {
+    .psych-message p {
+        margin: var(--spacing-2) 0;
         color: var(--colors-neutral-700);
+        line-height: 1.6;
     }
     
-    .card-footer {
-        margin-top: var(--spacing-4);
-        padding-top: var(--spacing-3);
-        border-top: 1px solid var(--colors-neutral-200);
+    .psych-note {
+        font-style: italic;
         color: var(--colors-neutral-600);
-        font-size: var(--typography-fontSizes-sm);
+        margin-top: var(--spacing-2);
+        border-left: 3px solid var(--status-color, var(--color-warning));
+        padding-left: var(--spacing-3);
     }
     
-    /* Metric card */
-    .card-metric {
-        text-align: center;
+    .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);
     }
     
-    .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);
+    [data-theme="dark"] .confidence-item {
+        background: var(--colors-neutral-800);
+        border-color: var(--colors-neutral-700);
     }
     
-    .metric-label {
+    .confidence-label {
         font-size: var(--typography-fontSizes-sm);
         color: var(--colors-neutral-600);
         text-transform: uppercase;
@@ -1410,301 +998,609 @@ def create_component_styles() -> str:
         margin-bottom: var(--spacing-2);
     }
     
-    .metric-trend {
-        font-size: var(--typography-fontSizes-sm);
-        font-weight: var(--typography-fontWeights-semibold);
+    .confidence-value {
+        font-size: var(--typography-fontSizes-3xl);
+        font-weight: var(--typography-fontWeights-bold);
+        margin-bottom: var(--spacing-1);
     }
     
-    /* 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);
+    .confidence-note {
+        font-size: var(--typography-fontSizes-xs);
+        color: var(--colors-neutral-500);
     }
     
-    .btn:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
+    .confidence-visualization {
+        margin: var(--spacing-6) 0;
     }
     
-    .btn-primary {
-        background: var(--color-primary);
-        color: white;
+    .confidence-scale {
+        height: 8px;
+        background: var(--colors-neutral-200);
+        border-radius: var(--borderRadius-full);
+        position: relative;
+        margin: var(--spacing-4) 0 var(--spacing-2);
     }
     
-    .btn-primary:hover:not(:disabled) {
-        background: var(--colors-primary-600);
+    .scale-bar {
+        height: 100%;
+        border-radius: var(--borderRadius-full);
+        transition: width var(--transition-normal);
     }
     
-    .btn-secondary {
-        background: var(--colors-neutral-100);
+    .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);
-        border: 1px solid var(--colors-neutral-300);
+        font-size: var(--typography-fontSizes-sm);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
     }
     
-    .btn-secondary:hover:not(:disabled) {
-        background: var(--colors-neutral-200);
+    .action-tags {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--spacing-2);
     }
     
-    .btn-danger {
+    .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);
     }
     
-    .btn-danger:hover:not(:disabled) {
-        background: var(--colors-danger-600);
+    /* 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;
     }
     
-    .btn-ghost {
-        background: transparent;
-        color: var(--colors-neutral-700);
+    [data-theme="dark"] .sequencing-flow {
+        background: var(--colors-neutral-800);
     }
     
-    .btn-ghost:hover:not(:disabled) {
-        background: var(--colors-neutral-100);
+    .sequencing-header {
+        margin-bottom: var(--spacing-6);
+        text-align: center;
     }
     
-    .btn-sm {
-        padding: var(--spacing-1) var(--spacing-3);
+    .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;
     }
     
-    .btn-lg {
-        padding: var(--spacing-3) var(--spacing-6);
-        font-size: var(--typography-fontSizes-base);
+    .sequencing-steps {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        position: relative;
+        margin: var(--spacing-8) 0;
     }
     
-    .btn.full-width {
-        width: 100%;
+    .step-connectors {
+        position: absolute;
+        top: 30px;
+        left: 60px;
+        right: 60px;
+        display: flex;
+        justify-content: space-between;
+        z-index: 1;
     }
     
-    .btn-icon {
-        width: 40px;
-        height: 40px;
-        border-radius: var(--borderRadius-md);
-        background: transparent;
-        border: none;
-        cursor: pointer;
+    .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;
-        transition: background var(--transition-fast);
+        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);
     }
     
-    .btn-icon:hover {
-        background: var(--colors-neutral-100);
+    .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;
     }
     
-    /* Badge styles */
-    .badge {
+    .step-badge {
         display: inline-block;
-        padding: var(--spacing-1) var(--spacing-2);
+        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-medium);
-        text-transform: uppercase;
-        letter-spacing: 0.05em;
+        font-weight: var(--typography-fontWeights-bold);
+        margin-top: var(--spacing-2);
     }
     
-    .badge-default {
-        background: var(--colors-neutral-100);
-        color: var(--colors-neutral-700);
+    .sequencing-step.current .step-badge {
+        background: var(--color-enterprise-primary);
+        color: white;
     }
     
-    .badge-success {
-        background: var(--colors-success-100);
-        color: var(--colors-success-700);
+    .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);
     }
     
-    .badge-warning {
-        background: var(--colors-warning-100);
-        color: var(--colors-warning-700);
+    [data-theme="dark"] .sequencing-constraint {
+        background: var(--colors-neutral-800);
     }
     
-    .badge-danger {
-        background: var(--colors-danger-100);
-        color: var(--colors-danger-700);
+    .constraint-icon {
+        font-size: 24px;
+        color: var(--color-enterprise-primary);
+        margin-bottom: var(--spacing-2);
     }
     
-    .badge-sm {
-        padding: 2px 6px;
-        font-size: 10px;
+    .constraint-content h4 {
+        margin: 0 0 var(--spacing-2) 0;
+        color: var(--colors-neutral-900);
+        font-size: var(--typography-fontSizes-lg);
     }
     
-    .badge-lg {
-        padding: var(--spacing-1) var(--spacing-3);
-        font-size: var(--typography-fontSizes-sm);
+    .constraint-content p {
+        margin: 0;
+        color: var(--colors-neutral-700);
+        line-height: 1.6;
     }
     
-    /* Observation gate styles */
-    .observation-gate {
-        border: 3px solid var(--status-color, var(--color-warning));
+    /* Historical evidence panel styles */
+    .historical-evidence-panel {
+        border: 3px solid var(--color-enterprise-primary);
         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;
+        margin: var(--spacing-6) 0;
+        background: var(--color-surface-light);
     }
     
-    .observation-gate-header {
+    [data-theme="dark"] .historical-evidence-panel {
+        background: var(--colors-neutral-800);
+    }
+    
+    .evidence-header-main {
         display: flex;
+        justify-content: space-between;
         align-items: center;
-        gap: var(--spacing-4);
-        margin-bottom: var(--spacing-4);
+        margin-bottom: var(--spacing-6);
     }
     
-    .observation-icon {
-        font-size: 48px;
-        color: var(--status-color, var(--color-warning));
+    .evidence-header-main h3 {
+        margin: 0 0 var(--spacing-2) 0;
+        color: var(--colors-neutral-900);
+        font-size: var(--typography-fontSizes-xl);
     }
     
-    .observation-title h3 {
+    .evidence-header-main p {
         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);
+        color: var(--colors-neutral-600);
     }
     
-    .observation-badge {
-        margin-left: auto;
+    .evidence-dominance-badge {
         padding: var(--spacing-2) var(--spacing-4);
-        background: var(--status-color, var(--color-warning));
+        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;
     }
     
-    .confidence-comparison {
+    .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);
-        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);
+    .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);
     }
     
-    .confidence-label {
-        font-size: var(--typography-fontSizes-sm);
-        color: var(--colors-neutral-600);
-        text-transform: uppercase;
-        letter-spacing: 0.05em;
+    .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);
     }
     
-    .confidence-value {
-        font-size: var(--typography-fontSizes-3xl);
+    .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);
     }
     
-    .confidence-note {
-        font-size: var(--typography-fontSizes-xs);
+    .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);
     }
     
-    /* Process display styles */
-    .process-card {
-        border: 2px solid var(--colors-neutral-300);
+    .psych-principle {
+        background: linear-gradient(135deg, var(--colors-primary-50), var(--colors-neutral-50));
         border-radius: var(--borderRadius-lg);
         padding: var(--spacing-4);
-        margin: var(--spacing-3) 0;
-        background: var(--colors-neutral-50);
+        border: 2px solid var(--colors-primary-300);
+        margin-top: var(--spacing-6);
     }
     
-    .process-card[data-status="active"] {
-        border-color: var(--color-success);
-        background: color-mix(in srgb, var(--color-success) 5%, transparent);
+    [data-theme="dark"] .psych-principle {
+        background: linear-gradient(135deg, var(--colors-primary-900), var(--colors-neutral-800));
+        border-color: var(--colors-primary-700);
     }
     
-    .process-card[data-status="error"] {
-        border-color: var(--color-danger);
-        background: color-mix(in srgb, var(--color-danger) 5%, transparent);
+    .principle-icon {
+        font-size: 28px;
+        color: var(--color-enterprise-primary);
+        margin-bottom: var(--spacing-2);
     }
     
-    .process-header {
-        display: flex;
-        align-items: center;
-        gap: var(--spacing-3);
-        margin-bottom: var(--spacing-3);
+    .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;
     }
     
-    .process-icon {
-        font-size: 32px;
+    /* 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;
     }
     
-    .process-title h4 {
-        margin: 0;
-        font-size: var(--typography-fontSizes-lg);
+    [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);
     }
     
-    .process-title p {
-        margin: var(--spacing-1) 0 0 0;
-        font-size: var(--typography-fontSizes-sm);
+    .intent-header p {
+        margin: 0;
         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));
+    .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-xs);
+        font-size: var(--typography-fontSizes-sm);
         font-weight: var(--typography-fontWeights-bold);
         text-transform: uppercase;
         letter-spacing: 0.05em;
     }
     
-    .process-metrics {
+    .intent-grid {
         display: grid;
-        grid-template-columns: repeat(2, 1fr);
-        gap: var(--spacing-3);
-        margin-bottom: var(--spacing-3);
+        grid-template-columns: 1fr 1fr;
+        gap: var(--spacing-4);
+        margin-bottom: var(--spacing-6);
     }
     
-    .process-metric {
-        background: white;
-        border-radius: var(--borderRadius-md);
-        padding: var(--spacing-2);
-        border: 1px solid var(--colors-neutral-200);
+    .intent-section {
+        background: var(--colors-neutral-50);
+        border-radius: var(--borderRadius-lg);
+        padding: var(--spacing-4);
     }
     
-    .metric-key {
-        font-size: var(--typography-fontSizes-xs);
+    [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);
     }
     
-    .metric-value {
-        font-size: var(--typography-fontSizes-lg);
-        font-weight: var(--typography-fontWeights-semibold);
+    .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 */
@@ -1713,10 +1609,29 @@ def create_component_styles() -> str:
             grid-template-columns: 1fr;
         }
         
-        .process-metrics {
+        .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;
@@ -1727,20 +1642,16 @@ def create_component_styles() -> str:
             margin-left: 0;
             margin-top: var(--spacing-2);
         }
-    }
-    
-    @media (max-width: 480px) {
+        
         .card {
             padding: var(--spacing-3);
         }
         
-        .observation-gate {
+        .sequencing-flow,
+        .historical-evidence-panel,
+        .healing-intent-display {
             padding: var(--spacing-3);
         }
-        
-        .metric-value {
-            font-size: var(--typography-fontSizes-2xl);
-        }
     }
     </style>
     """
@@ -1753,132 +1664,47 @@ def initialize_modern_ui() -> str:
     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)}
+        """
+        <style>
+        /* Additional responsive utilities */
+        .container {
+            width: 100%;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 var(--spacing-4);
+        }
         
-        <!-- 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"}
-        ])}
+        @media (min-width: 768px) {
+            .container {
+                padding: 0 var(--spacing-6);
+            }
+        }
         
-        <!-- 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>
-    """
+        @media (min-width: 1024px) {
+            .container {
+                padding: 0 var(--spacing-8);
+            }
+        }
+        </style>
+        """
+    ]
     
-    return dashboard
+    return "\n".join(components)
 
 # ===========================================
 # EXPORT LIST
 # ===========================================
 __all__ = [
     # Core components
-    'ModernComponent', 'Card', 'Button', 'Badge',
-    'Grid', 'Stack',
+    'ModernComponent', 'Card',
     
-    # ARF-specific components
+    # CRITICAL PSYCHOLOGICAL COMPONENTS
     'ObservationGate', 'SequencingFlow', 'ProcessDisplay',
+    'HistoricalEvidencePanel', 'HealingIntentDisplay',
     
-    # Visualization
-    'Chart',
-    
-    # Utilities
-    'ResponsiveUtils', 'Accessibility', 'DarkMode',
+    # Design system
+    'DESIGN_TOKENS',
     
     # 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")
+    'initialize_modern_ui', 'inject_design_tokens', 'create_component_styles'
+]