feat(ui): implement modern clinical dashboard interface using custom gradio blocks

server/app.py

@@ -33,6 +33,8 @@ except (ImportError, ModuleNotFoundError):
     from server.triage_flow_environment import TriageEnvironment
 
 
+from .ui import build_triage_ui
+
 # Create the app with web interface
 app = create_app(
     TriageEnvironment,
@@ -40,6 +42,7 @@ app = create_app(
     TriageObservation,
     env_name="triage_flow",
     max_concurrent_envs=1,
+    gradio_builder=build_triage_ui
 )
 
 from fastapi.responses import RedirectResponse

server/ui.py

@@ -0,0 +1,229 @@
+import gradio as gr
+import json
+
+CUSTOM_CSS = """
+.metric-card {
+    background: rgba(255, 255, 255, 0.85);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(226, 232, 240, 0.8);
+    border-radius: 12px;
+    padding: 1.5rem;
+    margin-bottom: 1rem;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
+}
+.dark .metric-card {
+    background: rgba(30, 41, 59, 0.85);
+    border-color: rgba(51, 65, 85, 0.8);
+}
+.status-pill {
+    display: inline-block;
+    padding: 0.25rem 0.75rem;
+    border-radius: 9999px;
+    font-size: 0.875rem;
+    font-weight: 600;
+}
+.status-pill.success { background: #dcfce7; color: #166534; }
+.status-pill.error { background: #fee2e2; color: #991b1b; }
+.status-pill.info { background: #dbeafe; color: #1e3a8a; }
+.dark .status-pill.success { background: #14532d; color: #bbf7d0; }
+.dark .status-pill.error { background: #7f1d1d; color: #fecaca; }
+.dark .status-pill.info { background: #1e3a8a; color: #bfdbfe; }
+"""
+
+def extract_patient_display(obs, custom_error=None):
+    pt = obs.get("current_patient", {})
+    if pt is None:
+        pt = {}
+        
+    pt_id = pt.get("patient_id", "N/A")
+    age = pt.get("age", "N/A")
+    pt_display = f"**ID:** {pt_id} | **Age:** {age}"
+    
+    # Missing fields indicator
+    missing = obs.get("missing_fields", [])
+    if missing:
+        cc_disp = f"{pt.get('chief_complaint', 'N/A')} *({len(missing)} fields missing)*"
+    else:
+        cc_disp = pt.get("chief_complaint", "N/A")
+        
+    symptoms = pt.get("symptoms", [])
+    symp_disp = ", ".join(symptoms) if symptoms else "None"
+    
+    vitals = pt.get("vitals", {})
+    v_disp = ", ".join([f"**{k}**: {v}" for k, v in vitals.items()]) if vitals else "None"
+    
+    hist = pt.get("history", [])
+    meds = pt.get("medications", [])
+    h_disp = f"**History**: {', '.join(hist) if hist else 'None'}\n\n**Meds**: {', '.join(meds) if meds else 'None'}"
+    
+    q_len = obs.get("queue_length", 0)
+    q_pos = obs.get("queue_position", 0)
+    if not pt_id or pt_id == "N/A":
+        q_display = "📭 Empty Queue — No patients waiting."
+    else:
+        q_display = f"👥 **Queue Length:** {q_len} | **Viewing Position:** {q_pos + 1}"
+        
+    fb = obs.get("previous_action_feedback", "")
+    if custom_error:
+        fb_disp = f"<span class='status-pill error'>❌ Error</span> {custom_error}"
+    elif fb:
+        if "Correct" in fb or "successful" in fb.lower():
+            fb_disp = f"<span class='status-pill success'>✅ Applied</span> {fb}"
+        elif "Incorrect" in fb or "Penalty" in fb:
+            fb_disp = f"<span class='status-pill error'>⚠️ Penalty</span> {fb}"
+        else:
+            fb_disp = f"<span class='status-pill info'>ℹ️ Update</span> {fb}"
+    else:
+        fb_disp = "No recent interactions."
+        
+    return pt_display, cc_disp, symp_disp, v_disp, h_disp, q_display, fb_disp
+
+def build_triage_ui(web_manager, action_fields, metadata, is_chat_env, title, quick_start_md):
+    with gr.Blocks(css=CUSTOM_CSS) as blocks:
+        gr.Markdown(f"# 🏥 {title} — Clinical Dashboard")
+        gr.Markdown("Interactive medical triage environment. Monitor physiological vitals, issue requests for missing lab data, and assign clinical urgency strictly adhering to protocol.")
+        
+        current_state = gr.State({})
+
+        with gr.Row():
+            task_dropdown = gr.Dropdown(
+                choices=["basic-triage", "incomplete-records-triage", "mass-casualty-triage"], 
+                label="Environment Scenario", 
+                value="basic-triage",
+                interactive=True
+            )
+            reset_btn = gr.Button("🔄 Initialize Scenario", variant="primary")
+
+        with gr.Row():
+            with gr.Column(scale=2):
+                with gr.Group(elem_classes="metric-card"):
+                    gr.Markdown("### 🫀 Active Patient Vitals & Presentation")
+                    patient_id_md = gr.Markdown("Loading...")
+                    
+                    with gr.Row():
+                        with gr.Column():
+                            gr.Markdown("**Chief Complaint:**")
+                            cc_md = gr.Markdown("—")
+                        with gr.Column():
+                            gr.Markdown("**Symptoms:**")
+                            symp_md = gr.Markdown("—")
+                            
+                    gr.Markdown("---")
+                    gr.Markdown("**Latest Vitals:**")
+                    vitals_md = gr.Markdown("—")
+                    
+                    gr.Markdown("---")
+                    history_md = gr.Markdown("—")
+                    
+                with gr.Group(elem_classes="metric-card"):
+                    gr.Markdown("### 📊 Admin Queue Status")
+                    queue_md = gr.Markdown("—")
+                    feedback_md = gr.Markdown("—")
+
+            with gr.Column(scale=1):
+                with gr.Group(elem_classes="metric-card"):
+                    gr.Markdown("### ⚡ Triage Actions")
+                    
+                    action_type = gr.Dropdown(
+                        choices=["assign_priority", "request_info", "escalate", "defer", "advance_queue"],
+                        label="Action",
+                        value="assign_priority"
+                    )
+                    
+                    priority = gr.Dropdown(
+                        choices=["immediate", "urgent", "less_urgent", "non_urgent"],
+                        label="Urgency Level",
+                        value="urgent"
+                    )
+                    
+                    info_field = gr.Dropdown(
+                        choices=["vitals", "history", "symptoms", "allergies", "medications"],
+                        label="Request Missing Record Data",
+                        visible=False
+                    )
+
+                    def update_visibility(act):
+                        return [
+                            gr.update(visible=act == "assign_priority"),
+                            gr.update(visible=act == "request_info")
+                        ]
+                        
+                    action_type.change(
+                        fn=update_visibility, 
+                        inputs=[action_type], 
+                        outputs=[priority, info_field]
+                    )
+
+                    submit_btn = gr.Button("📋 Submit Order", variant="primary")
+                    
+                with gr.Group(elem_classes="metric-card"):
+                    gr.Markdown("### 📜 Event Log")
+                    log_md = gr.Markdown("No actions taken during this scenario.")
+
+        async def ui_reset(task_name):
+            try:
+                res = await web_manager.reset_environment({"task_name": task_name})
+                return update_dashboard(res)
+            except Exception as e:
+                return update_dashboard({}, custom_error=str(e))
+
+        async def ui_step(act_type, prio, info_f, pt_state):
+            obs = pt_state.get("observation", {})
+            pt = obs.get("current_patient", {})
+            pt_id = pt.get("patient_id", "") if pt else ""
+            
+            payload = {
+                "action_type": act_type,
+                "patient_id": pt_id
+            }
+            if act_type == "assign_priority":
+                payload["priority_level"] = prio
+            elif act_type == "request_info":
+                payload["info_field"] = info_f
+                
+            try:
+                res = await web_manager.step_environment(payload)
+                return update_dashboard(res)
+            except Exception as e:
+                return update_dashboard(pt_state, custom_error=str(e))
+
+        def update_dashboard(res, custom_error=None):
+            obs = res.get("observation", {})
+            
+            p_id, cc, syp, vit, hst, q_inf, fb = extract_patient_display(obs, custom_error)
+            
+            # Formulate logs
+            logs = getattr(web_manager.episode_state, "action_logs", [])
+            state = web_manager.get_state()
+            reward_sum = state.get("task_state", {}).get("total_reward", 0.0) if state else 0.0
+            
+            log_str = f"**Current Score:** {reward_sum:.2f}\n\n"
+            if not logs:
+                log_str += "No actions yet."
+            else:
+                for log in reversed(logs[-8:]):
+                    d = log.done
+                    r = log.reward
+                    a = log.action.get("action_type", "?")
+                    tar = log.action.get("priority_level") or log.action.get("info_field") or ""
+                    tar = f"({tar})" if tar else ""
+                    pt_ref = log.action.get("patient_id", "?")
+                    st = "🏁 Task Complete" if d else f"Reward {r:.2f}"
+                    log_str += f"- **{a}** {tar} to `{pt_ref}` → {st}\n"
+                    
+            return [
+                res, p_id, cc, syp, vit, hst, q_inf, fb, log_str
+            ]
+
+        outputs = [
+            current_state, patient_id_md, cc_md, symp_md, vitals_md, history_md,
+            queue_md, feedback_md, log_md
+        ]
+        
+        reset_btn.click(fn=ui_reset, inputs=[task_dropdown], outputs=outputs)
+        submit_btn.click(fn=ui_step, inputs=[action_type, priority, info_field, current_state], outputs=outputs)
+
+        # Trigger Reset initially when loading Gradio Dashboard (requires client to mount it)
+        # blocks.load(fn=ui_reset, inputs=[task_dropdown], outputs=outputs)
+
+    return blocks