feat: Add sorting functionality to merbench leaderboard table

- Implement clickable column headers with sort indicators, sorting utilities, and state management.
- Headers now support ascending/descending sort by model name, success rate, cost, duration, tokens, runs, and provider with visual feedback.

Author: andrewginns

src/components/merbench/LeaderboardTable.astro

@@ -18,17 +18,36 @@ const costRange = maxCost - minCost;
 <section class="leaderboard-section">
   <h2>Model Leaderboard</h2>
   <div class="leaderboard-table">
-    <table>
+    <table id="leaderboard-table">
       <thead>
         <tr>
           <th>Rank</th>
-          <th>Model</th>
-          <th>Success Rate</th>
-          <th>Avg Cost/Run</th>
-          <th>Avg Duration</th>
-          <th>Avg Tokens</th>
-          <th>Runs</th>
-          <th>Provider</th>
+          <th class="sortable" data-sort-key="Model" data-sort-type="string">
+            Model <span class="sort-indicator"></span>
+          </th>
+          <th
+            class="sortable active"
+            data-sort-key="Success_Rate"
+            data-sort-type="number"
+            data-sort-direction="desc"
+          >
+            Success Rate <span class="sort-indicator">↓</span>
+          </th>
+          <th class="sortable" data-sort-key="Avg_Cost" data-sort-type="number">
+            Avg Cost/Run <span class="sort-indicator"></span>
+          </th>
+          <th class="sortable" data-sort-key="Avg_Duration" data-sort-type="number">
+            Avg Duration <span class="sort-indicator"></span>
+          </th>
+          <th class="sortable" data-sort-key="Avg_Tokens" data-sort-type="number">
+            Avg Tokens <span class="sort-indicator"></span>
+          </th>
+          <th class="sortable" data-sort-key="Runs" data-sort-type="number">
+            Runs <span class="sort-indicator"></span>
+          </th>
+          <th class="sortable" data-sort-key="Provider" data-sort-type="string">
+            Provider <span class="sort-indicator"></span>
+          </th>
         </tr>
       </thead>
       <tbody>
@@ -179,6 +198,42 @@ const costRange = maxCost - minCost;
     letter-spacing: 0.5px;
   }
 
+  /* Sortable header styles */
+  .sortable {
+    cursor: pointer;
+    user-select: none;
+    position: relative;
+    transition: background-color 0.2s ease;
+  }
+
+  .sortable:hover {
+    background-color: var(--bg-tertiary);
+    color: var(--text-primary);
+  }
+
+  .sortable.active {
+    /* No special styling - only the arrow indicator shows active state */
+  }
+
+  .sort-indicator {
+    font-size: 0.8rem;
+    opacity: 0.5;
+    margin-left: 0.25rem;
+  }
+
+  .sortable.active .sort-indicator {
+    opacity: 1;
+    color: var(--accent-primary);
+  }
+
+  .sortable:not(.active) .sort-indicator {
+    opacity: 0;
+  }
+
+  .sortable:hover:not(.active) .sort-indicator {
+    opacity: 0.3;
+  }
+
   tbody tr:hover {
     background-color: var(--bg-primary);
   }

src/lib/merbench.ts

@@ -5,6 +5,7 @@ import type {
   FailureAnalysisData,
   ParetoData,
   ModelStats,
+  LeaderboardEntry,
 } from './merbench-types';
 
 // Calculate cost per run (simplified pricing model) - DEPRECATED
