Update ui/components.py

ui/components.py

@@ -1,646 +1,487 @@
 """
-UI components for the 5-tab demo - COMPLETE FIXED VERSION
-ALL TABS WORKING - Tab 1 now updates dynamically
+Enhanced components with real ARF integration
 """
-
-import gradio as gr
-from typing import Dict, List, Any, Optional, Tuple
+import streamlit as st
 import plotly.graph_objects as go
+import plotly.express as px
+from datetime import datetime, timedelta
+import pandas as pd
+import numpy as np
+from typing import List, Dict, Any, Optional
+import time
+import json
 
+# Mock imports for ARF objects (in real app, import from actual packages)
+class MockHealingIntent:
+    """Mock HealingIntent for demo purposes"""
+    def __init__(self, action, component, confidence, status, rag_similarity_score=None):
+        self.action = action
+        self.component = component
+        self.confidence = confidence
+        self.status = status
+        self.rag_similarity_score = rag_similarity_score
+        self.deterministic_id = f"intent_{int(time.time())}"
+        self.created_at = time.time()
+        
+    def get_execution_summary(self):
+        return {
+            "intent_id": self.deterministic_id,
+            "action": self.action,
+            "component": self.component,
+            "confidence": self.confidence,
+            "status": self.status.value if hasattr(self.status, 'value') else self.status,
+            "rag_similarity_score": self.rag_similarity_score
+        }
 
-def create_header(oss_version: str, oss_available: bool) -> gr.HTML:
-    """Create the demo header - FIXED VERSION"""
-    status_badge = "✅ Connected" if oss_available else "⚠️ Mock Mode"
+def create_arf_enhanced_timeline(incident_data: Dict[str, Any], healing_intents: List[Dict[str, Any]] = None):
+    """
+    Create an enhanced incident timeline with real ARF integration
+    """
+    col1, col2 = st.columns([2, 1])
     
