# Implementation Workflow: Adding Depth to the GP Clinical Record

> Generated: Feb 2026
> Source: `Ralph/depth-requirements.md` + `Ralph/depth-design.md`
> Prerequisite: Task 21 (cleanup) from current plan should be completed first

---

## Dependency Graph

```
Phase 1: Core Infrastructure
  T1  ─── Types & CSS foundations
  T2  ─── DetailPanelContext + DetailPanel component ──── depends on T1
  T3  ─── useFocusTrap hook ─────────────────────────── depends on T1
  T4  ─── SubNav + useActiveSection update ──────────── depends on T1
  T5  ─── DashboardLayout restructure ──────────────── depends on T2, T3, T4

Phase 2: Data Expansion
  T6  ─── Expand skills.ts (5 → ~20, categorised) ──── depends on T1
  T7  ─── Add KPI stories to kpis.ts ────────────────── depends on T1
  T8  ─── Create constellation.ts data ──────────────── depends on T6
  T9  ─── Create educationExtras.ts ─────────────────── depends on T1

Phase 3: Tile Modifications (parallel where possible)
  T10 ─── LatestResultsTile (bigger numbers, panel) ─── depends on T2, T7
  T11 ─── CoreSkillsTile (full width, categorised) ──── depends on T2, T6
  T12 ─── ProjectsTile (half width, card grid) ──────── depends on T2
  T13 ─── LastConsultationTile (panel trigger) ──────── depends on T2
  T14 ─── CareerActivityTile (panel triggers, hover) ── depends on T2
  T15 ─── EducationTile (richer content, panel) ─────── depends on T2, T9
  T16 ─── PatientSummaryTile (structured presentation)─ depends on T5

Phase 4: Detail Panel Renderers
  T17 ─── KPIDetail renderer ────────────────────────── depends on T10
  T18 ─── ConsultationDetail renderer ───────────────── depends on T13, T14
  T19 ─── ProjectDetail renderer ────────────────────── depends on T12
  T20 ─── SkillDetail + SkillsAllDetail renderers ───── depends on T11
  T21 ─── EducationDetail renderer ──────────────────── depends on T15

Phase 5: Career Constellation (D3.js)
  T22 ─── Install d3, scaffold CareerConstellation ──── depends on T8
  T23 ─── D3 force graph rendering ──────────────────── depends on T22
  T24 ─── Hover/click interactions → detail panel ───── depends on T23, T18, T20
  T25 ─── Constellation accessibility ───────────────── depends on T23

Phase 6: Login Refresh
  T26 ─── LoginScreen visual restyle ────────────────── independent
  T27 ─── Username → a.recruiter + connection status ── depends on T26
  T28 ─── Post-login loading state ──────────────────── depends on T27
  T29 ─── TopBar session name update ────────────────── depends on T28

Phase 7: Polish & Integration
  T30 ─── CommandPalette updates for new content ────── depends on T17-T21
  T31 ─── Responsive testing (panels, sub-nav) ──────── depends on T5, T2
  T32 ─── prefers-reduced-motion audit ──────────────── depends on all
  T33 ─── Final visual review + cleanup ─────────────── depends on all
```

---

## Pre-Flight: Complete Task 21 (Cleanup)

Before starting depth work, the current plan's final task must be done:

- [ ] Remove unused old components (PatientBanner, ClinicalSidebar, Breadcrumb, MobileBottomNav, PMRInterface)
- [ ] Remove old view files (`src/components/views/*.tsx`)
- [ ] Remove old portfolio components (Contact, Education, Experience, FloatingNav, Footer, Hero, Projects, Skills)
- [ ] Remove unused hooks (useScrollCondensation if unused)
- [ ] Verify no dead imports
- [ ] `npm run build` clean

**Checkpoint:** Clean build with zero unused components.

---

## Phase 1: Core Infrastructure

### Task 1: Types & CSS Foundations

**Files:** `src/types/pmr.ts`, `src/index.css`
**Effort:** Small

Add all new TypeScript types and CSS custom properties needed by subsequent tasks.

