Update ui/components.py

ui/components.py

@@ -102,12 +102,13 @@ def create_status_bar() -> gr.HTML:
     """)
 
 # -----------------------------
-# Tab 1: Live Incident Demo - UPDATED TO USE INLINE STYLES
+# Tab 1: Live Incident Demo - UPDATED TO USE INLINE STYLES AND PROPER PLOTLY HANDLING
 # -----------------------------
 def create_tab1_incident_demo(scenarios=INCIDENT_SCENARIOS, default_scenario="Cache Miss Storm") -> tuple:
     """
     Create an expressive, comprehensive incident demo tab for ARF.
     Shows the complete OSS analysis → Enterprise execution workflow.
+    UPDATED: Properly handles Plotly figures from app.py
     """
     
     # Get the default scenario data
@@ -115,318 +116,334 @@ def create_tab1_incident_demo(scenarios=INCIDENT_SCENARIOS, default_scenario="Ca
     business_impact = default_scenario_data.get("business_impact", {})
     metrics = default_scenario_data.get("metrics", {})
     
-    # Left Column: Scenario Selection & Live Visualization
-    with gr.Column(scale=1, variant="panel") as left_col:
-        # Scenario Selection with rich preview
-        scenario_dropdown = gr.Dropdown(
-            choices=list(scenarios.keys()),
-            value=default_scenario,
-            label="🎯 Select Incident Scenario",
-            info="Choose a production incident to analyze",
-            interactive=True,
-            container=False
-        )
-        
-        # Scenario Card with rich information - USING INLINE STYLES
-        scenario_card = gr.HTML(f"""
-        <div style="border: 1px solid #e2e8f0; border-radius: 14px; padding: 20px; background: white; box-shadow: 0 4px 12px rgba(0,0,0,0.05); margin-bottom: 20px;">
-            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 12px; border-bottom: 2px solid #f1f5f9;">
-                <h3 style="margin: 0; font-size: 18px; color: #1e293b;">🚨 {default_scenario}</h3>
-                <span style="padding: 4px 12px; background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); border-radius: 20px; font-size: 12px; font-weight: bold; color: white; text-transform: uppercase; letter-spacing: 0.5px;">{default_scenario_data.get('severity', 'HIGH')}</span>
-            </div>
-            <div style="margin-top: 15px;">
-                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; padding: 4px 0;">
-                    <span style="font-size: 13px; color: #64748b; font-weight: 500;">Component:</span>
-                    <span style="font-size: 14px; color: #1e293b; font-weight: 600;">{default_scenario_data.get('component', 'Unknown').replace('_', ' ').title()}</span>
-                </div>
-                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; padding: 4px 0;">
-                    <span style="font-size: 13px; color: #64748b; font-weight: 500;">Affected Users:</span>
-                    <span style="font-size: 14px; color: #1e293b; font-weight: 600;">{metrics.get('affected_users', 'Unknown') if 'affected_users' in metrics else 'Unknown'}</span>
-                </div>
-                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; padding: 4px 0;">
-                    <span style="font-size: 13px; color: #64748b; font-weight: 500;">Revenue Risk:</span>
-                    <span style="font-size: 14px; color: #ef4444; font-weight: 700;">${business_impact.get('revenue_loss_per_hour', 0):,}/hour</span>
-                </div>
-                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; padding: 4px 0;">
-                    <span style="font-size: 13px; color: #64748b; font-weight: 500;">Detection Time:</span>
-                    <span style="font-size: 14px; color: #1e293b; font-weight: 600;">45 seconds (ARF AI)</span>
-                </div>
-                <div style="display: flex; flex-wrap: wrap; gap: 6px; margin-top: 15px; padding-top: 12px; border-top: 1px solid #f1f5f9;">
-                    <span style="padding: 3px 8px; background: #f1f5f9; border-radius: 6px; font-size: 11px; color: #475569; font-weight: 500;">{default_scenario_data.get('component', 'unknown').split('_')[0]}</span>
-                    <span style="padding: 3px 8px; background: #f1f5f9; border-radius: 6px; font-size: 11px; color: #475569; font-weight: 500;">{default_scenario_data.get('severity', 'high').lower()}</span>
-                    <span style="padding: 3px 8px; background: #f1f5f9; border-radius: 6px; font-size: 11px; color: #475569; font-weight: 500;">production</span>
-                    <span style="padding: 3px 8px; background: #f1f5f9; border-radius: 6px; font-size: 11px; color: #475569; font-weight: 500;">incident</span>
+    with gr.Row():
+        # Left Column: Scenario Selection & Live Visualization
+        with gr.Column(scale=1, variant="panel") as left_col:
+            # Scenario Selection with rich preview
+            scenario_dropdown = gr.Dropdown(
+                choices=list(scenarios.keys()),
+                value=default_scenario,
+                label="🎯 Select Incident Scenario",
+                info="Choose a production incident to analyze",
+                interactive=True,
+                container=False
+            )
+            
+            # Scenario Card with rich information - USING INLINE STYLES
+            scenario_card = gr.HTML(f"""
+            <div style="border: 1px solid #e2e8f0; border-radius: 14px; padding: 20px; background: white; box-shadow: 0 4px 12px rgba(0,0,0,0.05); margin-bottom: 20px;">
+                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 12px; border-bottom: 2px solid #f1f5f9;">
+                    <h3 style="margin: 0; font-size: 18px; color: #1e293b;">🚨 {default_scenario}</h3>
+                    <span style="padding: 4px 12px; background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); border-radius: 20px; font-size: 12px; font-weight: bold; color: white; text-transform: uppercase; letter-spacing: 0.5px;">{default_scenario_data.get('severity', 'HIGH')}</span>
                 </div>
-            </div>
-        </div>
-        """)
-        
-        # Live Telemetry Visualization
-        telemetry_header = gr.Markdown("### 📈 Live Telemetry")
-        telemetry_viz = gr.Plot(label="", show_label=False)
-        
-        # Business Impact Visualization
-        impact_header = gr.Markdown("### 💰 Business Impact")
-        impact_viz = gr.Plot(label="", show_label=False)
-    
-    # Middle Column: Agent Workflow
-    with gr.Column(scale=2, variant="panel") as middle_col:
-        # Agent Workflow Header
-        workflow_header = gr.Markdown("## 🔄 ARF Agent Workflow")
-        workflow_subheader = gr.Markdown("### How ARF transforms incidents into autonomous healing")
-        
-        # Agent Status Cards - USING INLINE STYLES
-        with gr.Row():
-            detection_agent = gr.HTML("""
-            <div style="border: 2px solid #e2e8f0; border-radius: 14px; padding: 18px; background: #f8fafc; text-align: center; flex: 1; margin: 5px; min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0.7;">
-                <div style="font-size: 32px; margin-bottom: 10px; opacity: 0.5;">🕵️‍♂️</div>
-                <div style="width: 100%;">
-                    <h4 style="margin: 0 0 8px 0; font-size: 16px; color: #94a3b8;">Detection Agent</h4>
-                    <p style="font-size: 13px; color: #cbd5e1; margin-bottom: 12px; line-height: 1.4;">Click "Run OSS Analysis" to activate</p>
-                    <div style="display: flex; justify-content: space-around; margin-bottom: 12px;">
-                        <span style="font-size: 11px; padding: 3px 8px; background: rgba(255, 255, 255, 0.5); border-radius: 6px; color: #cbd5e1; font-weight: 500;">Status: Inactive</span>
+                <div style="margin-top: 15px;">
+                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; padding: 4px 0;">
+                        <span style="font-size: 13px; color: #64748b; font-weight: 500;">Component:</span>
+                        <span style="font-size: 14px; color: #1e293b; font-weight: 600;">{default_scenario_data.get('component', 'Unknown').replace('_', ' ').title()}</span>
+                    </div>
+                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; padding: 4px 0;">
+                        <span style="font-size: 13px; color: #64748b; font-weight: 500;">Affected Users:</span>
+                        <span style="font-size: 14px; color: #1e293b; font-weight: 600;">{metrics.get('affected_users', 'Unknown') if 'affected_users' in metrics else 'Unknown'}</span>
+                    </div>
+                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; padding: 4px 0;">
+                        <span style="font-size: 13px; color: #64748b; font-weight: 500;">Revenue Risk:</span>
+                        <span style="font-size: 14px; color: #ef4444; font-weight: 700;">${business_impact.get('revenue_loss_per_hour', 0):,}/hour</span>
+                    </div>
+                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; padding: 4px 0;">
+                        <span style="font-size: 13px; color: #64748b; font-weight: 500;">Detection Time:</span>
+                        <span style="font-size: 14px; color: #1e293b; font-weight: 600;">45 seconds (ARF AI)</span>
+                    </div>
+                    <div style="display: flex; flex-wrap: wrap; gap: 6px; margin-top: 15px; padding-top: 12px; border-top: 1px solid #f1f5f9;">
+                        <span style="padding: 3px 8px; background: #f1f5f9; border-radius: 6px; font-size: 11px; color: #475569; font-weight: 500;">{default_scenario_data.get('component', 'unknown').split('_')[0]}</span>
+                        <span style="padding: 3px 8px; background: #f1f5f9; border-radius: 6px; font-size: 11px; color: #475569; font-weight: 500;">{default_scenario_data.get('severity', 'high').lower()}</span>
+                        <span style="padding: 3px 8px; background: #f1f5f9; border-radius: 6px; font-size: 11px; color: #475569; font-weight: 500;">production</span>
+                        <span style="padding: 3px 8px; background: #f1f5f9; border-radius: 6px; font-size: 11px; color: #475569; font-weight: 500;">incident</span>
                     </div>
-                    <div style="display: inline-block; padding: 5px 14px; background: #e2e8f0; border-radius: 20px; font-size: 12px; font-weight: bold; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px;">WAITING</div>
                 </div>
             </div>
             """)
             
