Fix hover effect on chart causing transition/animation to break

2026-02-17 15:14:10 +00:00
parent 47b52b5a93
commit 0a337b41c2
28 changed files with 460 additions and 186 deletions
@@ -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>
+  )
+}
@@ -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,11 +1,14 @@
 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
@@ -262,8 +265,12 @@ interface 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])),
    [],
@@ -284,9 +291,13 @@ 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}
@@ -299,6 +310,97 @@ export function TimelineInterventionsSubsection({ onNodeHighlight, highlightedRo
          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>
  )
 }
@@ -219,8 +219,6 @@ const CareerConstellation: React.FC<CareerConstellationProps> = ({
    resolveGraphFallback,
    resolveRoleFallback,
    dimensionsTrigger: dimensions.width + dimensions.height,
-    pauseForInteraction: animation.pauseForInteraction,
-    resumeAfterInteraction: animation.resumeAfterInteraction,
  })

  // External highlight sync
@@ -319,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,13 +32,11 @@ 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)
      deps.callbacksRef.current.onNodeHover?.(d.id)
    })
@@ -49,7 +45,6 @@ export function useConstellationInteraction(deps: {
      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) {
@@ -59,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,
  }
 }