Cleanup

2026-02-16 10:50:14 +00:00
parent 24ffe03c0f
commit 5637d56e02
13 changed files with 66 additions and 2253 deletions
@@ -1,33 +1,34 @@
 # Session Handoff
-_Generated: 2026-02-16 10:36:47 UTC_
+_Generated: 2026-02-16 10:43:45 UTC_
 ## Git Context
 - **Branch:** `codex/kpi`
- **HEAD:** b67c3b0: chore: auto-commit before merge (loop primary)
+- **HEAD:** 24ffe03: chore: auto-commit before merge (loop primary)
 ## Tasks
 ### Completed
 - [x] Compact Latest Results KPI section
 - [x] Validate KPI objective and close loop
 ## Key Files
 Recently modified:
- `.codex/skills/skills/bencium-innovative-ux-designer/ACCESSIBILITY.md`
+- `.ralph/agent/handoff.md`
- `.codex/skills/skills/bencium-innovative-ux-designer/DESIGN-SYSTEM-TEMPLATE.md`
+- `.ralph/agent/memories.md`
- `.codex/skills/skills/bencium-innovative-ux-designer/MOTION-SPEC.md`
+- `.ralph/agent/memories.md.lock`
- `.codex/skills/skills/bencium-innovative-ux-designer/RESPONSIVE-DESIGN.md`
+- `.ralph/agent/scratchpad.md`
- `.codex/skills/skills/bencium-innovative-ux-designer/SKILL.md`
+- `.ralph/agent/summary.md`
- `.codex/skills/skills/d3-viz/SKILL.md`
+- `.ralph/agent/tasks.jsonl`
- `.codex/skills/skills/d3-viz/assets/chart-template.jsx`
+- `.ralph/agent/tasks.jsonl.lock`
- `.codex/skills/skills/d3-viz/assets/interactive-template.jsx`
+- `.ralph/current-events`
- `.codex/skills/skills/d3-viz/assets/sample-data.json`
+- `.ralph/current-loop-id`
- `.codex/skills/skills/d3-viz/references/colour-schemes.md`
+- `.ralph/events-20260216-103430.jsonl`
 ## Next Session
