Phase 4.1 -- Dashboard Page

Parent: #762 | Wave 1 (build first -- sets the pattern for all other pages)

Context

The flagship page. First thing users see after login. Must demonstrate all design system principles: data is never just a number, real-time means visible, progressive disclosure, prose alongside metrics.

Scope

• Metric cards (4): Tasks today, active agents, spend today, pending approvals. Each with sparkline trend (7-day), delta/change indicator, and optional progress bar.
• Org health section: Department health bars (animated fill, color-coded by health %, agent/task counts, cost per dept)
• Activity stream: Real-time timeline of agent actions (colored dots by action type, agent name bold, task description, timestamp). WebSocket-driven with entrance animations.
• Budget burn chart: Area chart with actual spend line + dashed forecast projection, "today" reference line, remaining budget callout, "days left at this rate" indicator.
• Status bar integration: Persistent top bar showing agent count, active tasks, spend, budget %, pending approvals, system health.

Design reference

• Prototype: mockups/direction-cd/src/pages/Dashboard.tsx (branch research/762-ux-mockups)
• Design principles: docs: write UX design guidelines document #767

Data requirements

• GET /analytics/overview (extended, feat: analytics trends and budget forecast API endpoints #771)
• GET /analytics/trends (feat: analytics trends and budget forecast API endpoints #771)
• GET /analytics/forecast (feat: analytics trends and budget forecast API endpoints #771)
• GET /departments/{name}/health (feat: department health, provider status, and activity feed endpoints #773)
• GET /activities (feat: department health, provider status, and activity feed endpoints #773)
• WebSocket: tasks, budget, approvals channels

Deliverables

• Full dashboard page with all sections
• Real-time WebSocket updates with visual feedback
• Responsive layout (per scope from feat: define page structure and information architecture #766)
• Loading skeletons per section
• Unit tests for data transformations
• Storybook story for page composition

Blocked by

• feat: interaction components and animation patterns #776 (interaction components)
• feat: analytics trends and budget forecast API endpoints #771 (analytics trends endpoint)
• feat: department health, provider status, and activity feed endpoints #773 (department health, activity feed endpoints)