Update ui/components.py

ui/components.py

@@ -1,194 +1,458 @@
 """
-Reusable UI components
+UI components for the 5-tab demo
 """
 
 import gradio as gr
-from typing import Dict, List, Optional, Callable
+from typing import Dict, List, Any, Optional, Tuple
+import plotly.graph_objects as go
 
-def create_metric_card(title: str, value: str, is_critical: bool = False) -> gr.HTML:
-    """Create a styled metric card"""
-    color = "#FF6B6B" if is_critical else "#4ECDC4"
-    bg_color = "rgba(255,107,107,0.1)" if is_critical else "rgba(78,205,196,0.1)"
+
+def create_header(oss_version: str, oss_available: bool) -> gr.Markdown:
+    """Create the demo header"""
+    status_badge = "✅ Connected" if oss_available else "⚠️ Mock Mode"
     
-    html = f"""
-    <div style='
-        padding: 15px;
-        background: {bg_color};
-        border-radius: 8px;
-        border-left: 4px solid {color};
-        margin: 10px 0;
-    '>
-        <div style='font-size: 12px; color: #666; margin-bottom: 5px;'>{title}</div>
-        <div style='font-size: 18px; font-weight: bold; color: {color};'>{value}</div>
+    return gr.Markdown(f"""
+    <div style="text-align: center; padding: 30px 20px 20px 20px; background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%); border-radius: 0 0 20px 20px; margin-bottom: 30px; border-bottom: 3px solid #4ECDC4;">
+        <h1 style="margin-bottom: 10px;">🚀 Agentic Reliability Framework</h1>
+        <h2 style="color: #4a5568; font-weight: 600; margin-bottom: 20px;">Investor Demo v3.8.0</h2>
+        
+        <div style="display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-bottom: 20px;">
+            <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 8px 16px; border-radius: 20px; font-weight: 700; font-size: 0.85rem;">
+                🏢 Enterprise Edition
+            </div>
+            <div style="background: linear-gradient(135deg, #4299e1 0%, #38b2ac 100%); color: white; padding: 8px 16px; border-radius: 20px; font-weight: 700; font-size: 0.85rem;">
+                🆓 OSS v{oss_version}
+            </div>
+            <div style="background: #e8f5e8; color: #2d3748; padding: 8px 16px; border-radius: 20px; font-weight: 600; font-size: 0.85rem;">
+                📈 5.2× ROI
+            </div>
+            <div style="background: #fff3cd; color: #856404; padding: 8px 16px; border-radius: 20px; font-weight: 600; font-size: 0.85rem;">
+                ⚡ 85% MTTR Reduction
+            </div>
+        </div>
+        
+        <div style="color: #718096; font-size: 16px; max-width: 800px; margin: 0 auto; line-height: 1.6;">
+            From <span style="font-weight: 700; color: #4299e1;">OSS Advisory</span> 
+            to <span style="font-weight: 700; color: #764ba2;">Enterprise Autonomous Healing</span>.
+            Experience the complete journey in 5 focused tabs.
+        </div>
+        
+        <div style="margin-top: 15px; font-size: 0.9rem; color: #4ECDC4; font-weight: 600;">
+            {status_badge}
+        </div>
     </div>
-    """
-    return gr.HTML(value=html)
+    """)
 
