ux changes

app/globals.css

@@ -212,6 +212,74 @@
   }
 }
 
+.param-range-input {
+  appearance: none;
+  position: absolute;
+  left: 0.375rem;
+  right: 0.375rem;
+  top: 50%;
+  transform: translateY(-50%);
+  width: calc(100% - 0.75rem);
+  height: 3px;
+  background: transparent;
+  pointer-events: none;
+}
+
+.param-range-input::-webkit-slider-runnable-track {
+  height: 3px;
+  background: transparent;
+}
+
+.param-range-input::-webkit-slider-thumb {
+  appearance: none;
+  pointer-events: auto;
+  height: 12px;
+  width: 12px;
+  border-radius: 9999px;
+  border: 2px solid var(--color-foreground);
+  background: var(--color-foreground);
+  margin-top: -4.5px;
+  cursor: pointer;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-background) 80%, transparent);
+  transition:
+    box-shadow 180ms var(--ease-out-quart),
+    background-color 180ms var(--ease-out-quart),
+    border-color 180ms var(--ease-out-quart);
+}
+
+.param-range-input::-moz-range-track {
+  height: 3px;
+  border: 0;
+  background: transparent;
+}
+
+.param-range-input::-moz-range-thumb {
+  pointer-events: auto;
+  height: 12px;
+  width: 12px;
+  border-radius: 9999px;
+  border: 2px solid var(--color-foreground);
+  background: var(--color-foreground);
+  cursor: pointer;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-background) 80%, transparent);
+  transition:
+    box-shadow 180ms var(--ease-out-quart),
+    background-color 180ms var(--ease-out-quart),
+    border-color 180ms var(--ease-out-quart);
+}
+
+.param-range-input:focus-visible::-webkit-slider-thumb {
+  box-shadow:
+    0 0 0 3px color-mix(in srgb, var(--color-background) 80%, transparent),
+    0 0 0 6px color-mix(in srgb, var(--color-ring) 35%, transparent);
+}
+
+.param-range-input:focus-visible::-moz-range-thumb {
+  box-shadow:
+    0 0 0 3px color-mix(in srgb, var(--color-background) 80%, transparent),
+    0 0 0 6px color-mix(in srgb, var(--color-ring) 35%, transparent);
+}
+
 @media (prefers-reduced-motion: reduce) {
   .motion-academic-enter,
   .motion-academic-enter-soft {

app/models/page.tsx

@@ -5,15 +5,53 @@ import { useAudienceMode } from "@/components/audience-mode-provider"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
-import { ArrowUpDown, Search } from "lucide-react"
+import { ArrowUpDown, ArrowRightLeft, Search, X } from "lucide-react"
 import { BenchmarkEvaluationCard, type BenchmarkEvaluationCardData } from "@/components/benchmark-evaluation-card"
 import { DeveloperCard } from "@/components/developer-card"
 import { ListPagination } from "@/components/list-pagination"
+import { ModelCompareDialog } from "@/components/model-compare-dialog"
 import { Navigation } from "@/components/navigation"
 import { PageHeader } from "@/components/page-header"
+import { Badge } from "@/components/ui/badge"
 import { fetchDevelopers, fetchModelCards, type DeveloperListItem } from "@/lib/dashboard-data-client"
 
 const PAGE_SIZE = 40
+const MAX_COMPARE_MODELS = 4
+const PARAM_RANGE_VALUES = [1, 2, 3, 4, 6, 8, 10, 12, 16, 24, 32, 48, 64, 96, 128, 192, 256, 384, 500] as const
+const PARAM_RANGE_MARKERS = [
+  { label: "< 1B", step: 0 },
+  { label: "6B", step: PARAM_RANGE_VALUES.indexOf(6) },
+  { label: "12B", step: PARAM_RANGE_VALUES.indexOf(12) },
+  { label: "32B", step: PARAM_RANGE_VALUES.indexOf(32) },
+  { label: "128B", step: PARAM_RANGE_VALUES.indexOf(128) },
+  { label: "> 500B", step: PARAM_RANGE_VALUES.length - 1 },
+] as const
+
+function formatParamBoundLabel(step: number, bound: "min" | "max") {
+  const maxStepIndex = PARAM_RANGE_VALUES.length - 1
+
+  if (bound === "min" && step <= 0) {
+    return "< 1B"
+  }
+
+  if (bound === "max" && step >= maxStepIndex) {
+    return "> 500B"
+  }
+
+  const value = PARAM_RANGE_VALUES[step]
+  return value != null ? `${value}B` : "Not reported"
+}
+
+function getReproducibilitySortValue(status: BenchmarkEvaluationCardData["reproducibility_status"]) {
+  switch (status) {
+    case "complete":
+      return 2
+    case "partial":
+      return 1
+    default:
+      return 0
+  }
+}
 
 export default function ModelsPage() {
   const { mode } = useAudienceMode()
@@ -22,9 +60,13 @@ export default function ModelsPage() {
   const [loadingModels, setLoadingModels] = useState(true)
   const [loadingDevelopers, setLoadingDevelopers] = useState(true)
   const [groupByDeveloper, setGroupByDeveloper] = useState(false)
-  const [modelSortBy, setModelSortBy] = useState<"date" | "name" | "benchmarks">("date")
+  const [modelSortBy, setModelSortBy] = useState<"date" | "name" | "benchmarks" | "reporting" | "reproducibility" | "size">("benchmarks")
   const [developerSortBy, setDeveloperSortBy] = useState<"coverage" | "evaluated" | "models" | "name">("coverage")
   const [searchQuery, setSearchQuery] = useState("")
+  const [minParamStep, setMinParamStep] = useState(0)
+  const [maxParamStep, setMaxParamStep] = useState(PARAM_RANGE_VALUES.length - 1)
+  const [selectedModelIds, setSelectedModelIds] = useState<string[]>([])
+  const [compareOpen, setCompareOpen] = useState(false)
   const [page, setPage] = useState(1)
 
   useEffect(() => {
@@ -52,27 +94,62 @@ export default function ModelsPage() {
     setGroupByDeveloper(params.get("group") === "developer")
   }, [])
 
-  const filteredEvaluations = useMemo(() => {
-    const query = searchQuery.trim().toLowerCase()
+  useEffect(() => {
+    setSelectedModelIds((current) =>
+      current.filter((id) => evaluations.some((evaluation) => evaluation.id === id))
+    )
+  }, [evaluations])
 
-    if (!query) {
-      return [...evaluations]
+  const numericMinParams = useMemo(() => {
+    if (minParamStep <= 0) {
+      return null
     }
 
+    return PARAM_RANGE_VALUES[minParamStep] ?? null
+  }, [minParamStep])
+
+  const numericMaxParams = useMemo(() => {
+    if (maxParamStep >= PARAM_RANGE_VALUES.length - 1) {
+      return null
+    }
+
+    return PARAM_RANGE_VALUES[maxParamStep] ?? null
+  }, [maxParamStep])
+
+  const filteredEvaluations = useMemo(() => {
+    const query = searchQuery.trim().toLowerCase()
+
     return evaluations.filter((evaluation) => {
+      if (numericMinParams != null) {
+        if (evaluation.params_billions == null || evaluation.params_billions < numericMinParams) {
+          return false
+        }
+      }
+
+      if (numericMaxParams != null) {
+        if (evaluation.params_billions == null || evaluation.params_billions > numericMaxParams) {
+          return false
+        }
+      }
+
+      if (!query) {
+        return true
+      }
+
       const haystacks = [
         evaluation.model_name,
         evaluation.canonical_model_name,
         evaluation.developer,
         evaluation.architecture,
         evaluation.latest_source_name,
+        evaluation.reproducibility_status,
         ...evaluation.evaluator_names,
         ...evaluation.top_scores.map((score) => score.benchmark),
       ]
 
       return haystacks.some((value) => value?.toLowerCase().includes(query))
     })
-  }, [evaluations, searchQuery])
+  }, [evaluations, numericMaxParams, numericMinParams, searchQuery])
 
   const sortedEvaluations = useMemo(() => {
     const sorted = [...filteredEvaluations]
@@ -89,6 +166,34 @@ export default function ModelsPage() {
       case "benchmarks":
         sorted.sort((a, b) => b.benchmarks_count - a.benchmarks_count)
         break
+      case "reporting":
+        sorted.sort((a, b) => {
+          if (b.evaluator_count !== a.evaluator_count) {
+            return b.evaluator_count - a.evaluator_count
+          }
+          if (b.independent_verification_ratio !== a.independent_verification_ratio) {
+            return b.independent_verification_ratio - a.independent_verification_ratio
+          }
+          return b.benchmarks_count - a.benchmarks_count
+        })
+        break
+      case "reproducibility":
+        sorted.sort((a, b) => {
+          const reproducibilityDiff =
+            getReproducibilitySortValue(b.reproducibility_status) -
+            getReproducibilitySortValue(a.reproducibility_status)
+          if (reproducibilityDiff !== 0) {
+            return reproducibilityDiff
+          }
+          if (b.independent_verification_ratio !== a.independent_verification_ratio) {
+            return b.independent_verification_ratio - a.independent_verification_ratio
+          }
+          return b.benchmarks_count - a.benchmarks_count
+        })
+        break
+      case "size":
+        sorted.sort((a, b) => (b.params_billions ?? -1) - (a.params_billions ?? -1))
+        break
     }
 
     return sorted
@@ -142,7 +247,7 @@ export default function ModelsPage() {
 
   useEffect(() => {
     setPage(1)
-  }, [developerSortBy, groupByDeveloper, modelSortBy, searchQuery])
+  }, [developerSortBy, groupByDeveloper, maxParamStep, minParamStep, modelSortBy, searchQuery])
 
   const pagedEvaluations = useMemo(
     () => sortedEvaluations.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE),
@@ -156,9 +261,41 @@ export default function ModelsPage() {
 
   const handleDelete = (id: string) => {
     setEvaluations((prev) => prev.filter((e) => e.id !== id))
+    setSelectedModelIds((prev) => prev.filter((selectedId) => selectedId !== id))
+  }
+
+  const selectedModels = useMemo(
+    () =>
+      selectedModelIds
+        .map((id) => evaluations.find((evaluation) => evaluation.id === id))
+        .filter((evaluation): evaluation is BenchmarkEvaluationCardData => Boolean(evaluation)),
+    [evaluations, selectedModelIds]
+  )
+
+  useEffect(() => {
+    if (compareOpen && selectedModels.length < 2) {
+      setCompareOpen(false)
+    }
+  }, [compareOpen, selectedModels.length])
+
+  const toggleModelSelection = (id: string) => {
+    setSelectedModelIds((current) => {
+      if (current.includes(id)) {
+        return current.filter((selectedId) => selectedId !== id)
+      }
+
+      if (current.length >= MAX_COMPARE_MODELS) {
+        return current
+      }
+
+      return [...current, id]
+    })
   }
 
   const loading = loadingModels || loadingDevelopers
+  const maxParamStepIndex = PARAM_RANGE_VALUES.length - 1
+  const minHandlePercent = (minParamStep / maxParamStepIndex) * 100
+  const maxHandlePercent = (maxParamStep / maxParamStepIndex) * 100
 
   if (loading) {
     return (
@@ -184,8 +321,8 @@ export default function ModelsPage() {
             groupByDeveloper
               ? "Group the model corpus by developer to compare how many models each team ships and which eval suites show up most often."
               : mode === "research"
-                ? "Browse model cards with benchmark breadth, result density, and technical highlights."
-                : "Browse model cards with stronger emphasis on reporting breadth, evidence, and evaluation accountability."
+                ? "Browse model cards with benchmark breadth, comparison-ready context, and methodological trust signals."
+                : "Browse model cards with stronger emphasis on reporting breadth, evidence quality, and evaluation accountability."
           }
           metaItems={[
             groupByDeveloper
@@ -203,9 +340,33 @@ export default function ModelsPage() {
                   value: filteredDevelopers.reduce((sum, developer) => sum + developer.benchmark_count, 0).toString(),
                 }
               : { label: "Reporting orgs", value: new Set(sortedEvaluations.flatMap((e) => e.evaluator_names)).size.toString() },
+            !groupByDeveloper
+              ? { label: "Compare tray", value: selectedModels.length.toString() }
+              : { label: "View", value: "Developer" },
           ]}
         />
 
+        {!groupByDeveloper ? (
+          <div className="mb-6 rounded-[1.5rem] border border-border/70 bg-muted/10 px-5 py-4">
+            <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
+              <div>
+                <div className="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.22em] text-muted-foreground">
+                  <ArrowRightLeft className="h-3.5 w-3.5" />
+                  Compare Workflow
+                </div>
+                <div className="mt-2 text-sm text-muted-foreground">
+                  Show the most useful information first: narrow to a similar parameter range, scan key benchmarks, then select up to {MAX_COMPARE_MODELS} models for a table comparison.
+                </div>
+              </div>
+              <div className="flex flex-wrap gap-2">
+                <Badge variant="outline">Parameter range filter</Badge>
+                <Badge variant="outline">Table comparison</Badge>
+                <Badge variant="outline">Trust signals first</Badge>
+              </div>
+            </div>
+          </div>
+        ) : null}
+
         <div className="mb-8 flex flex-col gap-4 border-b border-border/50 pb-6 sm:flex-row sm:flex-wrap sm:items-center">
           <div className="relative w-full sm:max-w-sm">
             <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
@@ -220,6 +381,91 @@ export default function ModelsPage() {
               className="pl-9"
             />
           </div>
+          {!groupByDeveloper ? (
+            <div className="rounded-xl border border-border/70 bg-muted/15 px-4 py-2">
+              <div className="flex items-center gap-3">
+                <span className="shrink-0 text-sm font-medium text-foreground">Parameters</span>
+
+                <div className="min-w-0 flex-1 w-[min(92vw,360px)]">
+                  <div className="relative mb-1 h-4 text-[11px] text-muted-foreground">
+                    {PARAM_RANGE_MARKERS.map((marker) => (
+                      <span
+                        key={marker.label}
+                        className="absolute top-0 whitespace-nowrap"
+                        style={{
+                          left: `${(marker.step / maxParamStepIndex) * 100}%`,
+                          transform:
+                            marker.step === 0
+                              ? "translateX(0)"
+                              : marker.step === maxParamStepIndex
+                                ? "translateX(-100%)"
+                                : "translateX(-50%)",
+                        }}
+                      >
+                        {marker.label}
+                      </span>
+                    ))}
+                  </div>
+
+                  <div className="relative h-4">
+                    <div className="absolute inset-x-1.5 top-1/2 h-[3px] -translate-y-1/2 rounded-full bg-border/80" />
+                    <div className="absolute inset-x-1.5 top-1/2 h-[3px] -translate-y-1/2">
+                      <div
+                        className="absolute inset-y-0 rounded-full bg-foreground transition-[left,right] duration-300 ease-[var(--ease-out-quint)]"
+                        style={{
+                          left: `${minHandlePercent}%`,
+                          right: `${Math.max(100 - maxHandlePercent, 0)}%`,
+                        }}
+                      />
+                    </div>
+
+                    <div className="absolute inset-x-1.5 top-1/2 -translate-y-1/2">
+                      {PARAM_RANGE_VALUES.map((_, stepIndex) => (
+                        <span
+                          key={`param-tick-${stepIndex}`}
+                          className="absolute top-0 h-2 w-px -translate-x-1/2 rounded-full bg-border"
+                          style={{ left: `${(stepIndex / maxParamStepIndex) * 100}%` }}
+                          aria-hidden="true"
+                        />
+                      ))}
+                    </div>
+
+                    <input
+                      type="range"
+                      min={0}
+                      max={maxParamStepIndex}
+                      step={1}
+                      value={minParamStep}
+                      onChange={(event) => {
+                        const nextMin = Number(event.target.value)
+                        setMinParamStep(Math.min(nextMin, maxParamStep))
+                      }}
+                      className="param-range-input"
+                      aria-label="Minimum parameter filter"
+                    />
+
+                    <input
+                      type="range"
+                      min={0}
+                      max={maxParamStepIndex}
+                      step={1}
+                      value={maxParamStep}
+                      onChange={(event) => {
+                        const nextMax = Number(event.target.value)
+                        setMaxParamStep(Math.max(nextMax, minParamStep))
+                      }}
+                      className="param-range-input"
+                      aria-label="Maximum parameter filter"
+                    />
+                  </div>
+                </div>
+
+                <span className="shrink-0 text-[11px] text-muted-foreground">
+                  {formatParamBoundLabel(minParamStep, "min")} to {formatParamBoundLabel(maxParamStep, "max")}
+                </span>
+              </div>
+            </div>
+          ) : null}
           <div className="inline-flex w-fit rounded-full border bg-muted/20 p-1">
             <button
               type="button"
@@ -268,9 +514,12 @@ export default function ModelsPage() {
                 </>
               ) : (
                 <>
+                  <SelectItem value="benchmarks">Most Benchmark Coverage</SelectItem>
+                  <SelectItem value="reporting">Most Reporting Context</SelectItem>
+                  <SelectItem value="reproducibility">Best Reproducibility</SelectItem>
+                  <SelectItem value="size">Largest Models</SelectItem>
                   <SelectItem value="date">Latest First</SelectItem>
                   <SelectItem value="name">Name (A-Z)</SelectItem>
-                  <SelectItem value="benchmarks">Most Benchmark Coverage</SelectItem>
                 </>
               )}
             </SelectContent>
@@ -286,9 +535,11 @@ export default function ModelsPage() {
             </p>
             <Button
               onClick={() => {
-                setModelSortBy("date")
+                setModelSortBy("benchmarks")
                 setDeveloperSortBy("coverage")
                 setSearchQuery("")
+                setMinParamStep(0)
+                setMaxParamStep(PARAM_RANGE_VALUES.length - 1)
               }}
             >
               Reset Filters
@@ -309,6 +560,8 @@ export default function ModelsPage() {
                     key={evaluation.id}
                     data={evaluation}
                     onDelete={handleDelete}
+                    selectedForCompare={selectedModelIds.includes(evaluation.id)}
+                    onToggleCompare={toggleModelSelection}
                     delayMs={Math.min(index * 45, 240)}
                   />
                 ))}
@@ -322,7 +575,61 @@ export default function ModelsPage() {
           itemLabel={groupByDeveloper ? "developers" : "models"}
           onPageChange={setPage}
         />
+
+        {!groupByDeveloper && selectedModels.length > 0 ? (
+          <div className="pointer-events-none fixed inset-x-0 bottom-4 z-40 flex justify-center px-4">
+            <div className="pointer-events-auto w-full max-w-5xl rounded-[1.5rem] border border-border/80 bg-background/95 p-4 shadow-2xl backdrop-blur">
+              <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
+                <div className="space-y-2">
+                  <div className="text-[11px] font-semibold uppercase tracking-[0.22em] text-muted-foreground">
+                    Compare Tray
+                  </div>
+                  <div className="flex flex-wrap gap-2">
+                    {selectedModels.map((model) => (
+                      <span
+                        key={model.id}
+                        className="inline-flex items-center gap-2 rounded-full border border-border/70 bg-muted/20 px-3 py-1.5 text-sm"
+                      >
+                        <span className="font-medium">{model.model_name}</span>
+                        <button
+                          type="button"
+                          onClick={() => toggleModelSelection(model.id)}
+                          className="text-muted-foreground transition-colors hover:text-foreground"
+                          aria-label={`Remove ${model.model_name} from compare`}
+                        >
+                          <X className="h-3.5 w-3.5" />
+                        </button>
+                      </span>
+                    ))}
+                  </div>
+                  <div className="text-sm text-muted-foreground">
+                    Select up to {MAX_COMPARE_MODELS} models. The compare view is most useful when you keep the parameter range tight.
+                  </div>
+                </div>
+
+                <div className="flex flex-wrap items-center gap-2">
+                  <Button variant="ghost" onClick={() => setSelectedModelIds([])}>
+                    Clear
+                  </Button>
+                  <Button
+                    onClick={() => setCompareOpen(true)}
+                    disabled={selectedModels.length < 2}
+                  >
+                    <ArrowRightLeft className="h-4 w-4" />
+                    Compare {selectedModels.length} model{selectedModels.length !== 1 ? "s" : ""}
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </div>
+        ) : null}
       </main>
+
+      <ModelCompareDialog
+        models={selectedModels}
+        open={compareOpen}
+        onOpenChange={setCompareOpen}
+      />
     </div>
   )
 }

components/benchmark-evaluation-card.tsx

@@ -6,18 +6,22 @@ import { useRouter } from "next/navigation"
 import {
   Award,
   BookOpenText,
+  ChevronDown,
+  CheckCircle2,
   ExternalLink,
   Eye,
   FlaskConical,
   LibraryBig,
   MoreHorizontal,
-  Scale,
+  ShieldCheck,
+  TriangleAlert,
 } from "lucide-react"
 
 import type { CategoryType } from "@/lib/benchmark-schema"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
 import { Progress } from "@/components/ui/progress"
 
@@ -74,6 +78,8 @@ interface BenchmarkEvaluationCardProps {
   data: BenchmarkEvaluationCardData
   onDelete?: (id: string) => void
   delayMs?: number
+  selectedForCompare?: boolean
+  onToggleCompare?: (id: string) => void
 }
 
 function formatDate(isoString: string) {
@@ -138,7 +144,50 @@ function getReportingSummaryLabel(data: BenchmarkEvaluationCardData) {
   return "Aggregated reporting view"
 }
 
-export function BenchmarkEvaluationCard({ data, onDelete, delayMs = 0 }: BenchmarkEvaluationCardProps) {
+function getReproducibilitySummary(data: BenchmarkEvaluationCardData) {
+  switch (data.reproducibility_status) {
+    case "complete":
+      return {
+        label: "Full config coverage",
+        tone: "secondary" as const,
+        icon: CheckCircle2,
+      }
+    case "partial":
+      return {
+        label: "Partial config coverage",
+        tone: "outline" as const,
+        icon: FlaskConical,
+      }
+    default:
+      return {
+        label: "Config mostly missing",
+        tone: "destructive" as const,
+        icon: TriangleAlert,
+      }
+  }
+}
+
+function getIndependentSummary(data: BenchmarkEvaluationCardData) {
+  const percent = Math.round(data.independent_verification_ratio * 100)
+
+  if (data.independent_verification_ratio >= 0.75) {
+    return `${percent}% independent`
+  }
+
+  if (data.independent_verification_ratio > 0) {
+    return `${percent}% independent`
+  }
+
+  return "Self-reported only"
+}
+
+export function BenchmarkEvaluationCard({
+  data,
+  onDelete,
+  delayMs = 0,
+  selectedForCompare = false,
+  onToggleCompare,
+}: BenchmarkEvaluationCardProps) {
   const router = useRouter()
   const { mode } = useAudienceMode()
   const isResearchView = mode === "research"
@@ -146,6 +195,8 @@ export function BenchmarkEvaluationCard({ data, onDelete, delayMs = 0 }: Benchma
   const library = data.eval_libraries[0]
   const paramsBillions = formatParamsBillions(data.params_billions)
   const reportingSummaryLabel = getReportingSummaryLabel(data)
+  const reproducibility = getReproducibilitySummary(data)
+  const independentSummary = getIndependentSummary(data)
 
   return (
     <Card
@@ -179,46 +230,63 @@ export function BenchmarkEvaluationCard({ data, onDelete, delayMs = 0 }: Benchma
                 <Badge variant="secondary">{data.variant_count} versions</Badge>
               )}
               {paramsBillions && <Badge variant="secondary">{paramsBillions} parameters</Badge>}
-              {data.architecture && <Badge variant="outline">{data.architecture}</Badge>}
-              {data.input_modalities && data.input_modalities.length > 1 && (
-                <Badge variant="secondary">Multimodal</Badge>
-              )}
-              {data.evaluator_count > 0 ? (
-                <Badge variant="secondary">{reportingSummaryLabel}</Badge>
-              ) : null}
+              <Badge variant={reproducibility.tone}>
+                <reproducibility.icon className="h-3.5 w-3.5" />
+                {reproducibility.label}
+              </Badge>
+              <Badge variant={data.independent_verification_ratio > 0 ? "secondary" : "outline"}>
+                <ShieldCheck className="h-3.5 w-3.5" />
+                {independentSummary}
+              </Badge>
             </div>
           </div>
 
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
+          <div className="flex items-center gap-2">
+            {onToggleCompare ? (
               <Button
-                variant="ghost"
-                size="icon"
-                className="motion-academic-button opacity-0 transition-opacity group-hover:opacity-100"
-                onClick={(event) => event.stopPropagation()}
+                variant={selectedForCompare ? "default" : "outline"}
+                size="sm"
+                className="shrink-0"
+                onClick={(event) => {
+                  event.stopPropagation()
+                  onToggleCompare(data.id)
+                }}
               >
-                <MoreHorizontal className="h-4 w-4" />
+                {selectedForCompare ? "Selected" : "Compare"}
               </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuItem onClick={() => router.push(`/models/${data.route_id}`)}>
-                <Eye className="mr-2 h-4 w-4" />
-                View Details
-              </DropdownMenuItem>
-              {data.source_urls.length > 0 && (
-                <DropdownMenuItem onClick={() => window.open(data.source_urls[0], "_blank")}>
-                  <ExternalLink className="mr-2 h-4 w-4" />
-                  View Source
-                </DropdownMenuItem>
-              )}
-              {onDelete && (
-                <DropdownMenuItem onClick={() => onDelete(data.id)} className="text-destructive">
-                  <Award className="mr-2 h-4 w-4" />
-                  Remove
+            ) : null}
+
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="motion-academic-button opacity-0 transition-opacity group-hover:opacity-100"
+                  onClick={(event) => event.stopPropagation()}
+                >
+                  <MoreHorizontal className="h-4 w-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem onClick={() => router.push(`/models/${data.route_id}`)}>
+                  <Eye className="mr-2 h-4 w-4" />
+                  View Details
                 </DropdownMenuItem>
-              )}
-            </DropdownMenuContent>
-          </DropdownMenu>
+                {data.source_urls.length > 0 && (
+                  <DropdownMenuItem onClick={() => window.open(data.source_urls[0], "_blank")}>
+                    <ExternalLink className="mr-2 h-4 w-4" />
+                    View Source
+                  </DropdownMenuItem>
+                )}
+                {onDelete && (
+                  <DropdownMenuItem onClick={() => onDelete(data.id)} className="text-destructive">
+                    <Award className="mr-2 h-4 w-4" />
+                    Remove
+                  </DropdownMenuItem>
+                )}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
         </div>
       </CardHeader>
 
@@ -241,105 +309,103 @@ export function BenchmarkEvaluationCard({ data, onDelete, delayMs = 0 }: Benchma
           />
         </div>
 
-        {isResearchView ? (
-          <div className="grid gap-4 xl:grid-cols-[minmax(240px,0.92fr)_minmax(0,1.08fr)]">
-            <section className="space-y-3">
-              <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">Method + Provenance</div>
-              <div className="rounded-2xl border border-border/70 bg-muted/10 p-3 shadow-[inset_0_1px_0_rgba(255,255,255,0.35)] dark:shadow-none">
-                <div className="space-y-0 text-sm">
-                  <KeyValueRow label="Reporting sources" value={reportingSummaryLabel} />
-                  {library && (
-                    <KeyValueRow label="Library" value={`${library.name}${library.version ? ` ${library.version}` : ""}`} />
-                  )}
-                  {data.latest_source_name && (
-                    <KeyValueRow label="Latest report" value={data.latest_source_name} />
-                  )}
-                  <KeyValueRow label="Updated" value={formatDate(data.latest_timestamp)} />
-                  {data.source_types.length > 0 && (
-                    <KeyValueRow label="Source types" value={data.source_types.map(s => s.replace(/_/g, " ")).join(", ")} />
-                  )}
-                  {data.missing_generation_config_count > 0 && (
-                    <KeyValueRow label="Missing config" value={`${data.missing_generation_config_count} result${data.missing_generation_config_count !== 1 ? "s" : ""}`} />
-                  )}
-                  {library?.fork && (
-                    <div className="flex items-start gap-2 rounded-xl bg-amber-50/80 px-3 py-2 text-xs text-amber-900 dark:bg-amber-950/20 dark:text-amber-200">
-                      <LibraryBig className="mt-0.5 h-3.5 w-3.5 shrink-0 text-amber-600 dark:text-amber-300" />
-                      <span>Non-standard eval library fork</span>
-                    </div>
-                  )}
-                </div>
-              </div>
-            </section>
+        <div className="rounded-2xl border border-border/70 bg-muted/10 px-4 py-3">
+          <div className="flex flex-wrap items-center gap-2">
+            <Badge variant="outline">{reportingSummaryLabel}</Badge>
+            <Badge variant={reproducibility.tone}>
+              <reproducibility.icon className="h-3.5 w-3.5" />
+              {reproducibility.label}
+            </Badge>
+            <Badge variant={data.independent_verification_ratio > 0 ? "secondary" : "outline"}>
+              <ShieldCheck className="h-3.5 w-3.5" />
+              {independentSummary}
+            </Badge>
+          </div>
+          <div className="mt-2 text-sm text-muted-foreground">
+            {isResearchView
+              ? "Most useful signals first: benchmark coverage, reproducibility, and benchmark-level performance. Open the details panel only when you need methodology or provenance."
+              : "Most useful signals first: benchmark coverage, reporting posture, and what was actually tested. Open the details panel if you need source or methodology context."}
+          </div>
+        </div>
 
-            {highlights.length > 0 && (
-              <section className="space-y-3">
-                <div className="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
-                  <FlaskConical className="h-3.5 w-3.5" />
-                  Benchmark Signals
-                </div>
-                <div className="overflow-hidden rounded-2xl border border-border/70">
-                  {highlights.map((item, index) => (
-                    <SignalRow
-                      key={item.benchmark}
-                      rank={index + 1}
-                      label={item.benchmark}
-                      rawLabel={item.metric !== item.benchmark ? item.metric : undefined}
-                      scoreLabel={formatHighlightScore(item.score, item.unit)}
-                      scorePercent={scoreToPercent(item.score, item.unit)}
-                      isLast={index === highlights.length - 1}
-                    />
-                  ))}
+        {highlights.length > 0 ? (
+          <section className="space-y-3">
+            <div className="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
+              {isResearchView ? (
+                <FlaskConical className="h-3.5 w-3.5" />
+              ) : (
+                <BookOpenText className="h-3.5 w-3.5" />
+              )}
+              {isResearchView ? "Most Relevant Benchmarks" : "What Was Tested"}
+            </div>
+            <div className="overflow-hidden rounded-2xl border border-border/70">
+              {highlights.map((item, index) => (
+                <SignalRow
+                  key={item.benchmark}
+                  rank={index + 1}
+                  label={isResearchView ? item.benchmark : getPolicyBenchmarkLabel(item.benchmark)}
+                  rawLabel={
+                    isResearchView
+                      ? item.metric !== item.benchmark
+                        ? item.metric
+                        : undefined
+                      : item.benchmark
+                  }
+                  scoreLabel={formatHighlightScore(item.score, item.unit)}
+                  scorePercent={scoreToPercent(item.score, item.unit)}
+                  isLast={index === highlights.length - 1}
+                />
+              ))}
+            </div>
+          </section>
+        ) : null}
+
+        <Collapsible className="rounded-2xl border border-border/70 bg-background">
+          <CollapsibleTrigger asChild>
+            <button
+              type="button"
+              onClick={(event) => event.stopPropagation()}
+              className="flex w-full items-center justify-between px-4 py-3 text-left"
+            >
+              <div>
+                <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
+                  Dive Deeper
                 </div>
-              </section>
-            )}
-          </div>
-        ) : (
-          <div className="grid gap-4 md:grid-cols-[0.92fr_1.08fr]">
-            <section className="space-y-3">
-              <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">Reporting Context</div>
-              <div className="rounded-2xl border border-amber-200/70 bg-amber-50/70 p-3 dark:border-amber-900/40 dark:bg-amber-950/15">
-                <div className="flex items-start gap-2">
-                  <Scale className="mt-0.5 h-4 w-4 shrink-0 text-amber-600" />
-                  <div className="space-y-2">
-                    <div className="text-sm font-semibold">Reporting summary</div>
-                    <div className="text-sm text-muted-foreground">
-                      This model has reported results from {reportingSummaryLabel.toLowerCase()} across {data.benchmarks_count} benchmark{data.benchmarks_count !== 1 ? "s" : ""}. Benchmark detail pages break out reporting provenance benchmark by benchmark.
-                    </div>
-                    <div className="flex flex-wrap gap-2 pt-1">
-                      {data.evaluator_names.slice(0, 2).map((evaluator) => (
-                        <Badge key={evaluator} variant="secondary" className="font-normal">
-                          {evaluator}
-                        </Badge>
-                      ))}
-                    </div>
-                  </div>
+                <div className="mt-1 text-sm font-semibold text-foreground">
+                  Show reporting and methodology details
                 </div>
               </div>
-            </section>
-
-            {highlights.length > 0 && (
-              <section className="space-y-3">
-                <div className="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
-                  <BookOpenText className="h-3.5 w-3.5" />
-                  What Was Tested
-                </div>
-                <div className="overflow-hidden rounded-2xl border border-border/70">
-                  {highlights.map((item, index) => (
-                    <SignalRow
-                      key={item.benchmark}
-                      rank={index + 1}
-                      label={getPolicyBenchmarkLabel(item.benchmark)}
-                      rawLabel={item.benchmark}
-                      scoreLabel={formatHighlightScore(item.score, item.unit)}
-                      scorePercent={scoreToPercent(item.score, item.unit)}
-                      isLast={index === highlights.length - 1}
-                    />
-                  ))}
+              <ChevronDown className="h-4 w-4 text-muted-foreground" />
+            </button>
+          </CollapsibleTrigger>
+          <CollapsibleContent onClick={(event) => event.stopPropagation()} className="border-t border-border/60 px-4 py-4">
+            <div className="space-y-0 text-sm">
+              <KeyValueRow label="Reporting sources" value={reportingSummaryLabel} />
+              {library && (
+                <KeyValueRow label="Library" value={`${library.name}${library.version ? ` ${library.version}` : ""}`} />
+              )}
+              {data.latest_source_name && (
+                <KeyValueRow label="Latest report" value={data.latest_source_name} />
+              )}
+              <KeyValueRow label="Updated" value={formatDate(data.latest_timestamp)} />
+              <KeyValueRow label="Reproducibility" value={reproducibility.label} />
+              <KeyValueRow label="Independence" value={independentSummary} />
+              {data.source_types.length > 0 && (
+                <KeyValueRow label="Source types" value={data.source_types.map((s) => s.replace(/_/g, " ")).join(", ")} />
+              )}
+              {data.architecture && <KeyValueRow label="Architecture" value={data.architecture} />}
+              {data.missing_generation_config_count > 0 && (
+                <KeyValueRow label="Missing config" value={`${data.missing_generation_config_count} result${data.missing_generation_config_count !== 1 ? "s" : ""}`} />
+              )}
+              {library?.fork && (
+                <div className="mt-3 flex items-start gap-2 rounded-xl bg-amber-50/80 px-3 py-2 text-xs text-amber-900 dark:bg-amber-950/20 dark:text-amber-200">
+                  <LibraryBig className="mt-0.5 h-3.5 w-3.5 shrink-0 text-amber-600 dark:text-amber-300" />
+                  <span>Non-standard eval library fork</span>
                 </div>
-              </section>
-            )}
-          </div>
-        )}
+              )}
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
       </CardContent>
     </Card>
   )

components/model-compare-dialog.tsx

@@ -0,0 +1,459 @@
+"use client"
+
+import { Fragment, useMemo } from "react"
+import Link from "next/link"
+import {
+  ChevronDown,
+  ExternalLink,
+  FlaskConical,
+  ShieldCheck,
+  TriangleAlert,
+} from "lucide-react"
+import type { BenchmarkEvaluationCardData } from "@/components/benchmark-evaluation-card"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+
+function formatDate(isoString: string) {
+  const numeric = Number(isoString)
+  const parsedDate =
+    !Number.isNaN(numeric) && !isoString.includes("-")
+      ? new Date(numeric * 1000)
+      : new Date(isoString)
+
+  try {
+    return parsedDate.toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+    })
+  } catch {
+    return isoString
+  }
+}
+
+function parseParamsBillionsFromModelName(modelName: string | null | undefined) {
+  if (!modelName) return null
+
+  // Parse explicit size tokens like 7B, 40B, or 560M from model names.
+  const sizeTokens = Array.from(modelName.matchAll(/\b(\d+(?:\.\d+)?)\s*([bm])\b/gi))
+  if (sizeTokens.length === 0) return null
+
+  const lastToken = sizeTokens[sizeTokens.length - 1]
+  const numericValue = Number(lastToken[1])
+  if (!Number.isFinite(numericValue)) return null
+
+  const unit = lastToken[2].toLowerCase()
+  if (unit === "b") return numericValue
+  if (unit === "m") return numericValue / 1000
+
+  return null
+}
+
+function formatParamsBillions(value: number | null | undefined, modelName?: string) {
+  const resolvedValue =
+    value == null || Number.isNaN(value) ? parseParamsBillionsFromModelName(modelName) : value
+
+  if (resolvedValue == null || Number.isNaN(resolvedValue)) return "Not reported"
+  if (resolvedValue >= 100) return `${Math.round(resolvedValue)}B`
+  return `${resolvedValue.toFixed(1)}B`
+}
+
+function formatBenchmarkScore(score: number, unit?: string) {
+  if (unit === "accuracy" || unit === "pass@1" || (!unit && score >= 0 && score <= 1)) {
+    return `${(score * 100).toFixed(1)}`
+  }
+
+  if (unit === "points") {
+    return score.toFixed(1)
+  }
+
+  return score.toFixed(2)
+}
+
+function getReproducibilityLabel(status: BenchmarkEvaluationCardData["reproducibility_status"]) {
+  switch (status) {
+    case "complete":
+      return "Full config coverage"
+    case "partial":
+      return "Partial config coverage"
+    default:
+      return "Config mostly missing"
+  }
+}
+
+function getIndependentLabel(model: BenchmarkEvaluationCardData) {
+  if (model.independent_verification_ratio >= 0.75) return "Mostly third-party"
+  if (model.independent_verification_ratio > 0) return "Mixed reporting"
+  return "Self-reported only"
+}
+
+function getIndependentValue(model: BenchmarkEvaluationCardData) {
+  return `${Math.round(model.independent_verification_ratio * 100)}% independent`
+}
+
+function getBenchmarkSection(name: string) {
+  const value = name.toLowerCase()
+
+  if (
+    value.includes("tau") ||
+    value.includes("swe-bench") ||
+    value.includes("browsecomp") ||
+    value.includes("agent")
+  ) {
+    return "Agentic"
+  }
+
+  if (
+    value.includes("aime") ||
+    value.includes("gpqa") ||
+    value.includes("hmmt") ||
+    value.includes("beyond aime") ||
+    value.includes("reason")
+  ) {
+    return "Reasoning"
+  }
+
+  if (
+    value.includes("math") ||
+    value.includes("mmlu") ||
+    value.includes("ifeval") ||
+    value.includes("arena") ||
+    value.includes("live code") ||
+    value.includes("humaneval") ||
+    value.includes("mbpp") ||
+    value.includes("code")
+  ) {
+    return "General"
+  }
+
+  return "Other"
+}
+
+const SECTION_ORDER = ["General", "Reasoning", "Agentic", "Other"]
+
+const CONTEXT_ROWS = [
+  { key: "developer", label: "Developer" },
+  { key: "params", label: "Parameter range" },
+  { key: "benchmarks", label: "Benchmark coverage" },
+  { key: "reporting", label: "Reporting orgs" },
+  { key: "independence", label: "Reporting posture" },
+  { key: "reproducibility", label: "Reproducibility" },
+  { key: "latest", label: "Latest report" },
+  { key: "updated", label: "Updated" },
+] as const
+
+interface ModelCompareDialogProps {
+  models: BenchmarkEvaluationCardData[]
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+export function ModelCompareDialog({
+  models,
+  open,
+  onOpenChange,
+}: ModelCompareDialogProps) {
+  const benchmarkRows = useMemo(() => {
+    const rows = new Map<
+      string,
+      {
+        benchmark: string
+        metric: string
+        section: string
+        values: Record<string, { score: number; unit?: string }>
+        order: number
+      }
+    >()
+
+    let order = 0
+
+    for (const model of models) {
+      for (const score of model.top_scores) {
+        const existing = rows.get(score.benchmark)
+        if (!existing) {
+          rows.set(score.benchmark, {
+            benchmark: score.benchmark,
+            metric: score.metric,
+            section: getBenchmarkSection(score.benchmark),
+            values: {
+              [model.id]: {
+                score: score.score,
+                unit: score.unit,
+              },
+            },
+            order,
+          })
+          order += 1
+          continue
+        }
+
+        existing.values[model.id] = {
+          score: score.score,
+          unit: score.unit,
+        }
+      }
+    }
+
+    return Array.from(rows.values()).sort((a, b) => {
+      const sectionDiff = SECTION_ORDER.indexOf(a.section) - SECTION_ORDER.indexOf(b.section)
+      if (sectionDiff !== 0) {
+        return sectionDiff
+      }
+
+      return a.order - b.order
+    })
+  }, [models])
+
+  const benchmarkSections = useMemo(() => {
+    return SECTION_ORDER.map((section) => ({
+      section,
+      rows: benchmarkRows.filter((row) => row.section === section),
+    })).filter((group) => group.rows.length > 0)
+  }, [benchmarkRows])
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="h-[85dvh] max-h-[85dvh] max-w-[min(96vw,1220px)] overflow-hidden p-0 sm:max-w-[min(96vw,1220px)]">
+        <div className="flex h-full min-h-0 flex-col">
+          <DialogHeader className="border-b border-border/70 px-6 py-5">
+            <div className="text-[11px] font-semibold uppercase tracking-[0.22em] text-muted-foreground">
+              Side-By-Side Comparison
+            </div>
+            <DialogTitle>Compare Selected Models</DialogTitle>
+            <DialogDescription>
+              Start with the benchmark table. Use the context table only when you need reporting, reproducibility, or provenance detail.
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="min-h-0 flex-1 overflow-auto px-6 py-6">
+            <div className="min-w-[920px] space-y-6">
+              <div className="rounded-[1.5rem] border border-border/70 bg-background">
+                <div className="border-b border-border/60 px-5 py-4">
+                  <div className="text-[11px] font-semibold uppercase tracking-[0.22em] text-muted-foreground">
+                    Benchmark Comparison
+                  </div>
+                  <div className="mt-2 text-sm text-muted-foreground">
+                    Rows are drawn from the most relevant surfaced benchmarks across the selected models, closer to how release posts present comparison tables.
+                  </div>
+                </div>
+
+                <div className="overflow-auto">
+                  <Table>
+                    <TableHeader>
+                      <TableRow>
+                        <TableHead className="w-[260px]">Benchmark</TableHead>
+                        {models.map((model) => (
+                          <TableHead key={model.id} className="min-w-[170px] align-top">
+                            <div className="space-y-2">
+                              <div>
+                                <div className="font-semibold text-foreground">{model.model_name}</div>
+                                <div className="text-xs font-medium uppercase tracking-[0.14em] text-muted-foreground">
+                                  {model.developer || "Unknown developer"}
+                                </div>
+                              </div>
+                              <div className="flex flex-wrap gap-2">
+                                <Badge variant="outline">
+                                  {formatParamsBillions(model.params_billions, model.model_name)}
+                                </Badge>
+                                <Button asChild variant="ghost" size="sm">
+                                  <Link href={`/models/${model.route_id}`}>View</Link>
+                                </Button>
+                              </div>
+                            </div>
+                          </TableHead>
+                        ))}
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {benchmarkSections.map((group) => (
+                        <Fragment key={group.section}>
+                          <TableRow key={`${group.section}-heading`}>
+                            <TableCell
+                              colSpan={models.length + 1}
+                              className="bg-muted/25 text-[11px] font-semibold uppercase tracking-[0.22em] text-muted-foreground"
+                            >
+                              {group.section}
+                            </TableCell>
+                          </TableRow>
+                          {group.rows.map((row) => {
+                            const rowValues = Object.values(row.values).map((value) => value.score)
+                            const maxScore = rowValues.length > 0 ? Math.max(...rowValues) : null
+
+                            return (
+                              <TableRow key={row.benchmark}>
+                                <TableCell className="whitespace-normal">
+                                  <div className="font-medium">{row.benchmark}</div>
+                                  <div className="mt-1 text-xs text-muted-foreground">{row.metric}</div>
+                                </TableCell>
+                                {models.map((model) => {
+                                  const value = row.values[model.id]
+                                  const isBest = value && maxScore != null && value.score === maxScore
+
+                                  return (
+                                    <TableCell
+                                      key={`${row.benchmark}-${model.id}`}
+                                      className={isBest ? "bg-emerald-50/70 dark:bg-emerald-950/20" : ""}
+                                    >
+                                      {value ? (
+                                        <div className="text-base font-semibold tabular-nums">
+                                          {formatBenchmarkScore(value.score, value.unit)}
+                                        </div>
+                                      ) : (
+                                        <div className="text-muted-foreground">--</div>
+                                      )}
+                                    </TableCell>
+                                  )
+                                })}
+                              </TableRow>
+                            )
+                          })}
+                        </Fragment>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </div>
+              </div>
+
+              <Collapsible className="rounded-[1.5rem] border border-border/70 bg-muted/10">
+                <CollapsibleTrigger asChild>
+                  <button
+                    type="button"
+                    className="flex w-full items-center justify-between px-5 py-4 text-left"
+                  >
+                    <div>
+                      <div className="text-[11px] font-semibold uppercase tracking-[0.22em] text-muted-foreground">
+                        Dive Deeper
+                      </div>
+                      <div className="mt-1 font-semibold text-foreground">
+                        Show reporting and reproducibility context
+                      </div>
+                    </div>
+                    <ChevronDown className="h-4 w-4 text-muted-foreground" />
+                  </button>
+                </CollapsibleTrigger>
+                <CollapsibleContent className="border-t border-border/60 px-5 py-5">
+                  <div className="overflow-auto rounded-[1.25rem] border border-border/70 bg-background">
+                    <Table>
+                      <TableHeader>
+                        <TableRow>
+                          <TableHead className="w-[220px]">Signal</TableHead>
+                          {models.map((model) => (
+                            <TableHead key={`${model.id}-context`} className="min-w-[220px]">
+                              <div className="font-semibold">{model.model_name}</div>
+                            </TableHead>
+                          ))}
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {CONTEXT_ROWS.map((row) => (
+                          <TableRow key={row.key}>
+                            <TableCell className="font-medium text-muted-foreground">{row.label}</TableCell>
+                            {models.map((model) => (
+                              <TableCell key={`${model.id}-${row.key}`} className="align-top whitespace-normal">
+                                {row.key === "developer" ? model.developer || "Unknown developer" : null}
+                                {row.key === "params"
+                                  ? formatParamsBillions(model.params_billions, model.model_name)
+                                  : null}
+                                {row.key === "benchmarks" ? (
+                                  <div className="space-y-1">
+                                    <div className="font-medium">{model.benchmarks_count} covered benchmarks</div>
+                                    <div className="text-sm text-muted-foreground">
+                                      {model.evaluations_count} reported result{model.evaluations_count !== 1 ? "s" : ""}
+                                    </div>
+                                  </div>
+                                ) : null}
+                                {row.key === "reporting" ? (
+                                  <div className="space-y-1">
+                                    <div className="font-medium">
+                                      {model.evaluator_count} reporting org{model.evaluator_count !== 1 ? "s" : ""}
+                                    </div>
+                                    <div className="text-sm text-muted-foreground">
+                                      {model.evaluator_names.slice(0, 3).join(", ") || "Not named"}
+                                    </div>
+                                  </div>
+                                ) : null}
+                                {row.key === "independence" ? (
+                                  <div className="space-y-2">
+                                    <Badge
+                                      variant={model.independent_verification_ratio > 0 ? "secondary" : "outline"}
+                                      className="font-medium"
+                                    >
+                                      <ShieldCheck className="h-3.5 w-3.5" />
+                                      {getIndependentLabel(model)}
+                                    </Badge>
+                                    <div className="text-sm text-muted-foreground">
+                                      {getIndependentValue(model)}
+                                    </div>
+                                  </div>
+                                ) : null}
+                                {row.key === "reproducibility" ? (
+                                  <div className="space-y-2">
+                                    <Badge
+                                      variant={
+                                        model.reproducibility_status === "complete"
+                                          ? "secondary"
+                                          : model.reproducibility_status === "partial"
+                                            ? "outline"
+                                            : "destructive"
+                                      }
+                                      className="font-medium"
+                                    >
+                                      {model.reproducibility_status === "missing" ? (
+                                        <TriangleAlert className="h-3.5 w-3.5" />
+                                      ) : (
+                                        <FlaskConical className="h-3.5 w-3.5" />
+                                      )}
+                                      {getReproducibilityLabel(model.reproducibility_status)}
+                                    </Badge>
+                                    <div className="text-sm text-muted-foreground">
+                                      {model.missing_generation_config_count > 0
+                                        ? `${model.missing_generation_config_count} result${model.missing_generation_config_count !== 1 ? "s" : ""} without generation config`
+                                        : "No missing generation config in current corpus"}
+                                    </div>
+                                  </div>
+                                ) : null}
+                                {row.key === "latest" ? (
+                                  <div className="flex items-center gap-2">
+                                    <span>{model.latest_source_name || "No named source"}</span>
+                                    {model.source_urls[0] ? (
+                                      <a
+                                        href={model.source_urls[0]}
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                        className="text-muted-foreground hover:text-foreground"
+                                      >
+                                        <ExternalLink className="h-3.5 w-3.5" />
+                                      </a>
+                                    ) : null}
+                                  </div>
+                                ) : null}
+                                {row.key === "updated" ? formatDate(model.latest_timestamp) : null}
+                              </TableCell>
+                            ))}
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  </div>
+                </CollapsibleContent>
+              </Collapsible>
+            </div>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}

lib/eval-processing.ts

@@ -29,6 +29,15 @@ const GENERIC_EVALUATION_NAMES = new Set([
   "pass@1",
 ])
 
+const BENCHMARK_PRIORITY_RULES: Array<{ pattern: RegExp; priority: number }> = [
+  { pattern: /\b(swe-bench|terminal-bench|tau-bench|agent|browsecomp)\b/, priority: 10 },
+  { pattern: /\b(gpqa|mmlu-pro|mmlu|bbh|ifeval|math|aime|gsm8k|minerva)\b/, priority: 9 },
+  { pattern: /\b(humaneval|livecodebench|mbpp|codecontests|apps)\b/, priority: 8 },
+  { pattern: /\b(mmmu|mmmu-pro|seed-bench|vision|vqa|multimodal)\b/, priority: 7 },
+  { pattern: /\b(mt-bench|arena-hard|alpacaeval|reward-bench|truthfulqa)\b/, priority: 6 },
+  { pattern: /\b(fairness|bias|safety|toxic|harmful|robust|privacy)\b/, priority: 5 },
+]
+
 function slugify(value: string): string {
   return value.toLowerCase().replace(/[^a-z0-9]+/g, "_").replace(/^_|_$/g, "")
 }
@@ -80,6 +89,18 @@ function getEvaluationSummaryId(
   return slugify(`${benchmarkKey}__${result.evaluation_name}`)
 }
 
+function getBenchmarkPriority(value: string): number {
+  const normalized = value.toLowerCase()
+
+  for (const rule of BENCHMARK_PRIORITY_RULES) {
+    if (rule.pattern.test(normalized)) {
+      return rule.priority
+    }
+  }
+
+  return 0
+}
+
 // ── Eval-centric (per-benchmark) types ────────────────────────────────────────
 
 export interface ModelResultForBenchmark {
@@ -339,6 +360,7 @@ export function createEvaluationCard(
   const benchmarksSet = new Set<string>()
   const allScores: Array<{
     benchmark: string
+    benchmarkKey: string
     score: number
     metric: string
     unit?: string
@@ -426,6 +448,7 @@ export function createEvaluationCard(
         
         allScores.push({
           benchmark: getEvaluationDisplayName(eval_, result),
+          benchmarkKey: getBenchmarkName(eval_, result),
           score: result.score_details.score,
           metric: result.metric_config.evaluation_description || result.evaluation_name,
           unit: result.metric_config.unit
@@ -435,7 +458,10 @@ export function createEvaluationCard(
   }
   
   // Deduplicate by benchmark name, keeping highest score for each
-  const scoresByBenchmark = new Map<string, { benchmark: string; score: number; metric: string; unit?: string }>()
+  const scoresByBenchmark = new Map<
+    string,
+    { benchmark: string; benchmarkKey: string; score: number; metric: string; unit?: string }
+  >()
   for (const scoreData of allScores) {
     const existing = scoresByBenchmark.get(scoreData.benchmark)
     if (!existing || scoreData.score > existing.score) {
@@ -492,8 +518,25 @@ export function createEvaluationCard(
 
   // Get top 5 unique benchmarks by score
   const topScores = Array.from(scoresByBenchmark.values())
-    .sort((a, b) => b.score - a.score)
+    .sort((a, b) => {
+      const priorityDiff = getBenchmarkPriority(b.benchmarkKey) - getBenchmarkPriority(a.benchmarkKey)
+      if (priorityDiff !== 0) {
+        return priorityDiff
+      }
+
+      if (b.score !== a.score) {
+        return b.score - a.score
+      }
+
+      return a.benchmark.localeCompare(b.benchmark)
+    })
     .slice(0, 5)
+    .map(({ benchmark, score, metric, unit }) => ({
+      benchmark,
+      score,
+      metric,
+      unit,
+    }))
 
   const paramsBillionsRaw = summary.model_info.additional_details?.params_billions
   const paramsBillions =