-            recall_agent = gr.HTML("""
-            <div style="border: 2px solid #e2e8f0; border-radius: 14px; padding: 18px; background: #f8fafc; text-align: center; flex: 1; margin: 5px; min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0.7;">
-                <div style="font-size: 32px; margin-bottom: 10px; opacity: 0.5;">🧠</div>
-                <div style="width: 100%;">
-                    <h4 style="margin: 0 0 8px 0; font-size: 16px; color: #94a3b8;">Recall Agent</h4>
-                    <p style="font-size: 13px; color: #cbd5e1; margin-bottom: 12px; line-height: 1.4;">Click "Run OSS Analysis" to activate</p>
-                    <div style="display: flex; justify-content: space-around; margin-bottom: 12px;">
-                        <span style="font-size: 11px; padding: 3px 8px; background: rgba(255, 255, 255, 0.5); border-radius: 6px; color: #cbd5e1; font-weight: 500;">Status: Inactive</span>
+            # Visualization section - USING gr.Plot() FOR PLOTLY FIGURES
+            with gr.Row():
+                with gr.Column(scale=1):
+                    telemetry_header = gr.Markdown("### 📈 Live Telemetry")
+                    # This expects a Plotly figure from app.py
+                    telemetry_viz = gr.Plot(
+                        label="", 
+                        show_label=False,
+                        elem_id="telemetry_plot"
+                    )
+                    
+                with gr.Column(scale=1):
+                    impact_header = gr.Markdown("### 💰 Business Impact")
+                    impact_viz = gr.Plot(
+                        label="",
+                        show_label=False,
+                        elem_id="impact_plot"
+                    )
+        
+        # Middle Column: Agent Workflow
+        with gr.Column(scale=2, variant="panel") as middle_col:
+            # Agent Workflow Header
+            workflow_header = gr.Markdown("## 🔄 ARF Agent Workflow")
+            workflow_subheader = gr.Markdown("### How ARF transforms incidents into autonomous healing")
+            
+            # Agent Status Cards - USING INLINE STYLES
+            with gr.Row():
+                detection_agent = gr.HTML("""
+                <div style="border: 2px solid #e2e8f0; border-radius: 14px; padding: 18px; background: #f8fafc; text-align: center; flex: 1; margin: 5px; min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0.7;">
+                    <div style="font-size: 32px; margin-bottom: 10px; opacity: 0.5;">🕵️‍♂️</div>
+                    <div style="width: 100%;">
+                        <h4 style="margin: 0 0 8px 0; font-size: 16px; color: #94a3b8;">Detection Agent</h4>
+                        <p style="font-size: 13px; color: #cbd5e1; margin-bottom: 12px; line-height: 1.4;">Click "Run OSS Analysis" to activate</p>
+                        <div style="display: flex; justify-content: space-around; margin-bottom: 12px;">
+                            <span style="font-size: 11px; padding: 3px 8px; background: rgba(255, 255, 255, 0.5); border-radius: 6px; color: #cbd5e1; font-weight: 500;">Status: Inactive</span>
+                        </div>
+                        <div style="display: inline-block; padding: 5px 14px; background: #e2e8f0; border-radius: 20px; font-size: 12px; font-weight: bold; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px;">WAITING</div>
                     </div>
-                    <div style="display: inline-block; padding: 5px 14px; background: #e2e8f0; border-radius: 20px; font-size: 12px; font-weight: bold; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px;">WAITING</div>
                 </div>
-            </div>
-            """)
-            
-            decision_agent = gr.HTML("""
-            <div style="border: 2px solid #e2e8f0; border-radius: 14px; padding: 18px; background: #f8fafc; text-align: center; flex: 1; margin: 5px; min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0.7;">
-                <div style="font-size: 32px; margin-bottom: 10px; opacity: 0.5;">🎯</div>
-                <div style="width: 100%;">
-                    <h4 style="margin: 0 0 8px 0; font-size: 16px; color: #94a3b8;">Decision Agent</h4>
-                    <p style="font-size: 13px; color: #cbd5e1; margin-bottom: 12px; line-height: 1.4;">Click "Run OSS Analysis" to activate</p>
-                    <div style="display: flex; justify-content: space-around; margin-bottom: 12px;">
-                        <span style="font-size: 11px; padding: 3px 8px; background: rgba(255, 255, 255, 0.5); border-radius: 6px; color: #cbd5e1; font-weight: 500;">Status: Inactive</span>
+                """)
+                
+                recall_agent = gr.HTML("""
+                <div style="border: 2px solid #e2e8f0; border-radius: 14px; padding: 18px; background: #f8fafc; text-align: center; flex: 1; margin: 5px; min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0.7;">
+                    <div style="font-size: 32px; margin-bottom: 10px; opacity: 0.5;">🧠</div>
+                    <div style="width: 100%;">
+                        <h4 style="margin: 0 0 8px 0; font-size: 16px; color: #94a3b8;">Recall Agent</h4>
+                        <p style="font-size: 13px; color: #cbd5e1; margin-bottom: 12px; line-height: 1.4;">Click "Run OSS Analysis" to activate</p>
+                        <div style="display: flex; justify-content: space-around; margin-bottom: 12px;">
+                            <span style="font-size: 11px; padding: 3px 8px; background: rgba(255, 255, 255, 0.5); border-radius: 6px; color: #cbd5e1; font-weight: 500;">Status: Inactive</span>
+                        </div>
+                        <div style="display: inline-block; padding: 5px 14px; background: #e2e8f0; border-radius: 20px; font-size: 12px; font-weight: bold; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px;">WAITING</div>
                     </div>
-                    <div style="display: inline-block; padding: 5px 14px; background: #e2e8f0; border-radius: 20px; font-size: 12px; font-weight: bold; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px;">WAITING</div>
                 </div>
-            </div>
-            """)
-        
-        # OSS vs Enterprise Boundary Visualization
-        boundary_header = gr.Markdown("### 🎭 OSS vs Enterprise: The Safety Boundary")
-        
-        with gr.Row():
-            oss_section = gr.HTML("""
-            <div style="padding: 20px; border-radius: 14px; margin-bottom: 15px; flex: 1; min-height: 320px; background: #f0f9ff; border: 2px solid #0ea5e9;">
-                <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 15px; padding-bottom: 12px; border-bottom: 2px solid rgba(0, 0, 0, 0.1);">
-                    <div style="font-size: 28px;">🆓</div>
-                    <h3 style="margin: 0; font-size: 20px; color: #1e293b; flex: 1;">OSS Edition</h3>
-                    <span style="padding: 4px 10px; background: rgba(255, 255, 255, 0.9); border-radius: 8px; font-size: 11px; font-weight: bold; color: #475569;">Apache 2.0</span>
+                """)
+                
+                decision_agent = gr.HTML("""
+                <div style="border: 2px solid #e2e8f0; border-radius: 14px; padding: 18px; background: #f8fafc; text-align: center; flex: 1; margin: 5px; min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0.7;">
+                    <div style="font-size: 32px; margin-bottom: 10px; opacity: 0.5;">🎯</div>
+                    <div style="width: 100%;">
+                        <h4 style="margin: 0 0 8px 0; font-size: 16px; color: #94a3b8;">Decision Agent</h4>
+                        <p style="font-size: 13px; color: #cbd5e1; margin-bottom: 12px; line-height: 1.4;">Click "Run OSS Analysis" to activate</p>
+                        <div style="display: flex; justify-content: space-around; margin-bottom: 12px;">
+                            <span style="font-size: 11px; padding: 3px 8px; background: rgba(255, 255, 255, 0.5); border-radius: 6px; color: #cbd5e1; font-weight: 500;">Status: Inactive</span>
+                        </div>
+                        <div style="display: inline-block; padding: 5px 14px; background: #e2e8f0; border-radius: 20px; font-size: 12px; font-weight: bold; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px;">WAITING</div>
+                    </div>
                 </div>
-                <div style="margin-bottom: 20px; padding: 12px; background: rgba(255, 255, 255, 0.7); border-radius: 10px;">
-                    <p style="margin: 0; font-size: 14px; color: #475569; font-weight: 500;"><strong>Analysis & Advisory Only</strong> - No execution, permanently safe</p>
+                """)
+            
+            # OSS vs Enterprise Boundary Visualization
+            boundary_header = gr.Markdown("### 🎭 OSS vs Enterprise: The Safety Boundary")
+            
+            with gr.Row():
+                oss_section = gr.HTML("""
+                <div style="padding: 20px; border-radius: 14px; margin-bottom: 15px; flex: 1; min-height: 320px; background: #f0f9ff; border: 2px solid #0ea5e9;">
+                    <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 15px; padding-bottom: 12px; border-bottom: 2px solid rgba(0, 0, 0, 0.1);">
+                        <div style="font-size: 28px;">🆓</div>
+                        <h3 style="margin: 0; font-size: 20px; color: #1e293b; flex: 1;">OSS Edition</h3>
+                        <span style="padding: 4px 10px; background: rgba(255, 255, 255, 0.9); border-radius: 8px; font-size: 11px; font-weight: bold; color: #475569;">Apache 2.0</span>
+                    </div>
+                    <div style="margin-bottom: 20px; padding: 12px; background: rgba(255, 255, 255, 0.7); border-radius: 10px;">
+                        <p style="margin: 0; font-size: 14px; color: #475569; font-weight: 500;"><strong>Analysis & Advisory Only</strong> - No execution, permanently safe</p>
+                    </div>
+                    <div style="background: white; border-radius: 12px; padding: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.05);">
+                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #f1f5f9;">
+                            <h4 style="margin: 0; font-size: 16px; color: #1e293b;">📝 Healing Intent Created</h4>
+                            <span style="padding: 4px 10px; background: #dbeafe; color: #1d4ed8; border-radius: 6px; font-size: 12px; font-weight: bold;">94% confidence</span>
+                        </div>
+                        <div>
+                            <p style="margin: 8px 0; font-size: 14px; color: #475569;"><strong>Action:</strong> Scale Redis cluster from 3 to 5 nodes</p>
+                            <p style="margin: 8px 0; font-size: 14px; color: #475569;"><strong>Pattern Match:</strong> Similar incident resolved with scaling (87% success rate)</p>
+                            <p style="margin: 8px 0; font-size= 14px; color: #475569;"><strong>Safety Check:</strong> ✅ Passed (blast radius: 2 services)</p>
+                            <p style="margin: 8px 0; font-size: 14px; color: #475569;"><strong>Estimated Impact:</strong> Reduce MTTR from 45min to 12min</p>
+                        </div>
+                        <div style="margin-top: 20px; text-align: center;">
+                            <div style="height: 2px; background: linear-gradient(90deg, transparent, #3b82f6, transparent); margin: 8px 0;"></div>
+                            <div style="font-size: 12px; font-weight: bold; padding: 6px 12px; background: #fee2e2; color: #dc2626; border-radius: 8px; display: inline-block;">🚫 OSS STOPS HERE - No execution</div>
+                            <div style="height: 2px; background: linear-gradient(90deg, transparent, #3b82f6, transparent); margin: 8px 0;"></div>
+                        </div>
+                    </div>
                 </div>
-                <div style="background: white; border-radius: 12px; padding: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.05);">
-                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #f1f5f9;">
-                        <h4 style="margin: 0; font-size: 16px; color: #1e293b;">📝 Healing Intent Created</h4>
-                        <span style="padding: 4px 10px; background: #dbeafe; color: #1d4ed8; border-radius: 6px; font-size: 12px; font-weight: bold;">94% confidence</span>
+                """)
+                
+                enterprise_section = gr.HTML("""
+                <div style="padding: 20px; border-radius: 14px; margin-bottom: 15px; flex: 1; min-height: 320px; background: #f0fdf4; border: 2px solid #10b981;">
+                    <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 15px; padding-bottom: 12px; border-bottom: 2px solid rgba(0, 0, 0, 0.1);">
+                        <div style="font-size: 28px;">💰</div>
+                        <h3 style="margin: 0; font-size: 20px; color: #1e293b; flex: 1;">Enterprise Edition</h3>
+                        <span style="padding: 4px 10px; background: rgba(255, 255, 255, 0.9); border-radius: 8px; font-size: 11px; font-weight: bold; color: #475569;">Commercial</span>
                     </div>
-                    <div>
-                        <p style="margin: 8px 0; font-size: 14px; color: #475569;"><strong>Action:</strong> Scale Redis cluster from 3 to 5 nodes</p>
-                        <p style="margin: 8px 0; font-size: 14px; color: #475569;"><strong>Pattern Match:</strong> Similar incident resolved with scaling (87% success rate)</p>
-                        <p style="margin: 8px 0; font-size= 14px; color: #475569;"><strong>Safety Check:</strong> ✅ Passed (blast radius: 2 services)</p>
-                        <p style="margin: 8px 0; font-size: 14px; color: #475569;"><strong>Estimated Impact:</strong> Reduce MTTR from 45min to 12min</p>
+                    <div style="margin-bottom: 20px; padding: 12px; background: rgba(255, 255, 255, 0.7); border-radius: 10px;">
+                        <p style="margin: 0; font-size: 14px; color: #475569; font-weight: 500;"><strong>Full Execution & Learning</strong> - Autonomous healing with safety guarantees</p>
                     </div>
-                    <div style="margin-top: 20px; text-align: center;">
-                        <div style="height: 2px; background: linear-gradient(90deg, transparent, #3b82f6, transparent); margin: 8px 0;"></div>
-                        <div style="font-size: 12px; font-weight: bold; padding: 6px 12px; background: #fee2e2; color: #dc2626; border-radius: 8px; display: inline-block;">🚫 OSS STOPS HERE - No execution</div>
-                        <div style="height: 2px; background: linear-gradient(90deg, transparent, #3b82f6, transparent); margin: 8px 0;"></div>
+                    <div style="background: white; border-radius: 12px; padding: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.05);">
+                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #f1f5f9;">
+                            <h4 style="margin: 0; font-size: 16px; color: #1e293b;">⚡ Ready to Execute</h4>
+                            <span style="padding: 4px 10px; background: #10b981; color: white; border-radius: 6px; font-size: 12px; font-weight: bold; text-transform: uppercase;">AUTONOMOUS</span>
+                        </div>
+                        <div>
+                            <p style="margin: 8px 0; font-size: 14px; color: #475569;"><strong>Mode:</strong> Autonomous (Requires Enterprise license)</p>
+                            <p style="margin: 8px 0; font-size: 14px; color: #475569;"><strong>Expected Recovery:</strong> 12 minutes (vs 45 min manual)</p>
+                            <p style="margin: 8px 0; font-size: 14px; color: #475569;"><strong>Cost Saved:</strong> <span style="color: #10b981; font-weight: 700;">$6,375</span></p>
+                            <p style="margin: 8px 0; font-size= 14px; color: #475569;"><strong>Users Protected:</strong> 45,000 → 0 impacted</p>
+                        </div>
+                        <div style="margin-top: 20px; text-align: center;">
+                            <div style="height: 2px; background: linear-gradient(90deg, transparent, #10b981, transparent); margin: 8px 0;"></div>
+                            <div style="font-size: 12px; font-weight: bold; padding: 6px 12px; background: #dcfce7; color: #166534; border-radius: 8px; display: inline-block;">✅ Enterprise executes with MCP safety</div>
+                            <div style="height: 2px; background: linear-gradient(90deg, transparent, #10b981, transparent); margin: 8px 0;"></div>
+                        </div>
                     </div>
                 </div>
-            </div>
-            """)
+                """)
             
