Fix hover effect on chart causing transition/animation to break

feat: add global focus mode with cross-component dimming on hover
When hovering a constellation node, skill pill, or timeline item, non-related UI elements across all components dim to 0.25 opacity, creating a focused visual relationship view. The constellation axis and year labels also dim via CSS class. Respects reduced-motion.
2026-02-17 15:14:10 +00:00 · 2026-02-17 14:17:21 +00:00
33 changed files with 574 additions and 201 deletions
@@ -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
@@ -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
@@ -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"}
@@ -1 +1 @@
-.ralph/events-20260217-140400.jsonl
+.ralph/events-20260217-140555.jsonl
@@ -1 +1 @@
-primary-20260217-140400
+primary-20260217-140555
@@ -0,0 +1,3 @@
+{"ts":"2026-02-17T14:05:55.280271324+00:00","iteration":0,"hat":"loop","topic":"task.start","triggered":"planner","payload":"# Task: Constellation Hover Focus Mode With Global Dimming\n\nImplement a focused hover mode so that when a user hovers a skill or node in the constellation area, non-related UI darkens and only the relevant relationship remains emphasized.\n\n## Requirements\n\n- Support hover-triggered focus mode from:\n  - constellation node hover\n  - skill pill hover\n- In focus mode, darken non-related UI across the page, including:\n  - graph axis/background\n  - unrelated graph nodes/labels/links\n  - unrelated time... [truncated, 3038 chars total]"}
+{"payload":"Global focus mode implemented: hover any constellation node, skill pill, or timeline item to dim non-related UI to 0.25 opacity. Axis/labels dim via CSS. Typecheck pass, lint pass (pre-existing warnings only), build pass. Commit: 47b52b5","topic":"build.done","ts":"2026-02-17T14:18:22.337524276+00:00"}
+{"payload":"tests: pass (no test framework), lint: pass (0 errors, 5 pre-existing warnings), typecheck: pass, audit: pass, coverage: N/A, complexity: low, duplication: pass, performance: pass","topic":"build.done","ts":"2026-02-17T14:19:11.040920579+00:00"}
@@ -1 +1,2 @@
 {"ts":"2026-02-17T14:04:01.040268715Z","type":{"kind":"loop_started","prompt":"# Task: Constellation Hover Focus Mode With Global Dimming\n\nImplement a focused hover mode so that when a user hovers a skill or node in the constellation area, non-related UI darkens and only the relevant relationship remains emphasized.\n\n## Requirements\n\n- Support hover-triggered focus mode from:\n  - constellation node hover\n  - skill pill hover\n- In focus mode, darken non-related UI across the page, including:\n  - graph axis/background\n  - unrelated graph nodes/labels/links\n  - unrelated timeline and dashboard elements\n- Keep the following elements visually emphasized (not darkened):\n  - hovered skill pill\n  - hovered/active constellation node\n  - connection lines between related node/skill items\n  - timeline series item related to that skill/node\n- On hover exit, restore default appearance cleanly with no stuck state.\n- Preserve existing click behavior, keyboard behavior, and detail panel opening logic.\n- Respect reduced-motion preferences and existing accessibility patterns.\n\n## Likely Files To Update\n\n- `src/components/DashboardLayout.tsx`\n- `src/hooks/useConstellationInteraction.ts`\n- `src/hooks/useConstellationHighlight.ts`\n- `src/components/TimelineInterventionsSubsection.tsx`\n- `src/components/RepeatMedicationsSubsection.tsx`\n- `src/components/ExpandableCardShell.tsx`\n- `src/index.css`\n\nUpdate additional files only if necessary.\n\n## Success Criteria\n\nAll of the following must be true:\n\n- [ ] Hovering a constellation node enters focus mode with global dimming.\n- [ ] Hovering a skill pill enters focus mode with global dimming.\n- [ ] In focus mode, only the relevant node + relationship links + related timeline series item + active skill pill remain visually highlighted.\n- [ ] Graph axis/background visibly darken during focus mode.\n- [ ] Focus mode exits correctly on mouse leave with no lingering darkened state.\n- [ ] Existing interactions (role click, skill click, panel open, timeline expand/collapse) still work.\n- [ ] `npm run lint` passes.\n- [ ] `npm run typecheck` passes.\n- [ ] `npm run build` passes.\n- [ ] Playwright MCP evidence confirms behavior for both node-hover and skill-pill-hover scenarios.\n\n## Playwright MCP Verification\n\nReviewer must validate with Playwright MCP and record evidence in `.ralph/review.md`:\n\n- Run or confirm dev server at `http://localhost:5173`\n- Capture baseline screenshot before hover\n- Hover a constellation node and capture screenshot\n- Hover a skill pill and capture screenshot\n- In both hover screenshots, verify:\n  - unrelated areas are darkened\n  - related graph + timeline + skill elements remain emphasized\n\n## Constraints\n\n- Do not add new dependencies.\n- Follow existing TypeScript/React conventions and current styling system.\n- Keep changes focused to this feature only.\n- If a blocker repeats with identical evidence across 3 cycles, escalate in `.ralph/review.md` instead of forcing completion.\n\n## Status\n\nTrack progress in `.ralph/plan.md`, `.ralph/build.md`, and `.ralph/review.md`.\nWhen all success criteria are met, print `LOOP_COMPLETE`.\n"}}
+{"ts":"2026-02-17T14:05:55.382060260Z","type":{"kind":"loop_started","prompt":"# Task: Constellation Hover Focus Mode With Global Dimming\n\nImplement a focused hover mode so that when a user hovers a skill or node in the constellation area, non-related UI darkens and only the relevant relationship remains emphasized.\n\n## Requirements\n\n- Support hover-triggered focus mode from:\n  - constellation node hover\n  - skill pill hover\n- In focus mode, darken non-related UI across the page, including:\n  - graph axis/background\n  - unrelated graph nodes/labels/links\n  - unrelated timeline and dashboard elements\n- Keep the following elements visually emphasized (not darkened):\n  - hovered skill pill\n  - hovered/active constellation node\n  - connection lines between related node/skill items\n  - timeline series item related to that skill/node\n- On hover exit, restore default appearance cleanly with no stuck state.\n- Preserve existing click behavior, keyboard behavior, and detail panel opening logic.\n- Respect reduced-motion preferences and existing accessibility patterns.\n\n## Likely Files To Update\n\n- `src/components/DashboardLayout.tsx`\n- `src/hooks/useConstellationInteraction.ts`\n- `src/hooks/useConstellationHighlight.ts`\n- `src/components/TimelineInterventionsSubsection.tsx`\n- `src/components/RepeatMedicationsSubsection.tsx`\n- `src/components/ExpandableCardShell.tsx`\n- `src/index.css`\n\nUpdate additional files only if necessary.\n\n## Success Criteria\n\nAll of the following must be true:\n\n- [ ] Hovering a constellation node enters focus mode with global dimming.\n- [ ] Hovering a skill pill enters focus mode with global dimming.\n- [ ] In focus mode, only the relevant node + relationship links + related timeline series item + active skill pill remain visually highlighted.\n- [ ] Graph axis/background visibly darken during focus mode.\n- [ ] Focus mode exits correctly on mouse leave with no lingering darkened state.\n- [ ] Existing interactions (role click, skill click, panel open, timeline expand/collapse) still work.\n- [ ] `npm run lint` passes.\n- [ ] `npm run typecheck` passes.\n- [ ] `npm run build` passes.\n- [ ] Playwright MCP evidence confirms behavior for both node-hover and skill-pill-hover scenarios.\n\n## Playwright MCP Verification\n\nReviewer must validate with Playwright MCP and record evidence in `.ralph/review.md`:\n\n- Run or confirm dev server at `http://localhost:5173`\n- Capture baseline screenshot before hover\n- Hover a constellation node and capture screenshot\n- Hover a skill pill and capture screenshot\n- In both hover screenshots, verify:\n  - unrelated areas are darkened\n  - related graph + timeline + skill elements remain emphasized\n\n## Constraints\n\n- Do not add new dependencies.\n- Follow existing TypeScript/React conventions and current styling system.\n- Keep changes focused to this feature only.\n- If a blocker repeats with identical evidence across 3 cycles, escalate in `.ralph/review.md` instead of forcing completion.\n\n## Status\n\nTrack progress in `.ralph/plan.md`, `.ralph/build.md`, and `.ralph/review.md`.\nWhen all success criteria are met, print `LOOP_COMPLETE`.\n"}}
@@ -1,5 +1,5 @@
 {
-  "pid": 2080966,
-  "started": "2026-02-17T14:04:00.931461003Z",
+  "pid": 2082303,
+  "started": "2026-02-17T14:05:55.274566523Z",
  "prompt": "# Task: Constellation Hover Focus Mode With Global Dimming\n\nImplement a focused hover mode so that ..."
 }