-def create_business_impact_section(impact_data: Dict[str, str]) -> gr.HTML:
-    """Create business impact section"""
-    html = "<div style='margin: 20px 0;'>"
-    html += "<h4 style='margin: 0 0 15px 0; color: #2c3e50;'>💰 Business Impact</h4>"
-    
-    for key, value in impact_data.items():
-        is_loss = any(word in key.lower() for word in ['loss', 'impact', 'violation'])
-        icon = "📉" if is_loss else "📊"
+
+def create_status_bar() -> gr.HTML:
+    """Create system status bar"""
+    return gr.HTML("""
+    <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 25px;">
+        <div style="background: white; padding: 20px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); border-left: 4px solid #4ECDC4;">
+            <div style="font-size: 0.9rem; color: #718096; margin-bottom: 5px;">System Status</div>
+            <div style="display: flex; align-items: center; gap: 8px;">
+                <div style="width: 10px; height: 10px; background: #4ECDC4; border-radius: 50%;"></div>
+                <div style="font-weight: 700; color: #2d3748;">Operational</div>
+            </div>
+        </div>
+        
+        <div style="background: white; padding: 20px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); border-left: 4px solid #FFA726;">
+            <div style="font-size: 0.9rem; color: #718096; margin-bottom: 5px;">Performance</div>
+            <div style="font-weight: 700; color: #2d3748; font-size: 1.1rem;">8.2 min avg resolution</div>
+        </div>
         
-        html += f"""
-        <div style='
-            display: flex;
-            justify-content: space-between;
-            padding: 10px 15px;
-            background: {'rgba(255,107,107,0.05)' if is_loss else 'rgba(78,205,196,0.05)'};
-            border-radius: 6px;
-            margin: 8px 0;
-            border-left: 3px solid {'#FF6B6B' if is_loss else '#4ECDC4'};
-        '>
-            <span>{icon} {key}</span>
-            <span style='font-weight: bold; color: {'#FF6B6B' if is_loss else '#4ECDC4'};'>{value}</span>
+        <div style="background: white; padding: 20px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); border-left: 4px solid #42A5F5;">
+            <div style="font-size: 0.9rem; color: #718096; margin-bottom: 5px;">Learning Engine</div>
+            <div style="font-weight: 700; color: #2d3748; font-size: 1.1rem;">5 patterns detected</div>
         </div>
-        """
+    </div>
+    """)
+
+
+def create_tab1_incident_demo(scenarios: Dict, default_scenario: str = "Cache Miss Storm") -> Tuple:
+    """Create Tab 1: Live Incident Demo"""
+    with gr.Row():
+        # Left Panel
+        with gr.Column(scale=1):
+            gr.Markdown("### 🎬 Select Incident Scenario")
+            
+            scenario_dropdown = gr.Dropdown(
+                choices=list(scenarios.keys()),
+                value=default_scenario,
+                label="Choose an incident to analyze:",
+                interactive=True
+            )
+            
+            scenario_description = gr.Markdown(
+                value=scenarios[default_scenario]["description"]
+            )
+            
+            gr.Markdown("### 📊 Current Metrics")
+            metrics_display = gr.JSON(
+                value=scenarios[default_scenario].get("metrics", {}),
+                label="",
+                show_label=False
+            )
+            
+            gr.Markdown("### 💰 Business Impact")
+            impact_display = gr.JSON(
+                value=scenarios[default_scenario].get("impact", {}),
+                label="",
+                show_label=False
+            )
+        
+        # Right Panel
+        with gr.Column(scale=2):
+            gr.Markdown("### 📈 Incident Timeline")
+            timeline_output = gr.Plot(label="")
+            
+            gr.Markdown("### ⚡ Take Action")
+            with gr.Row():
+                oss_btn = gr.Button(
+                    "🆓 Run OSS Analysis",
+                    variant="secondary",
+                    size="lg",
+                    min_width=150
+                )
+                enterprise_btn = gr.Button(
+                    "🚀 Execute Enterprise Healing",
+                    variant="primary",
+                    size="lg",
+                    min_width=150
+                )
+            
+            with gr.Row():
+                approval_toggle = gr.Checkbox(
+                    label="🔐 Require Manual Approval",
+                    value=True,
+                    interactive=True
+                )
+                demo_btn = gr.Button(
+                    "⚡ Quick Demo",
+                    variant="secondary",
+                    size="sm"
+                )
+            
+            approval_display = gr.HTML(
+                value="<div style='padding: 15px; background: #f8f9fa; border-radius: 8px; color: #6c757d;'>"
+                      "Approval workflow will appear here after execution"
+                      "</div>"
+            )
+            
+            gr.Markdown("### ⚙️ Configuration")
+            config_display = gr.JSON(
+                value={"mode": "approval", "safety_guardrails": "active"},
+                label=""
+            )
+            
+            gr.Markdown("### 🎯 Results")
+            results_display = gr.JSON(
+                value={"status": "Ready to analyze incident..."},
+                label=""
+            )
     