-            enterprise_section = gr.HTML("""
-            <div style="padding: 20px; border-radius: 14px; margin-bottom: 15px; flex: 1; min-height: 320px; background: #f0fdf4; border: 2px solid #10b981;">
-                <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 15px; padding-bottom: 12px; border-bottom: 2px solid rgba(0, 0, 0, 0.1);">
-                    <div style="font-size: 28px;">💰</div>
-                    <h3 style="margin: 0; font-size: 20px; color: #1e293b; flex: 1;">Enterprise Edition</h3>
-                    <span style="padding: 4px 10px; background: rgba(255, 255, 255, 0.9); border-radius: 8px; font-size: 11px; font-weight: bold; color: #475569;">Commercial</span>
-                </div>
-                <div style="margin-bottom: 20px; padding: 12px; background: rgba(255, 255, 255, 0.7); border-radius: 10px;">
-                    <p style="margin: 0; font-size: 14px; color: #475569; font-weight: 500;"><strong>Full Execution & Learning</strong> - Autonomous healing with safety guarantees</p>
+            # Execution Controls
+            with gr.Row():
+                with gr.Column(scale=1):
+                    oss_btn = gr.Button(
+                        "🆓 Run OSS Analysis",
+                        variant="secondary",
+                        size="lg"
+                    )
+                    oss_info = gr.Markdown("*Free, open-source analysis*")
+                
+                with gr.Column(scale=1):
+                    enterprise_btn = gr.Button(
+                        "💰 Execute Enterprise Healing",
+                        variant="primary", 
+                        size="lg"
+                    )
+                    enterprise_info = gr.Markdown("*Requires Enterprise license*")
+            
+            # Mode Selection & Safety Controls
+            with gr.Row():
+                with gr.Column(scale=1):
+                    approval_toggle = gr.CheckboxGroup(
+                        choices=["👤 Require Human Approval"],
+                        label="Safety Controls",
+                        value=[],
+                        info="Toggle human oversight"
+                    )
+                
+                with gr.Column(scale=2):
+                    mcp_mode = gr.Radio(
+                        choices=["🛡️ Advisory (OSS Only)", "👥 Approval", "⚡ Autonomous"],
+                        value="🛡️ Advisory (OSS Only)",
+                        label="MCP Safety Mode",
+                        info="Control execution safety level",
+                        interactive=True
+                    )
+            
+            # Timeline visualization
+            timeline_header = gr.Markdown("### ⏰ Incident Timeline")
+            timeline_viz = gr.Plot(
+                label="",
+                show_label=False,
+                elem_id="timeline_plot"
+            )
+        
+        # Right Column: Results & Metrics
+        with gr.Column(scale=1, variant="panel") as right_col:
+            # Real-time Metrics Dashboard
+            metrics_header = gr.Markdown("## 📊 Performance Metrics")
+            
+            # Metric Cards Grid - USING INLINE STYLES
+            with gr.Row():
+                detection_time = gr.HTML("""
+                <div style="border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px; background: white; margin: 8px; text-align: center; flex: 1; min-width: 140px; border-left: 4px solid #3b82f6;">
+                    <div style="font-size: 28px; margin-bottom: 10px;">⏱️</div>
+                    <div>
+                        <h4 style="margin: 0 0 8px 0; font-size: 14px; color: #64748b; font-weight: 600;">Detection Time</h4>
+                        <p style="font-size: 28px; font-weight: bold; color: #1e40af; margin: 8px 0;">45s</p>
+                        <p style="font-size: 12px; color: #64748b; margin: 0;">↓ 89% faster than average</p>
+                    </div>
                 </div>
-                <div style="background: white; border-radius: 12px; padding: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.05);">
-                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #f1f5f9;">
-                        <h4 style="margin: 0; font-size: 16px; color: #1e293b;">⚡ Ready to Execute</h4>
-                        <span style="padding: 4px 10px; background: #10b981; color: white; border-radius: 6px; font-size: 12px; font-weight: bold; text-transform: uppercase;">AUTONOMOUS</span>
+                """)
+                
+                mttr = gr.HTML("""
+                <div style="border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px; background: white; margin: 8px; text-align: center; flex: 1; min-width: 140px; border-left: 4px solid #10b981;">
+                    <div style="font-size: 28px; margin-bottom: 10px;">⚡</div>
+                    <div>
+                        <h4 style="margin: 0 0 8px 0; font-size: 14px; color: #64748b; font-weight: 600;">Mean Time to Resolve</h4>
+                        <p style="font-size: 28px; font-weight: bold; color: #10b981; margin: 8px 0;">12m</p>
+                        <p style="font-size: 12px; color: #64748b; margin: 0;">↓ 73% faster than manual</p>
                     </div>
+                </div>
+                """)
+            
+            with gr.Row():
+                auto_heal = gr.HTML("""
+                <div style="border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px; background: white; margin: 8px; text-align: center; flex: 1; min-width: 140px; border-left: 4px solid #8b5cf6;">
+                    <div style="font-size: 28px; margin-bottom: 10px;">🤖</div>
                     <div>
-                        <p style="margin: 8px 0; font-size: 14px; color: #475569;"><strong>Mode:</strong> Autonomous (Requires Enterprise license)</p>
-                        <p style="margin: 8px 0; font-size: 14px; color: #475569;"><strong>Expected Recovery:</strong> 12 minutes (vs 45 min manual)</p>
-                        <p style="margin: 8px 0; font-size: 14px; color: #475569;"><strong>Cost Saved:</strong> <span style="color: #10b981; font-weight: 700;">$6,375</span></p>
-                        <p style="margin: 8px 0; font-size: 14px; color: #475569;"><strong>Users Protected:</strong> 45,000 → 0 impacted</p>
+                        <h4 style="margin: 0 0 8px 0; font-size: 14px; color: #64748b; font-weight: 600;">Auto-Heal Rate</h4>
+                        <p style="font-size: 28px; font-weight: bold; color: #8b5cf6; margin: 8px 0;">81.7%</p>
+                        <p style="font-size: 12px; color: #64748b; margin: 0;">↑ 5.4× industry average</p>
                     </div>
-                    <div style="margin-top: 20px; text-align: center;">
-                        <div style="height: 2px; background: linear-gradient(90deg, transparent, #10b981, transparent); margin: 8px 0;"></div>
-                        <div style="font-size: 12px; font-weight: bold; padding: 6px 12px; background: #dcfce7; color: #166534; border-radius: 8px; display: inline-block;">✅ Enterprise executes with MCP safety</div>
-                        <div style="height: 2px; background: linear-gradient(90deg, transparent, #10b981, transparent); margin: 8px 0;"></div>
+                </div>
+                """)
+                
+                savings = gr.HTML(f"""
+                <div style="border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px; background: white; margin: 8px; text-align: center; flex: 1; min-width: 140px; border-left: 4px solid #f59e0b;">
+                    <div style="font-size: 28px; margin-bottom: 10px;">💰</div>
+                    <div>
+                        <h4 style="margin: 0 0 8px 0; font-size: 14px; color: #64748b; font-weight: 600;">Cost Saved</h4>
+                        <p style="font-size: 28px; font-weight: bold; color: #f59e0b; margin: 8px 0;">${int(business_impact.get('revenue_loss_per_hour', 8500) * 0.85 / 1000):.1f}K</p>
+                        <p style="font-size: 12px; color: #64748b; margin: 0;">Per incident avoided</p>
                     </div>
                 </div>
-            </div>
-            """)
-        
-        # Execution Controls
-        with gr.Row():
-            with gr.Column(scale=1):
-                oss_btn = gr.Button(
-                    "🆓 Run OSS Analysis",
-                    variant="secondary",
-                    size="lg"
-                )
-                oss_info = gr.Markdown("*Free, open-source analysis*")
+                """)
             
