See parent task t-3594 for full context.

What#

Phase 6: BenchmarkRunner.tsx (Chris)#

• Model selection panel: checkboxes grouped by provider, search/filter, select all/none per provider
• Prompt/Suite selector: choose from saved suites or type a custom prompt
• For vision tests: image upload area (URL or file picker)
• "Run Benchmark" button → starts execution
• Real-time progress:
  • Table showing each model: status spinner, elapsed time, progress bar
  • As results arrive, update in-place (polling every 2s or SSE)
  • Models that complete show latency + cost immediately
• Cancel button (stops remaining models)
• Results summary appears below after all complete (or partial if canceled)
• "Save to history" toggle (auto-save by default)

Phase 7: BenchmarkResults + BenchmarkDrillDown (Debbie)#

BenchmarkResults.tsx:

• Table: model | status | latency | tokens | cost | quality | actions
• Sortable columns
• Color-coded: green=ok, red=error, amber=slow
• Row expand: click to show full response summary
• "View Details" button per row → opens drill-down modal

BenchmarkDrillDown.tsx (modal):

• Full request: system prompt, user prompt, image(s) displayed if any
• Full response: rendered output (code with syntax highlighting, markdown, image)
• Timing breakdown: TTFT, total latency, tokens/sec
• Cost breakdown: input + output cost, total
• Error details if failed (with full error message + stack trace if available)
• "Rerun this model" button
• "Add note" field

Deliverables#

• components/Benchmark/BenchmarkRunner.tsx
• components/Benchmark/BenchmarkResults.tsx
• components/Benchmark/BenchmarkDrillDown.tsx

Tags#

[benchmarks, ui, runner, results, react]