@@ -1,201 +0,0 @@
 # Implementation Plan — GP System Dashboard Overhaul
 ## Project Overview
 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
 - `npm run typecheck` — zero errors
 - `npm run lint` — pass (pre-existing AccessibilityContext warning OK)
 - `npm run build` — must succeed
 ## Important
 **This file is for progress tracking only.** For implementation detail on any task, read the referenced file in `Ralph/refs/`. Do NOT bloat this file with implementation notes — keep it lean.
 ---
 ## Tasks
 ### Phase 0: Foundation
 #### Task 1: Update design tokens and Tailwind config
 > Detail: `Ralph/refs/ref-01-design-tokens.md`
 - [x] Update CSS custom properties in `src/index.css` (new palette, shadows, layout vars)
 - [x] Update `tailwind.config.js` (colors, shadows, borders, radius)
 - [x] Keep boot/ECG/login tokens unchanged
 - [x] Run quality checks
 #### Task 2: Create new data files and update types
 > Detail: `Ralph/refs/ref-02-data-types.md`
 - [x] Create `src/data/profile.ts` (personal statement)
 - [x] Create `src/data/tags.ts` (sidebar tags)
 - [x] Create `src/data/alerts.ts` (sidebar alert flags)
 - [x] Create `src/data/kpis.ts` (Latest Results metrics)
 - [x] Create `src/data/skills.ts` (skills with medication frequency + years)
 - [x] Update `src/types/pmr.ts` (new interfaces)
 - [x] Run quality checks
 #### Task 3: Update CLAUDE.md for new architecture
 - [x] Already completed during project setup (manual intervention 2026-02-13)
 ### Phase 1: Core Layout
 #### Task 4: Build TopBar component
 > Detail: `Ralph/refs/ref-03-topbar-sidebar.md` (TopBar section)
 - [x] Create `src/components/TopBar.tsx`
 - [x] Brand section (icon + name + version tag)
 - [x] Search bar (triggers command palette, not inline search)
 - [x] Session info (mono font, pill badge)
 - [x] Fixed position, 48px height, white bg, bottom border
 - [x] Run quality checks
 #### Task 5: Build new Sidebar — PersonHeader
 > Detail: `Ralph/refs/ref-03-topbar-sidebar.md` (Sidebar PersonHeader section)
 - [x] Create `src/components/Sidebar.tsx`
 - [x] Avatar circle (52px, teal gradient, initials)
 - [x] Name, title, status badge with pulse dot
 - [x] Details grid (GPhC, Education, Location, Phone, Email, Registered)
 - [x] 272px width, light background, right border
 - [x] Run quality checks
 #### Task 6: Build new Sidebar — Tags + Alerts
 > Detail: `Ralph/refs/ref-03-topbar-sidebar.md` (Tags and Alerts section)
 - [x] Section title component (uppercase, divider line)
 - [x] Tags section (flex wrap pills, color variants)
 - [x] Alerts section (colored flag items with icons)
 - [x] Run quality checks
 #### Task 7: Build DashboardLayout and wire up App.tsx
 > Detail: `Ralph/refs/ref-04-dashboard-layout.md`
 - [x] Create `src/components/DashboardLayout.tsx`
 - [x] Three-zone layout: TopBar (fixed) + Sidebar (fixed) + Main (scrollable card grid)
 - [x] Card grid: 2 columns desktop, 1 column <900px
 - [x] Framer Motion entrance animations (topbar → sidebar → content)
 - [x] Update App.tsx: replace PMRInterface with DashboardLayout in PMR phase
 - [x] Verify boot → ECG → login → dashboard transition works
 - [x] Run quality checks
 ### Phase 2: Dashboard Tiles
 #### Task 8: Build reusable Card component
 > Detail: `Ralph/refs/ref-05-card-and-top-tiles.md` (Card section)
 - [x] Create `src/components/Card.tsx`
 - [x] Base card styling (white, border, radius 8px, shadow-sm, hover shadow-md)
 - [x] `full` variant (spans both grid columns)
 - [x] CardHeader sub-component (dot + title + optional right text)
 - [x] Run quality checks
 #### Task 9: Build PatientSummary tile
 > Detail: `Ralph/refs/ref-05-card-and-top-tiles.md` (PatientSummary section)
 - [x] Create `src/components/tiles/PatientSummaryTile.tsx`
 - [x] Full-width card, first in grid
 - [x] Personal statement from `src/data/profile.ts`
 - [x] Run quality checks
 #### Task 10: Build LatestResults tile
 > Detail: `Ralph/refs/ref-05-card-and-top-tiles.md` (LatestResults section)
 - [x] Create `src/components/tiles/LatestResultsTile.tsx`
 - [x] Half-width card, 2x2 metric grid
 - [x] Four KPI metric cards with colored values
 - [x] Data from `src/data/kpis.ts`
 - [x] Run quality checks
 #### Task 11: Build CoreSkills tile ("Repeat Medications")
 > Detail: `Ralph/refs/ref-05-card-and-top-tiles.md` (CoreSkills section)
 - [x] Create `src/components/tiles/CoreSkillsTile.tsx`
 - [x] Half-width card, next to LatestResults
 - [x] Skills listed as medications with frequency + years
 - [x] Data from `src/data/skills.ts`
 - [x] Run quality checks
 #### Task 12: Build LastConsultation tile
 > Detail: `Ralph/refs/ref-06-bottom-tiles.md` (LastConsultation section)
 - [x] Create `src/components/tiles/LastConsultationTile.tsx`
 - [x] Full-width card
 - [x] Header info row (Date, Org, Type, Band)
 - [x] Role title + achievement bullet list
 - [x] Data from first entry in `src/data/consultations.ts`
 - [x] Run quality checks
 #### Task 13: Build CareerActivity tile
 > Detail: `Ralph/refs/ref-06-bottom-tiles.md` (CareerActivity section)
 - [x] Create `src/components/tiles/CareerActivityTile.tsx`
 - [x] Full-width card, two-column activity grid
 - [x] Merge roles + projects + certs + education into timeline
 - [x] Color-coded dots by entry type
 - [x] Run quality checks
 #### Task 14: Build Education tile
 > Detail: `Ralph/refs/ref-06-bottom-tiles.md` (Education section)
 - [x] Create `src/components/tiles/EducationTile.tsx`
 - [x] Full-width card, below Career Activity
 - [x] Education entries from documents data
 - [x] Run quality checks
 #### Task 15: Build Projects tile
 > Detail: `Ralph/refs/ref-06-bottom-tiles.md` (Projects section)
 - [x] Create `src/components/tiles/ProjectsTile.tsx`
 - [x] Full-width card, prominent presentation
 - [x] Status badges, project names, years, descriptions
 - [x] Data from `src/data/investigations.ts`
 - [x] Run quality checks
 ### Phase 3: Interactions
 #### Task 16: Tile expansion system
 > Detail: `Ralph/refs/ref-07-interactions.md` (Tile Expansion section)
 - [x] CareerActivity items expand to show full role detail
 - [x] Projects items expand to show methodology, tech stack, results
 - [x] CoreSkills items expand to show prescribing history
 - [x] Height-only animation (200ms, no opacity fade)
 - [x] Single-expand accordion
 - [x] Keyboard: Enter/Space to expand, Escape to collapse
 - [x] Run quality checks
 #### Task 17: KPI flip card interaction
 > Detail: `Ralph/refs/ref-07-interactions.md` (KPI Flip section)
 - [x] LatestResults metrics flip on click
 - [x] Front: value + label. Back: explanation text
 - [x] CSS perspective flip (400ms) or instant swap with reduced motion
 - [x] One card flipped at a time
 - [x] Run quality checks
 #### Task 18: Build Command Palette
 > Detail: `Ralph/refs/ref-07-interactions.md` (Command Palette section)
 - [x] Create `src/components/CommandPalette.tsx`
 - [x] Ctrl+K trigger + search bar click trigger
 - [x] Overlay with backdrop blur, ESC to close
 - [x] Fuzzy search via fuse.js (adapt `src/lib/search.ts`)
 - [x] Grouped results by section + Quick Actions
 - [x] Keyboard navigation (arrows, Enter, Escape)
 - [x] Run quality checks
 ### Phase 4: Polish
 #### Task 19: Responsive design
 > Detail: `Ralph/refs/ref-08-polish.md` (Responsive section)
 - [x] Desktop (>1024px): full sidebar + 2-column grid
 - [x] Tablet (768–1024px): collapsed/hidden sidebar + adapted grid
 - [x] Mobile (<768px): no sidebar, single-column tiles, simplified topbar
 - [x] Touch-friendly targets (48px+)
 - [x] Run quality checks
 #### Task 20: Accessibility audit
 > Detail: `Ralph/refs/ref-08-polish.md` (Accessibility section)
 - [x] Semantic HTML (header, nav, main, article, section)
 - [x] Keyboard navigation (Tab, Enter/Space, Escape, Ctrl+K, arrows)
 - [x] ARIA (expanded, controls, labels, live regions, dialog)
 - [x] Focus management (trap in palette, visible rings, return focus)
 - [x] `prefers-reduced-motion` on all animations
 - [x] Color contrast verification
 - [x] Run quality checks
 #### Task 21: Clean up and final polish
 > Detail: `Ralph/refs/ref-08-polish.md` (Cleanup section)
 - [ ] Remove unused old components (PatientBanner, ClinicalSidebar, Breadcrumb, etc.)
 - [ ] Remove unused hooks (useScrollCondensation if unused)
 - [ ] Verify no dead imports
 - [ ] Final visual review against concept HTML
 - [ ] Run quality checks (clean build)
