Make /models tables column-sortable; rebalance /evals + /models toolbars

* /models, /developers/[id]: replace the 'Sort · X' select with
click-to-sort column headers. Each column toggles direction on
repeat click; switching columns picks a sensible default direction
(asc for name/developer, desc for numeric / recency). Defaults land
on Released ↓ for the model tables and Models ↓ for the developer
table so the newest models surface first.

* /developers (developer table): drop the 'Top evaluations' column
— its chip strip duplicated info that lives one click deeper on the
developer page and was crowding the row.

* /evals: fold the standalone search row into the existing meta row
(Families / Composites / Single benchmarks / Slices / Metrics) with
the input pinned right via ml-auto. Same compaction on /models —
search now sits at ml-auto where the sort dropdown used to be and
widens to a 360px cap so it fills the freed space cleanly.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

app/developers/[id]/page.tsx

@@ -6,14 +6,34 @@ import { ArrowLeft, Search } from "lucide-react"
 
 import { type BenchmarkEvaluationCardData } from "@/components/benchmark-evaluation-card"
 import { InfiniteScrollSentinel } from "@/components/infinite-scroll"
-import { ModelTable } from "@/components/model-table"
+import { ModelTable, type ModelTableSortCol } from "@/components/model-table"
 import { Navigation } from "@/components/navigation"
 import type { BenchmarkCard } from "@/lib/benchmark-schema"
 import { fetchDeveloperSummary, fetchBenchmarkMetadata } from "@/lib/dashboard-data-client"
 
 const PAGE_SIZE = 40
 