@@ -2,9 +2,9 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Andy Charlwood — MPharm | CV</title>
+    <title>CVMIS: Charlwood, Andrew</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Inter+Tight:wght@400;500;600&family=Inter:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">
@@ -0,0 +1,55 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 300">
+  <defs>
+    <clipPath id="cp">
+      <rect x="250" y="50" width="100" height="225" rx="50"/>
+    </clipPath>
+  </defs>
+
+  <!-- Teal pill — fanned left: translate(-10,0) translate(300,275) rotate(-55) translate(-300,-275) -->
+  <g transform="translate(-10,0) translate(300,275) rotate(-55) translate(-300,-275)">
+    <g transform="translate(250,50)">
+      <rect width="100" height="225" rx="50" fill="#0E7A7D"/>
+      <g transform="translate(21,50) scale(0.6)">
+        <path d="M25 70 V0 H55 C80 0 80 35 55 35 H25 M55 35 L85 70 M53 67 L87 38" stroke="white" stroke-width="10" stroke-linecap="butt" stroke-linejoin="miter" fill="none"/>
+      </g>
+    </g>
+  </g>
+
+  <!-- Green pill — fanned right: translate(10,0) translate(300,275) rotate(55) translate(-300,-275) -->
+  <g transform="translate(10,0) translate(300,275) rotate(55) translate(-300,-275)">
+    <g transform="translate(250,50)">
+      <rect width="100" height="225" rx="50" fill="#109E6C"/>
+      <g transform="translate(22.5,50) scale(0.5)">
+        <rect x="0" y="60" width="20" height="40" fill="white"/>
+        <rect x="30" y="40" width="20" height="60" fill="white"/>
+        <rect x="60" y="20" width="20" height="80" fill="white"/>
+        <rect x="90" y="0" width="20" height="100" fill="white"/>
+      </g>
+    </g>
+  </g>
+
+  <!-- Amber pill — center (no fan) -->
+  <g transform="translate(250,50)">
+    <rect width="100" height="225" rx="50" fill="#E38B16"/>
+    <g transform="translate(25,50) scale(0.6)">
+      <path d="M10 0 L50 30 L10 60" stroke="white" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+      <line x1="55" y1="65" x2="85" y2="65" stroke="white" stroke-width="10" stroke-linecap="round"/>
+    </g>
+  </g>
+
+  <!-- Blend overlays clipped to center pill -->
+  <g clip-path="url(#cp)">
+    <g transform="translate(-10,0) translate(300,275) rotate(-55) translate(-300,-275)" style="mix-blend-mode:multiply" opacity="0.3">
+      <g transform="translate(250,50)">
+        <rect width="100" height="225" rx="50" fill="#0E7A7D"/>
+      </g>
+    </g>
+  </g>
+  <g clip-path="url(#cp)">
+    <g transform="translate(10,0) translate(300,275) rotate(55) translate(-300,-275)" style="mix-blend-mode:multiply" opacity="0.3">
+      <g transform="translate(250,50)">
+        <rect width="100" height="225" rx="50" fill="#109E6C"/>
+      </g>
+    </g>
+  </g>
+</svg>
@@ -12,8 +12,9 @@ import { LastConsultationCard } from './LastConsultationCard'
 import { ChatWidget } from './ChatWidget'
 import { useActiveSection } from '@/hooks/useActiveSection'
 import { useDetailPanel } from '@/contexts/DetailPanelContext'
-import { timelineConsultations } from '@/data/timeline'
+import { timelineConsultations, timelineEntities } from '@/data/timeline'
 import { skills } from '@/data/skills'
+import { constellationNodes } from '@/data/constellation'
 import type { PaletteAction } from '@/lib/search'
 import { prefersReducedMotion, motionSafeTransition } from '@/lib/utils'

@@ -49,6 +50,47 @@ export function DashboardLayout() {
    [],
  )