@@ -1,50 +0,0 @@
 # Ralph Continuation Plan — Latest Results KPI Compaction
 ## Objective
 Amend the existing GP dashboard implementation to tighten the `Latest Results` KPI section while preserving current copy and visual style.
 ## Requested Changes
 1. Remove the pulsing coachmark text:
 - Remove `Open any metric to see evidence`.
 - Remove the pulse behavior tied to that coachmark.
 2. Reposition instructional helper copy:
 - Keep this exact text and formatting:
  - `Select a metric to inspect methodology, impact, and outcomes.`
 - Move it to the right of the `Latest Results` title area (same row as the section heading).
 3. KPI grid layout and spacing:
 - For viewports `>= 768px` (md and above): render KPI cards in a single row with 4 columns.
 - For viewports `< 768px` (mobile): render as 1 column x 4 rows.
 - Keep all existing KPI text/content unchanged.
 - Reduce whitespace inside KPI cards so each row/card is compact but readable.
 ## Implementation Scope
 Primary file:
 - `src/components/tiles/PatientSummaryTile.tsx`
 Likely edits:
 - Remove `KPI_COACHMARK_KEY` localStorage logic and related `showCoachmark` state.
 - Simplify `MetricCard` props by removing coachmark/pulse hooks.
 - Move helper text from standalone paragraph into the header-right area.
 - Update KPI container classes/styles for responsive `1x4` mobile and `4x1` md+ behavior.
 - Tighten paddings/font spacing in KPI card internals without changing content or hierarchy.
 ## Acceptance Criteria
 - No coachmark text appears anywhere in `Latest Results`.
 - Instruction line appears to the right of `Latest Results` heading, unchanged in copy/styling.
 - KPI layout:
  - mobile: 4 compact rows, 1 column
  - md+: 1 row, 4 columns
 - Existing interactions still work (metric click/keyboard opens evidence panel).
 - No KPI data values/labels/subtext changed.
 ## Validation
 Run after implementation:
 - `npm run typecheck`
 - `npm run lint`
 - `npm run build`
 Manual checks:
 - Confirm layout at ~375px width and ~1024px width.
 - Confirm no regressions in focus, keyboard activation (`Enter`/`Space`), and detail panel opening.
