PB-053: Implement Vertical Time Axis for Timeline View

[Bdon101]

Agent Identity

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

Task Metadata

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

Context

Current timeline view scrolls horizontally with tasks in a row. The reference design uses a vertical time axis on the left side with day markers and a gradient line, providing more intuitive time progression visualization.

Playwright validation confirmed: Vertical time axis is missing from current implementation.

Goal

Refactor timeline layout to vertical orientation with left-side time axis showing day markers and gradient progress line.

Acceptance Criteria

• Timeline layout changes from horizontal to vertical
• Left sidebar shows time axis with day markers (Day 01, Day 03, etc.)
• Gradient line connects day markers
• Current day marker is highlighted
• Task cards are positioned relative to their soft deadline dates
• Vertical scroll replaces horizontal scroll
• Layout is responsive (collapses time axis on mobile)
• Existing timeline API integration still works
• Playwright test passes for time axis visibility

Constraints

• Must maintain compatibility with WorkflowTimelineDTO API response
• Do not break existing task card click/navigation
• Time axis should be sticky during scroll
• Must work with dependency threads from PB-052

Files to Create or Edit

• CREATE: /ProjectBeacon/ProjectBeacon/components/workflow/timeline-axis.tsx
• EDIT: /ProjectBeacon/ProjectBeacon/components/workflow/timeline-page.tsx
• EDIT: /ProjectBeacon/ProjectBeacon/app/globals.css (for gradient line)

Expected Output / Interface

<div className="flex">
  <TimelineAxis 
    startDate={projectStartDate}
    endDate={projectDeadline}
    currentDate={new Date()}
  />
  <div className="flex-1">
    {/* task cards */}
  </div>
</div>

Verification Commands

cd ProjectBeacon/ProjectBeacon
npm run dev
# Navigate to /projects/test-project/timeline
# Verify vertical time axis with day markers

npx playwright test tests/ui-validation.spec.ts -g "Time Axis"

Reference

• Design: docs/ui/simplified_task_dependencies/code.html (lines 100-150)
• Full analysis: docs/UI_GAP_ANALYSIS.md (Gap [PB-002] MVP Database Schema and Storage Setup #4)
• Test evidence: test-results/ui-validation-*-Time-Axis-*/test-failed-1.png

Definition of Done

• All acceptance criteria checked
• Playwright test passes
• Time axis documented in handoff
• No regressions in timeline navigation