**Types to add (`src/types/pmr.ts`):**
- `SkillCategory` — `'Technical' | 'Domain' | 'Leadership'`
- `KPIStory` — context, role, outcomes[], period
- Augment `KPI` with optional `story?: KPIStory`
- `ConstellationNode` — id, type, label, domain, org data
- `ConstellationLink` — source, target, strength
- `DetailPanelContent` — discriminated union (kpi | skill | skills-all | consultation | project | education | career-role)
- `EducationExtra` — documentId, extracurriculars, researchDescription, programmeDetail
- Add `category?: SkillCategory` field to `SkillMedication`

**CSS to add (`src/index.css`):**
```css
--subnav-height: 36px;
--panel-narrow: 400px;
--panel-wide: 60vw;
--backdrop-blur: 4px;
--backdrop-bg: rgba(26,43,42,0.15);
```

Plus panel animation keyframes (`panel-slide-in`, `panel-slide-out`, `backdrop-fade-in`) with `prefers-reduced-motion` overrides.

**Validation:** `npm run typecheck` passes.

---

### Task 2: DetailPanelContext + DetailPanel Component

**New files:** `src/contexts/DetailPanelContext.tsx`, `src/components/DetailPanel.tsx`
**Depends on:** T1
**Effort:** Medium

**DetailPanelContext (`src/contexts/DetailPanelContext.tsx`):**
- `DetailPanelContextValue`: `{ content, openPanel, closePanel, isOpen }`
- `DetailPanelProvider` wraps children, manages state
- Width mapping: deterministic from `content.type` (narrow for kpi/skill/education, wide for consultation/project/career-role)
- Title mapping: derived from content data

**DetailPanel (`src/components/DetailPanel.tsx`):**
- Full-screen backdrop (`backdrop-filter: blur(4px)`, click to close)
- Panel slides from right (`translateX(100%)` → `translateX(0)`, 250ms ease-out)
- Adaptive width: `var(--panel-narrow)` or `var(--panel-wide)` based on content type
- Header: close button (X, lucide `X` icon) + dot + section title
- Scrollable content area renders `{children}` (or delegates to content renderers)
- Close triggers: backdrop click, Escape key, X button
- `aria-modal="true"`, `role="dialog"`, `aria-labelledby`
- Mobile: both widths become 100vw
- `prefers-reduced-motion`: instant appear, no slide

**Integration:** Initially renders placeholder content ("Detail panel for {type}"). Real content renderers come in Phase 4.

**Validation:** Panel opens/closes correctly with keyboard and mouse. `npm run typecheck` + `npm run build`.

---

### Task 3: useFocusTrap Hook

**New file:** `src/hooks/useFocusTrap.ts`
**Depends on:** T1
**Effort:** Small

- `useFocusTrap(containerRef: RefObject<HTMLElement>, isActive: boolean): void`
- When active: Tab/Shift+Tab cycle within container, first focusable element receives focus
- When deactivated: focus returns to the element that was focused before trap activated
- Used by DetailPanel (and already used by CommandPalette — consider if CommandPalette can share this hook)

**Validation:** Tab cycling confirmed in DetailPanel. Focus returns correctly on close.

---

### Task 4: SubNav + useActiveSection Update

**New file:** `src/components/SubNav.tsx`
**Modified file:** `src/hooks/useActiveSection.ts`
**Depends on:** T1
**Effort:** Medium

**SubNav component:**
- Fixed/sticky below TopBar (`top: 48px`, `z-index: 99`)
- 5 sections: Overview | Skills | Experience | Projects | Education
- Click → smooth-scroll to `[data-tile-id="${tileId}"]`
- Active tab: teal underline (2px), text colour `var(--accent)`
- Inactive: `var(--text-secondary)`
- Height: 36px, background `var(--surface)`, bottom border
- Tabs: 13px, font-weight 500, gap 24px
- Teal underline slides with 200ms transition

**useActiveSection update:**
- Observe `data-tile-id` attributes on tile elements
- Map tile IDs to section IDs (patient-summary→overview, core-skills→skills, etc.)
- Use IntersectionObserver with appropriate thresholds

**Tile `data-tile-id` attributes:** Ensure each tile's Card has this attribute. May need to add `tileId` prop to Card if not already present.

