view-data: paranoid CAST every output column to a primitive type

The previous patch left simple scalars (VARCHAR / BOOLEAN / DOUBLE /
INTEGER) untouched, on the assumption the binding handles those
natively. The deployed log still surfaces "Invalid Error: don't know
what type:" on the new explicit-column SELECT, which means whatever
the binding is choking on is reachable even without r.* expansion
and even with every nested type wrapped. The only thing left to vary
is whether the binding ever sees the parquet's native logical types
at all.

Force every output column through `CAST(... AS <primitive>)`. The
binding now only ever sees VARCHAR / BOOLEAN / INTEGER / DOUBLE in
the result schema regardless of what type the underlying parquet
column declared. Local prod build keeps returning 200 on
/api/model-summary with model_info correctly nested.

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

app/developers/[...id]/page (1).tsx

@@ -0,0 +1,244 @@
+"use client"
+
+import { useCallback, useEffect, useMemo, useState } from "react"
+import { useParams, useRouter } from "next/navigation"
+import { ArrowLeft, ArrowUpDown, Search, Tag } from "lucide-react"
+
+import { BenchmarkEvaluationCard, type BenchmarkEvaluationCardData } from "@/components/benchmark-evaluation-card"
+import { ListPagination } from "@/components/list-pagination"
+import { Navigation } from "@/components/navigation"
+import { PageHeader } from "@/components/page-header"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import type { BenchmarkCard } from "@/lib/benchmark-schema"
+import { lookupBenchmarkCard } from "@/lib/benchmark-metadata-utils"
+import { fetchDeveloperSummary, fetchBenchmarkMetadata } from "@/lib/dashboard-data-client"
+
+const PAGE_SIZE = 40
+
+export default function DeveloperDetailPage() {
+  const params = useParams()
+  const router = useRouter()
+  const [developer, setDeveloper] = useState<string>("")
+  const [models, setModels] = useState<BenchmarkEvaluationCardData[]>([])
+  const [benchmarkCards, setBenchmarkCards] = useState<Record<string, BenchmarkCard>>({})
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [searchQuery, setSearchQuery] = useState("")
+  const [sortBy, setSortBy] = useState<"date" | "name" | "benchmarks">("date")
+  const [page, setPage] = useState(1)
+
+  const routeId = params.id as string
+
+  const handleBack = useCallback(() => {
+    router.push("/developers")
+  }, [router])
+
+  useEffect(() => {
+    Promise.all([
+      fetchDeveloperSummary(routeId),
+      fetchBenchmarkMetadata(),
+    ])
+      .then(([summary, cards]) => {
+        setDeveloper(summary.developer)
+        setModels(summary.models)
+        setBenchmarkCards(cards)
+      })
+      .catch((err) => {
+        console.error(err)
+        setError("Developer not found")
+      })
+      .finally(() => setLoading(false))
+  }, [routeId])
+
+  // Collect all unique domains from benchmarks this developer's models are evaluated on
+  const domainCoverage = useMemo(() => {
+    const domainMap = new Map<string, Set<string>>() // domain → set of benchmark names
+    for (const model of models) {
+      for (const { benchmark } of model.top_scores) {
+        const card = lookupBenchmarkCard(benchmarkCards, benchmark)
+        for (const domain of card?.benchmark_details?.domains ?? []) {
+          const existing = domainMap.get(domain) ?? new Set()
+          existing.add(benchmark)
+          domainMap.set(domain, existing)
+        }
+      }
+    }
+    return Array.from(domainMap.entries())
+      .map(([domain, benchmarks]) => ({ domain, count: benchmarks.size }))
+      .sort((a, b) => b.count - a.count)
+  }, [models, benchmarkCards])
+
+  const filteredModels = useMemo(() => {
+    const query = searchQuery.trim().toLowerCase()
+    const filtered = query
+      ? models.filter((model) => {
+          const haystacks = [
+            model.model_name,
+            model.canonical_model_name,
+            model.developer,
+            ...model.top_scores.map((score) => score.benchmark),
+          ]
+
+          return haystacks.some((value) => value?.toLowerCase().includes(query))
+        })
+      : [...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
+    }
+
+    return filtered
+  }, [models, searchQuery, sortBy])
+
+  useEffect(() => {
+    setPage(1)
+  }, [searchQuery, sortBy])
+
+  const pagedModels = useMemo(
+    () => filteredModels.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE),
+    [filteredModels, page]
+  )
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-background">
+        <Navigation />
+        <main className="container mx-auto px-4 py-8">
+          <div className="flex h-96 items-center justify-center">
+            <div className="text-lg text-muted-foreground">Loading developer...</div>
+          </div>
+        </main>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="min-h-screen bg-background">
+        <Navigation />
+        <main className="container mx-auto px-4 py-8">
+          <div className="flex flex-col items-center justify-center h-96 space-y-4">
+            <div className="text-lg text-muted-foreground">{error}</div>
+            <Button onClick={handleBack}>
+              <ArrowLeft className="mr-2 h-4 w-4" />
+              Back to Developers
+            </Button>
+          </div>
+        </main>
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen bg-background">
+      <Navigation />
+      <main className="container mx-auto px-4 py-8">
+        <PageHeader
+          eyebrow="Developer"
+          title={developer}
+          description={`Evaluation coverage across ${models.length} model${models.length !== 1 ? "s" : ""} from this developer, including benchmark domain coverage where metadata is available.`}
+          metaItems={[
+            { label: "Models", value: models.length.toString() },
+            {
+              label: "Reported Results",
+              value: models.reduce((sum, model) => sum + model.evaluations_count, 0).toString(),
+            },
+            ...(domainCoverage.length > 0
+              ? [{ label: "Domains covered", value: domainCoverage.length.toString() }]
+              : []),
+          ]}
+        >
+          <Button variant="outline" onClick={handleBack}>
+            <ArrowLeft className="mr-2 h-4 w-4" />
+            Back
+          </Button>
+        </PageHeader>
+
+        {/* Domain coverage strip */}
+        {domainCoverage.length > 0 && (
+          <div className="mb-4 mt-6 rounded-[1.5rem] border border-border/70 bg-muted/10 p-4">
+            <div className="mb-2 flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.2em] text-muted-foreground">
+              <Tag className="h-3.5 w-3.5" />
+              Benchmark domain coverage
+            </div>
+            <div className="flex flex-wrap gap-2">
+              {domainCoverage.map(({ domain, count }) => (
+                <span
+                  key={domain}
+                  className="inline-flex items-center gap-1.5 rounded-full border border-border/60 bg-background px-3 py-1 text-xs font-medium capitalize"
+                >
+                  {domain}
+                  <span className="rounded-full bg-muted px-1.5 py-0.5 text-[10px] font-semibold text-muted-foreground">
+                    {count}
+                  </span>
+                </span>
+              ))}
+            </div>
+          </div>
+        )}
+
+        <div className="mb-8 mt-8 flex flex-col gap-4 border-b border-border/50 pb-6 sm:flex-row">
+          <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" />
+            <Input
+              value={searchQuery}
+              onChange={(event) => setSearchQuery(event.target.value)}
+              placeholder="Search models or benchmarks"
+              className="pl-9"
+            />
+          </div>
+          <Select value={sortBy} onValueChange={(value) => setSortBy(value as typeof sortBy)}>
+            <SelectTrigger className="w-[180px]">
+              <ArrowUpDown className="mr-2 h-4 w-4" />
+              <SelectValue placeholder="Sort by" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="date">Latest First</SelectItem>
+              <SelectItem value="name">Name (A-Z)</SelectItem>
+              <SelectItem value="benchmarks">Most Benchmark Coverage</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        {filteredModels.length === 0 ? (
+          <div className="py-12 text-center text-lg text-muted-foreground">
+            No models found matching your filters
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-2">
+            {pagedModels.map((model, index) => (
+              <BenchmarkEvaluationCard
+                key={model.id}
+                data={model}
+                benchmarkCards={benchmarkCards}
+                delayMs={Math.min(index * 45, 240)}
+              />
+            ))}
+          </div>
+        )}
+
+        <ListPagination
+          page={page}
+          pageSize={PAGE_SIZE}
+          totalItems={filteredModels.length}
+          itemLabel="models"
+          onPageChange={setPage}
+        />
+      </main>
+    </div>
+  )
+}

