Update ui/components.py

ui/components.py

@@ -1157,318 +1157,143 @@ def update_performance_metrics(scenario_name: str, scenarios=INCIDENT_SCENARIOS)
     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:
+
+def create_tab1_incident_demo():
     """
-    Create doctrinally compliant incident demo tab.
-    Doctrinal: Language discipline, sequencing display, no early "critical"
+    Creates Live Demo Tab components with psychological advantage baked in.
+    Returns EXACTLY 26 values matching app.py expectations.
+    
+    Canonical Question: "What should we do right now?" (Policy advice only)
+    No business metrics allowed in this tab.
     """
+    import gradio as gr
     
-    # 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", {})
+    # 1. Core Scenario Selection (Psychological: User controls context)
+    scenario_dropdown = gr.Dropdown(
+        choices=["Retry Storm Amplification", "Cascading Dependency Failure", 
+                 "Partial Regional Outage", "Latent Configuration Drift"],
+        value="Retry Storm Amplification",
+        label="Select Incident Scenario",
+        info="Choose the operational context for policy evaluation"
+    )
     
-    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*")
+    # 2. Historical Evidence Panel (DOMINANT VISUALLY - psychological advantage)
+    historical_panel = gr.DataFrame(
+        value=[
+            ["2024-03-15", "US-East", "Retry Storm", "Dampen → Observe → Scale", "Contained in 42s"],
+            ["2024-02-28", "EU-West", "Cascading Failure", "Dampen → Isolate → Repair", "Contained in 3m 18s"],
+            ["2024-01-12", "AP-South", "Config Drift", "Observe → Diagnose → Fix", "Prevented outage"]
+        ],
+        headers=["Date", "Environment", "Pattern", "Sequence Applied", "Outcome"],
+        label="📊 Historical Evidence Dominates Models",
+        interactive=False,
+        height=200
+    )
+    
+    # 3. Scenario Context Card
+    scenario_card = gr.Markdown("""
+    ### Scenario Context: Retry Storm Amplification
+    **What we're seeing:** Client retries triggering backend amplification (8x retry multiplier)
+    **Current state:** 42% error rate, rising at 3.2%/minute
+    **Risk profile:** Service degradation → Partial outage in 8-12 minutes
+    """)
+    
+    # 4. Telemetry Visualization (Psychological: Show what's knowable)
+    telemetry_viz = gr.Plot(
+        value=create_telemetry_plot(),
+        label="Real-time Telemetry: Error Rate & Load"
+    )
+    
+    # 5. Business Impact Visualization (Psychological: Show consequences)
+    impact_viz = gr.Plot(
+        value=create_impact_plot(),
+        label="Predicted Impact Trajectory"
+    )
+    
+    # 6. OBSERVATION GATE (CRITICAL PSYCHOLOGICAL ELEMENT)
+    observation_gate_placeholder = create_observation_gate_placeholder()
+    
+    # 7. SEQUENCING VISUALIZATION (Policy, not reaction)
+    sequencing_panel = create_sequencing_visualization()
+    
+    # 8. Workflow Header
+    workflow_header = gr.Markdown("### Policy Execution Sequence")
     
-    # CRITICAL: Return EXACTLY 26 values that match app.py expectations
+    # 9-11. PROCESS DISPLAYS (Doctrinal: "Process" not "Agent")
+    detection_process = create_detection_display("DETECTION_PROCESS")
+    recall_process = create_recall_display("RECALL_PROCESS")
+    decision_process = create_decision_display("DECISION_PROCESS")
+    
+    # 12-14. OSS/Enterprise Boundary
+    oss_section = gr.Markdown("#### 🔓 Open Source Capabilities")
+    enterprise_section = gr.Markdown("#### 🔒 Enterprise Governance")
+    oss_btn = gr.Button("View OSS Implementation", variant="secondary", size="sm")
+    enterprise_btn = gr.Button("Requires Enterprise License", variant="secondary", size="sm")
+    
+    # 15-17. Approval & MCP
+    approval_toggle = gr.Checkbox(
+        label="Manual Approval Required",
+        value=True,
+        info="Policy: Human approval required for scaling actions during retry storms"
+    )
+    mcp_mode = gr.Radio(
+        choices=["Policy Evaluation", "Manual Control", "Full Autonomous"],
+        value="Policy Evaluation",
+        label="Execution Mode"
+    )
+    timeline_viz = gr.Plot(value=create_timeline_plot())
+    
+    # 18-21. PERFORMANCE METRICS (CRITICAL: Must match app.py indices 18-21)
+    detection_time = gr.Number(
+        value=2.8,
+        label="Detection Time (seconds)",
+        precision=1
+    )
+    
+    # INDEX 19: MUST BE recall_quality (not mttr)
+    recall_quality = gr.Number(
+        value=0.92,
+        label="Recall Quality Score",
+        precision=2,
+        info="Historical match confidence"
+    )
+    
+    # INDEX 20: MUST BE confidence_score (not auto_heal)
+    confidence_score = gr.Number(
+        value=0.65,
+        label="System Confidence",
+        precision=2,
+        info="Policy execution confidence < 70% triggers observation gate"
+    )
+    
+    # INDEX 21: MUST BE sequencing_stage (not savings)
+    sequencing_stage = gr.Textbox(
+        value="Dampening",
+        label="Current Sequencing Stage",
+        info="Policy: Dampen → Observe → Concurrent Fix → Scale"
+    )
+    
+    # 22-24. Results Displays
+    oss_results_display = gr.Markdown("### OSS Results Will Appear Here")
+    enterprise_results_display = gr.Markdown("### Enterprise Results Will Appear Here")
+    approval_display = gr.Markdown("**Status:** Awaiting manual approval per policy")
+    
+    # 25. DEMO BUTTON (CRITICAL: Index 25 must be demo_btn)
+    demo_btn = gr.Button(
+        "▶️ Run Complete Walkthrough",
+        variant="primary",
+        size="lg",
+        elem_id="demo_primary_btn"
+    )
+    
+    # RETURN EXACTLY 26 VALUES IN CORRECT ORDER
     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, 
+        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
+        detection_time, recall_quality, confidence_score, sequencing_stage,  # ← CORRECT VARIABLES
         oss_results_display, enterprise_results_display, approval_display, demo_btn
     )
 # -----------------------------