Recap.

Reads the whole chart so you don't have to.

{open && (

{allPatients.map((p, i) => ( ))}

)}

); } function BackendBadge({ c }) { const [info, setInfo] = useState({ backend: '...' }); useEffect(() => { fetch('/api/health').then((r) => r.json()).then(setInfo).catch(() => {}); }, []); return (

AMD MI300X · 192 GB · {info.backend}

); } // ───────────────────────────────────────────────────────────────────── function Document({ c, patient }) { const events = patient.events; const groups = {}; events.forEach((e) => { const y = e.date.slice(0, 4); (groups[y] = groups[y] || []).push(e); }); const years = Object.keys(groups).sort(); return (

Patient Dossier · {events.length} events · {years.length} year{years.length === 1 ? '' : 's'} on record

{patient.display_name}.

{patient.summary}

{patient.age != null && } {patient.gender && } {patient.mrn && } e.source)).size} label="source docs" />

{patient.tags && patient.tags.length > 0 && (

{patient.tags.map((t) => ( {t} ))}

)}

{years.map((y, yi) => ( ))}

); } function Stat({ c, value, label, mono }) { return (

{value}

{label}

); } function YearSection({ c, year, events, first }) { const [activeId, setActiveId] = useState(null); return (

{year}

{events.length} {events.length === 1 ? 'event' : 'events'}

{events.map((e, ei) => ( setActiveId(activeId === e.id ? null : e.id)} /> ))}

); } function DocEvent({ c, e, index, active, onClick }) { const cat = CAT[e.category] || CAT.other; const [iconHover, setIconHover] = useState(false); // Vertical center of the title line is roughly 26px from the top of the // content button (≈12px category label + 3px gap + half of 22px title line). // Center the icon there so it visually anchors to the title, not the date. const iconCenterY = 26; const iconSize = active ? 30 : 26; const iconPadTop = Math.max(iconCenterY - iconSize / 2, 0); return (

{fmtDate(e.date, { y: false, short: true })}

{String(index + 1).padStart(2, '0')}

{/* Hover wrapper sits exactly on the icon — tooltip uses bottom:100% relative to it */}

setIconHover(true)} onMouseLeave={() => setIconHover(false)}>

{iconHover && ( )}

); } // ───────────────────────────────────────────────────────────────────── function ChatColumn({ c, patient }) { const [history, setHistory] = useState([]); const [input, setInput] = useState(''); const [thinking, setThinking] = useState(false); const scroller = useRef(null); useEffect(() => { setHistory([]); setInput(''); }, [patient.id]); useEffect(() => { if (scroller.current) scroller.current.scrollTop = scroller.current.scrollHeight; }, [history, thinking]); const send = async (text) => { const q = (text || input).trim(); if (!q) return; setInput(''); setHistory((h) => [...h, { role: 'user', text: q }]); setThinking(true); try { const r = await fetch('/api/answer', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ patient_id: patient.id, question: q }), }); const data = await r.json(); if (data.error) { setHistory((h) => [...h, { role: 'assistant', text: `Error: ${data.error}`, citations: [] }]); } else { setHistory((h) => [...h, { role: 'assistant', text: data.text, citations: data.citations || [], }]); } } catch (err) { setHistory((h) => [...h, { role: 'assistant', text: `Network error: ${String(err)}`, citations: [], }]); } finally { setThinking(false); } }; const examples = SUGGESTED[patient.id] || SUGGESTED.demo || []; return (

The Reading Room

Ask a question.
Get a cited answer.

{history.length === 0 && (

Suggested

{examples.map((ex, i) => ( ))}

)} {history.map((m, i) => (

{m.role === 'user' ? (

You asked

"{m.text}"

) : ( )}

))} {thinking && (

▌ {' '}reading {patient.events.length} events…

)}

? setInput(e.target.value)} onKeyDown={(e) => e.key === 'Enter' && send()} placeholder="Ask anything about this chart…" style={{ flex: 1, border: 'none', background: 'transparent', color: c.ink, fontSize: 14, outline: 'none', fontFamily: SERIF, padding: '2px 0', }} />

); } // Render markdown-ish bold + inline citation markers like [src:foo.pdf#p2]. function AssistantMessage({ c, m, patient }) { // Replace [src:foo.pdf#p2] with superscript clickable cite numbers. const citationsByKey = {}; let counter = 0; const text = (m.text || '').replace(/\[src:([^\]#]+)(?:#p(\d+))?\]/g, (_match, src, page) => { const key = `${src}|${page || ''}`; if (!(key in citationsByKey)) { counter += 1; citationsByKey[key] = { n: counter, src, page: page ? parseInt(page, 10) : null }; } return `‹CITE:${citationsByKey[key].n}›`; }); // Now split on the placeholders + bold markdown. const segments = text.split(/(‹CITE:\d+›|\*\*[^*]+\*\*)/g); return (

The chart says

{segments.map((seg, i) => { if (seg.startsWith('‹CITE:')) { const n = parseInt(seg.slice(6, -1), 10); return ( ^{n} ); } if (seg.startsWith('**') && seg.endsWith('**')) { return {seg.slice(2, -2)}; } return {seg}; })}

{(m.citations && m.citations.length > 0) && (

Drawn from

{m.citations.map((cit, i) => (

{i + 1}. {cit.snippet && ( {cit.snippet} )} {cit.snippet && · } {cit.source_id}{cit.page ? ` p.${cit.page}` : ''}

))}

)}

); } // Blinking cursor keyframes if (!document.getElementById('edit-keyframes')) { const s = document.createElement('style'); s.id = 'edit-keyframes'; s.textContent = `@keyframes edit-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }`; document.head.appendChild(s); } ReactDOM.createRoot(document.getElementById('root')).render();