Update ui/components.py

ui/components.py

@@ -1050,7 +1050,7 @@ def create_historical_evidence_panel(scenario_data: Dict[str, Any]) -> gr.HTML:
 def update_performance_metrics(scenario_name: str, scenarios=INCIDENT_SCENARIOS) -> tuple:
     """
     Update performance metrics based on scenario
-    Returns: (detection_time_html, mttr_html, auto_heal_html, savings_html)
+    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
     """
     
@@ -1058,38 +1058,37 @@ def update_performance_metrics(scenario_name: str, scenarios=INCIDENT_SCENARIOS)
     metrics_config = {
         "Cache": {
             "detection_time": ("45s", "89% faster", "linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%)"),
-            "mttr": ("12m", "73% reduction", "linear-gradient(135deg, #10b981 0%, #047857 100%)"),
-            "auto_heal": ("82%", "5.4× improvement", "linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%)"),
+            "recall_quality": ("92%", "85% accuracy", "linear-gradient(135deg, #10b981 0%, #047857 100%)"),
+            "confidence_score": ("87%", "High certainty", "linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%)"),
+            "sequencing_stage": ("Dampening", "Step 1/4", "linear-gradient(135deg, #f59e0b 0%, #d97706 100%)"),
             "savings_multiplier": 0.85
         },
         "Database": {
             "detection_time": ("38s", "91% faster", "linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%)"),
-            "mttr": ("18m", "68% reduction", "linear-gradient(135deg, #10b981 0%, #047857 100%)"),
-            "auto_heal": ("74%", "4.8× improvement", "linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%)"),
+            "recall_quality": ("89%", "82% accuracy", "linear-gradient(135deg, #10b981 0%, #047857 100%)"),
+            "confidence_score": ("84%", "High certainty", "linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%)"),
+            "sequencing_stage": ("Concurrency", "Step 2/4", "linear-gradient(135deg, #f59e0b 0%, #d97706 100%)"),
             "savings_multiplier": 0.82
         },
         "Kubernetes": {
             "detection_time": ("52s", "87% faster", "linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%)"),
-            "mttr": ("15m", "71% reduction", "linear-gradient(135deg, #10b981 0%, #047857 100%)"),
-            "auto_heal": ("79%", "5.1× improvement", "linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%)"),
+            "recall_quality": ("91%", "84% accuracy", "linear-gradient(135deg, #10b981 0%, #047857 100%)"),
+            "confidence_score": ("86%", "High certainty", "linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%)"),
+            "sequencing_stage": ("Observe", "Step 3/4", "linear-gradient(135deg, #f59e0b 0%, #d97706 100%)"),
             "savings_multiplier": 0.83
         },
         "Network": {
             "detection_time": ("28s", "93% faster", "linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%)"),
-            "mttr": ("8m", "82% reduction", "linear-gradient(135deg, #10b981 0%, #047857 100%)"),
-            "auto_heal": ("89%", "6.2× improvement", "linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%)"),
+            "recall_quality": ("94%", "88% accuracy", "linear-gradient(135deg, #10b981 0%, #047857 100%)"),
+            "confidence_score": ("89%", "High certainty", "linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%)"),
+            "sequencing_stage": ("Scale", "Step 4/4", "linear-gradient(135deg, #f59e0b 0%, #d97706 100%)"),
             "savings_multiplier": 0.88
         },
-        "Storage": {
-            "detection_time": ("35s", "92% faster", "linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%)"),
-            "mttr": ("22m", "65% reduction", "linear-gradient(135deg, #10b981 0%, #047857 100%)"),
-            "auto_heal": ("72%", "4.6× improvement", "linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%)"),
-            "savings_multiplier": 0.80
-        },
         "Default": {
             "detection_time": ("42s", "90% faster", "linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%)"),
-            "mttr": ("14m", "70% reduction", "linear-gradient(135deg, #10b981 0%, #047857 100%)"),
-            "auto_heal": ("79%", "5.0× improvement", "linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%)"),
+            "recall_quality": ("90%", "85% accuracy", "linear-gradient(135deg, #10b981 0%, #047857 100%)"),
+            "confidence_score": ("85%", "High certainty", "linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%)"),
+            "sequencing_stage": ("Dampening", "Step 1/4", "linear-gradient(135deg, #f59e0b 0%, #d97706 100%)"),
             "savings_multiplier": 0.85
         }
     }
@@ -1104,12 +1103,6 @@ def update_performance_metrics(scenario_name: str, scenarios=INCIDENT_SCENARIOS)
     # Get metrics for scenario type
     metrics = metrics_config.get(scenario_type, metrics_config["Default"])
     
-    # Get scenario data for savings calculation
-    scenario_data = scenarios.get(scenario_name, {})
-    business_impact = scenario_data.get("business_impact", {})
-    revenue_loss = business_impact.get('revenue_risk_per_hour', 8500)  # Changed from 'revenue_loss_per_hour'
-    savings_amount = int(revenue_loss * metrics["savings_multiplier"] / 1000)
-    
     # Create HTML for each metric card WITH GRADIENT BORDERS
     detection_time_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; 