+  // Global focus mode: tracks which entity (skill or role) is being hovered across all components
+  const [globalFocusId, setGlobalFocusId] = useState<string | null>(null)
+
+  // Build lookup maps for resolving relationships between skills and roles
+  const nodeTypeById = useMemo(
+    () => new Map(constellationNodes.map(n => [n.id, n.type])),
+    [],
+  )
+  const skillToRoles = useMemo(() => {
+    const map = new Map<string, Set<string>>()
+    for (const entity of timelineEntities) {
+      for (const skillId of entity.skills) {
+        if (!map.has(skillId)) map.set(skillId, new Set())
+        map.get(skillId)!.add(entity.id)
+      }
+    }
+    return map
+  }, [])
+  const roleToSkills = useMemo(
+    () => new Map(timelineEntities.map(e => [e.id, new Set(e.skills)])),
+    [],
+  )
+
+  // Derive the set of all IDs related to the focused entity
+  const focusRelatedIds = useMemo(() => {
+    if (!globalFocusId) return null
+    const related = new Set<string>()
+    related.add(globalFocusId)
+    const nodeType = nodeTypeById.get(globalFocusId)
+    if (nodeType === 'skill') {
+      // Skill focused: related roles are those containing this skill
+      const roles = skillToRoles.get(globalFocusId)
+      if (roles) roles.forEach(r => related.add(r))
+    } else {
+      // Role/education focused: related skills are that entity's skills
+      const entitySkills = roleToSkills.get(globalFocusId)
+      if (entitySkills) entitySkills.forEach(s => related.add(s))
+    }
+    return related
+  }, [globalFocusId, nodeTypeById, skillToRoles, roleToSkills])
+
  // Signal constellation animation readiness when patient summary scrolls out of view
  useEffect(() => {
    const el = patientSummaryRef.current
@@ -115,11 +157,14 @@ export function DashboardLayout() {

  const handleNodeHighlight = useCallback((id: string | null) => {
    setHighlightedNodeId(id)
+    setGlobalFocusId(id)
  }, [])

  const handleNodeHover = useCallback((id: string | null) => {
-    setHighlightedRoleId(id)
-  }, [])
+    const nodeType = id ? nodeTypeById.get(id) : null
+    setHighlightedRoleId(nodeType !== 'skill' ? id : null)
+    setGlobalFocusId(id)
+  }, [nodeTypeById])

  // Global Ctrl+K listener to open command palette
  useEffect(() => {
@@ -243,11 +288,11 @@ export function DashboardLayout() {


                  <div className="chronology-item">
-                    <LastConsultationCard highlightedRoleId={highlightedRoleId} />
+                    <LastConsultationCard highlightedRoleId={highlightedRoleId} focusRelatedIds={focusRelatedIds} />
                  </div>

                  <div className="chronology-item">
-                    <TimelineInterventionsSubsection onNodeHighlight={handleNodeHighlight} highlightedRoleId={highlightedRoleId} />
+                    <TimelineInterventionsSubsection onNodeHighlight={handleNodeHighlight} highlightedRoleId={highlightedRoleId} focusRelatedIds={focusRelatedIds} />
                  </div>
                </div>
                <div className="pathway-graph-sticky">
@@ -258,6 +303,7 @@ export function DashboardLayout() {
                    highlightedNodeId={highlightedNodeId}
                    containerHeight={chronologyHeight}
                    animationReady={constellationReady}
+                    globalFocusActive={globalFocusId !== null}
                  />
                </div>

@@ -265,7 +311,7 @@ export function DashboardLayout() {
              </div>

              <div data-tile-id="section-skills" style={{ marginTop: '22px' }}>
-                <RepeatMedicationsSubsection onNodeHighlight={handleNodeHighlight} />
+                <RepeatMedicationsSubsection onNodeHighlight={handleNodeHighlight} focusRelatedIds={focusRelatedIds} />
              </div>
            </ParentSection>
          </div>
@@ -6,6 +6,7 @@ import { hexToRgba, motionSafeTransition } from '@/lib/utils'
 interface ExpandableCardShellProps {
  isExpanded: boolean
  isHighlighted: boolean
+  isDimmedByFocus?: boolean
  accentColor: string
  onToggle: () => void
  ariaLabel: string
@@ -21,6 +22,7 @@ interface ExpandableCardShellProps {
 export function ExpandableCardShell({
  isExpanded,
  isHighlighted,
+  isDimmedByFocus = false,
  accentColor,
  onToggle,
  ariaLabel,
@@ -52,6 +54,10 @@ export function ExpandableCardShell({
      className={className}
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
+      style={{
+        opacity: isDimmedByFocus ? 0.25 : 1,
+        transition: 'opacity 150ms ease-out',
+      }}
    >
      <div
        style={{
@@ -8,15 +8,17 @@ import { DEFAULT_ORG_COLOR } from '@/lib/theme-colors'

 interface LastConsultationCardProps {
  highlightedRoleId?: string | null
+  focusRelatedIds?: Set<string> | null
 }

-export function LastConsultationCard({ highlightedRoleId }: LastConsultationCardProps) {
+export function LastConsultationCard({ highlightedRoleId, focusRelatedIds }: LastConsultationCardProps) {
  const { openPanel } = useDetailPanel()
  const consultation = timelineConsultations.find(c => c.isCurrent) ?? timelineConsultations[0]
  if (!consultation) {
    return null
  }
  const isHighlighted = highlightedRoleId === consultation.id
+  const isDimmed = focusRelatedIds != null && !focusRelatedIds.has(consultation.id)

  const handleOpenPanel = () => {
    openPanel({ type: 'consultation', consultation })
@@ -67,9 +69,10 @@ export function LastConsultationCard({ highlightedRoleId }: LastConsultationCard
        border: '1px solid',
        borderColor: isHighlighted ? hexToRgba(consultation.orgColor ?? DEFAULT_ORG_COLOR, 0.2) : 'transparent',
        background: isHighlighted ? hexToRgba(consultation.orgColor ?? DEFAULT_ORG_COLOR, 0.03) : 'transparent',
-        transition: 'border-color 150ms ease-out, background-color 150ms ease-out',
+        transition: 'border-color 150ms ease-out, background-color 150ms ease-out, opacity 150ms ease-out',
        padding: '8px',
        margin: '-8px',
+        opacity: isDimmed ? 0.25 : 1,
      }}
    >
      <CardHeader dotColor="green" title="LAST CONSULTATION" rightText="Current role" />
@@ -0,0 +1,156 @@
+import { useState, useCallback, useRef, useEffect } from 'react'
+
+interface PhoneCaptchaProps {
+  phone: string
+}
+
+function generateChallenge() {
+  const a = Math.floor(Math.random() * 10) + 2
+  const b = Math.floor(Math.random() * 8) + 1
+  return { question: `${a} + ${b}`, answer: a + b }
+}
+
+export function PhoneCaptcha({ phone }: PhoneCaptchaProps) {
+  const [state, setState] = useState<'masked' | 'challenge' | 'revealed'>('masked')
+  const [challenge, setChallenge] = useState(generateChallenge)
+  const [input, setInput] = useState('')
+  const [error, setError] = useState(false)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const maskedPhone = phone.slice(0, 2) + '\u2022\u2022\u2022 \u2022\u2022\u2022\u2022\u2022\u2022'
+
+  useEffect(() => {
+    if (state === 'challenge') {
+      requestAnimationFrame(() => inputRef.current?.focus())
+    }
+  }, [state])
+
+  const handleRevealClick = useCallback(() => {
+    setChallenge(generateChallenge())
+    setInput('')
+    setError(false)
+    setState('challenge')
+  }, [])
+
+  const handleSubmit = useCallback(() => {
+    const parsed = parseInt(input.trim(), 10)
+    if (parsed === challenge.answer) {
+      setState('revealed')
+    } else {
+      setError(true)
+      setTimeout(() => {
+        setError(false)
+        setChallenge(generateChallenge())
+        setInput('')
+      }, 600)
+    }
+  }, [input, challenge.answer])
+
+  const handleDismiss = useCallback(() => {
+    setState('masked')
+    setInput('')
+    setError(false)
+  }, [])
+
+  if (state === 'revealed') {
+    return (
+      <a
+        href={`tel:${phone}`}
+        style={{
+          color: 'var(--accent)',
+          fontWeight: 500,
+          textDecoration: 'none',
+          textAlign: 'right',
+        }}
+        onMouseEnter={(e) => (e.currentTarget.style.textDecoration = 'underline')}
+        onMouseLeave={(e) => (e.currentTarget.style.textDecoration = 'none')}
+      >
+        {phone.replace(/(\d{5})(\d{6})/, '$1 $2')}
+      </a>
+    )
+  }
+
+  if (state === 'challenge') {
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: '4px' }}>
+        <span
+          style={{
+            fontSize: '11px',
+            color: error ? 'var(--alert, #e53935)' : 'var(--text-tertiary)',
+            fontFamily: 'Geist Mono, monospace',
+            transition: 'color 150ms',
+          }}
+        >
+          {error ? 'Try again' : `${challenge.question} = ?`}
+        </span>
+        <div style={{ display: 'flex', gap: '4px', alignItems: 'center' }}>
+          <input
+            ref={inputRef}
+            type="text"
+            inputMode="numeric"
+            autoComplete="off"
+            value={input}
+            onChange={(e) => { setInput(e.target.value); setError(false) }}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') handleSubmit()
+              if (e.key === 'Escape') handleDismiss()
+            }}
+            style={{
+              width: '36px',
+              padding: '3px 4px',
+              fontSize: '12px',
+              fontFamily: 'Geist Mono, monospace',
+              border: `1px solid ${error ? 'var(--alert, #e53935)' : 'var(--border)'}`,
+              borderRadius: '4px',
+              background: 'var(--surface)',
+              color: 'var(--text-primary)',
+              textAlign: 'center',
+              outline: 'none',
+              transition: 'border-color 150ms',
+            }}
+            aria-label={`Solve: ${challenge.question}`}
+          />
+          <button
+            type="button"
+            onClick={handleSubmit}
+            style={{
+              padding: '3px 8px',
+              fontSize: '11px',
+              fontWeight: 600,
+              border: '1px solid var(--accent-border)',
+              borderRadius: '4px',
+              background: 'var(--accent-light)',
+              color: 'var(--accent)',
+              cursor: 'pointer',
+              lineHeight: 1,
+            }}
+          >
+            OK
+          </button>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={handleRevealClick}
+      style={{
+        color: 'var(--text-secondary)',
+        fontWeight: 500,
+        textAlign: 'right',
+        background: 'none',
+        border: 'none',
+        padding: 0,
+        cursor: 'pointer',
+        fontSize: 'inherit',
+        fontFamily: 'inherit',
+      }}
+      aria-label="Reveal phone number"
+      title="Click to verify and reveal"
+    >
+      {maskedPhone}
+    </button>
+  )
+}
@@ -26,9 +26,10 @@ interface SkillRowProps {
  yearsSuffix: string
  onClick: () => void
  onHighlight?: (id: string | null) => void
+  isDimmedByFocus?: boolean
 }

-function SkillRow({ skill, yearsSuffix, onClick, onHighlight }: SkillRowProps) {
+function SkillRow({ skill, yearsSuffix, onClick, onHighlight, isDimmedByFocus = false }: SkillRowProps) {
  const IconComponent = iconMap[skill.icon]

  const handleKeyDown = (e: React.KeyboardEvent) => {
@@ -55,7 +56,8 @@ function SkillRow({ skill, yearsSuffix, onClick, onHighlight }: SkillRowProps) {
        borderRadius: 'var(--radius-sm)',
        border: '1px solid var(--border-light)',
        cursor: 'pointer',
-        transition: 'border-color 0.15s, box-shadow 0.15s',
+        transition: 'border-color 0.15s, box-shadow 0.15s, opacity 150ms ease-out',
+        opacity: isDimmedByFocus ? 0.25 : 1,
      }}
      onMouseEnter={(e) => {
        e.currentTarget.style.borderColor = 'var(--accent-border)'
@@ -134,6 +136,7 @@ interface CategorySectionProps {
  onSkillClick: (skill: SkillMedication) => void
  isFirst: boolean
  onNodeHighlight?: (id: string | null) => void
+  focusRelatedIds?: Set<string> | null
 }

 function CategorySection({
@@ -144,6 +147,7 @@ function CategorySection({
  onSkillClick,
  isFirst,
  onNodeHighlight,
+  focusRelatedIds,
 }: CategorySectionProps) {
  return (
    <div style={{ marginTop: isFirst ? 0 : '16px' }}>
@@ -193,6 +197,7 @@ function CategorySection({
            yearsSuffix={yearsSuffix}
            onClick={() => onSkillClick(skill)}
            onHighlight={onNodeHighlight}
+            isDimmedByFocus={focusRelatedIds != null && !focusRelatedIds.has(skill.id)}
          />
        ))}
      </div>
@@ -202,9 +207,10 @@ function CategorySection({

 interface RepeatMedicationsSubsectionProps {
  onNodeHighlight?: (id: string | null) => void
+  focusRelatedIds?: Set<string> | null
 }

-export function RepeatMedicationsSubsection({ onNodeHighlight }: RepeatMedicationsSubsectionProps) {
+export function RepeatMedicationsSubsection({ onNodeHighlight, focusRelatedIds }: RepeatMedicationsSubsectionProps) {
  const { openPanel } = useDetailPanel()
  const skillsCopy = getSkillsUICopy()

@@ -238,6 +244,7 @@ export function RepeatMedicationsSubsection({ onNodeHighlight }: RepeatMedicatio
            onSkillClick={handleSkillClick}
            isFirst
            onNodeHighlight={onNodeHighlight}
+            focusRelatedIds={focusRelatedIds}
          />
        ))}
      </div>
@@ -11,7 +11,8 @@ import {
  Wrench,
  X,
 } from 'lucide-react'
-import cvmisLogo from '../../cvmis-logo.svg'
+import { CvmisLogo } from './CvmisLogo'
+import { PhoneCaptcha } from './PhoneCaptcha'
 import { patient } from '@/data/patient'
 import { tags } from '@/data/tags'
 import { alerts } from '@/data/alerts'
@@ -266,22 +267,14 @@ export default function Sidebar({ activeSection, onNavigate, onSearchClick }: Si
            <div
              style={{
                display: 'flex',
-                alignItems: 'center',
+                alignItems: 'flex-end',
                justifyContent: 'flex-start',
                gap: '6px',
                marginBottom: '4px',
                width: '100%',
              }}
            >
-              <img
-                src={cvmisLogo}
-                alt="CVMIS"
-                style={{
-                  width: '25%',
-                  height: 'auto',
-                  display: 'block',
-                }}
-              />
+              <CvmisLogo cssHeight="48px" />
                          <button
              type="button"
              onClick={onSearchClick}
@@ -299,7 +292,6 @@ export default function Sidebar({ activeSection, onNavigate, onSearchClick }: Si
                gap: '8px',
                padding: '0 10px',
                cursor: 'pointer',
-                marginBottom: '8px',
              }}
            >
              <Search size={16} style={{ color: 'var(--text-tertiary)', flexShrink: 0 }} aria-hidden="true" />
@@ -440,19 +432,7 @@ export default function Sidebar({ activeSection, onNavigate, onSearchClick }: Si
                }}
              >
                <span style={{ color: 'var(--text-tertiary)', fontWeight: 400 }}>{sidebarCopy.phoneLabel}</span>
-                <a
-                  href={`tel:${patient.phone}`}
-                  style={{
-                    color: 'var(--accent)',
-                    fontWeight: 500,
-                    textDecoration: 'none',
-                    textAlign: 'right',
-                  }}
-                  onMouseEnter={(e) => (e.currentTarget.style.textDecoration = 'underline')}
-                  onMouseLeave={(e) => (e.currentTarget.style.textDecoration = 'none')}
-                >
-                  {patient.phone.replace(/(\d{5})(\d{6})/, '$1 $2')}
-                </a>
+                <PhoneCaptcha phone={patient.phone} />
              </div>

              <div
@@ -1,16 +1,20 @@
 import { useMemo, useState, useCallback } from 'react'
-import { ChevronRight } from 'lucide-react'
+import { ChevronRight, ChevronDown, History } from 'lucide-react'
+import { motion, AnimatePresence } from 'framer-motion'
 import { ExpandableCardShell } from './ExpandableCardShell'
 import { useDetailPanel } from '@/contexts/DetailPanelContext'
 import { timelineEntities, timelineConsultations } from '@/data/timeline'
 import { getExperienceEducationUICopy } from '@/lib/profile-content'
 import type { TimelineEntity } from '@/types/pmr'
-import { hexToRgba } from '@/lib/utils'
+import { hexToRgba, motionSafeTransition } from '@/lib/utils'
+
+const VISIBLE_COUNT = 4

 interface TimelineInterventionItemProps {
  entity: TimelineEntity
  isExpanded: boolean
  isHighlightedFromGraph: boolean
+  isDimmedByFocus: boolean
  isEducationAnchor: boolean
  onToggle: () => void
  onViewFull: () => void
@@ -21,6 +25,7 @@ function TimelineInterventionItem({
  entity,
  isExpanded,
  isHighlightedFromGraph,
+  isDimmedByFocus,
  isEducationAnchor,
  onToggle,
  onViewFull,
@@ -34,6 +39,7 @@ function TimelineInterventionItem({
    <ExpandableCardShell
      isExpanded={isExpanded}
      isHighlighted={isHighlightedFromGraph}
+      isDimmedByFocus={isDimmedByFocus}
      accentColor={entity.orgColor}
      onToggle={onToggle}
      ariaLabel={`${entity.title} at ${entity.organization}, ${entity.dateRange.display}. Click to ${isExpanded ? 'collapse' : 'expand'} details.`}
@@ -254,12 +260,17 @@ function TimelineInterventionItem({
 interface TimelineInterventionsSubsectionProps {
  onNodeHighlight?: (id: string | null) => void
  highlightedRoleId?: string | null
+  focusRelatedIds?: Set<string> | null
 }

-export function TimelineInterventionsSubsection({ onNodeHighlight, highlightedRoleId }: TimelineInterventionsSubsectionProps) {
+export function TimelineInterventionsSubsection({ onNodeHighlight, highlightedRoleId, focusRelatedIds }: TimelineInterventionsSubsectionProps) {
  const [expandedId, setExpandedId] = useState<string | null>(null)
+  const [historicalOpen, setHistoricalOpen] = useState(false)
  const { openPanel } = useDetailPanel()

+  const visibleEntities = useMemo(() => timelineEntities.slice(0, VISIBLE_COUNT), [])
+  const historicalEntities = useMemo(() => timelineEntities.slice(VISIBLE_COUNT), [])
+
  const consultationsById = useMemo(
    () => new Map(timelineConsultations.map((consultation) => [consultation.id, consultation])),
    [],
@@ -280,20 +291,116 @@ export function TimelineInterventionsSubsection({ onNodeHighlight, highlightedRo
    openPanel({ type: 'career-role', consultation })
  }, [consultationsById, openPanel])

+  const historicalHasAnyFocusRelevance = focusRelatedIds !== null && focusRelatedIds !== undefined &&
+    historicalEntities.some((e) => focusRelatedIds.has(e.id))
+  const historicalDimmed = focusRelatedIds !== null && focusRelatedIds !== undefined && !historicalHasAnyFocusRelevance
+
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
-      {timelineEntities.map((entity) => (
+      {visibleEntities.map((entity) => (
        <TimelineInterventionItem
          key={entity.id}
          entity={entity}
          isExpanded={expandedId === entity.id}
          isHighlightedFromGraph={highlightedRoleId === entity.id}
+          isDimmedByFocus={focusRelatedIds !== null && focusRelatedIds !== undefined && !focusRelatedIds.has(entity.id)}
          isEducationAnchor={entity.id === firstEducationId}
          onToggle={() => handleToggle(entity.id)}
          onViewFull={() => handleViewFull(entity)}
          onHighlight={onNodeHighlight}
        />
      ))}
+
+      {historicalEntities.length > 0 && (
+        <div
+          style={{
+            opacity: historicalDimmed ? 0.25 : 1,
+            transition: 'opacity 150ms ease-out',
+          }}
+        >
+          <div
+            role="button"
+            tabIndex={0}
+            onClick={() => setHistoricalOpen((prev) => !prev)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault()
+                setHistoricalOpen((prev) => !prev)
+              }
+            }}
+            aria-expanded={historicalOpen}
+            aria-label={`${historicalOpen ? 'Hide' : 'Show'} ${historicalEntities.length} historical entries`}
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '8px',
+              padding: '6px 10px',
+              background: 'var(--bg-dashboard)',
+              borderRadius: 'var(--radius-sm)',
+              border: '1px solid var(--border-light)',
+              cursor: 'pointer',
+              transition: 'border-color 0.15s, box-shadow 0.15s',
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.borderColor = 'rgba(0, 137, 123, 0.2)'
+              e.currentTarget.style.boxShadow = 'var(--shadow-md)'
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.borderColor = 'var(--border-light)'
+              e.currentTarget.style.boxShadow = 'none'
+            }}
+          >
+            <History size={13} style={{ color: 'var(--text-tertiary)', flexShrink: 0 }} />
+            <span
+              style={{
+                fontSize: '12px',
+                color: 'var(--text-secondary)',
+                fontFamily: 'var(--font-geist-mono)',
+                flex: 1,
+              }}
+            >
+              {historicalOpen ? 'Hide' : 'View'} historical entries ({historicalEntities.length})
+            </span>
+            <ChevronDown
+              size={13}
+              style={{
+                color: 'var(--text-tertiary)',
+                flexShrink: 0,
+                transform: historicalOpen ? 'rotate(180deg)' : 'none',
+                transition: 'transform 0.15s ease-out',
+              }}
+            />
+          </div>
+
+          <AnimatePresence>
+            {historicalOpen && (
+              <motion.div
+                initial={{ height: 0, opacity: 0 }}
+                animate={{ height: 'auto', opacity: 1 }}
+                exit={{ height: 0, opacity: 0 }}
+                transition={motionSafeTransition(0.25)}
+                style={{ overflow: 'hidden' }}
+              >
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '10px', paddingTop: '10px' }}>
+                  {historicalEntities.map((entity) => (
+                    <TimelineInterventionItem
+                      key={entity.id}
+                      entity={entity}
+                      isExpanded={expandedId === entity.id}
+                      isHighlightedFromGraph={highlightedRoleId === entity.id}
+                      isDimmedByFocus={focusRelatedIds !== null && focusRelatedIds !== undefined && !focusRelatedIds.has(entity.id)}
+                      isEducationAnchor={entity.id === firstEducationId}
+                      onToggle={() => handleToggle(entity.id)}
+                      onViewFull={() => handleViewFull(entity)}
+                      onHighlight={onNodeHighlight}
+                    />
+                  ))}
+                </div>
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </div>
+      )}
    </div>
  )
 }
@@ -27,6 +27,7 @@ interface CareerConstellationProps {
  highlightedNodeId?: string | null
  containerHeight?: number | null
  animationReady?: boolean
+  globalFocusActive?: boolean
 }

 const nodeById = new Map(constellationNodes.map(node => [node.id, node]))
@@ -39,6 +40,7 @@ const CareerConstellation: React.FC<CareerConstellationProps> = ({
  highlightedNodeId,
  containerHeight,
  animationReady = false,
+  globalFocusActive = false,
 }) => {
  const svgRef = useRef<SVGSVGElement>(null)
  const containerRef = useRef<HTMLDivElement>(null)
@@ -217,8 +219,6 @@ const CareerConstellation: React.FC<CareerConstellationProps> = ({
    resolveGraphFallback,
    resolveRoleFallback,
    dimensionsTrigger: dimensions.width + dimensions.height,
-    pauseForInteraction: animation.pauseForInteraction,
-    resumeAfterInteraction: animation.resumeAfterInteraction,
  })

  // External highlight sync
@@ -301,6 +301,7 @@ const CareerConstellation: React.FC<CareerConstellationProps> = ({
          viewBox={`0 0 ${dimensions.width} ${dimensions.height}`}
          role="img"
          aria-label="Clinical pathway constellation showing career roles and skills in reverse-chronological order along a vertical timeline"
+          className={globalFocusActive || highlightedNodeId || pinnedNodeId ? 'constellation-focus-active' : ''}
          style={{
            display: 'block',
            width: '100%',
@@ -316,6 +317,7 @@ const CareerConstellation: React.FC<CareerConstellationProps> = ({
        {!prefersReducedMotion && (
          <PlayPauseButton
            isPlaying={animation.isPlaying}
+            isCompleted={animation.isCompleted}
            onToggle={animation.togglePlayPause}
            isMobile={isMobile}
            visible={chartInView}
@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from 'react'

 interface PlayPauseButtonProps {
  isPlaying: boolean
+  isCompleted?: boolean
  onToggle: () => void
  isMobile: boolean
  visible?: boolean
@@ -9,7 +10,7 @@ interface PlayPauseButtonProps {
 }

 export const PlayPauseButton: React.FC<PlayPauseButtonProps> = ({
-  isPlaying, onToggle, isMobile, visible = true, containerRef,
+  isPlaying, isCompleted = false, onToggle, isMobile, visible = true, containerRef,
 }) => {
  const vw = typeof window !== 'undefined' ? window.innerWidth : 1024
  const scale = vw >= 1440 ? 1.75 : vw >= 1280 ? 1.5 : vw >= 1080 ? 1.25 : 1
@@ -62,7 +63,7 @@ export const PlayPauseButton: React.FC<PlayPauseButtonProps> = ({
    <button
      ref={btnRef}
      onClick={onToggle}
-      aria-label={isPlaying ? 'Pause animation' : 'Play animation'}
+      aria-label={isCompleted ? 'Replay animation' : isPlaying ? 'Pause animation' : 'Play animation'}
      style={{
        position: 'absolute',
        left: offset,
@@ -87,7 +88,11 @@ export const PlayPauseButton: React.FC<PlayPauseButtonProps> = ({
      onMouseEnter={e => { if (showButton) e.currentTarget.style.opacity = '1' }}
      onMouseLeave={e => { if (showButton) e.currentTarget.style.opacity = '0.85' }}
    >
-      {isPlaying ? (
+      {isCompleted ? (
+        <svg width={Math.round(14 * scale)} height={Math.round(14 * scale)} viewBox="0 0 76.398 76.398" fill="var(--text-secondary)">
+          <path d="M58.828,16.208l-3.686,4.735c7.944,6.182,11.908,16.191,10.345,26.123C63.121,62.112,48.954,72.432,33.908,70.06C18.863,67.69,8.547,53.522,10.912,38.477c1.146-7.289,5.063-13.694,11.028-18.037c5.207-3.79,11.433-5.613,17.776-5.252l-5.187,5.442l3.848,3.671l8.188-8.596l0.002,0.003l3.668-3.852L46.39,8.188l-0.002,0.001L37.795,0l-3.671,3.852l5.6,5.334c-7.613-0.36-15.065,1.853-21.316,6.403c-7.26,5.286-12.027,13.083-13.423,21.956c-2.879,18.313,9.676,35.558,27.989,38.442c1.763,0.277,3.514,0.411,5.245,0.411c16.254-0.001,30.591-11.85,33.195-28.4C73.317,35.911,68.494,23.73,58.828,16.208z" />
+        </svg>
+      ) : isPlaying ? (
        <svg width={Math.round(14 * scale)} height={Math.round(14 * scale)} viewBox="0 0 14 14" fill="var(--text-secondary)">
          <rect x="2" y="1" width="4" height="12" rx="1" />
          <rect x="8" y="1" width="4" height="12" rx="1" />
@@ -22,6 +22,8 @@ export const LINK_BASE_WIDTH = 0.7
 export const LINK_STRENGTH_WIDTH_FACTOR = 0
 export const LINK_BASE_OPACITY = 0
 export const LINK_STRENGTH_OPACITY_FACTOR = 0
+export const LINK_REST_OPACITY = 0.12
+export const LINK_REST_STRENGTH_FACTOR = 0.08
 export const LINK_HIGHLIGHT_BASE_WIDTH = 1
 export const LINK_HIGHLIGHT_STRENGTH_WIDTH_FACTOR = 2
 export const LINK_BEZIER_VERTICAL_OFFSET = 0.15
@@ -66,7 +68,7 @@ export const ANIM_STEP_GAP_MS = 1000
 export const ANIM_HOLD_MS = 15000
 export const ANIM_RESET_MS = 800
 export const ANIM_RESTART_DELAY_MS = 400
-export const ANIM_INTERACTION_RESUME_MS = 800
+
 export const ANIM_SETTLE_ALPHA = 0.05
 export const ANIM_MONTH_STEP_MS = 80

@@ -40,7 +40,7 @@ export interface ConstellationCallbacks {
  onNodeHover?: (id: string | null) => void
 }

-export type AnimationState = 'IDLE' | 'PLAYING' | 'PAUSED' | 'HOLDING' | 'RESETTING'
+export type AnimationState = 'IDLE' | 'PLAYING' | 'PAUSED' | 'HOLDING' | 'RESETTING' | 'COMPLETED'

 export interface AnimationStep {
  entityId: string
@@ -39,6 +39,7 @@ export const investigations: Investigation[] = [
    ],
    techStack: ['Python', 'Pandas', 'SQL'],
    skills: ['Health Economics', 'Medicines Optimisation', 'Prescribing Analytics'],
+    thumbnail: '/thumbnails/switchingdashboard.jpg',
  },
  {
    id: 'inv-blueteq-gen',
@@ -76,6 +77,7 @@ export const investigations: Investigation[] = [
    ],
    techStack: ['Python', 'SQL'],
    skills: ['Controlled Drugs', 'Patient Safety', 'Prescribing Analytics'],
+    thumbnail: '/thumbnails/ome.jpg',
  },
  {
    id: 'inv-nms-training',
@@ -4,7 +4,7 @@ import { select as d3select } from 'd3'
 import {
  DOMAIN_COLOR_MAP, prefersReducedMotion,
  LINK_BASE_WIDTH, LINK_STRENGTH_WIDTH_FACTOR,
-  LINK_BASE_OPACITY, LINK_STRENGTH_OPACITY_FACTOR,
+  LINK_REST_OPACITY, LINK_REST_STRENGTH_FACTOR,
  LINK_HIGHLIGHT_BASE_WIDTH, LINK_HIGHLIGHT_STRENGTH_WIDTH_FACTOR,
  SKILL_STROKE_OPACITY, SKILL_ACTIVE_STROKE_OPACITY,
  SKILL_REST_OPACITY, SKILL_ACTIVE_OPACITY, LABEL_REST_OPACITY,
@@ -94,7 +94,7 @@ export function useConstellationHighlight(deps: {
          const src = resolveLinkId(l.source)
          const tgt = resolveLinkId(l.target)
          if (!isVisible(src) || !isVisible(tgt)) return 0
-          return LINK_BASE_OPACITY + l.strength * LINK_STRENGTH_OPACITY_FACTOR
+          return LINK_REST_OPACITY + l.strength * LINK_REST_STRENGTH_FACTOR
        })

      return
@@ -177,7 +177,7 @@ export function useConstellationHighlight(deps: {
        if (src === activeNodeId || tgt === activeNodeId) {
          return Math.max(0.35, Math.min(0.65, l.strength * 0.55 + 0.2))
        }
-        return LINK_BASE_OPACITY + l.strength * LINK_STRENGTH_OPACITY_FACTOR
+        return HIGHLIGHT_DIM_OPACITY * (LINK_REST_OPACITY + l.strength * LINK_REST_STRENGTH_FACTOR)
      })
      .attr('stroke-width', l => {
        const src = resolveLinkId(l.source)
@@ -11,8 +11,6 @@ export function useConstellationInteraction(deps: {
  resolveGraphFallback: () => string | null
  resolveRoleFallback: () => string | null
  dimensionsTrigger: number
-  pauseForInteraction?: () => void
-  resumeAfterInteraction?: () => void
 }) {
  const [pinnedNodeId, setPinnedNodeId] = useState<string | null>(null)
  const pinnedNodeIdRef = useRef<string | null>(null)
@@ -34,24 +32,19 @@ export function useConstellationInteraction(deps: {
        pinnedNodeIdRef.current = null
        deps.highlightGraphRef.current?.(null)
        deps.callbacksRef.current.onNodeHover?.(null)
-        deps.resumeAfterInteraction?.()
      }
    })

    nodeSelection.on('mouseenter.interaction', function(_event: MouseEvent, d: SimNode) {
      if (supportsCoarsePointer) return
-      deps.pauseForInteraction?.()
      deps.highlightGraphRef.current?.(d.id)
-      if (d.type !== 'skill') {
-        deps.callbacksRef.current.onNodeHover?.(d.id)
-      }
+      deps.callbacksRef.current.onNodeHover?.(d.id)
    })

    nodeSelection.on('mouseleave.interaction', function() {
      if (supportsCoarsePointer) return
      deps.highlightGraphRef.current?.(deps.resolveGraphFallback())
      deps.callbacksRef.current.onNodeHover?.(deps.resolveRoleFallback())
-      deps.resumeAfterInteraction?.()
    })

    nodeSelection.on('click.interaction', function(_event: MouseEvent, d: SimNode) {
@@ -61,11 +54,9 @@ export function useConstellationInteraction(deps: {
          pinnedNodeIdRef.current = null
          deps.highlightGraphRef.current?.(null)
          deps.callbacksRef.current.onNodeHover?.(null)
-          deps.resumeAfterInteraction?.()
        } else {
          setPinnedNodeId(d.id)
          pinnedNodeIdRef.current = d.id
-          deps.pauseForInteraction?.()
          deps.highlightGraphRef.current?.(d.id)
          deps.callbacksRef.current.onNodeHover?.(d.type !== 'skill' ? d.id : deps.resolveRoleFallback())
        }
@@ -84,10 +84,8 @@ export function useForceSimulation(
    svg.selectAll('*').remove()

    const years = roleNodes.map(n => fractionalYear(n))
-    const now = new Date()
-    const currentFractionalYear = now.getFullYear() + now.getMonth() / 12
    const minYear = Math.min(...years)
-    const maxYear = Math.max(...years, currentFractionalYear)
+    const maxYear = Math.max(...years)

    const rw = isMobile ? MOBILE_ROLE_WIDTH : Math.round(ROLE_WIDTH * sf)
    const rh = isMobile ? ROLE_HEIGHT : Math.round(ROLE_HEIGHT * sf)
@@ -236,12 +234,12 @@ export function useForceSimulation(
    const axisRightPadding = isMobile ? 16 : Math.round(12 * sf)
    const axisX = width - axisRightPadding - labelSpace

-    const topTickY = tickYears.length > 0 ? yScale(tickYears[0]) : topPadding
+    const axisTop = yScale(maxYear) - 12
    timelineGroup.append('line')
      .attr('class', 'axis-line')
      .attr('x1', axisX)
      .attr('x2', axisX)
-      .attr('y1', topTickY - 12)
+      .attr('y1', axisTop)
      .attr('y2', height - bottomPadding + 12)
      .attr('stroke', 'var(--border)')
      .attr('stroke-width', 1)
@@ -287,7 +285,7 @@ export function useForceSimulation(

    const roleOrder = [...roleNodes].sort((a, b) => fractionalYear(a) - fractionalYear(b))
    const roleInitialMap = new Map<string, { x: number; y: number }>()
-    const roleGap = isMobile ? 54 : Math.round(54 * sf)
+    const roleGap = isMobile ? 28 : Math.round(28 * sf)
    const roleX = axisX - roleGap - rw / 2

    roleOrder.forEach((role) => {
@@ -10,10 +10,7 @@ import {
  ANIM_LINK_STAGGER_MS,
  ANIM_REINFORCEMENT_MS,
  ANIM_STEP_GAP_MS,
-  ANIM_HOLD_MS,
-  ANIM_RESET_MS,
  ANIM_RESTART_DELAY_MS,
-  ANIM_INTERACTION_RESUME_MS,
  ANIM_SETTLE_ALPHA,
  ANIM_MONTH_STEP_MS,
  ANIM_CHRONOLOGICAL_ENABLED,
@@ -74,11 +71,10 @@ export function useTimelineAnimation(deps: UseTimelineAnimationDeps) {
  const rafIdRef = useRef(0)
  const timeoutIdsRef = useRef<number[]>([])
  const userPausedRef = useRef(false)
-  const interactionPausedRef = useRef(false)
-  const resumeTimerRef = useRef(0)
  const displayedMonthRef = useRef(-1) // 0-indexed, -1 = not yet shown
  const displayedYearRef = useRef(0)
  const [isPlaying, setIsPlaying] = useState(false)
+  const [isCompleted, setIsCompleted] = useState(false)
  const [animationInitialized, setAnimationInitialized] = useState(false)

  const scheduleTimeout = useCallback((fn: () => void, ms: number) => {
@@ -179,8 +175,6 @@ export function useTimelineAnimation(deps: UseTimelineAnimationDeps) {
    rafIdRef.current = 0
    timeoutIdsRef.current.forEach(id => clearTimeout(id))
    timeoutIdsRef.current = []
-    if (resumeTimerRef.current) clearTimeout(resumeTimerRef.current)
-    resumeTimerRef.current = 0
  }, [])

  const hideAll = useCallback(() => {
@@ -217,14 +211,6 @@ export function useTimelineAnimation(deps: UseTimelineAnimationDeps) {
    // Show full axis immediately — axis stays visible throughout animation
    if (tlGroup) {
      tlGroup.attr('opacity', 1)
-      let minTickY = Infinity
-      tlGroup.selectAll<SVGLineElement, number>('line.year-tick').each(function () {
-        const y = parseFloat(d3.select(this).attr('y1'))
-        if (y < minTickY) minTickY = y
-      })
-      if (minTickY < Infinity) {
-        tlGroup.select('.axis-line').attr('y1', minTickY - 12)
-      }
      tlGroup.selectAll('line.year-tick').attr('stroke-opacity', 0.8)
      tlGroup.selectAll('text.year-label').attr('opacity', 1)
      tlGroup.selectAll('line.year-guide').attr('stroke-opacity', 0.25)
@@ -255,15 +241,6 @@ export function useTimelineAnimation(deps: UseTimelineAnimationDeps) {

    // Show full axis
    if (tlGroup) {
-      // Find the topmost tick y to set axis line extent
-      let minTickY = Infinity
-      tlGroup.selectAll<SVGLineElement, number>('line.year-tick').each(function () {
-        const y = parseFloat(d3.select(this).attr('y1'))
-        if (y < minTickY) minTickY = y
-      })
-      if (minTickY < Infinity) {
-        tlGroup.select('.axis-line').attr('y1', minTickY - 12)
-      }
      tlGroup.selectAll('line.year-tick').attr('stroke-opacity', 0.8)
      tlGroup.selectAll('text.year-label').attr('opacity', 1)
      tlGroup.selectAll('line.year-guide').attr('stroke-opacity', 0.25)
@@ -400,41 +377,10 @@ export function useTimelineAnimation(deps: UseTimelineAnimationDeps) {

      const stepIdx = currentStepRef.current
      if (stepIdx >= animationSteps.length) {
-        // All steps done — hold then reset
-        animationStateRef.current = 'HOLDING'
-        scheduleTimeout(() => {
-          if (userPausedRef.current || interactionPausedRef.current) return
-          animationStateRef.current = 'RESETTING'
-
-          // Fade date indicator
-          deps.yearIndicatorRef.current?.transition().duration(ANIM_RESET_MS).attr('opacity', 0)
-
-          // Fade all
-          deps.nodeSelectionRef.current
-            ?.transition().duration(ANIM_RESET_MS).style('opacity', '0')
-          deps.linkSelectionRef.current
-            ?.transition().duration(ANIM_RESET_MS).attr('stroke-opacity', 0)
-          deps.connectorSelectionRef.current
-            ?.transition().duration(ANIM_RESET_MS).attr('opacity', 0)
-
-          scheduleTimeout(() => {
-            if (userPausedRef.current) return
-            // Reset skill radii
-            deps.nodeSelectionRef.current
-              ?.filter((d: SimNode) => d.type === 'skill')
-              .select('.node-circle')
-              .attr('r', 0)
-
-            visibleNodeIdsRef.current = new Set()
-            displayedMonthRef.current = -1
-            displayedYearRef.current = 0
-            currentStepRef.current = 0
-            animationStateRef.current = 'PLAYING'
-            setIsPlaying(true)
-
-            scheduleTimeout(advanceStep, ANIM_RESTART_DELAY_MS)
-          }, ANIM_RESET_MS + 50)
-        }, ANIM_HOLD_MS)
+        // All steps done — immediately show replay
+        animationStateRef.current = 'COMPLETED'
+        setIsPlaying(false)
+        setIsCompleted(true)
        return
      }

@@ -467,13 +413,24 @@ export function useTimelineAnimation(deps: UseTimelineAnimationDeps) {
  const togglePlayPause = useCallback(() => {
    if (prefersReducedMotion) return

-    if (userPausedRef.current) {
-      // Resume
+    if (animationStateRef.current === 'COMPLETED') {
+      // Replay from completed state
+      setIsCompleted(false)
+      userPausedRef.current = false
+      cancelAll()
+      hideAll()
+      currentStepRef.current = 0
+
+      scheduleTimeout(() => {
+        animationStateRef.current = 'PLAYING'
+        setIsPlaying(true)
+        runAnimation()
+      }, ANIM_RESTART_DELAY_MS)
+    } else if (userPausedRef.current) {
+      // Resume from user pause
      userPausedRef.current = false
-      interactionPausedRef.current = false
      animationStateRef.current = 'RESETTING'

-      // Reset and restart
      hideAll()
      currentStepRef.current = 0

@@ -491,69 +448,6 @@ export function useTimelineAnimation(deps: UseTimelineAnimationDeps) {
    }
  }, [hideAll, cancelAll, runAnimation, scheduleTimeout])

-  const pauseForInteraction = useCallback(() => {
-    if (prefersReducedMotion || userPausedRef.current) return
-    if (animationStateRef.current === 'IDLE') return
-    interactionPausedRef.current = true
-    cancelAll()
-    animationStateRef.current = 'PAUSED'
-    // Don't setIsPlaying(false) — interaction pause is temporary
-    if (resumeTimerRef.current) clearTimeout(resumeTimerRef.current)
-  }, [cancelAll])
-
-  const resumeAfterInteraction = useCallback(() => {
-    if (prefersReducedMotion || userPausedRef.current) return
-    if (!interactionPausedRef.current) return
-
-    if (resumeTimerRef.current) clearTimeout(resumeTimerRef.current)
-    resumeTimerRef.current = window.setTimeout(() => {
-      if (userPausedRef.current) return
-      interactionPausedRef.current = false
-
-      // Resume from current state — restart the animation loop from current position
-      animationStateRef.current = 'PLAYING'
-      setIsPlaying(true)
-
-      const advanceFromCurrent = () => {
-        if (animationStateRef.current !== 'PLAYING') return
-        const stepIdx = currentStepRef.current
-        if (stepIdx >= animationSteps.length) {
-          // We were at the end — hold then reset
-          animationStateRef.current = 'HOLDING'
-          scheduleTimeout(() => {
-            if (userPausedRef.current || interactionPausedRef.current) return
-            animationStateRef.current = 'RESETTING'
-            deps.yearIndicatorRef.current?.transition().duration(ANIM_RESET_MS).attr('opacity', 0)
-            deps.nodeSelectionRef.current?.transition().duration(ANIM_RESET_MS).style('opacity', '0')
-            deps.linkSelectionRef.current?.transition().duration(ANIM_RESET_MS).attr('stroke-opacity', 0)
-            deps.connectorSelectionRef.current?.transition().duration(ANIM_RESET_MS).attr('opacity', 0)
-            scheduleTimeout(() => {
-              if (userPausedRef.current) return
-              deps.nodeSelectionRef.current
-                ?.filter((d: SimNode) => d.type === 'skill')
-                .select('.node-circle')
-                .attr('r', 0)
-              visibleNodeIdsRef.current = new Set()
-              displayedMonthRef.current = -1
-              displayedYearRef.current = 0
-              currentStepRef.current = 0
-              animationStateRef.current = 'PLAYING'
-              setIsPlaying(true)
-              scheduleTimeout(advanceFromCurrent, ANIM_RESTART_DELAY_MS)
-            }, ANIM_RESET_MS + 50)
-          }, ANIM_HOLD_MS)
-          return
-        }
-        revealStep(stepIdx, () => {
-          currentStepRef.current = stepIdx + 1
-          advanceFromCurrent()
-        })
-      }
-
-      advanceFromCurrent()
-    }, ANIM_INTERACTION_RESUME_MS)
-  }, [deps.nodeSelectionRef, deps.linkSelectionRef, deps.connectorSelectionRef, deps.yearIndicatorRef, revealStep, scheduleTimeout])
-
  // Start animation on mount / dimension change — wait for ready signal
  useEffect(() => {
    if (!deps.ready) return
@@ -569,10 +463,10 @@ export function useTimelineAnimation(deps: UseTimelineAnimationDeps) {
    // Reset and start animation
    cancelAll()
    userPausedRef.current = false
-    interactionPausedRef.current = false
    animationStateRef.current = 'IDLE'
    visibleNodeIdsRef.current = new Set()
    currentStepRef.current = 0
+    setIsCompleted(false)
    runAnimation()

    return () => {
@@ -585,9 +479,8 @@ export function useTimelineAnimation(deps: UseTimelineAnimationDeps) {
    animationStateRef,
    visibleNodeIdsRef,
    isPlaying,
+    isCompleted,
    animationInitialized,
    togglePlayPause,
-    pauseForInteraction,
-    resumeAfterInteraction,
  }
 }
@@ -494,6 +494,27 @@ html {
  to { transform: scale(1); opacity: 1; }
 }

+/* ===== CONSTELLATION FOCUS MODE — axis/background dimming ===== */
+svg.constellation-focus-active .axis-line,
+svg.constellation-focus-active .year-tick {
+  stroke-opacity: 0.25;
+  transition: stroke-opacity 150ms ease-out;
+}
+
+svg.constellation-focus-active .year-label {
+  opacity: 0.25;
+  transition: opacity 150ms ease-out;
+}
+
+svg:not(.constellation-focus-active) .axis-line,
+svg:not(.constellation-focus-active) .year-tick {
+  transition: stroke-opacity 150ms ease-out;
+}
+
+svg:not(.constellation-focus-active) .year-label {
+  transition: opacity 150ms ease-out;
+}
+
 /* ===== FOCUS VISIBLE STYLES (WCAG Compliance) ===== */
 /* Default focus ring for all focusable elements */
 *:focus-visible {
@@ -593,6 +614,16 @@ textarea:focus-visible {
    to { opacity: 1; }
  }

+  /* No transition for constellation focus mode axis dimming */
+  svg.constellation-focus-active .axis-line,
+  svg.constellation-focus-active .year-tick,
+  svg.constellation-focus-active .year-label,
+  svg:not(.constellation-focus-active) .axis-line,
+  svg:not(.constellation-focus-active) .year-tick,
+  svg:not(.constellation-focus-active) .year-label {
+    transition: none;
+  }
+
  /* Instant constellation fullscreen */
  @keyframes constellation-fullscreen-in {
    from { transform: none; opacity: 1; }