@@ -1,145 +0,0 @@
 # Ralph Wiggum Loop - Iteration Prompt
 You are operating inside an automated loop. Each iteration you receive fresh context - you have NO memory of previous iterations. Your only persistence is the filesystem.
 You are implementing **a GP System Dashboard** — a tile-based clinical record interface that presents Andy's CV as a GP surgery would display a patient record. The clinical metaphor lives in the structure (tiles as record sections, skills as "medications" with frequency, alerts, KPI metrics, career timeline) while the visual execution is modern and premium.
 **The Concept:**
 The "patient" is Andy's career. After a theatrical boot → ECG → login sequence, users see a dashboard with a light sidebar (person details, tags, alert flags) and a scrollable grid of tiles (Patient Summary, Latest Results, Repeat Medications/Skills, Last Consultation, Career Activity, Education, Projects). Tiles can be expanded for detail. A command palette (Ctrl+K) provides search. The reference design is `References/GPSystemconcept.html`.
 ## Your Task This Iteration
 1. **Read the reference file for your task** (REQUIRED): Each task in `IMPLEMENTATION_PLAN.md` references a detail file in `Ralph/refs/`. You MUST read this file before writing code — it provides the full specification, CSS values, data sources, and component structure.
 2. **Read the plan**: Open `IMPLEMENTATION_PLAN.md` and find the highest-priority unchecked item (`- [ ]`). Items are listed in dependency order — pick the first unchecked one. **The plan is for tracking only** — all implementation detail is in the referenced `Ralph/refs/` file.
 3. **Read accumulated learnings**: Open `progress.txt` and read the "Codebase Patterns" section AND the most recent manual intervention entry. These contain critical context about the architecture, established patterns, and decisions from previous iterations.
 4. **Read guardrails**: Open `guardrails.md` and read ALL guardrails. These are hard rules you MUST follow. Key guardrails include:
   - Light-mode only
   - Teal accent `#0D6E6E` (not NHS Blue) for interactive elements
   - 8px border-radius for cards (not 4px)
   - Three-tier shadow system (sm/md/lg)
   - Height-only tile expansion (no opacity fade)
   - Skills frequency: user-specified values (Data Analysis="Twice daily", etc.)
   - Sidebar contains ONLY PersonHeader + Tags + Alerts
   - Elvaro Grotesque font (not DM Sans, Inter, or Roboto)
   - Geist Mono for data/timestamps (not Fira Code in dashboard)
 5. **Implement the item**: Complete the single task you selected. Keep changes focused — one task per iteration. Write production-quality React/TypeScript code.
   **IMPORTANT — Ref files are the source of truth.** If existing code contradicts the ref file, rebuild from the ref spec.
 6. **Run quality checks**: Execute `npm run typecheck`, `npm run lint`, `npm run build`. Fix any issues before proceeding.
 7. **Visual Review** (for visual tasks): After quality checks pass, verify your work in the browser using Playwright MCP:
   a. Navigate to `http://localhost:5173` using `mcp__playwright__browser_navigate`.
   b. **First load only**: The app plays boot→ECG→login (~15s). Use `mcp__playwright__browser_wait_for` with `time: 15`, then click the Log In button to reach the dashboard. On subsequent navigations, the app stays in dashboard phase.
   c. Take a screenshot and compare against `References/GPSystemconcept.html` (open it in a separate tab if needed).
   d. Check: colors match spec, correct font, proper spacing, borders, shadows, layout alignment, teal accent.
   e. Fix discrepancies, re-run quality checks, re-screenshot.
   f. Note the visual review outcome in progress.txt.
 8. **Commit your changes**: Stage and commit all changes with a descriptive message referencing the task.
 9. **Mark the item complete**: In `IMPLEMENTATION_PLAN.md`, change the item from `- [ ]` to `- [x]`.
 10. **Update progress.txt**: Append to the "Iteration Log" section with:
    - Which task you completed
    - Any learnings or codebase patterns discovered (add to "Codebase Patterns" section too)
    - Any issues encountered
    - Design decisions made
    - Visual review outcome
 11. **Commit the progress update**: Stage and commit the updated `IMPLEMENTATION_PLAN.md` and `progress.txt`.
 12. **Recommend model for next iteration**: Look at the NEXT unchecked task. Output a model recommendation:
    ```
    <next-model>sonnet</next-model>
    ```
    or
    ```
    <next-model>opus</next-model>
    ```
    **Decision framework:**
    - **Use `sonnet`** for: configuration tasks, data files, simple wiring, accessibility audits, tasks with very prescriptive specs
    - **Use `opus`** for: visual component builds, complex animation work, tasks requiring aesthetic judgment, command palette, interaction design
    - **Default to `sonnet`** if unsure
 13. **Determine if another iteration is needed**: The project needs another iteration if ANY task is unchecked, quality checks fail, or there are uncommitted changes.
 14. **Send completion signal ONLY if truly complete**: If ALL tasks are verified done, quality checks pass, and no further work is needed:
    ```
    <promise>COMPLETE</promise>
    ```
    DO NOT output this string if there's any chance another iteration is needed.
 ## Critical Rules
 - **ALWAYS read the ref file for your task before writing code**
 - **Only work on ONE task per iteration**
 - **Always read progress.txt AND guardrails.md before starting**
 - **Ref files are the spec — existing code is not**
 - **The plan file is for tracking only** — do not add detail to it
 - **Use TypeScript strictly** — no `any` types, proper interfaces
 - **Follow project structure** — components in `src/components/`, tiles in `src/components/tiles/`, data in `src/data/`
 - **Respect prefers-reduced-motion** — all animations must have instant fallbacks
 - **Keep commits atomic and well-described**
 - **If quality checks fail, fix before committing**
 - **If a task is blocked**, document why in progress.txt and move to next
 ## Reference Files
 Each task references a specific detail file in `Ralph/refs/`:
 | Tasks | Reference File |
 |-------|---------------|
 | Task 1 | `Ralph/refs/ref-01-design-tokens.md` |
 | Task 2 | `Ralph/refs/ref-02-data-types.md` |
 | Tasks 4-6 | `Ralph/refs/ref-03-topbar-sidebar.md` |
 | Task 7 | `Ralph/refs/ref-04-dashboard-layout.md` |
 | Tasks 8-11 | `Ralph/refs/ref-05-card-and-top-tiles.md` |
 | Tasks 12-15 | `Ralph/refs/ref-06-bottom-tiles.md` |
 | Tasks 16-18 | `Ralph/refs/ref-07-interactions.md` |
 | Tasks 19-21 | `Ralph/refs/ref-08-polish.md` |
 Also reference:
 - `References/GPSystemconcept.html` — Visual/structural target for the dashboard
 - `References/CV_v4.md` — Source CV content (roles, achievements, numbers, dates)
 - `CLAUDE.md` — Project architecture, design direction, styling conventions
 Read ONLY the referenced file(s) for your current task. Do not read all ref files at once.
 ## Design Highlights
 **Color Palette (Light-mode only):**
 - Background: `#F0F5F4` (warm sage)
 - Surface/cards: `#FFFFFF`
 - Sidebar: `#F7FAFA` (very light)
 - Accent: `#0D6E6E` (teal)
 - Borders: `#D4E0DE` (structural), `#E4EDEB` (cards)
 - Text: `#1A2B2A` (primary), `#5B7A78` (secondary), `#8DA8A5` (tertiary)
 - Status: `#059669` (success), `#D97706` (amber), `#DC2626` (alert)
 **Typography:**
 - Elvaro Grotesque (`font-ui`) for UI text
 - Geist Mono (`font-geist`) for data, timestamps, coded entries
 - Fira Code for boot/ECG terminal only
 **Layout:**
 - TopBar: fixed, 48px, white, bottom border
 - Sidebar: 272px, light, person header + tags + alerts
 - Main: scrollable card grid, 2 columns desktop, 1 column mobile
 - Cards: 8px radius, shadow-sm, border-light
 **Key Interactions:**
 - Tile expansion: height-only animation, 200ms, accordion
 - KPI flip: CSS perspective 400ms, click to flip/unflip
 - Command palette: Ctrl+K, fuzzy search, keyboard navigation
 - Entrance: staggered topbar → sidebar → content
