Update ui/components.py

ui/components.py

@@ -1,7 +1,6 @@
 """
 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
 UPDATED: Added dynamic performance metrics function for Phase 2
@@ -274,6 +273,26 @@ def create_tab1_incident_demo(scenarios=INCIDENT_SCENARIOS, default_scenario="Ca
         
         # Middle Column: Agent Workflow
         with gr.Column(scale=2, variant="panel") as middle_col:
+            # ============ MOVED: Safety Controls Section (Now appears BEFORE Agent Workflow) ============
+            # 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="MCP Safety Mode",
+                        info="Control execution safety level",
+                        interactive=True
+                    )
+            
             # Agent Workflow Header
             workflow_header = gr.Markdown("## 🔄 ARF Agent Workflow")
             workflow_subheader = gr.Markdown("### How ARF transforms incidents into autonomous healing")
@@ -404,25 +423,6 @@ def create_tab1_incident_demo(scenarios=INCIDENT_SCENARIOS, default_scenario="Ca
                     )
                     enterprise_info = gr.Markdown("*Requires Enterprise license*")
             
-            # 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="MCP Safety Mode",
-                        info="Control execution safety level",
-                        interactive=True
-                    )
-            
             # Timeline visualization
             timeline_header = gr.Markdown("### ⏰ Incident Timeline")
             timeline_viz = gr.Plot(