**Validation:** Scroll triggers correct active tab. Click scrolls to correct section. `npm run build`.

---

### Task 5: DashboardLayout Restructure

**Modified file:** `src/components/DashboardLayout.tsx`
**Depends on:** T2, T3, T4
**Effort:** Medium

**Changes:**
1. Wrap with `DetailPanelProvider` (in App.tsx or DashboardLayout)
2. Add `SubNav` between TopBar and content
3. Reorder tiles:
   - PatientSummaryTile (full width)
   - LatestResultsTile (half) + ProjectsTile (half) — side by side
   - CoreSkillsTile (full width) — was half, now full
   - LastConsultationTile (full width)
   - CareerActivityTile (full width)
   - EducationTile (full width)
4. Render `DetailPanel` alongside CommandPalette
5. Adjust margin-top: `calc(var(--topbar-height) + var(--subnav-height))`
6. Add `data-tile-id` attributes to tile wrappers

**Validation:** Layout renders correctly with new tile order. SubNav visible. Detail panel renders. No visual regressions. `npm run build`.

**Checkpoint:** Core infrastructure complete. Detail panel opens (with placeholder content), sub-nav works, new tile order in place.

---

## Phase 2: Data Expansion

### Task 6: Expand Skills Data

**Modified file:** `src/data/skills.ts`
**Depends on:** T1
**Effort:** Medium

Expand from 5 → ~20 skills across 3 categories. Each skill retains the medication metaphor.

**Categories:**
- **Technical (8):** Data Analysis, Python, SQL, Power BI, JavaScript/TypeScript, Excel, Algorithm Design, Data Pipelines
- **Healthcare Domain (6):** Medicines Optimisation, Population Health, NICE TA Implementation, Health Economics, Clinical Pathways, Controlled Drugs
- **Strategic & Leadership (7):** Budget Management, Stakeholder Engagement, Pharmaceutical Negotiation, Team Development, Change Management, Financial Modelling, Executive Communication

Each skill: `id`, `name`, `genericName`, `frequency`, `startYear`, `yearsOfExperience`, `status`, `proficiency`, `category`

**Source:** CV_v4.md Core Competencies section.

**Validation:** Types check. Existing CoreSkillsTile still renders (it will show all skills or first 5 depending on current implementation).

---

### Task 7: Add KPI Stories

**Modified file:** `src/data/kpis.ts`
**Depends on:** T1
**Effort:** Small

Add `story` field to each of the 4 KPIs:

1. **£220M** — prescribing budget, forecasting models, ICB board accountability
2. **£14.6M** — efficiency programme, data analysis identification, over-target by Oct 2025
3. **9+ Years** — career span Aug 2016–present, progression narrative
4. **1.2M** — population served, Norfolk & Waveney ICS scope

**Source:** CV_v4.md role descriptions.

**Validation:** Types check. Existing tile unaffected (story field is optional).

---

### Task 8: Create Constellation Data

**New file:** `src/data/constellation.ts`
**Depends on:** T6 (needs skill IDs)
**Effort:** Medium

Define role-skill mapping for the D3 graph:

- 6 role nodes (Paydens → Tesco Duty → Tesco Manager → NHS HCD → NHS Deputy → NHS Interim)
- Skill nodes (from expanded skills data)
- Links connecting skills to roles with strength values
- Colour assignments: role nodes get org colours, skill nodes get domain colours

**Validation:** Types check. Data importable.

---

### Task 9: Create Education Extras

**New file:** `src/data/educationExtras.ts`
**Depends on:** T1
**Effort:** Small

