# Progress Log

## Codebase Patterns

### Project Structure
- Components in `src/components/`, views in `src/components/views/`
- Data files in `src/data/` — consultations.ts, medications.ts, problems.ts, investigations.ts, documents.ts, patient.ts
- Types in `src/types/pmr.ts` (PMR interfaces) and `src/types/index.ts` (Phase type)
- Hooks in `src/hooks/` — useScrollCondensation.ts, useBreakpoint.ts
- Contexts in `src/contexts/` — AccessibilityContext.tsx
- Path alias: `@/` maps to `./src/`

### Phase Management
- App.tsx controls phase: 'boot' -> 'ecg' -> 'login' -> 'pmr'
- BootSequence.tsx handles terminal animation
- ECGAnimation.tsx handles heartbeat + letter tracing + flatline exit
- LoginScreen.tsx bridges to PMRInterface.tsx

### Data Architecture (CORRECT — do not modify)
- All data files are populated with accurate CV content from References/CV_v4.md
- 5 consultation entries (roles), 18 medications (skills), 11 problems (achievements), 6 investigations (projects), 5 documents (education)
- Types are properly defined in pmr.ts — Consultation, Medication, Problem, Investigation, Document, Patient, ViewId

### Design System Requirements (from ref-design-system.md)
- Light-mode ONLY — no dark mode
- NHS blue: #005EB8 (primary interactive)
- Border radius: 4px for cards/inputs (clinical systems use minimal rounding)
- Borders dominate — 1px solid #E5E7EB everywhere
- Table row height: 40px, card padding: 16px, main content padding: 24px
- Fonts: Inter (general text), Geist Mono (coded entries, timestamps, data values)
- Base spacing unit: 4px — clinical density, not marketing site spacing

### Known Dependencies
- React 18.3.1, TypeScript, Vite
- Tailwind CSS for utility classes
- Framer Motion 11.15.0 for animations
- Lucide React 0.468.0 for icons
- fuse.js will need to be installed for Task 12

### Sidebar Label Convention (IMPORTANT)
- Sidebar uses CV-friendly labels, NOT clinical jargon
- Summary (same), Experience (not Consultations), Skills (not Medications), Achievements (not Problems), Projects (not Investigations), Education (not Documents), Contact (not Referrals)
- The clinical metaphor is in the VIEW LAYOUT, not the navigation labels
- Each view should look like its clinical equivalent but the nav label tells the user what CV section they're looking at

### Visual Review (Claude in Chrome)
- Dev server runs on `http://localhost:5173` throughout the loop
- Use browser tools (`tabs_context_mcp`, `navigate`, `computer` screenshot) to verify visual output
- App has boot→ECG→login→PMR sequence (~15s on first load). Wait before screenshotting.
- Once in PMR phase, navigate views via hash routes: `#summary`, `#experience`, `#skills`, `#achievements`, `#projects`, `#education`, `#contact`
- If browser tools fail, skip visual review and note in iteration log — don't block progress

### Critical Styling Notes
- Geist Mono font must be loaded (NOT Fira Code) for coded entries and timestamps
- Patient banner name must be 20px Inter 600 (not 18px)
- Clinical alert must use spring animation (Framer Motion type: "spring"), not ease-out
- View switching must be INSTANT — no crossfade, no slide between views
- Consultation expand/collapse: height animation ONLY, no opacity fade on content

## Iteration Log

### Iteration 1 — Task 1: Design system foundation and font setup
**Completed:** Task 1
**Changes made:**
- Added Geist Mono font to Google Fonts import in index.html (replacing reliance on Fira Code for PMR components)
- Extended Tailwind config PMR color tokens: added card, text-primary, text-secondary, text-on-dark variants, border colors, selected-row, alert colors
- Fixed borderRadius.card from 16px to 4px (clinical system requirement)
- Added borderRadius.login: 12px (exception for login card per spec)
- Added boxShadow.pmr: minimal clinical shadow
- Added PMR-specific CSS custom properties in index.css (--pmr-* variables)
- Added utility classes: .pmr-theme, .font-inter, .font-geist-mono

**Codebase patterns discovered:**
- The project uses both legacy design tokens (for boot/ECG phases) AND new PMR tokens (for clinical interface) — both need to coexist
- Geist Mono is the correct font for coded entries, timestamps, and clinical codes in PMR (NOT Fira Code)
- Border radius convention: 4px default for clinical components, 12px for login card only, 16px for legacy components
- CSS custom properties namespaced with --pmr- prefix for clarity

**Quality checks:** All passed (typecheck, lint, build)
**Visual review:** N/A (configuration task, no visual component)

**Issues encountered:** None

**Design decisions:**
- Kept legacy tokens in place to avoid breaking boot/ECG components
- Used --pmr- namespace for all PMR tokens to distinguish from legacy design system
- Extended Tailwind colors rather than replacing them — allows both themes to work simultaneously

### IMPORTANT — Design Guidance is Pre-Baked
Do NOT invoke the `/frontend-design` skill at runtime — it was pre-run and the output is embedded in each ref file under "Design Guidance (from /frontend-design)". Previous iterations STALLED because the skill output consumed the entire context window. The guidance is now in the ref files — just read and implement.

### ECG Reference Implementation
`ECGCombined.tsx` in the project root is a Remotion version of the ECG animation with a superior mask-based text reveal technique. Task 1b references this for the canvas implementation.