⚠ PAGE STATUS: BUILD SPECIFICATION
This page contains the build specification for the Budget & Resources dashboard. The specification below defines exactly what must be implemented. To build this dashboard, give Claude Code the instruction: “Read the build specification on factory-budget.html and implement it.”

Build Specification: Budget & Resources Dashboard

Specification Source: Hilbert Factory Section 16 (Prompt Execution Engine) + Dashboard Spec View 5

Panel 5.1 — Daily Budget Gauge

Chart Type: Gauge (Chart.js doughnut)

Data Source: GET /api/engine/budget — returns spent, remaining, tier status

Refresh Rate: FREQUENT (every 30 seconds)

Display: Circular gauge: $X.XX of $5.00. Green (<$3.50), yellow ($3.50–$4.50), red (>$4.50). Priority tier label: “Normal” / “HIGH+ only” / “CRITICAL only”.

Panel 5.2 — Cost Breakdown

Chart Type: Stacked Bar (Recharts)

Data Source: GET /api/engine/cost-breakdown?days=7

Refresh Rate: PERIODIC (every 15 minutes)

Display: Daily cost by agent type (Builder / Verifier / Chief Engineer / Canary) over 7 days.

Panel 5.3 — Per-Packet Cost Table

Chart Type: Data Table

Data Source: GET /api/engine/cost-by-packet?date=today

Refresh Rate: PERIODIC (every 15 minutes)

Columns: packet_id, model used (Sonnet/Opus), tokens in, tokens out, cost, API calls made

Sort: By cost descending (most expensive first)

Panel 5.4 — 30-Day Spending History

Chart Type: Line Chart (Recharts)

Data Source: GET /api/engine/cost-history?days=30

Refresh Rate: SESSION

Display: Daily spend line with $5.00 target line. Days exceeding $4.50 highlighted red.

Panel 5.5 — Model Distribution

Chart Type: Pie Chart + Metric Cards (Recharts)

Data Source: GET /api/engine/model-stats

Refresh Rate: SESSION

Display: “Sonnet: XX% of calls ($X.XX) / Opus: XX% of calls ($X.XX)”. Pie chart for call distribution. Cost-per-completion comparison.