Agent Benchmark System — Lot B : Dashboard frontend

[simodev25]

Problème

Le Lot A (GH-24) livre le moteur backend de benchmark (fixtures, engine, scoring, API REST), mais les résultats ne sont consultables que via appels API bruts. Aucune interface visuelle ne permet de comparer les performances des modèles LLM par agent.

Objectif

Livrer un dashboard frontend intégré au SPA existant permettant de :

• Gérer les fixtures de benchmark (liste, détail, création)
• Lancer des runs de benchmark avec sélection de modèles
• Visualiser les résultats : scores par agent, comparaison entre modèles, détail des attempts
• S'intégrer au design system existant (terminal-style, Tailwind v4, JetBrains Mono)

Périmètre (IN)

• Page BenchmarkPage.tsx : nouvelle page dans le SPA (route /benchmark)
• Entrée navigation : ajout dans le sidebar (Layout.tsx)
• Client API : méthodes benchmark dans api/client.ts
• Types TypeScript : interfaces pour fixtures, runs, cases, attempts, scores
• Composants :
  • Liste des fixtures avec statut et metadata
  • Formulaire de lancement de run (sélection fixture + modèle + agent + scénario)
  • Tableau de résultats avec scores V1 par métrique
  • Vue comparaison : même fixture, modèles différents (tableau ou chart)
  • Détail d'un run avec attempts et scores individuels

Hors périmètre (OUT)

• Modification du backend (Lot A déjà livré)
• Charts avancés (radar, heatmap) — itération future
• Scoring V2 / juge LLM (Lot C)
• Tests E2E Playwright (optionnel, non obligatoire)

Critères d'acceptation

• La page /benchmark est accessible depuis la navigation latérale
• La liste des fixtures s'affiche avec nom, agent, scénario, date de création
• Un formulaire permet de lancer un benchmark run avec choix du modèle (provider + model_name)
• Les résultats d'un run affichent les scores V1 par métrique (schema_validity, completeness, tool_policy, reference_consistency, stability)
• Une vue comparaison permet de voir côte à côte les scores de 2+ modèles sur la même fixture
• Le design respecte le design system existant (tokens couleurs, typographie JetBrains Mono, composants terminal-style)
• Les types TypeScript couvrent tous les objets API benchmark
• Aucune régression sur le build frontend existant (note : des erreurs TS pré-existantes peuvent exister)

Dépendances

• Agent Benchmark System — Lot A : moteur backend (fixtures, engine, scoring, API) #24 (Lot A) : API REST /api/v1/benchmark/ doit être mergée ou accessible sur la branche
• Design system : frontend/src/styles/theme.css, composants existants (ExpansionPanel, LoadingIndicators)
• Pattern de page : suivre BacktestsPage.tsx comme référence

Risques

• Erreurs TypeScript pré-existantes dans le frontend (hors périmètre Agent Benchmark System — Lot A : moteur backend (fixtures, engine, scoring, API) #24, peuvent bloquer le build)
• API backend pas encore mergée dans main — travailler sur branche basée sur Agent Benchmark System — Lot A : moteur backend (fixtures, engine, scoring, API) #24