From 89d778b2dff650c78993a2a41ae5d30a4f408342 Mon Sep 17 00:00:00 2001
From: Andy Charlwood <andrew.charlwood@gmail.com>
Date: Mon, 16 Feb 2026 02:58:06 +0000
Subject: [PATCH] feat: US-008 - Compact domain legend as HTML below SVG

---
 Ralph/prd.json                         |  2 +-
 Ralph/progress.txt                     | 14 +++++++++
 src/components/CareerConstellation.tsx | 41 ++++++++++++++++++++++++++
 3 files changed, 56 insertions(+), 1 deletion(-)

diff --git a/Ralph/prd.json b/Ralph/prd.json
index b8dcafc..916c5fe 100644
--- a/Ralph/prd.json
+++ b/Ralph/prd.json
@@ -157,7 +157,7 @@
         "Verify in browser"
       ],
       "priority": 8,
-      "passes": false,
+      "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."
     },
     {
diff --git a/Ralph/progress.txt b/Ralph/progress.txt
index db72f55..2d3f47f 100644
--- a/Ralph/progress.txt
+++ b/Ralph/progress.txt
@@ -124,3 +124,17 @@
   - CSS transitions work on SVG `<path>` stroke properties, so no D3 `.transition()` needed for link highlight animations (unlike `r` attribute which requires D3 transitions)
   - The tick handler generates the `d` attribute string directly — simpler than using `d3.line().curve()` since we only need two-point curves
 ---
+
+## 2026-02-16 - US-008
+- Added compact HTML legend below SVG inside CareerConstellation container
+- Legend shows three 6px coloured dots with labels: Technical (var(--accent)), Clinical (var(--success)), Leadership (var(--amber))
+- Items separated by middle dot (·) separators using var(--border) colour
+- Includes "Hover to explore connections" hint text at slightly reduced opacity (0.7)
+- Uses font-family var(--font-geist-mono), font-size 10px, colour var(--text-tertiary)
+- flex-wrap enabled for graceful narrowing on small screens
+- Files changed: src/components/CareerConstellation.tsx, Ralph/prd.json
+- **Learnings for future iterations:**
+  - The legend is pure React JSX — no D3 involved. Placed between the SVG and the screen reader description paragraph inside the container div
+  - Using React.Fragment with the `.map()` allows conditional separator rendering (skip before first item) without extra wrapper divs
+  - The container div's overflow:hidden clips the legend's border-radius corners cleanly
+---
diff --git a/src/components/CareerConstellation.tsx b/src/components/CareerConstellation.tsx
index 2992928..34df0e4 100644
--- a/src/components/CareerConstellation.tsx
+++ b/src/components/CareerConstellation.tsx
@@ -678,6 +678,47 @@ const CareerConstellation: React.FC<CareerConstellationProps> = ({
         style={{ display: 'block' }}
       />
 
+      <div
+        style={{
+          display: 'flex',
+          flexWrap: 'wrap',
+          alignItems: 'center',
+          gap: '12px',
+          padding: '6px 12px',
+          fontFamily: 'var(--font-geist-mono)',
+          fontSize: '10px',
+          color: 'var(--text-tertiary)',
+          lineHeight: '24px',
+        }}
+      >
+        {[
+          { label: 'Technical', color: 'var(--accent)' },
+          { label: 'Clinical', color: 'var(--success)' },
+          { label: 'Leadership', color: 'var(--amber)' },
+        ].map((item, i) => (
+          <React.Fragment key={item.label}>
+            {i > 0 && (
+              <span style={{ color: 'var(--border)', userSelect: 'none' }} aria-hidden="true">·</span>
+            )}
+            <span style={{ display: 'inline-flex', alignItems: 'center', gap: '5px' }}>
+              <span
+                style={{
+                  display: 'inline-block',
+                  width: '6px',
+                  height: '6px',
+                  borderRadius: '50%',
+                  backgroundColor: item.color,
+                  flexShrink: 0,
+                }}
+              />
+              {item.label}
+            </span>
+          </React.Fragment>
+        ))}
+        <span style={{ color: 'var(--border)', userSelect: 'none' }} aria-hidden="true">·</span>
+        <span style={{ opacity: 0.7 }}>Hover to explore connections</span>
+      </div>
+
       <p
         style={{
           position: 'absolute',