See parent task t-3594 for full context.

What#

Build the new benchmark UI structure using components/Benchmark/ directory.

Phase 4: Dashboard (what user sees first)#

Create components/Benchmark/

• BenchmarkShell.tsx: Layout wrapper with tabs: Dashboard | Suites | Arena | History. Tab state in URL params.
• BenchmarkDashboard.tsx:
  • Summary cards: total runs, avg cost per run, best overall model, fastest model
  • Leaderboard per category (model, score, avg rating, cost, latency)
  • Cost-performance scatter plot (x=cost, y=quality score, labels=model names)
  • Latency comparison bar chart (grouped by category)
  • Radar/spider chart comparing top 3-5 models across all categories
  • All charts using recharts (already installed)

Phase 5: Suite Management#

• BenchmarkSuiteList.tsx: List all suites, create new, delete, import JSON. Each row shows: name, description, # test cases, last run date, actions. Create opens BenchmarkSuiteEditor.

• BenchmarkSuiteEditor.tsx: Edit a suite:

  • Name, description fields
  • Test cases list with add/edit/delete
  • Each test case: name, prompt textarea, category select, expected format select, evaluation criteria (tags), reference material (optional file upload or textarea), difficulty (easy/medium/hard)
  • Save draft / Save & Run buttons
  • Export as JSON button

Pre-populated default suites:#

• "Core" — 5-7 text/code prompts
• "Vision" — 3-5 image analysis prompts (requires image upload)
• "Code Expert" — 5-7 code gen + review prompts
• "Reasoning" — 3-5 logic/math prompts

Deliverables#

• components/Benchmark/BenchmarkShell.tsx
• components/Benchmark/BenchmarkDashboard.tsx
• components/Benchmark/BenchmarkSuiteList.tsx
• components/Benchmark/BenchmarkSuiteEditor.tsx
• All wired into app/benchmarks/page.tsx

Tags#

[benchmarks, ui, dashboard, suites, react]