-    html += "</div>"
-    return gr.HTML(value=html)
-
-def create_approval_workflow(requires_approval: bool = True) -> gr.HTML:
-    """Create approval workflow visualization"""
-    if requires_approval:
-        html = """
-        <div style='
-            padding: 20px;
-            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
-            border-radius: 10px;
-            border: 2px dashed #6c757d;
-            margin: 15px 0;
-        '>
-            <div style='display: flex; align-items: center; margin-bottom: 15px;'>
-                <div style='
-                    background: #007bff;
-                    color: white;
-                    width: 30px;
-                    height: 30px;
-                    border-radius: 50%;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    margin-right: 10px;
-                '>1</div>
-                <h4 style='margin: 0;'>🛡️ Approval Required</h4>
-            </div>
+    return (scenario_dropdown, scenario_description, metrics_display, impact_display,
+            timeline_output, oss_btn, enterprise_btn, approval_toggle, demo_btn,
+            approval_display, config_display, results_display)
+
+
+def create_tab2_business_roi() -> Tuple:
+    """Create Tab 2: Business Impact & ROI"""
+    with gr.Column():
+        gr.Markdown("### 📊 Executive Dashboard")
+        dashboard_output = gr.Plot(label="")
+        
+        gr.Markdown("### 🧮 ROI Calculator")
+        with gr.Row():
+            with gr.Column(scale=1):
+                monthly_slider = gr.Slider(
+                    1, 100, value=15, step=1,
+                    label="Monthly incidents",
+                    interactive=True
+                )
+                impact_slider = gr.Slider(
+                    1000, 50000, value=8500, step=500,
+                    label="Average cost per incident ($)",
+                    interactive=True
+                )
+                team_slider = gr.Slider(
+                    1, 20, value=5, step=1,
+                    label="Reliability team size",
+                    interactive=True
+                )
+                calculate_btn = gr.Button(
+                    "Calculate My ROI",
+                    variant="primary",
+                    size="lg"
+                )
             
-            <div style='display: flex; justify-content: space-between; margin-bottom: 15px;'>
-                <div style='text-align: center;'>
-                    <div style='font-size: 24px;'>🤖</div>
-                    <div style='font-size: 12px;'>ARF Analysis</div>
-                </div>
-                <div style='align-self: center;'>→</div>
-                <div style='text-align: center;'>
-                    <div style='font-size: 24px;'>👨‍💼</div>
-                    <div style='font-size: 12px;'>Human Review</div>
-                </div>
-                <div style='align-self: center;'>→</div>
-                <div style='text-align: center;'>
-                    <div style='font-size: 24px;'>⚡</div>
-                    <div style='font-size: 12px;'>Execution</div>
-                </div>
-            </div>
+            with gr.Column(scale=2):
+                roi_output = gr.JSON(
+                    value={},
+                    label="Your Analysis"
+                )
+        
+        with gr.Row():
+            with gr.Column():
+                gr.Markdown("""
+                **📈 Industry Benchmarks**
+                - **5.2×** Average ROI (first year)
+                - **2-3 months** Payback period
+                - **81.7%** Auto-heal rate
+                - **85%** MTTR reduction
+                - **$6.2M** Average annual savings
+                """)
             
-            <div style='
-                background: rgba(0,123,255,0.1);
-                padding: 10px;
-                border-radius: 5px;
-                font-size: 14px;
-            '>
-                <b>Status:</b> ✅ <span style='color: #28a745;'>Approved & Executed</span>
-            </div>
-        </div>
-        """
-    else:
-        html = """
-        <div style='
-            padding: 20px;
-            background: linear-gradient(135deg, #e8f5e8 0%, #d4edda 100%);
-            border-radius: 10px;
-            border: 2px solid #28a745;
-            margin: 15px 0;
-        '>
-            <div style='display: flex; align-items: center; margin-bottom: 15px;'>
-                <div style='
-                    background: #28a745;
-                    color: white;
-                    width: 30px;
-                    height: 30px;
-                    border-radius: 50%;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    margin-right: 10px;
-                '>⚡</div>
-                <h4 style='margin: 0;'>Autonomous Execution</h4>
+            with gr.Column():
+                gr.Markdown("""
+                **🎯 Business Outcomes**
+                - **325+ hours** Engineer time reclaimed
+                - **99.9%** SLA compliance maintained
+                - **+40%** Customer satisfaction
+                - **60%** Increased innovation capacity
+                - **Zero** Audit findings
+                """)
+    
+    return (dashboard_output, monthly_slider, impact_slider, team_slider, 
+            calculate_btn, roi_output)
+
+
+def create_tab3_audit_trail() -> Tuple:
+    """Create Tab 3: Audit Trail & History"""
+    with gr.Row():
+        # Left Column
+        with gr.Column(scale=1):
+            gr.Markdown("### 📋 Execution History")
+            
+            with gr.Row():
+                refresh_btn = gr.Button("🔄 Refresh", variant="secondary", size="sm")
+                clear_btn = gr.Button("🗑️ Clear", variant="stop", size="sm")
+                export_btn = gr.Button("📥 Export", variant="secondary", size="sm")
+            
+            execution_table = gr.Dataframe(
+                headers=["Time", "Scenario", "Actions", "Status", "Savings", "Details"],
+                value=[],
+                label="",
+                interactive=False
+            )
+            
+            gr.Markdown("### 📈 Cost Savings")
+            savings_chart = gr.Plot(label="")
+        
+        # Right Column
+        with gr.Column(scale=1):
+            gr.Markdown("### 📊 Incident History")
+            
+            incident_table = gr.Dataframe(
+                headers=["Time", "Service", "Type", "Severity", "Description"],
+                value=[],
+                label="",
+                interactive=False
+            )
+            
+            gr.Markdown("### 🧠 Memory Graph")
+            memory_graph = gr.Plot(label="")
+            
+            gr.Markdown("### 📤 Export")
+            export_text = gr.Textbox(
+                label="Audit Trail (JSON)",
+                lines=6,
+                interactive=False
+            )
+    
+    return (refresh_btn, clear_btn, export_btn, execution_table, savings_chart,
+            incident_table, memory_graph, export_text)
+
+
+def create_tab4_enterprise_features() -> Tuple:
+    """Create Tab 4: Enterprise Features"""
+    with gr.Row():
+        # Left Column
+        with gr.Column(scale=1):
+            gr.Markdown("### 🔐 License Management")
+            
+            license_display = gr.JSON(
+                value={},
+                label="Current License"
+            )
+            
+            with gr.Row():
+                validate_btn = gr.Button("🔍 Validate", variant="secondary")
+                trial_btn = gr.Button("🆓 Start Trial", variant="primary")
+                upgrade_btn = gr.Button("🚀 Upgrade", variant="secondary")
+            
+            gr.Markdown("### ⚡ Feature Comparison")
+            
+            features_table = gr.Dataframe(
+                headers=["Feature", "OSS", "Starter", "Enterprise"],
+                value=[
+                    ["Autonomous Healing", "❌", "✅ Auto", "✅ AI-Driven"],
+                    ["Compliance Automation", "❌", "✅", "✅ SOC2/GDPR"],
+                    ["Predictive Analytics", "❌", "Basic", "✅ ML-Powered"],
+                    ["Multi-Cloud Support", "❌", "❌", "✅ Native"],
+                    ["Audit Trail", "Basic", "✅", "✅ Comprehensive"],
+                    ["Role-Based Access", "❌", "✅", "✅ Granular"],
+                ],
+                label="",
+                interactive=False
+            )
+        
+        # Right Column
+        with gr.Column(scale=1):
+            gr.Markdown("### 📋 Compliance")
+            
+            compliance_display = gr.JSON(
+                value={
+                    "SOC2": "✅ Certified",
+                    "GDPR": "✅ Compliant",
+                    "ISO27001": "✅ Certified",
+                    "CCPA": "✅ Compliant"
+                },
+                label="Certifications"
+            )
+            
+            gr.Markdown("### 🔗 Integrations")
+            
+            integrations_table = gr.Dataframe(
+                headers=["Platform", "Status", "Last Sync"],
+                value=[
+                    ["AWS", "✅ Connected", "5 min ago"],
+                    ["Azure", "✅ Connected", "8 min ago"],
+                    ["GCP", "✅ Connected", "3 min ago"],
+                    ["Datadog", "✅ Connected", "Active"],
+                    ["PagerDuty", "✅ Connected", "Active"],
+                    ["ServiceNow", "✅ Connected", "15 min ago"],
+                ],
+                label="",
+                interactive=False
+            )
+            
+            gr.Markdown("### ⚙️ MCP Mode")
+            mcp_mode = gr.Radio(
+                choices=["advisory", "approval", "autonomous"],
+                value="approval",
+                label="Execution Mode",
+                interactive=True
+            )
+    
+    return (license_display, validate_btn, trial_btn, upgrade_btn, features_table,
+            compliance_display, integrations_table, mcp_mode)
+
+
+def create_tab5_learning_engine() -> Tuple:
+    """Create Tab 5: Learning Engine"""
+    with gr.Row():
+        # Left Column
+        with gr.Column(scale=2):
+            gr.Markdown("### 🧠 Incident Memory Graph")
+            
+            learning_graph = gr.Plot(label="")
+            
+            with gr.Row():
+                graph_type = gr.Radio(
+                    choices=["Force", "Hierarchical", "Circular"],
+                    value="Force",
+                    label="Layout",
+                    interactive=True
+                )
+                show_labels = gr.Checkbox(label="Show Labels", value=True, interactive=True)
+            
+            gr.Markdown("### 🔍 Similarity Search")
+            
+            search_query = gr.Textbox(
+                label="Describe incident or paste metrics",
+                placeholder="e.g., 'Redis cache miss causing database overload'",
+                lines=2,
+                interactive=True
+            )
+            
+            with gr.Row():
+                search_btn = gr.Button("🔍 Search", variant="primary")
+                clear_btn = gr.Button("Clear", variant="secondary")
+            
+            search_results = gr.Dataframe(
+                headers=["Incident", "Similarity", "Resolution", "Actions"],
+                value=[],
+                label="",
+                interactive=False
+            )
+        
+        # Right Column
+        with gr.Column(scale=1):
+            gr.Markdown("### 📊 Learning Stats")
+            
+            stats_display = gr.JSON(
+                value={
+                    "total_incidents": 0,
+                    "patterns_detected": 0,
+                    "similarity_searches": 0,
+                    "confidence_threshold": 0.85
+                },
+                label="Statistics"
+            )
+            
+            gr.Markdown("### 🎯 Pattern Detection")
+            
+            patterns_display = gr.JSON(
+                value={},
+                label="Detected Patterns"
+            )
+            
+            gr.Markdown("### 📈 Performance")
+            
+            performance_display = gr.JSON(
+                value={
+                    "avg_resolution_time": "0 min",
+                    "success_rate": "0%",
+                    "auto_heal_rate": "0%"
+                },
+                label="Performance Metrics"
+            )
+    
+    return (learning_graph, graph_type, show_labels, search_query, search_btn,
+            clear_btn, search_results, stats_display, patterns_display, performance_display)
+
+
+def create_footer() -> gr.Markdown:
+    """Create the demo footer"""
+    return gr.Markdown("""
+    <div style="margin-top: 40px; padding: 30px; background: linear-gradient(135deg, #1a365d 0%, #2d3748 100%); border-radius: 20px; color: white;">
+        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-bottom: 30px;">
+            <div>
+                <h4 style="color: white; margin-bottom: 15px;">🚀 User Journey</h4>
+                <ol style="color: #cbd5e0; padding-left: 20px;">
+                    <li style="margin-bottom: 8px;">Start with OSS Analysis</li>
+                    <li style="margin-bottom: 8px;">Calculate Your ROI</li>
+                    <li style="margin-bottom: 8px;">Execute Enterprise Healing</li>
+                    <li style="margin-bottom: 8px;">Explore Audit Trail</li>
+                    <li>Discover Learning Engine</li>
+                </ol>
             </div>
             