-            with gr.Column(scale=1):
-                enterprise_btn = gr.Button(
-                    "💰 Execute Enterprise Healing",
-                    variant="primary", 
-                    size="lg"
-                )
-                enterprise_info = gr.Markdown("*Requires Enterprise license*")
-        
-        # Mode Selection & Safety Controls
-        with gr.Row():
-            with gr.Column(scale=1):
-                approval_toggle = gr.CheckboxGroup(
-                    choices=["👤 Require Human Approval"],
-                    label="Safety Controls",
-                    value=[],
-                    info="Toggle human oversight"
-                )
+            # Results Display Areas
+            oss_results_header = gr.Markdown("### 🆓 OSS Analysis Results")
+            oss_results_display = gr.JSON(
+                label="",
+                value={
+                    "status": "Analysis Pending",
+                    "agents": ["Detection", "Recall", "Decision"],
+                    "mode": "Advisory Only",
+                    "action": "Generate HealingIntent"
+                },
+                height=200
+            )
             
-            with gr.Column(scale=2):
-                mcp_mode = gr.Radio(
-                    choices=["🛡️ Advisory (OSS Only)", "👥 Approval", "⚡ Autonomous"],
-                    value="🛡️ Advisory (OSS Only)",
-                    label="MCP Safety Mode",
-                    info="Control execution safety level",
-                    interactive=True
-                )
-        
-        # Timeline Visualization
-        timeline_header = gr.Markdown("### ⏰ Incident Timeline")
-        timeline_viz = gr.Plot(label="", show_label=False)
-    
-    # Right Column: Results & Metrics
-    with gr.Column(scale=1, variant="panel") as right_col:
-        # Real-time Metrics Dashboard
-        metrics_header = gr.Markdown("## 📊 Performance Metrics")
-        
-        # Metric Cards Grid - USING INLINE STYLES
-        with gr.Row():
-            detection_time = gr.HTML("""
-            <div style="border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px; background: white; margin: 8px; text-align: center; flex: 1; min-width: 140px; border-left: 4px solid #3b82f6;">
-                <div style="font-size: 28px; margin-bottom: 10px;">⏱️</div>
-                <div>
-                    <h4 style="margin: 0 0 8px 0; font-size: 14px; color: #64748b; font-weight: 600;">Detection Time</h4>
-                    <p style="font-size: 28px; font-weight: bold; color: #1e40af; margin: 8px 0;">45s</p>
-                    <p style="font-size: 12px; color: #64748b; margin: 0;">↓ 89% faster than average</p>
-                </div>
-            </div>
-            """)
+            enterprise_results_header = gr.Markdown("### 💰 Enterprise Results") 
+            enterprise_results_display = gr.JSON(
+                label="",
+                value={
+                    "status": "Execution Pending",
+                    "requires_license": True,
+                    "available_modes": ["Approval", "Autonomous"],
+                    "expected_outcome": "12m MTTR, $6.3K saved"
+                },
+                height=200
+            )
             
