PB-050: Add Fuel Gauge Progress Visualization to Clarification Flow

[Bdon101]

Agent Identity

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

Task Metadata

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

Context

The clarification panel in /ProjectBeacon/ProjectBeacon/components/projects/clarification-panel.tsx currently displays confidence as basic text ("72% / 85% Target"). The reference design in docs/ui/streamlined_ai_clarification/code.html shows an animated fuel gauge with gradient fill and visual target marker that provides much better visual feedback during the clarification process.

Playwright validation confirmed: Component is missing from current implementation.

Goal

Implement an animated fuel gauge progress bar component that visually tracks clarification confidence toward the 85% threshold, matching the reference design's visual language.

Acceptance Criteria

• Fuel gauge component renders in clarification panel header
• Progress bar fills smoothly with gradient (#622faf → #8b5cf6) as confidence increases
• 85% target marker is clearly visible as a vertical line
• Confidence percentage text displays above gauge ("72% / 85% Target")
• Component updates in real-time as questions are answered
• Component is responsive on mobile/tablet/desktop
• Accessible with ARIA labels for screen readers
• Playwright test passes for fuel gauge visibility

Constraints

• Must integrate with existing ClarificationState type in clarification-panel.tsx
• Use Tailwind utilities where possible, custom CSS only for gradient effects
• Do not modify clarification API logic, only visual presentation
• Component should be reusable (consider extracting to components/ui/)

Files to Create or Edit

• CREATE: /ProjectBeacon/ProjectBeacon/components/ui/fuel-gauge.tsx
• EDIT: /ProjectBeacon/ProjectBeacon/components/projects/clarification-panel.tsx
• EDIT: /ProjectBeacon/ProjectBeacon/app/globals.css (if custom gradient CSS needed)

Expected Output / Interface

<FuelGauge
  current={72}
  target={85}
  label="Clarification Confidence"
/>

Verification Commands

cd ProjectBeacon/ProjectBeacon
npm run dev
# Navigate to /projects/test-project/workspace
# Verify fuel gauge renders with gradient fill

npx playwright test tests/ui-validation.spec.ts -g "Fuel Gauge"

Reference

• Design: docs/ui/streamlined_ai_clarification/code.html (lines 50-95)
• Full analysis: docs/UI_GAP_ANALYSIS.md (Gap Test issue from Codex #1)
• Test evidence: test-results/ui-validation-*-Fuel-Gauge-*/test-failed-1.png

Definition of Done

• All acceptance criteria checked
• Playwright test passes
• Component documented in handoff
• No regressions in clarification flow