Group model/eval-detail benchmarks by hierarchy.json families

The eval row's `family_id` is null for ~7% of evals (e.g. CySE2
composites) and points at the leaf for ~70% (singleton families),
so the model detail and eval detail pages flattened the curated
family→composite groupings shipped in hierarchy.json. The
`evalHierarchy` prop on `BenchmarkDetail` was destructured but
never read.

Add `lib/hierarchy-lookup.ts` to map each `eval_summary_id` to
its family/composite from hierarchy.json, and consume it from the
four buckets that drive the visible UI: `groupByComposite`,
`listFamiliesByCategory`, and `plotboxUnits` in benchmark-detail,
plus the eval-detail header / sub-benchmark grid in evals/[id].
Falls back to `evaluation.family_id` when the hierarchy has no
entry. The 31 multi-family eval IDs disambiguate via the eval
row's own `family_id` when it's set.

app/evals/[id]/page.tsx

@@ -9,9 +9,14 @@ import { EvalDetail } from "@/components/eval-detail"
 import { ParamRangePicker } from "@/components/param-range-picker"
 import { useAudienceMode } from "@/components/audience-mode-provider"
 import type { BenchmarkEvalSummary } from "@/lib/eval-processing"
-import { fetchEvalSummary } from "@/lib/dashboard-data-client"
+import { fetchEvalHierarchy, fetchEvalSummary } from "@/lib/dashboard-data-client"
 import { humanizeEvaluationId } from "@/lib/utils"
 import { PARAM_RANGE_MAX_INDEX, parseParamsBillionsFromModelName, paramStepToNumeric } from "@/lib/param-range"