@@ -1123,44 +1116,44 @@ def update_performance_metrics(scenario_name: str, scenarios=INCIDENT_SCENARIOS)
     </div>
     """
     
-    mttr_html = f"""
+    recall_quality_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; border-image: {metrics['mttr'][2]}; border-image-slice: 1;">
-        <div style="font-size: 28px; margin-bottom: 10px;">⚡</div>
+                border-left: 4px solid; border-image: {metrics['recall_quality'][2]}; border-image-slice: 1;">
+        <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; background: {metrics['mttr'][2]}; -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin: 8px 0;">{metrics['mttr'][0]}</p>
-            <p style="font-size: 12px; color: #64748b; margin: 0;">{metrics['mttr'][1]} than manual</p>
+            <h4 style="margin: 0 0 8px 0; font-size: 14px; color: #64748b; font-weight: 600;">Recall Quality</h4>
+            <p style="font-size: 28px; font-weight: bold; background: {metrics['recall_quality'][2]}; -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin: 8px 0;">{metrics['recall_quality'][0]}</p>
+            <p style="font-size: 12px; color: #64748b; margin: 0;">{metrics['recall_quality'][1]}</p>
         </div>
     </div>
     """
     
-    auto_heal_html = f"""
+    confidence_score_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; border-image: {metrics['auto_heal'][2]}; border-image-slice: 1;">
-        <div style="font-size: 28px; margin-bottom: 10px;">🛡️</div>
+                border-left: 4px solid; border-image: {metrics['confidence_score'][2]}; border-image-slice: 1;">
+        <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; background: {metrics['auto_heal'][2]}; -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin: 8px 0;">{metrics['auto_heal'][0]}</p>
-            <p style="font-size: 12px; color: #64748b; margin: 0;">{metrics['auto_heal'][1]}</p>
+            <h4 style="margin: 0 0 8px 0; font-size: 14px; color: #64748b; font-weight: 600;">Confidence Score</h4>
+            <p style="font-size: 28px; font-weight: bold; background: {metrics['confidence_score'][2]}; -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin: 8px 0;">{metrics['confidence_score'][0]}</p>
+            <p style="font-size: 12px; color: #64748b; margin: 0;">{metrics['confidence_score'][1]}</p>
         </div>
     </div>
     """
     
-    savings_html = f"""
+    sequencing_stage_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; border-image: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); border-image-slice: 1;">
-        <div style="font-size: 28px; margin-bottom: 10px;">💰</div>
+                border-left: 4px solid; border-image: {metrics['sequencing_stage'][2]}; border-image-slice: 1;">
+        <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 Avoided</h4>
-            <p style="font-size: 28px; font-weight: bold; background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin: 8px 0;">${savings_amount:.1f}K</p>
-            <p style="font-size: 12px; color: #64748b; margin: 0;">Per incident avoided</p>
+            <h4 style="margin: 0 0 8px 0; font-size: 14px; color: #64748b; font-weight: 600;">Sequencing Stage</h4>
+            <p style="font-size: 28px; font-weight: bold; background: {metrics['sequencing_stage'][2]}; -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin: 8px 0;">{metrics['sequencing_stage'][0]}</p>
+            <p style="font-size: 12px; color: #64748b; margin: 0;">{metrics['sequencing_stage'][1]}</p>
         </div>
     </div>
     """
     
     logger.info(f"��� Updated performance metrics for {scenario_name} ({scenario_type} type)")
-    return detection_time_html, mttr_html, auto_heal_html, savings_html
+    return detection_time_html, recall_quality_html, confidence_score_html, sequencing_stage_html
 
 # -----------------------------
 # Tab 1: Live Incident Demo - UPDATED WITH RESTORED FUNCTIONS
@@ -1409,11 +1402,12 @@ def create_tab1_incident_demo(scenarios=INCIDENT_SCENARIOS, default_scenario="Ca
             # Real-time Metrics Dashboard
             metrics_header = gr.Markdown("## 📊 Performance Metrics")
             
-            # Metric Cards Grid - CALL update_performance_metrics function
+            # Metric Cards Grid - FIXED to match app.py expectations
+            # app.py expects: detection_time, recall_quality, confidence_score, sequencing_stage
             detection_time = gr.HTML()
-            mttr = gr.HTML()
-            auto_heal = gr.HTML()
-            savings = gr.HTML()
+            recall_quality = gr.HTML()  # Changed from mttr
+            confidence_score = gr.HTML()  # Changed from auto_heal
+            sequencing_stage = gr.HTML()  # Changed from savings
             
             # Results Display Areas
             oss_results_header = gr.Markdown("### 🆓 Policy Analysis Results")
@@ -1474,9 +1468,11 @@ def create_tab1_incident_demo(scenarios=INCIDENT_SCENARIOS, default_scenario="Ca
         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
-        detection_time, mttr, auto_heal, savings,
-        oss_results_display, enterprise_results_display, approval_display, demo_btn
+        # Right column returns - FIXED to match app.py expectations
+        detection_time, recall_quality, confidence_score, sequencing_stage,  # Changed variable names
+        oss_results_display, enterprise_results_display, approval_display, demo_btn,
+        # Also return the info elements that app.py might need
+        oss_info, enterprise_info, demo_info
     )
 
 # -----------------------------