Co-op usage: sort by cost (default) or requests; uniform rank badges (no special #1 styling)

app/main.py

@@ -373,7 +373,6 @@ PAGE_HTML = """<!DOCTYPE html>
     display: flex; align-items: center; justify-content: center; flex-shrink: 0;
     margin-top: 2px;
   }
-  .board-row:first-child .board-rank { background: var(--green-deep); color: #fff; }
   .board-main { flex: 1; min-width: 0; }
   .board-line { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
   .board-cost { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
@@ -535,6 +534,11 @@ PAGE_HTML = """<!DOCTYPE html>
 
     <div id="view-coop" style="display:none;">
       <div class="board-note">Usage across the co-op, last 30 days</div>
+      <div style="display:flex; align-items:center; gap:10px; margin-bottom:10px;">
+        <span class="board-note" style="margin:0;">Sort by</span>
+        <button class="mode-btn active" id="sort-cost" onclick="setBoardSort('cost')">Cost</button>
+        <button class="mode-btn" id="sort-requests" onclick="setBoardSort('requests')">Requests</button>
+      </div>
       <div class="board" id="coop-board"></div>
     </div>
 
@@ -757,18 +761,31 @@ function setUsageMode(mode) {
   $('view-coop').style.display = mode === 'coop' ? '' : 'none';
 }
 
+let boardSort = 'cost'; // default: rank by cost (requests made nomic-embed dominate)
+let coopModels = [];
+
+function setBoardSort(mode) {
+  boardSort = mode;
+  $('sort-cost').className = 'mode-btn' + (mode === 'cost' ? ' active' : '');
+  $('sort-requests').className = 'mode-btn' + (mode === 'requests' ? ' active' : '');
+  renderBoard();
+}
+
 function renderBoard(models) {
+  if (models !== undefined) coopModels = models || [];
   const el = $('coop-board');
-  if (!models.length) {
+  if (!coopModels.length) {
     el.innerHTML = '<div class="empty">Not enough usage data yet — check back soon.</div>';
     return;
   }
-  // Strictly descending by usage (requests); bar widths relative to the top.
-  const rows = [...models].sort((a, b) => (b.requests || 0) - (a.requests || 0));
-  const top = Math.max(...rows.map(m => m.requests || 0), 1);
+  // Descending by the selected metric; bar widths relative to the top.
+  const metric = (m) => (boardSort === 'cost' ? (m.spend || 0) : (m.requests || 0));
+  const rows = [...coopModels].sort((a, b) => metric(b) - metric(a));
+  const top = Math.max(...rows.map(metric), 1e-9);
   el.innerHTML = rows.map((m, i) => {
     const req = m.requests || 0;
-    const pct = Math.round((req / top) * 100);
+    const v = metric(m);
+    const pct = Math.max(2, Math.round((v / top) * 100));
     return '<div class="board-row">' +
       '<div class="board-rank">' + (i + 1) + '</div>' +
       '<div class="board-main">' +