Spaces:
Sleeping
Sleeping
| // AgentPanel.jsx — Center orchestration column | |
| import { useState } from 'react'; | |
| import { ShieldAlert, FlaskConical, Stethoscope, ListChecks, Zap, CheckCircle, Loader, Circle, ChevronDown, ChevronUp } from 'lucide-react'; | |
| const AGENTS = [ | |
| { key: 'triage', label: 'Triage Agent', icon: <Zap size={14}/>, desc: 'Severity classification & chief complaint' }, | |
| { key: 'contraindication', label: 'Contraindication Guardian', icon: <ShieldAlert size={14}/>, desc: 'Drug interactions & allergy risks' }, | |
| { key: 'labs', label: 'Lab Interpreter', icon: <FlaskConical size={14}/>, desc: 'Critical lab findings & patterns' }, | |
| { key: 'differentials', label: 'Differential Diagnosis', icon: <Stethoscope size={14}/>, desc: 'Top 3 differentials from evidence' }, | |
| { key: 'action_protocol', label: 'Action Protocol', icon: <ListChecks size={14}/>, desc: 'Immediate ordered steps & disposition' }, | |
| ]; | |
| const THINKING_MESSAGES = { | |
| triage: "Analyzing vitals and identifying life-threats...", | |
| contraindication: "Scanning history for high-risk medication overlaps...", | |
| labs: "Interpreting metabolic panels and blood gases...", | |
| differentials: "Cross-referencing symptoms with clinical evidence...", | |
| action_protocol: "Synthesizing final emergency stabilization steps...", | |
| }; | |
| function StatusIcon({ status }) { | |
| if (status === 'working') return <div className="spinner" />; | |
| if (status === 'complete') return <CheckCircle size={15} color="var(--green-safe)" />; | |
| if (status === 'error') return <Circle size={15} color="var(--red-critical)" />; | |
| return <Circle size={15} color="var(--text-tertiary)" />; | |
| } | |
| function AgentRow({ agent, status, result, expanded, onToggle }) { | |
| const cls = status === 'idle' ? 'agent-idle' | |
| : status === 'working' ? 'agent-working' | |
| : status === 'complete' ? 'agent-complete' | |
| : 'agent-error'; | |
| const hasResult = result && status === 'complete'; | |
| return ( | |
| <div className={`card ${cls}`} style={{ marginBottom: 8, transition: 'all 0.3s' }}> | |
| <div | |
| onClick={hasResult ? onToggle : undefined} | |
| style={{ | |
| display: 'flex', alignItems: 'center', gap: 10, padding: '10px 14px', | |
| cursor: hasResult ? 'pointer' : 'default', | |
| }} | |
| > | |
| <div style={{ | |
| width: 28, height: 28, borderRadius: 7, | |
| background: 'rgba(255,255,255,0.04)', | |
| display: 'flex', alignItems: 'center', justifyContent: 'center', | |
| color: status === 'complete' ? 'var(--green-safe)' : status === 'working' ? 'var(--blue-accent)' : 'var(--text-tertiary)', | |
| }}> | |
| {agent.icon} | |
| </div> | |
| <div style={{ flex: 1, minWidth: 0 }}> | |
| <div style={{ fontSize: 12, fontWeight: 600, color: status === 'idle' ? 'var(--text-secondary)' : 'var(--text-primary)' }}> | |
| {agent.label} | |
| </div> | |
| <div style={{ fontSize: 10, color: status === 'working' ? 'var(--blue-accent)' : 'var(--text-tertiary)', fontWeight: status === 'working' ? 600 : 400 }}> | |
| {status === 'working' ? THINKING_MESSAGES[agent.key] : agent.desc} | |
| </div> | |
| </div> | |
| <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}> | |
| <StatusIcon status={status} /> | |
| {hasResult && (expanded ? <ChevronUp size={12} color="var(--text-tertiary)"/> : <ChevronDown size={12} color="var(--text-tertiary)"/>)} | |
| </div> | |
| </div> | |
| {hasResult && expanded && ( | |
| <div style={{ padding: '0 14px 12px', borderTop: '1px solid var(--border-subtle)', paddingTop: 10 }} className="fade-in"> | |
| <AgentResultPreview agentKey={agent.key} result={result} /> | |
| </div> | |
| )} | |
| </div> | |
| ); | |
| } | |
| function AgentResultPreview({ agentKey, result }) { | |
| const style = { fontSize: 11, color: 'var(--text-secondary)', lineHeight: 1.6 }; | |
| const tag = (text, color) => ( | |
| <span style={{ background: color + '20', color, border: `1px solid ${color}40`, borderRadius: 4, padding: '1px 6px', fontSize: 10, fontWeight: 700, marginRight: 4 }}> | |
| {text} | |
| </span> | |
| ); | |
| if (agentKey === 'triage') return ( | |
| <div style={style}> | |
| {tag(`ESI ${result.severity}: ${result.severity_label}`, | |
| result.severity <= 2 ? 'var(--red-critical)' : result.severity === 3 ? 'var(--amber-warning)' : 'var(--green-safe)')} | |
| <p style={{ marginTop: 6 }}>{result.chief_complaint}</p> | |
| {(result.time_critical_flags || []).map((f, i) => <p key={i}>⚡ {f}</p>)} | |
| {result.agent_reasoning && ( | |
| <div style={{ marginTop: 8, padding: 8, background: 'var(--bg-base)', borderRadius: 6, borderLeft: '3px solid var(--blue-accent)' }}> | |
| <p style={{ fontSize: 10, fontWeight: 700, marginBottom: 4, color: 'var(--text-primary)' }}>AGENT REASONING</p> | |
| {result.agent_reasoning.map((r, i) => <p key={i} style={{ fontSize: 10 }}>• {r}</p>)} | |
| </div> | |
| )} | |
| </div> | |
| ); | |
| if (agentKey === 'contraindication') return ( | |
| <div style={style}> | |
| {tag(result.treatment_verdict, | |
| result.treatment_verdict === 'SAFE' ? 'var(--green-safe)' | |
| : result.treatment_verdict === 'CONTRAINDICATED' ? 'var(--red-critical)' | |
| : 'var(--amber-warning)')} | |
| <p style={{ marginTop: 6 }}>{result.verdict_reason}</p> | |
| {(result.allergy_risks || []).slice(0, 2).map((r, i) => ( | |
| <p key={i} style={{ color: 'var(--red-critical)' }}>⚠ Allergy: {r.substance} → {r.risk}</p> | |
| ))} | |
| {(result.drug_interactions || []).slice(0, 2).map((d, i) => ( | |
| <p key={i} style={{ color: 'var(--amber-warning)' }}>💊 {d.drug_a} + {d.drug_b}: {d.interaction}</p> | |
| ))} | |
| {result.agent_reasoning && ( | |
| <div style={{ marginTop: 8, padding: 8, background: 'var(--bg-base)', borderRadius: 6, borderLeft: '3px solid var(--blue-accent)' }}> | |
| <p style={{ fontSize: 10, fontWeight: 700, marginBottom: 4, color: 'var(--text-primary)' }}>AGENT REASONING</p> | |
| {result.agent_reasoning.map((r, i) => <p key={i} style={{ fontSize: 10 }}>• {r}</p>)} | |
| </div> | |
| )} | |
| </div> | |
| ); | |
| if (agentKey === 'labs') return ( | |
| <div style={style}> | |
| {(result.critical_labs || []).map((l, i) => ( | |
| <p key={i} style={{ color: 'var(--red-critical)' }}>🔴 {l.name}: {l.value} — {l.significance}</p> | |
| ))} | |
| {(result.abnormal_labs || []).map((l, i) => ( | |
| <p key={i} style={{ color: 'var(--amber-warning)' }}>🟡 {l.name}: {l.value} — {l.significance}</p> | |
| ))} | |
| {(result.immediate_concerns || []).slice(0, 2).map((c, i) => <p key={i}>→ {c}</p>)} | |
| {result.agent_reasoning && ( | |
| <div style={{ marginTop: 8, padding: 8, background: 'var(--bg-base)', borderRadius: 6, borderLeft: '3px solid var(--blue-accent)' }}> | |
| <p style={{ fontSize: 10, fontWeight: 700, marginBottom: 4, color: 'var(--text-primary)' }}>AGENT REASONING</p> | |
| {result.agent_reasoning.map((r, i) => <p key={i} style={{ fontSize: 10 }}>• {r}</p>)} | |
| </div> | |
| )} | |
| </div> | |
| ); | |
| if (agentKey === 'differentials') return ( | |
| <div style={style}> | |
| {(result.differentials || []).map((d, i) => ( | |
| <div key={i} style={{ marginBottom: 6 }}> | |
| {tag(d.likelihood, d.likelihood === 'HIGH' ? 'var(--red-critical)' : d.likelihood === 'MODERATE' ? 'var(--amber-warning)' : 'var(--text-secondary)')} | |
| <span style={{ fontWeight: 600, color: 'var(--text-primary)' }}>{d.diagnosis}</span> | |
| {d.must_rule_out && <span style={{ color: 'var(--red-critical)', fontSize: 10, marginLeft: 6 }}>MUST RULE OUT</span>} | |
| </div> | |
| ))} | |
| {result.agent_reasoning && ( | |
| <div style={{ marginTop: 8, padding: 8, background: 'var(--bg-base)', borderRadius: 6, borderLeft: '3px solid var(--blue-accent)' }}> | |
| <p style={{ fontSize: 10, fontWeight: 700, marginBottom: 4, color: 'var(--text-primary)' }}>AGENT REASONING</p> | |
| {result.agent_reasoning.map((r, i) => <p key={i} style={{ fontSize: 10 }}>• {r}</p>)} | |
| </div> | |
| )} | |
| </div> | |
| ); | |
| if (agentKey === 'action_protocol') return ( | |
| <div style={style}> | |
| {(result.immediate_actions || []).map((a, i) => <p key={i}>{i + 1}. {a}</p>)} | |
| {result.disposition && ( | |
| <p style={{ marginTop: 6, fontWeight: 700, color: 'var(--blue-accent)' }}> | |
| Disposition → {result.disposition} | |
| </p> | |
| )} | |
| {result.agent_reasoning && ( | |
| <div style={{ marginTop: 8, padding: 8, background: 'var(--bg-base)', borderRadius: 6, borderLeft: '3px solid var(--blue-accent)' }}> | |
| <p style={{ fontSize: 10, fontWeight: 700, marginBottom: 4, color: 'var(--text-primary)' }}>AGENT REASONING</p> | |
| {result.agent_reasoning.map((r, i) => <p key={i} style={{ fontSize: 10 }}>• {r}</p>)} | |
| </div> | |
| )} | |
| </div> | |
| ); | |
| return null; | |
| } | |
| export function AgentPanel({ agentStatuses, agentResults, onRun, patient, running, focus, setFocus }) { | |
| const [expanded, setExpanded] = useState({}); | |
| const toggle = key => setExpanded(e => ({ ...e, [key]: !e[key] })); | |
| const doneCount = AGENTS.filter(a => agentStatuses[a.key] === 'complete').length; | |
| return ( | |
| <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}> | |
| <div style={{ padding: '14px 16px', borderBottom: '1px solid var(--border-subtle)' }}> | |
| <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}> | |
| <span style={{ fontWeight: 700, fontSize: 13, color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.05em' }}> | |
| Agent Orchestration | |
| </span> | |
| {running && ( | |
| <span style={{ fontSize: 11, color: 'var(--blue-accent)', display: 'flex', alignItems: 'center', gap: 5 }}> | |
| <div className="spinner" style={{ width: 12, height: 12 }} /> {doneCount}/5 complete | |
| </span> | |
| )} | |
| </div> | |
| </div> | |
| <div style={{ padding: '12px 14px', flex: 1, overflowY: 'auto' }}> | |
| {!patient && ( | |
| <div style={{ textAlign: 'center', padding: '40px 20px', color: 'var(--text-tertiary)', fontSize: 13 }}> | |
| Select a patient to run emergency analysis | |
| </div> | |
| )} | |
| {patient && ( | |
| <> | |
| {/* 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 */} | |
| {AGENTS.map(a => ( | |
| <AgentRow | |
| key={a.key} agent={a} | |
| status={agentStatuses[a.key] || 'idle'} | |
| result={agentResults[a.key]} | |
| expanded={expanded[a.key]} | |
| onToggle={() => toggle(a.key)} | |
| /> | |
| ))} | |
| {/* Run button */} | |
| <button className="btn-danger pulse-on-hover" style={{ marginTop: 10, width: '100%' }} onClick={onRun} disabled={running}> | |
| {running | |
| ? <><div className="spinner" /> AI Agents Orchestrating...</> | |
| : <><Zap size={15} /> Analyze Patient Record</>} | |
| </button> | |
| {/* Collaboration Log */} | |
| {running || Object.keys(agentResults).length > 0 ? ( | |
| <div style={{ marginTop: 20, borderTop: '1px solid var(--border-subtle)', paddingTop: 16 }}> | |
| <p style={{ fontSize: 10, fontWeight: 700, color: 'var(--text-tertiary)', textTransform: 'uppercase', marginBottom: 10, letterSpacing: '0.05em' }}> | |
| Collaboration Thread | |
| </p> | |
| <div style={{ | |
| background: 'var(--bg-surface)', padding: 12, borderRadius: 8, border: '1px solid var(--border-subtle)', | |
| fontFamily: 'var(--font-mono)', fontSize: 10, lineHeight: 1.5, maxHeight: 120, overflowY: 'auto' | |
| }}> | |
| {AGENTS.filter(a => agentResults[a.key] || agentStatuses[a.key] === 'working').map((a, i) => ( | |
| <div key={i} style={{ marginBottom: 6 }} className="fade-in"> | |
| <span style={{ color: 'var(--blue-accent)', fontWeight: 700 }}>[{a.label}]: </span> | |
| <span style={{ color: 'var(--text-secondary)' }}> | |
| {agentStatuses[a.key] === 'working' ? 'Transmitting findings...' : (agentResults[a.key]?.agent_reasoning?.[0] || 'Processed record successfully.')} | |
| </span> | |
| </div> | |
| ))} | |
| </div> | |
| </div> | |
| ) : null} | |
| </> | |
| )} | |
| </div> | |
| </div> | |
| ); | |
| } | |