app/embed/eval/distribution/[...id]/page.tsx

@@ -0,0 +1,228 @@
+"use client"
+
+import { useEffect, useMemo, useState } from "react"
+import { useParams, useSearchParams } from "next/navigation"
+import { ScoreDistribution } from "@/components/score-distribution"
+import { fetchEvalSummary } from "@/lib/dashboard-data-client"
+import { getMetricChipLabel } from "@/lib/metric-labels"
+import { routeIdFromSegments } from "@/lib/utils"
+import type { BenchmarkEvalSummary } from "@/lib/eval-processing"
+
+/**
+ * Embed-only render of the score-distribution histogram for one eval.
+ * Designed for iframes: no nav, no audience bar, no surrounding chrome.
+ *
+ * Slice-aware: when the eval has subtask slices (e.g. Global MMLU's
+ * per-language splits), this page renders a SPLIT dropdown above the
+ * plot so the embedded viewer can switch slices the same way the parent
+ * eval page does. When there's no slice axis, falls back to building
+ * one series per metric (e.g. agentharm's per-category histogram).
+ *
+ * Query params:
+ *   ?view=distribution (default) — lock to distribution, hide toggle
+ *   ?view=frontier              — lock to frontier, hide toggle
+ *   ?view=both                  — show the Distribution/Frontier toggle
+ *   ?slice=<subtask_key>        — start with this slice selected
+ */
+export default function EmbedEvalDistribution() {
+  const params = useParams()
+  const searchParams = useSearchParams()
+  const evalId = routeIdFromSegments(params.id)
+  const viewParam = (searchParams.get("view") || "distribution").toLowerCase()
+  const sliceParam = searchParams.get("slice")
+  const showToggle = viewParam === "both"
+  const defaultView: "distribution" | "frontier" =
+    viewParam === "frontier" ? "frontier" : "distribution"
+
+  const [summary, setSummary] = useState<BenchmarkEvalSummary | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    let cancelled = false
+    fetchEvalSummary(evalId)
+      .then((s) => {
+        if (!cancelled) setSummary(s)
+      })
+      .catch((err) => {
+        if (!cancelled) setError(err instanceof Error ? err.message : String(err))
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [evalId])
+
+  // Slice axis — present when the eval has multiple subtask-scope metrics
+  // sharing a primary root metric (e.g. Global MMLU's 24 language splits).
+  const sliceAxis = useMemo(() => {
+    if (!summary) return null
+    const metrics = summary.leaderboard_metrics ?? []
+    const primary = metrics.find((m) => m.scope !== "subtask")
+    if (!primary?.column_key) return null
+    const seen = new Map<string, string>()
+    for (const m of metrics) {
+      if (m.scope === "subtask" && m.subtask_key && !seen.has(m.subtask_key)) {
+        seen.set(m.subtask_key, m.subtask_name ?? m.subtask_key)
+      }
+    }
+    if (seen.size <= 1) return null
+    return {
+      primaryColumn: primary.column_key,
+      primaryLabel: getMetricChipLabel(primary),
+      unit: primary.unit ?? summary.metric_config.unit,
+      lowerIsBetter: Boolean(primary.lower_is_better ?? summary.metric_config.lower_is_better),
+      slices: Array.from(seen, ([key, label]) => ({ key, label })),
+    }
+  }, [summary])
+
+  const ALL_SLICE_KEY = "__all__"
+  const [activeSlice, setActiveSlice] = useState<string>(() => {
+    if (sliceParam && sliceParam.trim()) return sliceParam.trim()
+    return ALL_SLICE_KEY
+  })
+  // If the URL named a slice the eval doesn't carry, fall back to Overall
+  // once the summary loads.
+  useEffect(() => {
+    if (!sliceAxis) return
+    if (activeSlice === ALL_SLICE_KEY) return
+    if (!sliceAxis.slices.some((s) => s.key === activeSlice)) {
+      setActiveSlice(ALL_SLICE_KEY)
+    }
+  }, [activeSlice, sliceAxis])
+
+  const series = useMemo(() => {
+    if (!summary) return null
+    const rows = summary.leaderboard_rows ?? []
+
+    // Slice-axis path: render one series for the active slice (Overall or
+    // a specific subtask). Drives the SPLIT dropdown UX.
+    if (sliceAxis) {
+      const columnKey =
+        activeSlice === ALL_SLICE_KEY
+          ? sliceAxis.primaryColumn
+          : `${sliceAxis.primaryColumn}::${activeSlice}`
+      const points: { score: number; releaseDate: string | null; modelName: string }[] = []
+      for (const row of rows) {
+        const raw = (row.values as Record<string, unknown> | undefined)?.[columnKey]
+        const numeric = typeof raw === "number" ? raw : Number(raw)
+        if (!Number.isFinite(numeric)) continue
+        const modelInfo = (row as { model_info?: { name?: string; release_date?: string | null } }).model_info
+        points.push({
+          score: numeric,
+          modelName: modelInfo?.name ?? "",
+          releaseDate: modelInfo?.release_date ?? null,
+        })
+      }
+      if (points.length < 3) return null
+      const sliceLabel =
+        activeSlice === ALL_SLICE_KEY
+          ? "Overall"
+          : sliceAxis.slices.find((s) => s.key === activeSlice)?.label ?? activeSlice
+      return [
+        {
+          key: `${sliceAxis.primaryColumn}::${activeSlice}`,
+          label: `${sliceAxis.primaryLabel} · ${sliceLabel}`,
+          values: points.map((p) => p.score),
+          unit: sliceAxis.unit,
+          lowerIsBetter: sliceAxis.lowerIsBetter,
+          points,
+        },
+      ]
+    }
+
+    // Non-slice path: one series per metric (e.g. agentharm's multi-metric
+    // histogram). ScoreDistribution surfaces a metric chip picker.
+    const metrics = summary.leaderboard_metrics ?? []
+    const built = metrics
+      .map((metric) => {
+        const columnKey = metric.column_key ?? metric.metric_summary_id
+        if (!columnKey) return null
+        const points: { score: number; releaseDate: string | null; modelName: string }[] = []
+        for (const row of rows) {
+          const raw = (row.values as Record<string, unknown> | undefined)?.[columnKey]
+          const numeric = typeof raw === "number" ? raw : Number(raw)
+          if (!Number.isFinite(numeric)) continue
+          const modelInfo = (row as { model_info?: { name?: string; release_date?: string | null } }).model_info
+          points.push({
+            score: numeric,
+            modelName: modelInfo?.name ?? "",
+            releaseDate: modelInfo?.release_date ?? null,
+          })
+        }
+        if (points.length < 3) return null
+        return {
+          key: columnKey,
+          label: getMetricChipLabel(metric),
+          values: points.map((p) => p.score),
+          unit: metric.unit ?? summary.metric_config.unit,
+          lowerIsBetter: Boolean(metric.lower_is_better ?? summary.metric_config.lower_is_better),
+          points,
+        }
+      })
+      .filter((s): s is NonNullable<typeof s> => s !== null)
+    return built.length > 0 ? built : null
+  }, [summary, sliceAxis, activeSlice])
+
+  if (error) {
+    return (
+      <div className="font-mono" style={{ fontSize: 12, color: "var(--fg-muted)" }}>
+        Failed to load: {error}
+      </div>
+    )
+  }
+  if (!summary) {
+    return (
+      <div
+        className="font-mono uppercase"
+        style={{ fontSize: 10, letterSpacing: "0.18em", color: "var(--fg-subtle)" }}
+      >
+        Loading…
+      </div>
+    )
+  }
+  if (!series) {
+    return (
+      <div className="font-mono" style={{ fontSize: 12, color: "var(--fg-muted)" }}>
+        No score data available for this evaluation yet.
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      <div
+        className="font-mono uppercase mb-2"
+        style={{ fontSize: 10, letterSpacing: "0.14em", color: "var(--fg-subtle)" }}
+      >
+        {summary.evaluation_name} ·{" "}
+        {defaultView === "frontier" ? "Pareto frontier" : "Score distribution"}
+      </div>
+      {sliceAxis && (
+        <div className="mb-3 flex items-center gap-3">
+          <span
+            className="font-mono uppercase shrink-0"
+            style={{ fontSize: 10, letterSpacing: "0.14em", color: "var(--fg-subtle)" }}
+          >
+            Split
+          </span>
+          <select
+            className="ec-select"
+            value={activeSlice}
+            onChange={(e) => setActiveSlice(e.target.value)}
+          >
+            <option value={ALL_SLICE_KEY}>Overall</option>
+            {sliceAxis.slices.map((s) => (
+              <option key={s.key} value={s.key}>
+                {s.label}
+              </option>
+            ))}
+          </select>
+        </div>
+      )}
+      <ScoreDistribution
+        series={series}
+        defaultView={defaultView}
+        showViewToggle={showToggle}
+      />
+    </div>
+  )
+}

app/evals/[...id]/page (1).tsx

@@ -0,0 +1,734 @@
+"use client"
+
+import { useCallback, useEffect, useMemo, useState } from "react"
+import { useParams, usePathname, useRouter, useSearchParams } from "next/navigation"
+import Link from "next/link"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { Input } from "@/components/ui/input"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { ArrowLeft, BarChart3, Grid3X3, Search } from "lucide-react"
+import { Navigation } from "@/components/navigation"
+import { EvalDetail } from "@/components/eval-detail"
+import type { BenchmarkEvalSummary } from "@/lib/eval-processing"
+import { fetchEvalSummary } from "@/lib/dashboard-data-client"
+import { getCategoryColor } from "@/lib/benchmark-schema"
+
+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 normalizeMetadataList(value: unknown): string[] {
+  if (Array.isArray(value)) {
+    return value
+      .filter((item): item is string => typeof item === "string")
+      .map((item) => item.trim())
+      .filter(Boolean)
+  }
+
+  if (typeof value !== "string") return []
+
+  const normalized = value.trim()
+  if (!normalized) return []
+
+  const looksDelimited = /[,;|]/.test(normalized)
+  if (looksDelimited) {
+    return normalized
+      .split(/[,;|]/)
+      .map((item) => item.trim())
+      .filter(Boolean)
+  }
+
+  // Treat long prose values as invalid list data rather than rendering oversized chips.
+  if (normalized.length > 40 || /\s/.test(normalized)) return []
+
+  return [normalized]
+}
+
+export default function EvalDetailPage() {
+  const params = useParams()
+  const pathname = usePathname()
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const [summary, setSummary] = useState<BenchmarkEvalSummary | null>(null)
+  const [subSummaries, setSubSummaries] = useState<BenchmarkEvalSummary[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [matrixSearch, setMatrixSearch] = useState("")
+  const returnTo = searchParams.get("from")
+  const currentDetailHref = useMemo(() => {
+    const params = new URLSearchParams(searchParams.toString())
+    params.delete("from")
+    const query = params.toString()
+    return query ? `${pathname}?${query}` : pathname
+  }, [pathname, searchParams])
+
+  const handleBack = useCallback(() => {
+    if (returnTo?.startsWith("/")) {
+      router.push(returnTo)
+      return
+    }
+
+    if (typeof window !== "undefined" && window.history.length > 1) {
+      router.back()
+      return
+    }
+
+    router.push("/evals")
+  }, [returnTo, router])
+
+  useEffect(() => {
+    const load = async () => {
+      try {
+        const evalId = decodeURIComponent(params.id as string)
+        const found = await fetchEvalSummary(evalId)
+        setSummary(found)
+        document.title = `${found.evaluation_name} | Benchmark`
+
+        // If aggregated, fetch each sub-eval for the matrix view
+        if (found.is_aggregated && found.aggregate_sources?.length) {
+          const subs = await Promise.all(
+            found.aggregate_sources.map(async (source) => {
+              try {
+                return await fetchEvalSummary(source.evaluation_id)
+              } catch {
+                return null
+              }
+            })
+          )
+          setSubSummaries(subs.filter((s): s is BenchmarkEvalSummary => s !== null))
+        }
+      } catch (err) {
+        console.error(err)
+        setError("Evaluation not found")
+      } finally {
+        setLoading(false)
+      }
+    }
+    load()
+  }, [params.id])
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-background">
+        <Navigation />
+        <main className="container mx-auto px-4 py-8">
+          <div className="flex items-center justify-center h-96">
+            <div className="text-lg text-muted-foreground">Loading evaluation details...</div>
+          </div>
+        </main>
+      </div>
+    )
+  }
+
+  if (error || !summary) {
+    return (
+      <div className="min-h-screen bg-background">
+        <Navigation />
+        <main className="container mx-auto px-4 py-8">
+          <div className="flex flex-col items-center justify-center h-96 space-y-4">
+            <div className="text-lg text-muted-foreground">{error ?? "Evaluation not found"}</div>
+            <Button onClick={handleBack}>
+              <ArrowLeft className="mr-2 h-4 w-4" />
+              Back to Evaluations
+            </Button>
+          </div>
+        </main>
+      </div>
+    )
+  }
+
+  const isComposite = summary.is_aggregated && (summary.aggregate_sources?.length ?? 0) > 1
+
+  return (
+    <div className="min-h-screen bg-background">
+      <Navigation />
+      <div className="border-b bg-muted/30">
+        <div className="container mx-auto px-4 sm:px-6 py-4 sm:py-6">
+          <div className="hidden sm:grid sm:grid-cols-[auto_1fr_auto] sm:items-center sm:gap-4">
+            <Button variant="ghost" onClick={handleBack}>
+              <ArrowLeft className="mr-2 h-4 w-4" />
+              Back
+            </Button>
+            <div className="text-center">
+              <h2 className="text-xl font-medium tracking-tight text-foreground/90 md:text-2xl">
+                {isComposite ? "Suite" : "Single benchmark details"}
+              </h2>
+            </div>
+            <div />
+          </div>
+          <div className="flex items-center gap-3 sm:hidden">
+            <Button variant="ghost" size="sm" onClick={handleBack} className="shrink-0">
+              <ArrowLeft className="h-4 w-4" />
+            </Button>
+            <div className="flex-1 text-center">
+              <h2 className="text-base font-medium tracking-tight text-foreground/90">
+                {isComposite ? "Suite" : "Single benchmark details"}
+              </h2>
+            </div>
+          </div>
+        </div>
+      </div>
+      <main className="container mx-auto px-4 py-8">
+        {isComposite ? (
+          <CompositeEvalView
+            summary={summary}
+            subSummaries={subSummaries}
+            matrixSearch={matrixSearch}
+            onMatrixSearchChange={setMatrixSearch}
+            currentDetailHref={currentDetailHref}
+          />
+        ) : (
+          <EvalDetail summary={summary} />
+        )}
+      </main>
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Suite view (paper §3.2 — composite reporting unit)
+// ---------------------------------------------------------------------------
+
+function CompositeEvalView({
+  summary,
+  subSummaries,
+  matrixSearch,
+  onMatrixSearchChange,
+  currentDetailHref,
+}: {
+  summary: BenchmarkEvalSummary
+  subSummaries: BenchmarkEvalSummary[]
+  matrixSearch: string
+  onMatrixSearchChange: (v: string) => void
+  currentDetailHref: string
+}) {
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <Card>
+        <CardContent className="p-5 sm:p-6 space-y-4">
+          <div className="flex flex-wrap items-center gap-2">
+            <Badge variant="outline" className="text-[11px] uppercase tracking-[0.18em]">
+              Suite
+            </Badge>
+            <Badge variant="secondary">
+              {summary.aggregate_sources?.length ?? 0} metrics
+            </Badge>
+            <Badge variant="secondary">{summary.models_count.toLocaleString()} models</Badge>
+            <Badge className={getCategoryColor(summary.category)}>
+              {summary.category}
+            </Badge>
+          </div>
+          <div>
+            <h1 className="text-2xl font-semibold tracking-tight sm:text-3xl">
+              {summary.evaluation_name}
+            </h1>
+            <p className="mt-2 max-w-3xl text-sm leading-6 text-muted-foreground">
+              {summary.benchmark_card?.purpose_and_intended_users?.goal
+                ?? `Suite aggregating ${summary.aggregate_sources?.length ?? 0} metrics across ${summary.models_count.toLocaleString()} models.`}
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Tabs defaultValue="metrics">
+        <TabsList>
+          <TabsTrigger value="metrics" className="gap-2">
+            <BarChart3 className="h-4 w-4" />
+            Sub-Benchmarks
+          </TabsTrigger>
+          <TabsTrigger value="matrix" className="gap-2">
+            <Grid3X3 className="h-4 w-4" />
+            Score breakdown
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="metrics" className="mt-6">
+          <SubBenchmarkCards
+            sources={summary.aggregate_sources ?? []}
+            subSummaries={subSummaries}
+            currentDetailHref={currentDetailHref}
+          />
+        </TabsContent>
+
+        <TabsContent value="matrix" className="mt-6">
+          <MatrixLeaderboard
+            summary={summary}
+            subSummaries={subSummaries}
+            search={matrixSearch}
+            onSearchChange={onMatrixSearchChange}
+          />
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Sub-benchmark cards
+// ---------------------------------------------------------------------------
+
+function SubBenchmarkCards({
+  sources,
+  subSummaries,
+  currentDetailHref,
+}: {
+  sources: NonNullable<BenchmarkEvalSummary["aggregate_sources"]>
+  subSummaries: BenchmarkEvalSummary[]
+  currentDetailHref: string
+}) {
+  const subMap = useMemo(
+    () => new Map(subSummaries.map((s) => [s.evaluation_id, s])),
+    [subSummaries]
+  )
+
+  return (
+    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+      {sources.map((source) => {
+        const sub = subMap.get(source.evaluation_id)
+        const card = sub?.benchmark_card
+        const overview = card?.benchmark_details?.overview ?? sub?.metric_config?.evaluation_description
+        const domains = normalizeMetadataList(card?.benchmark_details?.domains)
+        const goal = card?.purpose_and_intended_users?.goal
+
+        return (
+          <Link
+            key={source.evaluation_id}
+            href={`/evals/${source.evaluation_id}?from=${encodeURIComponent(currentDetailHref)}`}
+            className="group"
+          >
+            <Card className="h-full transition-all hover:-translate-y-0.5 hover:shadow-lg">
+              <CardHeader className="pb-3">
+                <div className="flex items-center justify-between gap-2">
+                  <CardTitle className="text-base font-semibold transition-colors group-hover:text-primary">
+                    {card?.benchmark_details?.name ?? source.composite_benchmark_name}
+                  </CardTitle>
+                  <Badge variant="outline" className="text-xs shrink-0">
+                    {source.models_count} models
+                  </Badge>
+                </div>
+              </CardHeader>
+              <CardContent className="pt-0 space-y-3">
+                {overview && (
+                  <p className="text-sm text-muted-foreground line-clamp-3">
+                    {overview}
+                  </p>
+                )}
+
+                {sub?.best_model && (
+                  <div className="text-sm">
+                    <span className="text-muted-foreground">Top: </span>
+                    <span className="font-medium">{sub.best_model.name}</span>
+                    <span className="ml-1 text-muted-foreground">
+                      ({(sub.best_model.score * 100).toFixed(1)}%)
+                    </span>
+                  </div>
+                )}
+
+                {domains.length > 0 && (
+                  <div className="flex flex-wrap gap-1.5">
+                    {domains.slice(0, 3).map((domain) => (
+                      <span
+                        key={domain}
+                        className="rounded-full border border-border/60 bg-muted/30 px-2 py-0.5 text-[10px] font-medium capitalize text-muted-foreground"
+                      >
+                        {domain}
+                      </span>
+                    ))}
+                    {domains.length > 3 && (
+                      <span className="rounded-full border border-border/60 bg-muted/30 px-2 py-0.5 text-[10px] text-muted-foreground">
+                        +{domains.length - 3}
+                      </span>
+                    )}
+                  </div>
+                )}
+
+                <div className="flex flex-wrap items-center gap-1.5">
+                  {sub?.category && (
+                    <Badge className={`${getCategoryColor(sub.category)} text-[10px]`}>
+                      {sub.category}
+                    </Badge>
+                  )}
+                </div>
+              </CardContent>
+            </Card>
+          </Link>
+        )
+      })}
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Matrix leaderboard (models × metrics)
+// ---------------------------------------------------------------------------
+
+function MatrixLeaderboard({
+  summary,
+  subSummaries,
+  search,
+  onSearchChange,
+}: {
+  summary: BenchmarkEvalSummary
+  subSummaries: BenchmarkEvalSummary[]
+  search: string
+  onSearchChange: (v: string) => void
+}) {
+  const [sortCol, setSortCol] = useState<string>("avg")
+  const [sortAsc, setSortAsc] = useState(false)
+  const [page, setPage] = useState(1)
+  const [hiddenCols, setHiddenCols] = useState<Set<string>>(new Set())
+  const [minParamStep, setMinParamStep] = useState(0)
+  const [maxParamStep, setMaxParamStep] = useState(PARAM_RANGE_VALUES.length - 1)
+  const PAGE_SIZE = 50
+
+  const metricDirection = useMemo(() => {
+    const map = new Map<string, boolean>()
+    for (const sub of subSummaries) {
+      map.set(sub.evaluation_name, sub.metric_config.lower_is_better)
+    }
+    return map
+  }, [subSummaries])
+
+  const { models, metrics } = useMemo(() => {
+    const metricNames = subSummaries.map((s) => s.evaluation_name)
+    const modelScores = new Map<string, { name: string; developer: string; scores: Map<string, number | null> }>()
+
+    for (const sub of subSummaries) {
+      for (const result of sub.model_results) {
+        const id = result.model_info.id
+        const existing = modelScores.get(id) ?? {
+          name: result.model_info.name,
+          developer: result.model_info.developer ?? "",
+          scores: new Map<string, number | null>(),
+        }
+        existing.scores.set(sub.evaluation_name, result.score)
+        modelScores.set(id, existing)
+      }
+    }
+
+    const modelList = Array.from(modelScores.entries())
+      .map(([id, data]) => {
+        const validScores = Array.from(data.scores.values()).filter(
+          (s): s is number => s != null && Number.isFinite(s) && s > -99
+        )
+        const avg = validScores.length > 0
+          ? validScores.reduce((a, b) => a + b, 0) / validScores.length
+          : 0
+        // Parse model size from name (e.g., "70B", "8b", "1.5B", "405b")
+        let sizeB: number | null = null
+        const sizeMatch = (data.name + " " + id).match(/\b(\d+(?:\.\d+)?)\s*[bB]\b/)
+        if (sizeMatch) sizeB = parseFloat(sizeMatch[1])
+
+        return { id, name: data.name, developer: data.developer, avg, scores: data.scores, sizeB }
+      })
+
+    return { models: modelList, metrics: metricNames }
+  }, [subSummaries])
+
+  const visibleMetrics = useMemo(
+    () => metrics.filter((m) => !hiddenCols.has(m)),
+    [metrics, hiddenCols]
+  )
+
+  const sortedModels = useMemo(() => {
+    return [...models].sort((a, b) => {
+      if (sortCol === "name") {
+        return sortAsc ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name)
+      }
+      const aVal = sortCol === "avg" ? a.avg : (a.scores.get(sortCol) ?? -Infinity)
+      const bVal = sortCol === "avg" ? b.avg : (b.scores.get(sortCol) ?? -Infinity)
+      return sortAsc ? aVal - bVal : bVal - aVal
+    })
+  }, [models, sortCol, sortAsc])
+
+  const maxStepIndex = PARAM_RANGE_VALUES.length - 1
+  const numericMinParams = minParamStep <= 0 ? null : (PARAM_RANGE_VALUES[minParamStep] ?? null)
+  const numericMaxParams = maxParamStep >= maxStepIndex ? null : (PARAM_RANGE_VALUES[maxParamStep] ?? null)
+
+  const query = search.trim().toLowerCase()
+  const filteredModels = sortedModels.filter((m) => {
+    if (query && !(
+      m.name.toLowerCase().includes(query) ||
+      m.developer.toLowerCase().includes(query) ||
+      m.id.toLowerCase().includes(query)
+    )) return false
+    if (numericMinParams != null && (m.sizeB == null || m.sizeB < numericMinParams)) return false
+    if (numericMaxParams != null && (m.sizeB == null || m.sizeB > numericMaxParams)) return false
+    return true
+  })
+
+  const pagedModels = filteredModels.slice(0, page * PAGE_SIZE)
+  const hasMore = pagedModels.length < filteredModels.length
+
+  // Color coding per column
+  const metricRanges = useMemo(() => {
+    const ranges = new Map<string, { min: number; max: number }>()
+    for (const metric of visibleMetrics) {
+      const scores = models.map((m) => m.scores.get(metric)).filter(
+        (s): s is number => s != null && Number.isFinite(s) && s > -99
+      )
+      if (scores.length > 0) {
+        ranges.set(metric, { min: Math.min(...scores), max: Math.max(...scores) })
+      }
+    }
+    return ranges
+  }, [models, visibleMetrics])
+
+  function isValidScore(score: number | null | undefined): score is number {
+    return score != null && Number.isFinite(score) && score > -99
+  }
+
+  function scoreColor(metric: string, score: number): string {
+    const range = metricRanges.get(metric)
+    if (!range || range.max === range.min) return ""
+    const lower = metricDirection.get(metric) ?? false
+    const pct = lower
+      ? (range.max - score) / (range.max - range.min)
+      : (score - range.min) / (range.max - range.min)
+    if (pct >= 0.8) return "bg-emerald-100 dark:bg-emerald-950/40 text-emerald-800 dark:text-emerald-200"
+    if (pct >= 0.6) return "bg-sky-50 dark:bg-sky-950/30 text-sky-800 dark:text-sky-200"
+    if (pct <= 0.2) return "bg-red-50 dark:bg-red-950/30 text-red-800 dark:text-red-200"
+    return ""
+  }
+
+  function formatScore(score: number): string {
+    if (Math.abs(score) >= 100) return score.toFixed(1)
+    if (Math.abs(score) >= 10) return score.toFixed(2)
+    return score.toFixed(3).replace(/0+$/g, "").replace(/\.$/, "")
+  }
+
+  function handleSort(col: string) {
+    if (sortCol === col) setSortAsc(!sortAsc)
+    else { setSortCol(col); setSortAsc(false) }
+  }
+
+  const sortIndicator = (col: string) =>
+    sortCol === col ? (sortAsc ? " ▲" : " ▼") : ""
+
+  function toggleCol(metric: string) {
+    setHiddenCols((prev) => {
+      const next = new Set(prev)
+      if (next.has(metric)) next.delete(metric)
+      else next.add(metric)
+      return next
+    })
+  }
+
+  if (subSummaries.length === 0) {
+    return (
+      <div className="py-12 text-center text-muted-foreground">
+        Loading sub-benchmark data for the matrix view...
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
+        <div className="relative w-full 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" />
+          <Input
+            value={search}
+            onChange={(e) => onSearchChange(e.target.value)}
+            placeholder="Search models..."
+            className="pl-9"
+          />
+        </div>
+        <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,300px)]">
+              <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 / maxStepIndex) * 100}%`,
+                      transform:
+                        marker.step === 0 ? "translateX(0)"
+                          : marker.step === maxStepIndex ? "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: `${(minParamStep / maxStepIndex) * 100}%`,
+                      right: `${Math.max(100 - (maxParamStep / maxStepIndex) * 100, 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 / maxStepIndex) * 100}%` }}
+                      aria-hidden="true"
+                    />
+                  ))}
+                </div>
+
+                <input
+                  type="range"
+                  min={0}
+                  max={maxStepIndex}
+                  step={1}
+                  value={minParamStep}
+                  onChange={(e) => {
+                    const v = Number(e.target.value)
+                    setMinParamStep(Math.min(v, maxParamStep))
+                  }}
+                  className="param-range-input"
+                  aria-label="Minimum parameter filter"
+                />
+                <input
+                  type="range"
+                  min={0}
+                  max={maxStepIndex}
+                  step={1}
+                  value={maxParamStep}
+                  onChange={(e) => {
+                    const v = Number(e.target.value)
+                    setMaxParamStep(Math.max(v, 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>
+        <div className="text-sm text-muted-foreground whitespace-nowrap">
+          {filteredModels.length} models × {visibleMetrics.length} metrics
+        </div>
+      </div>
+
+      {/* Column toggles */}
+      <div className="flex flex-wrap gap-1.5">
+        {metrics.map((metric) => (
+          <button
+            key={metric}
+            type="button"
+            onClick={() => toggleCol(metric)}
+            className={`rounded-full border px-2.5 py-1 text-[11px] font-medium transition-colors ${
+              hiddenCols.has(metric)
+                ? "border-border/40 bg-muted/20 text-muted-foreground/50 line-through"
+                : "border-border/70 bg-background text-foreground hover:border-primary/50"
+            }`}
+          >
+            {metric}
+          </button>
+        ))}
+      </div>
+
+      <div className="overflow-x-auto rounded-lg border">
+        <table className="w-full text-sm" style={{ tableLayout: "fixed" }}>
+          <colgroup>
+            <col style={{ width: 48 }} />
+            <col style={{ width: 220 }} />
+            <col style={{ width: 90 }} />
+            {visibleMetrics.map((m) => (
+              <col key={m} style={{ width: 110 }} />
+            ))}
+          </colgroup>
+          <thead>
+            <tr className="border-b bg-muted/30">
+              <th className="sticky left-0 z-10 bg-muted/30 px-3 py-2 text-left font-semibold">#</th>
+              <th
+                className="sticky left-[48px] z-10 bg-muted/30 px-3 py-2 text-left font-semibold cursor-pointer select-none hover:text-primary"
+                onClick={() => handleSort("name")}
+              >
+                Model{sortIndicator("name")}
+              </th>
+              <th
+                className="px-3 py-2 text-right font-semibold cursor-pointer select-none hover:text-primary"
+                onClick={() => handleSort("avg")}
+              >
+                Avg{sortIndicator("avg")}
+              </th>
+              {visibleMetrics.map((metric) => (
+                <th
+                  key={metric}
+                  className="px-3 py-2 text-right font-semibold cursor-pointer select-none hover:text-primary truncate"
+                  onClick={() => handleSort(metric)}
+                  title={metric}
+                >
+                  {metric}{sortIndicator(metric)}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {pagedModels.map((model, idx) => (
+              <tr key={model.id} className="border-b hover:bg-muted/20 transition-colors">
+                <td className="sticky left-0 z-10 bg-background px-3 py-2 text-muted-foreground tabular-nums">
+                  {idx + 1}
+                </td>
+                <td className="sticky left-[48px] z-10 bg-background px-3 py-2">
+                  <div className="font-medium truncate">{model.name}</div>
+                  <div className="text-xs text-muted-foreground truncate">{model.developer}</div>
+                </td>
+                <td className="px-3 py-2 text-right font-semibold tabular-nums">
+                  {formatScore(model.avg)}
+                </td>
+                {visibleMetrics.map((metric) => {
+                  const score = model.scores.get(metric)
+                  const valid = isValidScore(score)
+                  return (
+                    <td
+                      key={metric}
+                      className={`px-3 py-2 text-right tabular-nums ${valid ? scoreColor(metric, score) : "text-muted-foreground"}`}
+                    >
+                      {valid ? formatScore(score) : "—"}
+                    </td>
+                  )
+                })}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      {hasMore && (
+        <div className="text-center">
+          <Button variant="outline" onClick={() => setPage((p) => p + 1)}>
+            Load more ({filteredModels.length - pagedModels.length} remaining)
+          </Button>
+        </div>
+      )}
+    </div>
+  )
+}

app/models/[...id]/page (1).tsx

@@ -0,0 +1,355 @@
+"use client"
+
+import { startTransition, useCallback, useEffect, useMemo, useState } from "react"
+import { useParams, useRouter, useSearchParams } from "next/navigation"
+import { Button } from "@/components/ui/button"
+import { ArrowLeft } from "lucide-react"
+import { Navigation } from "@/components/navigation"
+import { BenchmarkDetail } from "@/components/benchmark-detail"
+import type { BenchmarkCard, ModelEvaluationSummary } from "@/lib/eval-processing"
+import {
+  fetchBenchmarkMetadata,
+  fetchComparisonIndex,
+  fetchEvalHierarchy,
+  fetchModelSummary,
+  fetchModelCards,
+} from "@/lib/dashboard-data-client"
+import type { BenchmarkEvaluationCardData } from "@/components/benchmark-evaluation-card"
+import type { ComparisonIndex, EvalHierarchy } from "@/lib/backend-artifacts"
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
+
+export default function ModelDetailPage() {
+  const params = useParams()
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const [summary, setSummary] = useState<ModelEvaluationSummary | null>(null)
+  const [benchmarkCards, setBenchmarkCards] = useState<Record<string, BenchmarkCard>>({})
+  const [modelCards, setModelCards] = useState<BenchmarkEvaluationCardData[]>([])
+  const [evalHierarchy, setEvalHierarchy] = useState<EvalHierarchy | null>(null)
+  const [comparisonIndex, setComparisonIndex] = useState<ComparisonIndex | null>(null)
+  const [selectedVariantId, setSelectedVariantId] = useState<string | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const routeId = params.id as string
+
+  const getVariantFromQuery = useCallback(
+    (modelSummary: ModelEvaluationSummary) => {
+      const requestedVersion = searchParams.get("version")
+
+      if (!requestedVersion || modelSummary.variants.length === 0) {
+        return modelSummary.variants[0] ?? null
+      }
+
+      return (
+        modelSummary.variants.find(
+          (variant) =>
+            variant.variant_key === requestedVersion ||
+            variant.variant_id === requestedVersion
+        ) ?? modelSummary.variants[0] ?? null
+      )
+    },
+    [searchParams]
+  )
+
+  const handleBack = useCallback(() => {
+    if (typeof window !== "undefined") {
+      const referrer = document.referrer
+
+      if (referrer) {
+        try {
+          const referrerUrl = new URL(referrer)
+          if (referrerUrl.origin === window.location.origin) {
+            router.back()
+            return
+          }
+        } catch {
+          // Fall through to a deterministic in-app destination.
+        }
+      }
+    }
+
+    router.push("/models")
+  }, [router])
+
+  const handleVariantChange = useCallback(
+    (nextVariantId: string) => {
+      setSelectedVariantId(nextVariantId)
+
+      if (!summary || summary.variants.length <= 1 || !routeId) {
+        return
+      }
+
+      const nextVariant = summary.variants.find((variant) => variant.variant_id === nextVariantId)
+      if (!nextVariant) {
+        return
+      }
+
+      const nextParams = new URLSearchParams(searchParams.toString())
+      const currentVersion = nextParams.get("version")
+      const nextVersion = nextVariant.variant_key
+
+      if (currentVersion === nextVersion) {
+        return
+      }
+
+      nextParams.set("version", nextVersion)
+      const nextQuery = nextParams.toString()
+      router.replace(
+        nextQuery ? `/models/${routeId}?${nextQuery}` : `/models/${routeId}`,
+        { scroll: false }
+      )
+    },
+    [routeId, router, searchParams, summary]
+  )
+
+  useEffect(() => {
+    let isCancelled = false
+
+    const loadCoreData = async () => {
+      try {
+        const [modelSummary, cards, hierarchy] = await Promise.all([
+          fetchModelSummary(routeId),
+          fetchBenchmarkMetadata(),
+          fetchEvalHierarchy().catch((err) => {
+            console.warn("Failed to load eval-hierarchy:", err)
+            return null as EvalHierarchy | null
+          }),
+        ])
+        if (isCancelled) {
+          return
+        }
+
+        setSummary(modelSummary)
+        setBenchmarkCards(cards)
+        setEvalHierarchy(hierarchy)
+        setSelectedVariantId((current) => current ?? modelSummary.variants[0]?.variant_id ?? null)
+      } catch (err) {
+        if (isCancelled) {
+          return
+        }
+
+        console.error("Failed to load model:", err)
+        setError("Failed to load model data")
+      } finally {
+        if (!isCancelled) {
+          setLoading(false)
+        }
+      }
+    }
+
+    loadCoreData()
+
+    return () => {
+      isCancelled = true
+    }
+  }, [routeId])
+
+  useEffect(() => {
+    let isCancelled = false
+
+    const loadAuxiliaryData = async () => {
+      const [allModelCards, compIndex] = await Promise.all([
+        fetchModelCards().catch((err) => {
+          console.warn("Failed to load model cards:", err)
+          return [] as BenchmarkEvaluationCardData[]
+        }),
+        fetchComparisonIndex().catch((err) => {
+          console.warn("Failed to load comparison-index:", err)
+          return null as ComparisonIndex | null
+        }),
+      ])
+
+      if (isCancelled) {
+        return
+      }
+
+      startTransition(() => {
+        setModelCards(allModelCards)
+        setComparisonIndex(compIndex)
+      })
+    }
+
+    loadAuxiliaryData()
+
+    return () => {
+      isCancelled = true
+    }
+  }, [routeId])
+
+  useEffect(() => {
+    if (!summary?.variants.length) {
+      return
+    }
+
+    const requestedVariant = getVariantFromQuery(summary)
+    if (requestedVariant && requestedVariant.variant_id !== selectedVariantId) {
+      setSelectedVariantId(requestedVariant.variant_id)
+    }
+  }, [getVariantFromQuery, searchParams, summary])
+
+  useEffect(() => {
+    if (!summary?.variants.length || !routeId) {
+      return
+    }
+
+    const requestedVersion = searchParams.get("version")
+    if (!requestedVersion) {
+      return
+    }
+
+    const matchesKnownVariant = summary.variants.some(
+      (variant) =>
+        variant.variant_key === requestedVersion ||
+        variant.variant_id === requestedVersion
+    )
+
+    if (matchesKnownVariant) {
+      return
+    }
+
+    const nextParams = new URLSearchParams(searchParams.toString())
+    nextParams.delete("version")
+    const nextQuery = nextParams.toString()
+
+    router.replace(
+      nextQuery ? `/models/${routeId}?${nextQuery}` : `/models/${routeId}`,
+      { scroll: false }
+    )
+  }, [routeId, router, searchParams, summary])
+
+  const selectedVariant = useMemo(() => {
+    if (!summary) {
+      return null
+    }
+
+    if (!summary.variants.length) {
+      return summary
+    }
+
+    return (
+      summary.variants.find((variant) => variant.variant_id === selectedVariantId) ??
+      summary.variants[0]
+    )
+  }, [selectedVariantId, summary])
+
+  useEffect(() => {
+    if (!summary) {
+      return
+    }
+
+    const titleParts = [summary.model_family_name]
+    if (selectedVariant && "variant_key" in selectedVariant && selectedVariant.variant_key !== "base") {
+      titleParts.push(selectedVariant.variant_label)
+    }
+
+    document.title = `${titleParts.join(" · ")} - AI Evaluation Dashboard`
+  }, [selectedVariant, summary])
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-background">
+        <Navigation />
+        <main className="container mx-auto px-4 py-8">
+          <div className="flex items-center justify-center h-96">
+            <div className="text-lg text-muted-foreground">Loading model details...</div>
+          </div>
+        </main>
+      </div>
+    )
+  }
+
+  if (error || !summary) {
+    return (
+      <div className="min-h-screen bg-background">
+        <Navigation />
+        <main className="container mx-auto px-4 py-8">
+          <div className="flex flex-col items-center justify-center h-96 space-y-4">
+            <div className="text-lg text-muted-foreground">{error || "Model not found"}</div>
+            <Button onClick={handleBack}>
+              <ArrowLeft className="mr-2 h-4 w-4" />
+              Back
+            </Button>
+          </div>
+        </main>
+      </div>
+    )
+  }
+
+  const detailSummary = selectedVariant ?? summary
+  const hasVariantTabs = summary.variants.length > 1
+
+  return (
+    <div className="min-h-screen bg-background">
+      <Navigation />
+      <div className="border-b bg-muted/30">
+        <div className="container mx-auto px-4 sm:px-6 py-4 sm:py-6">
+          <div className="flex items-center gap-3 sm:hidden">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleBack}
+              className="shrink-0"
+            >
+              <ArrowLeft className="h-4 w-4" />
+            </Button>
+            <div className="flex-1 text-center">
+              <h2 className="text-base font-medium tracking-tight text-foreground/90 sm:text-lg">
+                Model details
+              </h2>
+            </div>
+          </div>
+
+          <div className="hidden sm:grid sm:grid-cols-[auto_1fr_auto] sm:items-center sm:gap-4">
+            <Button
+              variant="ghost"
+              onClick={handleBack}
+            >
+              <ArrowLeft className="mr-2 h-4 w-4" />
+              Back
+            </Button>
+            <div className="text-center">
+              <h2 className="text-xl font-medium tracking-tight text-foreground/90 md:text-2xl">
+                Model details
+              </h2>
+            </div>
+            <div />
+          </div>
+
+          {hasVariantTabs ? (
+            <div className="mt-4 rounded-2xl border border-border/70 bg-background/80 px-3 py-3 shadow-sm">
+              <div className="mb-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
+                Versions
+              </div>
+              <Tabs
+                value={selectedVariantId ?? summary.variants[0].variant_id}
+                onValueChange={handleVariantChange}
+                className="gap-0"
+              >
+                <TabsList className="flex w-full flex-wrap gap-2">
+                  {summary.variants.map((variant) => (
+                    <TabsTrigger
+                      key={variant.variant_id}
+                      value={variant.variant_id}
+                      className="h-auto rounded-full border border-border/80 bg-muted/30 px-3 py-1.5 text-xs sm:text-sm data-[state=active]:border-foreground/20 data-[state=active]:bg-background"
+                    >
+                      {variant.variant_label}
+                    </TabsTrigger>
+                  ))}
+                </TabsList>
+              </Tabs>
+            </div>
+          ) : null}
+        </div>
+      </div>
+      <main className="container mx-auto px-4 py-8">
+        <BenchmarkDetail
+          summary={detailSummary}
+          benchmarkCards={benchmarkCards}
+          modelCards={modelCards}
+          evalHierarchy={evalHierarchy}
+          comparisonIndex={comparisonIndex}
+        />
+      </main>
+    </div>
+  )
+}

lib/view-data.ts

@@ -97,56 +97,56 @@ const EVAL_LIST_COLUMNS = `
 // the binding only ever sees primitive types; parseMaybeJson restores
 // the shape on the JS side.
 const CELL_JOIN_COLUMNS = `
-  r.evaluation_id,
-  r.metric_summary_id,
-  r.composite_slug,
-  r.composite_display_name,
-  r.benchmark_id,
-  r.family_id,
-  r.family_display_name,
-  r.is_slice,
-  r.parent_benchmark_id,
-  r.metric_id,
-  r.model_key,
-  r.model_id,
-  r.model_route_id,
+  CAST(r.evaluation_id AS VARCHAR) AS evaluation_id,
+  CAST(r.metric_summary_id AS VARCHAR) AS metric_summary_id,
+  CAST(r.composite_slug AS VARCHAR) AS composite_slug,
+  CAST(r.composite_display_name AS VARCHAR) AS composite_display_name,
+  CAST(r.benchmark_id AS VARCHAR) AS benchmark_id,
+  CAST(r.family_id AS VARCHAR) AS family_id,
+  CAST(r.family_display_name AS VARCHAR) AS family_display_name,
+  CAST(r.is_slice AS BOOLEAN) AS is_slice,
+  CAST(r.parent_benchmark_id AS VARCHAR) AS parent_benchmark_id,
+  CAST(r.metric_id AS VARCHAR) AS metric_id,
+  CAST(r.model_key AS VARCHAR) AS model_key,
+  CAST(r.model_id AS VARCHAR) AS model_id,
+  CAST(r.model_route_id AS VARCHAR) AS model_route_id,
   CAST(to_json(r.model_info) AS VARCHAR) AS model_info,
   CAST(to_json(r.generation_config) AS VARCHAR) AS generation_config,
-  r.metric_display_name,
-  r.metric_unit,
-  r.lower_is_better,
-  r.category,
-  r.score,
+  CAST(r.metric_display_name AS VARCHAR) AS metric_display_name,
+  CAST(r.metric_unit AS VARCHAR) AS metric_unit,
+  CAST(r.lower_is_better AS BOOLEAN) AS lower_is_better,
+  CAST(r.category AS VARCHAR) AS category,
+  CAST(r.score AS DOUBLE) AS score,
   CAST(to_json(r.score_details) AS VARCHAR) AS score_details,
-  r.position,
+  CAST(r.position AS INTEGER) AS position,
   CAST(r.evaluation_timestamp AS VARCHAR) AS evaluation_timestamp,
   CAST(to_json(r.source_metadata) AS VARCHAR) AS source_metadata,
   CAST(to_json(r.source_data) AS VARCHAR) AS source_data,
-  r.source_record_url,
-  r.is_summary_score,
+  CAST(r.source_record_url AS VARCHAR) AS source_record_url,
+  CAST(r.is_summary_score AS BOOLEAN) AS is_summary_score,
   CAST(to_json(r.aggregate_components) AS VARCHAR) AS aggregate_components,
   CAST(to_json(r.evalcards_annotations) AS VARCHAR) AS evalcards_annotations,
   CAST(to_json(r.eval_library) AS VARCHAR) AS eval_library,
-  r.instance_file_path,
-  e.evaluation_name AS eval_evaluation_name,
-  e.canonical_display_name AS eval_canonical_display_name,
-  e.benchmark_id AS eval_benchmark_id,
-  e.composite_slug AS eval_composite_slug,
-  e.composite_display_name AS eval_composite_display_name,
-  e.family_id AS eval_family_id,
-  e.family_display_name AS eval_family_display_name,
-  e.is_slice AS eval_is_slice,
-  e.parent_benchmark_id AS eval_parent_benchmark_id,
-  e.composite_slug AS eval_composite_benchmark_key,
-  e.composite_display_name AS eval_composite_benchmark_name,
-  e.family_display_name AS eval_benchmark_family_name,
-  e.category AS eval_category,
+  CAST(r.instance_file_path AS VARCHAR) AS instance_file_path,
+  CAST(e.evaluation_name AS VARCHAR) AS eval_evaluation_name,
+  CAST(e.canonical_display_name AS VARCHAR) AS eval_canonical_display_name,
+  CAST(e.benchmark_id AS VARCHAR) AS eval_benchmark_id,
+  CAST(e.composite_slug AS VARCHAR) AS eval_composite_slug,
+  CAST(e.composite_display_name AS VARCHAR) AS eval_composite_display_name,
+  CAST(e.family_id AS VARCHAR) AS eval_family_id,
+  CAST(e.family_display_name AS VARCHAR) AS eval_family_display_name,
+  CAST(e.is_slice AS BOOLEAN) AS eval_is_slice,
+  CAST(e.parent_benchmark_id AS VARCHAR) AS eval_parent_benchmark_id,
+  CAST(e.composite_slug AS VARCHAR) AS eval_composite_benchmark_key,
+  CAST(e.composite_display_name AS VARCHAR) AS eval_composite_benchmark_name,
+  CAST(e.family_display_name AS VARCHAR) AS eval_benchmark_family_name,
+  CAST(e.category AS VARCHAR) AS eval_category,
   CAST(to_json(e.metric_config) AS VARCHAR) AS eval_metric_config,
   CAST(to_json(e.source_data) AS VARCHAR) AS eval_source_data,
   CAST(to_json(e.benchmark_card) AS VARCHAR) AS eval_benchmark_card,
   CAST(to_json(e.tags) AS VARCHAR) AS eval_tags,
-  e.is_summary_score AS eval_is_summary_score,
-  e.summary_eval_ids AS eval_summary_eval_ids
+  CAST(e.is_summary_score AS BOOLEAN) AS eval_is_summary_score,
+  CAST(to_json(e.summary_eval_ids) AS VARCHAR) AS eval_summary_eval_ids
 `
 
 function normalizeDuckDBValue(value: unknown): unknown {