Update ui/components.py

ui/components.py

@@ -647,7 +647,296 @@ def create_tab5_learning_engine() -> tuple:
     
     return (learning_graph, graph_type, show_labels, search_query, search_btn,
             clear_btn_search, search_results, stats_display, patterns_display, performance_display)
+    
+# Add this function to ui/components.py (new component)
 
+def create_realism_panel(scenario_data: Dict, scenario_name: str) -> gr.HTML:
+    """
+    Create a realism panel showing ranked actions, risks, and uncertainty.
+    This makes ARF look cautious, opinionated, and enterprise-seasoned.
+    """
+    realism = scenario_data.get("realism", {})
+    ranked_actions = realism.get("ranked_actions", [])
+    
+    # Build ranked actions HTML
+    actions_html = ""
+    for action in ranked_actions:
+        rank_color = "#10b981" if action["rank"] == 1 else "#f59e0b" if action["rank"] == 2 else "#ef4444"
+        status = "✅ RECOMMENDED" if action["rank"] == 1 else "🟡 SECONDARY" if action["rank"] == 2 else "🔴 REJECTED"
+        
+        actions_html += f"""
+        <div style="border: 2px solid {rank_color}; border-radius: 12px; padding: 16px; 
+                   background: {rank_color}10; margin-bottom: 12px;">
+            <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px;">
+                <div>
+                    <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 5px;">
+                        <div style="width: 24px; height: 24px; background: {rank_color}; 
+                                 color: white; border-radius: 50%; display: flex; align-items: center; 
+                                 justify-content: center; font-size: 12px; font-weight: bold;">
+                            {action['rank']}
+                        </div>
+                        <span style="font-size: 14px; font-weight: 600; color: #1e293b;">
+                            {status} • {action['confidence']}% confidence
+                        </span>
+                    </div>
+                    <p style="font-size: 14px; color: #475569; margin: 8px 0; font-weight: 500;">
+                        {action['action']}
+                    </p>
+                </div>
+                <div style="padding: 6px 12px; background: {rank_color}20; border-radius: 20px; 
+                           font-size: 12px; font-weight: bold; color: {rank_color};">
+                    {action['confidence']}%
+                </div>
+            </div>
+            
+            <div style="font-size: 13px; color: #64748b; margin: 8px 0; line-height: 1.5;">
+                <strong>Rationale:</strong> {action.get('rationale', 'No rationale provided')}
+            </div>
+            
+            {"<div style='font-size: 13px; color: #dc2626; margin: 8px 0; padding: 8px; background: #fef2f2; border-radius: 6px; border-left: 3px solid #dc2626;'><strong>⚠️ Risk:</strong> " + action['risk'] + "</div>" if action.get('risk') else ""}
+            
+            {"<div style='font-size: 13px; color: #92400e; margin: 8px 0; padding: 8px; background: #fffbeb; border-radius: 6px; border-left: 3px solid #f59e0b;'><strong>🔄 Trade-off:</strong> " + action['tradeoff'] + "</div>" if action.get('tradeoff') else ""}
+            
+            {"<div style='font-size: 13px; color: #b45309; margin: 8px 0; padding: 8px; background: #fef3c7; border-radius: 6px; border-left: 3px solid #f59e0b;'><strong>⏱️ Execution:</strong> " + action['execution_time'] + "</div>" if action.get('execution_time') else ""}
+            
+            {"<div style='font-size: 13px; color: #b91c1c; margin: 8px 0; padding: 8px; background: #fee2e2; border-radius: 6px; border-left: 3px solid #ef4444;'><strong>🚫 Rejected:</strong> " + action['rejection_reason'] + "</div>" if action.get('rejection_reason') else ""}
+            
+            {"<div style='font-size: 13px; color: #7c3aed; margin: 8px 0; padding: 8px; background: #f5f3ff; border-radius: 6px; border-left: 3px solid #8b5cf6;'><strong>🛡️ Safety:</strong> " + action['safety_override'] + "</div>" if action.get('safety_override') else ""}
+        </div>
+        """
+    
+    # Build competing hypotheses (for Network Partition scenario)
+    hypotheses_html = ""
+    if realism.get("competing_hypotheses"):
+        hypotheses_html = """
+        <div style="margin-top: 20px; padding-top: 20px; border-top: 2px solid #e2e8f0;">
+            <div style="font-size: 15px; font-weight: 600; color: #1e293b; margin-bottom: 15px;">
+                🧠 Competing Hypotheses
+            </div>
+        """
+        for hypo in realism["competing_hypotheses"]:
+            hypotheses_html += f"""
+            <div style="display: flex; align-items: center; gap: 15px; margin-bottom: 12px; padding: 12px; 
+                       background: #f8fafc; border-radius: 8px;">
+                <div style="font-size: 24px; color: #3b82f6;">?</div>
+                <div style="flex: 1;">
+                    <div style="font-size: 14px; font-weight: 500; color: #1e293b; margin-bottom: 4px;">
+                        {hypo['cause']} ({hypo['confidence']}%)
+                    </div>
+                    <div style="font-size: 12px; color: #64748b; margin-bottom: 6px;">
+                        {hypo['evidence']}
+                    </div>
+                    <div style="font-size: 11px; color: #475569; font-weight: 500;">
+                        Investigation: {hypo['investigation_path']}
+                    </div>
+                </div>
+                <div style="width: 60px; height: 60px; background: conic-gradient(#3b82f6 0% {hypo['confidence']}%, #e2e8f0 {hypo['confidence']}% 100%); 
+                         border-radius: 50%; display: flex; align-items: center; justify-content: center;">
+                    <div style="width: 50px; height: 50px; background: white; border-radius: 50%; 
+                             display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: bold; color: #1e293b;">
+                        {hypo['confidence']}%
+                    </div>
+                </div>
+            </div>
+            """
+        hypotheses_html += "</div>"
+    
+    # Build risk assessment panel
+    risk_html = ""
+    if realism.get("risk_assessment"):
+        risk_html = """
+        <div style="margin-top: 20px; padding-top: 20px; border-top: 2px solid #e2e8f0;">
+            <div style="font-size: 15px; font-weight: 600; color: #1e293b; margin-bottom: 15px;">
+                ⚠️ Risk Assessment
+            </div>
+            <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;">
+        """
+        for key, value in realism["risk_assessment"].items():
+            risk_html += f"""
+            <div style="padding: 12px; background: #f8fafc; border-radius: 8px; border-left: 4px solid #f59e0b;">
+                <div style="font-size: 12px; color: #64748b; text-transform: uppercase; margin-bottom: 4px;">
+                    {key.replace('_', ' ').title()}
+                </div>
+                <div style="font-size: 14px; font-weight: 600; color: #92400e;">
+                    {value}
+                </div>
+            </div>
+            """
+        risk_html += "</div></div>"
+    
+    # Build confidence degradation panel
+    confidence_html = ""
+    if realism.get("confidence_degradation"):
+        conf = realism["confidence_degradation"]
+        confidence_html = f"""
+        <div style="margin-top: 20px; padding-top: 20px; border-top: 2px solid #e2e8f0;">
+            <div style="font-size: 15px; font-weight: 600; color: #1e293b; margin-bottom: 15px;">
+                ⏱️ Confidence Degradation Over Time
+            </div>
+            <div style="background: #f8fafc; border-radius: 10px; padding: 20px;">
+                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
+                    <div style="text-align: center;">
+                        <div style="font-size: 28px; font-weight: 700; color: #10b981;">{conf['initial']}%</div>
+                        <div style="font-size: 12px; color: #64748b;">Initial Confidence</div>
+                    </div>
+                    <div style="font-size: 24px; color: #94a3b8;">→</div>
+                    <div style="text-align: center;">
+                        <div style="font-size: 28px; font-weight: 700; color: #f59e0b;">{conf['after_8_min']}%</div>
+                        <div style="font-size: 12px; color: #64748b;">After 8 minutes</div>
+                    </div>
+                    <div style="font-size: 24px; color: #94a3b8;">→</div>
+                    <div style="text-align: center;">
+                        <div style="font-size: 28px; font-weight: 700; color: #ef4444;">{conf['after_15_min']}%</div>
+                        <div style="font-size: 12px; color: #64748b;">After 15 minutes</div>
+                    </div>
+                </div>
+                
+                <div style="height: 10px; background: #e2e8f0; border-radius: 5px; margin: 20px 0; position: relative;">
+                    <div style="position: absolute; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, #10b981, #f59e0b, #ef4444); border-radius: 5px;"></div>
+                    <div style="position: absolute; left: {conf['escalation_threshold']}%; top: -5px; width: 2px; height: 20px; background: #1e293b;"></div>
+                    <div style="position: absolute; left: {conf['escalation_threshold']}%; top: 25px; font-size: 11px; color: #64748b; transform: translateX(-50%);">
+                        Escalation at {conf['escalation_threshold']}%
+                    </div>
+                </div>
+                
+                <div style="padding: 12px; background: #fef3c7; border-radius: 8px; border-left: 4px solid #f59e0b;">
+                    <div style="font-size: 13px; color: #92400e; font-weight: 500;">
+                        ⚠️ ARF escalates to human operators when confidence drops below {conf['escalation_threshold']}%
+                    </div>
+                    <div style="font-size: 12px; color: #b45309; margin-top: 5px;">
+                        This prevents autonomous execution in high-uncertainty scenarios
+                    </div>
+                </div>
+            </div>
+        </div>
+        """
+    
+    # Build "What ARF Will NOT Do" panel (global)
+    wont_do_html = """
+    <div style="margin-top: 20px; padding-top: 20px; border-top: 2px solid #e2e8f0;">
+        <div style="font-size: 15px; font-weight: 600; color: #1e293b; margin-bottom: 15px;">
+            🚫 What ARF Will NOT Do (Safety Boundaries)
+        </div>
+        <div style="background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%); 
+                   border: 2px solid #ef4444; border-radius: 12px; padding: 20px;">
+            <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px;">
+                <div style="display: flex; align-items: flex-start; gap: 10px;">
+                    <div style="font-size: 20px; color: #ef4444;">⛔</div>
+                    <div>
+                        <div style="font-size: 14px; font-weight: 600; color: #7f1d1d;">Restart stateful leaders</div>
+                        <div style="font-size: 12px; color: #b91c1c;">During peak traffic or elections</div>
+                    </div>
+                </div>
+                <div style="display: flex; align-items: flex-start; gap: 10px;">
+                    <div style="font-size: 20px; color: #ef4444;">⛔</div>
+                    <div>
+                        <div style="font-size: 14px; font-weight: 600; color: #7f1d1d;">Apply schema changes</div>
+                        <div style="font-size: 12px; color: #b91c1c;">To production databases autonomously</div>
+                    </div>
+                </div>
+                <div style="display: flex; align-items: flex-start; gap: 10px;">
+                    <div style="font-size: 20px; color: #ef4444;">⛔</div>
+                    <div>
+                        <div style="font-size: 14px; font-weight: 600; color: #7f1d1d;">Exceed API limits</div>
+                        <div style="font-size: 12px; color: #b91c1c;">Contractual or rate limits</div>
+                    </div>
+                </div>
+                <div style="display: flex; align-items: flex-start; gap: 10px;">
+                    <div style="font-size: 20px; color: #ef4444;">⛔</div>
+                    <div>
+                        <div style="font-size: 14px; font-weight: 600; color: #7f1d1d;">Modify ACLs/RBAC</div>
+                        <div style="font-size: 12px; color: #b91c1c;">Security permissions autonomously</div>
+                    </div>
+                </div>
+            </div>
+            <div style="margin-top: 15px; padding: 12px; background: rgba(255, 255, 255, 0.7); 
+                       border-radius: 8px; border-left: 4px solid #dc2626;">
+                <div style="font-size: 13px; color: #7f1d1d; font-weight: 500;">
+                    These boundaries ensure ARF operates within safe, reversible limits.
+                    Enterprise edition adds approval workflows for edge cases.
+                </div>
+            </div>
+        </div>
+    </div>
+    """
+    
+    # Combine all panels
+    full_html = f"""
+    <div style="border: 2px solid #3b82f6; border-radius: 16px; padding: 25px; 
+                background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);">
+        
+        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
+            <div>
+                <h3 style="margin: 0 0 8px 0; font-size: 18px; color: #1e293b; font-weight: 700;">
+                    🎯 Ranked Healing Intents
+                </h3>
+                <p style="margin: 0; font-size: 13px; color: #64748b;">
+                    ARF evaluates multiple options with confidence scores and risk assessments
+                </p>
+            </div>
+            <div style="padding: 8px 16px; background: #dbeafe; color: #1e40af; 
+                       border-radius: 20px; font-size: 12px; font-weight: bold;">
+                REALISM UPGRADE v3.3.9+
+            </div>
+        </div>
+        
+        {actions_html}
+        {hypotheses_html}
+        {risk_html}
+        {confidence_html}
+        {wont_do_html}
+        
+        <!-- ROI as Ranges -->
+        <div style="margin-top: 20px; padding-top: 20px; border-top: 2px solid #e2e8f0;">
+            <div style="font-size: 15px; font-weight: 600; color: #1e293b; margin-bottom: 15px;">
+                📈 Realistic ROI Estimates (Ranges)
+            </div>
+            <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px;">
+                <div style="text-align: center; padding: 15px; background: #f8fafc; border-radius: 10px;">
+                    <div style="font-size: 16px; font-weight: 700; color: #10b981;">$5.8K – $7.2K</div>
+                    <div style="font-size: 12px; color: #64748b;">Cost Avoided</div>
+                    <div style="font-size: 11px; color: #94a3b8; margin-top: 5px;">Estimated range</div>
+                </div>
+                <div style="text-align: center; padding: 15px; background: #f8fafc; border-radius: 10px;">
+                    <div style="font-size: 16px; font-weight: 700; color: #10b981;">4.8× – 5.6×</div>
+                    <div style="font-size: 12px; color: #64748b;">ROI Multiplier</div>
+                    <div style="font-size: 11px; color: #94a3b8; margin-top: 5px;">Confidence interval</div>
+                </div>
+                <div style="text-align: center; padding: 15px; background: #f8fafc; border-radius: 10px;">
+                    <div style="font-size: 16px; font-weight: 700; color: #10b981;">68% – 87%</div>
+                    <div style="font-size: 12px; color: #64748b;">Success Rate</div>
+                    <div style="font-size: 11px; color: #94a3b8; margin-top: 5px;">Based on similar incidents</div>
+                </div>
+            </div>
+            <div style="margin-top: 15px; padding: 12px; background: #f0fdf4; border-radius: 8px;">
+                <div style="font-size: 13px; color: #065f46; text-align: center; font-weight: 500;">
+                    📊 Real systems have ranges, not single-point estimates. ARF shows uncertainty honestly.
+                </div>
+            </div>
+        </div>
+        
+        <!-- Engineering Insight -->
+        <div style="margin-top: 20px; padding: 20px; background: #f8fafc; border-radius: 12px; 
+                    border-left: 4px solid #3b82f6;">
+            <div style="display: flex; align-items: flex-start; gap: 15px;">
+                <div style="font-size: 32px;">🎭</div>
+                <div>
+                    <div style="font-size: 14px; font-weight: 600; color: #1e293b; margin-bottom: 8px;">
+                        What Senior SREs Expect at 3 a.m.
+                    </div>
+                    <div style="font-size: 13px; color: #475569; line-height: 1.6;">
+                        "Real systems hesitate. Real systems explain risk. Real systems earn trust. 
+                        ARF shows multiple options with confidence scores because in production, 
+                        there's never a single perfect answer—just trade-offs managed carefully."
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    """
+    
+    return gr.HTML(full_html)
+    
 # -----------------------------
 # Footer
 # -----------------------------