@@ -269,6 +270,60 @@ const calculateParetoFrontier = (data: Array<{ cost: number; Success_Rate: numbe
   return paretoPoints;
 };
 
+// Sorting utilities
+let currentSortKey = 'Success_Rate';
+let currentSortDirection: 'asc' | 'desc' = 'desc';
+
+export const sortLeaderboard = (
+  data: LeaderboardEntry[],
+  sortKey: string,
+  direction: 'asc' | 'desc'
+): LeaderboardEntry[] => {
+  const sorted = [...data].sort((a, b) => {
+    let aVal: any;
+    let bVal: any;
+
+    // Handle special cases for cost calculation
+    if (sortKey === 'Avg_Cost') {
+      aVal = a.Avg_Cost || calculateCost(a.Avg_Tokens);
+      bVal = b.Avg_Cost || calculateCost(b.Avg_Tokens);
+    } else {
+      aVal = a[sortKey as keyof LeaderboardEntry];
+      bVal = b[sortKey as keyof LeaderboardEntry];
+    }
+
+    // Handle null/undefined values
+    if (aVal == null && bVal == null) return 0;
+    if (aVal == null) return direction === 'asc' ? -1 : 1;
+    if (bVal == null) return direction === 'asc' ? 1 : -1;
+
+    // Numeric comparison
+    if (typeof aVal === 'number' && typeof bVal === 'number') {
+      return direction === 'asc' ? aVal - bVal : bVal - aVal;
+    }
+
+    // String comparison
+    const aStr = String(aVal).toLowerCase();
+    const bStr = String(bVal).toLowerCase();
+
+    if (aStr < bStr) return direction === 'asc' ? -1 : 1;
+    if (aStr > bStr) return direction === 'asc' ? 1 : -1;
+    return 0;
+  });
+
+  return sorted;
+};
+
+export const setSortState = (sortKey: string, direction: 'asc' | 'desc'): void => {
+  currentSortKey = sortKey;
+  currentSortDirection = direction;
+};
+
+export const getSortState = () => ({
+  key: currentSortKey,
+  direction: currentSortDirection,
+});
+
 // DOM manipulation utilities
 export const updateSummaryStats = (filteredData: FilteredData): void => {
   const totalRuns = filteredData.rawData.length;

src/scripts/merbench-filters.ts

@@ -1,9 +1,5 @@
-import {
-  getFilteredData,
-  updateSummaryStats,
-  updateLeaderboard,
-  showEmptyState,
-} from '../lib/merbench';
+import { getFilteredData, updateSummaryStats, showEmptyState } from '../lib/merbench';
+import { updateLeaderboardData } from './merbench-sorting';
 import type { RawData, TestGroupData, MerbenchData } from '../lib/merbench-types';
 import { MerbenchCharts } from './merbench-charts';
 
@@ -317,7 +313,8 @@ export class MerbenchFilters {
 
   private updateUI(filteredData: any): void {
     updateSummaryStats(filteredData);
-    updateLeaderboard(filteredData);
+    // Use sorting-aware leaderboard update instead of basic update
+    updateLeaderboardData(filteredData.leaderboard);
   }
 
   private showNoDataMessage(): void {

src/scripts/merbench-init-csp.ts

@@ -1,5 +1,6 @@
 import { MerbenchCharts } from './merbench-charts';
 import { MerbenchFilters } from './merbench-filters';
+import { initializeLeaderboardSorting } from './merbench-sorting';
 import type { MerbenchData, RawData } from '../lib/merbench-types';
 
 declare global {
@@ -82,6 +83,9 @@ async function initializeMerbench() {
   const filters = new MerbenchFilters(data, charts);
   filters.initialize();
 
+  // Initialize leaderboard sorting
+  initializeLeaderboardSorting(originalData.leaderboard);
+
   // Initialize charts with all data
   try {
     await charts.waitForPlotly();

src/scripts/merbench-sorting.ts

@@ -0,0 +1,127 @@
+import { sortLeaderboard, setSortState, getSortState, calculateCost } from '../lib/merbench';
+import type { LeaderboardEntry } from '../lib/merbench-types';
+
+// Global leaderboard data storage
+let currentLeaderboardData: LeaderboardEntry[] = [];
+
+// Initialize sorting functionality
+export const initializeLeaderboardSorting = (leaderboardData: LeaderboardEntry[]): void => {
+  currentLeaderboardData = [...leaderboardData];
+  setupSortHandlers();
+};
+
+// Update leaderboard data (called when filters change)
+export const updateLeaderboardData = (newData: LeaderboardEntry[]): void => {
+  currentLeaderboardData = [...newData];
+
+  // Apply current sort to the new data
+  const sortState = getSortState();
+  const sortedData = sortLeaderboard(currentLeaderboardData, sortState.key, sortState.direction);
+  renderLeaderboard(sortedData);
+};
+
+// Setup click handlers for sortable headers
+const setupSortHandlers = (): void => {
+  const sortableHeaders = document.querySelectorAll('.sortable');
+
+  sortableHeaders.forEach((header) => {
+    header.addEventListener('click', (event) => {
+      const target = event.currentTarget as HTMLElement;
+      const sortKey = target.dataset.sortKey;
+      const sortType = target.dataset.sortType;
+
+      if (!sortKey) return;
+
+      // Determine new sort direction
+      const currentDirection = target.dataset.sortDirection;
+      let newDirection: 'asc' | 'desc';
+
+      if (target.classList.contains('active')) {
+        // Toggle direction if clicking the same column
+        newDirection = currentDirection === 'desc' ? 'asc' : 'desc';
+      } else {
+        // Default direction for new column
+        newDirection = sortType === 'string' ? 'asc' : 'desc';
+      }
+
+      // Update sort state
+      setSortState(sortKey, newDirection);
+
+      // Update UI
+      updateSortIndicators(sortKey, newDirection);
+
+      // Sort and render data
+      const sortedData = sortLeaderboard(currentLeaderboardData, sortKey, newDirection);
+      renderLeaderboard(sortedData);
+    });
+  });
+};
+
+// Update visual sort indicators
+const updateSortIndicators = (activeSortKey: string, direction: 'asc' | 'desc'): void => {
+  const sortableHeaders = document.querySelectorAll('.sortable');
+
+  sortableHeaders.forEach((header) => {
+    const element = header as HTMLElement;
+    const sortKey = element.dataset.sortKey;
+    const indicator = element.querySelector('.sort-indicator');
+
+    if (!indicator) return;
+
+    if (sortKey === activeSortKey) {
+      // Active column
+      element.classList.add('active');
+      element.dataset.sortDirection = direction;
+      indicator.textContent = direction === 'desc' ? '↓' : '↑';
+    } else {
+      // Inactive columns
+      element.classList.remove('active');
+      element.removeAttribute('data-sort-direction');
+      indicator.textContent = '';
+    }
+  });
+};
+
+// Render the leaderboard table
+const renderLeaderboard = (data: LeaderboardEntry[]): void => {
+  const tbody = document.querySelector('#leaderboard-table tbody');
+  if (!tbody) return;
+
+  // Calculate cost range for progress bar normalization
+  const costs = data.map((entry) => entry.Avg_Cost || calculateCost(entry.Avg_Tokens));
+  const minCost = Math.min(...costs);
+  const maxCost = Math.max(...costs);
+  const costRange = maxCost - minCost;
+
+  tbody.innerHTML = data
+    .map((entry, index) => {
+      const currentCost = entry.Avg_Cost || calculateCost(entry.Avg_Tokens);
+      const costWidth = costRange > 0 ? (currentCost / maxCost) * 100 : 0;
+
+      return `
+    <tr>
+      <td class="rank">${index + 1}</td>
+      <td class="model-name">${entry.Model}</td>
+      <td class="success-rate">
+        <div class="progress-bar">
+          <div class="progress-fill" style="width: ${entry.Success_Rate}%; background-color: ${
+            entry.Success_Rate >= 30 ? '#27ae60' : entry.Success_Rate >= 15 ? '#f39c12' : '#e74c3c'
+          }"></div>
+          <span class="progress-text">${entry.Success_Rate.toFixed(1)}%</span>
+        </div>
+      </td>
+      <td class="cost">
+        <div class="progress-bar">
+          <div class="progress-fill progress-fill--cost" style="width: ${costWidth}%"></div>
+          <span class="progress-text">$${currentCost.toFixed(4)}</span>
+        </div>
+      </td>
+      <td class="duration">${entry.Avg_Duration.toFixed(2)}s</td>
+      <td class="tokens">${entry.Avg_Tokens.toLocaleString()}</td>
+      <td class="runs">${entry.Runs}</td>
+      <td class="provider">${entry.Provider}</td>
+    </tr>
+  `;
+    })
+    .join('');
+};