Redesign for Clinical Speed and implement Advanced Consultation Mode

backend/main.py

@@ -152,7 +152,8 @@ CURRENT MEDICATIONS: {json.dumps(record.get('medications', []))}
 
 Return JSON with "agent_reasoning". 
 CLINICAL CORRELATION: Check if the Triage severity suggests a need for aggressive drugs that might interact with current meds.
-"""{{
+
+{{
   "treatment_verdict": "SAFE",
   "verdict_reason": "one-line verdict explanation",
   "allergy_risks": [{{"substance": "", "risk": "", "severity": "HIGH"}}],
@@ -191,7 +192,8 @@ LABS: {json.dumps(labs)}
 
 Return JSON with "agent_reasoning". 
 CLINICAL CORRELATION: Correlate lab abnormalities with the Triage chief complaint.
-"""{{
+
+{{
   "critical_labs": [{{"name": "", "value": "", "significance": "", "immediate_action": ""}}],
   "abnormal_labs": [{{"name": "", "value": "", "significance": ""}}],
   "lab_patterns": ["pattern across multiple results"],
@@ -213,7 +215,8 @@ VITALS: {json.dumps(record.get('vitals', {}))}
 
 Return JSON with "agent_reasoning". 
 CLINICAL CORRELATION: Synthesize the Triage severity and Lab abnormalities into a cohesive differential diagnosis.
-"""{{
+
+{{
   "differentials": [
     {{
       "diagnosis": "",
@@ -468,6 +471,38 @@ def check_treatment(patient_id: str, body: Dict[str, Any] = Body(...), x_gemini_
     return {"patient_id": patient_id, "proposed_treatment": treatment, "result": result}
 
 
+@app.post("/consult/{patient_id}")
+def consult_team(patient_id: str, body: Dict[str, Any] = Body(...), x_gemini_key: Optional[str] = Header(None)):
+    """
+    Advanced Consultation: Ask the 5-agent team a specific clinical question.
+    """
+    record = next((p for p in PATIENTS if p.get("id") == patient_id), None)
+    if not record:
+        raise HTTPException(404, f"Patient '{patient_id}' not found")
+    
+    question = body.get("question", "")
+    context = body.get("previous_results", {}) # Optional context from previous run
+
+    prompt = f"""You are the lead ED Attending. The doctor has asked the team a question about this patient.
+PATIENT: {json.dumps(record)}
+PREVIOUS FINDINGS: {json.dumps(context)}
+DOCTOR'S QUESTION: "{question}"
+
+Consult your team (Triage, Guardian, Pathologist, Physician) and provide a concise, expert clinical response.
+Include 'team_consensus' and 'specialist_notes' for each relevant agent.
+Return ONLY raw JSON:
+{{
+  "answer": "Expert answer...",
+  "team_consensus": "agreement/disagreement summary",
+  "specialist_insights": [
+    {{"agent": "Guardian", "note": "..."}},
+    {{"agent": "Pathologist", "note": "..."}}
+  ]
+}}"""
+    r = _gemini(prompt, override_key=x_gemini_key)
+    return {"result": r}
+
+
 # ── MCP Tool Manifest ─────────────────────────────────────────────────────────
 
 @app.get("/mcp/tools")

frontend/dist/assets/index-DKXwe-v6.css

@@ -0,0 +1 @@
+@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap";:root{--bg-base: #f0f4f8;--bg-surface: #ffffff;--bg-elevated: #ffffff;--bg-card: #ffffff;--border-subtle: rgba(15, 23, 42, .08);--border-default: rgba(15, 23, 42, .12);--border-accent: rgba(14, 165, 233, .3);--red-critical: #e11d48;--red-glow: rgba(225, 29, 72, .2);--amber-warning: #f59e0b;--amber-glow: rgba(245, 158, 11, .2);--green-safe: #10b981;--green-glow: rgba(16, 185, 129, .2);--blue-accent: #0284c7;--blue-glow: rgba(2, 132, 199, .2);--purple-ai: #8b5cf6;--text-primary: #0f172a;--text-secondary: #475569;--text-tertiary: #64748b;--font-sans: "Inter", system-ui, sans-serif;--font-mono: "JetBrains Mono", monospace}@keyframes pulse-red{0%{box-shadow:0 0 #e11d4866}70%{box-shadow:0 0 0 10px #e11d4800}to{box-shadow:0 0 #e11d4800}}@keyframes directive-glow{0%{border-color:var(--blue-accent)}50%{border-color:#fff}to{border-color:var(--blue-accent)}}@keyframes log-slide{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.pulse-critical{animation:pulse-red 2s infinite;border:1.5px solid var(--red-critical)!important}.directive-banner{background:var(--blue-accent);color:#fff;border:2px solid var(--blue-accent);animation:directive-glow 3s infinite}.log-entry{animation:log-slide .3s ease-out forwards}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;background:var(--bg-base);color:var(--text-primary);font-family:var(--font-sans);font-size:14px;-webkit-font-smoothing:antialiased}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-default);border-radius:99px}@keyframes ekg{0%{stroke-dashoffset:1000}to{stroke-dashoffset:0}}@keyframes pulse-red{0%,to{opacity:1;box-shadow:0 0 0 0 var(--red-glow)}50%{opacity:.8;box-shadow:0 0 0 8px transparent}}@keyframes pulse-amber{0%,to{box-shadow:0 0 0 0 var(--amber-glow)}50%{box-shadow:0 0 0 6px transparent}}@keyframes fade-up{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes glow-blue{0%,to{box-shadow:0 0 12px var(--blue-glow)}50%{box-shadow:0 0 24px var(--blue-glow),0 0 4px var(--blue-accent)}}@keyframes pulse-blue-btn{0%{box-shadow:0 0 #0a84ff99}70%{box-shadow:0 0 0 10px #0a84ff00}to{box-shadow:0 0 #0a84ff00}}@keyframes slide-in-right{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes heartbeat{0%,to{transform:scale(1)}14%{transform:scale(1.15)}28%{transform:scale(1)}42%{transform:scale(1.1)}70%{transform:scale(1)}}.card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:12px}.card-elevated{background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:12px}.glass{background:#0d1b2eb3;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-default);border-radius:12px}.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.badge-critical{background:#ff2d5526;color:var(--red-critical);border:1px solid rgba(255,45,85,.3);animation:pulse-red 2s infinite}.badge-moderate{background:#ff9f0a1f;color:var(--amber-warning);border:1px solid rgba(255,159,10,.3)}.badge-stable{background:#30d1581a;color:var(--green-safe);border:1px solid rgba(48,209,88,.25)}.badge-unknown{background:#8e8e931a;color:var(--text-secondary);border:1px solid rgba(142,142,147,.2)}.verdict-safe{background:#30d15826;color:var(--green-safe);border:1px solid rgba(48,209,88,.3)}.verdict-caution{background:#ff9f0a26;color:var(--amber-warning);border:1px solid rgba(255,159,10,.3);animation:pulse-amber 2s infinite}.verdict-contraindicated{background:#ff2d5526;color:var(--red-critical);border:1px solid rgba(255,45,85,.4);animation:pulse-red 1.5s infinite}.verdict-not_evaluated{background:#8e8e931a;color:var(--text-secondary);border:1px solid rgba(142,142,147,.2)}.agent-idle{border-color:var(--border-subtle)}.agent-working{border-color:var(--blue-accent);animation:glow-blue 1.2s infinite}.agent-complete{border-color:var(--green-safe);box-shadow:0 0 10px var(--green-glow)}.agent-error{border-color:var(--red-critical)}.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border-radius:8px;border:none;cursor:pointer;font-family:var(--font-sans);font-weight:600;font-size:13px;background:var(--blue-accent);color:#fff;transition:opacity .15s,transform .1s}.btn-primary:hover:not(:disabled){opacity:.85;transform:translateY(-1px)}.btn-primary:active{transform:translateY(0)}.btn-primary:disabled{opacity:.35;cursor:not-allowed}.btn-danger{background:linear-gradient(135deg,#c0392b,var(--red-critical));color:#fff;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border-radius:8px;border:none;cursor:pointer;font-family:var(--font-sans);font-weight:700;font-size:14px;letter-spacing:.02em;box-shadow:0 4px 20px #ff2d554d;transition:box-shadow .2s,transform .1s;width:100%}.btn-danger:hover:not(:disabled){box-shadow:0 6px 30px #ff2d5580;transform:translateY(-1px)}.btn-danger:disabled{opacity:.3;cursor:not-allowed;transform:none}.btn-ghost{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:7px;border:1px solid var(--border-default);background:transparent;color:var(--text-secondary);cursor:pointer;font-family:var(--font-sans);font-size:12px;font-weight:500;transition:border-color .15s,color .15s,background .15s}.btn-ghost:hover{border-color:var(--blue-accent);color:var(--blue-accent);background:var(--blue-glow)}.btn-demo{animation:pulse-blue-btn 2s infinite}.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.2);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}.fade-up{animation:fade-up .35s ease both}.fade-in{animation:fade-in .3s ease both}.slide-in{animation:slide-in-right .35s ease both}.mono{font-family:var(--font-mono)}.input-dark{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:8px;color:var(--text-primary);padding:9px 12px;font-family:var(--font-sans);font-size:13px;width:100%;outline:none;transition:border-color .15s}.input-dark:focus{border-color:var(--blue-accent);box-shadow:0 0 0 3px #0a84ff26}.input-dark::-moz-placeholder{color:var(--text-tertiary)}.input-dark::placeholder{color:var(--text-tertiary)}.divider{height:1px;background:var(--border-subtle)}.welcome-screen{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 0%,rgba(10,132,255,.08) 0%,transparent 70%),var(--bg-base);text-align:center;padding:40px 20px}

frontend/dist/assets/index-kcxpakQ_.css

@@ -1 +0,0 @@
-@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap";:root{--bg-base: #f0f4f8;--bg-surface: #ffffff;--bg-elevated: #ffffff;--bg-card: #ffffff;--border-subtle: rgba(15, 23, 42, .08);--border-default: rgba(15, 23, 42, .12);--border-accent: rgba(14, 165, 233, .3);--red-critical: #e11d48;--red-glow: rgba(225, 29, 72, .2);--amber-warning: #f59e0b;--amber-glow: rgba(245, 158, 11, .2);--green-safe: #10b981;--green-glow: rgba(16, 185, 129, .2);--blue-accent: #0284c7;--blue-glow: rgba(2, 132, 199, .2);--purple-ai: #8b5cf6;--text-primary: #0f172a;--text-secondary: #475569;--text-tertiary: #64748b;--font-sans: "Inter", system-ui, sans-serif;--font-mono: "JetBrains Mono", monospace}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;background:var(--bg-base);color:var(--text-primary);font-family:var(--font-sans);font-size:14px;-webkit-font-smoothing:antialiased}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-default);border-radius:99px}@keyframes ekg{0%{stroke-dashoffset:1000}to{stroke-dashoffset:0}}@keyframes pulse-red{0%,to{opacity:1;box-shadow:0 0 0 0 var(--red-glow)}50%{opacity:.8;box-shadow:0 0 0 8px transparent}}@keyframes pulse-amber{0%,to{box-shadow:0 0 0 0 var(--amber-glow)}50%{box-shadow:0 0 0 6px transparent}}@keyframes fade-up{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes glow-blue{0%,to{box-shadow:0 0 12px var(--blue-glow)}50%{box-shadow:0 0 24px var(--blue-glow),0 0 4px var(--blue-accent)}}@keyframes pulse-blue-btn{0%{box-shadow:0 0 #0a84ff99}70%{box-shadow:0 0 0 10px #0a84ff00}to{box-shadow:0 0 #0a84ff00}}@keyframes slide-in-right{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes heartbeat{0%,to{transform:scale(1)}14%{transform:scale(1.15)}28%{transform:scale(1)}42%{transform:scale(1.1)}70%{transform:scale(1)}}.card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:12px}.card-elevated{background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:12px}.glass{background:#0d1b2eb3;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-default);border-radius:12px}.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.badge-critical{background:#ff2d5526;color:var(--red-critical);border:1px solid rgba(255,45,85,.3);animation:pulse-red 2s infinite}.badge-moderate{background:#ff9f0a1f;color:var(--amber-warning);border:1px solid rgba(255,159,10,.3)}.badge-stable{background:#30d1581a;color:var(--green-safe);border:1px solid rgba(48,209,88,.25)}.badge-unknown{background:#8e8e931a;color:var(--text-secondary);border:1px solid rgba(142,142,147,.2)}.verdict-safe{background:#30d15826;color:var(--green-safe);border:1px solid rgba(48,209,88,.3)}.verdict-caution{background:#ff9f0a26;color:var(--amber-warning);border:1px solid rgba(255,159,10,.3);animation:pulse-amber 2s infinite}.verdict-contraindicated{background:#ff2d5526;color:var(--red-critical);border:1px solid rgba(255,45,85,.4);animation:pulse-red 1.5s infinite}.verdict-not_evaluated{background:#8e8e931a;color:var(--text-secondary);border:1px solid rgba(142,142,147,.2)}.agent-idle{border-color:var(--border-subtle)}.agent-working{border-color:var(--blue-accent);animation:glow-blue 1.2s infinite}.agent-complete{border-color:var(--green-safe);box-shadow:0 0 10px var(--green-glow)}.agent-error{border-color:var(--red-critical)}.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border-radius:8px;border:none;cursor:pointer;font-family:var(--font-sans);font-weight:600;font-size:13px;background:var(--blue-accent);color:#fff;transition:opacity .15s,transform .1s}.btn-primary:hover:not(:disabled){opacity:.85;transform:translateY(-1px)}.btn-primary:active{transform:translateY(0)}.btn-primary:disabled{opacity:.35;cursor:not-allowed}.btn-danger{background:linear-gradient(135deg,#c0392b,var(--red-critical));color:#fff;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border-radius:8px;border:none;cursor:pointer;font-family:var(--font-sans);font-weight:700;font-size:14px;letter-spacing:.02em;box-shadow:0 4px 20px #ff2d554d;transition:box-shadow .2s,transform .1s;width:100%}.btn-danger:hover:not(:disabled){box-shadow:0 6px 30px #ff2d5580;transform:translateY(-1px)}.btn-danger:disabled{opacity:.3;cursor:not-allowed;transform:none}.btn-ghost{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:7px;border:1px solid var(--border-default);background:transparent;color:var(--text-secondary);cursor:pointer;font-family:var(--font-sans);font-size:12px;font-weight:500;transition:border-color .15s,color .15s,background .15s}.btn-ghost:hover{border-color:var(--blue-accent);color:var(--blue-accent);background:var(--blue-glow)}.btn-demo{animation:pulse-blue-btn 2s infinite}.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.2);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}.fade-up{animation:fade-up .35s ease both}.fade-in{animation:fade-in .3s ease both}.slide-in{animation:slide-in-right .35s ease both}.mono{font-family:var(--font-mono)}.input-dark{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:8px;color:var(--text-primary);padding:9px 12px;font-family:var(--font-sans);font-size:13px;width:100%;outline:none;transition:border-color .15s}.input-dark:focus{border-color:var(--blue-accent);box-shadow:0 0 0 3px #0a84ff26}.input-dark::-moz-placeholder{color:var(--text-tertiary)}.input-dark::placeholder{color:var(--text-tertiary)}.divider{height:1px;background:var(--border-subtle)}.welcome-screen{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 0%,rgba(10,132,255,.08) 0%,transparent 70%),var(--bg-base);text-align:center;padding:40px 20px}

frontend/dist/index.html

@@ -7,8 +7,8 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
     <title>CodeBlue Context</title>
-    <script type="module" crossorigin src="/assets/index-CHty_9PA.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-kcxpakQ_.css">
+    <script type="module" crossorigin src="/assets/index-DJox2Dzs.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-DKXwe-v6.css">
   </head>
   <body>
     <div id="root"></div>

frontend/src/AgentPanel.jsx

@@ -204,17 +204,26 @@ export function AgentPanel({ agentStatuses, agentResults, onRun, patient, runnin
 
         {patient && (
           <>
-            {/* Patient summary strip */}
-            <div style={{
-              padding: '8px 12px', borderRadius: 8, marginBottom: 14,
-              background: 'var(--bg-surface)', border: '1px solid var(--border-subtle)',
-              fontSize: 12, color: 'var(--text-secondary)', display: 'flex', gap: 12,
-            }}>
-              <span style={{ fontWeight: 700, color: 'var(--text-primary)' }}>{patient.display_name}</span>
-              <span>{patient.age}y {patient.gender}</span>
-              <span style={{ marginLeft: 'auto' }}>
-                <span className={`badge badge-${patient.risk_level || 'stable'}`}>{patient.risk_level}</span>
-              </span>
+            {/* Clinical Focus Selector */}
+            <div style={{ marginBottom: 14 }}>
+              <p style={{ fontSize: 9, fontWeight: 800, color: 'var(--text-tertiary)', textTransform: 'uppercase', marginBottom: 6 }}>Clinical Focus</p>
+              <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
+                {['General', 'Cardiac', 'Trauma', 'Respiratory', 'Neuro'].map(f => (
+                  <div
+                    key={f}
+                    onClick={() => !running && setFocus?.(f)}
+                    style={{
+                      padding: '4px 10px', borderRadius: 20, fontSize: 10, fontWeight: 700, cursor: 'pointer',
+                      background: focus === f ? 'var(--blue-accent)' : 'var(--bg-surface)',
+                      color: focus === f ? '#fff' : 'var(--text-secondary)',
+                      border: focus === f ? 'none' : '1px solid var(--border-subtle)',
+                      transition: 'all 0.2s'
+                    }}
+                  >
+                    {f}
+                  </div>
+                ))}
+              </div>
             </div>
 
             {/* Agent rows */}
@@ -229,10 +238,10 @@ export function AgentPanel({ agentStatuses, agentResults, onRun, patient, runnin
             ))}
 
             {/* Run button */}
-            <button className="btn-danger" style={{ marginTop: 10 }} onClick={onRun} disabled={running}>
+            <button className="btn-danger pulse-on-hover" style={{ marginTop: 10, width: '100%' }} onClick={onRun} disabled={running}>
               {running
-                ? <><div className="spinner" /> Analyzing...</>
-                : <><Zap size={15} /> Generate Emergency Snapshot</>}
+                ? <><div className="spinner" /> AI Agents Orchestrating...</>
+                : <><Zap size={15} /> Analyze Patient Record</>}
             </button>
 
             {/* Collaboration Log */}

frontend/src/App.jsx

@@ -6,6 +6,7 @@ import { PatientPanel } from './PatientPanel';
 import { AgentPanel } from './AgentPanel';
 import { BriefPanel } from './BriefPanel';
 import { ApiKeyModal } from './ApiKeyModal';
+import ConsultPanel from './ConsultPanel';
 
 const API = import.meta.env.VITE_API_BASE || '';
 
@@ -29,6 +30,9 @@ export default function App() {
   const [agentResults, setAgentResults] = useState({});
   const [briefData, setBriefData] = useState(null);
 
+  const [activeTab, setActiveTab] = useState('orchestrate');
+  const [focus, setFocus] = useState('General');
+
   // Load patients
   const fetchPatients = useCallback(async () => {
     setPatientsLoading(true);
@@ -50,6 +54,7 @@ export default function App() {
     setBriefData(null);
     setAgentStatuses(INITIAL_STATUSES);
     setAgentResults({});
+    setActiveTab('orchestrate');
   };
 
   // Upload patient JSON
@@ -181,19 +186,11 @@ export default function App() {
             <span style={{ color: 'var(--green-safe)', fontWeight: 700 }}>●</span> System Online
           </span>
           <span>{patients.length} patients</span>
-          <div style={{
-            padding: '4px 12px', borderRadius: 99,
-            background: 'rgba(48,209,88,0.08)',
-            border: '1px solid rgba(48,209,88,0.2)',
-            color: 'var(--green-safe)', fontWeight: 700,
-          }}>
-            15 min → &lt;10 sec
-          </div>
         </div>
       </header>
 
       {/* 3-column layout */}
-      <div style={{ flex: 1, display: 'grid', gridTemplateColumns: '240px 1fr 1fr', overflow: 'hidden' }}>
+      <div style={{ flex: 1, display: 'grid', gridTemplateColumns: '240px 420px 1fr', overflow: 'hidden' }}>
 
         {/* Left: Patient List */}
         <div style={{ borderRight: '1px solid var(--border-subtle)', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
@@ -206,15 +203,50 @@ export default function App() {
           />
         </div>
 
-        {/* Center: Agent Orchestration */}
+        {/* Center: Tabs + Content */}
         <div style={{ borderRight: '1px solid var(--border-subtle)', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
-          <AgentPanel
-            patient={selected}
-            agentStatuses={agentStatuses}
-            agentResults={agentResults}
-            onRun={runOrchestration}
-            running={running}
-          />
+          <div style={{ display: 'flex', background: 'var(--bg-base)', padding: '4px 4px 0', borderBottom: '1px solid var(--border-subtle)' }}>
+            <button 
+              onClick={() => setActiveTab('orchestrate')}
+              style={{
+                flex: 1, padding: '10px', fontSize: 11, fontWeight: 700, cursor: 'pointer', border: 'none',
+                background: activeTab === 'orchestrate' ? 'var(--bg-surface)' : 'transparent',
+                color: activeTab === 'orchestrate' ? 'var(--blue-accent)' : 'var(--text-secondary)',
+                borderRadius: '8px 8px 0 0', borderBottom: activeTab === 'orchestrate' ? '2px solid var(--blue-accent)' : 'none'
+              }}
+            >
+              ORCHESTRATION
+            </button>
+            <button 
+              onClick={() => setActiveTab('consult')}
+              style={{
+                flex: 1, padding: '10px', fontSize: 11, fontWeight: 700, cursor: 'pointer', border: 'none',
+                background: activeTab === 'consult' ? 'var(--bg-surface)' : 'transparent',
+                color: activeTab === 'consult' ? 'var(--purple-ai)' : 'var(--text-secondary)',
+                borderRadius: '8px 8px 0 0', borderBottom: activeTab === 'consult' ? '2px solid var(--purple-ai)' : 'none'
+              }}
+            >
+              ADVANCED CONSULT
+            </button>
+          </div>
+          <div style={{ flex: 1, overflow: 'hidden' }}>
+            {activeTab === 'orchestrate' ? (
+              <AgentPanel
+                patient={selected}
+                agentStatuses={agentStatuses}
+                agentResults={agentResults}
+                onRun={runOrchestration}
+                running={running}
+                focus={focus}
+                setFocus={setFocus}
+              />
+            ) : (
+              <ConsultPanel 
+                patientId={selected?.id} 
+                previousResults={agentResults} 
+              />
+            )}
+          </div>
         </div>
 
         {/* Right: Emergency Brief */}

frontend/src/BriefPanel.jsx

@@ -166,43 +166,48 @@ export function BriefPanel({ data, patient }) {
       </div>
 
       <div style={{ flex: 1, overflowY: 'auto', padding: '12px 14px' }}>
-        {/* Triage Banner */}
-        {triage.severity_label && (
-          <div className="fade-up" style={{
-            padding: '10px 14px', borderRadius: 10, marginBottom: 14,
-            background: severityColor + '12', border: `2px solid ${severityColor}40`,
-            display: 'flex', alignItems: 'center', gap: 10,
-          }}>
-            <div style={{ fontSize: 22, fontWeight: 900, color: severityColor, fontFamily: 'var(--font-mono)' }}>
-              ESI {triage.severity}
-            </div>
-            <div>
-              <div style={{ fontSize: 12, fontWeight: 700, color: severityColor }}>{triage.severity_label}</div>
-              <div style={{ fontSize: 11, color: 'var(--text-secondary)' }}>{triage.chief_complaint}</div>
-            </div>
-          </div>
-        )}
-
-        {/* Primary Objective Banner */}
+        {/* Primary Clinical Directive */}
         {action.primary_objective && (
-          <div className="fade-up" style={{
-            padding: '12px 14px', borderRadius: 10, marginBottom: 14,
-            background: 'var(--blue-accent)', border: 'none',
-            color: '#fff', boxShadow: '0 4px 12px rgba(10, 132, 255, 0.3)'
+          <div className="fade-up directive-banner" style={{
+            padding: '14px 18px', borderRadius: 12, marginBottom: 20,
+            boxShadow: '0 8px 24px rgba(2, 132, 199, 0.25)',
+            position: 'relative', overflow: 'hidden'
           }}>
-            <div style={{ fontSize: 9, fontWeight: 800, textTransform: 'uppercase', opacity: 0.8, letterSpacing: '0.08em', marginBottom: 4 }}>
-              Primary Clinical Objective
+            <div style={{ fontSize: 9, fontWeight: 900, textTransform: 'uppercase', opacity: 0.9, letterSpacing: '0.12em', marginBottom: 6 }}>
+              Primary Clinical Directive
             </div>
-            <div style={{ fontSize: 14, fontWeight: 700, lineHeight: 1.4 }}>
+            <div style={{ fontSize: 16, fontWeight: 800, lineHeight: 1.3 }}>
               {action.primary_objective}
             </div>
+            <Zap size={40} style={{ position: 'absolute', right: -10, bottom: -10, opacity: 0.1, transform: 'rotate(15deg)' }} />
           </div>
         )}
 
-        {/* Critical Alerts */}
+        {/* ESI & Status Summary */}
+        <div style={{ display: 'flex', gap: 10, marginBottom: 20 }}>
+           <div style={{ 
+             flex: 1, background: severityColor + '15', border: `2px solid ${severityColor}`, 
+             borderRadius: 12, padding: '12px', textAlign: 'center' 
+           }}>
+             <div style={{ fontSize: 9, fontWeight: 800, color: severityColor, textTransform: 'uppercase' }}>ESI Severity</div>
+             <div style={{ fontSize: 28, fontWeight: 900, color: severityColor }}>{triage.severity || '?'}</div>
+             <div style={{ fontSize: 10, fontWeight: 700, color: severityColor }}>{triage.severity_label}</div>
+           </div>
+           <div style={{ 
+             flex: 1, background: 'var(--bg-base)', border: '1px solid var(--border-subtle)', 
+             borderRadius: 12, padding: '12px', display: 'flex', flexDirection: 'column', justifyContent: 'center'
+           }}>
+             <div style={{ fontSize: 9, fontWeight: 800, color: 'var(--text-tertiary)', textTransform: 'uppercase' }}>Disposition</div>
+             <div style={{ fontSize: 14, fontWeight: 800, color: 'var(--blue-accent)' }}>{action.disposition || 'PENDING'}</div>
+           </div>
+        </div>
+
+        {/* Threat Detection */}
         {(triage.time_critical_flags?.length > 0 || triage.do_not_delay?.length > 0) && (
-          <Section title="Time-Critical Findings" icon={<AlertTriangle size={12}/>} accent="var(--red-critical)">
-            {(triage.time_critical_flags || []).map((f, i) => <AlertBox key={i} text={f} severity="critical" />)}
+          <Section title="Immediate Threats" icon={<ShieldAlert size={14}/>} accent="var(--red-critical)">
+            <div className="pulse-critical" style={{ borderRadius: 8, padding: 4 }}>
+              {(triage.time_critical_flags || []).map((f, i) => <AlertBox key={i} text={f} severity="critical" />)}
+            </div>
             {(triage.do_not_delay || []).map((f, i) => <AlertBox key={i} text={`⚡ NOW: ${f}`} severity="warning" />)}
           </Section>
         )}
@@ -222,21 +227,19 @@ export function BriefPanel({ data, patient }) {
           </Section>
         )}
 
-        {/* Multi-Agent Correlation Alerts */}
+        {/* Team Insights */}
         {action.agent_reasoning && (
-          <Section title="Team Collaboration Insights" icon={<Zap size={12}/>} accent="var(--purple-ai)">
-            <div style={{ padding: '8px 12px', borderRadius: 8, background: 'var(--bg-card)', border: '1px solid var(--purple-ai)30' }}>
-              <div style={{ fontSize: 9, fontWeight: 800, color: 'var(--purple-ai)', textTransform: 'uppercase', marginBottom: 6 }}>
-                Orchestration Consensus
-              </div>
-              <p style={{ fontSize: 11, color: 'var(--text-primary)', lineHeight: 1.5, fontStyle: 'italic' }}>
-                "{action.agent_reasoning[0]}"
-              </p>
-              {action.agent_reasoning.length > 1 && (
-                 <p style={{ fontSize: 11, color: 'var(--text-secondary)', marginTop: 4, borderTop: '1px solid var(--border-subtle)', paddingTop: 4 }}>
-                   Hand-off: {action.agent_reasoning[1]}
-                 </p>
-              )}
+          <Section title="Expert Correlation" icon={<Zap size={14}/>} accent="var(--purple-ai)">
+            <div style={{ 
+              padding: '12px', borderRadius: 10, background: 'var(--purple-ai)05', 
+              border: '1px dashed var(--purple-ai)40', fontSize: 11, lineHeight: 1.5 
+            }}>
+              <p style={{ fontWeight: 700, color: 'var(--purple-ai)', marginBottom: 4 }}>TEAM CONSENSUS</p>
+              {action.agent_reasoning.map((r, i) => (
+                <p key={i} style={{ marginBottom: 4, display: 'flex', gap: 6 }}>
+                  <span style={{ color: 'var(--purple-ai)' }}>•</span> {r}
+                </p>
+              ))}
             </div>
           </Section>
         )}

frontend/src/ConsultPanel.jsx

@@ -0,0 +1,148 @@
+import { useState } from 'react';
+import { MessageSquare, Send, Bot, User, Zap, ShieldAlert, FlaskConical, Stethoscope } from 'lucide-react';
+
+const API_BASE = import.meta.env.VITE_API_BASE || '';
+
+export default function ConsultPanel({ patientId, previousResults }) {
+  const [messages, setMessages] = useState([
+    { role: 'assistant', content: "Hello Doctor. I've synthesized the team's findings. You can now ask us specific clinical questions about this case.", type: 'initial' }
+  ]);
+  const [input, setInput] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const sendMessage = async () => {
+    if (!input.trim() || loading || !patientId) return;
+    
+    const userMsg = input.trim();
+    setMessages(prev => [...prev, { role: 'user', content: userMsg }]);
+    setInput('');
+    setLoading(true);
+
+    try {
+      const geminiKey = localStorage.getItem('gemini_key');
+      const headers = { 'Content-Type': 'application/json' };
+      if (geminiKey) headers['x-gemini-key'] = geminiKey;
+
+      const res = await fetch(`${API_BASE}/consult/${patientId}`, {
+        method: 'POST',
+        headers,
+        body: JSON.stringify({ 
+          question: userMsg,
+          previous_results: previousResults 
+        }),
+      });
+      
+      const data = await res.json();
+      const result = data.result;
+
+      if (result) {
+        setMessages(prev => [...prev, { 
+          role: 'assistant', 
+          content: result.answer,
+          insights: result.specialist_insights,
+          consensus: result.team_consensus
+        }]);
+      } else {
+        throw new Error('No result');
+      }
+    } catch (err) {
+      setMessages(prev => [...prev, { role: 'assistant', content: "I'm sorry, I couldn't reach the agent team. Please verify your API key." }]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', background: 'var(--bg-surface)' }}>
+      <div style={{ padding: '14px 16px', borderBottom: '1px solid var(--border-subtle)', background: 'var(--bg-surface)' }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          <Bot size={18} color="var(--purple-ai)" />
+          <span style={{ fontWeight: 700, fontSize: 13, color: 'var(--text-primary)' }}>Multi-Agent Consultation</span>
+        </div>
+      </div>
+
+      <div style={{ flex: 1, overflowY: 'auto', padding: '16px', display: 'flex', flexDirection: 'column', gap: 16 }}>
+        {messages.map((m, i) => (
+          <div key={i} style={{ 
+            alignSelf: m.role === 'user' ? 'flex-end' : 'flex-start',
+            maxWidth: '85%',
+            display: 'flex', gap: 10,
+            flexDirection: m.role === 'user' ? 'row-reverse' : 'row'
+          }}>
+            <div style={{ 
+              width: 28, height: 28, borderRadius: '50%', 
+              background: m.role === 'user' ? 'var(--blue-accent)' : 'var(--purple-ai)15',
+              display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
+              color: m.role === 'user' ? '#fff' : 'var(--purple-ai)'
+            }}>
+              {m.role === 'user' ? <User size={14} /> : <Bot size={14} />}
+            </div>
+            
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+              <div style={{ 
+                padding: '10px 14px', borderRadius: 12,
+                background: m.role === 'user' ? 'var(--blue-accent)' : 'var(--bg-base)',
+                color: m.role === 'user' ? '#fff' : 'var(--text-primary)',
+                fontSize: 12, lineHeight: 1.5,
+                boxShadow: m.role === 'user' ? '0 2px 8px rgba(2, 132, 199, 0.2)' : 'none'
+              }}>
+                {m.content}
+              </div>
+
+              {m.insights && (
+                <div style={{ display: 'flex', flexDirection: 'column', gap: 4, marginTop: 4 }}>
+                  {m.insights.map((ins, j) => (
+                    <div key={j} style={{ 
+                      fontSize: 10, padding: '6px 8px', borderRadius: 6, 
+                      background: 'var(--bg-surface)', border: '1px solid var(--border-subtle)',
+                      color: 'var(--text-secondary)', display: 'flex', gap: 6
+                    }}>
+                      <span style={{ fontWeight: 800, color: 'var(--purple-ai)' }}>{ins.agent}:</span>
+                      <span>{ins.note}</span>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+        ))}
+        {loading && (
+          <div style={{ alignSelf: 'flex-start', display: 'flex', gap: 10 }}>
+             <div className="spinner" style={{ width: 14, height: 14 }} />
+             <span style={{ fontSize: 11, color: 'var(--text-tertiary)' }}>Consulting agents...</span>
+          </div>
+        )}
+      </div>
+
+      <div style={{ padding: 16, borderTop: '1px solid var(--border-subtle)' }}>
+        <div style={{ position: 'relative' }}>
+          <input 
+            type="text" 
+            placeholder="Ask the team a question..."
+            value={input}
+            onChange={e => setInput(e.target.value)}
+            onKeyDown={e => e.key === 'Enter' && sendMessage()}
+            style={{
+              width: '100%', padding: '12px 45px 12px 14px', borderRadius: 10,
+              border: '1px solid var(--border-default)', outline: 'none',
+              fontSize: 12, transition: 'all 0.2s',
+              background: 'var(--bg-base)'
+            }}
+          />
+          <button 
+            onClick={sendMessage}
+            disabled={loading || !input.trim()}
+            style={{
+              position: 'absolute', right: 8, top: '50%', transform: 'translateY(-50%)',
+              background: 'var(--blue-accent)', color: '#fff', border: 'none',
+              width: 28, height: 28, borderRadius: 6, display: 'flex', alignItems: 'center', justifyContent: 'center',
+              cursor: 'pointer', opacity: (loading || !input.trim()) ? 0.5 : 1
+            }}
+          >
+            <Send size={14} />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}