-    return gr.HTML(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>
+    with col1:
+        st.markdown("### 📈 ARF-Enhanced Incident Timeline")
         
-        <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>
+        # Create timeline events based on ARF processing pipeline
+        events = [
+            {"time": "-5m", "event": "📡 Alert Triggered", "phase": "detection", "color": "#FF6B6B"},
+            {"time": "-4m", "event": "🧠 ARF Analysis Started", "phase": "analysis", "color": "#4ECDC4"},
+            {"time": "-3.5m", "event": "🔍 RAG Similarity Search", "phase": "rag", "color": "#1E90FF"},
+            {"time": "-2.5m", "event": "🎯 Pattern Detection", "phase": "pattern", "color": "#9D4EDD"},
+            {"time": "-1.5m", "event": "💡 HealingIntent Generated", "phase": "intent", "color": "#FFD166"},
+            {"time": "-1m", "event": "⚡ MCP Execution", "phase": "execution", "color": "#06D6A0"},
+            {"time": "Now", "event": "✅ Resolution Complete", "phase": "resolution", "color": "#118AB2"}
+        ]
         
-        <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>.
-        </div>
-        
-        <div style="margin-top: 15px; font-size: 0.9rem; color: #4ECDC4; font-weight: 600;">
-            {status_badge}
-        </div>
-    </div>
-    """)
-
-
-def create_status_bar() -> gr.HTML:
-    """Create system status bar - FIXED VERSION"""
-    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>
+        # Create enhanced timeline with ARF phases
+        fig = go.Figure()
         
-        <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>
+        # Add ARF processing phases as background
+        phases = [
+            {"name": "Detection", "x_range": [0, 1], "color": "rgba(255, 107, 107, 0.1)"},
+            {"name": "Analysis", "x_range": [1, 2.5], "color": "rgba(78, 205, 196, 0.1)"},
+            {"name": "RAG Search", "x_range": [2.5, 3.5], "color": "rgba(30, 144, 255, 0.1)"},
+            {"name": "Intent Gen", "x_range": [3.5, 4.5], "color": "rgba(157, 78, 221, 0.1)"},
+            {"name": "Execution", "x_range": [4.5, 5.5], "color": "rgba(6, 214, 160, 0.1)"},
+            {"name": "Resolution", "x_range": [5.5, 6], "color": "rgba(17, 138, 178, 0.1)"}
+        ]
         
-        <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;">6 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 - COMPLETE FIXED VERSION WITH DYNAMIC UPDATES"""
-    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
+        for phase in phases:
+            fig.add_shape(
+                type="rect",
+                x0=phase["x_range"][0] - 0.5,
+                x1=phase["x_range"][1] - 0.5,
+                y0=-0.3,
+                y1=0.3,
+                fillcolor=phase["color"],
+                line=dict(width=0),
+                layer="below"
             )
             
-            # Initialize with default scenario data
-            scenario_description = gr.Markdown(
-                value=scenarios[default_scenario]["description"]
+            # Add phase labels
+            fig.add_annotation(
+                x=(phase["x_range"][0] + phase["x_range"][1] - 1) / 2,
+                y=0.4,
+                text=phase["name"],
+                showarrow=False,
+                font=dict(size=9, color="#64748B"),
+                yshift=10
             )
-            
-            gr.Markdown("### 📊 Current Metrics")
-            metrics_display = gr.JSON(
-                value=scenarios[default_scenario].get("metrics", {}),
-                label="",
-                show_label=False
+        
+        # Add timeline line with markers
+        fig.add_trace(go.Scatter(
+            x=[i for i in range(len(events))],
+            y=[0] * len(events),
+            mode='lines+markers+text',
+            line=dict(color='#334155', width=2, dash='solid'),
+            marker=dict(
+                size=18,
+                color=[e['color'] for e in events],
+                line=dict(width=2, color='white')
+            ),
+            text=[e['event'][0] for e in events],  # Use emoji as marker text
+            textposition="middle center",
+            textfont=dict(size=10, color='white'),
+            hoverinfo='text',
+            hovertext=[f"<b>{e['event']}</b><br>Phase: {e['phase'].title()}<br>Time: {e['time']}" for e in events],
+            hovertemplate='%{hovertext}<extra></extra>'
+        ))
+        
+        # Add event descriptions
+        for i, event in enumerate(events):
+            fig.add_annotation(
+                x=i,
+                y=-0.2,
+                text=event['event'].split(' ')[1] if ' ' in event['event'] else event['event'][1:],
+                showarrow=False,
+                yshift=-30,
+                font=dict(size=9, color=event['color'])
             )
             
-            gr.Markdown("### 💰 Business Impact")
-            impact_display = gr.JSON(
-                value=scenarios[default_scenario].get("business_impact", {}),
-                label="",
-                show_label=False
+            fig.add_annotation(
+                x=i,
+                y=0.1,
+                text=event['time'],
+                showarrow=False,
+                yshift=25,
+                font=dict(size=8, color="#94A3B8")
             )
         
-        # Right Panel
-        with gr.Column(scale=2):
-            gr.Markdown("### 📈 Incident Timeline")
-            timeline_output = gr.Plot(label="", show_label=False)
-            
-            gr.Markdown("### ⚡ Take Action")
-            with gr.Row():
-                oss_btn = gr.Button(
-                    "🆓 Run OSS Analysis",
-                    variant="secondary",
-                    size="lg",
-                    elem_id="oss_btn"
+        # Update layout
+        fig.update_layout(
+            height=250,
+            showlegend=False,
+            plot_bgcolor='rgba(0,0,0,0)',
+            paper_bgcolor='rgba(0,0,0,0)',
+            xaxis=dict(
+                range=[-1, len(events)],
+                showticklabels=False,
+                showgrid=False,
+                zeroline=False
+            ),
+            yaxis=dict(
+                range=[-0.5, 0.5],
+                showticklabels=False,
+                showgrid=False,
+                zeroline=False
+            ),
+            margin=dict(l=20, r=20, t=20, b=50)
+        )
+        
+        st.plotly_chart(fig, use_container_width=True)
+        
+        # Add ARF processing metrics
+        if healing_intents:
+            cols = st.columns(4)
+            with cols[0]:
+                intent_conf = healing_intents[0].get('confidence', 0.7) if healing_intents else 0.7
+                st.metric(
+                    label="🧠 ARF Confidence",
+                    value=f"{intent_conf*100:.1f}%",
+                    delta="+15% with RAG"
                 )
-                enterprise_btn = gr.Button(
-                    "🚀 Execute Enterprise Healing",
-                    variant="primary",
-                    size="lg",
-                    elem_id="enterprise_btn"
+            with cols[1]:
+                st.metric(
+                    label="🔍 Similar Incidents",
+                    value=f"{len(healing_intents[0].get('similar_incidents', [])) if healing_intents else 0}",
+                    delta="Pattern detected"
                 )
-            
-            with gr.Row():
-                approval_toggle = gr.Checkbox(
-                    label="🔐 Require Manual Approval",
-                    value=True,
-                    interactive=True
+            with cols[2]:
+                st.metric(
+                    label="⚡ Resolution Time",
+                    value="8.2min",
+                    delta="-85% vs OSS"
                 )
-                demo_btn = gr.Button(
-                    "⚡ Quick Demo",
-                    variant="secondary",
-                    size="sm"
+            with cols[3]:
+                cost_savings = incident_data.get('revenue_loss_per_hour', 8500) * 0.5  # 30min saved
+                st.metric(
+                    label="💰 Cost Avoided",
+                    value=f"${cost_savings:,.0f}",
+                    delta_color="normal"
                 )
-            
-            approval_display = gr.HTML(
-                value="<div style='padding: 15px; background: #f8f9fa; border-radius: 8px; color: #6c757d;'>"
-                      "Approval workflow will appear here after execution"
-                      "</div>"
-            )
-            
-            with gr.Row():
-                with gr.Column():
-                    gr.Markdown("### 📋 OSS Results")
-                    oss_results_display = gr.JSON(label="", value={})
-                
-                with gr.Column():
-                    gr.Markdown("### 🎯 Enterprise Results")
-                    enterprise_results_display = gr.JSON(label="", value={})
     
-    # Define function to update scenario details when dropdown changes
-    def update_scenario_details(scenario_name):
-        """Update all scenario details when dropdown changes"""
-        # Get the selected scenario, fallback to default if not found
-        scenario = scenarios.get(scenario_name, scenarios[default_scenario])
+    with col2:
+        st.markdown("### 🎯 ARF Pattern Detection")
         
-        # Update the timeline visualization based on scenario
-        timeline_fig = create_scenario_timeline(scenario_name)
+        # Pattern confidence from ARF RAG similarity
+        rag_score = healing_intents[0].get('rag_similarity_score', 0.85) if healing_intents else 0.85
         
-        return (
-            scenario.get("description", "No description available"),
-            scenario.get("metrics", {}),
-            scenario.get("business_impact", {}),
-            timeline_fig
+        # Confidence gauge using actual ARF confidence
+        fig = go.Figure(go.Indicator(
+            mode="gauge+number",
+            value=rag_score * 100,
+            domain={'x': [0, 1], 'y': [0, 1]},
+            title={'text': "RAG Similarity Score", 'font': {'size': 14}},
+            gauge={
+                'axis': {'range': [0, 100], 'tickwidth': 1, 'tickcolor': "darkblue"},
+                'bar': {'color': "#06D6A0" if rag_score > 0.85 else "#FFD166"},
+                'steps': [
+                    {'range': [0, 70], 'color': "rgba(255, 107, 107, 0.3)"},
+                    {'range': [70, 85], 'color': "rgba(255, 209, 102, 0.3)"},
+                    {'range': [85, 100], 'color': "rgba(6, 214, 160, 0.3)"}
+                ],
+                'threshold': {
+                    'line': {'color': "red", 'width': 4},
+                    'thickness': 0.75,
+                    'value': 85
+                }
+            }
+        ))
+        
+        fig.update_layout(
+            height=200,
+            margin=dict(l=30, r=30, t=50, b=20)
         )
-    
-    # Helper function to create timeline visualization
-    def create_scenario_timeline(scenario_name):
-        """Create a timeline visualization for the selected scenario"""
-        fig = go.Figure()
+        st.plotly_chart(fig, use_container_width=True)
         
-        # Different timeline events for different scenarios
-        scenario_timelines = {
-            "Cache Miss Storm": [
-                {"time": "T-5m", "event": "📉 Cache hit rate drops below 20%", "type": "problem"},
-                {"time": "T-4m", "event": "⚠️ Database load exceeds 90%", "type": "alert"},
-                {"time": "T-3m", "event": "🤖 ARF detects cache pattern", "type": "detection"},
-                {"time": "T-2m", "event": "🧠 Cache analysis complete", "type": "analysis"},
-                {"time": "T-1m", "event": "⚡ Redis cluster scaled", "type": "action"},
-                {"time": "T-0m", "event": "✅ Cache performance restored", "type": "recovery"}
-            ],
-            "Database Connection Pool Exhaustion": [
-                {"time": "T-5m", "event": "📉 Connection pool reaches 95%", "type": "problem"},
-                {"time": "T-4m", "event": "⚠️ API latency spikes to 2s+", "type": "alert"},
-                {"time": "T-3m", "event": "🤖 ARF detects connection pattern", "type": "detection"},
-                {"time": "T-2m", "event": "🧠 Pool analysis complete", "type": "analysis"},
-                {"time": "T-1m", "event": "⚡ Connection pool increased", "type": "action"},
-                {"time": "T-0m", "event": "✅ Database connections stable", "type": "recovery"}
-            ],
-            "Kubernetes Memory Leak": [
-                {"time": "T-5m", "event": "📉 Memory usage hits 95%", "type": "problem"},
-                {"time": "T-4m", "event": "⚠️ Pod restarts every 5 minutes", "type": "alert"},
-                {"time": "T-3m", "event": "🤖 ARF detects memory pattern", "type": "detection"},
-                {"time": "T-2m", "event": "🧠 Heap analysis complete", "type": "analysis"},
-                {"time": "T-1m", "event": "⚡ Memory limits adjusted", "type": "action"},
-                {"time": "T-0m", "event": "✅ JVM memory stabilized", "type": "recovery"}
-            ],
-            "API Rate Limit Storm": [
-                {"time": "T-5m", "event": "📉 429 errors exceed 40%", "type": "problem"},
-                {"time": "T-4m", "event": "⚠️ Partner API calls failing", "type": "alert"},
-                {"time": "T-3m", "event": "🤖 ARF detects rate limit pattern", "type": "detection"},
-                {"time": "T-2m", "event": "🧠 Backoff strategy analyzed", "type": "analysis"},
-                {"time": "T-1m", "event": "⚡ Circuit breaker implemented", "type": "action"},
-                {"time": "T-0m", "event": "✅ API calls normalized", "type": "recovery"}
-            ],
-            "Network Partition": [
-                {"time": "T-5m", "event": "📉 Network partition detected", "type": "problem"},
-                {"time": "T-4m", "event": "⚠️ Database split-brain risk", "type": "alert"},
-                {"time": "T-3m", "event": "🤖 ARF detects partition pattern", "type": "detection"},
-                {"time": "T-2m", "event": "🧠 Consensus analysis complete", "type": "analysis"},
-                {"time": "T-1m", "event": "⚡ Quorum restored", "type": "action"},
-                {"time": "T-0m", "event": "✅ Cluster consistency restored", "type": "recovery"}
-            ],
-            "Storage I/O Saturation": [
-                {"time": "T-5m", "event": "📉 I/O utilization hits 98%", "type": "problem"},
-                {"time": "T-4m", "event": "⚠️ Application timeouts increasing", "type": "alert"},
-                {"time": "T-3m", "event": "🤖 ARF detects storage pattern", "type": "detection"},
-                {"time": "T-2m", "event": "🧠 I/O analysis complete", "type": "analysis"},
-                {"time": "T-1m", "event": "⚡ Storage optimized", "type": "action"},
-                {"time": "T-0m", "event": "✅ I/O performance restored", "type": "recovery"}
-            ]
-        }
+        # Pattern details based on ARF analysis
+        pattern_type = "cache_miss_storm"
+        if incident_data.get('database_load', 0) > 90:
+            pattern_type = "database_overload"
         
-        # Get timeline for this scenario, default to Cache Miss Storm
-        events = scenario_timelines.get(scenario_name, scenario_timelines["Cache Miss Storm"])
+        st.info(f"""
+        **Detected Pattern**: `{pattern_type}`
+        **Confidence**: {rag_score*100:.1f}%
+        **Auto-Heal Eligible**: {'✅ Yes' if rag_score > 0.85 else '❌ Manual Review'}
+        **Similar Incidents**: {len(healing_intents[0].get('similar_incidents', [])) if healing_intents else 0}
+        """)
+
+def create_healing_intent_visualizer(healing_intent: Dict[str, Any]):
+    """
+    Visualize a HealingIntent object from ARF
+    """
+    st.markdown("### 💡 ARF HealingIntent")
+    
+    # Create columns for intent visualization
+    col1, col2 = st.columns([1, 2])
+    
+    with col1:
+        # Confidence indicator
+        confidence = healing_intent.get('confidence', 0.85)
+        fig = go.Figure(go.Indicator(
+            mode="gauge+number",
+            value=confidence * 100,
+            domain={'x': [0, 1], 'y': [0, 1]},
+            title={'text': "Confidence"},
+            gauge={
+                'axis': {'range': [0, 100]},
+                'bar': {'color': "#06D6A0" if confidence > 0.85 else "#FFD166"},
+                'steps': [
+                    {'range': [0, 70], 'color': "rgba(255, 107, 107, 0.3)"},
+                    {'range': [70, 85], 'color': "rgba(255, 209, 102, 0.3)"},
+                    {'range': [85, 100], 'color': "rgba(6, 214, 160, 0.3)"}
+                ],
+                'threshold': {
+                    'line': {'color': "red", 'width': 4},
+                    'thickness': 0.75,
+                    'value': 85
+                }
+            }
+        ))
+        fig.update_layout(height=180)
+        st.plotly_chart(fig, use_container_width=True)
         
-        # Color mapping
-        color_map = {
-            "problem": "#FF6B6B",
-            "alert": "#FFE66D",
-            "detection": "#45B7D1",
-            "analysis": "#9B59B6",
-            "action": "#4ECDC4",
-            "recovery": "#2ECC71"
-        }
+        # Intent metadata
+        st.caption("Intent Metadata")
+        st.code(f"""
+ID: {healing_intent.get('deterministic_id', 'N/A')}
+Status: {healing_intent.get('status', 'created')}
+Source: {healing_intent.get('source', 'oss_analysis')}
+Created: {datetime.fromtimestamp(healing_intent.get('created_at', time.time())).strftime('%H:%M:%S')}
+        """)
+    
+    with col2:
+        # Intent details
+        st.markdown("#### Action Details")
         
-        # Add events
-        for event in events:
-            fig.add_trace(go.Scatter(
-                x=[event["time"]],
-                y=[1],
-                mode='markers+text',
-                marker=dict(
-                    size=20,
-                    color=color_map[event["type"]],
-                    symbol='circle',
-                    line=dict(width=2, color='white')
-                ),
-                text=[event["event"]],
-                textposition="top center",
-                hoverinfo='text',
-                name=event["type"].capitalize(),
-                hovertemplate="<b>%{text}</b><br>Click for details<extra></extra>"
-            ))
+        # Action card
+        action = healing_intent.get('action', 'scale_out')
+        component = healing_intent.get('component', 'redis_cache')
         
-        # Add connecting line
-        fig.add_trace(go.Scatter(
-            x=[e["time"] for e in events],
-            y=[1] * len(events),
-            mode='lines',
-            line=dict(color='gray', width=2, dash='dash'),
-            hoverinfo='none',
-            showlegend=False
-        ))
+        st.info(f"""
+**Action**: `{action}`
+**Component**: `{component}`
+**Justification**: {healing_intent.get('justification', 'Based on historical pattern analysis')}
+        """)
         
-        fig.update_layout(
-            title=f"<b>Incident Timeline: {scenario_name}</b>",
-            height=450,
-            paper_bgcolor="rgba(0,0,0,0)",
-            plot_bgcolor="rgba(0,0,0,0)",
-            hovermode='closest',
-            clickmode='event+select',
-            yaxis=dict(
-                showticklabels=False,
-                range=[0.5, 1.5],
-                gridcolor="rgba(200,200,200,0.1)"
-            ),
-            xaxis=dict(
-                gridcolor="rgba(200,200,200,0.1)"
-            ),
-            showlegend=True,
-            legend=dict(
-                yanchor="top",
-                y=0.99,
-                xanchor="left",
-                x=0.01
-            )
-        )
+        # Parameters
+        params = healing_intent.get('parameters', {})
+        if params:
+            st.markdown("#### Parameters")
+            for key, value in params.items():
+                st.metric(label=key, value=str(value))
         
-        return fig
+        # Similar incidents
+        similar = healing_intent.get('similar_incidents', [])
+        if similar:
+            st.markdown(f"#### Similar Incidents ({len(similar)})")
+            for i, incident in enumerate(similar[:2]):  # Show top 2
+                with st.expander(f"Similar Incident #{i+1}"):
+                    st.json(incident)
+
+def create_rag_similarity_panel(query: str, similar_incidents: List[Dict[str, Any]]):
+    """
+    Display RAG similarity search results
+    """
+    st.markdown("### 🔍 RAG Similarity Search")
     
-    # Create initial timeline
-    initial_timeline = create_scenario_timeline(default_scenario)
+    if not similar_incidents:
+        st.info("No similar incidents found in memory")
+        return
     
-    # Connect the dropdown change event to update all components
-    scenario_dropdown.change(
-        fn=update_scenario_details,
-        inputs=[scenario_dropdown],
-        outputs=[scenario_description, metrics_display, impact_display, timeline_output]
-    )
+    # Create similarity results table
+    df_data = []
+    for i, incident in enumerate(similar_incidents):
+        df_data.append({
+            "Rank": i + 1,
+            "Component": incident.get('component', 'unknown'),
+            "Similarity": f"{incident.get('similarity_score', 0)*100:.1f}%",
+            "Resolution": incident.get('resolution', 'Unknown'),
+            "Success": "✅" if incident.get('success', False) else "❌",
+            "Actions": len(incident.get('actions_taken', []))
+        })
     
-    # Initialize timeline output with the default scenario timeline
-    timeline_output.value = initial_timeline
+    df = pd.DataFrame(df_data)
     
-    return (scenario_dropdown, scenario_description, metrics_display, impact_display,
-            timeline_output, oss_btn, enterprise_btn, approval_toggle, demo_btn,
-            approval_display, oss_results_display, enterprise_results_display)
-
-
-def create_tab2_business_roi(scenarios: Dict) -> Tuple:
-    """Create Tab 2: Business Impact & ROI - FIXED VERSION"""
-    with gr.Column():
-        gr.Markdown("### 📊 Executive Dashboard")
-        dashboard_output = gr.Plot(label="", show_label=False)
-        
-        gr.Markdown("### 🧮 ROI Calculator")
-        with gr.Row():
-            with gr.Column(scale=1):
-                # Scenario selector - FIXED: Initialize with scenarios
-                roi_scenario_dropdown = gr.Dropdown(
-                    choices=list(scenarios.keys()),
-                    value="Cache Miss Storm",
-                    label="Select scenario for ROI calculation:",
-                    interactive=True
-                )
-                
-                monthly_slider = gr.Slider(
-                    1, 100, value=15, step=1,
-                    label="Monthly similar incidents",
-                    interactive=True
-                )
-                
-                team_slider = gr.Slider(
-                    1, 20, value=5, step=1,
-                    label="Reliability team size",
-                    interactive=True
-                )
-                
-                calculate_btn = gr.Button(
-                    "Calculate ROI",
-                    variant="primary",
-                    size="lg"
-                )
-            
-            with gr.Column(scale=2):
-                roi_output = gr.JSON(
-                    label="ROI Analysis Results",
-                    value={}
-                )
-                
-                roi_chart = gr.Plot(label="Cost Comparison", show_label=False)
+    # Display as styled table
+    st.dataframe(
+        df,
+        use_container_width=True,
+        column_config={
+            "Rank": st.column_config.NumberColumn(width="small"),
+            "Similarity": st.column_config.ProgressColumn(
+                width="medium",
+                format="%f%%",
+                min_value=0,
+                max_value=100,
+            ),
+        },
+        hide_index=True
+    )
     
-    return (dashboard_output, roi_scenario_dropdown, monthly_slider, team_slider,
-            calculate_btn, roi_output, roi_chart)
-
+    # Similarity distribution chart
+    if len(similar_incidents) > 1:
+        fig = px.bar(
+            df,
+            x="Rank",
+            y=df["Similarity"].str.rstrip('%').astype(float),
+            color=df["Similarity"].str.rstrip('%').astype(float),
+            color_continuous_scale=["#FF6B6B", "#FFD166", "#06D6A0"],
+            title="Similarity Scores Distribution"
+        )
+        fig.update_layout(height=200, showlegend=False)
+        st.plotly_chart(fig, use_container_width=True)
 
-def create_tab3_enterprise_features() -> Tuple:
-    """Create Tab 3: Enterprise Features - UPDATED"""
-    with gr.Row():
-        # Left Column
-        with gr.Column(scale=1):
-            gr.Markdown("### 🔐 License Management")
-            
-            license_display = gr.JSON(
-                value={
-                    "status": "Active",
-                    "tier": "Enterprise",
-                    "expires": "2026-12-31",
-                    "features": ["autonomous_healing", "compliance", "audit_trail", 
-                               "predictive_analytics", "multi_cloud", "role_based_access"]
-                },
-                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("### ⚡ MCP Execution Modes")
-            
-            mcp_mode = gr.Radio(
-                choices=["advisory", "approval", "autonomous"],
-                value="advisory",
-                label="Execution Mode",
-                interactive=True,
-                info="advisory = OSS only, approval = human review, autonomous = AI-driven"
-            )
-            
-            mcp_mode_info = gr.JSON(
-                value={
-                    "current_mode": "advisory",
-                    "description": "OSS Edition - Analysis only, no execution",
-                    "features": ["Incident analysis", "RAG similarity", "HealingIntent creation"]
-                },
-                label="Mode Details"
-            )
-        
-        # Right Column
-        with gr.Column(scale=1):
-            gr.Markdown("### 📋 Feature Comparison")
-            
-            features_table = gr.Dataframe(
-                headers=["Feature", "OSS", "Enterprise"],
-                value=[
-                    ["Autonomous Healing", "❌", "✅"],
-                    ["Compliance Automation", "❌", "✅"],
-                    ["Predictive Analytics", "❌", "✅"],
-                    ["Multi-Cloud Support", "❌", "✅"],
-                    ["Audit Trail", "Basic", "Comprehensive"],
-                    ["Role-Based Access", "❌", "✅"],
-                    ["Custom Dashboards", "❌", "✅"],
-                    ["Enterprise Support", "Community", "24/7 SLA"],
-                    ["Custom Integrations", "❌", "✅"],
-                    ["Advanced Analytics", "❌", "✅"]
-                ],
-                label="",
-                interactive=False
-            )
-            
-            gr.Markdown("### 🔗 Integrations")
-            
-            integrations_table = gr.Dataframe(
-                headers=["Platform", "Status", "Type"],
-                value=[
-                    ["AWS", "✅ Connected", "Cloud"],
-                    ["Azure", "✅ Connected", "Cloud"],
-                    ["GCP", "✅ Connected", "Cloud"],
-                    ["Datadog", "✅ Connected", "Monitoring"],
-                    ["PagerDuty", "✅ Connected", "Alerting"],
-                    ["ServiceNow", "✅ Connected", "ITSM"],
-                    ["Slack", "✅ Connected", "Collaboration"],
-                    ["Teams", "✅ Connected", "Collaboration"],
-                    ["GitHub", "✅ Connected", "DevOps"],
-                    ["GitLab", "✅ Connected", "DevOps"],
-                    ["Jira", "✅ Connected", "Project Management"],
-                    ["Splunk", "✅ Connected", "Monitoring"],
-                    ["New Relic", "✅ Connected", "APM"],
-                    ["Prometheus", "✅ Connected", "Metrics"],
-                    ["Elasticsearch", "✅ Connected", "Logging"]
-                ],
-                label="",
-                interactive=False
-            )
+def create_learning_engine_panel(learning_stats: Dict[str, Any]):
+    """
+    Display ARF learning engine insights
+    """
+    st.markdown("### 🧠 ARF Learning Engine")
     
-    return (license_display, validate_btn, trial_btn, upgrade_btn,
-            mcp_mode, mcp_mode_info, features_table, integrations_table)
-
-
-def create_tab4_audit_trail() -> Tuple:
-    """Create Tab 4: Audit Trail & History - WITH DEMO DATA"""
-    # Demo data
-    demo_executions = [
-        ["14:30", "Cache Miss Storm", "Autonomous", "✅ Success", "$7,225", "Auto-execution"],
-        ["14:15", "Database Connection Pool", "Approval", "✅ Success", "$3,570", "Approved by admin"],
-        ["13:45", "Memory Leak", "Advisory", "⚠️ Analysis", "$0", "OSS analysis only"],
-        ["13:20", "Cache Miss Storm", "Autonomous", "✅ Success", "$7,225", "Pattern match"],
-        ["12:50", "API Rate Limit", "Approval", "✅ Success", "$3,230", "Scheduled fix"],
-        ["12:15", "Network Partition", "Autonomous", "✅ Success", "$10,200", "Emergency response"],
-        ["11:40", "Storage I/O", "Advisory", "⚠️ Analysis", "$0", "Performance review"]
-    ]
+    cols = st.columns(2)
     
-    demo_incidents = [
-        ["14:30", "redis_cache", "Cache Miss Storm", "CRITICAL", "Resolved"],
-        ["14:15", "postgresql", "Database Connection Pool", "HIGH", "Resolved"],
-        ["13:45", "java_service", "Memory Leak", "HIGH", "Analyzed"],
-        ["13:20", "redis_cache", "Cache Miss Storm", "CRITICAL", "Resolved"],
-        ["12:50", "api_gateway", "API Rate Limit", "MEDIUM", "Resolved"],
-        ["12:15", "database", "Network Partition", "CRITICAL", "Resolved"],
-        ["11:40", "storage", "Storage I/O", "HIGH", "Analyzed"],
-        ["11:10", "redis_cache", "Cache Performance", "LOW", "Monitoring"],
-        ["10:45", "load_balancer", "Traffic Spike", "MEDIUM", "Auto-scaled"],
-        ["10:20", "api_gateway", "Rate Limit", "MEDIUM", "Resolved"]
-    ]
+    with cols[0]:
+        # Pattern detection stats
+        st.metric(
+            label="Patterns Detected",
+            value=learning_stats.get('patterns_detected', 6),
+            delta="+2 this week"
+        )
+        
+        st.metric(
+            label="Success Rate",
+            value=f"{learning_stats.get('success_rate', '95.2%')}",
+            delta="+5.2%"
+        )
     
-    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", "Mode", "Status", "Savings", "Details"],
-                value=demo_executions,
-                label="",
-                interactive=False
-            )
+    with cols[1]:
+        # Learning metrics
+        st.metric(
+            label="Auto-Heal Rate",
+            value=f"{learning_stats.get('auto_heal_rate', '78.6%')}",
+            delta="+12.4%"
+        )
         
-        # Right Column
-        with gr.Column(scale=1):
-            gr.Markdown("### 📊 Incident History")
-            
-            incident_table = gr.Dataframe(
-                headers=["Time", "Component", "Scenario", "Severity", "Status"],
-                value=demo_incidents,
-                label="",
-                interactive=False
-            )
-            
-            gr.Markdown("### 📤 Export")
-            export_text = gr.Textbox(
-                label="Audit Trail (JSON)",
-                lines=6,
-                interactive=False
-            )
+        st.metric(
+            label="Confidence Threshold",
+            value=f"{learning_stats.get('confidence_threshold', 0.85)}",
+            delta="Optimized"
+        )
     
-    return (refresh_btn, clear_btn, export_btn, execution_table,
-            incident_table, export_text)
-
+    # Detected patterns
+    patterns = learning_stats.get('detected_patterns', {})
+    if patterns:
+        st.markdown("#### Detected Patterns")
+        
+        pattern_data = []
+        for pattern_name, pattern_info in patterns.items():
+            pattern_data.append({
+                "Pattern": pattern_name,
+                "Occurrences": pattern_info.get('occurrences', 0),
+                "Confidence": f"{pattern_info.get('confidence', 0)*100:.1f}%",
+                "Auto-Heal": "✅" if pattern_info.get('auto_heal', False) else "❌"
+            })
+        
+        pattern_df = pd.DataFrame(pattern_data)
+        st.dataframe(pattern_df, use_container_width=True, hide_index=True)
 
-def create_tab5_learning_engine() -> Tuple:
-    """Create Tab 5: Learning Engine - WITH DEMO DATA"""
-    # Demo data
-    demo_search_results = [
-        ["Cache Miss Storm", "92%", "Scale Redis + Circuit Breaker", "✅ Auto-healed"],
-        ["Database Connection", "85%", "Increase pool + Monitoring", "✅ Approved"],
-        ["Memory Leak Pattern", "78%", "Heap analysis + Restart", "⚠️ Advisory"],
-        ["API Rate Limit", "72%", "Backoff + Queue", "✅ Auto-healed"],
-        ["Network Partition", "65%", "Quorum + Consensus", "✅ Emergency"]
-    ]
+def create_execution_mode_toggle(current_mode: str = "advisory"):
+    """
+    Show OSS vs Enterprise execution mode differences
+    """
+    st.markdown("### ⚡ ARF Execution Modes")
     
-    # Create a simple demo graph
-    fig = go.Figure(data=go.Scatter(
-        x=[1, 2, 3, 4, 5],
-        y=[2, 5, 3, 8, 7],
-        mode='markers+text',
-        marker=dict(size=[20, 30, 25, 40, 35], color=['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFE66D', '#9B59B6']),
-        text=['Cache', 'DB', 'Memory', 'API', 'Network'],
-        textposition="top center"
-    ))
+    # Mode selector
+    modes = {
+        "advisory": {
+            "name": "OSS Advisory",
+            "description": "Analysis only, no execution",
+            "color": "#FF6B6B",
+            "features": [
+                "Incident analysis",
+                "RAG similarity search",
+                "HealingIntent creation",
+                "Pattern detection"
+            ]
+        },
+        "approval": {
+            "name": "Enterprise (Approval)",
+            "description": "Human-in-the-loop execution",
+            "color": "#FFD166",
+            "features": [
+                "All OSS features",
+                "Human approval workflow",
+                "Audit trail",
+                "Compliance reporting"
+            ]
+        },
+        "autonomous": {
+            "name": "Enterprise (Autonomous)",
+            "description": "AI-driven auto-healing",
+            "color": "#06D6A0",
+            "features": [
+                "All approval features",
+                "Auto-execution",
+                "Learning engine",
+                "Predictive analytics"
+            ]
+        }
+    }
     
-    fig.update_layout(
-        title="Incident Pattern Relationships",
-        height=400,
-        paper_bgcolor="rgba(0,0,0,0)",
-        plot_bgcolor="rgba(0,0,0,0)"
+    # Create mode selection
+    selected_mode = st.selectbox(
+        "Execution Mode",
+        options=list(modes.keys()),
+        format_func=lambda x: modes[x]["name"],
+        index=list(modes.keys()).index(current_mode) if current_mode in modes else 0
     )
     
-    with gr.Row():
-        # Left Column
-        with gr.Column(scale=2):
-            gr.Markdown("### 🧠 Incident Memory Graph")
-            
-            learning_graph = gr.Plot(value=fig, label="", show_label=False)
-            
-            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=demo_search_results,
-                label="",
-                interactive=False
-            )
-        
-        # Right Column
-        with gr.Column(scale=1):
-            gr.Markdown("### 📊 Learning Stats")
-            
-            stats_display = gr.JSON(
-                value={
-                    "total_incidents": 42,
-                    "patterns_detected": 6,
-                    "similarity_searches": 128,
-                    "confidence_threshold": 0.85,
-                    "successful_predictions": 38,
-                    "accuracy_rate": "90.5%"
-                },
-                label="Statistics"
-            )
-            
-            gr.Markdown("### 🎯 Pattern Detection")
-            
-            patterns_display = gr.JSON(
-                value={
-                    "cache_miss_storm": {"occurrences": 12, "confidence": 0.92, "auto_heal": True},
-                    "db_connection_exhaustion": {"occurrences": 8, "confidence": 0.88, "auto_heal": True},
-                    "memory_leak_java": {"occurrences": 5, "confidence": 0.85, "auto_heal": False},
-                    "api_rate_limit": {"occurrences": 10, "confidence": 0.91, "auto_heal": True},
-                    "network_partition": {"occurrences": 3, "confidence": 0.79, "auto_heal": True},
-                    "storage_io_saturation": {"occurrences": 4, "confidence": 0.86, "auto_heal": False}
-                },
-                label="Detected Patterns"
-            )
-            
-            gr.Markdown("### 📈 Performance")
-            
-            performance_display = gr.JSON(
-                value={
-                    "avg_resolution_time": "8.2 min",
-                    "success_rate": "95.2%",
-                    "auto_heal_rate": "78.6%",
-                    "mttr_reduction": "85%",
-                    "cost_savings": "$1.2M",
-                    "roi_multiplier": "5.2×"
-                },
-                label="Performance Metrics"
-            )
+    # Display mode details
+    mode = modes[selected_mode]
     
-    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.HTML:
-    """Create the demo footer - UPDATED FOR 2026"""
-    return gr.HTML("""
-    <div style="margin-top: 40px; padding: 30px; background: linear-gradient(135deg, #1a365d 0%, #2d3748 100%); border-radius: 20px; color: white;">
-        <div style="border-top: 1px solid #4a5568; padding-top: 20px; text-align: center; color: #a0aec0; font-size: 0.9rem;">
-            <p style="margin: 0;">© 2026 Agentic Reliability Framework. Demo v3.8.0 Enterprise Edition.</p>
-            <p style="margin: 10px 0 0 0; font-size: 0.85rem; color: #cbd5e0;">
-                This is a demonstration environment showcasing ARF capabilities.<br>
-                Actual implementation results may vary based on specific use cases and configurations.
-            </p>
-            <p style="margin: 15px 0 0 0; font-size: 0.8rem; color: #718096;">
-                For production inquiries or enterprise licensing, visit 
-                <a href="https://arf.dev/enterprise" style="color: #4ECDC4; text-decoration: none; font-weight: 600;">
-                    arf.dev/enterprise
-                </a>
-            </p>
-        </div>
-    </div>
-    """)
+    # Mode indicator
+    st.info(f"""
+    **Current Mode**: {mode['name']}
+    **Description**: {mode['description']}
+    """)
+    
+    # Feature comparison
+    st.markdown("#### Features Available")
+    
+    for feature in mode['features']:
+        st.markdown(f"✅ {feature}")
+    
+    # Mode differences
+    st.markdown("#### Mode Differences")
+    
+    diff_data = {
+        "Feature": ["Execution", "Human Review", "Audit Trail", "Learning", "Compliance"],
+        "OSS Advisory": ["❌", "❌", "Basic", "❌", "❌"],
+        "Enterprise (Approval)": ["✅", "✅", "Full", "Basic", "✅"],
+        "Enterprise (Autonomous)": ["✅", "Optional", "Full", "Advanced", "✅"]
+    }
+    
+    diff_df = pd.DataFrame(diff_data)
+    st.dataframe(diff_df, use_container_width=True, hide_index=True)
+    
+    return selected_mode