Untrack accidentally-committed noise files; gitignore the patterns

The previous commit (b6dab21) pulled in several files that should not
be tracked:
- "(1).tsx" — Finder duplicates of route files
- output/hierarchy_explorer.html — local probe output
- public/peer-ranks.json — local-generated cache (~370k lines)
- app/embed/eval/distribution/[...id]/page.tsx — orphan route

Remove from the index and extend .gitignore so they can't sneak back
through a `git add -A` or accidental wildcard.

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

.gitignore

@@ -46,3 +46,6 @@ pipeline_revised.py
 mock_design/
 shoot.mjs
 whisker-render.mjs
+output/
+public/peer-ranks.json
+**/* (1).tsx

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

@@ -1,244 +0,0 @@
-"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

@@ -1,228 +0,0 @@
-"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

@@ -1,734 +0,0 @@
-"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

@@ -1,355 +0,0 @@
-"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>
-  )
-}