#550
Issues/phaseo/Phaseo/#550

Redesign rankings page into a broader leaderboard experience

OpenDanielButler1opened 5mo ago

Problem

The current rankings page should evolve into a broader leaderboard experience that combines model ranking, pricing, caching, gateway data, and benchmark-derived value metrics.

Scope

Redesign the rankings page into a wider leaderboard page. Keep the current ranking information, but expand the page to include additional leaderboards and richer comparison metrics.

Proposed leaderboard areas

  • Current model rankings.
  • Effective pricing leaderboard.
  • Caching support and caching value leaderboard.
  • Benchmark score leaderboards.
  • Value metrics such as cost per 1M tokens per intelligence point, using sources such as Artificial Analysis where appropriate.
  • Gateway-derived operational information where useful.

UX requirements

  • Improve display density and scanability.
  • Clean up loading states and suspense boundaries.
  • Make filtering and comparison ergonomic.
  • Preserve responsive behavior across desktop and mobile.

Acceptance criteria

  • The page clearly reads as a leaderboard rather than a single ranking table.
  • Multiple leaderboard views are available without overwhelming the page.
  • Data source assumptions are documented.
  • Loading and suspense states feel smooth and do not cause layout jumps.

Activity

2
linear-code[bot]5mo ago

AI-100

opencode-agent[bot]5mo ago
Issue understanding The `/rankings` page at `apps/web/src/app/(dashboard)/rankings/page.tsx` currently shows model usage leaderboards (tokens, performance scatter/leaderboard, market share by org/provider, top apps) via server components that fetch from Supabase RPC (`apps/web/src/lib/fetchers/rankings/getRankingsData.ts`). The issue asks to evolve this single-ranking-table page into a multi-faceted leaderboard hub that keeps existing content and adds:
  • Effective pricing leaderboard (pricing data exists in packages/data/catalog/src/data/pricing/)
  • Caching support/value leaderboard (cached_tokens exists in MultimodalData type)
  • Benchmark score leaderboards (benchmarks exist in packages/data/catalog/src/data/benchmarks/; separate /benchmarks page already fetches via apps/web/src/lib/fetchers/benchmarks/)
  • Value metrics like cost/1M tokens per intelligence point (Artificial Analysis benchmark entry exists)
  • Gateway operational info

The current loading state (loading.tsx, Skeletons.tsx), component layout, and filtering UX all need improvement. The route should stay at /rankings (or add /leaderboard with a redirect) — easiest to enhance the existing page.

AI Agent Prompt (Copy/Paste)

Redesign apps/web/src/app/(dashboard)/rankings/page.tsx into a broader leaderboard experience.

Current page: server component at app/(dashboard)/rankings/page.tsx with sections for UsageStackedBar, ModelLeaderboard, PerformanceLandscapePanel/PerformanceLeaderboard, MarketShare (org + provider) stacked bar + leaderboard, and AppsUsageList. Data fetchers in lib/fetchers/rankings/getRankingsData.ts use Supabase RPC with "use cache". Components in components/(rankings)/*.tsx.

What to add:
1. **Effective pricing leaderboard** — Use pricing data from packages/data/catalog/src/data/pricing/ (per-provider pricing.json files). Show cost per 1M tokens per model.
2. **Caching value leaderboard** — cached_tokens field already exists in MultimodalData type in getRankingsData.ts. Surface cache-hit savings.
3. **Benchmark score leaderboards** — Import from lib/fetchers/benchmarks/getAllBenchmarks (reuse patterns from the /benchmarks page). Show top models per benchmark.
4. **Value metrics** — cost/1M tokens per intelligence point using artificial-analysis benchmark data (benchmark.json already exists in data/benchmarks/artificial-analysis/).
5. **Gateway operational info** where useful.

UX requirements: better scanability/density, smoother suspense boundaries (fix the staggered loading.tsx skeleton layout), tabbed/toggle leaderboard views so multiple boards don't overwhelm the page, responsive across mobile/desktop.

Keep the existing route at /rankings. Preserve all current data and components — add new sections alongside them. Organize new leaderboards behind a tab bar or accordion to avoid vertical sprawl.

Do not rely solely on this description — read the current page.tsx, all components in components/(rankings)/, the fetcher file, the benchmarks fetcher, and a sample pricing.json to understand the data shapes. Run pnpm --filter @ai-stats/web lint && pnpm --filter @ai-stats/web typecheck after changes. Update metadata title/description to reflect "leaderboard" positioning.

This is an automated response - a team member will follow up shortly.

opencode session  |  github run