@@ -1,134 +0,0 @@
 # Guardrails
 Hard rules that MUST be followed in every iteration. Violating these will produce incorrect output.
 ## Design Direction
 ### When: Making ANY aesthetic decision
 **Rule:** The direction is **GP System Dashboard** — a tile-based clinical record system with a light, modern aesthetic. Teal accent (#0D6E6E), light sidebar (#F7FAFA), warm sage background (#F0F5F4), white card surfaces. The clinical metaphor lives in the STRUCTURE (tiles as "record sections", status indicators, medication-style skill entries, coded entries) — not in dark chrome or heavy clinical styling.
 **Why:** The previous dark-sidebar PMR interface is being replaced with the lighter, tile-based GP System concept (`References/GPSystemconcept.html`).
 ## Design System Guardrails
 ### When: Writing ANY visual component
 **Rule:** Light-mode only. Do NOT add dark mode classes, `dark:` prefixes, or theme toggles.
 **Why:** The design direction is light-mode only.
 ### When: Setting border-radius on cards and tiles
 **Rule:** Use 8px border-radius (var(--radius)) for cards and tiles. Use 6px (var(--radius-sm)) for inner elements (metric cards, activity items, tags). The only exception is the LoginScreen card which uses 12px, and the command palette which uses 12px.
 **Why:** The GP System concept uses 8px radius, slightly more rounded than the old 4px clinical style, reflecting the lighter aesthetic.
 ### When: Using monospace/code font
 **Rule:** Use Geist Mono (`font-family: 'Geist Mono', monospace`) for timestamps, session info, dates, GPhC number, and coded data values. Fira Code is used in boot/ECG phases only.
 **Why:** Geist Mono is the specified monospace font for the dashboard interface.
 ### When: Choosing the UI text font
 **Rule:** Use Elvaro Grotesque (font-ui) as primary, Blumir (font-ui-alt) as alternative. Do NOT use Inter, Roboto, or system defaults. DM Sans appears in the concept HTML but is NOT the production font — use Elvaro Grotesque.
 **Why:** Premium typography is the primary vehicle for the luxury feel. The concept HTML uses DM Sans as a placeholder; the production build uses the licensed premium fonts.
 ### When: Adding shadows to cards or tiles
 **Rule:** Use the three-tier shadow system:
 - `--shadow-sm`: `0 1px 2px rgba(26,43,42,0.05)` (default card state)
 - `--shadow-md`: `0 2px 8px rgba(26,43,42,0.08)` (hover / interactive)
 - `--shadow-lg`: `0 8px 32px rgba(26,43,42,0.12)` (command palette, overlays)
 **Why:** Shadows create depth hierarchy. sm=resting, md=interactive, lg=overlay.
 ### When: Styling borders
 **Rule:** Use `1px solid var(--border-light)` (#E4EDEB) for card and tile borders. Use `1px solid var(--border)` (#D4E0DE) for structural borders (sidebar right edge, topbar bottom, section dividers).
 **Why:** Two-tier border system: lighter for cards, slightly stronger for structural elements.
 ### When: Choosing accent/interactive colors
 **Rule:** Use teal `#0D6E6E` (var(--accent)) for interactive elements: links, active states, avatar gradient, dots, hover highlights. Hover: `#0A8080`. Accent-light: `rgba(10,128,128,0.08)` for subtle backgrounds.
 **Why:** Teal is the primary accent in the GP System concept. It replaces NHS Blue as the interactive color.
 ### When: Using status colors
 **Rule:** Status colors: success=`#059669`, amber=`#D97706`, alert=`#DC2626`, purple=`#7C3AED` (education). Each with matching light/border variants. Always pair colored indicators with text labels.
 **Why:** Traffic light convention. Color-only indicators violate WCAG.
 ## Layout Guardrails
 ### When: Building the dashboard layout
 **Rule:** Three-zone layout: TopBar (fixed, 48px) + Sidebar (fixed left, 272px) + Main content (scrollable card grid). Main content has 24px-28px padding and card grid with 16px gap. Grid: 2 columns on desktop, 1 column below 900px.
 **Why:** Matches the GP System concept layout structure.
 ### When: Ordering tiles in the card grid
 **Rule:** Tile order: Patient Summary (full) → Latest Results (half) + Repeat Medications (half) → Last Consultation (full) → Career Activity (full) → Education (full) → Projects (full). Full-width tiles span both columns.
 **Why:** This ordering follows the concept layout with the user's addition of Patient Summary at the top.
 ## Sidebar Guardrails
 ### When: Building the sidebar
 **Rule:** Sidebar contains ONLY: PersonHeader (avatar, name, title, status, details) → Tags → Alerts/Highlights. Active Projects, Core Skills, and Education are in the MAIN CONTENT as tiles, NOT in the sidebar.
 **Why:** User explicitly requested moving Projects, Skills, and Education from sidebar to main dashboard tiles.
 ## Interaction Guardrails
 ### When: Expanding/collapsing tile content
 **Rule:** Height animation ONLY (200ms, ease-out). Do NOT fade opacity on content. Single-expand accordion — only one item expanded at a time within a tile.
 **Why:** Consistent expand/collapse behavior. Opacity fade was explicitly prohibited.
 ### When: Building the command palette
 **Rule:** Trigger via Ctrl+K or search bar click. Overlay with backdrop blur. ESC to close. Arrow key navigation. Fuzzy search via fuse.js.
 **Why:** Matches concept interaction pattern.
 ### When: Building KPI flip cards
 **Rule:** Click to flip metric card (front=value, back=explanation). 400ms CSS perspective flip or instant swap with reduced motion. Only one card flipped at a time.
 **Why:** User requested interactive KPI exploration with explanation text.
 ## Login Screen Guardrails
 ### When: Building the login typing animation
 **Rule:** Username types at 80ms/char. Password dots at 60ms/dot. After typing completes, the "Log In" button becomes interactive — the user clicks it. It is NOT auto-triggered.
 **Why:** The natural pace lets users absorb what's happening. The interactive button creates a moment of user agency.
 ## Component Guardrails
 ### When: Displaying traffic light status indicators
 **Rule:** Colored dots must ALWAYS have text labels. Never use color as the sole indicator.
 **Why:** WCAG — color cannot be the only means of communicating information.
 ### When: Writing table or list markup inside tiles
 **Rule:** Use semantic markup. Tables use `<table>`, `<thead>`, `<th scope="col">`, `<tbody>`, `<tr>`, `<td>`. Lists use `<ul>`/`<ol>` with `<li>`. No div-based tables.
 **Why:** Screen readers require native semantics.
 ### When: Using icons
 **Rule:** Use `lucide-react` icons only. No unicode symbols, no inline SVG copied from external sources. Exception: the concept's SVG icons should be converted to their lucide-react equivalents (e.g., concept's house icon → `Home` from lucide-react).
 **Why:** Consistent icon system, tree-shakeable, accessible.
 ## Data Guardrails
 ### When: Displaying CV content
 **Rule:** All data must come from `src/data/*.ts` files. Do NOT hardcode content in components or change any numbers/dates. New data files (profile.ts, tags.ts, alerts.ts, kpis.ts, skills.ts) must be accurate to CV_v4.md.
 **Why:** Data has been validated against CV_v4.md. Single source of truth.
 ### When: Building the "Repeat Medications" (skills) tile
 **Rule:** Use the exact frequencies specified by the user: Data Analysis="Twice daily", Power BI="Once weekly", Python="Daily", SQL="Daily", JavaScript/TypeScript="When required". Include "years of experience" like "length of time on medication".
 **Why:** User explicitly specified these frequency values for the medication metaphor.
 ## Visual Review Guardrails
 ### When: Completing any visual task
 **Rule:** After quality checks, open `http://localhost:5173` via Playwright MCP tools, take a screenshot, and compare against `References/GPSystemconcept.html`. Fix visual discrepancies. If browser tools are unavailable, note in progress.txt and proceed.
 **Why:** Code review alone cannot catch visual issues.
 ### When: Browser tools fail
 **Rule:** Skip visual review, note it in progress.txt, continue. Do NOT retry more than twice.
 **Why:** Visual review is valuable but not blocking.
 ## Technical Guardrails
 ### When: Writing TypeScript
 **Rule:** No `any` types. All props must have typed interfaces.
 **Why:** Strict typing prevents runtime errors.
 ### When: Adding animations
 **Rule:** All animations must respect `prefers-reduced-motion`. With reduced motion: all animations skip to final state instantly.
 **Why:** Accessibility requirement.
 ### When: Running quality checks
 **Rule:** Run `npm run typecheck`, `npm run lint`, and `npm run build` after EVERY task. Fix all errors before committing.
 **Why:** Build failures compound across iterations.
 ### When: Referencing the concept design
 **Rule:** The reference design is `References/GPSystemconcept.html`. Open it in a browser or read the HTML to understand the visual target. The concept is the LAYOUT reference; production fonts and some colors differ (see font and color guardrails).
 **Why:** The concept HTML is the single source of truth for layout and spatial composition.
@@ -0,0 +1,53 @@
 # Significant Interventions Carousel (Ralph Prompt)
 ## Goal
 Replace the current one-column **Active Projects** list with a **Significant Interventions** carousel that supports thumbnail cards and auto-scroll behavior (Embla-based), while preserving panel-open behavior on card click.
 ## Scope
 - Rename all relevant UI/content references from **Active Projects** to **Significant Interventions**.
 - Replace `ProjectsTile` list layout with an Embla carousel.
 - Use auto-scroll as the default carousel behavior.
 - Keep room for thumbnails now; real thumbnail assets will be added later.
 ## Implementation Task List
 - [ ] Install carousel dependencies:
  - `embla-carousel-react`
  - `embla-carousel-autoplay`
 - [ ] Update tile heading in `src/components/tiles/ProjectsTile.tsx`:
  - `ACTIVE PROJECTS` -> `SIGNIFICANT INTERVENTIONS`
 - [ ] Refactor `ProjectsTile` in `src/components/tiles/ProjectsTile.tsx`:
  - Replace vertical list container with Embla viewport/container/slides
  - Convert each project item to a carousel slide card
  - Add thumbnail region in each slide (use placeholder block/image container for now)
  - Keep keyboard activation (`Enter`/`Space`) and click-to-open detail panel
 - [ ] Implement auto-scroll behavior:
  - Use Embla autoplay plugin with sensible defaults (continuous feel, pauses on hover/focus)
  - Respect reduced motion (`prefers-reduced-motion`) by disabling autoplay
 - [ ] Responsive behavior:
  - Mobile: single-card view
  - Tablet/Desktop: multi-card visible area (based on available width)
  - Ensure overflow clipping and smooth transitions
 - [ ] Update navigation/search labels to match naming:
  - `src/components/SubNav.tsx`: `Projects` -> `Significant Interventions`
  - `src/lib/search.ts`: `Active Projects` -> `Significant Interventions` (section type and related labels/comments)
 - [ ] Keep detail panel integration unchanged:
  - Clicking a carousel card still calls `openPanel({ type: 'project', investigation: project })`
 - [ ] Styling pass:
  - Align with current dashboard tokens (`--surface`, `--border-light`, `--accent`, etc.)
  - Ensure cards remain readable without thumbnails
 ## Acceptance Criteria
 - The dashboard section title displays **Significant Interventions**.
 - The old one-column projects list is replaced by a working carousel.
 - Carousel auto-scrolls by default and pauses appropriately on interaction.
 - In reduced-motion environments, carousel does not auto-scroll.
 - Clicking or keyboard-activating a card opens the existing project detail panel.
 - Layout works on mobile and desktop without overflow bugs.
 - Search/navigation language no longer references **Active Projects**.
 ## Notes for Implementation
 - Thumbnail assets are intentionally deferred; implement with placeholders now.
 - Keep the component name `ProjectsTile` for this pass to minimize refactor risk; rename component/file in a later cleanup task if desired.