pediatric-ai-scribe-v3/public/components/pe-guide.html
Daniel 12460d24ef feat(pe-guide): Cardiovascular system with APTM auscultation SVG
Fourth PE system added. Adolescent cardiovascular exam at the same
teaching-focused depth as respiratory/neuro: five components with
significance + pearls + detailed step methods + watch-for blocks.

APTM auscultation diagram (new, inline SVG, no image file):
- Stylised anterior chest with sternum, clavicles, ICS level lines,
  left mid-clavicular line
- Five colour-coded landmarks:
   A  Aortic    — 2nd ICS right sternal border
   P  Pulmonic  — 2nd ICS left sternal border
   E  Erb's pt  — 3rd ICS left sternal border
   T  Tricuspid — 4th ICS left sternal border
   M  Mitral    — 5th ICS mid-clavicular (apex)
- Side legend: location + what to listen for at each point
- Patient's-left / patient's-right labels to prevent mirror-image
  confusion

CV-specific grading scales (3 new entries in SCALES):
- Murmur grade Levine 1–6
- Pulse amplitude 0–4+
- Capillary refill time thresholds

CV components:
1. Inspection (general appearance, central/peripheral cyanosis,
   clubbing with Schamroth sign, precordial bulge, visible apex, JVP)
2. Palpation (apex position + character, parasternal heave, thrills
   at all 5 points, peripheral pulses upper + lower, radio-femoral
   delay for coarctation)
3. Auscultation — approach (positioning, diaphragm vs bell, systematic
   walk through all 5 points, left lateral decub for MS, leaning
   forward for AR)
4. Auscultation — heart sounds + murmurs (S1, S2 split, S3/S4 gallops,
   murmur characterisation by timing/location/radiation/character,
   Levine grading, dynamic maneuvers, innocent-murmur "7 S" pearl)
5. Peripheral vascular (four-limb BP for coarctation, radio-femoral
   delay, bounding pulse differential)

UI wiring:
- renderSystem() emits APTM diagram card at the top of cv system,
  before scales. Two-column layout: SVG on left, legend on right.
- accentMap/iconMap/labelMap extended with cv = rose accent,
  heart-pulse icon, "Cardiovascular" label
- New sub-tab pill in pe-guide.html
2026-04-22 20:15:08 +02:00

81 lines
3.9 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<div class="module-header">
<h2><i class="fas fa-stethoscope"></i> Physical Exam Guide</h2>
<p>OSCE-style reference for age-appropriate MSK and Neuro exam + narrative report generator</p>
</div>
<div class="demographics-bar">
<div class="demo-field">
<label>Age Group</label>
<select id="pe-age-group">
<option value="">-- Select --</option>
<option value="newborn">Newborn (028 days)</option>
<option value="infant">Infant (112 months)</option>
<option value="toddler">Toddler (13 years)</option>
<option value="preschool">Preschool (35 years)</option>
<option value="school">School-age (611 years)</option>
<option value="adolescent">Adolescent (1221 years)</option>
</select>
</div>
<div class="demo-field">
<label>Patient Age</label>
<input type="text" id="pe-age" placeholder="e.g., 4 months">
</div>
<div class="demo-field">
<label>Gender</label>
<select id="pe-gender">
<option value="">Select</option>
<option>Male</option>
<option>Female</option>
</select>
</div>
<div class="demo-field">
<label>Report Style</label>
<select id="pe-format">
<option value="narrative">Narrative (paragraphs)</option>
<option value="list">Structured List</option>
</select>
</div>
<div class="demo-field demo-field-model">
<label><i class="fas fa-robot"></i> Model</label>
<select class="tab-model-select"></select>
</div>
</div>
<div class="wv-subtab-bar">
<button class="wv-subtab-btn active" data-pesystem="msk">
<i class="fas fa-bone"></i> Musculoskeletal
</button>
<button class="wv-subtab-btn" data-pesystem="neuro">
<i class="fas fa-brain"></i> Neurologic
</button>
<button class="wv-subtab-btn" data-pesystem="resp">
<i class="fas fa-lungs"></i> Respiratory
</button>
<button class="wv-subtab-btn" data-pesystem="cv">
<i class="fas fa-heart-pulse"></i> Cardiovascular
</button>
</div>
<div id="pe-content">
<p style="text-align:center;color:#9ca3af;padding:40px;">Select an age group above to see the exam guide.</p>
</div>
<div class="milestone-actions" id="pe-actions" style="display:none">
<button id="pe-all-normal" class="btn-sm btn-success"><i class="fas fa-check-double"></i> All Normal</button>
<button id="pe-all-clear" class="btn-sm btn-ghost"><i class="fas fa-eraser"></i> Clear All</button>
<button id="pe-generate-btn" class="btn-generate btn-generate-teal"><i class="fas fa-wand-magic-sparkles"></i> Generate Exam Report</button>
</div>
<div id="pe-output" class="card output-card hidden">
<div class="card-header output-header">
<h3><i class="fas fa-file-medical"></i> Physical Exam Report</h3>
<div class="output-actions">
<span id="pe-model-tag" class="model-tag"></span>
<button class="btn-sm btn-primary" data-action="copy" data-target="pe-narrative-text"><i class="fas fa-copy"></i> Copy</button>
<button class="btn-sm btn-ghost" data-action="speak" data-target="pe-narrative-text"><i class="fas fa-volume-high"></i> Read</button>
<button class="btn-sm btn-ghost" data-action="nc-export" data-target="pe-narrative-text" data-label="physical-exam"><i class="fas fa-cloud-arrow-up"></i></button>
</div>
</div>
<div id="pe-summary-bar" class="summary-bar hidden"></div>
<div id="pe-narrative-text" class="output-text" contenteditable="true"></div>
</div>