Context#

The user wants to configure, monitor, and track optimizations in the model strategy area. There is no single dashboard showing strategy state, agent routing decisions, quota utilization, or drain status.

Acceptance Criteria#

• New page at /models/strategy with 4-5 sections
• Status bar: engine active/inactive, tasks routed today, cost spent vs cap, free-tier utilization %, drain status
• Agent routing table: each agent's primary model, currently active model, reason for switch, estimated savings today
• Quota utilization grid: all models with quota/used/remaining/% bar
• Routing history: last 50 routing decisions with timestamps and savings
• Drain panel: models with remaining quota, drainable tasks count, [Drain Now] [Dry Run] buttons
• Wire to existing APIs (/api/models, /api/models/strategy, /api/models/drain)
• Wire to new /api/models/routing-history endpoint (Phase 1)
• Mobile responsive
• All 696+ tests pass

Design Reference#

See projects/model-strategy-engine/PROJECT.md — Gap 2 (Global Strategy Dashboard), monitoring dashboard mockup included

Files to create#

• app/models/strategy/page.tsx (NEW)
• components/StrategyDashboard.tsx (NEW)
• components/RoutingHistoryTable.tsx (NEW)
• components/QuotaGrid.tsx (NEW)
• components/DrainPanel.tsx (NEW)