+import type { EvalHierarchy } from "@/lib/backend-artifacts"
+import {
+  buildHierarchyEvalIndex,
+  type HierarchyEvalLocation,
+} from "@/lib/hierarchy-lookup"
 
 export default function EvalDetailPage() {
   const params = useParams()
@@ -20,6 +25,7 @@ export default function EvalDetailPage() {
   const searchParams = useSearchParams()
   const [summary, setSummary] = useState<BenchmarkEvalSummary | null>(null)
   const [subSummaries, setSubSummaries] = useState<BenchmarkEvalSummary[]>([])
+  const [hierarchy, setHierarchy] = useState<EvalHierarchy | null>(null)
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
   const [matrixSearch, setMatrixSearch] = useState("")
@@ -49,8 +55,15 @@ export default function EvalDetailPage() {
     const load = async () => {
       try {
         const evalId = decodeURIComponent(params.id as string)
-        const found = await fetchEvalSummary(evalId)
+        const [found, evalHierarchy] = await Promise.all([
+          fetchEvalSummary(evalId),
+          fetchEvalHierarchy().catch((err) => {
+            console.warn("Failed to load eval-hierarchy:", err)
+            return null as EvalHierarchy | null
+          }),
+        ])
         setSummary(found)
+        setHierarchy(evalHierarchy)
         document.title = `${found.evaluation_name} | Benchmark`
 
         if (found.is_aggregated && found.aggregate_sources?.length) {
@@ -75,6 +88,28 @@ export default function EvalDetailPage() {
     load()
   }, [params.id])
 
+  const hierarchyIndex = useMemo(() => {
+    if (!hierarchy) return null
+    const familyIdHints = new Map<string, string>()
+    if (summary?.evaluation_id && summary.family_id) {
+      familyIdHints.set(summary.evaluation_id, summary.family_id)
+    }
+    for (const sub of subSummaries) {
+      if (sub.evaluation_id && sub.family_id) {
+        familyIdHints.set(sub.evaluation_id, sub.family_id)
+      }
+    }
+    return buildHierarchyEvalIndex(
+      hierarchy,
+      (evalSummaryId) => familyIdHints.get(evalSummaryId) ?? null,
+    )
+  }, [hierarchy, summary, subSummaries])
+
+  const hierarchyLocation = useMemo<HierarchyEvalLocation | null>(() => {
+    if (!hierarchyIndex || !summary?.evaluation_id) return null
+    return hierarchyIndex.get(summary.evaluation_id) ?? null
+  }, [hierarchyIndex, summary])
+
   if (loading) {
     return (
       <div className="min-h-screen bg-background">
@@ -126,9 +161,11 @@ export default function EvalDetailPage() {
             matrixSearch={matrixSearch}
             onMatrixSearchChange={setMatrixSearch}
             currentDetailHref={currentDetailHref}
+            hierarchyIndex={hierarchyIndex}
+            hierarchyLocation={hierarchyLocation}
           />
         ) : (
-          <EvalDetail summary={summary} />
+          <EvalDetail summary={summary} hierarchyLocation={hierarchyLocation} />
         )}
       </main>
     </div>
@@ -150,12 +187,16 @@ function CompositeEvalView({
   matrixSearch,
   onMatrixSearchChange,
   currentDetailHref,
+  hierarchyIndex,
+  hierarchyLocation,
 }: {
   summary: BenchmarkEvalSummary
   subSummaries: BenchmarkEvalSummary[]
   matrixSearch: string
   onMatrixSearchChange: (v: string) => void
   currentDetailHref: string
+  hierarchyIndex: Map<string, HierarchyEvalLocation> | null
+  hierarchyLocation: HierarchyEvalLocation | null
 }) {
   const { mode } = useAudienceMode()
   const isPolicy = mode === "policy"
@@ -169,6 +210,12 @@ function CompositeEvalView({
   const limitations = card?.purpose_and_intended_users?.limitations?.trim()
   const audience = card?.purpose_and_intended_users?.audience
   const audienceText = Array.isArray(audience) ? audience.join("; ") : audience
+  const familyHeader =
+    hierarchyLocation?.familyDisplayName && hierarchyLocation.familyDisplayName !== summary.evaluation_name
+      ? hierarchyLocation.familyDisplayName
+      : summary.composite_benchmark_name && summary.composite_benchmark_name !== summary.evaluation_name
+        ? summary.composite_benchmark_name
+        : null
   const lede = isPolicy
     ? overview || goal || `Composite aggregating ${subBenchmarkCount} component benchmarks across ${summary.models_count.toLocaleString()} models.`
     : goal || overview || `Composite aggregating ${subBenchmarkCount} component benchmarks across ${summary.models_count.toLocaleString()} models.`
@@ -182,9 +229,9 @@ function CompositeEvalView({
           className="mb-5 flex flex-wrap items-center gap-3 font-mono text-[11px] uppercase tracking-[0.12em]"
           style={{ color: "var(--fg-muted)" }}
         >
-          {summary.composite_benchmark_name && summary.composite_benchmark_name !== summary.evaluation_name && (
+          {familyHeader && (
             <>
-              <span>{summary.composite_benchmark_name}</span>
+              <span>{familyHeader}</span>
               <span style={{ color: "var(--fg-subtle)" }}>·</span>
             </>
           )}
@@ -291,6 +338,7 @@ function CompositeEvalView({
             sources={sources}
             subSummaries={subSummaries}
             currentDetailHref={currentDetailHref}
+            hierarchyIndex={hierarchyIndex}
           />
         ) : (
           <MatrixLeaderboard
@@ -313,16 +361,47 @@ function SubBenchmarkGrid({
   sources,
   subSummaries,
   currentDetailHref,
+  hierarchyIndex,
 }: {
   sources: NonNullable<BenchmarkEvalSummary["aggregate_sources"]>
   subSummaries: BenchmarkEvalSummary[]
   currentDetailHref: string
+  hierarchyIndex: Map<string, HierarchyEvalLocation> | null
 }) {
   const subMap = useMemo(
     () => new Map(subSummaries.map((s) => [s.evaluation_id, s])),
     [subSummaries]
   )
 
+  // Group sources by hierarchy family. When the hierarchy doesn't resolve a
+  // family for a source (or no hierarchy was loaded), bucket those entries
+  // under a single "Other" section instead of spamming per-eval headers.
+  type FamilyBucket = {
+    key: string
+    displayName: string | null
+    sources: NonNullable<BenchmarkEvalSummary["aggregate_sources"]>
+  }
+  const buckets = useMemo<FamilyBucket[]>(() => {
+    if (!hierarchyIndex) {
+      return [{ key: "__all__", displayName: null, sources }]
+    }
+    const ordered: FamilyBucket[] = []
+    const byKey = new Map<string, FamilyBucket>()
+    for (const source of sources) {
+      const location = hierarchyIndex.get(source.evaluation_id) ?? null
+      const key = location?.familyKey ?? "__unmapped__"
+      const displayName = location?.familyDisplayName ?? null
+      let bucket = byKey.get(key)
+      if (!bucket) {
+        bucket = { key, displayName, sources: [] }
+        byKey.set(key, bucket)
+        ordered.push(bucket)
+      }
+      bucket.sources.push(source)
+    }
+    return ordered
+  }, [sources, hierarchyIndex])
+
   if (sources.length === 0) {
     return (
       <div className="ec-card" style={{ padding: 32, textAlign: "center" }}>
@@ -331,67 +410,89 @@ function SubBenchmarkGrid({
     )
   }
 
-  return (
-    <div className="fam-grid">
-      {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 goal = card?.purpose_and_intended_users?.goal
-        const summaryLine = goal || overview
-
-        return (
-          <Link
-            key={source.evaluation_id}
-            href={`/evals/${source.evaluation_id}?from=${encodeURIComponent(currentDetailHref)}`}
-            className="fam-card group block"
-            style={{ textDecoration: "none", color: "inherit" }}
+  const renderCard = (source: NonNullable<BenchmarkEvalSummary["aggregate_sources"]>[number]) => {
+    const sub = subMap.get(source.evaluation_id)
+    const card = sub?.benchmark_card
+    const overview = card?.benchmark_details?.overview ?? sub?.metric_config?.evaluation_description
+    const goal = card?.purpose_and_intended_users?.goal
+    const summaryLine = goal || overview
+
+    return (
+      <Link
+        key={source.evaluation_id}
+        href={`/evals/${source.evaluation_id}?from=${encodeURIComponent(currentDetailHref)}`}
+        className="fam-card group block"
+        style={{ textDecoration: "none", color: "inherit" }}
+      >
+        <div className="flex items-start justify-between gap-2 mb-1">
+          <div className="fam-card-kind">Component benchmark</div>
+          <div className="fam-card-counts">
+            {source.models_count} model{source.models_count === 1 ? "" : "s"}
+          </div>
+        </div>
+        <h3 className="fam-card-name group-hover:text-[color:var(--accent)] transition-colors">
+          {card?.benchmark_details?.name ?? source.composite_benchmark_name}
+        </h3>
+        <div className="fam-card-org">{humanizeEvaluationId(source.evaluation_id)}</div>
+        {summaryLine && (
+          <p className="fam-card-summary line-clamp-3">{summaryLine}</p>
+        )}
+        {sub?.best_model && (
+          <div
+            className="mt-3 pt-3 text-[12px]"
+            style={{
+              borderTop: "1px dashed var(--border-soft)",
+              color: "var(--fg-muted)",
+            }}
           >
-            <div className="flex items-start justify-between gap-2 mb-1">
-              <div className="fam-card-kind">Component benchmark</div>
-              <div className="fam-card-counts">
-                {source.models_count} model{source.models_count === 1 ? "" : "s"}
-              </div>
-            </div>
-            <h3 className="fam-card-name group-hover:text-[color:var(--accent)] transition-colors">
-              {card?.benchmark_details?.name ?? source.composite_benchmark_name}
-            </h3>
-            <div className="fam-card-org">{humanizeEvaluationId(source.evaluation_id)}</div>
-            {summaryLine && (
-              <p className="fam-card-summary line-clamp-3">{summaryLine}</p>
-            )}
-            {sub?.best_model && (
-              <div
-                className="mt-3 pt-3 text-[12px]"
-                style={{
-                  borderTop: "1px dashed var(--border-soft)",
-                  color: "var(--fg-muted)",
-                }}
-              >
-                <span
-                  className="font-mono uppercase tracking-[0.12em] mr-2"
-                  style={{ fontSize: 9.5, color: "var(--fg-subtle)" }}
-                >
-                  Top
-                </span>
-                <span style={{ color: "var(--fg)", fontWeight: 600 }}>
-                  {sub.best_model.name}
-                </span>
-                <span className="ml-1 font-mono tabular-nums" style={{ color: "var(--fg-muted)" }}>
-                  {(sub.best_model.score * 100).toFixed(1)}%
-                </span>
-              </div>
-            )}
-            <div
-              className="mt-3 inline-flex items-center gap-1 font-mono text-[10px] uppercase tracking-[0.12em]"
-              style={{ color: "var(--accent)" }}
+            <span
+              className="font-mono uppercase tracking-[0.12em] mr-2"
+              style={{ fontSize: 9.5, color: "var(--fg-subtle)" }}
             >
-              Open
-              <ArrowUpRight className="h-3 w-3" />
-            </div>
-          </Link>
-        )
-      })}
+              Top
+            </span>
+            <span style={{ color: "var(--fg)", fontWeight: 600 }}>
+              {sub.best_model.name}
+            </span>
+            <span className="ml-1 font-mono tabular-nums" style={{ color: "var(--fg-muted)" }}>
+              {(sub.best_model.score * 100).toFixed(1)}%
+            </span>
+          </div>
+        )}
+        <div
+          className="mt-3 inline-flex items-center gap-1 font-mono text-[10px] uppercase tracking-[0.12em]"
+          style={{ color: "var(--accent)" }}
+        >
+          Open
+          <ArrowUpRight className="h-3 w-3" />
+        </div>
+      </Link>
+    )
+  }
+
+  // Render flat when only a single bucket — the per-family headers add no
+  // signal in that case (which is the typical "all components belong to one
+  // family" composite).
+  if (buckets.length <= 1) {
+    return <div className="fam-grid">{sources.map(renderCard)}</div>
+  }
+
+  return (
+    <div className="space-y-8">
+      {buckets.map((bucket) => (
+        <section key={bucket.key}>
+          <div
+            className="kicker mb-3"
+            style={{ display: "flex", alignItems: "baseline", gap: 8 }}
+          >
+            <span>{bucket.displayName ?? "Other"}</span>
+            <span style={{ color: "var(--fg-subtle)", fontWeight: 400 }}>
+              · {bucket.sources.length} component{bucket.sources.length === 1 ? "" : "s"}
+            </span>
+          </div>
+          <div className="fam-grid">{bucket.sources.map(renderCard)}</div>
+        </section>
+      ))}
     </div>
   )
 }

components/benchmark-detail.tsx

@@ -49,6 +49,10 @@ import type {
   EvalHierarchy,
   SubmissionAxis,
 } from "@/lib/backend-artifacts"
+import {
+  buildHierarchyEvalIndex,
+  type HierarchyEvalLocation,
+} from "@/lib/hierarchy-lookup"
 import { type CSSProperties, Fragment, useState, useEffect, useMemo } from "react"
 
 interface BenchmarkDetailProps {
@@ -268,7 +272,38 @@ function doesLabelMatchSuiteKey(label: string | null | undefined, compositeKey:
   return normalizeCompositeKey(normalizeDisplayKey(label)) === normalizeCompositeKey(compositeKey)
 }
 
-function getCompositeKey(group: BenchmarkGroup): string {
+function getHierarchyLocation(
+  group: BenchmarkGroup,
+  hierarchyIndex: Map<string, HierarchyEvalLocation> | null,
+): HierarchyEvalLocation | undefined {
+  if (!hierarchyIndex) {
+    return undefined
+  }
+  for (const variant of group.variants) {
+    const evalSummaryId = variant.evaluation.eval_summary_id
+    if (evalSummaryId) {
+      const location = hierarchyIndex.get(evalSummaryId)
+      if (location) {
+        return location
+      }
+    }
+  }
+  return undefined
+}
+
+function getCompositeKey(
+  group: BenchmarkGroup,
+  hierarchyIndex: Map<string, HierarchyEvalLocation> | null,
+): string {
+  // Prefer the curated grouping from hierarchy.json. The eval row's own
+  // family_id is null for ~7% of evals (e.g. CySE2 composites) and points
+  // at the leaf for singleton families, so the hierarchy is the only
+  // source that captures family→composite groupings authoritatively.
+  const location = getHierarchyLocation(group, hierarchyIndex)
+  if (location) {
+    return normalizeCompositeKey(location.familyKey)
+  }
+
   const evaluation = group.variants[0]?.evaluation
   const backendSuiteKey = evaluation?.family_id
 
@@ -283,7 +318,16 @@ function getCompositeDisplayName(key: string): string {
   return normalizeDisplayLabel(key)
 }
 
-function getCompositeName(group: BenchmarkGroup, compositeKey: string): string {
+function getCompositeName(
+  group: BenchmarkGroup,
+  compositeKey: string,
+  hierarchyIndex: Map<string, HierarchyEvalLocation> | null,
+): string {
+  const location = getHierarchyLocation(group, hierarchyIndex)
+  if (location?.familyDisplayName) {
+    return location.familyDisplayName
+  }
+
   const evaluation = group.variants[0]?.evaluation
   const benchmarkCardName = group.benchmarkCard?.benchmark_details?.name
   const backendParentName = evaluation?.benchmark_parent_name
@@ -307,11 +351,12 @@ function getCompositeName(group: BenchmarkGroup, compositeKey: string): string {
 function groupByComposite(
   groups: BenchmarkGroup[],
   modelIds: string[],
-  peerRanks: PeerRanksMap
+  peerRanks: PeerRanksMap,
+  hierarchyIndex: Map<string, HierarchyEvalLocation> | null
 ): CompositeGroup[] {
   const composites = new Map<string, BenchmarkGroup[]>()
   for (const group of groups) {
-    const key = getCompositeKey(group)
+    const key = getCompositeKey(group, hierarchyIndex)
     const existing = composites.get(key) ?? []
     existing.push(group)
     composites.set(key, existing)
@@ -335,7 +380,7 @@ function groupByComposite(
 
     return {
       compositeKey,
-      compositeName: benchmarks[0] ? getCompositeName(benchmarks[0], compositeKey) : getCompositeDisplayName(compositeKey),
+      compositeName: benchmarks[0] ? getCompositeName(benchmarks[0], compositeKey, hierarchyIndex) : getCompositeDisplayName(compositeKey),
       benchmarks,
       avgRawScore,
       avgNormalizedScore: avgScore,
@@ -1663,6 +1708,28 @@ export function BenchmarkDetail({
     loadPeerRanks().then(setPeerRanks)
   }, [])
 
+  // Build an eval_summary_id → family/composite lookup from hierarchy.json.
+  // ~31 eval_summary_ids appear in multiple families (e.g. mmlu-pro under
+  // both `mmlu` and `artificial-analysis`); use the eval row's own family_id
+  // as the disambiguating preference when present.
+  const hierarchyIndex = useMemo(() => {
+    if (!evalHierarchy) {
+      return null
+    }
+    const familyIdByEvalSummaryId = new Map<string, string>()
+    for (const evals of Object.values(summary.evaluations_by_category)) {
+      for (const evaluation of evals) {
+        if (evaluation.eval_summary_id && evaluation.family_id) {
+          familyIdByEvalSummaryId.set(evaluation.eval_summary_id, evaluation.family_id)
+        }
+      }
+    }
+    return buildHierarchyEvalIndex(
+      evalHierarchy,
+      (evalSummaryId) => familyIdByEvalSummaryId.get(evalSummaryId) ?? null,
+    )
+  }, [evalHierarchy, summary.evaluations_by_category])
+
   // Composite relevance score for benchmark ordering
   // relevance = population × 0.4 + rank_extremity × 0.3 + has_metadata × 0.2 + recency × 0.1
   const getRelevanceScore = useMemo(() => {
@@ -1985,8 +2052,13 @@ export function BenchmarkDetail({
         ?.evaluation.eval_summary_id
       const evalEntry =
         evalId && comparisonIndex ? comparisonIndex.evals[evalId] : null
-      const famKey = evalEntry?.family_id ?? group.key
+      const hierarchyLocation = evalId
+        ? hierarchyIndex?.get(evalId) ?? null
+        : null
+      const famKey =
+        hierarchyLocation?.familyKey ?? evalEntry?.family_id ?? group.key
       const famName =
+        hierarchyLocation?.familyDisplayName ||
         evalEntry?.family_display_name ||
         evalEntry?.display_name ||
         group.title
@@ -2014,31 +2086,31 @@ export function BenchmarkDetail({
           kind: f.groups.length > 1 ? "multi-eval" as const : "single-eval" as const,
         })),
       }))
-  }, [filteredBenchmarkGroups, comparisonIndex, summary.categories_covered])
+  }, [filteredBenchmarkGroups, comparisonIndex, hierarchyIndex, summary.categories_covered])
 
   const compositeGroups = useMemo(() => {
-    const groups = groupByComposite(filteredBenchmarkGroups, modelIds, peerRanks)
+    const groups = groupByComposite(filteredBenchmarkGroups, modelIds, peerRanks, hierarchyIndex)
     // Re-sort composites by max relevance of their benchmarks
     return groups.sort((a, b) => {
       const aMax = Math.max(...a.benchmarks.map(getRelevanceScore))
       const bMax = Math.max(...b.benchmarks.map(getRelevanceScore))
       return bMax - aMax
     })
-  }, [filteredBenchmarkGroups, modelIds, peerRanks, getRelevanceScore])
+  }, [filteredBenchmarkGroups, modelIds, peerRanks, getRelevanceScore, hierarchyIndex])
 
   const categoryCompositeSections = useMemo(
     () =>
       groupedFilteredBenchmarkGroups
         .map(({ category, groups }) => ({
           category,
-          composites: groupByComposite(groups, modelIds, peerRanks).sort((a, b) => {
+          composites: groupByComposite(groups, modelIds, peerRanks, hierarchyIndex).sort((a, b) => {
             const aMax = Math.max(...a.benchmarks.map(getRelevanceScore))
             const bMax = Math.max(...b.benchmarks.map(getRelevanceScore))
             return bMax - aMax
           }),
         }))
         .filter((section) => section.composites.length > 0),
-    [groupedFilteredBenchmarkGroups, modelIds, peerRanks, getRelevanceScore]
+    [groupedFilteredBenchmarkGroups, modelIds, peerRanks, getRelevanceScore, hierarchyIndex]
   )
 
   const categoryScoreRanges = useMemo(() => {
@@ -2456,9 +2528,17 @@ export function BenchmarkDetail({
       const evalEntry = comparisonIndex.evals[evalId]
       if (!evalEntry) continue
 
-      const famKey = evalEntry.family_id ?? evalId
+      // Prefer hierarchy.json grouping. The comparison-index family_id is
+      // null for ~7% of evals (e.g. CySE2 composites) and points at the
+      // leaf for singleton families, so the hierarchy is the only source
+      // that captures family→composite groupings authoritatively.
+      const hierarchyLocation = hierarchyIndex?.get(evalId) ?? null
+      const famKey = hierarchyLocation?.familyKey ?? evalEntry.family_id ?? evalId
       const famName =
-        evalEntry.family_display_name || evalEntry.display_name || famKey
+        hierarchyLocation?.familyDisplayName ||
+        evalEntry.family_display_name ||
+        evalEntry.display_name ||
+        famKey
       const bucket = familyBuckets.get(famKey) ?? {
         familyName: famName,
         category: group.category,
@@ -2673,7 +2753,7 @@ export function BenchmarkDetail({
     }
 
     return units
-  }, [comparisonIndex, filteredBenchmarkGroups])
+  }, [comparisonIndex, filteredBenchmarkGroups, hierarchyIndex])
 
   const [activeViewByUnit, setActiveViewByUnit] = useState<Record<string, string>>({})
   const [activeMetricByUnit, setActiveMetricByUnit] = useState<Record<string, string>>({})

components/eval-detail.tsx

@@ -52,6 +52,7 @@ import {
 } from "lucide-react"
 import type { BenchmarkCard } from "@/lib/benchmark-schema"
 import type { BenchmarkEvalSummary, ModelResultForBenchmark } from "@/lib/eval-processing"
+import type { HierarchyEvalLocation } from "@/lib/hierarchy-lookup"
 import { PolicyOverview } from "@/components/policy-overview"
 import { ResearcherReproducibilityCard } from "@/components/researcher-reproducibility-card"
 import { KnownIssuesPanel } from "@/components/known-issues-panel"
@@ -61,6 +62,7 @@ import { FlagScoreButton } from "@/components/flag-score-button"
 
 interface EvalDetailProps {
   summary: BenchmarkEvalSummary
+  hierarchyLocation?: HierarchyEvalLocation | null
 }
 
 interface LeaderboardRow {
@@ -478,7 +480,7 @@ function getSetupLabel(modelResult: ModelResultForBenchmark): string {
   return parts.join(" ")
 }
 
-export function EvalDetail({ summary }: EvalDetailProps) {
+export function EvalDetail({ summary, hierarchyLocation }: EvalDetailProps) {
   const { mode } = useAudienceMode()
   const isResearchView = mode === "research"
   const hasMultiMetricLeaderboard =
@@ -581,9 +583,21 @@ export function EvalDetail({ summary }: EvalDetailProps) {
       [key]: !current[key],
     }))
 
-  const headerOrg = summary.composite_benchmark_name && summary.composite_benchmark_name !== summary.evaluation_name
-    ? summary.composite_benchmark_name
-    : null
+  // Prefer the curated family name from hierarchy.json — the producer's
+  // composite_benchmark_name often equals the eval's own slug (e.g.
+  // "cyse2_interpreter_abuse"), so the header repeats itself. When the
+  // hierarchy resolves a different parent family ("CySE2"), use that instead.
+  const hierarchyHeaderOrg = (() => {
+    const familyName = hierarchyLocation?.familyDisplayName?.trim()
+    if (!familyName || familyName === summary.evaluation_name) {
+      return null
+    }
+    return familyName
+  })()
+  const headerOrg = hierarchyHeaderOrg
+    ?? (summary.composite_benchmark_name && summary.composite_benchmark_name !== summary.evaluation_name
+      ? summary.composite_benchmark_name
+      : null)
 
   const heroLede = isResearchView
     ? summary.metric_config.evaluation_description

lib/hierarchy-lookup.ts

@@ -0,0 +1,92 @@
+import type {
+  EvalHierarchy,
+  HierarchyComposite,
+  HierarchyFamily,
+} from "@/lib/backend-artifacts"
+
+export interface HierarchyEvalLocation {
+  familyKey: string
+  familyDisplayName: string
+  compositeKey?: string
+  compositeDisplayName?: string
+}
+
+interface FamilyAppearance {
+  family: HierarchyFamily
+  composite?: HierarchyComposite
+}
+
+function findComposite(
+  family: HierarchyFamily,
+  evalSummaryId: string,
+): HierarchyComposite | undefined {
+  const composites = family.composites
+  if (!composites?.length) {
+    return undefined
+  }
+  const sourcePrefix = evalSummaryId.split("%2F")[0]
+  return composites.find((composite) => composite.key === sourcePrefix)
+}
+
+function buildAppearancesIndex(
+  hierarchy: EvalHierarchy | null | undefined,
+): Map<string, FamilyAppearance[]> {
+  const index = new Map<string, FamilyAppearance[]>()
+  if (!hierarchy?.families) {
+    return index
+  }
+
+  for (const family of hierarchy.families) {
+    for (const evalSummaryId of family.eval_summary_ids ?? []) {
+      const composite = findComposite(family, evalSummaryId)
+      const list = index.get(evalSummaryId) ?? []
+      list.push({ family, composite })
+      index.set(evalSummaryId, list)
+    }
+  }
+
+  return index
+}
+
+/**
+ * Build a lookup that maps each `eval_summary_id` to the family / composite
+ * that contains it in `hierarchy.json`. The model-detail benchmark grouping
+ * needs this because the eval row's own `family_id` is null for ~7% of evals
+ * (e.g. CySE2 composites) and points at the leaf instead of the parent for
+ * ~70% (singleton families). The hierarchy is the only source that captures
+ * curated family→composite→benchmark grouping.
+ *
+ * 31 eval_summary_ids appear in multiple families. The optional
+ * `preferFamilyKey(evalSummaryId)` callback lets the caller pick the canonical
+ * family — typically by passing in the eval row's own `family_id`. When no
+ * preference is given, the first family encountered wins.
+ */
+export function buildHierarchyEvalIndex(
+  hierarchy: EvalHierarchy | null | undefined,
+  preferFamilyKey?: (evalSummaryId: string) => string | null | undefined,
+): Map<string, HierarchyEvalLocation> {
+  const appearances = buildAppearancesIndex(hierarchy)
+  const index = new Map<string, HierarchyEvalLocation>()
+
+  for (const [evalSummaryId, candidates] of appearances) {
+    let chosen = candidates[0]
+    if (candidates.length > 1) {
+      const preferredKey = preferFamilyKey?.(evalSummaryId)?.toString().trim()
+      if (preferredKey) {
+        const match = candidates.find((c) => c.family.key === preferredKey)
+        if (match) {
+          chosen = match
+        }
+      }
+    }
+
+    index.set(evalSummaryId, {
+      familyKey: chosen.family.key,
+      familyDisplayName: chosen.family.display_name,
+      compositeKey: chosen.composite?.key,
+      compositeDisplayName: chosen.composite?.display_name,
+    })
+  }
+
+  return index
+}