-            <div style='text-align: center; margin: 20px 0;'>
-                <div style='font-size: 48px; margin-bottom: 10px;'>🤖 → ⚡</div>
-                <div style='color: #666;'>ARF directly executes with safety guardrails</div>
+            <div>
+                <h4 style="color: white; margin-bottom: 15px;">📞 Get Started</h4>
+                <ul style="color: #cbd5e0; list-style: none; padding: 0;">
+                    <li style="margin-bottom: 8px;">📧 sales@arfinvestor.com</li>
+                    <li style="margin-bottom: 8px;">📚 docs.arfinvestor.com</li>
+                    <li style="margin-bottom: 8px;">💬 Join Slack Community</li>
+                    <li>🆓 30-Day Enterprise Trial</li>
+                </ul>
             </div>
             
-            <div style='
-                background: rgba(40,167,69,0.1);
-                padding: 10px;
-                border-radius: 5px;
-                font-size: 14px;
-            '>
-                <b>Status:</b> ✅ <span style='color: #28a745;'>Auto-Executed Successfully</span>
+            <div>
+                <h4 style="color: white; margin-bottom: 15px;">🛡️ Enterprise Grade</h4>
+                <ul style="color: #cbd5e0; list-style: none; padding: 0;">
+                    <li style="margin-bottom: 8px;">✅ SOC 2 Type II</li>
+                    <li style="margin-bottom: 8px;">✅ GDPR & CCPA</li>
+                    <li style="margin-bottom: 8px;">✅ ISO 27001</li>
+                    <li>✅ HIPAA Ready</li>
+                </ul>
             </div>
         </div>
