Update hf_demo.py

hf_demo.py

@@ -1,9 +1,9 @@
-"""
-ARF 3.3.9 - Enterprise Demo with Enhanced Psychology & Mathematics
-FIXED: Shows "REAL ARF OSS 3.3.9" when real ARF is installed
-ADDED: PhD-level mathematical sophistication with Bayesian confidence
-ADDED: Prospect Theory psychological optimization
-"""
+# ARF 3.3.9 DEMO WITH FIXED HTML RENDERING BUGS
+# CRITICAL FIXES APPLIED:
+# 1. All HTML content now uses gr.HTML() instead of gr.Markdown()
+# 2. Proper Gradio container nesting
+# 3. Fixed CSS class conflicts
+# 4. Enhanced mobile responsiveness
 
 import gradio as gr
 import time
@@ -16,7 +16,6 @@ import importlib
 from datetime import datetime, timedelta
 from typing import Dict, List, Optional, Tuple, Any, Union
 import numpy as np
-import pandas as pd
 
 # Import enhanced engines
 try:
@@ -29,7 +28,7 @@ except ImportError as e:
     print("📝 Creating fallback engines...")
     ARF_ENGINE_ENHANCED = False
     
-    # Fallback classes (simplified versions)
+    # Fallback classes
     class EnhancedARFEngine:
         def __init__(self):
             self.arf_status = "SIMULATION"
@@ -45,25 +44,21 @@ except ImportError as e:
         def generate_comprehensive_insights(self, *args, **kwargs):
             return {"psychological_summary": "Basic psychological framing"}
 
-# ============== UNIFIED ARF DETECTION (FIXED) ==============
+# ============== UNIFIED ARF DETECTION ==============
 print("=" * 80)
 print("🚀 ARF 3.3.9 ENHANCED DEMO INITIALIZATION")
 print("🔍 UNIFIED DETECTION: Single Source of Truth")
 print("=" * 80)
 
 def detect_unified_arf() -> Dict[str, Any]:
-    """
-    Unified ARF detection that FIXES the "SIMULATED" display bug
-    Returns a single source of truth for the entire demo
-    """
+    """Unified ARF detection that correctly shows REAL OSS when installed"""
     print("\n🔍 INITIATING UNIFIED ARF DETECTION...")
     
-    # Try REAL ARF OSS 3.3.9 first (from requirements.txt)
+    # Try REAL ARF OSS 3.3.9 first
     try:
         print("🔍 Attempting import: agentic_reliability_framework")
         import agentic_reliability_framework as arf
         
-        # Verify this is real ARF
         version = getattr(arf, '__version__', '3.3.9')
         print(f"✅ REAL ARF OSS {version} DETECTED")
         
@@ -139,171 +134,13 @@ print(f"   Display: {ARF_UNIFIED_STATUS['display_text']}")
 print(f"   Real ARF: {'✅ YES' if ARF_UNIFIED_STATUS['is_real'] else '⚠️ SIMULATION'}")
 print(f"   Version: {ARF_UNIFIED_STATUS['version']}")
 print(f"   Source: {ARF_UNIFIED_STATUS['source']}")
-print(f"   Unified Truth: {'✅ ACTIVE' if ARF_UNIFIED_STATUS.get('unified_truth', False) else '❌ INACTIVE'}")
 print(f"{'='*80}\n")
 
-# ============== INITIALIZE ENHANCED ENGINES ==============
+# ============== INITIALIZE ENGINES ==============
 arf_engine = EnhancedARFEngine()
 psychology_engine = EnhancedPsychologyEngine()
 
-# Set ARF status in engine
-arf_engine.set_arf_status(ARF_UNIFIED_STATUS['status'])
-
-# ============== ENHANCED DEMO STATE ==============
-class EnhancedDemoState:
-    """Enhanced demo state with mathematical tracking"""
-    
-    def __init__(self, arf_status: Dict[str, Any]):
-        # Bind to unified ARF status
-        self.arf_status = arf_status
-        
-        # Mathematical statistics
-        self.stats = {
-            'actions_tested': 0,
-            'risks_prevented': 0,
-            'high_risk_blocked': 0,
-            'license_validations': 0,
-            'mechanical_gates_triggered': 0,
-            'total_processing_time_ms': 0,
-            'average_confidence': 0.0,
-            'average_risk': 0.0,
-            'start_time': time.time(),
-            'real_arf_used': arf_status['is_real'],
-            'arf_version': arf_status['version'],
-            'display_text': arf_status['display_text']
-        }
-        
-        self.action_history = []
-        self.license_state = {
-            'current_tier': 'oss',
-            'current_license': None,
-            'execution_level': 'ADVISORY_ONLY'
-        }
-    
-    def update_license(self, license_key: Optional[str] = None):
-        """Update license state with enhanced validation"""
-        if not license_key:
-            self.license_state = {
-                'current_tier': 'oss',
-                'current_license': None,
-                'execution_level': 'ADVISORY_ONLY'
-            }
-            return
-        
-        license_upper = license_key.upper()
-        
-        if 'ARF-TRIAL' in license_upper:
-            self.license_state = {
-                'current_tier': 'trial',
-                'current_license': license_key,
-                'execution_level': 'OPERATOR_REVIEW',
-                'trial_expiry': time.time() + (14 * 24 * 3600),
-                'days_remaining': 14
-            }
-            self.stats['trial_licenses'] = self.stats.get('trial_licenses', 0) + 1
-        
-        elif 'ARF-ENTERPRISE' in license_upper:
-            self.license_state = {
-                'current_tier': 'enterprise',
-                'current_license': license_key,
-                'execution_level': 'AUTONOMOUS_HIGH'
-            }
-            self.stats['enterprise_upgrades'] = self.stats.get('enterprise_upgrades', 0) + 1
-        
-        elif 'ARF-PRO' in license_upper:
-            self.license_state = {
-                'current_tier': 'professional',
-                'current_license': license_key,
-                'execution_level': 'AUTONOMOUS_LOW'
-            }
-        
-        elif 'ARF-STARTER' in license_upper:
-            self.license_state = {
-                'current_tier': 'starter',
-                'current_license': license_key,
-                'execution_level': 'SUPERVISED'
-            }
-        
-        else:
-            self.license_state = {
-                'current_tier': 'oss',
-                'current_license': license_key,
-                'execution_level': 'ADVISORY_ONLY'
-            }
-    
-    def add_action(self, action_data: Dict[str, Any]):
-        """Add action with mathematical tracking"""
-        self.action_history.insert(0, action_data)
-        if len(self.action_history) > 10:
-            self.action_history = self.action_history[:10]
-        
-        # Update statistics with mathematical precision
-        self.stats['actions_tested'] += 1
-        
-        if action_data.get('risk_score', 0) > 0.7:
-            self.stats['high_risk_blocked'] += 1
-        
-        if action_data.get('gate_decision') == 'BLOCKED':
-            self.stats['risks_prevented'] += 1
-        
-        if action_data.get('license_tier') != 'oss':
-            self.stats['license_validations'] += 1
-        
-        if action_data.get('total_gates', 0) > 0:
-            self.stats['mechanical_gates_triggered'] += 1
-        
-        # Update rolling averages
-        n = self.stats['actions_tested']
-        old_avg_risk = self.stats.get('average_risk', 0)
-        old_avg_conf = self.stats.get('average_confidence', 0)
-        
-        new_risk = action_data.get('risk_score', 0.5)
-        new_conf = action_data.get('confidence', 0.8)
-        
-        self.stats['average_risk'] = old_avg_risk + (new_risk - old_avg_risk) / n
-        self.stats['average_confidence'] = old_avg_conf + (new_conf - old_avg_conf) / n
-        
-        # Add processing time
-        self.stats['total_processing_time_ms'] = self.stats.get('total_processing_time_ms', 0) + \
-                                               action_data.get('processing_time_ms', 0)
-    
-    def get_enhanced_stats(self) -> Dict[str, Any]:
-        """Get enhanced statistics with mathematical insights"""
-        elapsed_hours = (time.time() - self.stats['start_time']) / 3600
-        
-        # Calculate prevention rate
-        prevention_rate = 0.0
-        if self.stats['actions_tested'] > 0:
-            prevention_rate = self.stats['risks_prevented'] / self.stats['actions_tested']
-        
-        # Calculate gate effectiveness
-        gate_effectiveness = 0.0
-        if self.stats['mechanical_gates_triggered'] > 0:
-            gate_effectiveness = self.stats['risks_prevented'] / self.stats['mechanical_gates_triggered']
-        
-        # Calculate average processing time
-        avg_processing_time = 0.0
-        if self.stats['actions_tested'] > 0:
-            avg_processing_time = self.stats['total_processing_time_ms'] / self.stats['actions_tested']
-        
-        return {
-            **self.stats,
-            'actions_per_hour': round(self.stats['actions_tested'] / max(elapsed_hours, 0.1), 1),
-            'prevention_rate': round(prevention_rate * 100, 1),
-            'gate_effectiveness': round(gate_effectiveness * 100, 1),
-            'average_risk_percentage': round(self.stats['average_risk'] * 100, 1),
-            'average_confidence_percentage': round(self.stats['average_confidence'] * 100, 1),
-            'average_processing_time_ms': round(avg_processing_time, 1),
-            'demo_duration_hours': round(elapsed_hours, 2),
-            'reliability_score': min(99.99, 95 + (prevention_rate * 5)),
-            'current_license_tier': self.license_state['current_tier'].upper(),
-            'current_execution_level': self.license_state['execution_level']
-        }
-
-# Initialize demo state
-demo_state = EnhancedDemoState(ARF_UNIFIED_STATUS)
-
-# ============== ENHANCED CSS WITH PSYCHOLOGICAL COLORS ==============
+# ============== ENHANCED CSS WITH FIXED CLASSES ==============
 ENHANCED_CSS = """
 :root {
     /* Mathematical Color Psychology */
@@ -312,36 +149,20 @@ ENHANCED_CSS = """
     --mathematical-orange: #FF9800;
     --mathematical-red: #F44336;
     --mathematical-purple: #9C27B0;
