+ );
+}
+```
+
+## Animation patterns
+
+### Enter, update, exit with transitions
+
+```javascript
+useEffect(() => {
+ if (!data || data.length === 0) return;
+
+ const svg = d3.select(svgRef.current);
+
+ const circles = svg.selectAll("circle")
+ .data(data, d => d.id); // Key function for object constancy
+
+ // EXIT: Remove old elements
+ circles.exit()
+ .transition()
+ .duration(500)
+ .attr("r", 0)
+ .remove();
+
+ // UPDATE: Modify existing elements
+ circles
+ .transition()
+ .duration(500)
+ .attr("cx", d => xScale(d.x))
+ .attr("cy", d => yScale(d.y))
+ .attr("fill", "steelblue");
+
+ // ENTER: Add new elements
+ circles.enter()
+ .append("circle")
+ .attr("cx", d => xScale(d.x))
+ .attr("cy", d => yScale(d.y))
+ .attr("r", 0)
+ .attr("fill", "steelblue")
+ .transition()
+ .duration(500)
+ .attr("r", 5);
+
+}, [data]);
+```
+
+### Path morphing
+
+```javascript
+useEffect(() => {
+ if (!data1 || !data2) return;
+
+ const svg = d3.select(svgRef.current);
+
+ const line = d3.line()
+ .x(d => xScale(d.x))
+ .y(d => yScale(d.y))
+ .curve(d3.curveMonotoneX);
+
+ const path = svg.select("path");
+
+ // Morph from data1 to data2
+ path
+ .datum(data1)
+ .attr("d", line)
+ .transition()
+ .duration(1000)
+ .attrTween("d", function() {
+ const previous = d3.select(this).attr("d");
+ const current = line(data2);
+ return d3.interpolatePath(previous, current);
+ });
+
+}, [data1, data2]);
+```
\ No newline at end of file
diff --git a/.claude/skills/d3-viz/references/scale-reference.md b/.claude/skills/d3-viz/references/scale-reference.md
new file mode 100644
index 0000000..61bd981
--- /dev/null
+++ b/.claude/skills/d3-viz/references/scale-reference.md
@@ -0,0 +1,509 @@
+# D3.js Scale Reference
+
+Comprehensive guide to all d3 scale types with examples and use cases.
+
+## Continuous scales
+
+### Linear scale
+
+Maps continuous input domain to continuous output range with linear interpolation.
+
+```javascript
+const scale = d3.scaleLinear()
+ .domain([0, 100])
+ .range([0, 500]);
+
+scale(50); // Returns 250
+scale(0); // Returns 0
+scale(100); // Returns 500
+
+// Invert scale (get input from output)
+scale.invert(250); // Returns 50
+```
+
+**Use cases:**
+- Most common scale for quantitative data
+- Axes, bar lengths, position encoding
+- Temperature, prices, counts, measurements
+
+**Methods:**
+- `.domain([min, max])` - Set input domain
+- `.range([min, max])` - Set output range
+- `.invert(value)` - Get domain value from range value
+- `.clamp(true)` - Restrict output to range bounds
+- `.nice()` - Extend domain to nice round values
+
+### Power scale
+
+Maps continuous input to continuous output with exponential transformation.
+
+```javascript
+const sqrtScale = d3.scalePow()
+ .exponent(0.5) // Square root
+ .domain([0, 100])
+ .range([0, 500]);
+
+const squareScale = d3.scalePow()
+ .exponent(2) // Square
+ .domain([0, 100])
+ .range([0, 500]);
+
+// Shorthand for square root
+const sqrtScale2 = d3.scaleSqrt()
+ .domain([0, 100])
+ .range([0, 500]);
+```
+
+**Use cases:**
+- Perceptual scaling (human perception is non-linear)
+- Area encoding (use square root to map values to circle radii)
+- Emphasising differences in small or large values
+
+### Logarithmic scale
+
+Maps continuous input to continuous output with logarithmic transformation.
+
+```javascript
+const logScale = d3.scaleLog()
+ .domain([1, 1000]) // Must be positive
+ .range([0, 500]);
+
+logScale(1); // Returns 0
+logScale(10); // Returns ~167
+logScale(100); // Returns ~333
+logScale(1000); // Returns 500
+```
+
+**Use cases:**
+- Data spanning multiple orders of magnitude
+- Population, GDP, wealth distributions
+- Logarithmic axes
+- Exponential growth visualisations
+
+**Important:** Domain values must be strictly positive (>0).
+
+### Time scale
+
+Specialised linear scale for temporal data.
+
+```javascript
+const timeScale = d3.scaleTime()
+ .domain([new Date(2020, 0, 1), new Date(2024, 0, 1)])
+ .range([0, 800]);
+
+timeScale(new Date(2022, 0, 1)); // Returns 400
+
+// Invert to get date
+timeScale.invert(400); // Returns Date object for mid-2022
+```
+
+**Use cases:**
+- Time series visualisations
+- Timeline axes
+- Temporal animations
+- Date-based interactions
+
+**Methods:**
+- `.nice()` - Extend domain to nice time intervals
+- `.ticks(count)` - Generate nicely-spaced tick values
+- All linear scale methods apply
+
+### Quantize scale
+
+Maps continuous input to discrete output buckets.
+
+```javascript
+const quantizeScale = d3.scaleQuantize()
+ .domain([0, 100])
+ .range(['low', 'medium', 'high']);
+
+quantizeScale(25); // Returns 'low'
+quantizeScale(50); // Returns 'medium'
+quantizeScale(75); // Returns 'high'
+
+// Get the threshold values
+quantizeScale.thresholds(); // Returns [33.33, 66.67]
+```
+
+**Use cases:**
+- Binning continuous data
+- Heat map colours
+- Risk categories (low/medium/high)
+- Age groups, income brackets
+
+### Quantile scale
+
+Maps continuous input to discrete output based on quantiles.
+
+```javascript
+const quantileScale = d3.scaleQuantile()
+ .domain([3, 6, 7, 8, 8, 10, 13, 15, 16, 20, 24]) // Sample data
+ .range(['low', 'medium', 'high']);
+
+quantileScale(8); // Returns based on quantile position
+quantileScale.quantiles(); // Returns quantile thresholds
+```
+
+**Use cases:**
+- Equal-size groups regardless of distribution
+- Percentile-based categorisation
+- Handling skewed distributions
+
+### Threshold scale
+
+Maps continuous input to discrete output with custom thresholds.
+
+```javascript
+const thresholdScale = d3.scaleThreshold()
+ .domain([0, 10, 20])
+ .range(['freezing', 'cold', 'warm', 'hot']);
+
+thresholdScale(-5); // Returns 'freezing'
+thresholdScale(5); // Returns 'cold'
+thresholdScale(15); // Returns 'warm'
+thresholdScale(25); // Returns 'hot'
+```
+
+**Use cases:**
+- Custom breakpoints
+- Grade boundaries (A, B, C, D, F)
+- Temperature categories
+- Air quality indices
+
+## Sequential scales
+
+### Sequential colour scale
+
+Maps continuous input to continuous colour gradient.
+
+```javascript
+const colourScale = d3.scaleSequential(d3.interpolateBlues)
+ .domain([0, 100]);
+
+colourScale(0); // Returns lightest blue
+colourScale(50); // Returns mid blue
+colourScale(100); // Returns darkest blue
+```
+
+**Available interpolators:**
+
+**Single hue:**
+- `d3.interpolateBlues`, `d3.interpolateGreens`, `d3.interpolateReds`
+- `d3.interpolateOranges`, `d3.interpolatePurples`, `d3.interpolateGreys`
+
+**Multi-hue:**
+- `d3.interpolateViridis`, `d3.interpolateInferno`, `d3.interpolateMagma`
+- `d3.interpolatePlasma`, `d3.interpolateWarm`, `d3.interpolateCool`
+- `d3.interpolateCubehelixDefault`, `d3.interpolateTurbo`
+
+**Use cases:**
+- Heat maps, choropleth maps
+- Continuous data visualisation
+- Temperature, elevation, density
+
+### Diverging colour scale
+
+Maps continuous input to diverging colour gradient with a midpoint.
+
+```javascript
+const divergingScale = d3.scaleDiverging(d3.interpolateRdBu)
+ .domain([-10, 0, 10]);
+
+divergingScale(-10); // Returns red
+divergingScale(0); // Returns white/neutral
+divergingScale(10); // Returns blue
+```
+
+**Available interpolators:**
+- `d3.interpolateRdBu` - Red to blue
+- `d3.interpolateRdYlBu` - Red, yellow, blue
+- `d3.interpolateRdYlGn` - Red, yellow, green
+- `d3.interpolatePiYG` - Pink, yellow, green
+- `d3.interpolateBrBG` - Brown, blue-green
+- `d3.interpolatePRGn` - Purple, green
+- `d3.interpolatePuOr` - Purple, orange
+- `d3.interpolateRdGy` - Red, grey
+- `d3.interpolateSpectral` - Rainbow spectrum
+
+**Use cases:**
+- Data with meaningful midpoint (zero, average, neutral)
+- Positive/negative values
+- Above/below comparisons
+- Correlation matrices
+
+### Sequential quantile scale
+
+Combines sequential colour with quantile mapping.
+
+```javascript
+const sequentialQuantileScale = d3.scaleSequentialQuantile(d3.interpolateBlues)
+ .domain([3, 6, 7, 8, 8, 10, 13, 15, 16, 20, 24]);
+
+// Maps based on quantile position
+```
+
+**Use cases:**
+- Perceptually uniform binning
+- Handling outliers
+- Skewed distributions
+
+## Ordinal scales
+
+### Band scale
+
+Maps discrete input to continuous bands (rectangles) with optional padding.
+
+```javascript
+const bandScale = d3.scaleBand()
+ .domain(['A', 'B', 'C', 'D'])
+ .range([0, 400])
+ .padding(0.1);
+
+bandScale('A'); // Returns start position (e.g., 0)
+bandScale('B'); // Returns start position (e.g., 110)
+bandScale.bandwidth(); // Returns width of each band (e.g., 95)
+bandScale.step(); // Returns total step including padding
+bandScale.paddingInner(); // Returns inner padding (between bands)
+bandScale.paddingOuter(); // Returns outer padding (at edges)
+```
+
+**Use cases:**
+- Bar charts (most common use case)
+- Grouped elements
+- Categorical axes
+- Heat map cells
+
+**Padding options:**
+- `.padding(value)` - Sets both inner and outer padding (0-1)
+- `.paddingInner(value)` - Padding between bands (0-1)
+- `.paddingOuter(value)` - Padding at edges (0-1)
+- `.align(value)` - Alignment of bands (0-1, default 0.5)
+
+### Point scale
+
+Maps discrete input to continuous points (no width).
+
+```javascript
+const pointScale = d3.scalePoint()
+ .domain(['A', 'B', 'C', 'D'])
+ .range([0, 400])
+ .padding(0.5);
+
+pointScale('A'); // Returns position (e.g., 50)
+pointScale('B'); // Returns position (e.g., 150)
+pointScale('C'); // Returns position (e.g., 250)
+pointScale('D'); // Returns position (e.g., 350)
+pointScale.step(); // Returns distance between points
+```
+
+**Use cases:**
+- Line chart categorical x-axis
+- Scatter plot with categorical axis
+- Node positions in network graphs
+- Any point positioning for categories
+
+### Ordinal colour scale
+
+Maps discrete input to discrete output (colours, shapes, etc.).
+
+```javascript
+const colourScale = d3.scaleOrdinal(d3.schemeCategory10);
+
+colourScale('apples'); // Returns first colour
+colourScale('oranges'); // Returns second colour
+colourScale('apples'); // Returns same first colour (consistent)
+
+// Custom range
+const customScale = d3.scaleOrdinal()
+ .domain(['cat1', 'cat2', 'cat3'])
+ .range(['#FF6B6B', '#4ECDC4', '#45B7D1']);
+```
+
+**Built-in colour schemes:**
+
+**Categorical:**
+- `d3.schemeCategory10` - 10 colours
+- `d3.schemeAccent` - 8 colours
+- `d3.schemeDark2` - 8 colours
+- `d3.schemePaired` - 12 colours
+- `d3.schemePastel1` - 9 colours
+- `d3.schemePastel2` - 8 colours
+- `d3.schemeSet1` - 9 colours
+- `d3.schemeSet2` - 8 colours
+- `d3.schemeSet3` - 12 colours
+- `d3.schemeTableau10` - 10 colours
+
+**Use cases:**
+- Category colours
+- Legend items
+- Multi-series charts
+- Network node types
+
+## Scale utilities
+
+### Nice domain
+
+Extend domain to nice round values.
+
+```javascript
+const scale = d3.scaleLinear()
+ .domain([0.201, 0.996])
+ .nice();
+
+scale.domain(); // Returns [0.2, 1.0]
+
+// With count (approximate tick count)
+const scale2 = d3.scaleLinear()
+ .domain([0.201, 0.996])
+ .nice(5);
+```
+
+### Clamping
+
+Restrict output to range bounds.
+
+```javascript
+const scale = d3.scaleLinear()
+ .domain([0, 100])
+ .range([0, 500])
+ .clamp(true);
+
+scale(-10); // Returns 0 (clamped)
+scale(150); // Returns 500 (clamped)
+```
+
+### Copy scales
+
+Create independent copies.
+
+```javascript
+const scale1 = d3.scaleLinear()
+ .domain([0, 100])
+ .range([0, 500]);
+
+const scale2 = scale1.copy();
+// scale2 is independent of scale1
+```
+
+### Tick generation
+
+Generate nice tick values for axes.
+
+```javascript
+const scale = d3.scaleLinear()
+ .domain([0, 100])
+ .range([0, 500]);
+
+scale.ticks(10); // Generate ~10 ticks
+scale.tickFormat(10); // Get format function for ticks
+scale.tickFormat(10, ".2f"); // Custom format (2 decimal places)
+
+// Time scale ticks
+const timeScale = d3.scaleTime()
+ .domain([new Date(2020, 0, 1), new Date(2024, 0, 1)]);
+
+timeScale.ticks(d3.timeYear); // Yearly ticks
+timeScale.ticks(d3.timeMonth, 3); // Every 3 months
+timeScale.tickFormat(5, "%Y-%m"); // Format as year-month
+```
+
+## Colour spaces and interpolation
+
+### RGB interpolation
+
+```javascript
+const scale = d3.scaleLinear()
+ .domain([0, 100])
+ .range(["blue", "red"]);
+// Default: RGB interpolation
+```
+
+### HSL interpolation
+
+```javascript
+const scale = d3.scaleLinear()
+ .domain([0, 100])
+ .range(["blue", "red"])
+ .interpolate(d3.interpolateHsl);
+// Smoother colour transitions
+```
+
+### Lab interpolation
+
+```javascript
+const scale = d3.scaleLinear()
+ .domain([0, 100])
+ .range(["blue", "red"])
+ .interpolate(d3.interpolateLab);
+// Perceptually uniform
+```
+
+### HCL interpolation
+
+```javascript
+const scale = d3.scaleLinear()
+ .domain([0, 100])
+ .range(["blue", "red"])
+ .interpolate(d3.interpolateHcl);
+// Perceptually uniform with hue
+```
+
+## Common patterns
+
+### Diverging scale with custom midpoint
+
+```javascript
+const scale = d3.scaleLinear()
+ .domain([min, midpoint, max])
+ .range(["red", "white", "blue"])
+ .interpolate(d3.interpolateHcl);
+```
+
+### Multi-stop gradient scale
+
+```javascript
+const scale = d3.scaleLinear()
+ .domain([0, 25, 50, 75, 100])
+ .range(["#d53e4f", "#fc8d59", "#fee08b", "#e6f598", "#66c2a5"]);
+```
+
+### Radius scale for circles (perceptual)
+
+```javascript
+const radiusScale = d3.scaleSqrt()
+ .domain([0, d3.max(data, d => d.value)])
+ .range([0, 50]);
+
+// Use with circles
+circle.attr("r", d => radiusScale(d.value));
+```
+
+### Adaptive scale based on data range
+
+```javascript
+function createAdaptiveScale(data) {
+ const extent = d3.extent(data);
+ const range = extent[1] - extent[0];
+
+ // Use log scale if data spans >2 orders of magnitude
+ if (extent[1] / extent[0] > 100) {
+ return d3.scaleLog()
+ .domain(extent)
+ .range([0, width]);
+ }
+
+ // Otherwise use linear
+ return d3.scaleLinear()
+ .domain(extent)
+ .range([0, width]);
+}
+```
+
+### Colour scale with explicit categories
+
+```javascript
+const colourScale = d3.scaleOrdinal()
+ .domain(['Low Risk', 'Medium Risk', 'High Risk'])
+ .range(['#2ecc71', '#f39c12', '#e74c3c'])
+ .unknown('#95a5a6'); // Fallback for unknown values
+```
\ No newline at end of file
diff --git a/.ralph/loop.lock b/.ralph/loop.lock
new file mode 100644
index 0000000..950ec8c
--- /dev/null
+++ b/.ralph/loop.lock
@@ -0,0 +1,5 @@
+{
+ "pid": 864891,
+ "started": "2026-02-16T10:14:58.914587907Z",
+ "prompt": "[no prompt]"
+}
\ No newline at end of file
diff --git a/Ralph/archive/2026-02-16-constellation-overhaul/prd.json b/Ralph/archive/2026-02-16-constellation-overhaul/prd.json
new file mode 100644
index 0000000..d194dad
--- /dev/null
+++ b/Ralph/archive/2026-02-16-constellation-overhaul/prd.json
@@ -0,0 +1,237 @@
+{
+ "project": "Portfolio — Career Constellation Clinical Pathway Overhaul",
+ "branchName": "ralph/constellation-overhaul",
+ "description": "Transform the CareerConstellation D3 force graph from a prototype-quality visualisation into a polished clinical patient pathway diagram — reversed timeline, dynamic height sync, refined node styling, bidirectional hover highlighting, and muted skill nodes that reveal on interaction.",
+ "userStories": [
+ {
+ "id": "US-001",
+ "title": "Reverse timeline direction to top = most recent",
+ "description": "As a visitor, I want the graph's vertical timeline to run top-to-bottom from 2025→2017 so it visually aligns with the reverse-chronological work experience cards in the adjacent column.",
+ "acceptanceCriteria": [
+ "yScale domain reversed: [maxYear, minYear] maps to [topPadding, height - bottomPadding] so 2025 is near the top and 2017 near the bottom",
+ "Role nodes appear at correct reversed year positions",
+ "Year labels along the timeline axis read top-to-bottom: 2025, 2024, ..., 2017",
+ "Skill nodes cluster around their linked roles at the correct vertical positions",
+ "Timeline vertical line, year dots, and horizontal guide lines all reflect the reversed scale",
+ "Screen reader description (srDescription) updated to mention reverse-chronological order",
+ "Typecheck passes (npm run typecheck)"
+ ],
+ "priority": 1,
+ "passes": true,
+ "notes": "In CareerConstellation.tsx, the yScale is defined at line ~153. Change .domain([minYear, maxYear]) to .domain([maxYear, minYear]). This reversal flows through all elements that use yScale. The buildScreenReaderDescription() function at line ~63 should also mention 'reverse-chronological order' in its output. Use the d3-viz skill for implementation."
+ },
+ {
+ "id": "US-002",
+ "title": "Dynamic height matching with work experience column",
+ "description": "As a visitor, I want the constellation graph to fill the same vertical space as the work experience column so both columns appear balanced.",
+ "acceptanceCriteria": [
+ "Remove fixed DESKTOP_HEIGHT, TABLET_HEIGHT, MOBILE_HEIGHT constants from CareerConstellation.tsx",
+ "CareerConstellation accepts an optional containerHeight prop (number) for the target height",
+ "DashboardLayout measures the rendered height of the .chronology-stream element using a ref and ResizeObserver",
+ "DashboardLayout passes the measured height (or a sensible fallback) to CareerConstellation as containerHeight",
+ "Graph container uses containerHeight when available, with a minimum of 400px",
+ "On mobile (single-column layout where .pathway-columns is 1fr), the graph uses a standalone fallback height of 360px",
+ "The viewBox and all D3 scales update correctly when height changes",
+ "Typecheck passes (npm run typecheck)",
+ "Verify in browser: expand/collapse work experience cards and confirm graph height adjusts"
+ ],
+ "priority": 2,
+ "passes": true,
+ "notes": "Add a ref to the .chronology-stream div in DashboardLayout. Use ResizeObserver to measure its offsetHeight. Pass it as a prop to CareerConstellation. Inside the constellation, use this prop in the dimensions state instead of the fixed getHeight() function. The getHeight() function can become the fallback for when no containerHeight is provided. CSS class .pathway-graph-sticky already has position:sticky — the height change should work within that. Use the d3-viz skill for implementation."
+ },
+ {
+ "id": "US-003",
+ "title": "Clinical pathway background and timeline structure",
+ "description": "As a visitor, I want the graph to look like a clinical patient pathway diagram — clean, precise, and institutional — matching the GP system dashboard aesthetic.",
+ "acceptanceCriteria": [
+ "Background: remove the radial gradient, use a clean fill matching var(--surface) (#FFFFFF) or very subtle var(--bg-dashboard) (#F0F5F4)",
+ "Add a subtle 1px border to the SVG container via the wrapping div: border 1px solid var(--border-light), border-radius var(--radius-sm)",
+ "Timeline axis: refined 1px vertical rule using var(--border) colour (#D4E0DE), not the current thick teal line",
+ "Year markers: small horizontal ticks (6-8px wide) extending right from the timeline, not floating dots",
+ "Year labels: font-family var(--font-geist-mono), font-size 10px, fill var(--text-tertiary) (#8DA8A5)",
+ "Horizontal guide lines: very subtle — stroke-opacity 0.25, stroke-dasharray '3 4' (dotted), using var(--border-light)",
+ "Remove the existing legend box from inside the SVG entirely (replacement comes in US-008)",
+ "All colours use CSS custom property values from the design system",
+ "Typecheck passes (npm run typecheck)",
+ "Verify in browser — the graph background and structure should feel consistent with the rest of the dashboard tiles"
+ ],
+ "priority": 3,
+ "passes": true,
+ "notes": "Most changes are in the main useEffect that builds the SVG (starting around line 132). Remove the radialGradient defs and the rect that uses it. Replace with a simple rect fill. The legendGroup creation (lines ~221-265) should be removed entirely. The timeline vertical line (lines ~189-196) should change from stroke #A8C4BF / width 2 to the border token colour / width 1. Year dots (circle.year-dot) should become short horizontal ticks (line elements). Year guide lines should become dashed. Use the d3-viz skill for implementation."
+ },
+ {
+ "id": "US-004",
+ "title": "Role node redesign — clinical record pill badges",
+ "description": "As a visitor, I want role nodes to look like refined clinical record entries — rounded rectangle badges anchored to their timeline position.",
+ "acceptanceCriteria": [
+ "Role nodes rendered as rounded rectangles (pills): approximately 100px wide x 32px tall, with rx/ry 16px for pill shape",
+ "Each role node displays shortLabel text centred inside, using font-family var(--font-ui), weight 600, size 11px",
+ "Role node fill uses orgColor at 0.12 opacity, with a 1px border of orgColor at 0.4 opacity, and text in orgColor at full strength",
+ "A thin connector line (1px, var(--border) colour) links each role node horizontally back to the timeline axis at its year position",
+ "Role node hover state: border opacity increases to 0.7, shadow appears (approximate var(--shadow-sm))",
+ "Active/pinned role node: border becomes solid at full orgColor opacity, slightly stronger shadow",
+ "ROLE_RADIUS constant replaced with ROLE_WIDTH and ROLE_HEIGHT constants for the pill dimensions",
+ "Force simulation collision detection updated to use the pill dimensions (not circular radius)",
+ "Focus ring styling updated to surround the pill shape instead of the old circle",
+ "Typecheck passes (npm run typecheck)",
+ "Verify in browser — role nodes appear as labelled pill badges along the timeline"
+ ],
+ "priority": 4,
+ "passes": true,
+ "notes": "This changes role nodes from to with rounded corners. The nodeSelection code that filters d.type === 'role' (lines ~354-380) needs to append 'rect' instead of 'circle'. Position with x = -ROLE_WIDTH/2 and y = -ROLE_HEIGHT/2 so they centre on the force simulation position. The focus-ring can also become a rect. The text element stays largely the same but needs its positioning adjusted (no more dy offset needed if dominant-baseline is middle). The collision force for roles should use a radius roughly equal to Math.max(ROLE_WIDTH, ROLE_HEIGHT)/2 + padding. The connector line should go from the timeline X position to the left edge of the pill node. Use the d3-viz skill for implementation."
+ },
+ {
+ "id": "US-005",
+ "title": "Skill node redesign — muted default with reveal on interaction",
+ "description": "As a visitor, I want skill nodes to be visually subdued by default, becoming prominent only when a connected role or skill is hovered or clicked.",
+ "acceptanceCriteria": [
+ "Default (resting) state: small circles radius 7px, fill-opacity 0.2, no visible label (label opacity 0)",
+ "Skill node fill colours by domain: technical uses var(--accent) #0D6E6E, clinical uses var(--success) #059669, leadership uses var(--amber) #D97706",
+ "When a connected role is hovered/pinned: connected skill nodes transition to radius 11px, fill-opacity 0.85, labels fade in (opacity 0 → 1)",
+ "Skill labels: font-family var(--font-geist-mono), font-size 10px, fill var(--text-secondary) (#5B7A78)",
+ "When a skill node itself is hovered: that skill and all connected roles highlight, skill grows to full size with label visible",
+ "Link lines default state: opacity 0.08, colour var(--border-light) — barely visible",
+ "Link lines highlighted state: opacity 0.55, colour matching the skill's domain colour, stroke-width 1.5px",
+ "Unconnected nodes (not in the active highlight group) reduce to opacity 0.06 — nearly invisible",
+ "All transitions 150-200ms and respect prefers-reduced-motion (skip to final state)",
+ "Typecheck passes (npm run typecheck)",
+ "Verify in browser — graph looks clean and quiet at rest, informative on hover"
+ ],
+ "priority": 5,
+ "passes": true,
+ "notes": "This modifies the applyGraphHighlight() function (line ~439) and the initial skill node rendering (lines ~382-403). The resting state setup happens when nodes are first created and in the 'no activeNodeId' branch of applyGraphHighlight. The highlighted state logic is in the activeNodeId branch. Key change: skill labels default to opacity 0 (not the current collision-based visibility), and only become visible via applyGraphHighlight when connected. The updateSkillLabelVisibility() function can be simplified or merged into applyGraphHighlight. The SKILL_RADIUS constant should be split into SKILL_RADIUS_DEFAULT (7) and SKILL_RADIUS_ACTIVE (11). Link line styling in the resting branch should use much lower opacity than current 0.45. Use the d3-viz skill for implementation."
+ },
+ {
+ "id": "US-006",
+ "title": "Bidirectional hover — graph node highlights timeline card",
+ "description": "As a visitor, I want hovering a role node in the graph to highlight the corresponding work experience card in the timeline, creating a clear bidirectional link.",
+ "acceptanceCriteria": [
+ "CareerConstellation gains a new prop: onNodeHover?: (id: string | null) => void",
+ "Role node mouseenter fires onNodeHover(d.id), mouseleave fires onNodeHover(null)",
+ "DashboardLayout passes onNodeHover callback to CareerConstellation and stores result as highlightedRoleId state",
+ "WorkExperienceSubsection gains a new prop: highlightedRoleId?: string | null",
+ "When highlightedRoleId matches a RoleItem's consultation.id, that card shows a subtle highlight: border-color var(--accent-border), background rgba(10,128,128,0.03)",
+ "LastConsultationSubsection also gains highlightedRoleId prop and participates in the highlight system for the most recent role (consultations[0].id)",
+ "Highlight clears when mouse leaves both the card and graph node",
+ "On touch devices, tap-to-pin works: tapping a role pins the highlight in both graph and timeline",
+ "Existing onNodeHighlight (timeline → graph) continues to work alongside the new reverse direction",
+ "Typecheck passes (npm run typecheck)",
+ "Verify in browser — hover graph nodes and confirm timeline cards highlight; hover timeline cards and confirm graph highlights"
+ ],
+ "priority": 6,
+ "passes": true,
+ "notes": "This adds the reverse direction to the existing partial bidirectional system. Currently DashboardLayout has handleNodeHighlight which sets highlightedNodeId (timeline → graph). The new onNodeHover adds graph → timeline. Both pieces of state coexist. In WorkExperienceSubsection, add a style to the RoleItem wrapper div that applies when highlightedRoleId matches — a subtle border and background change. For LastConsultationSubsection, apply the same highlight logic to its outer wrapper. The touch/pin logic in CareerConstellation already handles pinnedNodeId — the new onNodeHover should also fire for pinned nodes so timeline cards stay highlighted."
+ },
+ {
+ "id": "US-007",
+ "title": "Curved link lines between roles and skills",
+ "description": "As a visitor, I want the connection lines between roles and skills to be smooth curves rather than basic straight lines, matching a clinical pathway aesthetic.",
+ "acceptanceCriteria": [
+ "Replace elements with elements for links",
+ "Use D3 curve generators (d3.curveBasis or d3.line().curve(d3.curveBasis)) to create smooth curves between source and target",
+ "Default link styling: 1px stroke, colour var(--border-light), opacity 0.08 — barely visible at rest",
+ "Highlighted link styling: 1.5px stroke, domain colour of the skill end, opacity proportional to link strength value (range 0.35-0.65)",
+ "The tick handler updates path d attributes instead of line x1/y1/x2/y2",
+ "Links animate smoothly between default and highlighted states (CSS transition on stroke, stroke-opacity, stroke-width)",
+ "Respect prefers-reduced-motion — skip transitions",
+ "Typecheck passes (npm run typecheck)",
+ "Verify in browser — links are nearly invisible at rest and clearly trace pathways on hover"
+ ],
+ "priority": 7,
+ "passes": true,
+ "notes": "The linkSelection is created at lines ~340-345. Change from .join('line') to .join('path'). For the curve, generate a simple quadratic or cubic bezier path string in the tick handler: given source (sx,sy) and target (tx,ty), create a path like M sx,sy Q cx,cy tx,ty where cx,cy is a control point offset to create a gentle arc. A simple approach: control point at ((sx+tx)/2, sy) or ((sx+tx)/2, (sy+ty)/2 + offset). Alternatively use d3.linkHorizontal() or d3.linkVertical() which generate smooth curves between two points. The applyGraphHighlight function's link styling (lines ~465-482) needs updating from line attributes to path attributes — but stroke/stroke-opacity/stroke-width work the same on paths. Use the d3-viz skill for implementation."
+ },
+ {
+ "id": "US-008",
+ "title": "Compact domain legend as HTML below SVG",
+ "description": "As a visitor, I want a small unobtrusive legend explaining the domain colour coding, rendered as HTML below the graph.",
+ "acceptanceCriteria": [
+ "A compact single-line legend rendered as a React div below the SVG element, inside the CareerConstellation container",
+ "Legend shows three small coloured dots (6px circles) with labels: 'Technical', 'Clinical', 'Leadership' using the domain colours (var(--accent), var(--success), var(--amber))",
+ "Legend text: font-family var(--font-geist-mono), font-size 10px, colour var(--text-tertiary)",
+ "Items separated by subtle dot or pipe separators",
+ "Include hint text: 'Hover to explore connections' — same style, slightly more muted",
+ "Legend takes minimal vertical space (~24px total height)",
+ "Legend wraps gracefully on narrow screens (flex-wrap)",
+ "Typecheck passes (npm run typecheck)",
+ "Verify in browser"
+ ],
+ "priority": 8,
+ "passes": true,
+ "notes": "This is pure React JSX added to the return block of CareerConstellation (after the SVG and before the closing container div). No D3 involved. Use inline styles consistent with the rest of the component, or simple Tailwind classes. The legend replaces the SVG-based legend that was removed in US-003. Position it as a flex row with gap: 12px, items centred vertically, padding: 6px 12px."
+ },
+ {
+ "id": "US-009",
+ "title": "Force simulation tuning for clinical layout",
+ "description": "As a developer, I want the D3 force simulation tuned so role nodes stay firmly anchored to timeline positions while skill nodes distribute cleanly to the right.",
+ "acceptanceCriteria": [
+ "Role nodes have very high forceY strength (0.95-1.0) and consistent forceX strength anchoring them at a fixed horizontal offset from the timeline",
+ "Skill nodes distribute in the space to the right of the role column, clustered near connected roles",
+ "Increase collision radius to prevent label overlap when skills are revealed on hover (account for SKILL_RADIUS_ACTIVE + label height)",
+ "Simulation alphaDecay tuned so graph stabilises within 1-2 seconds (or immediately for prefers-reduced-motion)",
+ "Boundary clamping keeps all nodes within the SVG viewport with adequate padding — role pill labels don't clip, skill labels don't overflow",
+ "On height changes (from US-002), simulation re-initialises without jarring jumps — preserve approximate positions",
+ "The charge force strength balanced to avoid nodes clustering too tightly or spreading too far",
+ "Typecheck passes (npm run typecheck)",
+ "Verify in browser — nodes appear organised and intentional, not randomly scattered"
+ ],
+ "priority": 9,
+ "passes": true,
+ "notes": "The simulation is configured at lines ~515-532. Key parameters to tune: forceX/forceY strengths for roles (increase to ~1.0), forceX/forceY for skills (keep at 0.15-0.25 for organic clustering), charge strength (currently -85, may need adjustment with new pill-shaped roles), collide radius (needs to account for pill width for roles, and active radius + label for skills), link distance (currently 56, may need increase with larger role nodes). The alphaDecay is currently 0.06 for animated mode — could increase to 0.08-0.1 for faster settling. For the reduced-motion path, the 220 ticks (line 580) may need adjustment. Use the d3-viz skill for implementation."
+ },
+ {
+ "id": "US-010",
+ "title": "Content audit — verify role data against CV source",
+ "description": "As the portfolio owner, I want all role titles, organisations, dates, and achievement bullets verified against the source CV documents.",
+ "acceptanceCriteria": [
+ "Cross-reference src/data/consultations.ts against References/CV_v4.md and References/Andy_Charlwood_CV_ATS_Optimised.pdf",
+ "All role titles match the CV exactly",
+ "All organisation names are consistent (e.g., 'NHS Norfolk & Waveney ICB' everywhere, 'Tesco PLC' not 'Tesco')",
+ "All date ranges are correct (start/end for each role matching CV)",
+ "Achievement bullets (examination arrays) are accurate — numbers, percentages, claims match CV source",
+ "constellation.ts role node data (labels, shortLabels, orgColors, years) is consistent with consultations.ts",
+ "Any discrepancies found are fixed",
+ "Intentional abbreviations (e.g., shortened bullet text) are documented in code comments only where truly necessary",
+ "Typecheck passes (npm run typecheck)"
+ ],
+ "priority": 10,
+ "passes": true,
+ "notes": "Read src/data/consultations.ts and compare field-by-field against References/CV_v4.md. The CV has 4 roles: Interim Head (May-Nov 2025), Deputy Head (Jul 2024-Present), High-Cost Drugs (May 2022-Jul 2024), Pharmacy Manager (Nov 2017-May 2022). Check that consultations.ts has the same number of entries with matching data. Also verify constellation.ts nodes match — particularly startYear/endYear values and organization names. Fix any mismatches in the data files."
+ },
+ {
+ "id": "US-011",
+ "title": "Accessibility — fix focusable buttons and tab order",
+ "description": "As a visitor using assistive technology, I want the constellation graph to be keyboard navigable with proper focus rings and screen reader support.",
+ "acceptanceCriteria": [
+ "Hidden accessibility buttons have pointerEvents: 'auto' (not 'none') so they are actually focusable and clickable",
+ "Tab order follows reverse-chronological sequence: role nodes from most recent to oldest, then skill nodes grouped by domain (technical → clinical → leadership)",
+ "Focus ring styling is visible: 2px solid var(--accent) with 2px offset, matching design system",
+ "aria-label on the SVG updated to mention 'clinical pathway' metaphor",
+ "All interactive states (hover highlight, pin) are achievable via keyboard (Enter/Space to activate)",
+ "prefers-reduced-motion is respected — all animations skip to final state",
+ "Typecheck passes (npm run typecheck)"
+ ],
+ "priority": 11,
+ "passes": true,
+ "notes": "The accessibility buttons are at lines ~661-705 in the JSX. The critical bug is pointerEvents: 'none' on line 688 — change to 'auto'. Also check the containing div at line 658 which also has pointerEvents: 'none' — the buttons inside should override with 'auto'. The constellationNodes.map ordering determines tab order — consider sorting the nodes array for this specific rendering (roles first sorted by startYear desc, then skills grouped by domain). The focus/blur handlers at lines 692-693 already exist and work with the D3 focus ring. The SVG aria-label at line 629 should be updated."
+ },
+ {
+ "id": "US-012",
+ "title": "Responsive behaviour — mobile and tablet fallback",
+ "description": "As a visitor on a smaller screen, I want the constellation graph to display appropriately when the columns stack vertically.",
+ "acceptanceCriteria": [
+ "On mobile/tablet (single-column .pathway-columns layout), the graph renders at a fixed height of 360-400px since no column to match",
+ "The graph simplifies on small screens: role pill labels may use shorter text, skill node default radius decreases slightly (6px)",
+ "Touch interactions work correctly: tap to pin a node, tap elsewhere to unpin",
+ "Graph content is not cropped or overflowing on narrow viewports (min-width handling via boundary clamping)",
+ "The HTML legend from US-008 wraps gracefully on narrow screens",
+ "Timeline axis position adjusts for narrower viewports (closer to left edge)",
+ "Typecheck passes (npm run typecheck)",
+ "Verify in browser at mobile viewport widths (375px, 430px)"
+ ],
+ "priority": 12,
+ "passes": true,
+ "notes": "The current getHeight() function handles mobile with MOBILE_HEIGHT = 310. After US-002, the containerHeight prop drives the height on desktop. On mobile, detect that containerHeight is not being passed (or is invalid) and fall back to a fixed 360px. The CSS media query in index.css (line ~403) switches .pathway-columns to two-column at a certain breakpoint — below that, the graph is in a single-column stacked layout. The timelineX calculation (line 151) should account for narrow widths — Math.max(80, ...) to keep it accessible. Use the d3-viz skill for implementation."
+ }
+ ]
+}
diff --git a/Ralph/archive/2026-02-16-constellation-overhaul/progress.txt b/Ralph/archive/2026-02-16-constellation-overhaul/progress.txt
new file mode 100644
index 0000000..7faf64d
--- /dev/null
+++ b/Ralph/archive/2026-02-16-constellation-overhaul/progress.txt
@@ -0,0 +1,227 @@
+# Progress Log — Career Constellation Clinical Pathway Overhaul
+# Branch: ralph/constellation-overhaul
+# Started: 2026-02-16
+
+## Codebase Patterns
+- CareerConstellation.tsx is a D3 force-directed graph rendered in an SVG with React overlay buttons for accessibility
+- D3 simulation uses forceSimulation with charge, link, x, y, and collide forces
+- Module-level window.matchMedia reads for prefersReducedMotion and supportsCoarsePointer
+- DashboardLayout manages constellation state: highlightedNodeId, pinnedNodeId via callbacks
+- Work experience data in src/data/consultations.ts, skills in src/data/skills.ts, constellation-specific data in src/data/constellation.ts
+- CSS layout: .pathway-columns is a grid that switches from 1fr (mobile) to minmax(0,1.15fr) minmax(0,1.5fr) at desktop breakpoint
+- .pathway-graph-sticky has position: sticky; top: 12px; min-height: 100% for the graph column
+- containerHeight prop drives graph height on desktop; on mobile (viewport < 1024px) uses MOBILE_FALLBACK_HEIGHT (360px)
+- Use window.innerWidth for breakpoint checks, not container.clientWidth — the SVG container overflows on mobile
+- Design tokens in index.css :root — use var(--accent), var(--border-light), var(--text-tertiary), etc.
+- Use the d3-viz skill for all D3 rendering stories
+- yScale domain reversal automatically flows through all timeline elements (guides, dots, labels, role positions, simulation forces) — no per-element changes needed
+- Always use CSS custom properties (var(--border), var(--surface), var(--text-tertiary), etc.) for colours in D3 — never hardcode hex values
+- SVG shadows: use with in , apply to groups via .attr('filter', 'url(#filter-id)'), clear with .attr('filter', null)
+- Role nodes are already pill-shaped rects (ROLE_WIDTH=104, ROLE_HEIGHT=32, ROLE_RX=16) with orgColor badge styling — check before re-implementing
+
+## 2026-02-16 - US-001
+- Reversed yScale domain from [minYear, maxYear] to [maxYear, minYear] so 2025 appears at top
+- Updated buildScreenReaderDescription() to mention reverse-chronological order
+- Files changed: src/components/CareerConstellation.tsx
+- **Learnings for future iterations:**
+ - The yScale is the single source of truth for vertical positioning — reversing its domain is a one-line change that cascades to all D3 elements using it
+ - Year guide lines, year dots, year labels, role initial positions, and simulation forceY all reference yScale — no individual element updates needed
+ - buildScreenReaderDescription() is defined at module level (line ~63), not inside the component
+---
+
+## 2026-02-16 - US-002
+- Removed fixed DESKTOP_HEIGHT/TABLET_HEIGHT/MOBILE_HEIGHT constants, replaced with MIN_HEIGHT (400) and MOBILE_FALLBACK_HEIGHT (360)
+- Added containerHeight prop to CareerConstellation — DashboardLayout measures .chronology-stream via ResizeObserver and passes height
+- getHeight() now takes containerHeight param: on mobile uses fallback, on desktop uses measured height with MIN_HEIGHT floor
+- Used window.innerWidth for mobile breakpoint detection (container.clientWidth is unreliable due to SVG overflow)
+- Files changed: src/components/CareerConstellation.tsx, src/components/DashboardLayout.tsx, src/index.css
+- **Learnings for future iterations:**
+ - The CareerConstellation container div overflows on mobile — its clientWidth reports desktop-sized values even at 375px viewport. Always use window.innerWidth for responsive breakpoint checks in this component.
+ - ResizeObserver on .chronology-stream fires when cards expand/collapse, triggering height update in the graph — this is the key mechanism for dynamic sync.
+ - The dimensions useEffect depends on [containerHeight] so it re-runs when the measured height changes, updating the D3 scales.
+ - CSS grid column ratio was adjusted to minmax(0,1.15fr) minmax(0,1.5fr) to give the graph more horizontal space.
+---
+
+## 2026-02-16 - US-003
+- Removed radial gradient background, replaced with clean var(--surface) fill
+- Added 1px solid var(--border-light) border to the container div
+- Refined timeline vertical rule to 1px stroke using var(--border) colour
+- Replaced year dots (circles) with horizontal tick marks (6-8px lines extending right from timeline)
+- Updated year labels fill to var(--text-tertiary)
+- Made horizontal guide lines subtle: stroke-opacity 0.25, stroke-dasharray '3 4', using var(--border-light)
+- Removed the entire SVG legend group (replacement HTML legend comes in US-008)
+- Files changed: src/components/CareerConstellation.tsx
+- **Learnings for future iterations:**
+ - All colours should use CSS custom property values (var(--border), var(--surface), etc.) rather than hardcoded hex values — the design system tokens are defined in index.css :root
+ - The legend was ~47 lines of D3 code; removing it is a significant net reduction. The HTML replacement in US-008 will be simpler React JSX
+ - Year ticks as horizontal lines are positioned with x1=timelineX, x2=timelineX+width — they extend right from the timeline axis, not centred on it
+ - The container div border + borderRadius + overflow:hidden creates a clean framed look for the SVG without needing an SVG-level border
+---
+
+## 2026-02-16 - US-004
+- Added SVG filter defs for drop shadows: shadow-sm-filter (subtle, for hover/connected) and shadow-md-filter (stronger, for active/pinned)
+- Updated applyGraphHighlight to apply shadow filters on role node `` elements during highlight states
+- Resting state: no filter; connected role: shadow-sm; active/pinned role: shadow-md with stroke-opacity 1 and stroke-width 1.5
+- Note: most of US-004 (pill shape, orgColor styling, connector lines, focus rings, collision detection) was already implemented in prior iterations
+- Files changed: src/components/CareerConstellation.tsx, Ralph/prd.json
+- **Learnings for future iterations:**
+ - SVG drop shadows use `` with `` — apply to the parent `` group, not the individual shape, for proper rendering
+ - Filter bounds need generous overflow (x/y -20%, width/height 140%+) to avoid clipping the shadow
+ - When clearing a filter, use `.attr('filter', null)` — not empty string
+ - The role node pill rendering (rect with rx/ry, orgColor fill at 0.12, border at 0.4) was built incrementally across US-003 and US-004 — check existing code before implementing to avoid duplication
+- Skill nodes use SKILL_RADIUS_DEFAULT (7) for resting state and SKILL_RADIUS_ACTIVE (11) for highlighted state — controlled via applyGraphHighlight, not CSS transitions (SVG `r` doesn't transition via CSS)
+- Skill labels default to opacity 0 and are shown/hidden via D3 transitions in applyGraphHighlight — the old updateSkillLabelVisibility collision-based approach was removed
+- Link lines use var(--border-light) at opacity 0.08 for resting state — highlighted links use the skill's domain colour from domainColorMap with strength-proportional opacity
+- Bidirectional highlighting uses two independent state vars in DashboardLayout: highlightedNodeId (timeline→graph) and highlightedRoleId (graph→timeline)
+- callbacksRef pattern in CareerConstellation prevents stale closures — always add new callbacks there
+- LastConsultationSubsection is defined inline in DashboardLayout.tsx, not a separate file
+- Link lines are `` elements (not ``) using quadratic bezier curves — tick handler sets `d` attr, not x1/y1/x2/y2. CSS transitions handle highlight animations on stroke properties
+- Accessibility buttons are overlaid React `