Update ui/components.py

ui/components.py

@@ -3,6 +3,7 @@ Gradio-only UI components for ARF
 Ensures full compatibility with app.py
 Updated with proper imports and error handling
 NOW WITH REAL ARF INSTALLATION DETECTION
+UPDATED: Added realism panel integration for Tab 1
 """
 
 import gradio as gr
@@ -102,13 +103,13 @@ def create_status_bar() -> gr.HTML:
     """)
 
 # -----------------------------
-# Tab 1: Live Incident Demo - UPDATED TO USE INLINE STYLES AND PROPER PLOTLY HANDLING
+# Tab 1: Live Incident Demo - UPDATED WITH REALISM PANEL
 # -----------------------------
 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
+    UPDATED: Now includes realism panel for enterprise-seasoned SRE experience
     """
     
     # Get the default scenario data
@@ -340,6 +341,17 @@ def create_tab1_incident_demo(scenarios=INCIDENT_SCENARIOS, default_scenario="Ca
                 show_label=False,
                 elem_id="timeline_plot"
             )
+            
+            # ============ NEW: Realism Panel Section ============
+            realism_header = gr.Markdown("### 🎭 Realism: Trade-offs & Uncertainty")
+            realism_panel = gr.HTML(
+                value="""<div style="text-align: center; padding: 30px; color: #64748b;">
+                           <div style="font-size: 48px; margin-bottom: 10px;">🔧</div>
+                           <h4 style="margin: 0 0 10px 0;">Realism Panel</h4>
+                           <p style="margin: 0;">Select a scenario to see ranked actions, risks, and trade-offs</p>
+                         </div>""",
+                elem_id="realism_panel"
+            )
         
         # Right Column: Results & Metrics
         with gr.Column(scale=1, variant="panel") as right_col:
@@ -448,14 +460,15 @@ def create_tab1_incident_demo(scenarios=INCIDENT_SCENARIOS, default_scenario="Ca
     return (
         # Left column returns
         scenario_dropdown, scenario_card, telemetry_viz, impact_viz,
-        # Middle column returns
+        # Middle column returns (WITH REALISM PANEL)
         workflow_header, detection_agent, recall_agent, decision_agent,
         oss_section, enterprise_section, oss_btn, enterprise_btn, 
-        approval_toggle, mcp_mode, timeline_viz,
+        approval_toggle, mcp_mode, timeline_viz, realism_panel,
         # Right column returns
         detection_time, mttr, auto_heal, savings,
         oss_results_display, enterprise_results_display, approval_display, demo_btn
     )
+
 # -----------------------------
 # Tab 2: Business ROI - Updated
 # -----------------------------
@@ -648,8 +661,9 @@ 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)
-
+# -----------------------------
+# Realism Panel Component
+# -----------------------------
 def create_realism_panel(scenario_data: Dict, scenario_name: str) -> gr.HTML:
     """
     Create a realism panel showing ranked actions, risks, and uncertainty.
@@ -936,7 +950,7 @@ def create_realism_panel(scenario_data: Dict, scenario_name: str) -> gr.HTML:
     """
     
     return gr.HTML(full_html)
-    
+
 # -----------------------------
 # Footer
 # -----------------------------