PB-054: Add Support Signal Badge System for Blocked Tasks

[Bdon101]

Agent Identity

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

Task Metadata

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

Context

Tasks with status "blocked" or "support_needed" currently show basic status badges. The reference design uses animated support signal badges with pulse effects and prominent warning colors to make blocked tasks immediately visible.

Playwright validation confirmed: Support signal badges are missing from current implementation.

Goal

Implement animated support signal badge component that appears on blocked/support-needed tasks with pulse animation and warning styling.

Acceptance Criteria

• Support signal badge renders on tasks with status "blocked" or "support_needed"
• Badge includes warning icon and "Support Signal" or "Needs Help" text
• Pulse animation draws attention without being distracting
• Badge styling uses amber/orange warning colors
• Badge appears on both timeline and board views
• Badge is accessible with appropriate ARIA labels
• Animation can be disabled for reduced motion preferences
• Playwright test passes for support badge visibility

Constraints

• Must work with existing task status types
• Should not interfere with other task badges (priority, difficulty)
• Animation should be CSS-based, not JavaScript
• Must work in both light and dark modes

Files to Create or Edit

• CREATE: /ProjectBeacon/ProjectBeacon/components/ui/support-signal-badge.tsx
• EDIT: /ProjectBeacon/ProjectBeacon/components/workflow/timeline-page.tsx
• EDIT: /ProjectBeacon/ProjectBeacon/components/workflow/board-page.tsx
• EDIT: /ProjectBeacon/ProjectBeacon/app/globals.css (for pulse animation)

Expected Output / Interface

<SupportSignalBadge
  status="blocked"
  reason="Waiting for API endpoint"
/>

Verification Commands

cd ProjectBeacon/ProjectBeacon
npm run dev
# Navigate to /projects/test-project/board
# Verify support badges on blocked tasks

npx playwright test tests/ui-validation.spec.ts -g "Support Badge"

Reference

• Design: docs/ui/simplified_task_dependencies/code.html (lines 200-230)
• Full analysis: docs/UI_GAP_ANALYSIS.md (Gap [PB-003] Clerk User Bootstrap and Sync #5)
• Test evidence: test-results/ui-validation-*-Support-Badge-*/test-failed-1.png

Definition of Done

• All acceptance criteria checked
• Playwright test passes
• Support badges documented in handoff
• Animation respects user motion preferences