Update progress: Task 1 completed (design tokens)

Also includes manual intervention files: updated CLAUDE.md,
IMPLEMENTATION_PLAN.md, and ref files for GP System Dashboard redesign.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

CLAUDE.md

@@ -26,7 +26,7 @@ No test framework is configured.
 
 ### Four-Phase UI Flow
 
-`App.tsx` manages a `Phase` state (`'boot'` → `'ecg'` → `'login'` → `'dashboard'`). Each phase renders exclusively:
+`App.tsx` manages a `Phase` state (`'boot'` → `'ecg'` → `'login'` → `'pmr'`). Each phase renders exclusively:
 
 1. **BootSequence** — Terminal typing animation (~4s), green-on-black aesthetic. Fira Code font, matrix-green palette. **Locked — do not change.**
 2. **ECGAnimation** — Canvas-based heartbeat animation with mask-based letter tracing. Background transitions from black to `#1E293B`. **Locked — do not change.**

Ralph/IMPLEMENTATION_PLAN.md

@@ -2,7 +2,7 @@
 
 ## Project Overview
 
-Replace the "CareerRecord PMR" sidebar-nav + view-switching interface with a tile-based GP System dashboard. Reference design: `References/GPSystemconcept.html`.
+Replace the "CareerRecord PMR" sidebar-nav + view-switching interface with a tile-based GP System dashboard called "CVMIS" Reference design: `References/GPSystemconcept.html`.
 
 ## Quality Checks
 
@@ -22,10 +22,10 @@ Replace the "CareerRecord PMR" sidebar-nav + view-switching interface with a til
 
 #### Task 1: Update design tokens and Tailwind config
 > Detail: `Ralph/refs/ref-01-design-tokens.md`
-- [ ] Update CSS custom properties in `src/index.css` (new palette, shadows, layout vars)
+- [x] Update CSS custom properties in `src/index.css` (new palette, shadows, layout vars)
-- [ ] Update `tailwind.config.js` (colors, shadows, borders, radius)
+- [x] Update `tailwind.config.js` (colors, shadows, borders, radius)
-- [ ] Keep boot/ECG/login tokens unchanged
+- [x] Keep boot/ECG/login tokens unchanged
-- [ ] Run quality checks
+- [x] Run quality checks
 
 #### Task 2: Create new data files and update types
 > Detail: `Ralph/refs/ref-02-data-types.md`

Ralph/refs/ref-01-design-tokens.md

@@ -90,6 +90,27 @@ borderRadius: {
 }
 ```
 
+## Existing Tokens to Replace/Update
+
+The Tailwind config and CSS already have tokens from the old PMR design. Task 1 needs to UPDATE these, not just add new ones alongside:
+
+**Existing Tailwind shadow tokens (replace with new three-tier system):**
+- `pmr`: `'0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03)'` → replace with `pmr-sm`
+- `pmr-hover`: `'0 2px 4px rgba(0,0,0,0.06), 0 8px 16px rgba(0,0,0,0.04)'` → replace with `pmr-md`
+- `pmr-banner`: `'0 2px 8px rgba(0,0,0,0.12)'` → remove (no banner in new design)
+
+**Existing Tailwind color tokens (keep during transition, Task 21 cleans up):**
+- `pmr-nhsblue: '#005EB8'` — keep for login screen (still uses NHS blue)
+- `pmr-content: '#F5F7FA'` → update to `pmr-content: '#F0F5F4'` (new bg color)
+- `pmr-sidebar: '#1E293B'` → update to `pmr-sidebar: '#F7FAFA'` (light sidebar)
+
+**Existing CSS custom properties (in `--pmr-*` namespace):**
+- Previous iterations added `--pmr-*` variables. The new tokens use shorter names (e.g., `--bg`, `--surface`, `--accent`). Add the new tokens AND keep `--pmr-*` aliases during transition so existing components don't break before they're rebuilt.
+
+**Existing border-radius tokens:**
+- `card: '4px'` → update to `card: '8px'`
+- `login: '12px'` — keep unchanged
+
 ## What NOT to Change
 
 - Boot phase variables (`--matrix-*`, `--terminal-*`)

Ralph/refs/ref-04-dashboard-layout.md

@@ -134,3 +134,30 @@ The login screen has background `#1E293B`. The dashboard has background `#F0F5F4
 3. Handle it in App.tsx with a state-based background
 
 The simplest approach is option 1 — the dashboard's entrance animation effectively replaces the dark login background with the light dashboard.