-type ModelSort = "date" | "name" | "benchmarks" | "results"
+type SortDir = "asc" | "desc"
+
+const MODEL_DEFAULT_DIR: Record<ModelTableSortCol, SortDir> = {
+  name: "asc",
+  developer: "asc",
+  released: "desc",
+  params: "desc",
+  benchmarks: "desc",
+  results: "desc",
+  coverage: "desc",
+}
+
+function safeTimestamp(value: string | null | undefined) {
+  if (!value) return 0
+  const numeric = Number(value)
+  if (!Number.isNaN(numeric) && !value.includes("-")) {
+    return numeric > 1_000_000_000_000 ? numeric : numeric * 1000
+  }
+  const parsed = new Date(value).getTime()
+  return Number.isNaN(parsed) ? 0 : parsed
+}
 
 export default function DeveloperDetailPage() {
   const params = useParams()
@@ -24,7 +44,19 @@ export default function DeveloperDetailPage() {
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
   const [searchQuery, setSearchQuery] = useState("")
-  const [sortBy, setSortBy] = useState<ModelSort>("date")
+  const [sortBy, setSortBy] = useState<ModelTableSortCol>("released")
+  const [sortDir, setSortDir] = useState<SortDir>("desc")
+
+  const handleSort = useCallback((col: ModelTableSortCol) => {
+    setSortBy((current) => {
+      if (current === col) {
+        setSortDir((dir) => (dir === "asc" ? "desc" : "asc"))
+        return current
+      }
+      setSortDir(MODEL_DEFAULT_DIR[col])
+      return col
+    })
+  }, [])
   const [visibleCount, setVisibleCount] = useState(PAGE_SIZE)
   const [selectedModelIds, setSelectedModelIds] = useState<string[]>([])
 
@@ -72,31 +104,40 @@ export default function DeveloperDetailPage() {
         })
       : [...models]
 
-    switch (sortBy) {
-      case "date":
-        filtered.sort(
-          (a, b) =>
-            new Date(b.latest_timestamp).getTime() -
-            new Date(a.latest_timestamp).getTime()
-        )
-        break
-      case "name":
-        filtered.sort((a, b) => a.model_name.localeCompare(b.model_name))
-        break
-      case "benchmarks":
-        filtered.sort((a, b) => b.benchmarks_count - a.benchmarks_count)
-        break
-      case "results":
-        filtered.sort((a, b) => b.evaluations_count - a.evaluations_count)
-        break
-    }
+    const dirMul = sortDir === "asc" ? 1 : -1
+    filtered.sort((a, b) => {
+      let cmp = 0
+      switch (sortBy) {
+        case "name":
+          cmp = a.model_name.localeCompare(b.model_name)
+          break
+        case "developer":
+          cmp = a.developer.localeCompare(b.developer)
+          break
+        case "released":
+          cmp = safeTimestamp(a.release_date) - safeTimestamp(b.release_date)
+          break
+        case "params":
+          cmp = (a.params_billions ?? -1) - (b.params_billions ?? -1)
+          break
+        case "results":
+          cmp = a.evaluations_count - b.evaluations_count
+          break
+        case "coverage":
+        case "benchmarks":
+          cmp = a.benchmarks_count - b.benchmarks_count
+          break
+      }
+      if (cmp === 0) return a.model_name.localeCompare(b.model_name)
+      return cmp * dirMul
+    })
 
     return filtered
-  }, [models, searchQuery, sortBy])
+  }, [models, searchQuery, sortBy, sortDir])
 
   useEffect(() => {
     setVisibleCount(PAGE_SIZE)
-  }, [searchQuery, sortBy])
+  }, [searchQuery, sortBy, sortDir])
 
   const visibleModels = useMemo(
     () => filteredModels.slice(0, visibleCount),
@@ -202,16 +243,6 @@ export default function DeveloperDetailPage() {
             />
           </div>
 
-          <select
-            className="ec-select ml-auto shrink-0"
-            value={sortBy}
-            onChange={(event) => setSortBy(event.target.value as ModelSort)}
-          >
-            <option value="date">Sort · Latest first</option>
-            <option value="benchmarks">Sort · Benchmarks</option>
-            <option value="results">Sort · Reported results</option>
-            <option value="name">Sort · Name (A–Z)</option>
-          </select>
         </div>
 
         {/* TABLE ---------------------------------------------------- */}
@@ -226,6 +257,9 @@ export default function DeveloperDetailPage() {
             selectedIds={selectedModelIds}
             onToggleSelect={toggleModelSelection}
             maxCompare={4}
+            sortCol={sortBy}
+            sortDir={sortDir}
+            onSort={handleSort}
           />
         )}
 

app/evals/page.tsx

@@ -204,45 +204,44 @@ function EvalsPageInner() {
           metrics.
         </p>
 
-        {/* META ROW ------------------------------------------------- */}
-        {stats && (
-          <div className="ec-page-meta mb-8">
-            <div className="ec-page-meta-item">
-              <span className="ec-page-meta-item-l">Families</span>
-              <span className="ec-page-meta-item-v">
-                {stats.family_count.toLocaleString()}
-              </span>
-            </div>
-            <div className="ec-page-meta-item">
-              <span className="ec-page-meta-item-l">Composites</span>
-              <span className="ec-page-meta-item-v">
-                {stats.composite_count.toLocaleString()}
-              </span>
-            </div>
-            <div className="ec-page-meta-item">
-              <span className="ec-page-meta-item-l">Single benchmarks</span>
-              <span className="ec-page-meta-item-v">
-                {(stats.benchmark_count ?? 0).toLocaleString()}
-              </span>
-            </div>
-            <div className="ec-page-meta-item">
-              <span className="ec-page-meta-item-l">Slices</span>
-              <span className="ec-page-meta-item-v">
-                {stats.slice_count.toLocaleString()}
-              </span>
-            </div>
-            <div className="ec-page-meta-item">
-              <span className="ec-page-meta-item-l">Metrics</span>
-              <span className="ec-page-meta-item-v">
-                {stats.metric_count.toLocaleString()}
-              </span>
-            </div>
-          </div>
-        )}
+        {/* META + SEARCH ROW --------------------------------------- */}
+        <div className="ec-page-meta mb-6 items-center border-b border-[color:var(--border-soft)] pb-5">
+          {stats && (
+            <>
+              <div className="ec-page-meta-item">
+                <span className="ec-page-meta-item-l">Families</span>
+                <span className="ec-page-meta-item-v">
+                  {stats.family_count.toLocaleString()}
+                </span>
+              </div>
+              <div className="ec-page-meta-item">
+                <span className="ec-page-meta-item-l">Composites</span>
+                <span className="ec-page-meta-item-v">
+                  {stats.composite_count.toLocaleString()}
+                </span>
+              </div>
+              <div className="ec-page-meta-item">
+                <span className="ec-page-meta-item-l">Single benchmarks</span>
+                <span className="ec-page-meta-item-v">
+                  {(stats.benchmark_count ?? 0).toLocaleString()}
+                </span>
+              </div>
+              <div className="ec-page-meta-item">
+                <span className="ec-page-meta-item-l">Slices</span>
+                <span className="ec-page-meta-item-v">
+                  {stats.slice_count.toLocaleString()}
+                </span>
+              </div>
+              <div className="ec-page-meta-item">
+                <span className="ec-page-meta-item-l">Metrics</span>
+                <span className="ec-page-meta-item-v">
+                  {stats.metric_count.toLocaleString()}
+                </span>
+              </div>
+            </>
+          )}
 
-        {/* FILTER BAR ----------------------------------------------- */}
-        <div className="mb-6 flex flex-wrap items-center gap-3 border-b border-[color:var(--border-soft)] pb-5">
-          <div className="relative w-full sm:max-w-sm">
+          <div className="relative ml-auto min-w-[180px] flex-1 sm:max-w-[360px]">
             <Search className="pointer-events-none absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-[color:var(--fg-subtle)]" />
             <input
               className="ec-input pl-9"
@@ -251,7 +250,6 @@ function EvalsPageInner() {
               placeholder="Search family, category…"
             />
           </div>
-
         </div>
 
         {/* CATEGORY PILLS — multi-select filter by curated benchmark

app/models/page.tsx

@@ -4,10 +4,10 @@ import { useCallback, useDeferredValue, useEffect, useMemo, useState } from "rea
 import { ArrowRightLeft, Search, X } from "lucide-react"
 
 import { type BenchmarkEvaluationCardData } from "@/components/benchmark-evaluation-card"
-import { DeveloperTable } from "@/components/developer-table"
+import { DeveloperTable, type DeveloperTableSortCol } from "@/components/developer-table"
 import { InfiniteScrollSentinel } from "@/components/infinite-scroll"
 import { ModelCompareDialog } from "@/components/model-compare-dialog"
-import { ModelTable } from "@/components/model-table"
+import { ModelTable, type ModelTableSortCol } from "@/components/model-table"
 import { Navigation } from "@/components/navigation"
 import { ParamRangePicker } from "@/components/param-range-picker"
 import { fetchCorpusAggregates, fetchDevelopers, fetchModelCards, fetchBenchmarkMetadata, type DeveloperListItem } from "@/lib/dashboard-data-client"
@@ -17,8 +17,27 @@ import { PARAM_RANGE_MAX_INDEX, paramStepToNumeric } from "@/lib/param-range"
 const PAGE_SIZE = 40
 const MAX_COMPARE_MODELS = 4
 
-type ModelSort = "benchmarks" | "results" | "name" | "released" | "params"
-type DevSort = "coverage" | "evaluated" | "models" | "name"
+type ModelSort = ModelTableSortCol
+type DevSort = DeveloperTableSortCol
+type SortDir = "asc" | "desc"
+
+// Default sort direction per column when the user first clicks it. Numeric /
+// recency columns descend (newest, biggest first); name columns ascend.
+const MODEL_DEFAULT_DIR: Record<ModelSort, SortDir> = {
+  name: "asc",
+  developer: "asc",
+  released: "desc",
+  params: "desc",
+  benchmarks: "desc",
+  results: "desc",
+  coverage: "desc",
+}
+const DEV_DEFAULT_DIR: Record<DevSort, SortDir> = {
+  name: "asc",
+  models: "desc",
+  benchmarks: "desc",
+  results: "desc",
+}
 
 function safeTimestamp(value: string | null | undefined) {
   if (!value) return 0
@@ -39,8 +58,32 @@ export default function ModelsPage() {
   const [loadingDevelopers, setLoadingDevelopers] = useState(false)
   const [developersReady, setDevelopersReady] = useState(false)
   const [groupByDeveloper, setGroupByDeveloper] = useState(false)
-  const [modelSortBy, setModelSortBy] = useState<ModelSort>("benchmarks")
-  const [developerSortBy, setDeveloperSortBy] = useState<DevSort>("coverage")
+  const [modelSortBy, setModelSortBy] = useState<ModelSort>("released")
+  const [modelSortDir, setModelSortDir] = useState<SortDir>("desc")
+  const [developerSortBy, setDeveloperSortBy] = useState<DevSort>("models")
+  const [developerSortDir, setDeveloperSortDir] = useState<SortDir>("desc")
+
+  const handleModelSort = useCallback((col: ModelSort) => {
+    setModelSortBy((current) => {
+      if (current === col) {
+        setModelSortDir((dir) => (dir === "asc" ? "desc" : "asc"))
+        return current
+      }
+      setModelSortDir(MODEL_DEFAULT_DIR[col])
+      return col
+    })
+  }, [])
+
+  const handleDeveloperSort = useCallback((col: DevSort) => {
+    setDeveloperSortBy((current) => {
+      if (current === col) {
+        setDeveloperSortDir((dir) => (dir === "asc" ? "desc" : "asc"))
+        return current
+      }
+      setDeveloperSortDir(DEV_DEFAULT_DIR[col])
+      return col
+    })
+  }, [])
   const [searchQuery, setSearchQuery] = useState("")
   const [selectedModelIds, setSelectedModelIds] = useState<string[]>([])
   const [compareOpen, setCompareOpen] = useState(false)
@@ -116,22 +159,35 @@ export default function ModelsPage() {
       })
     }
 
+    const dirMul = modelSortDir === "asc" ? 1 : -1
     return filtered.slice().sort((a, b) => {
+      let cmp = 0
       switch (modelSortBy) {
         case "name":
-          return a.model_name.localeCompare(b.model_name)
+          cmp = a.model_name.localeCompare(b.model_name)
+          break
+        case "developer":
+          cmp = a.developer.localeCompare(b.developer)
+          break
         case "released":
-          return safeTimestamp(b.release_date) - safeTimestamp(a.release_date)
+          cmp = safeTimestamp(a.release_date) - safeTimestamp(b.release_date)
+          break
         case "params":
-          return (b.params_billions ?? 0) - (a.params_billions ?? 0)
+          cmp = (a.params_billions ?? -1) - (b.params_billions ?? -1)
+          break
         case "results":
-          return b.evaluations_count - a.evaluations_count
+          cmp = a.evaluations_count - b.evaluations_count
+          break
+        case "coverage":
         case "benchmarks":
-        default:
-          return b.benchmarks_count - a.benchmarks_count
+          cmp = a.benchmarks_count - b.benchmarks_count
+          break
       }
+      // Stable tie-break by model name so equal rows don't shuffle.
+      if (cmp === 0) return a.model_name.localeCompare(b.model_name)
+      return cmp * dirMul
     })
-  }, [evaluations, deferredSearchQuery, modelSortBy, numericMinParams, numericMaxParams, showUnknownSize])
+  }, [evaluations, deferredSearchQuery, modelSortBy, modelSortDir, numericMinParams, numericMaxParams, showUnknownSize])
 
   // Developers �� filter + sort
   const sortedDevelopers = useMemo(() => {
@@ -146,25 +202,32 @@ export default function ModelsPage() {
       )
     }
 
+    const dirMul = developerSortDir === "asc" ? 1 : -1
     return filtered.slice().sort((a, b) => {
+      let cmp = 0
       switch (developerSortBy) {
-        case "evaluated":
-          return b.evaluation_count - a.evaluation_count
-        case "models":
-          return b.model_count - a.model_count
         case "name":
-          return a.developer.localeCompare(b.developer)
-        case "coverage":
-        default:
-          return b.benchmark_count - a.benchmark_count
+          cmp = a.developer.localeCompare(b.developer)
+          break
+        case "models":
+          cmp = a.model_count - b.model_count
+          break
+        case "benchmarks":
+          cmp = a.benchmark_count - b.benchmark_count
+          break
+        case "results":
+          cmp = a.evaluation_count - b.evaluation_count
+          break
       }
+      if (cmp === 0) return a.developer.localeCompare(b.developer)
+      return cmp * dirMul
     })
-  }, [developers, deferredSearchQuery, developerSortBy])
+  }, [developers, deferredSearchQuery, developerSortBy, developerSortDir])
 
   // Reset visible window when filter/sort changes
   useEffect(() => {
     setVisibleCount(PAGE_SIZE)
-  }, [groupByDeveloper, modelSortBy, developerSortBy, deferredSearchQuery, minParamStep, maxParamStep, showUnknownSize])
+  }, [groupByDeveloper, modelSortBy, modelSortDir, developerSortBy, developerSortDir, deferredSearchQuery, minParamStep, maxParamStep, showUnknownSize])
 
   const totalCount = groupByDeveloper ? sortedDevelopers.length : sortedEvaluations.length
   const visibleEvaluations = useMemo(
@@ -268,7 +331,7 @@ export default function ModelsPage() {
             </button>
           </div>
 
-          <div className="relative min-w-[180px] flex-1 sm:max-w-[260px]">
+          <div className="relative ml-auto min-w-[180px] flex-1 sm:max-w-[360px]">
             <Search className="pointer-events-none absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-[color:var(--fg-subtle)]" />
             <input
               className="ec-input pl-9"
@@ -280,32 +343,6 @@ export default function ModelsPage() {
             />
           </div>
 
-          <select
-            className="ec-select ml-auto shrink-0"
-            value={groupByDeveloper ? developerSortBy : modelSortBy}
-            onChange={(event) => {
-              const value = event.target.value
-              if (groupByDeveloper) setDeveloperSortBy(value as DevSort)
-              else setModelSortBy(value as ModelSort)
-            }}
-          >
-            {groupByDeveloper ? (
-              <>
-                <option value="coverage">Sort · Coverage</option>
-                <option value="evaluated">Sort · Reported results</option>
-                <option value="models">Sort · Most models</option>
-                <option value="name">Sort · Name</option>
-              </>
-            ) : (
-              <>
-                <option value="benchmarks">Sort · Benchmarks</option>
-                <option value="results">Sort · Reported results</option>
-                <option value="released">Sort · Released</option>
-                <option value="params">Sort · Parameters</option>
-                <option value="name">Sort · Name</option>
-              </>
-            )}
-          </select>
         </div>
 
         {/* PARAM RANGE — its own row so the rail has room to breathe.
@@ -346,15 +383,22 @@ export default function ModelsPage() {
               className="btn-ec outline"
               onClick={() => {
                 setSearchQuery("")
-                setModelSortBy("benchmarks")
-                setDeveloperSortBy("coverage")
+                setModelSortBy("released")
+                setModelSortDir("desc")
+                setDeveloperSortBy("models")
+                setDeveloperSortDir("desc")
               }}
             >
               Reset filters
             </button>
           </div>
         ) : groupByDeveloper ? (
-          <DeveloperTable rows={visibleDevelopers} />
+          <DeveloperTable
+            rows={visibleDevelopers}
+            sortCol={developerSortBy}
+            sortDir={developerSortDir}
+            onSort={handleDeveloperSort}
+          />
         ) : (
           <ModelTable
             rows={visibleEvaluations}
@@ -362,6 +406,9 @@ export default function ModelsPage() {
             selectedIds={selectedModelIds}
             onToggleSelect={toggleModelSelection}
             maxCompare={MAX_COMPARE_MODELS}
+            sortCol={modelSortBy}
+            sortDir={modelSortDir}
+            onSort={handleModelSort}
           />
         )}
 

components/developer-table.tsx

@@ -1,27 +1,74 @@
 "use client"
 
 import Link from "next/link"
-import { ArrowUpRight } from "lucide-react"
+import { ArrowUpRight, ChevronDown, ChevronUp, ChevronsUpDown } from "lucide-react"
 
 import type { DeveloperListItem } from "@/lib/dashboard-data-client"
+import { cn } from "@/lib/utils"
+
+export type DeveloperTableSortCol =
+  | "name"
+  | "models"
+  | "benchmarks"
+  | "results"
 
 interface DeveloperTableProps {
   rows: DeveloperListItem[]
+  sortCol: DeveloperTableSortCol
+  sortDir: "asc" | "desc"
+  onSort: (col: DeveloperTableSortCol) => void
 }
 
-export function DeveloperTable({ rows }: DeveloperTableProps) {
+export function DeveloperTable({ rows, sortCol, sortDir, onSort }: DeveloperTableProps) {
   const maxModels = rows.reduce((m, r) => Math.max(m, r.model_count), 1)
 
+  function SortIcon({ col }: { col: DeveloperTableSortCol }) {
+    if (sortCol !== col) return <ChevronsUpDown className="h-3 w-3 opacity-30" aria-hidden />
+    return sortDir === "asc"
+      ? <ChevronUp className="h-3 w-3" aria-hidden />
+      : <ChevronDown className="h-3 w-3" aria-hidden />
+  }
+
+  function SortTh({
+    col,
+    children,
+    className,
+    style,
+  }: {
+    col: DeveloperTableSortCol
+    children: React.ReactNode
+    className?: string
+    style?: React.CSSProperties
+  }) {
+    const active = sortCol === col
+    return (
+      <th
+        className={className}
+        style={{
+          ...style,
+          cursor: "pointer",
+          userSelect: "none",
+          color: active ? "var(--fg)" : undefined,
+        }}
+        onClick={() => onSort(col)}
+      >
+        <span className={cn("inline-flex items-center gap-1", className?.includes("num") && "justify-end")}>
+          {children}
+          <SortIcon col={col} />
+        </span>
+      </th>
+    )
+  }
+
   return (
     <div className="overflow-x-auto">
       <table className="ec-htable">
         <thead>
           <tr>
-            <th style={{ width: "32%" }}>Developer</th>
-            <th className="num">Models</th>
-            <th className="num">Benchmarks</th>
-            <th className="num">Reported results</th>
-            <th style={{ width: "32%" }}>Top evaluations</th>
+            <SortTh col="name" style={{ width: "32%" }}>Developer</SortTh>
+            <SortTh col="models" className="num">Models</SortTh>
+            <SortTh col="benchmarks" className="num">Benchmarks</SortTh>
+            <SortTh col="results" className="num">Reported results</SortTh>
             <th style={{ width: 90 }} />
           </tr>
         </thead>
@@ -55,24 +102,6 @@ export function DeveloperTable({ rows }: DeveloperTableProps) {
                 <td className="num font-mono text-[13px]">
                   {dev.evaluation_count.toLocaleString()}
                 </td>
-                <td>
-                  <div className="flex flex-wrap gap-1.5">
-                    {dev.popular_evals.slice(0, 3).map((ev) => (
-                      <span
-                        key={ev.benchmark}
-                        className="inline-flex items-center gap-1 border border-[color:var(--border-soft)] bg-[color:var(--bg)] px-2 py-0.5 font-mono text-[10px] tracking-[0.04em] text-[color:var(--fg-muted)]"
-                        title={`${ev.benchmark} · ${ev.model_count} models`}
-                      >
-                        <span className="truncate max-w-[120px]">
-                          {ev.benchmark}
-                        </span>
-                        <span className="text-[color:var(--fg-subtle)]">
-                          {ev.model_count}
-                        </span>
-                      </span>
-                    ))}
-                  </div>
-                </td>
                 <td>
                   <Link
                     href={`/developers/${dev.route_id}`}

components/model-table.tsx

@@ -1,17 +1,29 @@
 "use client"
 
 import Link from "next/link"
-import { ArrowUpRight } from "lucide-react"
+import { ArrowUpRight, ChevronDown, ChevronUp, ChevronsUpDown } from "lucide-react"
 
 import type { BenchmarkEvaluationCardData } from "@/components/benchmark-evaluation-card"
 import { cn } from "@/lib/utils"
 
+export type ModelTableSortCol =
+  | "name"
+  | "developer"
+  | "released"
+  | "params"
+  | "benchmarks"
+  | "results"
+  | "coverage"
+
 interface ModelTableProps {
   rows: BenchmarkEvaluationCardData[]
   totalBenchmarks: number
   selectedIds: string[]
   onToggleSelect: (id: string) => void
   maxCompare: number
+  sortCol: ModelTableSortCol
+  sortDir: "asc" | "desc"
+  onSort: (col: ModelTableSortCol) => void
 }
 
 function formatDateShort(value: string | undefined) {
@@ -49,19 +61,60 @@ export function ModelTable({
   selectedIds,
   onToggleSelect,
   maxCompare,
+  sortCol,
+  sortDir,
+  onSort,
 }: ModelTableProps) {
+  function SortIcon({ col }: { col: ModelTableSortCol }) {
+    if (sortCol !== col) return <ChevronsUpDown className="h-3 w-3 opacity-30" aria-hidden />
+    return sortDir === "asc"
+      ? <ChevronUp className="h-3 w-3" aria-hidden />
+      : <ChevronDown className="h-3 w-3" aria-hidden />
+  }
+
+  function SortTh({
+    col,
+    children,
+    className,
+    style,
+  }: {
+    col: ModelTableSortCol
+    children: React.ReactNode
+    className?: string
+    style?: React.CSSProperties
+  }) {
+    const active = sortCol === col
+    return (
+      <th
+        className={className}
+        style={{
+          ...style,
+          cursor: "pointer",
+          userSelect: "none",
+          color: active ? "var(--fg)" : undefined,
+        }}
+        onClick={() => onSort(col)}
+      >
+        <span className={cn("inline-flex items-center gap-1", className?.includes("num") && "justify-end")}>
+          {children}
+          <SortIcon col={col} />
+        </span>
+      </th>
+    )
+  }
+
   return (
     <div className="overflow-x-auto">
       <table className="ec-htable">
         <thead>
           <tr>
-            <th style={{ width: "30%" }}>Model</th>
-            <th>Developer</th>
-            <th>Released</th>
-            <th>Params</th>
-            <th className="num">Benchmarks</th>
-            <th className="num">Results</th>
-            <th style={{ width: "20%" }}>Coverage</th>
+            <SortTh col="name" style={{ width: "30%" }}>Model</SortTh>
+            <SortTh col="developer">Developer</SortTh>
+            <SortTh col="released">Released</SortTh>
+            <SortTh col="params">Params</SortTh>
+            <SortTh col="benchmarks" className="num">Benchmarks</SortTh>
+            <SortTh col="results" className="num">Results</SortTh>
+            <SortTh col="coverage" style={{ width: "20%" }}>Coverage</SortTh>
             <th style={{ width: 90 }} />
           </tr>
         </thead>