503f5afaad
Three concurrent themes from this session:
═══════════════════════════════════════════════════════════════════
ED ENCOUNTERS — per-stage cards + consolidate→MDM finalize
═══════════════════════════════════════════════════════════════════
UX redesign per Daniel's feedback ("every stage note should be shown,
if AI is told to modify that particular note then the modified version
is used in final mdm"):
- Each generated stage stays on screen as its own editable card with
its own embedded "Don't Miss" panel. No more single rolling note
element that gets replaced on each generation.
- gatherCurrentNotes() reads contenteditable text from each stage card
before any operation (advance, finalize, persist) so inline edits
flow into the next AI call and the final consolidate.
- Stage badge is now state-accurate. "Stage N (recording)" with yellow
background after Add-more before generation; "Stage N" with gray
after generation. Fixes the bug where the badge flipped to Stage 2
the moment Add-more was clicked.
- Save & Done now runs TWO server-side AI calls in /finalize:
1. edConsolidate (new prompt) → polished single final note that
integrates every stage chronologically (HPI / ROS / PE / ED Course /
A&P with disposition).
2. edFinalize (rewritten with full inline 2023 AMA E/M element
rubric — problems / data / risk definitions, level mapping with
concrete examples) → MDM JSON.
- Two new cards render after finalize: blue-bordered Final Consolidated
Note + green-bordered MDM. Stage cards become read-only.
- partial_data on the saved row now stores {stages, finalNote, mdm,
finalized} so resume re-renders the full state.
Why two-call finalize: a single combined prompt makes the model cut
corners on one task. Two focused calls cost ~2× latency at the very end
of an encounter — acceptable since finalize is a one-time terminal
action, not a per-stage hot path.
Files: public/components/ed-encounter.html, public/js/ed-encounters.js,
src/routes/edEncounters.js, src/utils/prompts.js (edConsolidate added,
edFinalize rewritten).
═══════════════════════════════════════════════════════════════════
EXTENSIONS / PAGERS — visual polish
═══════════════════════════════════════════════════════════════════
Multiple iterations based on Daniel's feedback:
- Layout: align-items:flex-start so action buttons stay pinned top-right
when long numbers wrap (was align-items:center → buttons drifted into
the text area, causing visible overlap).
- Number: word-break:break-all + min-width:0 + font-feature-settings:tnum
so long numbers wrap within their column instead of pushing under the
buttons. Click-to-copy with a 0.55s green flash + ✓ copied badge.
- Phone/pager Font Awesome icon next to the number in the type color —
at-a-glance type signal (replacing an earlier 3px left stripe that
Daniel found visually bulky).
- Name: font-weight 700, font-size 14.5px, color g900, letter-spacing
-0.012em — scan-target headline typography for long lists.
- Alternating subtle backgrounds by index (white vs #fafbfc) so a long
list reads as distinct rows.
- Hover: card lifts 1px with a soft shadow; action buttons fade from
55% to 100% opacity. Cubic-bezier transition on transform.
- Entrance: staggered fade-up animation per card (35ms × index, capped
at 12). prefers-reduced-motion media query disables motion.
- Empty state: 48px FA icon + heading instead of plain gray text.
Files: public/js/extensions.js, public/css/styles.css.
═══════════════════════════════════════════════════════════════════
DOCS REORGANIZATION + APPLICATION-LOGIC DOCS + ADMIN VIEWER
═══════════════════════════════════════════════════════════════════
Document moves (preserving git history via git mv):
BROWSER_WHISPER_SETUP.md → docs/browser-whisper-setup.md
BROWSER_WHISPER_TROUBLESHOOTING.md → docs/browser-whisper-troubleshooting.md
DEVELOPER_GUIDE.md → docs/developer-guide-extended.md
EMBEDDINGS_SETUP.md → docs/embeddings-setup.md
FEATURES_EXPLAINED.md → docs/features-explained.md
IMPROVEMENTS.md → docs/improvements.md
OPENID_SETUP.md → docs/openid-setup.md
TRANSCRIPTION_OPTIONS.md → docs/transcription-options.md
README.md updated with the new paths + a Documentation section that
links to docs/logic/ at the top.
New application-logic doc series (~8,300 lines total) at docs/logic/.
Built with 5 parallel doc-writing agents per Daniel's "use multiple
agents" directive. Each doc explains how a part of the app actually
works — application logic, data flow, design decisions, sacred zones,
how-to-extend recipes — at a depth that lets a new dev (or an AI
assistant) modify the code confidently.
docs/logic/README.md — index + recommended reading order
docs/logic/architecture.md (2166 L) — frontend IIFE pattern, lazy tab
load, backend route convention,
schema, encryption, deployment
docs/logic/clinical-notes.md (1546L) — every note tab + helper trio
docs/logic/bedside-and-calculators.md (1373L) — bedside ES module
pocket + calculators + PE Guide
+ suture selector
docs/logic/auth-admin-learning.md (1281L) — auth (local+OIDC+2FA) +
admin panel + Learning Hub
(Quiz engine logic at sub-detail
only — TODO follow-up)
docs/logic/ai-and-voice.md (1128 L) — callAI 5-provider routing,
prompts, voice/STT, helper trio
docs/logic/ed-encounters.md (821 L) — multi-stage ED + MDM (this
session's worked example)
Admin-only docs viewer:
- New route /api/admin/docs/{tree,file}: recursively walks docs/, returns
the tree as JSON; /file?path=X validates path stays inside docs/ and
renders markdown via marked. Both gated by req.user.role==='admin'.
- New tab "Docs" (book icon) in the sidebar, hidden by default and
revealed in auth.js when user.role==='admin' (same pattern as the
existing Admin and CMS tabs).
- New component public/components/admin-docs.html: split-pane layout
with a tree sidebar + filter input + a markdown reader pane.
- New module public/js/admin-docs.js: lazy-loads the tree on first tab
activation, renders collapsible folders, persists expanded state and
last-opened path via UIState. Server-rendered HTML so no client
markdown parser needed.
- CSS for the viewer (responsive split-pane, code-block styling, table
scrolling, etc.).
- Mounted at /api/admin/docs (NOT /api) — important: mounting a router
with router.use(authMiddleware) at /api accidentally 401s every other
/api/* path (caught and fixed during testing — /api/health was 401'ing).
Files: docs/* (moved + new), README.md, public/components/admin-docs.html
(new), public/js/admin-docs.js (new), src/routes/adminDocs.js (new),
public/index.html (tab + section + script), public/js/auth.js (admin
gate + logout cleanup), public/css/styles.css (viewer styles), server.js
(mount).
═══════════════════════════════════════════════════════════════════
KNOWN GAPS (TODO follow-ups)
═══════════════════════════════════════════════════════════════════
- Learning Hub quiz engine (MCQ / multi-select / T-F scoring + attempt
tracking + progress dashboard) is covered at the architectural level
in docs/logic/auth-admin-learning.md but not drilled into the quiz
data model and scoring flow. Worth a focused follow-up doc.
- ED finalize: if MDM step JSON parse fails, server returns 502 with
the consolidated finalNote in the error payload, but client doesn't
surface the partial result. Add a "MDM failed, retry" affordance.
- No e2e Playwright coverage for ED encounters or the new docs viewer.
84 lines
6.3 KiB
HTML
84 lines
6.3 KiB
HTML
<div class="module-header">
|
|
<h2><i class="fas fa-truck-medical" style="color:#dc2626;"></i> ED Encounter</h2>
|
|
<p>Multi-stage emergency note: dictate → review → optionally add more → finalize with MDM.</p>
|
|
</div>
|
|
|
|
<!-- Save/Load bar -->
|
|
<div class="save-bar-wrap">
|
|
<div class="save-bar" id="ed-save-bar">
|
|
<div style="display:flex;align-items:center;gap:8px;flex:1;">
|
|
<i class="fas fa-tag" style="color:var(--g400);font-size:13px;"></i>
|
|
<input type="text" id="ed-label" class="save-label-input" placeholder="Patient label (e.g. Jane D, 8y abdominal pain)">
|
|
</div>
|
|
<span id="ed-stage-badge" class="model-tag" style="background:var(--g100);color:var(--g600);">Stage 1</span>
|
|
<button id="btn-ed-save" class="btn-sm btn-ghost"><i class="fas fa-floppy-disk"></i> Save draft</button>
|
|
<button id="btn-ed-load" class="btn-sm btn-ghost"><i class="fas fa-folder-open"></i> Load</button>
|
|
<button id="btn-ed-new" class="btn-sm btn-ghost" title="Clear and start new patient" style="color:var(--red);"><i class="fas fa-rotate-left"></i> New</button>
|
|
</div>
|
|
<div id="ed-load-popover" class="enc-load-popover hidden">
|
|
<div class="enc-load-popover-inner">
|
|
<input type="text" id="ed-load-search" class="enc-load-search" placeholder="Search saved encounters...">
|
|
<button class="enc-pop-close btn-sm btn-ghost"><i class="fas fa-times"></i></button>
|
|
</div>
|
|
<div id="ed-pop-list" class="enc-pop-list"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Demographics + Model -->
|
|
<div class="card" style="margin-bottom:10px;">
|
|
<div class="card-header"><h3><i class="fas fa-user"></i> Patient Info</h3></div>
|
|
<div style="padding:12px 16px;display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;">
|
|
<div class="demo-field"><label>Age</label><input type="text" id="ed-age" placeholder="e.g., 5 years" style="width:110px;"></div>
|
|
<div class="demo-field"><label>Gender</label><select id="ed-gender"><option value="">Select</option><option>Male</option><option>Female</option><option>Non-binary/Other</option></select></div>
|
|
<div class="demo-field" style="flex:1;min-width:200px;"><label>Chief Complaint</label><input type="text" id="ed-cc" placeholder="e.g., abdominal pain, head injury, fever in infant" style="width:100%;"></div>
|
|
<div class="demo-field demo-field-model"><label><i class="fas fa-robot"></i> Model</label><select id="ed-model-select" class="tab-model-select"></select></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recording -->
|
|
<div class="card" style="margin-bottom:10px;">
|
|
<div class="card-header">
|
|
<h3><i class="fas fa-microphone"></i> Stage <span id="ed-rec-stage-num">1</span> Recording / Dictation</h3>
|
|
<div style="display:flex;gap:6px;align-items:center;">
|
|
<button id="ed-record-btn" class="btn-sm btn-ghost"><i class="fas fa-microphone"></i> Listen In</button>
|
|
<button id="ed-pause-btn" class="btn-sm btn-ghost hidden"><i class="fas fa-pause"></i> Pause</button>
|
|
<div id="ed-rec-indicator" class="recording-indicator hidden" style="font-size:12px;"><div class="pulse-dot"></div><span>Recording... <span id="ed-timer">00:00</span></span></div>
|
|
</div>
|
|
</div>
|
|
<div style="padding:8px 16px;">
|
|
<div id="ed-transcript" class="editable-box" contenteditable="true" data-placeholder="Transcript appears here. Speak naturally — include direct asides like 'include normal cardiac exam' or 'assessment is viral URI' and the AI will route them to the right section."></div>
|
|
</div>
|
|
</div>
|
|
|
|
<button id="btn-ed-generate" class="btn-generate"><i class="fas fa-wand-magic-sparkles"></i> Generate Stage <span id="ed-gen-stage-num">1</span> Note</button>
|
|
|
|
<!-- Per-stage cards rendered here by ed-encounters.js renderStages().
|
|
Each card: editable note + embedded "don't miss" panel for that stage.
|
|
Stages persist on screen — physician can edit any stage; the latest-on-screen
|
|
version of each stage is what the finalize call sends to MDM. -->
|
|
<div id="ed-stages-container"></div>
|
|
|
|
<!-- Tail controls — always operate on the LATEST stage. Hidden until first generation. -->
|
|
<div id="ed-tail-controls" class="card hidden" style="margin-top:10px;">
|
|
<div class="refine-bar">
|
|
<textarea id="ed-refine-input" class="refine-input" rows="2" placeholder="Tell AI to modify the latest stage's note (e.g., 'add that patient received Zofran')"></textarea>
|
|
<button class="btn-sm btn-primary" id="ed-refine-btn"><i class="fas fa-edit"></i> Refine latest</button>
|
|
<button class="btn-sm btn-ghost" id="ed-shorten-btn"><i class="fas fa-compress"></i> Shorter</button>
|
|
</div>
|
|
<div id="ed-stage-controls" style="padding:12px 16px;border-top:1px solid var(--g100);display:flex;gap:8px;flex-wrap:wrap;align-items:center;">
|
|
<button id="btn-ed-add-more" class="btn-sm btn-primary"><i class="fas fa-plus"></i> Add more (next stage)</button>
|
|
<button id="btn-ed-finalize" class="btn-sm" style="background:var(--green);color:white;border:none;"><i class="fas fa-check-double"></i> Save & Done (with MDM)</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- MDM block (rendered after finalize) -->
|
|
<div id="ed-mdm-card" class="card hidden" style="margin-top:10px;border-left:3px solid var(--green);">
|
|
<div class="card-header output-header">
|
|
<h3><i class="fas fa-file-invoice-dollar"></i> Medical Decision Making (2023 E/M)</h3>
|
|
<div class="output-actions">
|
|
<span id="ed-mdm-level-tag" class="model-tag" style="background:var(--green-light);color:var(--green);"></span>
|
|
<button class="btn-sm btn-primary" data-action="copy" data-target="ed-mdm-text"><i class="fas fa-copy"></i> Copy</button>
|
|
</div>
|
|
</div>
|
|
<div id="ed-mdm-text" class="output-text"></div>
|
|
</div>
|