+
+---
+
+## Established Patterns (from previous iterations)
+
+These patterns were established across 16 iterations of the old PMR build. Reuse them:
+
+### Phase name is `'pmr'`
+The Phase type in `src/types/index.ts` is `'boot' | 'ecg' | 'login' | 'pmr'`. The `'pmr'` case renders the dashboard. Do NOT rename the phase — just change what it renders.
+
+### Module-scope `prefersReducedMotion`
+All animation components should compute this once at module level, not per render:
+```typescript
+const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+```
+This is the established pattern across all existing view components.
+
+### Pre-existing ESLint warning
+`AccessibilityContext.tsx` has 1 pre-existing ESLint warning. This is expected — do not attempt to fix it. Quality checks pass with this warning present.
+
+### Callback ref pattern for Framer Motion
+If you need a ref to a `motion.*` element (e.g., for scroll detection), use `useState` + callback ref instead of `useRef`. Framer Motion elements may not be in the DOM when `useEffect` first runs:
+```typescript
+const [scrollContainer, setScrollContainer] = useState<HTMLElement | null>(null)
+// On the element: ref={el => { if (el) setScrollContainer(el) }}
+```
+This avoids null ref issues with animated mount timing.

Ralph/refs/ref-07-interactions.md

@@ -68,7 +68,7 @@ When a project item is expanded:
 
 When a skill item is expanded:
 - Show "prescribing history" — a timeline of skill development
-- Source: Can use the existing `medications` data which has `prescribingHistory` entries
+- **Data source:** `import { medications } from '@/data/medications'` (NOT `skills.ts`). The `medications.ts` file has 18 entries, each with a `prescribingHistory` array of `{ year, description }` entries. Map from `skills.ts` to `medications.ts` by matching skill name to medication name (e.g., "Data Analysis" in skills.ts → find the medication with `name: "Data Analysis"` in medications.ts to get its `prescribingHistory`).
 - Format: vertical timeline with year markers and descriptions
   - Timeline dots: accent color, 6px, with connecting line
   - Year: mono font, 12px, semibold
@@ -205,8 +205,19 @@ Section label: 10px, 600 weight, uppercase, `letter-spacing: 0.08em`, text-terti
 
 ### Fuzzy Search
 
-Adapt existing `src/lib/search.ts` (fuse.js integration):
+Adapt existing `src/lib/search.ts` (fuse.js v7.0.0, already installed):
-- Rebuild search index to include new data (skills from skills.ts, KPIs, etc.)
+
+**Existing code:** `src/lib/search.ts` has `buildSearchIndex()` which creates a Fuse index from consultations, medications, problems, investigations, and documents. It groups results by `sectionLabel` via `groupResultsBySection()`. The `SearchResult` interface has `{ id, title, section: ViewId, sectionLabel, highlight }`.
+
+**What needs changing:**
+- The `section: ViewId` field is designed for view-switching navigation (navigating to `#consultations`, `#medications`, etc.). The new dashboard has no views — it's a single scrollable page. Results should either scroll to the relevant tile or expand an item within a tile.
+- Add `skills.ts` data to the index (currently only `medications.ts` is indexed, not the new 5-skill entries)
+- Add `kpis.ts` data to the index
+- Add Quick Actions (Download CV, Send Email, View LinkedIn, View Projects)
+- Update section labels to match palette grouping: "Experience", "Core Skills", "Active Projects", "Achievements", "Education", "Quick Actions"
+- Add an `action` field to `SearchResult` so each result knows what to do when selected (scroll to tile, expand item, open link, etc.)
+
+**Config (keep existing):**
 - `threshold: 0.3`, weighted keys (title: 2, content: 1)
 - `minMatchCharLength: 2`
 - Group results by section

Ralph/refs/ref-08-polish.md

@@ -133,8 +133,16 @@ The `src/components/views/` directory contains the old view components. Some may
 
 **Rule: Only remove files that are confirmed unused.** Run a grep for imports before deleting.
 
-### Hooks to Remove
+### Hooks to Assess
 - `src/hooks/useScrollCondensation.ts` — only used by PatientBanner. If PatientBanner is removed, this can go too.
+- `src/hooks/useBreakpoint.ts` — may still be useful for responsive tile layouts. Check if any new dashboard component uses it. If not, remove.
+
+### Context to Simplify
+- `src/contexts/AccessibilityContext.tsx` — the existing context has `activeView`, `setActiveView`, `expandedItemId`, `setExpandedItem` designed for the old view-switching navigation. With the new single-page dashboard:
+  - `activeView` / `setActiveView` are no longer relevant (no view switching)
+  - `expandedItemId` / `setExpandedItem` may still be useful if tiles report their expanded item for accessibility announcements
+  - Assess whether to simplify the context or remove it entirely and manage expansion state locally in each tile
+  - **Note:** This context has 1 pre-existing ESLint warning — that's expected.
 
 ### Verification Checklist
 - [ ] No dead imports (run `npm run lint` — ESLint catches unused imports)