-        """
-    
-    return gr.HTML(value=html)
-
-def create_roi_comparison_table() -> gr.HTML:
-    """Create ROI comparison table"""
-    html = """
-    <div style='margin: 20px 0;'>
-        <h4 style='margin: 0 0 15px 0; color: #2c3e50;'>📊 Capability Comparison</h4>
         
-        <table style='
-            width: 100%;
-            border-collapse: collapse;
-            border: 1px solid #dee2e6;
-            border-radius: 8px;
-            overflow: hidden;
-        '>
-            <thead>
-                <tr style='background: #f8f9fa;'>
-                    <th style='padding: 12px; text-align: left; border-bottom: 2px solid #dee2e6;'>Feature</th>
-                    <th style='padding: 12px; text-align: left; border-bottom: 2px solid #dee2e6;'>OSS (Free)</th>
-                    <th style='padding: 12px; text-align: left; border-bottom: 2px solid #dee2e6;'>Enterprise</th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr>
-                    <td style='padding: 10px; border-bottom: 1px solid #dee2e6;'>Execution</td>
-                    <td style='padding: 10px; border-bottom: 1px solid #dee2e6; color: #dc3545;'>❌ Advisory only</td>
-                    <td style='padding: 10px; border-bottom: 1px solid #dee2e6; color: #28a745;'>✅ Autonomous</td>
-                </tr>
-                <tr>
-                    <td style='padding: 10px; border-bottom: 1px solid #dee2e6;'>Learning</td>
-                    <td style='padding: 10px; border-bottom: 1px solid #dee2e6; color: #dc3545;'>❌ None</td>
-                    <td style='padding: 10px; border-bottom: 1px solid #dee2e6; color: #28a745;'>✅ Continuous</td>
-                </tr>
-                <tr>
-                    <td style='padding: 10px; border-bottom: 1px solid #dee2e6;'>ROI Measurement</td>
-                    <td style='padding: 10px; border-bottom: 1px solid #dee2e6; color: #dc3545;'>❌ No ROI</td>
-                    <td style='padding: 10px; border-bottom: 1px solid #dee2e6; color: #28a745;'>✅ 5.2× average</td>
-                </tr>
-                <tr>
-                    <td style='padding: 10px;'>Payback Period</td>
-                    <td style='padding: 10px;'>N/A</td>
-                    <td style='padding: 10px; color: #28a745;'>✅ 2-3 months</td>
-                </tr>
-            </tbody>
-        </table>
+        <div style="border-top: 1px solid #4a5568; padding-top: 20px; text-align: center; color: #a0aec0; font-size: 0.9rem;">
+            <p style="margin: 0;">© 2024 Agentic Reliability Framework. Demo v3.8.0 Enterprise Edition.</p>
+            <p style="margin: 10px 0 0 0; font-size: 0.8rem;">This demonstration showcases capabilities. Actual results may vary.</p>
+        </div>
     </div>
-    """
-    return gr.HTML(value=html)
+    """)