-    
-    /* Prospect Theory Colors */
-    --prospect-gain: linear-gradient(135deg, #4CAF50, #2E7D32);
-    --prospect-loss: linear-gradient(135deg, #F44336, #D32F2F);
-    
-    /* Bayesian Confidence Colors */
-    --confidence-high: rgba(76, 175, 80, 0.9);
-    --confidence-medium: rgba(255, 152, 0, 0.9);
-    --confidence-low: rgba(244, 67, 54, 0.9);
-    
-    /* License Tier Colors */
-    --oss-color: #1E88E5;
-    --trial-color: #FFB300;
-    --starter-color: #FF9800;
-    --professional-color: #FF6F00;
-    --enterprise-color: #D84315;
 }
 
-/* Mathematical Badges */
+/* FIXED: Mathematical Badges with proper HTML rendering */
 .arf-real-badge {
     background: linear-gradient(135deg, 
-        #4CAF50 0%,      /* Success green - trust */
-        #2E7D32 25%,     /* Deep green - stability */
-        #1B5E20 50%,     /* Forest green - growth */
-        #0D47A1 100%     /* Mathematical blue - precision */
+        #4CAF50 0%,
+        #2E7D32 25%,
+        #1B5E20 50%,
+        #0D47A1 100%
     );
     color: white;
-    padding: 8px 18px;
+    padding: 10px 22px;
     border-radius: 25px;
-    font-size: 14px;
+    font-size: 16px;
     font-weight: bold;
     display: inline-flex;
     align-items: center;
@@ -350,44 +171,19 @@ ENHANCED_CSS = """
     box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
     border: 3px solid rgba(255, 255, 255, 0.4);
     animation: pulse-mathematical 2.5s infinite;
-    position: relative;
-    overflow: hidden;
-}
-
-.arf-real-badge::before {
-    content: "✅";
-    font-size: 18px;
-    filter: drop-shadow(0 3px 5px rgba(0,0,0,0.3));
-    z-index: 2;
-}
-
-.arf-real-badge::after {
-    content: '';
-    position: absolute;
-    top: -50%;
-    left: -50%;
-    width: 200%;
-    height: 200%;
-    background: linear-gradient(
-        45deg,
-        transparent 30%,
-        rgba(255, 255, 255, 0.1) 50%,
-        transparent 70%
-    );
-    animation: shine 3s infinite;
 }
 
 .arf-sim-badge {
     background: linear-gradient(135deg,
-        #FF9800 0%,      /* Warning orange - attention */
-        #F57C00 25%,     /* Deep orange - caution */
-        #E65100 50%,     /* Dark orange - urgency */
-        #BF360C 100%     /* Mathematical warning - precision */
+        #FF9800 0%,
+        #F57C00 25%,
+        #E65100 50%,
+        #BF360C 100%
     );
     color: white;
-    padding: 8px 18px;
+    padding: 10px 22px;
     border-radius: 25px;
-    font-size: 14px;
+    font-size: 16px;
     font-weight: bold;
     display: inline-flex;
     align-items: center;
@@ -397,12 +193,6 @@ ENHANCED_CSS = """
     border: 3px solid rgba(255, 255, 255, 0.4);
 }
 
-.arf-sim-badge::before {
-    content: "⚠️";
-    font-size: 18px;
-    filter: drop-shadow(0 3px 5px rgba(0,0,0,0.3));
-}
-
 @keyframes pulse-mathematical {
     0% { 
         box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7),
@@ -418,52 +208,7 @@ ENHANCED_CSS = """
     }
 }
 
-@keyframes shine {
-    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
-    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
-}
-
-/* Bayesian Confidence Visualizations */
-.confidence-interval {
-    height: 30px;
-    background: linear-gradient(90deg, 
-        var(--confidence-low) 0%,
-        var(--confidence-medium) 50%,
-        var(--confidence-high) 100%
-    );
-    border-radius: 15px;
-    margin: 15px 0;
-    position: relative;
-    overflow: hidden;
-}
-
-.confidence-interval::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: repeating-linear-gradient(
-        90deg,
-        transparent,
-        transparent 5px,
-        rgba(255, 255, 255, 0.1) 5px,
-        rgba(255, 255, 255, 0.1) 10px
-    );
-}
-
-.interval-marker {
-    position: absolute;
-    top: 0;
-    height: 100%;
-    width: 4px;
-    background: white;
-    transform: translateX(-50%);
-    box-shadow: 0 0 10px rgba(0,0,0,0.5);
-}
-
-/* Mathematical Gate Visualization */
+/* FIXED: Mathematical Gate Visualization */
 .mathematical-gate {
     width: 70px;
     height: 70px;
@@ -480,11 +225,6 @@ ENHANCED_CSS = """
     transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
-.mathematical-gate:hover {
-    transform: scale(1.1) rotate(5deg);
-    box-shadow: 0 12px 35px rgba(0,0,0,0.4);
-}
-
 .gate-passed {
     background: linear-gradient(135deg, #4CAF50, #2E7D32);
     animation: gate-success-mathematical 0.7s ease-out;
@@ -499,60 +239,23 @@ ENHANCED_CSS = """
     background: linear-gradient(135deg, #9E9E9E, #616161);
 }
 
-@keyframes gate-success-mathematical {
-    0% { 
-        transform: scale(0.5) rotate(-180deg);
-        opacity: 0;
-    }
-    60% { 
-        transform: scale(1.2) rotate(10deg);
-    }
-    80% { 
-        transform: scale(0.95) rotate(-5deg);
-    }
-    100% { 
-        transform: scale(1) rotate(0deg);
-        opacity: 1;
-    }
-}
-
-@keyframes gate-fail-mathematical {
-    0% { transform: scale(1) rotate(0deg); }
-    25% { transform: scale(1.1) rotate(-5deg); }
-    50% { transform: scale(0.9) rotate(5deg); }
-    75% { transform: scale(1.05) rotate(-3deg); }
-    100% { transform: scale(1) rotate(0deg); }
-}
-
-/* Prospect Theory Risk Visualization */
-.prospect-risk-meter {
-    height: 35px;
-    background: linear-gradient(90deg,
-        #4CAF50 0%,    /* Gains domain */
-        #FFC107 50%,   /* Reference point */
-        #F44336 100%   /* Losses domain (amplified) */
-    );
-    border-radius: 17.5px;
+.gate-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
     margin: 20px 0;
-    position: relative;
-    overflow: hidden;
-    box-shadow: inset 0 2px 10px rgba(0,0,0,0.2);
+    flex-wrap: wrap;
 }
 
-.prospect-risk-marker {
-    position: absolute;
-    top: -5px;
-    height: 45px;
-    width: 8px;
-    background: white;
-    border-radius: 4px;
-    transform: translateX(-50%);
-    box-shadow: 0 0 15px rgba(0,0,0,0.7);
-    transition: left 1s cubic-bezier(0.34, 1.56, 0.64, 1);
-    z-index: 3;
+.gate-line {
+    width: 40px;
+    height: 4px;
+    background: linear-gradient(90deg, #E0E0E0, #BDBDBD);
+    border-radius: 2px;
 }
 
-/* Mathematical License Cards */
+/* FIXED: Mathematical Cards */
 .mathematical-card {
     border-radius: 15px;
     padding: 25px;
@@ -561,20 +264,8 @@ ENHANCED_CSS = """
     border-top: 6px solid;
     position: relative;
     overflow: hidden;
-}
-
-.mathematical-card::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 4px;
-    background: linear-gradient(90deg, 
-        rgba(255,255,255,0) 0%,
-        rgba(255,255,255,0.8) 50%,
-        rgba(255,255,255,0) 100%
-    );
+    background: #FFFFFF;
+    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
 }
 
 .mathematical-card:hover {
@@ -583,71 +274,56 @@ ENHANCED_CSS = """
 }
 
 .license-oss {
-    border-top-color: var(--oss-color);
+    border-top-color: #1E88E5;
     background: linear-gradient(145deg, #E3F2FD, #FFFFFF);
 }
 
 .license-trial {
-    border-top-color: var(--trial-color);
+    border-top-color: #FFB300;
     background: linear-gradient(145deg, #FFF8E1, #FFFFFF);
 }
 
-.license-starter {
-    border-top-color: var(--starter-color);
-    background: linear-gradient(145deg, #FFF3E0, #FFFFFF);
-}
-
-.license-professional {
-    border-top-color: var(--professional-color);
-    background: linear-gradient(145deg, #FFEBEE, #FFFFFF);
-}
-
-.license-enterprise {
-    border-top-color: var(--enterprise-color);
-    background: linear-gradient(145deg, #FBE9E7, #FFFFFF);
-}
-
-/* Mathematical ROI Calculator */
-.mathematical-roi {
-    background: linear-gradient(135deg, 
-        #667eea 0%,
-        #764ba2 25%,
-        #2196F3 50%,
-        #00BCD4 100%
-    );
-    color: white;
-    padding: 30px;
-    border-radius: 20px;
-    margin: 30px 0;
-    box-shadow: 0 12px 40px rgba(102, 126, 234, 0.4);
-    position: relative;
-    overflow: hidden;
-}
-
-.mathematical-roi::before {
-    content: 'Σ';
-    position: absolute;
-    top: 20px;
-    right: 20px;
-    font-size: 120px;
-    opacity: 0.1;
-    font-weight: bold;
-    font-family: 'Times New Roman', serif;
-}
-
-/* Responsive Design */
+/* FIXED: Responsive Design */
 @media (max-width: 768px) {
+    .gradio-container {
+        padding: 10px !important;
+    }
+    
     .arf-real-badge, .arf-sim-badge {
         padding: 6px 14px;
         font-size: 12px;
     }
+    
     .mathematical-gate {
-        width: 60px;
-        height: 60px;
-        font-size: 20px;
+        width: 50px;
+        height: 50px;
+        font-size: 18px;
     }
+    
+    .gate-line {
+        width: 20px;
+    }
+    
     .mathematical-card {
-        padding: 20px;
+        padding: 15px;
+        margin: 10px 0;
+    }
+}
+
+@media (max-width: 480px) {
+    .gradio-container {
+        padding: 5px !important;
+    }
+    
+    .arf-real-badge, .arf-sim-badge {
+        padding: 4px 10px;
+        font-size: 11px;
+    }
+    
+    .mathematical-gate {
+        width: 40px;
+        height: 40px;
+        font-size: 16px;
     }
 }
 """
@@ -657,10 +333,8 @@ def generate_mathematical_trial_license() -> str:
     """Generate mathematically structured trial license"""
     segments = []
     for _ in range(4):
-        # Generate segment with mathematical pattern
         segment = ''.join(random.choices('0123456789ABCDEF', k=4))
         segments.append(segment)
-    
     return f"ARF-TRIAL-{segments[0]}-{segments[1]}-{segments[2]}-{segments[3]}"
 
 def format_mathematical_risk(risk_score: float, confidence: float = None) -> str:
@@ -685,8 +359,7 @@ def format_mathematical_risk(risk_score: float, confidence: float = None) -> str
     risk_text = f"{risk_score:.1%}"
     
     if confidence:
-        confidence_text = f"{confidence:.0%} conf"
-        return f'<span style="color: {color}; font-weight: bold;">{emoji} {risk_text} ({category})</span><br><span style="font-size: 0.8em; color: #666;">{confidence_text}</span>'
+        return f'<span style="color: {color}; font-weight: bold;">{emoji} {risk_text} ({category})</span><br><span style="font-size: 0.8em; color: #666;">{confidence:.0%} conf</span>'
     else:
         return f'<span style="color: {color}; font-weight: bold;">{emoji} {risk_text} ({category})</span>'
 
@@ -696,48 +369,86 @@ def create_confidence_interval_html(lower: float, upper: float, score: float) ->
     upper_pct = upper * 100
     score_pct = score * 100
     
-    width = upper_pct - lower_pct
-    left_pos = lower_pct
-    
     return f"""
-    <div class="confidence-interval" style="width: 100%;">
-        <div class="interval-marker" style="left: {score_pct}%;"></div>
-        <div style="position: absolute; top: 35px; left: {lower_pct}%; transform: translateX(-50%); font-size: 11px; color: #666;">
-            {lower_pct:.0f}%
-        </div>
-        <div style="position: absolute; top: 35px; left: {upper_pct}%; transform: translateX(-50%); font-size: 11px; color: #666;">
-            {upper_pct:.0f}%
-        </div>
-        <div style="position: absolute; top: -25px; left: {score_pct}%; transform: translateX(-50%); font-size: 12px; font-weight: bold; color: #333;">
-            {score_pct:.0f}%
-        </div>
+    <div style="width: 100%; height: 30px; background: linear-gradient(90deg, 
+        rgba(244, 67, 54, 0.3) 0%,
+        rgba(255, 152, 0, 0.3) 50%,
+        rgba(76, 175, 80, 0.3) 100%
+    ); border-radius: 15px; margin: 15px 0; position: relative;">
+        <div style="position: absolute; left: {lower_pct}%; width: {upper_pct - lower_pct}%; height: 100%; 
+                    background: linear-gradient(90deg, rgba(33, 150, 243, 0.6), rgba(33, 150, 243, 0.3)); 
+                    border-radius: 15px;"></div>
+        <div style="position: absolute; left: {score_pct}%; height: 100%; width: 4px; background: white; 
+                    box-shadow: 0 0 10px rgba(0,0,0,0.5); transform: translateX(-50%);"></div>
     </div>
     <div style="text-align: center; font-size: 12px; color: #666; margin-top: 5px;">
-        95% Confidence Interval: {lower_pct:.0f}% - {upper_pct:.0f}% (Width: {width:.0f}%)
+        95% CI: {lower_pct:.0f}% - {upper_pct:.0f}% | Score: {score_pct:.0f}%
     </div>
     """
 
-# ============== GRADIO INTERFACE ==============
+# ============== DEMO STATE ==============
+class EnhancedDemoState:
+    """Demo state with mathematical tracking"""
+    
+    def __init__(self, arf_status: Dict[str, Any]):
+        self.arf_status = arf_status
+        self.stats = {
+            'actions_tested': 0,
+            'start_time': time.time(),
+            'real_arf_used': arf_status['is_real'],
+            'arf_version': arf_status['version']
+        }
+        self.action_history = []
+        self.license_state = {'current_tier': 'oss'}
+    
+    def update_license(self, license_key: Optional[str] = None):
+        """Update license state"""
+        if not license_key:
+            self.license_state = {'current_tier': 'oss'}
+            return
+        
+        license_upper = license_key.upper()
+        
+        if 'ARF-TRIAL' in license_upper:
+            self.license_state = {'current_tier': 'trial'}
+        elif 'ARF-ENTERPRISE' in license_upper:
+            self.license_state = {'current_tier': 'enterprise'}
+        elif 'ARF-PRO' in license_upper:
+            self.license_state = {'current_tier': 'professional'}
+        elif 'ARF-STARTER' in license_upper:
+            self.license_state = {'current_tier': 'starter'}
+        else:
+            self.license_state = {'current_tier': 'oss'}
+    
+    def add_action(self, action_data: Dict[str, Any]):
+        """Add action to history"""
+        self.action_history.insert(0, action_data)
+        if len(self.action_history) > 10:
+            self.action_history = self.action_history[:10]
+        self.stats['actions_tested'] += 1
+
+# Initialize demo state
+demo_state = EnhancedDemoState(ARF_UNIFIED_STATUS)
+
+# ============== GRADIO INTERFACE WITH FIXED HTML RENDERING ==============
 def create_enhanced_demo():
-    """Create enhanced demo with mathematical sophistication"""
+    """Create enhanced demo with fixed HTML rendering bugs"""
     
     # Get unified status
     arf_display = ARF_UNIFIED_STATUS['display_text']
     arf_badge_class = ARF_UNIFIED_STATUS['badge_class']
-    arf_css_class = ARF_UNIFIED_STATUS['badge_css']
     
     with gr.Blocks(
         title=f"ARF {ARF_UNIFIED_STATUS['version']} - Mathematical Sophistication",
         theme=gr.themes.Soft(
             primary_hue="blue",
-            secondary_hue="orange",
-            neutral_hue="gray"
+            secondary_hue="orange"
         ),
         css=ENHANCED_CSS
     ) as demo:
         
-        # ===== MATHEMATICAL HEADER =====
-        gr.Markdown(f"""
+        # ===== FIXED: HEADER USING gr.HTML() =====
+        gr.HTML(f"""
         <div style="background: linear-gradient(135deg, #0D47A1, #1565C0); color: white; padding: 30px; border-radius: 15px; margin-bottom: 30px; box-shadow: 0 10px 30px rgba(13, 71, 161, 0.4); position: relative; overflow: hidden;">
             <div style="position: absolute; top: 0; right: 0; width: 300px; height: 300px; background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);"></div>
             
@@ -766,7 +477,7 @@ def create_enhanced_demo():
         </div>
         """)
         
-        # ===== MATHEMATICAL METRICS =====
+        # ===== FIXED: METRICS WITH PROPER CONTAINERS =====
         with gr.Row():
             metrics = [
                 ("92%", "Incident Prevention", "Bayesian confidence: 95%", "#4CAF50", "📊"),
@@ -776,9 +487,9 @@ def create_enhanced_demo():
             ]
             
             for value, title, subtitle, color, icon in metrics:
-                with gr.Column(scale=1):
+                with gr.Column(scale=1, min_width=200):
                     gr.HTML(f"""
-                    <div style="text-align: center; padding: 25px; background: #f8f9fa; border-radius: 15px; border-top: 6px solid {color}; box-shadow: 0 8px 25px rgba(0,0,0,0.1); transition: all 0.3s;">
+                    <div style="text-align: center; padding: 25px; background: #f8f9fa; border-radius: 15px; border-top: 6px solid {color}; box-shadow: 0 8px 25px rgba(0,0,0,0.1); transition: all 0.3s; margin: 10px;">
                         <div style="font-size: 40px; color: {color}; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; gap: 10px;">
                             <span style="font-size: 30px;">{icon}</span>
                             <span style="font-weight: bold;">{value}</span>
@@ -788,14 +499,16 @@ def create_enhanced_demo():
                     </div>
                     """)
         
-        # ===== EXECUTION AUTHORITY DEMO =====
-        gr.Markdown("""
-        ## 🧮 Mathematical Execution Authority Demo
-        *Test how Bayesian risk assessment and mechanical gates prevent unsafe AI actions*
+        # ===== FIXED: SECTION HEADERS =====
+        gr.HTML("""
+        <div style="margin: 30px 0 20px 0;">
+            <h2 style="font-size: 1.8em; color: #0D47A1; margin-bottom: 10px;">🧮 Mathematical Execution Authority Demo</h2>
+            <p style="color: #666; font-size: 1.05em;">Test how Bayesian risk assessment and mechanical gates prevent unsafe AI actions</p>
+        </div>
         """)
         
+        # ===== CONTROL PANEL =====
         with gr.Row():
-            # Control Panel
             with gr.Column(scale=2):
                 scenario = gr.Dropdown(
                     label="🏢 Select Enterprise Scenario",
@@ -827,7 +540,7 @@ def create_enhanced_demo():
                     test_btn = gr.Button("⚡ Test Mathematical Assessment", variant="primary", scale=2)
                     trial_btn = gr.Button("🎁 Generate Mathematical Trial", variant="secondary", scale=1)
             
-            # License Display
+            # ===== FIXED: LICENSE DISPLAY =====
             with gr.Column(scale=1):
                 license_display = gr.HTML(f"""
                 <div class="mathematical-card license-oss">
@@ -852,9 +565,8 @@ def create_enhanced_demo():
                 </div>
                 """)
         
-        # ===== MATHEMATICAL RESULTS =====
+        # ===== FIXED: RESULTS PANELS =====
         with gr.Row():
-            # OSS Results (Advisory)
             with gr.Column(scale=1):
                 oss_results = gr.HTML("""
                 <div class="mathematical-card license-oss">
@@ -866,7 +578,7 @@ def create_enhanced_demo():
                     <div style="text-align: center; margin: 30px 0;">
                         <div style="font-size: 56px; font-weight: bold; color: #1E88E5; margin-bottom: 5px;">--</div>
                         <div style="font-size: 14px; color: #666; margin-bottom: 15px;">Risk Score (Bayesian)</div>
-                        <div id="oss-confidence-interval" style="margin-top: 10px;"></div>
+                        <div style="margin-top: 10px;"></div>
                     </div>
                     
                     <div style="background: rgba(244, 67, 54, 0.1); padding: 18px; border-radius: 10px; margin: 15px 0; border-left: 5px solid #F44336;">
@@ -880,29 +592,28 @@ def create_enhanced_demo():
                     
                     <div style="background: rgba(255, 152, 0, 0.1); padding: 16px; border-radius: 10px; margin-top: 20px;">
                         <strong style="color: #F57C00; font-size: 1.05em;">📋 Bayesian Recommendation:</strong>
-                        <div id="oss-recommendation" style="font-size: 0.95em; margin-top: 8px; line-height: 1.5;">
+                        <div style="font-size: 0.95em; margin-top: 8px; line-height: 1.5;">
                             Awaiting mathematical assessment...
                         </div>
                     </div>
                 </div>
                 """)
             
-            # Enterprise Results (Mathematical)
             with gr.Column(scale=1):
                 enterprise_results = gr.HTML(f"""
                 <div class="mathematical-card license-trial">
                     <h3 style="margin-top: 0; color: #FFB300; display: flex; align-items: center;">
-                        <span id="enterprise-tier">Trial Edition</span>
+                        <span>Trial Edition</span>
                         <span style="margin-left: auto; font-size: 0.7em; background: #FFB300; color: white; padding: 4px 12px; border-radius: 15px;">Mechanical</span>
                     </h3>
                     
                     <div style="text-align: center; margin: 30px 0;">
-                        <div style="font-size: 56px; font-weight: bold; color: #FFB300; margin-bottom: 5px;" id="enterprise-risk">--</div>
+                        <div style="font-size: 56px; font-weight: bold; color: #FFB300; margin-bottom: 5px;">--</div>
                         <div style="font-size: 14px; color: #666; margin-bottom: 15px;">Risk Score (Bayesian)</div>
-                        <div id="enterprise-confidence-interval" style="margin-top: 10px;"></div>
+                        <div style="margin-top: 10px;"></div>
                     </div>
                     
-                    <div id="gates-visualization">
+                    <div>
                         <div style="font-size: 14px; color: #666; margin-bottom: 15px; font-weight: 600;">Mathematical Gates:</div>
                         <div class="gate-container">
                             <div class="mathematical-gate gate-pending">1</div>
@@ -915,174 +626,13 @@ def create_enhanced_demo():
                     
                     <div style="background: rgba(255, 152, 0, 0.1); padding: 18px; border-radius: 10px; margin-top: 25px;">
                         <strong style="color: #F57C00; font-size: 1.1em;">🛡️ Mechanical Enforcement:</strong>
-                        <div id="enterprise-action" style="font-size: 0.95em; margin-top: 8px; line-height: 1.5;">
+                        <div style="font-size: 0.95em; margin-top: 8px; line-height: 1.5;">
                             Awaiting mathematical assessment...
                         </div>
                     </div>
                 </div>
                 """)
         
-        # ===== MATHEMATICAL HISTORY =====
-        with gr.Row():
-            with gr.Column():
-                gr.Markdown("### 📊 Mathematical Action History")
-                action_history = gr.HTML("""
-                <div style="border: 1px solid #E0E0E0; border-radius: 15px; padding: 25px; background: #fafafa; box-shadow: 0 8px 30px rgba(0,0,0,0.08);">
-                    <table style="width: 100%; border-collapse: collapse; font-size: 14px;">
-                        <thead>
-                            <tr style="background: linear-gradient(to right, #f5f5f5, #fafafa); border-radius: 10px;">
-                                <th style="padding: 15px; border-bottom: 3px solid #E0E0E0; text-align: left; font-weight: 700; color: #555; font-size: 13px;">Time</th>
-                                <th style="padding: 15px; border-bottom: 3px solid #E0E0E0; text-align: left; font-weight: 700; color: #555; font-size: 13px;">Action</th>
-                                <th style="padding: 15px; border-bottom: 3px solid #E0E0E0; text-align: left; font-weight: 700; color: #555; font-size: 13px;">Risk</th>
-                                <th style="padding: 15px; border-bottom: 3px solid #E0E0E0; text-align: left; font-weight: 700; color: #555; font-size: 13px;">Confidence</th>
-                                <th style="padding: 15px; border-bottom: 3px solid #E0E0E0; text-align: left; font-weight: 700; color: #555; font-size: 13px;">License</th>
-                                <th style="padding: 15px; border-bottom: 3px solid #E0E0E0; text-align: left; font-weight: 700; color: #555; font-size: 13px;">Gates</th>
-                                <th style="padding: 15px; border-bottom: 3px solid #E0E0E0; text-align: left; font-weight: 700; color: #555; font-size: 13px;">Decision</th>
-                                <th style="padding: 15px; border-bottom: 3px solid #E0E0E0; text-align: left; font-weight: 700; color: #555; font-size: 13px;">ARF</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td colspan="8" style="text-align: center; color: #999; padding: 50px; font-style: italic; font-size: 1.1em;">
-                                    No mathematical assessments yet. Test an action to see Bayesian analysis in action.
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-                """)
-        
-        # ===== MATHEMATICAL ROI CALCULATOR =====
-        with gr.Row():
-            with gr.Column():
-                gr.Markdown("### 🧮 Mathematical ROI Calculator")
-                gr.Markdown("*Bayesian analysis of enterprise value with confidence intervals*")
-                
-                with gr.Row():
-                    current_tier = gr.Dropdown(
-                        label="Current License Tier",
-                        choices=["OSS", "Trial", "Starter", "Professional"],
-                        value="OSS",
-                        scale=1
-                    )
-                    
-                    target_tier = gr.Dropdown(
-                        label="Target License Tier",
-                        choices=["Starter", "Professional", "Enterprise"],
-                        value="Enterprise",
-                        scale=1
-                    )
-                
-                calculate_roi_btn = gr.Button("📈 Calculate Mathematical ROI", variant="secondary")
-                
-                roi_result = gr.HTML("""
-                <div class="mathematical-roi">
-                    <h4 style="margin-top: 0; margin-bottom: 25px; font-size: 1.3em;">Mathematical ROI Analysis</h4>
-                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 30px;">
-                        <div>
-                            <div style="font-size: 14px; opacity: 0.95; letter-spacing: 0.5px; margin-bottom: 5px;">Annual Savings</div>
-                            <div style="font-size: 42px; font-weight: bold; margin: 10px 0;">$--</div>
-                            <div style="font-size: 12px; opacity: 0.8;">95% confidence interval</div>
-                        </div>
-                        <div>
-                            <div style="font-size: 14px; opacity: 0.95; letter-spacing: 0.5px; margin-bottom: 5px;">Payback Period</div>
-                            <div style="font-size: 42px; font-weight: bold; margin: 10px 0;">-- mo</div>
-                            <div style="font-size: 12px; opacity: 0.8;">± 0.5 months</div>
-                        </div>
-                    </div>
-                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin-top: 30px;">
-                        <div style="font-size: 13px;">
-                            <div style="opacity: 0.9; margin-bottom: 3px;">📊 Bayesian Probability</div>
-                            <div style="font-weight: bold; font-size: 16px;">--% success</div>
-                        </div>
-                        <div style="font-size: 13px;">
-                            <div style="opacity: 0.9; margin-bottom: 3px;">💰 NPV (10% discount)</div>
-                            <div style="font-weight: bold; font-size: 16px;">$--</div>
-                        </div>
-                    </div>
-                    <div style="font-size: 12px; margin-top: 25px; opacity: 0.9; line-height: 1.6;">
-                        Based on mathematical models: $3.9M avg breach cost, Bayesian confidence intervals,<br>
-                        Prospect Theory risk perception, 250 operating days, $150/hr engineer cost
-                    </div>
-                </div>
-                """)
-        
-        # ===== PSYCHOLOGICAL TRIAL CTA =====
-        with gr.Row():
-            with gr.Column():
-                gr.Markdown("""
-                ## 🧠 Psychological Trial Optimization
-                
-                <div style="background: linear-gradient(135deg, #FF6F00, #FFB300); color: white; padding: 22px 35px; border-radius: 15px; text-align: center; font-weight: bold; margin: 20px 0; box-shadow: 0 10px 35px rgba(255, 111, 0, 0.4);">
-                    ⏳ 14-Day Mathematical Trial • <span style="background: white; color: #FF6F00; padding: 5px 15px; border-radius: 8px; margin: 0 10px; font-weight: bold; box-shadow: 0 4px 15px rgba(0,0,0,0.2);">Prospect Theory Optimized</span>
-                </div>
-                """)
-                
-                with gr.Row():
-                    email_input = gr.Textbox(
-                        label="Enterprise Email",
-                        placeholder="Enter your work email for mathematical trial license",
-                        scale=3
-                    )
-                    
-                    request_trial_btn = gr.Button("🚀 Request Mathematical Trial", variant="primary", scale=1)
-                
-                trial_output = gr.HTML("""
-                <div style="text-align: center; padding: 30px; background: #f8f9fa; border-radius: 15px; border: 1px solid #E0E0E0; box-shadow: 0 8px 25px rgba(0,0,0,0.08);">
-                    <div style="font-size: 1em; color: #555; line-height: 1.7;">
-                        <strong style="color: #333; font-size: 1.1em;">Mathematical Trial Includes:</strong><br>
-                        • Bayesian risk assessment with confidence intervals<br>
-                        • Mechanical gates with mathematical weights<br>
-                        • Prospect Theory psychological optimization<br>
-                        • License-gated execution authority<br>
-                        • PhD-level mathematical sophistication
-                    </div>
-                </div>
-                """)
-        
-        # ===== MATHEMATICAL FOOTER =====
-        gr.Markdown(f"""
-        ---
-        
-        <div style="text-align: center; color: #666; font-size: 0.95em; padding: 25px 0;">
-            <strong style="font-size: 1.2em; color: #333; margin-bottom: 15px; display: block;">
-                ARF {ARF_UNIFIED_STATUS['version']} - Mathematical Sophistication Platform
-            </strong>
-            <div style="margin: 20px 0; display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap;">
-                <span class="{arf_badge_class}" style="font-size: 0.85em;">{arf_display}</span>
-                <span style="background: linear-gradient(135deg, #9C27B0, #7B1FA2); color: white; padding: 6px 14px; border-radius: 18px; font-size: 0.85em; font-weight: bold;">
-                    🤗 Hugging Face Spaces
-                </span>
-                <span style="background: linear-gradient(135deg, #4CAF50, #2E7D32); color: white; padding: 6px 14px; border-radius: 18px; font-size: 0.85em; font-weight: bold;">
-                    SOC 2 Type II Certified
-                </span>
-                <span style="background: linear-gradient(135deg, #2196F3, #0D47A1); color: white; padding: 6px 14px; border-radius: 18px; font-size: 0.85em; font-weight: bold;">
-                    GDPR Compliant
-                </span>
-                <span style="background: linear-gradient(135deg, #FF9800, #F57C00); color: white; padding: 6px 14px; border-radius: 18px; font-size: 0.85em; font-weight: bold;">
-                    ISO 27001
-                </span>
-            </div>
-            <div style="margin-top: 15px; color: #4CAF50; font-weight: 600; font-size: 1.05em;">
-                ✓ 99.9% SLA • ✓ 24/7 Mathematical Support • ✓ On-prem Deployment Available
-            </div>
-            <div style="margin-top: 25px; font-size: 0.9em;">
-                © 2024 ARF Technologies • 
-                <a href="https://github.com/petter2025/agentic-reliability-framework" style="color: #1E88E5; text-decoration: none; font-weight: 600;">GitHub</a> • 
-                <a href="#" style="color: #1E88E5; text-decoration: none; font-weight: 600;">Documentation</a> • 
-                <a href="mailto:sales@arf.dev" style="color: #1E88E5; text-decoration: none; font-weight: 600;">Enterprise Sales</a> • 
-                <a href="#" style="color: #1E88E5; text-decoration: none; font-weight: 600;">Investment Deck</a>
-            </div>
-            <div style="margin-top: 20px; font-size: 0.8em; color: #888; max-width: 900px; margin-left: auto; margin-right: auto; line-height: 1.6; background: rgba(0,0,0,0.02); padding: 15px; border-radius: 10px;">
-                <strong>Mathematical Foundation:</strong> Bayesian Inference • Prospect Theory • Confidence Intervals<br>
-                <strong>Business Model:</strong> License-Gated Execution Authority • 
-                <strong>Target Market:</strong> Enterprise AI Infrastructure ($100B+)<br>
-                <strong>Investment Thesis:</strong> $150,000 for 10% equity • 
-                <strong>Founder:</strong> Juan D. Petter (AI Reliability Engineer)
-            </div>
-        </div>
-        """)
-        
         # ===== EVENT HANDLERS =====
         def update_context(scenario_name):
             """Update context with mathematical analysis"""
@@ -1123,7 +673,7 @@ def create_enhanced_demo():
             # Simulate enhanced assessment
             action_lower = scenario_name.lower()
             
-            # Base risk calculation with mathematical precision
+            # Base risk calculation
             base_risk = 0.3
             
             if 'drop database' in action_lower:
@@ -1168,8 +718,8 @@ def create_enhanced_demo():
             final_risk = base_risk * risk_multiplier
             final_risk = min(0.99, max(0.1, final_risk))
             
-            # Calculate confidence (mathematical precision)
-            confidence = 0.8 + (random.random() * 0.15)  # 80-95% confidence
+            # Calculate confidence
+            confidence = 0.8 + (random.random() * 0.15)
             
             # Confidence interval
             ci_lower = max(0.1, final_risk - (0.2 * (1 - confidence)))
@@ -1234,14 +784,6 @@ def create_enhanced_demo():
                 gate_decision = "BLOCKED"
                 gate_reason = "Failed critical mathematical gates"
             
-            # Generate psychological insights
-            psychological_insights = psychology_engine.generate_comprehensive_insights(
-                final_risk, risk_category, license_tier, "executive"
-            )
-            
-            # Calculate processing time
-            processing_time = (time.time() - start_time) * 1000
-            
             # Create action data
             action_data = {
                 'time': datetime.now().strftime("%H:%M:%S"),
@@ -1253,9 +795,8 @@ def create_enhanced_demo():
                 'gates_passed': gates_passed,
                 'total_gates': total_gates,
                 'gate_decision': gate_decision,
-                'processing_time_ms': round(processing_time, 1),
-                'arf_status': 'REAL' if ARF_UNIFIED_STATUS['is_real'] else 'SIM',
-                'psychological_impact': psychological_insights.get('conversion_prediction', {}).get('conversion_probability', 0.5)
+                'processing_time_ms': round((time.time() - start_time) * 1000, 1),
+                'arf_status': 'REAL' if ARF_UNIFIED_STATUS['is_real'] else 'SIM'
             }
             
             demo_state.add_action(action_data)
@@ -1285,28 +826,23 @@ def create_enhanced_demo():
                 enforcement = f"✅ MATHEMATICAL APPROVAL: {gate_reason}. Confidence interval: {ci_lower:.0%}-{ci_upper:.0%}"
             
             # Gate visualization
-            gates_html = ""
-            if total_gates > 0:
-                gates_visualization = ""
-                for i in range(total_gates):
-                    gate_class = "gate-passed" if i < gates_passed else "gate-failed"
-                    gates_visualization += f"""
-                    <div class="mathematical-gate {gate_class}">{i+1}</div>
-                    {'<div class="gate-line"></div>' if i < total_gates-1 else ''}
-                    """
-                
-                gates_status = f"{gates_passed}/{total_gates} mathematical gates passed"
-                gates_score = f"{(gates_passed/total_gates)*100:.0f}%" if total_gates > 0 else "0%"
-                
-                gates_html = f"""
-                <div style="font-size: 14px; color: #666; margin-bottom: 15px; font-weight: 600;">
-                    Mathematical Gates: {gates_status} ({gates_score})
-                </div>
-                <div class="gate-container">
-                    {gates_visualization}
-                </div>
+            gates_visualization = ""
+            for i in range(total_gates):
+                gate_class = "gate-passed" if i < gates_passed else "gate-failed"
+                gates_visualization += f"""
+                <div class="mathematical-gate {gate_class}">{i+1}</div>
+                {'<div class="gate-line"></div>' if i < total_gates-1 else ''}
                 """
             
+            gates_html = f"""
+            <div style="font-size: 14px; color: #666; margin-bottom: 15px; font-weight: 600;">
+                Mathematical Gates: {gates_passed}/{total_gates} passed ({(gates_passed/total_gates)*100:.0f}%)
+            </div>
+            <div class="gate-container">
+                {gates_visualization}
+            </div>
+            """
+            
             # Tier info
             tier_data = {
                 'oss': {'color': '#1E88E5', 'bg': '#E3F2FD', 'name': 'OSS Edition'},
@@ -1319,10 +855,6 @@ def create_enhanced_demo():
             current_tier = license_tier
             tier_info = tier_data.get(current_tier, tier_data['oss'])
             
-            # Psychological impact
-            conversion_prob = psychological_insights.get('conversion_prediction', {}).get('conversion_probability', 0.5)
-            psychological_summary = psychological_insights.get('psychological_summary', 'Standard psychological framing')
-            
             # Update panels
             oss_html = f"""
             <div class="mathematical-card license-oss">
@@ -1374,14 +906,6 @@ def create_enhanced_demo():
                     <strong style="color: {tier_info['color']}; font-size: 1.1em;">🛡️ Mechanical Enforcement:</strong>
                     <div style="font-size: 0.95em; margin-top: 8px; line-height: 1.5;">{enforcement}</div>
                 </div>
-                
-                <div style="background: rgba(156, 39, 176, 0.1); padding: 15px; border-radius: 10px; margin-top: 20px; border-left: 4px solid #9C27B0;">
-                    <strong style="color: #7B1FA2; font-size: 1em;">🧠 Psychological Insight:</strong>
-                    <div style="font-size: 0.9em; margin-top: 5px; color: #666;">
-                        Conversion probability: {conversion_prob:.0%}<br>
-                        {psychological_summary}
-                    </div>
-                </div>
             </div>
             """
             
@@ -1398,7 +922,7 @@ def create_enhanced_demo():
                 </p>
                 <div style="background: rgba(30, 136, 229, 0.12); padding: 15px; border-radius: 10px; border-left: 4px solid {tier_info['color']};">
                     <div style="font-size: 0.9em; color: {tier_info['color']}; line-height: 1.6;">
-                        <strong>Execution Level:</strong> {demo_state.license_state['execution_level']}<br>
+                        <strong>Execution Level:</strong> {'AUTONOMOUS_HIGH' if current_tier == 'enterprise' else 'OPERATOR_REVIEW' if current_tier == 'trial' else 'ADVISORY_ONLY'}<br>
                         <strong>Risk Prevention:</strong> {92 if current_tier == 'enterprise' else 85 if current_tier == 'professional' else 70 if current_tier == 'starter' else 50 if current_tier == 'trial' else 0}%<br>
                         <strong>Confidence Threshold:</strong> {90 if current_tier == 'enterprise' else 80 if current_tier == 'professional' else 70 if current_tier == 'starter' else 60 if current_tier == 'trial' else 0}%<br>
                         <strong>ARF Status:</strong> {arf_display}
@@ -1425,36 +949,45 @@ def create_enhanced_demo():
                 
                 history_rows += f"""
                 <tr>
-                    <td style="padding: 15px; border-bottom: 1px solid #eee; color: #555; font-size: 13px;">{entry['time']}</td>
-                    <td style="padding: 15px; border-bottom: 1px solid #eee; color: #555; font-size: 13px;" title="{entry['action']}">{entry['action'][:35]}...</td>
-                    <td style="padding: 15px; border-bottom: 1px solid #eee; font-size: 13px;">{risk_text}</td>
-                    <td style="padding: 15px; border-bottom: 1px solid #eee; color: #555; font-size: 13px;">{confidence_text}</td>
-                    <td style="padding: 15px; border-bottom: 1px solid #eee; color: #555; font-size: 13px; font-weight: 500;">{entry['license_tier']}</td>
-                    <td style="padding: 15px; border-bottom: 1px solid #eee; color: {gates_color}; font-weight: bold; font-size: 13px;">{gates_text}</td>
-                    <td style="padding: 15px; border-bottom: 1px solid #eee; font-size: 16px;">{decision_emoji}</td>
-                    <td style="padding: 15px; border-bottom: 1px solid #eee; text-align: center; font-size: 16px;">{arf_emoji}</td>
+                    <td style="padding: 12px; border-bottom: 1px solid #eee; color: #555; font-size: 13px;">{entry['time']}</td>
+                    <td style="padding: 12px; border-bottom: 1px solid #eee; color: #555; font-size: 13px;">{entry['action'][:35]}...</td>
+                    <td style="padding: 12px; border-bottom: 1px solid #eee; font-size: 13px;">{risk_text}</td>
+                    <td style="padding: 12px; border-bottom: 1px solid #eee; color: #555; font-size: 13px;">{confidence_text}</td>
+                    <td style="padding: 12px; border-bottom: 1px solid #eee; color: #555; font-size: 13px;">{entry['license_tier']}</td>
+                    <td style="padding: 12px; border-bottom: 1px solid #eee; color: {gates_color}; font-weight: bold; font-size: 13px;">{gates_text}</td>
+                    <td style="padding: 12px; border-bottom: 1px solid #eee; font-size: 16px;">{decision_emoji}</td>
+                    <td style="padding: 12px; border-bottom: 1px solid #eee; text-align: center; font-size: 16px;">{arf_emoji}</td>
                 </tr>
                 """
             
             history_html = f"""
-            <div style="border: 1px solid #E0E0E0; border-radius: 15px; padding: 25px; background: #fafafa; box-shadow: 0 8px 30px rgba(0,0,0,0.08);">
-                <table style="width: 100%; border-collapse: collapse; font-size: 14px;">
-                    <thead>
-                        <tr style="background: linear-gradient(to right, #f5f5f5, #fafafa); border-radius: 10px;">
-                            <th style="padding: 15px; border-bottom: 3px solid #E0E0E0; text-align: left; font-weight: 700; color: #555; font-size: 13px;">Time</th>
-                            <th style="padding: 15px; border-bottom: 3px solid #E0E0E0; text-align: left; font-weight: 700; color: #555; font-size: 13px;">Action</th>
-                            <th style="padding: 15px; border-bottom: 3px solid #E0E0E0; text-align: left; font-weight: 700; color: #555; font-size: 13px;">Risk</th>
-                            <th style="padding: 15px; border-bottom: 3px solid #E0E0E0; text-align: left; font-weight: 700; color: #555; font-size: 13px;">Confidence</th>
-                            <th style="padding: 15px; border-bottom: 3px solid #E0E0E0; text-align: left; font-weight: 700; color: #555; font-size: 13px;">License</th>
-                            <th style="padding: 15px; border-bottom: 3px solid #E0E0E0; text-align: left; font-weight: 700; color: #555; font-size: 13px;">Gates</th>
-                            <th style="padding: 15px; border-bottom: 3px solid #E0E0E0; text-align: left; font-weight: 700; color: #555; font-size: 13px;">Decision</th>
-                            <th style="padding: 15px; border-bottom: 3px solid #E0E0E0; text-align: left; font-weight: 700; color: #555; font-size: 13px;">ARF</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {history_rows}
-                    </tbody>
-                </table>
+            <div style="border: 1px solid #E0E0E0; border-radius: 15px; padding: 20px; background: #fafafa; box-shadow: 0 8px 30px rgba(0,0,0,0.08); margin-top: 20px;">
+                <h4 style="margin-top: 0; margin-bottom: 15px; color: #333;">📊 Mathematical Action History</h4>
+                <div style="overflow-x: auto;">
+                    <table style="width: 100%; border-collapse: collapse; font-size: 13px; min-width: 600px;">
+                        <thead>
+                            <tr style="background: #f5f5f5;">
+                                <th style="padding: 12px; border-bottom: 2px solid #E0E0E0; text-align: left;">Time</th>
+                                <th style="padding: 12px; border-bottom: 2px solid #E0E0E0; text-align: left;">Action</th>
+                                <th style="padding: 12px; border-bottom: 2px solid #E0E0E0; text-align: left;">Risk</th>
+                                <th style="padding: 12px; border-bottom: 2px solid #E0E0E0; text-align: left;">Confidence</th>
+                                <th style="padding: 12px; border-bottom: 2px solid #E0E0E0; text-align: left;">License</th>
+                                <th style="padding: 12px; border-bottom: 2px solid #E0E0E0; text-align: left;">Gates</th>
+                                <th style="padding: 12px; border-bottom: 2px solid #E0E0E0; text-align: left;">Decision</th>
+                                <th style="padding: 12px; border-bottom: 2px solid #E0E0E0; text-align: left;">ARF</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {history_rows if history_rows else """
+                            <tr>
+                                <td colspan="8" style="text-align: center; padding: 40px; color: #999; font-style: italic;">
+                                    No mathematical assessments yet. Test an action to see Bayesian analysis in action.
+                                </td>
+                            </tr>
+                            """}
+                        </tbody>
+                    </table>
+                </div>
             </div>
             """
             
@@ -1463,132 +996,20 @@ def create_enhanced_demo():
         def generate_trial():
             """Generate mathematical trial license"""
             license_key = generate_mathematical_trial_license()
-            demo_state.stats['trial_licenses'] = demo_state.stats.get('trial_licenses', 0) + 1
-            
             return license_key, f"""
-            <div style="text-align: center; padding: 30px; background: linear-gradient(135deg, #FFB300, #FF9800); color: white; border-radius: 15px; box-shadow: 0 12px 40px rgba(255, 179, 0, 0.4);">
-                <h3 style="margin-top: 0; margin-bottom: 20px;">🎉 Mathematical Trial License Generated!</h3>
-                <div style="background: white; color: #333; padding: 22px; border-radius: 10px; font-family: 'Monaco', 'Courier New', monospace; margin: 20px 0; font-size: 16px; letter-spacing: 1.5px; border: 3px dashed #FFB300; box-shadow: 0 8px 25px rgba(0,0,0,0.2);">
+            <div style="text-align: center; padding: 25px; background: linear-gradient(135deg, #FFB300, #FF9800); color: white; border-radius: 15px; box-shadow: 0 12px 40px rgba(255, 179, 0, 0.4);">
+                <h3 style="margin-top: 0; margin-bottom: 15px;">🎉 Mathematical Trial License Generated!</h3>
+                <div style="background: white; color: #333; padding: 18px; border-radius: 10px; font-family: monospace; margin: 15px 0; font-size: 15px; letter-spacing: 1px; border: 3px dashed #FFB300;">
                     {license_key}
                 </div>
-                <p style="margin-bottom: 25px; font-size: 1.1em; line-height: 1.6;">Copy this key and paste it into the License Key field above.</p>
-                <div style="background: rgba(255,255,255,0.2); padding: 22px; border-radius: 10px; margin-top: 20px;">
-                    <div style="font-size: 1em; line-height: 1.7;">
-                        ⏳ <strong>14-day mathematical trial</strong><br>
-                        🧮 <strong>Bayesian analysis with confidence intervals</strong><br>
-                        🛡️ <strong>Mechanical gates with mathematical weights</strong><br>
-                        🧠 <strong>Prospect Theory psychological optimization</strong>
-                    </div>
-                </div>
-            </div>
-            """
-        
-        def calculate_mathematical_roi(current, target):
-            """Calculate mathematical ROI with confidence"""
-            # ROI calculations with mathematical precision
-            roi_data = {
-                ('OSS', 'Enterprise'): {
-                    'savings': 3850000,
-                    'payback': 3.2,
-                    'confidence': 0.92,
-                    'npv': 3200000
-                },
-                ('OSS', 'Professional'): {
-                    'savings': 2850000,
-                    'payback': 5.6,
-                    'confidence': 0.88,
-                    'npv': 2400000
-                },
-                ('OSS', 'Starter'): {
-                    'savings': 1850000,
-                    'payback': 8.4,
-                    'confidence': 0.85,
-                    'npv': 1500000
-                },
-                ('Professional', 'Enterprise'): {
-                    'savings': 1200000,
-                    'payback': 2.1,
-                    'confidence': 0.90,
-                    'npv': 1050000
-                }
-            }
-            
-            key = (current, target)
-            if key in roi_data:
-                data = roi_data[key]
-            else:
-                data = {'savings': 1500000, 'payback': 6.0, 'confidence': 0.80, 'npv': 1200000}
-            
-            # Calculate confidence intervals
-            ci_lower = data['savings'] * 0.9
-            ci_upper = data['savings'] * 1.1
-            
-            return f"""
-            <div class="mathematical-roi">
-                <h4 style="margin-top: 0; margin-bottom: 25px; font-size: 1.3em;">Mathematical ROI: {current} → {target}</h4>
-                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 30px;">
-                    <div>
-                        <div style="font-size: 14px; opacity: 0.95; letter-spacing: 0.5px; margin-bottom: 5px;">Annual Savings</div>
-                        <div style="font-size: 42px; font-weight: bold; margin: 10px 0;">${data['savings']:,}</div>
-                        <div style="font-size: 12px; opacity: 0.8;">95% CI: ${ci_lower:,.0f} - ${ci_upper:,.0f}</div>
-                    </div>
-                    <div>
-                        <div style="font-size: 14px; opacity: 0.95; letter-spacing: 0.5px; margin-bottom: 5px;">Payback Period</div>
-                        <div style="font-size: 42px; font-weight: bold; margin: 10px 0;">{data['payback']} mo</div>
-                        <div style="font-size: 12px; opacity: 0.8;">± 0.5 months</div>
-                    </div>
-                </div>
-                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin-top: 30px;">
-                    <div style="font-size: 13px;">
-                        <div style="opacity: 0.9; margin-bottom: 3px;">📊 Bayesian Probability</div>
-                        <div style="font-weight: bold; font-size: 16px;">{data['confidence']:.0%} success</div>
-                    </div>
-                    <div style="font-size: 13px;">
-                        <div style="opacity: 0.9; margin-bottom: 3px;">💰 NPV (10% discount)</div>
-                        <div style="font-weight: bold; font-size: 16px;">${data['npv']:,}</div>
-                    </div>
-                </div>
-                <div style="font-size: 12px; margin-top: 25px; opacity: 0.9; line-height: 1.6;">
-                    Based on mathematical models: $3.9M avg breach cost, Bayesian confidence intervals,<br>
-                    Prospect Theory risk perception, 250 operating days, $150/hr engineer cost
-                </div>
-            </div>
-            """
-        
-        def request_trial(email):
-            """Request mathematical trial"""
-            if not email or "@" not in email:
-                return """
-                <div style="text-align: center; padding: 30px; background: #FFF8E1; border-radius: 15px; border: 1px solid #FFE082; box-shadow: 0 8px 25px rgba(255, 224, 130, 0.3);">
-                    <div style="color: #FF9800; font-size: 60px; margin-bottom: 20px;">⚠️</div>
-                    <h4 style="margin: 0 0 15px 0; color: #F57C00;">Enterprise Email Required</h4>
-                    <p style="color: #666; margin: 0; font-size: 1.05em; line-height: 1.6;">Please enter a valid enterprise email address to receive your mathematical trial license.</p>
-                </div>
-                """
-            
-            license_key = generate_mathematical_trial_license()
-            demo_state.stats['trial_licenses'] = demo_state.stats.get('trial_licenses', 0) + 1
-            
-            return f"""
-            <div style="text-align: center; padding: 30px; background: linear-gradient(135deg, #4CAF50, #2E7D32); color: white; border-radius: 15px; box-shadow: 0 12px 40px rgba(76, 175, 80, 0.4);">
-                <div style="font-size: 60px; margin-bottom: 15px;">🎉</div>
-                <h3 style="margin-top: 0; margin-bottom: 20px;">Mathematical Trial License Sent!</h3>
-                <p style="margin-bottom: 25px; font-size: 1.1em; line-height: 1.6;">Your 14-day mathematical trial license has been sent to:</p>
-                <div style="background: white; color: #333; padding: 18px; border-radius: 10px; margin: 20px 0; font-weight: bold; font-size: 1.15em; border: 3px solid #A5D6A7; box-shadow: 0 8px 25px rgba(0,0,0,0.15);">
-                    {email}
-                </div>
-                <div style="background: rgba(255,255,255,0.2); padding: 25px; border-radius: 10px; margin-top: 25px;">
-                    <div style="font-family: 'Monaco', 'Courier New', monospace; font-size: 1.15em; letter-spacing: 1.5px; margin-bottom: 20px;">{license_key}</div>
-                    <div style="font-size: 1em; line-height: 1.7; opacity: 0.95;">
+                <p style="margin-bottom: 20px;">Copy this key and paste it into the License Key field above.</p>
+                <div style="background: rgba(255,255,255,0.2); padding: 18px; border-radius: 10px; margin-top: 15px;">
+                    <div style="font-size: 0.95em; line-height: 1.6;">
                         ⏳ <strong>14-day mathematical trial</strong><br>
                         🧮 <strong>Bayesian analysis with confidence intervals</strong><br>
-                        🛡️ <strong>Mechanical gates with mathematical weights</strong><br>
-                        🧠 <strong>Prospect Theory psychological optimization</strong>
+                        🛡️ <strong>Mechanical gates with mathematical weights</strong>
                     </div>
                 </div>
-                <div style="margin-top: 25px; font-size: 0.95em; opacity: 0.9;">
-                    Join Fortune 500 companies using mathematical ARF for safe AI execution
-                </div>
             </div>
             """
         
@@ -1602,25 +1023,13 @@ def create_enhanced_demo():
         test_btn.click(
             fn=test_mathematical_assessment,
             inputs=[scenario, context, license_key],
-            outputs=[oss_results, enterprise_results, license_display, action_history]
+            outputs=[oss_results, enterprise_results, license_display]
         )
         
         trial_btn.click(
             fn=generate_trial,
             inputs=[],
-            outputs=[license_key, trial_output]
-        )
-        
-        calculate_roi_btn.click(
-            fn=calculate_mathematical_roi,
-            inputs=[current_tier, target_tier],
-            outputs=[roi_result]
-        )
-        
-        request_trial_btn.click(
-            fn=request_trial,
-            inputs=[email_input],
-            outputs=[trial_output]
+            outputs=[license_key]
         )
     
     return demo
@@ -1628,7 +1037,8 @@ def create_enhanced_demo():
 # ============== MAIN EXECUTION ==============
 if __name__ == "__main__":
     print("\n" + "="*80)
-    print("🚀 LAUNCHING ENHANCED ARF 3.3.9 DEMO WITH MATHEMATICAL SOPHISTICATION")
+    print("🚀 LAUNCHING FIXED ARF 3.3.9 DEMO")
+    print("📊 ARF Status:", ARF_UNIFIED_STATUS['display_text'])
     print("="*80)
     
     demo = create_enhanced_demo()