Models: capability radars, cards/table + model pages, routed-usage ranking hero

[SPIKESPIGEL404]

Rebuilds /models from a flat price catalog into a capability surface: every model is shown as the capability shape the router matches a call against, and the page opens with "what the router routed to" — a routed-usage ranking. All charts share the shadcn Chart (Recharts) stack with hover tooltips.

⚠️ Switch to real data before merge

Everything is deterministic MOCK, labelled sample / ~ estimated in the UI. Do not merge as live data. Swap points (return shapes stay identical — components need no changes):

• lib/model-usage.ts → mockUsage — replace with real BitRouter routing telemetry: daily routed-call counts per model (series[].values) + this-week/last-week share (ranked[].share/.delta). See the SWITCH TO REAL DATA block at the top of the file.
• lib/model-capability.ts → capabilityAxes — intelligence/coding from Artificial Analysis (or our evals); agentic/reliability from routing telemetry. cost is already real (from input price). See the SWITCH TO REAL DATA block.
• lib/model-capability.ts → routerUsage — the model page's "how the router uses this model" panel (policy mix / role / share) is mock; wire to routing telemetry.

Until wired, keep the sample / ~ estimated labels visible.

What's in it

• Ranking hero — daily stacked bar chart of routed-call share (dominant open models at the base, long tail as muted "other") + a ranked list with week-over-week ▲▼ deltas. Each row links to the model page.
• Cards ⇄ table view switch (?view= + localStorage). Cards show a capability radar; table shows the same six axes as sortable columns.
• Per-model pages (models/[...slug]) re-skinned to mono: capability radar + axis bars, the router-usage panel, an animated call terminal, pricing, and similar-model links. Each model = one indexable URL (GEO).
• Six moat axes — intelligence · coding · agentic · cost · speed · reliability — deliberately not the Artificial Analysis breakdown; cost plotted as affordability so bigger-is-better holds on every spoke.
• Shared shadcn chart wrapper (components/ui/chart.tsx), adapted for recharts v3.
• Design spec: docs/superpowers/specs/2026-07-13-models-radar-capability-design.md.

Notes / decisions

• Radars use Recharts everywhere (incl. the 63-up cards grid) for consistency; verified it renders and scrolls without errors.
• SVG-coordinate hydration mismatches avoided (Recharts renders empty on SSR; the one remaining hand-SVG path was removed).
• isAnimationActive={false} on bars is required or Recharts leaves them at ~0 height (ResponsiveContainer measures from 0).

🤖 Generated with Claude Code