Phase 4.5 -- Budget Panel Page

Parent: #762 | Wave 2

Context

Key differentiator. Budget is visualized as a management P&L dashboard, not a billing tab.

Scope

• Budget remaining gauge: circular/linear gauge with %, remaining amount, forecast exhaustion date
• Burn rate chart: area chart with actual + forecast (matching Dashboard but larger, more detailed)
• Cost breakdown: pie/donut chart by agent, by department, by provider. Toggle between views.
• Threshold alerts: visual indicators when approaching budget limits (amber/red zones)
• Agent spending table: sortable table with agent name, total cost, % of budget, task count, cost per task
• Period selector: hourly, daily, weekly aggregation toggle
• Category breakdown: productive vs coordination vs system cost ratio (from OrchestrationRatio model)
• CFO optimization events: activity feed of CFO agent's budget decisions (from activity feed)

Data requirements

• GET /budget/config
• GET /budget/records (extended with daily_summary, feat: extend approval and meeting API responses #774)
• GET /analytics/trends (spend metric, 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 (cost data, feat: department health, provider status, and activity feed endpoints #773)

Deliverables

• P&L dashboard with all sections
• Budget gauge component
• Cost breakdown charts (pie/donut with toggle)
• Agent spending table
• Period selector
• Threshold alert indicators
• Unit tests

Blocked by

• feat: interaction components and animation patterns #776 (interaction components)
• feat: analytics trends and budget forecast API endpoints #771 (analytics/forecast endpoints)