-            mttr = gr.HTML("""
-            <div style="border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px; background: white; margin: 8px; text-align: center; flex: 1; min-width: 140px; border-left: 4px solid #10b981;">
-                <div style="font-size: 28px; margin-bottom: 10px;">⚡</div>
-                <div>
-                    <h4 style="margin: 0 0 8px 0; font-size: 14px; color: #64748b; font-weight: 600;">Mean Time to Resolve</h4>
-                    <p style="font-size: 28px; font-weight: bold; color: #10b981; margin: 8px 0;">12m</p>
-                    <p style="font-size: 12px; color: #64748b; margin: 0;">↓ 73% faster than manual</p>
+            # Approval Status - USING INLINE STYLES
+            approval_display = gr.HTML("""
+            <div style="border: 2px solid #e2e8f0; border-radius: 14px; padding: 20px; background: white; margin-top: 20px;">
+                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 12px; border-bottom: 2px solid #f1f5f9;">
+                    <h4 style="margin: 0; font-size: 16px; color: #1e293b;">👤 Human Approval Status</h4>
+                    <span style="padding: 4px 12px; background: #10b981; color: white; border-radius: 8px; font-size: 12px; font-weight: bold; text-transform: uppercase;">Not Required</span>
                 </div>
-            </div>
-            """)
-        
-        with gr.Row():
-            auto_heal = gr.HTML("""
-            <div style="border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px; background: white; margin: 8px; text-align: center; flex: 1; min-width: 140px; border-left: 4px solid #8b5cf6;">
-                <div style="font-size: 28px; margin-bottom: 10px;">🤖</div>
-                <div>
-                    <h4 style="margin: 0 0 8px 0; font-size: 14px; color: #64748b; font-weight: 600;">Auto-Heal Rate</h4>
-                    <p style="font-size: 28px; font-weight: bold; color: #8b5cf6; margin: 8px 0;">81.7%</p>
-                    <p style="font-size: 12px; color: #64748b; margin: 0;">↑ 5.4× industry average</p>
+                <div style="margin-top: 15px;">
+                    <p style="margin: 8px 0; font-size: 14px; color: #475569;"><strong>Current Mode:</strong> Advisory (OSS Only)</p>
+                    <p style="margin: 8px 0; font-size: 14px; color: #475569; font-style: italic;">Switch to "Approval" mode to enable human-in-the-loop workflows</p>
+                    <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 20px;">
+                        <div style="padding: 12px; background: #f8fafc; border-radius: 10px; border-left: 4px solid #3b82f6; font-size: 14px; color: #475569; font-weight: 500;">1. ARF generates intent</div>
+                        <div style="padding: 12px; background: #f8fafc; border-radius: 10px; border-left: 4px solid #3b82f6; font-size: 14px; color: #475569; font-weight: 500;">2. Human reviews & approves</div>
+                        <div style="padding: 12px; background: #f8fafc; border-radius: 10px; border-left: 4px solid #3b82f6; font-size: 14px; color: #475569; font-weight: 500;">3. ARF executes safely</div>
+                    </div>
                 </div>
             </div>
             """)
             
-            savings = gr.HTML(f"""
-            <div style="border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px; background: white; margin: 8px; text-align: center; flex: 1; min-width: 140px; border-left: 4px solid #f59e0b;">
-                <div style="font-size: 28px; margin-bottom: 10px;">💰</div>
-                <div>
-                    <h4 style="margin: 0 0 8px 0; font-size: 14px; color: #64748b; font-weight: 600;">Cost Saved</h4>
-                    <p style="font-size: 28px; font-weight: bold; color: #f59e0b; margin: 8px 0;">${int(business_impact.get('revenue_loss_per_hour', 8500) * 0.85 / 1000):.1f}K</p>
-                    <p style="font-size: 12px; color: #64748b; margin: 0;">Per incident avoided</p>
-                </div>
-            </div>
-            """)
-        
-        # Results Display Areas
-        oss_results_header = gr.Markdown("### 🆓 OSS Analysis Results")
-        oss_results_display = gr.JSON(
-            label="",
-            value={
-                "status": "Analysis Pending",
-                "agents": ["Detection", "Recall", "Decision"],
-                "mode": "Advisory Only",
-                "action": "Generate HealingIntent"
-            },
-            height=200
-        )
-        
-        enterprise_results_header = gr.Markdown("### 💰 Enterprise Results") 
-        enterprise_results_display = gr.JSON(
-            label="",
-            value={
-                "status": "Execution Pending",
-                "requires_license": True,
-                "available_modes": ["Approval", "Autonomous"],
-                "expected_outcome": "12m MTTR, $6.3K saved"
-            },
-            height=200
-        )
-        
-        # Approval Status - USING INLINE STYLES
-        approval_display = gr.HTML("""
-        <div style="border: 2px solid #e2e8f0; border-radius: 14px; padding: 20px; background: white; margin-top: 20px;">
-            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 12px; border-bottom: 2px solid #f1f5f9;">
-                <h4 style="margin: 0; font-size: 16px; color: #1e293b;">👤 Human Approval Status</h4>
-                <span style="padding: 4px 12px; background: #10b981; color: white; border-radius: 8px; font-size: 12px; font-weight: bold; text-transform: uppercase;">Not Required</span>
-            </div>
-            <div style="margin-top: 15px;">
-                <p style="margin: 8px 0; font-size: 14px; color: #475569;"><strong>Current Mode:</strong> Advisory (OSS Only)</p>
-                <p style="margin: 8px 0; font-size: 14px; color: #475569; font-style: italic;">Switch to "Approval" mode to enable human-in-the-loop workflows</p>
-                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 20px;">
-                    <div style="padding: 12px; background: #f8fafc; border-radius: 10px; border-left: 4px solid #3b82f6; font-size: 14px; color: #475569; font-weight: 500;">1. ARF generates intent</div>
-                    <div style="padding: 12px; background: #f8fafc; border-radius: 10px; border-left: 4px solid #3b82f6; font-size: 14px; color: #475569; font-weight: 500;">2. Human reviews & approves</div>
-                    <div style="padding: 12px; background: #f8fafc; border-radius: 10px; border-left: 4px solid #3b82f6; font-size: 14px; color: #475569; font-weight: 500;">3. ARF executes safely</div>
-                </div>
-            </div>
-        </div>
-        """)
-        
-        # Demo Actions
-        demo_btn = gr.Button(
-            "▶️ Run Complete Demo Walkthrough",
-            variant="secondary",
-            size="lg"
-        )
-        demo_info = gr.Markdown("*Experience the full ARF workflow from detection to resolution*")
+            # Demo Actions
+            demo_btn = gr.Button(
+                "▶️ Run Complete Demo Walkthrough",
+                variant="secondary",
+                size="lg"
+            )
+            demo_info = gr.Markdown("*Experience the full ARF workflow from detection to resolution*")
     
     return (
         # Left column returns
@@ -439,7 +456,6 @@ def create_tab1_incident_demo(scenarios=INCIDENT_SCENARIOS, default_scenario="Ca
         detection_time, mttr, auto_heal, savings,
         oss_results_display, enterprise_results_display, approval_display, demo_btn
     )
-
 # -----------------------------
 # Tab 2: Business ROI - Updated
 # -----------------------------