Expanded detail for education entries:
- MPharm: extracurriculars (Pharmacy Society President, Ultimate Frisbee VP, Alzheimer's Society), research project description
- Mary Seacole: programme detail (change management, healthcare leadership, system-level thinking)
- A-Levels: no extras needed

**Source:** CV_v4.md Education section.

**Validation:** Types check. Data importable.

**Checkpoint:** All data expanded and ready for consumption by tiles and detail renderers.

---

## Phase 3: Tile Modifications

Tasks in this phase can be done in parallel where dependencies allow.

### Task 10: LatestResultsTile — Remove Flip, Add Panel

**Modified file:** `src/components/tiles/LatestResultsTile.tsx`
**Modified file:** `src/index.css` (remove flip CSS if dedicated)
**Depends on:** T2, T7
**Effort:** Medium

**Changes:**
1. Remove CSS perspective flip animation entirely
2. Remove `.metric-card`, `.metric-card-inner`, `.metric-card-front`, `.metric-card-back` CSS classes
3. Replace with clickable KPI cards:
   - Headline number at 28-32px, bold (700), coloured by variant
   - Label at 12px, weight 500
   - Sub-text at 10px, Geist Mono, tertiary
4. Click → `openPanel({ type: 'kpi', kpi })`
5. Hover: border colour shift + shadow deepens
6. Keyboard: Enter/Space triggers panel

**Validation:** KPIs display with bigger numbers. Click opens detail panel (placeholder). No flip remnants. `npm run build`.

---

### Task 11: CoreSkillsTile — Full Width, Categorised

**Modified file:** `src/components/tiles/CoreSkillsTile.tsx`
**Depends on:** T2, T6
**Effort:** Large

**Changes:**
1. Change from half-width to full-width (`full` prop on Card)
2. Display skills grouped by category (Technical, Healthcare Domain, Strategic & Leadership)
3. Category headers: thin divider line + label (styled like sidebar section dividers)
4. Show top 3-4 skills per category on the dashboard
5. "View all" button per category → `openPanel({ type: 'skills-all', category })`
6. Individual skill click → `openPanel({ type: 'skill', skill })`
7. Retain medication metaphor (frequency, status badge)
8. Remove single-expand accordion for skills (replaced by panel interaction)

**Validation:** Skills display in 3 categories. View all opens panel. Individual click opens panel. `npm run build`.

---

### Task 12: ProjectsTile — Half Width, Card Grid

**Modified file:** `src/components/tiles/ProjectsTile.tsx`
**Depends on:** T2
**Effort:** Medium

**Changes:**
1. Change from full-width to half-width (remove `full` prop)
2. Position alongside LatestResultsTile in the grid (handled by T5 layout reorder)
3. Compact card layout: status dot + name + year (right-aligned)
4. Tech stack as small inline tags
5. Click → `openPanel({ type: 'project', investigation })`
6. Remove in-place expansion (replaced by panel)
7. Hover: border shift, shadow deepens

**Validation:** Projects render in half-width alongside KPIs. Click opens panel. `npm run build`.

---

### Task 13: LastConsultationTile — Panel Trigger

**Modified file:** `src/components/tiles/LastConsultationTile.tsx`
**Depends on:** T2
**Effort:** Small

**Changes:**
1. Add "View full record" button/link at the bottom
2. Click → `openPanel({ type: 'consultation', consultation })`
3. Make the tile header area clickable too
4. Keep existing inline content (header info row, achievements preview)

**Validation:** Click opens panel. Existing content unchanged. `npm run build`.

---

### Task 14: CareerActivityTile — Panel Triggers, Hover

**Modified file:** `src/components/tiles/CareerActivityTile.tsx`
**Depends on:** T2
**Effort:** Medium

**Changes:**
1. Timeline items: click → `openPanel({ type: 'career-role', consultation })` (for role entries)
2. Remove in-place accordion expansion (replaced by panel)
3. Hover preview: items lift slightly on hover, show 1-2 lines of preview text
4. Keep colour-coded dots and entry type styling
5. Reserve space for CareerConstellation embed (Phase 5)

**Note:** Extended timeline back to school (2009) — add education entries (Highworth Grammar, UEA) to the timeline data if not already present.

**Validation:** Click opens panel for role items. Hover shows preview. No accordion. `npm run build`.

---

### Task 15: EducationTile — Richer Content, Panel

**Modified file:** `src/components/tiles/EducationTile.tsx`
**Depends on:** T2, T9
**Effort:** Small

**Changes:**
1. Show richer inline content: research project score (75.1%), OSCE score (80%), A-level grades
2. Each education entry clickable → `openPanel({ type: 'education', document })`
3. Hover: border shift

**Validation:** Richer content visible. Click opens panel. `npm run build`.

---

### Task 16: PatientSummaryTile — Structured Presentation

**Modified file:** `src/components/tiles/PatientSummaryTile.tsx`
**Depends on:** T5
**Effort:** Small

**Changes:**
1. Use full profile paragraph from CV_v4.md (verify `profile.ts` has complete text)
2. Pull out key highlights as a visual strip (years of experience, population served, budget)
3. Break up wall of text with hierarchy (bold key phrases, structured paragraphs)

**Validation:** Profile reads well, not a wall of text. Highlight strip visible. `npm run build`.

**Checkpoint:** All tiles modified. Dashboard shows new layout with panel triggers on all interactive elements. Detail panel opens with placeholder content for each type.

---

## Phase 4: Detail Panel Renderers

### Task 17: KPIDetail Renderer

**New file:** `src/components/detail/KPIDetail.tsx`
**Depends on:** T10
**Effort:** Medium

**Content:**
- Headline number (large, coloured by variant)
- Context paragraph (from `kpi.story.context`)
- "Your role" paragraph (from `kpi.story.role`)
- Outcome bullets (from `kpi.story.outcomes`)
- Period badge (from `kpi.story.period`)

**Wire into DetailPanel:** When `content.type === 'kpi'`, render `<KPIDetail kpi={content.kpi} />`.

**Validation:** Panel renders full KPI story. Content matches CV_v4.md. `npm run build`.

---

### Task 18: ConsultationDetail Renderer

**New file:** `src/components/detail/ConsultationDetail.tsx`
**Depends on:** T13, T14
**Effort:** Medium

**Content:**
- Role title + organisation + dates
- History paragraph (from `consultation.history`)
- Achievement bullets (from `consultation.examination`)
- Plan/outcomes (from `consultation.plan`)
- Coded entries badges (from `consultation.codedEntries`)

**Validation:** Panel renders full role detail. `npm run build`.

---

### Task 19: ProjectDetail Renderer

**New file:** `src/components/detail/ProjectDetail.tsx`
**Depends on:** T12
**Effort:** Medium

**Content:**
- Project name + year + status badge
- Methodology description
- Tech stack tags
- Results bullets
- External link button (if `investigation.link` exists)

**Validation:** Panel renders full project detail. External link works. `npm run build`.

---

### Task 20: SkillDetail + SkillsAllDetail Renderers

**New files:** `src/components/detail/SkillDetail.tsx`, `src/components/detail/SkillsAllDetail.tsx`
**Depends on:** T11
**Effort:** Medium

**SkillDetail:**
- Skill name + frequency + status badge
- Proficiency bar (visual)
- Years of experience
- "Used in" section: roles that used this skill (from constellation mapping, or hardcoded until T8 data available)

**SkillsAllDetail:**
- Full categorised list grouped by Technical / Domain / Leadership
- Each skill row clickable → switches panel to individual SkillDetail
- Category headers matching tile styling

**Validation:** Both renderers work. Skill click within SkillsAll switches to SkillDetail. `npm run build`.

---

### Task 21: EducationDetail Renderer

**New file:** `src/components/detail/EducationDetail.tsx`
**Depends on:** T15
**Effort:** Small

**Content:**
- Title + institution + dates + classification
- Research project description (if MPharm, from `educationExtras`)
- Extracurricular activities (from `educationExtras`)
- Programme detail (if Mary Seacole, from `educationExtras`)
- Notes from document data

**Validation:** Panel renders education detail with extras. `npm run build`.

**Checkpoint:** All detail panel content renderers complete. Every interactive element in the dashboard opens its corresponding rich detail view.

---

## Phase 5: Career Constellation (D3.js)

### Task 22: Install D3, Scaffold CareerConstellation

**Modified file:** `package.json` (add `d3`, `@types/d3`)
**New file:** `src/components/CareerConstellation.tsx` (scaffold)
**Depends on:** T8
**Effort:** Small

- `npm install d3 @types/d3`
- Create component with `useRef<SVGSVGElement>` for the SVG container
- Render an empty SVG with viewBox, correct container sizing
- Import constellation data

**Validation:** Component renders empty SVG. d3 imports resolve. `npm run build`.

---

### Task 23: D3 Force Graph Rendering

**Modified file:** `src/components/CareerConstellation.tsx`
**Depends on:** T22
**Effort:** Large

**Implement the force-directed graph:**
- `d3.forceSimulation` with charge, link, x (chronological), y (centred), collision forces
- Role nodes: 24px radius, org colour fill, white text
- Skill nodes: 10px radius, domain colour-coded (clinical=green, technical=teal, leadership=amber)
- Links: thin lines (1px), `var(--border)`, opacity 0.3
- Container: full width of CareerActivityTile, 400px desktop / 300px tablet / 250px mobile
- SVG with responsive viewBox
- Subtle radial gradient background

**D3 integration pattern:**
- D3 operates imperatively via `useEffect` on the SVG ref
- React handles wrapper, D3 handles graph
- No React state for node positions (performance)

**Validation:** Graph renders with nodes and links. Nodes positioned chronologically. `npm run build`.

---

### Task 24: Constellation Interactions → Detail Panel

**Modified file:** `src/components/CareerConstellation.tsx`
**Depends on:** T23, T18, T20
**Effort:** Medium

**Hover interactions:**
- Hover role → connected skill nodes scale up, links brighten to `var(--accent)`, non-connected nodes fade to 0.15 opacity
- Hover skill → all connected role nodes highlight, link paths illuminate
- Tooltip with node name on hover

**Click interactions:**
- Click role → `onRoleClick(id)` → opens ConsultationDetail panel
- Click skill → `onSkillClick(id)` → opens SkillDetail panel

**Validation:** Hover highlighting works correctly. Click opens correct detail panels.

---

### Task 25: Constellation Accessibility

**Modified file:** `src/components/CareerConstellation.tsx`
**Depends on:** T23
**Effort:** Medium

- `role="img"` on SVG with `aria-label`
- Screen-reader-only text description of graph structure
- Keyboard navigation: Tab through role nodes, Enter to open detail
- `prefers-reduced-motion`: disable force simulation animation, render static final layout
- Focus indicators on nodes when keyboard-navigating

**Validation:** Screen reader describes graph. Keyboard nav works. Reduced motion shows static layout. `npm run build`.

**Checkpoint:** Career Constellation complete and integrated into CareerActivityTile. Interactive, accessible, visually impressive.

---

## Phase 6: Login Refresh

### Task 26: LoginScreen Visual Restyle

**Modified file:** `src/components/LoginScreen.tsx`
**Depends on:** None (independent)
**Effort:** Medium

**Colour changes:**
- `#005EB8` → `#0D6E6E` (shield icon bg, active field border, cursor, button)
- `#004D9F` → `#0A8080` (button hover)
- `#004494` → `#085858` (button pressed)
- Background: `#1E293B` → keep or lighten to `#1A2B2A`

**Typography:**
- Ensure Elvaro Grotesque is used (not DM Sans or system defaults)
- Shadows should match three-tier system

**Validation:** Login looks cohesive with dashboard. Teal accents throughout. `npm run build`.

---

### Task 27: Username → a.recruiter + Connection Status

**Modified file:** `src/components/LoginScreen.tsx`
**Depends on:** T26
**Effort:** Medium

**Username change:**
- Typed username: `a.recruiter` (not `A.CHARLWOOD`)
- Password typing remains as dots

**Connection status indicator (below login button):**
- New state: `ConnectionState = 'connecting' | 'connected'`
- Initial: red dot + "Awaiting secure connection..."
- After ~2000ms: green dot + "Secure connection established"
- Dot: 6px circle, colour transitions with 300ms ease-out
- Text: 10px, Geist Mono, tertiary colour
- Login button disabled until BOTH `typingComplete` AND `connectionState === 'connected'`

**Validation:** Username types as `a.recruiter`. Connection dot transitions red→green. Button enables correctly.

---

### Task 28: Post-Login Loading State

**Modified file:** `src/components/LoginScreen.tsx`
**Depends on:** T27
**Effort:** Small

- On login click: `isLoading = true`
- Card content replaces with: spinner + "Loading clinical records..."
- Duration: ~600ms
- Then calls `onComplete()` → dashboard materialises

**Validation:** Brief loading state visible between login click and dashboard. Feels purposeful, not slow.

---

### Task 29: TopBar Session Name Update

**Modified file:** `src/components/TopBar.tsx`
**Depends on:** T28
**Effort:** Tiny

- Change session display: `Dr. A.CHARLWOOD` → `A.RECRUITER`
- Geist Mono font (should already be the case)

**Validation:** TopBar shows `A.RECRUITER`. `npm run build`.

**Checkpoint:** Login flow refreshed with teal aesthetic, recruiter narrative, connection status, and loading state.

---

## Phase 7: Polish & Integration

### Task 30: CommandPalette Updates

**Modified file:** `src/components/CommandPalette.tsx`, `src/lib/search.ts`
**Depends on:** T17-T21
**Effort:** Medium

- Update search index to include expanded skills (20 skills vs 5)
- Add "View [X] detail" actions that open the detail panel directly
- Ensure palette results link to panel opens, not just scroll-to-section
- Update grouping if new content types warrant it

**Validation:** Search finds all 20 skills. Selecting a result opens the detail panel. `npm run build`.

---

### Task 31: Responsive Testing

**Modified file:** Various
**Depends on:** T5, T2
**Effort:** Medium

- DetailPanel: both `narrow` and `wide` become 100vw on mobile (<768px)
- SubNav: test on tablet/mobile (may need horizontal scroll or hamburger)
- Constellation: test at 300px/250px heights on smaller screens
- Projects + KPIs: stack vertically on mobile (grid fallback)
- Touch targets: all interactive elements ≥48px

**Validation:** Test at 375px, 768px, 1024px, 1440px breakpoints. No overflow, no hidden content.

---

### Task 32: prefers-reduced-motion Audit

**Modified file:** Various
**Depends on:** All phases
**Effort:** Small

Verify every new animation respects `prefers-reduced-motion: reduce`:
- DetailPanel slide → instant appear
- Backdrop fade → instant
- SubNav underline transition → instant
- Constellation force simulation → static layout
- Connection status dot transition → instant
- Post-login spinner → static indicator
- Hover shadows/borders → can keep (non-motion)

**Validation:** Enable `prefers-reduced-motion` in browser. No animations visible except hover state changes.

---

### Task 33: Final Visual Review + Cleanup

**Depends on:** All phases
**Effort:** Medium

- Visual review against `References/GPSystemconcept.html` (where applicable)
- Content verification against `References/CV_v4.md`
- Dead import cleanup
- Unused CSS removal (old flip card styles)
- Console warning check
- `npm run typecheck` — zero errors
- `npm run lint` — pass (pre-existing warning OK)
- `npm run build` — clean

**Final checkpoint:** Complete depth enhancement. All features working, accessible, responsive, and polished.

---

## Summary

| Phase | Tasks | New Files | Modified Files | Effort |
|-------|-------|-----------|----------------|--------|
| 1. Core Infrastructure | T1-T5 | 3 | 3 | Medium-Large |
| 2. Data Expansion | T6-T9 | 2 | 2 | Medium |
| 3. Tile Modifications | T10-T16 | 0 | 7 | Large |
| 4. Detail Renderers | T17-T21 | 6 | 1 | Medium |
| 5. Career Constellation | T22-T25 | 1 | 1 | Large |
| 6. Login Refresh | T26-T29 | 0 | 2 | Medium |
| 7. Polish | T30-T33 | 0 | Several | Medium |
| **Total** | **33 tasks** | **12 new files** | **~16 modified** | |

### Parallelisation Opportunities

- **T2, T3, T4** can be built in parallel (all depend only on T1)
- **T6, T7, T9** can be built in parallel (all depend only on T1)
- **T10-T15** can be built in parallel (all depend on T2 + their data task)
- **T17-T21** can be built in parallel (each depends on its tile task)
- **T26-T29** (login refresh) is independent of Phases 2-5, can run in parallel

### Critical Path

T1 → T2 → T5 → T10 → T17 (shortest path to first visible depth feature)
T1 → T6 → T8 → T22 → T23 → T24 (path to constellation)

### New Dependency

```bash
npm install d3 @types/d3
```

---

## Next Step

Use `/sc:implement` or begin manual implementation following this workflow phase by phase.