feat: Add Benchmarks page for model performance comparison

- Create BenchmarksPage component with winner highlight, summary stats, and comparison charts
- Add /api/v1/runs/benchmark/results endpoint for fetching benchmark data
- Add useBenchmarkResults hook for React Query integration
- Add Benchmarks navigation link with trophy icon
- Support TPS and TTFT metrics comparison across models
- Display detailed results table sorted by performance
- Show model averages grouped by model name

Author: antmikinka

dashboard/backend/app/api/v1/runs.py

@@ -239,3 +239,32 @@ async def get_run_metrics(
         success=True,
         data=metrics,
     )
+
+
+@router.get("/benchmark/results", response_model=APIResponse)
+async def get_benchmark_results(
+    db: Session = Depends(get_db_session),
+):
+    """
+    Get benchmark results grouped by model.
+
+    Returns benchmark runs with their metrics, organized for comparison.
+    """
+    service = RunService(db)
+
+    # Get all benchmark runs
+    runs, _ = service.get_runs(run_type="benchmark", per_page=100)
+
+    # Get metrics for each run
+    results = []
+    for run in runs:
+        metrics = service.get_run_metrics(run.id)
+        results.append({
+            "run": run.model_dump(),
+            "metrics": [m.model_dump() for m in metrics],
+        })
+
+    return APIResponse(
+        success=True,
+        data=results,
+    )

dashboard/backend/coverage.json

@@ -16,6 +16,7 @@ import ComparePage from '@pages/compare/ComparePage';
 import ImportPage from '@pages/import/ImportPage';
 import SettingsPage from '@pages/settings/SettingsPage';
 import LoginPage from '@pages/auth/LoginPage';
+import BenchmarksPage from '@pages/benchmarks/BenchmarksPage';
 
 function App() {
   const [mobileOpened, { toggle: toggleMobile }] = useDisclosure(false);
@@ -36,6 +37,7 @@ function App() {
           <Route path="/runs" element={<RunsPage />} />
           <Route path="/runs/:id" element={<RunDetailPage />} />
           <Route path="/compare" element={<ComparePage />} />
+          <Route path="/benchmarks" element={<BenchmarksPage />} />
           <Route path="/import" element={<ImportPage />} />
           <Route path="/settings" element={<SettingsPage />} />
 

dashboard/frontend/src/App.tsx

@@ -115,6 +115,14 @@ export const runsApi = {
     }>>(`${BASE_PATH}/stats`);
     return data;
   },
+
+  /**
+   * Get benchmark results
+   */
+  async getBenchmarkResults(): Promise<APIResponse<unknown[]>> {
+    const { data } = await apiClient.get<APIResponse<unknown[]>>(`${BASE_PATH}/benchmark/results`);
+    return data;
+  },
 };
 
 export default runsApi;

dashboard/frontend/src/api/runs.ts

@@ -29,6 +29,7 @@ import {
   IconSun,
   IconMoon,
   IconBrandLemonade,
+  IconTrophy,
 } from '@tabler/icons-react';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
 import { useUIStore } from '@/stores/uiStore';
@@ -44,6 +45,7 @@ const navLinks = [
   { path: '/dashboard', label: 'Dashboard', icon: IconDashboard },
   { path: '/models', label: 'Models', icon: IconCpu },
   { path: '/runs', label: 'Runs', icon: IconListDetails },
+  { path: '/benchmarks', label: 'Benchmarks', icon: IconTrophy },
   { path: '/compare', label: 'Compare', icon: IconChartBar },
   { path: '/import', label: 'Import', icon: IconUpload },
   { path: '/settings', label: 'Settings', icon: IconSettings },

dashboard/frontend/src/components/common/AppShell.tsx

@@ -182,4 +182,16 @@ export function useRunStats() {
   };
 }
 
+export function useBenchmarkResults() {
+  const query = useQuery({
+    queryKey: [...QUERY_KEYS.runs.all, 'benchmark', 'results'],
+    queryFn: () => runsApi.getBenchmarkResults(),
+  });
+
+  return {
+    ...query,
+    data: query.data?.data || [],
+  };
+}
+
 export { QUERY_KEYS };