PB-052: Add SVG Dependency Threads to Timeline View

[Bdon101]

Agent Identity

• Owner: agent3
• Role: End-user product experience implementation

Task Metadata

• Task ID: PB-052
• Depends On: []
• Labels: agent3, ui-gap, critical, status:ready

Context

The timeline view in /ProjectBeacon/ProjectBeacon/components/workflow/timeline-page.tsx displays tasks in sequence but doesn't visually show dependency connections. The reference design in docs/ui/simplified_task_dependencies/code.html uses SVG paths to draw glowing threads between dependent tasks, with different styles for active, delayed, and predicted connections.

Playwright validation confirmed: SVG dependency visualization is missing from current implementation.

Goal

Add SVG overlay layer to timeline view that renders curved connection lines between tasks based on their dependency edges, with visual states for different connection types.

Acceptance Criteria

• SVG overlay renders behind task cards in timeline
• Dependency edges from API are rendered as curved paths
• Active connections use glowing purple thread style
• Delayed/blocked connections use amber dashed style
• Predicted/future connections use faded dashed style
• Paths update when timeline data changes
• Performance is acceptable with 20+ tasks and 30+ edges
• SVG is responsive and scales with viewport
• Playwright test passes for SVG thread visibility

Constraints

• Must use WorkflowTimelineEdgeDTO[] from existing API response
• SVG must not interfere with task card click/hover interactions
• Path calculations should handle variable task card positions
• Do not modify timeline API contracts

Files to Create or Edit

• CREATE: /ProjectBeacon/ProjectBeacon/components/workflow/timeline-dependency-threads.tsx
• EDIT: /ProjectBeacon/ProjectBeacon/components/workflow/timeline-page.tsx
• EDIT: /ProjectBeacon/ProjectBeacon/app/globals.css (for thread glow effects)

Expected Output / Interface

<TimelineDependencyThreads
  tasks={tasks}
  edges={edges}
  containerRef={timelineContainerRef}
/>

Verification Commands

cd ProjectBeacon/ProjectBeacon
npm run dev
# Navigate to /projects/test-project/timeline
# Verify SVG threads connect dependent tasks

npx playwright test tests/ui-validation.spec.ts -g "SVG Dependency"

Reference

• Design: docs/ui/simplified_task_dependencies/code.html (lines 35-55, SVG section)
• Full analysis: docs/UI_GAP_ANALYSIS.md (Gap [PB-001] MVP Service Clients and Env Contracts #3)
• Test evidence: test-results/ui-validation-*-SVG-Dependency-*/test-failed-1.png

Definition of Done

• All acceptance criteria checked
• Playwright test passes
• SVG threads documented in handoff
• No performance issues with large graphs