Fix hover effect on chart causing transition/animation to break

.ralph/agent/memories.md

@@ -0,0 +1,17 @@
+# Memories
+
+## Patterns
+
+### mem-1771337886-d0ab
+> Global focus mode: DashboardLayout manages globalFocusId state + focusRelatedIds derived set. Relationship data: skillToRoles and roleToSkills maps built from timelineEntities.skills[]. focusRelatedIds passed to timeline, skills, and LastConsultationCard. Constellation axis dims via CSS class constellation-focus-active on SVG.
+<!-- tags: constellation, focus-mode, architecture | created: 2026-02-17 -->
+
+## Decisions
+
+### mem-1771337892-8cc2
+> useConstellationInteraction mouseenter now calls onNodeHover for ALL node types (was previously skill-filtered). handleNodeHover in DashboardLayout checks nodeType to decide what to set for highlightedRoleId. Do NOT set highlightedNodeId from handleNodeHover — it breaks resolveGraphFallback timing.
+<!-- tags: constellation, interaction | created: 2026-02-17 -->
+
+## Fixes
+
+## Context

.ralph/agent/scratchpad.md

@@ -0,0 +1,63 @@
+# Constellation Hover Focus Mode - Scratchpad
+
+## Understanding
+
+The feature requires a **global dimming** effect when hovering constellation nodes or skill pills. Currently:
+
+1. **Constellation internal highlighting** already works well via `useConstellationHighlight` - dims non-connected nodes to 0.15 opacity within the SVG.
+2. **Skill pill hover** (`RepeatMedicationsSubsection`) calls `onHighlight(skill.id)` → flows to `setHighlightedNodeId` → passed to `CareerConstellation` as prop → triggers `applyGraphHighlight(skillId)`.
+3. **Timeline item hover** calls `onHighlight(entity.id)` → same flow → highlights that role in constellation.
+4. **Constellation node hover** calls `onNodeHover(roleId)` → `setHighlightedRoleId` → highlights matching timeline item via `isHighlightedFromGraph` prop.
+
+### What's Missing
+
+The **cross-component dimming** doesn't exist yet:
+- When hovering a constellation node: timeline items and skill pills don't dim (only the matching timeline item highlights)
+- When hovering a skill pill: the constellation highlights but timeline items and other skill pills don't dim
+- No global "focus mode" overlay or coordinated dimming across all three areas
+
+### Architecture Decision
+
+**Approach: CSS class-based global dimming with React context**
+
+Rather than a heavy context, I'll use the existing `DashboardLayout` state pattern:
+1. Add a `globalFocusId` state to `DashboardLayout` (the orchestrator)
+2. Add a `globalFocusType` to know if it's a skill or role focus
+3. Pass this down to timeline, skill pills, and constellation
+4. Each component applies a dimming class/style when not related to the focused ID
+5. Use the existing `connectedMap` data (already built in constellation) to resolve relationships
+
+**Key insight**: When a skill is focused, the "related" timeline items are those whose `entity.skills` array contains that skill ID. When a role is focused, the "related" skills are those in that role's `entity.skills`. This data is already in `timelineEntities`.
+
+**Dimming approach**: CSS transitions on opacity. Apply `opacity: 0.25` to non-related elements, keep related ones at full opacity. Use `transition: opacity 0.15s` for smooth enter/exit.
+
+### Implementation (COMPLETED)
+
+All implemented in a single commit (`47b52b5`):
+
+1. **DashboardLayout** — Added `globalFocusId` state, lookup maps (`skillToRoles`, `roleToSkills`, `nodeTypeById`), and computed `focusRelatedIds: Set<string> | null`. Both `handleNodeHighlight` and `handleNodeHover` now set `globalFocusId`.
+
+2. **useConstellationInteraction** — Removed `d.type !== 'skill'` guard on `onNodeHover` so skill node hovers also propagate to parent for global focus.
+
+3. **TimelineInterventionsSubsection** — Receives `focusRelatedIds`, computes `isDimmedByFocus` per entity, passes to `ExpandableCardShell`.
+
+4. **ExpandableCardShell** — New `isDimmedByFocus` prop applies `opacity: 0.25` with 150ms transition.
+
+5. **RepeatMedicationsSubsection** — `focusRelatedIds` flows through `CategorySection` → `SkillRow`, each skill row dims if not in related set.
+
+6. **LastConsultationCard** — Dims when `focusRelatedIds` is active and consultation.id not in set.
+
+7. **CareerConstellation** — New `globalFocusActive` prop + SVG class `constellation-focus-active` triggers CSS axis dimming.
+
+8. **index.css** — CSS rules dim `.axis-line`, `.year-tick`, `.year-label` to 0.25 opacity when `constellation-focus-active` class is present. Reduced-motion override removes transitions.
+
+### Verification
+
+- `npm run typecheck` — PASS
+- `npm run lint` — PASS (5 pre-existing warnings only)
+- `npm run build` — PASS
+
+### Remaining
+
+- Playwright MCP visual verification (reviewer task)
+- Manual QA: hover each source (constellation node, skill pill, timeline item), verify dimming/restore

.ralph/agent/tasks.jsonl

@@ -0,0 +1,5 @@
+{"id":"task-1771337307-83ce","title":"Add global focus state to DashboardLayout with relationship resolution","description":"Add globalFocusId/globalFocusType state, derive relatedSkillIds and relatedRoleIds sets using timelineEntities data, wire into existing hover handlers","status":"closed","priority":1,"blocked_by":[],"loop_id":"primary-20260217-140555","created":"2026-02-17T14:08:27.099307+00:00","closed":"2026-02-17T14:17:28.063483065+00:00"}
+{"id":"task-1771337311-1f39","title":"Apply focus-mode dimming to TimelineInterventionsSubsection","description":"Pass globalFocusId/relatedRoleIds to timeline, dim non-related timeline items with opacity transition","status":"closed","priority":2,"blocked_by":["task-1771337307-83ce"],"loop_id":"primary-20260217-140555","created":"2026-02-17T14:08:31.532282963+00:00","closed":"2026-02-17T14:17:28.154478577+00:00"}
+{"id":"task-1771337316-d45f","title":"Apply focus-mode dimming to RepeatMedicationsSubsection","description":"Pass globalFocusId/relatedSkillIds to skill pills, dim non-related skill rows with opacity transition","status":"closed","priority":2,"blocked_by":["task-1771337307-83ce"],"loop_id":"primary-20260217-140555","created":"2026-02-17T14:08:36.447585246+00:00","closed":"2026-02-17T14:17:28.246180358+00:00"}
+{"id":"task-1771337321-b56c","title":"Wire constellation node hover to global focus and add graph background dimming","description":"Update onNodeHover to set globalFocusId for both role AND skill node hovers, add CSS dimming to constellation background/axis during focus mode","status":"closed","priority":2,"blocked_by":["task-1771337307-83ce"],"loop_id":"primary-20260217-140555","created":"2026-02-17T14:08:41.046446549+00:00","closed":"2026-02-17T14:17:28.342976988+00:00"}
+{"id":"task-1771337325-9009","title":"Verify lint, typecheck, build pass and manual testing","description":"Run validation gates, check for stuck states, verify reduced-motion respect","status":"closed","priority":3,"blocked_by":["task-1771337311-1f39","task-1771337316-d45f","task-1771337321-b56c"],"loop_id":"primary-20260217-140555","created":"2026-02-17T14:08:45.626698271+00:00","closed":"2026-02-17T14:17:39.422234149+00:00"}