Update ui/components.py

ui/components.py

@@ -1047,11 +1047,12 @@ def create_historical_evidence_panel(scenario_data: Dict[str, Any]) -> gr.HTML:
 # -----------------------------
 # Performance Metrics Function - DOCTRINAL METRICS
 # -----------------------------
+# 1. First, update the update_performance_metrics function to return what app.py expects:
 def update_performance_metrics(scenario_name: str, scenarios=INCIDENT_SCENARIOS) -> tuple:
     """
     Update performance metrics based on scenario
     Returns: (detection_time_html, recall_quality_html, confidence_score_html, sequencing_stage_html)
-    Doctrinal: No red/green colors, use gradient colors instead of binary thresholds
+    MUST MATCH what app.py demo_btn.click() expects!
     """
     
     # Scenario-specific metrics mapping WITH GRADIENT COLORS
@@ -1155,6 +1156,321 @@ def update_performance_metrics(scenario_name: str, scenarios=INCIDENT_SCENARIOS)
     logger.info(f"✅ Updated performance metrics for {scenario_name} ({scenario_type} type)")
     return detection_time_html, recall_quality_html, confidence_score_html, sequencing_stage_html
 
+# 2. Update create_tab1_incident_demo to use the SAME variable names:
+def create_tab1_incident_demo(scenarios=INCIDENT_SCENARIOS, default_scenario="Cache Miss Storm") -> tuple:
+    """
+    Create doctrinally compliant incident demo tab.
+    Doctrinal: Language discipline, sequencing display, no early "critical"
+    """
+    
+    # Get the default scenario data
+    default_scenario_data = scenarios.get(default_scenario, {})
+    business_impact = default_scenario_data.get("business_impact", {})
+    metrics = default_scenario_data.get("metrics", {})
+    
+    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 Variance Scenario",
+                info="Choose a production variance pattern to analyze",
+                interactive=True,
+                container=False
+            )
+            
+            # ============ HISTORICAL EVIDENCE PANEL FIRST (RECALL DOMINANCE) ============
+            historical_panel = create_historical_evidence_panel(default_scenario_data)
+            
+            # Scenario Card with doctrinally compliant language
+            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, #f59e0b 0%, #d97706 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_VARIANCE')}</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;">Users Affected:</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: #f59e0b; font-weight: 700;">${business_impact.get('revenue_risk_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 (Policy System)</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;">variance</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;">pattern</span>
+                    </div>
+                </div>
+            </div>
+            """)
+            
+            # Visualization section
+            with gr.Row():
+                with gr.Column(scale=1):
+                    telemetry_header = gr.Markdown("### 📈 Live Telemetry")
+                    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: Process Workflow (NOT Agent Workflow)
+        with gr.Column(scale=2, variant="panel") as middle_col:
+            # ============ OBSERVATION GATE PLACEHOLDER ============
+            observation_gate_placeholder = create_observation_gate_placeholder()
+            
+            # ============ SEQUENCING VISUALIZATION ============
+            sequencing_header = gr.Markdown("### 🔄 Sequencing Logic: Dampening → Concurrency → Observe → Scale")
+            sequencing_panel = create_sequencing_visualization()
+            
+            # Process Workflow Header (NOT Agent Workflow)
+            workflow_header = gr.Markdown("## 🔄 Policy Process Workflow")
+            workflow_subheader = gr.Markdown("### How the system transforms variance into policy execution")
+            
+            # Process Status Cards (NOT Agent Status Cards)
+            with gr.Row():
+                detection_process = create_detection_display()
+                recall_process = create_recall_display()
+                decision_process = create_decision_display()
+            
+            # 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="Policy Safety Mode",
+                        info="Control execution safety level",
+                        interactive=True
+                    )
+            
+            # OSS vs Enterprise Boundary Visualization
+            boundary_header = gr.Markdown("### 🎭 Policy vs Execution: The Safety Boundary")
+            
+            with gr.Row():
+                oss_section = create_oss_advisory_section()
+                
+                enterprise_section = gr.HTML("""
+                <div style="padding: 25px; border-radius: 16px; margin-bottom: 15px; flex: 1; min-height: 320px; 
+                            background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); border: 2px solid #10b981;">
+                    <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 2px solid rgba(16, 185, 129, 0.2);">
+                        <div style="font-size: 32px;">💰</div>
+                        <div>
+                            <h3 style="margin: 0 0 5px 0; font-size: 20px; color: #1e293b;">Execution Edition</h3>
+                            <p style="margin: 0; font-size: 14px; color: #64748b;">Full Execution & Learning - Commercial</p>
+                        </div>
+                        <div style="margin-left: auto; padding: 6px 14px; background: rgba(255, 255, 255, 0.9); 
+                                  border-radius: 10px; font-size: 11px; font-weight: bold; color: #475569;">
+                            REQUIRES LICENSE
+                        </div>
+                    </div>
+                    
+                    <div style="background: white; border-radius: 12px; padding: 20px; 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: 1px solid #f1f5f9;">
+                            <h4 style="margin: 0; font-size: 16px; color: #1e293b;">⚡ Ready to Execute</h4>
+                            <span style="padding: 6px 12px; background: #10b981; color: white; border-radius: 8px; font-size: 12px; font-weight: bold; text-transform: uppercase;">AUTONOMOUS</span>
+                        </div>
+                        
+                        <div style="margin-bottom: 15px;">
+                            <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;">
+                                <div style="width: 24px; height: 24px; background: #3b82f6; color: white; border-radius: 50%; 
+                                          display: flex; align-items: center; justify-content: center; font-size: 12px;">
+                                    ⚙️
+                                </div>
+                                <div>
+                                    <div style="font-size: 14px; color: #475569; font-weight: 500;">Mode</div>
+                                    <div style="font-size: 13px; color: #1e293b;">Autonomous (Requires Enterprise license)</div>
+                                </div>
+                            </div>
+                            
+                            <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;">
+                                <div style="width: 24px; height: 24px; background: #10b981; color: white; border-radius: 50%; 
+                                          display: flex; align-items: center; justify-content: center; font-size: 12px;">
+                                    ⚡
+                                </div>
+                                <div>
+                                    <div style="font-size: 14px; color: #475569; font-weight: 500;">Expected Recovery</div>
+                                    <div style="font-size: 13px; color: #1e293b;">12 minutes (vs 45 min manual)</div>
+                                </div>
+                            </div>
+                            
+                            <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;">
+                                <div style="width: 24px; height: 24px; background: #f59e0b; color: white; border-radius: 50%; 
+                                          display: flex; align-items: center; justify-content: center; font-size: 12px;">
+                                    💰
+                                </div>
+                                <div>
+                                    <div style="font-size: 14px; color: #475569; font-weight: 500;">Cost Avoided</div>
+                                    <div style="font-size: 13px; color: #10b981; font-weight: 700;">$6,375</div>
+                                </div>
+                            </div>
+                            
+                            <div style="display: flex; align-items: center; gap: 10px;">
+                                <div style="width: 24px; height: 24px; background: #8b5cf6; color: white; border-radius: 50%; 
+                                          display: flex; align-items: center; justify-content: center; font-size: 12px;">
+                                    👥
+                                </div>
+                                <div>
+                                    <div style="font-size: 14px; color: #475569; font-weight: 500;">Users Protected</div>
+                                    <div style="font-size: 13px; color: #1e293b;">45,000 → 0 impacted</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- Enterprise Boundary -->
+                    <div style="text-align: center;">
+                        <div style="height: 2px; background: linear-gradient(90deg, transparent, #10b981, transparent); margin: 8px 0;"></div>
+                        <div style="padding: 10px; background: #dcfce7; color: #166534; border-radius: 10px; 
+                                  font-size: 14px; font-weight: bold; display: inline-block; border: 2px solid #10b981;">
+                            ✅ Enterprise executes with MCP safety
+                        </div>
+                        <div style="height: 2px; background: linear-gradient(90deg, transparent, #10b981, transparent); margin: 8px 0;"></div>
+                        
+                        <div style="margin-top: 15px; padding: 12px; background: rgba(255, 255, 255, 0.8); border-radius: 10px;">
+                            <div style="font-size: 13px; color: #475569; font-weight: 500;">
+                                Enterprise edition adds execution, learning, and safety guarantees.
+                            </div>
+                            <div style="font-size: 12px; color: #64748b; margin-top: 5px;">
+                                MCP safety modes: Advisory → Approval → Autonomous
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                """)
+            
+            # Execution Controls
+            with gr.Row():
+                with gr.Column(scale=1):
+                    oss_btn = gr.Button(
+                        "🆓 Run Policy Analysis",
+                        variant="secondary",
+                        size="lg"
+                    )
+                    oss_info = gr.Markdown("*Free, policy-only analysis*")
+                
+                with gr.Column(scale=1):
+                    enterprise_btn = gr.Button(
+                        "💰 Execute Enterprise Healing",
+                        variant="primary", 
+                        size="lg"
+                    )
+                    enterprise_info = gr.Markdown("*Requires Enterprise license*")
+            
+            # Timeline visualization
+            timeline_header = gr.Markdown("### ⏰ Incident Timeline")
+            timeline_viz = gr.Plot(
+                create_timeline_comparison_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 - MUST MATCH app.py demo_btn.click() expectations!
+            detection_time = gr.HTML()
+            recall_quality = gr.HTML()  # Changed from mttr to match demo_btn.click()
+            confidence_score = gr.HTML()  # Changed from auto_heal to match demo_btn.click()
+            sequencing_stage = gr.HTML()  # Changed from savings to match demo_btn.click()
+            
+            # Results Display Areas
+            oss_results_header = gr.Markdown("### 🆓 Policy Analysis Results")
+            oss_results_display = gr.JSON(
+                label="",
+                value={
+                    "status": "Analysis Pending",
+                    "processes": ["Detection", "Recall", "Decision"],
+                    "mode": "Advisory Only",
+                    "action": "Generate Formal HealingIntent"
+                },
+                height=200
+            )
+            
+            enterprise_results_header = gr.Markdown("### 💰 Execution 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
+            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 (Policy 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. System generates formal HealingIntent</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 contraindications</div>
+                        <div style="padding: 12px; background: #f8fafc; border-radius: 10px; border-left: 4px solid #3b82f6; font-size: 14px; color: #475569; font-weight: 500;">3. System executes with sequencing constraints</div>
+                    </div>
+                </div>
+            </div>
+            """)
+            
+            # Demo Actions
+            demo_btn = gr.Button(
+                "▶️ Run Complete Walkthrough",
+                variant="secondary",
+                size="lg"
+            )
+            demo_info = gr.Markdown("*Experience the full workflow from detection to resolution*")
+    
+    # CRITICAL: Return EXACTLY 26 values that match app.py expectations
+    return (
+        # Left column returns (5 values)
+        scenario_dropdown, historical_panel, scenario_card, telemetry_viz, impact_viz,
+        # Middle column returns (13 values)
+        observation_gate_placeholder, sequencing_panel, workflow_header, detection_process, 
+        recall_process, decision_process, oss_section, enterprise_section, oss_btn, enterprise_btn, 
+        approval_toggle, mcp_mode, timeline_viz,
+        # Right column returns (8 values) - MUST MATCH demo_btn.click() expectations!
+        detection_time, recall_quality, confidence_score, sequencing_stage,  # Changed to match app.py
+        oss_results_display, enterprise_results_display, approval_display, demo_btn
+    )
 # -----------------------------
 # Tab 1: Live Incident Demo - UPDATED WITH RESTORED FUNCTIONS
 # -----------------------------