Switch family/model views to curated category tags

Sanitize family/composite/benchmark display names against their key
(falling back to a humanized slug when the warehouse leaks an unrelated
display_name), then propagate derivedTags bottom-up so a family inherits
the union of its children's tags. The /evals family table now shows tag
chips instead of the raw "category" column, and selecting a category
pill auto-expands matching families and filters their leaves. The model
view re-buckets benchmark groups by the leaf's curated tag (via the
hierarchy lookup) instead of the legacy 5-bucket category.

app/evals/page.tsx

@@ -535,6 +535,7 @@ function EvalsPageInner() {
             evalItems={evalItems}
             benchmarkCards={benchmarkCards}
             domainFilter={domainFilter}
+            categoryFilter={new Set(selectedCategories)}
           />
         )}
 

components/benchmark-detail.tsx

@@ -37,6 +37,7 @@ import {
 } from "lucide-react"
 import type { BenchmarkCard, BenchmarkEvaluation, CategoryType, EvaluationResult } from "@/lib/benchmark-schema"
 import { getCategoryColor as getCategoryTone, inferCategoryFromBenchmark } from "@/lib/benchmark-schema"
+import { formatTagLabel } from "@/lib/benchmark-tags"
 import type { BenchmarkEvalSummary } from "@/lib/eval-processing"
 import type { ModelSummaryCore } from "@/lib/benchmark-schema"
 import { lookupBenchmarkCard } from "@/lib/benchmark-metadata-utils"
@@ -1819,16 +1820,25 @@ export function BenchmarkDetail({
 
   const allCategoryResults = useMemo(
     () =>
-      Object.entries(summary.evaluations_by_category).flatMap(([category, evals]) =>
-        evals.flatMap((evaluation) =>
-          evaluation.evaluation_results.map((result) => ({
+      Object.entries(summary.evaluations_by_category).flatMap(([fallbackCategory, evals]) =>
+        evals.flatMap((evaluation) => {
+          // Re-bucket by curated tag from data/benchmarks/categories.json.
+          // The hierarchy lookup gives us the leaf benchmark's derivedTags;
+          // the first tag becomes the displayed category. Fall back to the
+          // legacy 5-bucket category only when no tag is found, so existing
+          // ordering / filter wiring still works.
+          const evalSummaryId = evaluation.eval_summary_id
+          const tags = evalSummaryId ? hierarchyIndex?.get(evalSummaryId)?.tags : undefined
+          const primaryTag = tags && tags.length > 0 ? tags[0] : null
+          const category = (primaryTag ?? fallbackCategory) as CategoryType
+          return evaluation.evaluation_results.map((result) => ({
             evaluation,
             result,
-            category: category as CategoryType,
+            category,
           }))
-        )
+        })
       ),
-    [summary.evaluations_by_category]
+    [summary.evaluations_by_category, hierarchyIndex]
   )
 
   const policyHighlights = useMemo(() => {
@@ -1927,9 +1937,26 @@ export function BenchmarkDetail({
     [allCategoryResults, benchmarkCards, currentDetailHref]
   )
 
+  // Categories actually present in this model's benchmark groups, derived
+  // from the curated tag bucketing in `allCategoryResults`. We no longer
+  // trust `summary.categories_covered` (legacy 5-bucket) for ordering /
+  // filtering; build the list locally so the new tag vocabulary surfaces.
+  const availableCategories = useMemo(() => {
+    const order: string[] = []
+    const seen = new Set<string>()
+    for (const group of benchmarkGroups) {
+      const cat = group.category as unknown as string
+      if (!seen.has(cat)) {
+        seen.add(cat)
+        order.push(cat)
+      }
+    }
+    return order as unknown as CategoryType[]
+  }, [benchmarkGroups])
+
   // First-party vs third-party split per category (for the donut + bars).
   const evaluatorMix = useMemo(() => {
-    const order = new Map(summary.categories_covered.map((cat, i) => [cat, i]))
+    const order = new Map(availableCategories.map((cat, i) => [cat, i]))
     const byCat = new Map<CategoryType, { first: number; third: number; collab: number; other: number }>()
     let firstTotal = 0
     let thirdTotal = 0
@@ -1963,12 +1990,7 @@ export function BenchmarkDetail({
       otherTotal,
       grand,
     }
-  }, [benchmarkGroups, summary.categories_covered])
-
-  const availableCategories = useMemo(() => {
-    const presentCategories = new Set(benchmarkGroups.map((group) => group.category))
-    return summary.categories_covered.filter((category) => presentCategories.has(category))
-  }, [benchmarkGroups, summary.categories_covered])
+  }, [benchmarkGroups, availableCategories])
 
   const filteredBenchmarkGroups = useMemo(() => {
     const query = benchmarkSearch.trim().toLowerCase()
@@ -2017,7 +2039,7 @@ export function BenchmarkDetail({
   }, [benchmarkGroups, benchmarkSearch, benchmarkSort, selectedCategories, modelId, peerRanks])
 
   const groupedFilteredBenchmarkGroups = useMemo(() => {
-    const order = new Map(summary.categories_covered.map((category, index) => [category, index]))
+    const order = new Map(availableCategories.map((category, index) => [category, index]))
     const groups = new Map<CategoryType, BenchmarkGroup[]>()
 
     for (const benchmarkGroup of filteredBenchmarkGroups) {
@@ -2029,7 +2051,7 @@ export function BenchmarkDetail({
     return Array.from(groups.entries())
       .sort((a, b) => (order.get(a[0]) ?? 999) - (order.get(b[0]) ?? 999))
       .map(([category, groups]) => ({ category, groups }))
-  }, [filteredBenchmarkGroups, summary.categories_covered])
+  }, [filteredBenchmarkGroups, availableCategories])
 
   // Family-bucketed groups for the list view, mirroring plotboxUnits logic.
   // When comparisonIndex is available we use the backend-authoritative
@@ -2044,7 +2066,7 @@ export function BenchmarkDetail({
   }
   const listFamiliesByCategory = useMemo(() => {
     const order = new Map(
-      summary.categories_covered.map((category, index) => [category, index])
+      availableCategories.map((category, index) => [category, index])
     )
     const byCategory = new Map<CategoryType, Map<string, ListFamily>>()
 
@@ -2087,7 +2109,7 @@ export function BenchmarkDetail({
           kind: f.groups.length > 1 ? "multi-eval" as const : "single-eval" as const,
         })),
       }))
-  }, [filteredBenchmarkGroups, comparisonIndex, hierarchyIndex, summary.categories_covered])
+  }, [filteredBenchmarkGroups, comparisonIndex, hierarchyIndex, availableCategories])
 
   const compositeGroups = useMemo(() => {
     const groups = groupByComposite(filteredBenchmarkGroups, modelIds, peerRanks, hierarchyIndex)
@@ -2998,7 +3020,7 @@ export function BenchmarkDetail({
           <div className="min-w-0 flex-1">
             <div className="flex flex-wrap items-center gap-2">
               <span className="font-mono text-[9px] uppercase tracking-[0.18em] text-[color:var(--fg-subtle)] font-semibold">
-                {unit.category}
+                {formatTagLabel(unit.category as unknown as string)}
               </span>
               {showChildKindBadge && (
                 <span className="font-mono text-[9px] uppercase tracking-[0.15em] text-[color:var(--fg-subtle)]">
@@ -3794,7 +3816,7 @@ export function BenchmarkDetail({
                   }
                   className={`ec-pill ${isSelected ? "on" : ""}`}
                 >
-                  {category}
+                  {formatTagLabel(category as unknown as string)}
                 </button>
               )
             })}
@@ -3808,7 +3830,7 @@ export function BenchmarkDetail({
         ) : benchmarkViewMode === "grid" ? (
           (() => {
             const categoryOrder = new Map(
-              summary.categories_covered.map((cat, i) => [cat, i])
+              availableCategories.map((cat, i) => [cat, i])
             )
             const byCategory = new Map<CategoryType, PlotboxUnit[]>()
             for (const unit of plotboxUnits) {
@@ -3841,7 +3863,7 @@ export function BenchmarkDetail({
                       <div className="flex items-baseline justify-between gap-3 border-b border-[color:var(--border-soft)] pb-2">
                         <div className="flex items-baseline gap-3">
                           <span className="font-mono text-[10px] uppercase tracking-[0.2em] text-[color:var(--accent)] font-semibold">
-                            {category}
+                            {formatTagLabel(category)}
                           </span>
                           <span className="font-mono text-[10px] uppercase tracking-[0.15em] text-[color:var(--fg-subtle)]">
                             {totalBenchmarks} benchmark{totalBenchmarks === 1 ? "" : "s"}
@@ -4042,7 +4064,7 @@ export function BenchmarkDetail({
                 <section key={`list-cat-${category}`}>
                   <div className="mb-3 flex items-baseline justify-between gap-3 border-b border-[color:var(--fg)] pb-2">
                     <span className="font-mono text-[10px] uppercase tracking-[0.2em] text-[color:var(--accent)] font-semibold">
-                      {category}
+                      {formatTagLabel(category as unknown as string)}
                     </span>
                     <span className="font-mono text-[10px] uppercase tracking-[0.15em] text-[color:var(--fg-subtle)]">
                       {families.length} {families.length === 1 ? "family" : "families"} · {totalBenchmarks} benchmark{totalBenchmarks === 1 ? "" : "s"} · {totalRows} row{totalRows === 1 ? "" : "s"}
@@ -4883,7 +4905,7 @@ function AggregatedBenchmarkCard({
             <div className="flex items-center gap-3">
               {/* Category dot */}
               <span className={`shrink-0 inline-flex items-center rounded-full border px-2 py-0.5 text-[10px] font-semibold ${getCategoryTone(group.category)}`}>
-                {group.category}
+                {formatTagLabel(group.category as unknown as string)}
               </span>
 
               {/* Name + domains */}
@@ -5453,7 +5475,7 @@ function BenchmarkDeepDiveDialogPanel({
         <div className="flex items-start justify-between gap-4 pr-6">
           <div className="min-w-0 flex-1">
             <div className="kicker mb-2">
-              <span className="text-[color:var(--accent)] font-semibold mr-2">{group.category}</span>
+              <span className="text-[color:var(--accent)] font-semibold mr-2">{formatTagLabel(group.category as unknown as string)}</span>
               <span className="text-[color:var(--fg-subtle)]">· Benchmark deep dive</span>
             </div>
             <DialogTitle className="text-[28px] leading-[1.05] tracking-[-0.02em] font-bold text-[color:var(--fg)]">
@@ -6357,7 +6379,7 @@ function EvaluatorMix({ mix }: { mix: EvaluatorMixData }) {
                 style={{ borderBottom: i < rows.length - 1 ? "1px solid var(--border-soft)" : "none" }}
               >
                 <div>
-                  <div className="text-[13px] font-medium capitalize">{row.category}</div>
+                  <div className="text-[13px] font-medium capitalize">{formatTagLabel(row.category as unknown as string)}</div>
                   <div className="font-mono text-[10px] uppercase tracking-[0.1em] text-[color:var(--fg-subtle)] mt-0.5">
                     {row.total} row{row.total === 1 ? "" : "s"}
                   </div>

components/family-table.tsx

@@ -5,7 +5,8 @@ import { useRouter } from "next/navigation"
 import { ArrowUpRight, ChevronDown, ChevronRight } from "lucide-react"
 
 import type { HierarchyBenchmark, HierarchyFamily } from "@/lib/backend-artifacts"
-import type { BenchmarkCard, CategoryType } from "@/lib/benchmark-schema"
+import { formatTagLabel } from "@/lib/benchmark-tags"
+import type { BenchmarkCard } from "@/lib/benchmark-schema"
 import type { BenchmarkEvalListItem } from "@/lib/eval-processing"
 import { humanizeEvaluationId } from "@/lib/utils"
 
@@ -35,6 +36,11 @@ interface FamilyTableProps {
    *  families are kept only when their domains intersect the filter.
    *  Pass `null`/`undefined` to disable filtering. */
   domainFilter?: Set<string> | null
+  /** Curated category-tag slugs (data/benchmarks/categories.json
+   *  vocabulary) to filter on. Same expand-and-filter behaviour as
+   *  `domainFilter`: matching families auto-expand, leaves are
+   *  restricted to those whose `derivedTags` intersect the selection. */
+  categoryFilter?: Set<string> | null
 }
 
 function slugify(value: string | null | undefined): string {
@@ -66,6 +72,7 @@ interface LeafEntry {
   leafName: string
   evalsCount: number
   domains: string[]
+  tags: string[]
 }
 
 /**
@@ -115,6 +122,7 @@ function collectLeafEntries(
       leafName: benchmark.display_name || benchmark.key,
       evalsCount: ids.length,
       domains: Array.from(collected),
+      tags: benchmark.derivedTags ?? [],
     })
   }
 
@@ -231,7 +239,7 @@ interface RowData {
   navId: string | null
   name: string
   keySlug: string
-  category: CategoryType
+  tags: string[]
   benchmarks: number
   evalsCount: number
   leaves: LeafEntry[]
@@ -247,24 +255,48 @@ export function FamilyTable({
   evalItems,
   benchmarkCards,
   domainFilter,
+  categoryFilter,
 }: FamilyTableProps) {
   const router = useRouter()
   const [expanded, setExpanded] = useState<Record<string, boolean>>({})
 
-  const filterActive = Boolean(domainFilter && domainFilter.size > 0)
+  const domainFilterActive = Boolean(domainFilter && domainFilter.size > 0)
+  const categoryFilterActive = Boolean(categoryFilter && categoryFilter.size > 0)
+  const filterActive = domainFilterActive || categoryFilterActive
 
-  function leafMatchesFilter(leaf: LeafEntry): boolean {
-    if (!filterActive || !domainFilter) return true
+  function leafMatchesDomain(leaf: LeafEntry): boolean {
+    if (!domainFilterActive || !domainFilter) return true
     return leaf.domains.some((d) => domainFilter.has(d))
   }
 
+  function leafMatchesCategory(leaf: LeafEntry): boolean {
+    if (!categoryFilterActive || !categoryFilter) return true
+    return leaf.tags.some((t) => categoryFilter.has(t))
+  }
+
+  function leafMatchesFilter(leaf: LeafEntry): boolean {
+    return leafMatchesDomain(leaf) && leafMatchesCategory(leaf)
+  }
+
   function familyMatchesFilter(
     fam: HierarchyFamily,
     navId: string | null,
     leafEntries: LeafEntry[],
   ): boolean {
-    if (!filterActive || !domainFilter) return true
+    if (!filterActive) return true
     if (leafEntries.some(leafMatchesFilter)) return true
+    if (categoryFilterActive && categoryFilter) {
+      // Family-level tag union (from derivedTags) — covers single-benchmark
+      // families and aggregator families whose own bucket holds the tag
+      // even if no leaf row carries it.
+      for (const tag of fam.derivedTags ?? []) {
+        if (categoryFilter.has(tag)) {
+          // Only counts if the domain side also matches (or is inactive).
+          if (!domainFilterActive) return true
+        }
+      }
+    }
+    if (!domainFilterActive || !domainFilter) return false
     const candidates: BenchmarkCard | undefined = (() => {
       if (navId) {
         const fromList = evalItems?.get(navId)?.benchmark_card
@@ -336,7 +368,7 @@ export function FamilyTable({
         navId,
         name: displayName,
         keySlug: fam.key,
-        category: (fam.category ?? "General") as CategoryType,
+        tags: fam.derivedTags ?? [],
         benchmarks: benchmarkCount,
         evalsCount: fam.evals_count ?? metricCount,
         leaves: visibleLeafEntries,
@@ -346,15 +378,15 @@ export function FamilyTable({
     }
     return out
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [families, evalItems, benchmarkCards, domainFilter])
+  }, [families, evalItems, benchmarkCards, domainFilter, categoryFilter])
 
   return (
     <div className="overflow-x-auto">
       <table className="ec-htable">
         <thead>
           <tr>
-            <th style={{ width: "60%" }}>Family</th>
-            <th>Category</th>
+            <th style={{ width: "55%" }}>Family</th>
+            <th>Categories</th>
             <th className="num">Benchmarks</th>
             <th className="num">Reported results</th>
             <th style={{ width: 90 }} />
@@ -435,9 +467,33 @@ export function FamilyTable({
                     </div>
                   </td>
                   <td>
-                    <span className="inline-flex items-center font-mono text-[10px] uppercase tracking-[0.12em] text-[color:var(--fg-muted)] border border-[color:var(--border-soft)] bg-[color:var(--bg)] px-2 py-0.5">
-                      {row.category}
-                    </span>
+                    {row.tags.length === 0 ? (
+                      <span
+                        className="inline-flex items-center font-mono text-[10px] uppercase tracking-[0.12em] text-[color:var(--fg-subtle)]"
+                      >
+                        —
+                      </span>
+                    ) : (
+                      <div className="flex flex-wrap gap-1">
+                        {row.tags.map((tag) => {
+                          const highlighted =
+                            categoryFilter && categoryFilter.has(tag)
+                          return (
+                            <span
+                              key={tag}
+                              className="inline-flex items-center font-mono text-[10px] uppercase tracking-[0.12em] border px-1.5 py-0.5"
+                              style={{
+                                color: highlighted ? "var(--bg)" : "var(--fg-muted)",
+                                borderColor: highlighted ? "var(--fg)" : "var(--border-soft)",
+                                background: highlighted ? "var(--fg)" : "var(--bg)",
+                              }}
+                            >
+                              {formatTagLabel(tag)}
+                            </span>
+                          )
+                        })}
+                      </div>
+                    )}
                   </td>
                   <td className="num font-mono text-[13px]">
                     {row.benchmarks.toLocaleString()}

lib/benchmark-tags.ts

@@ -146,31 +146,121 @@ export function hasCuratedTags(...candidates: Array<string | null | undefined>):
  * benchmarks, 709 slices): 95.8% / 98.6% / 99.7% respectively.
  */
 export function decorateHierarchyDerivedTags(h: EvalHierarchy): EvalHierarchy {
-  for (const fam of h.families ?? []) decorateFamily(fam)
+  for (const fam of h.families ?? []) {
+    sanitizeFamilyDisplayNames(fam)
+    decorateFamily(fam)
+  }
   return h
 }
 
+// Workaround for an upstream warehouse bug where some families inherit a
+// sibling family's `display_name` (e.g. `math-mc` and `gsm-mc` both ship
+// with "wasp (Writer's Assessor of System Performance)"). When the
+// display_name shares no token with the entry's `key`, fall back to a
+// readable rendering of the key.
+function shareToken(displayName: string, key: string): boolean {
+  const norm = (s: string) => s.toLowerCase().replace(/[^a-z0-9]+/g, "")
+  const k = norm(key)
+  if (!k) return true
+  return norm(displayName).includes(k)
+}
+
+// Acronyms that should stay uppercase when humanizing a slug. Mirrors
+// the set used in family-table.tsx; kept here so the sanitiser can
+// produce the same output across surfaces.
+const ACRONYMS = new Set([
+  "ai", "aa", "api", "arc", "bbh", "bfcl", "cli", "cv", "gpqa", "gpt",
+  "gsm", "hf", "hle", "llm", "llms", "mc", "ml", "mt", "nlp", "qa",
+  "rl", "sql", "swe", "vlm", "vqa",
+])
+
+function humanizeKey(key: string): string {
+  const parts = key.split(/[_\-\s]+/).filter(Boolean)
+  if (parts.length === 0) return key
+  return parts
+    .map((word) => {
+      const lower = word.toLowerCase()
+      if (ACRONYMS.has(lower)) return word.toUpperCase()
+      // Treat short all-letter parts (≤4 chars) as acronym-like.
+      if (word.length <= 4 && /^[a-zA-Z]+$/.test(word)) return word.toUpperCase()
+      return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
+    })
+    .join("-")
+}
+
+function sanitizeName(displayName: string | null | undefined, key: string): string {
+  if (!displayName || !displayName.trim()) return humanizeKey(key)
+  if (!shareToken(displayName, key)) return humanizeKey(key)
+  return displayName
+}
+
+function sanitizeFamilyDisplayNames(fam: HierarchyFamily): void {
+  fam.display_name = sanitizeName(fam.display_name, fam.key)
+  for (const c of fam.composites ?? []) {
+    c.display_name = sanitizeName(c.display_name, c.key)
+    for (const b of c.benchmarks ?? []) {
+      b.display_name = sanitizeName(b.display_name, b.key)
+      for (const s of b.slices ?? []) s.display_name = sanitizeName(s.display_name, s.key)
+    }
+  }
+  for (const b of fam.standalone_benchmarks ?? []) {
+    b.display_name = sanitizeName(b.display_name, b.key)
+    for (const s of b.slices ?? []) s.display_name = sanitizeName(s.display_name, s.key)
+  }
+  for (const b of fam.benchmarks ?? []) {
+    b.display_name = sanitizeName(b.display_name, b.key)
+    for (const s of b.slices ?? []) s.display_name = sanitizeName(s.display_name, s.key)
+  }
+}
+
 function decorateFamily(fam: HierarchyFamily): void {
   fam.derivedTags = getBenchmarkTags(null, fam.display_name, fam.key)
   for (const b of fam.standalone_benchmarks ?? []) decorateBenchmark(b, fam.derivedTags)
   for (const b of fam.benchmarks ?? []) decorateBenchmark(b, fam.derivedTags)
   for (const c of fam.composites ?? []) decorateComposite(c, fam.derivedTags)
+  // Bottom-up union: parents accumulate their descendants' tags so a
+  // family-level filter ("mathematics") matches families whose own name
+  // doesn't, but whose children do.
+  fam.derivedTags = unionTags(
+    fam.derivedTags,
+    ...(fam.standalone_benchmarks ?? []).map((b) => b.derivedTags ?? []),
+    ...(fam.benchmarks ?? []).map((b) => b.derivedTags ?? []),
+    ...(fam.composites ?? []).map((c) => c.derivedTags ?? []),
+  )
 }
 
 function decorateComposite(comp: HierarchyComposite, parentTags: string[]): void {
   comp.derivedTags = getBenchmarkTags(parentTags, comp.display_name, comp.key)
   for (const b of comp.benchmarks ?? []) decorateBenchmark(b, comp.derivedTags)
+  comp.derivedTags = unionTags(
+    comp.derivedTags,
+    ...(comp.benchmarks ?? []).map((b) => b.derivedTags ?? []),
+  )
 }
 
 function decorateBenchmark(b: HierarchyBenchmark, parentTags: string[]): void {
   b.derivedTags = getBenchmarkTags(parentTags, b.display_name, b.key)
   for (const s of b.slices ?? []) decorateSlice(s, b.derivedTags)
+  b.derivedTags = unionTags(b.derivedTags, ...(b.slices ?? []).map((s) => s.derivedTags ?? []))
 }
 
 function decorateSlice(s: HierarchySlice, parentTags: string[]): void {
   s.derivedTags = getBenchmarkTags(parentTags, s.display_name, s.key)
 }
 
+function unionTags(...lists: Array<string[] | null | undefined>): string[] {
+  const seen = new Set<string>()
+  const out: string[] = []
+  for (const list of lists) {
+    for (const tag of list ?? []) {
+      if (!tag || seen.has(tag)) continue
+      seen.add(tag)
+      out.push(tag)
+    }
+  }
+  return out
+}
+
 /**
  * Render a tag for display: snake_case → Sentence case.
  * "software_engineering" → "Software engineering";

lib/hierarchy-lookup.ts

@@ -9,11 +9,17 @@ export interface HierarchyEvalLocation {
   familyDisplayName: string
   compositeKey?: string
   compositeDisplayName?: string
+  /** Curated category tags (data/benchmarks/categories.json vocabulary)
+   *  for the leaf benchmark this eval belongs to, falling back to its
+   *  composite/family. Decorated by `decorateHierarchyDerivedTags` at
+   *  hydration time. */
+  tags?: string[]
 }
 
 interface FamilyAppearance {
   family: HierarchyFamily
   composite?: HierarchyComposite
+  benchmarkTags?: string[]
 }
 
 function findComposite(
@@ -28,6 +34,24 @@ function findComposite(
   return composites.find((composite) => composite.key === sourcePrefix)
 }
 
+function findBenchmarkTags(
+  family: HierarchyFamily,
+  composite: HierarchyComposite | undefined,
+  evalSummaryId: string,
+): string[] | undefined {
+  const benchmarks = [
+    ...(composite?.benchmarks ?? []),
+    ...(family.standalone_benchmarks ?? []),
+    ...(family.benchmarks ?? []),
+  ]
+  for (const benchmark of benchmarks) {
+    if (benchmark.summary_eval_ids?.includes(evalSummaryId)) {
+      return benchmark.derivedTags
+    }
+  }
+  return undefined
+}
+
 function buildAppearancesIndex(
   hierarchy: EvalHierarchy | null | undefined,
 ): Map<string, FamilyAppearance[]> {
@@ -39,8 +63,9 @@ function buildAppearancesIndex(
   for (const family of hierarchy.families) {
     for (const evalSummaryId of family.eval_summary_ids ?? []) {
       const composite = findComposite(family, evalSummaryId)
+      const benchmarkTags = findBenchmarkTags(family, composite, evalSummaryId)
       const list = index.get(evalSummaryId) ?? []
-      list.push({ family, composite })
+      list.push({ family, composite, benchmarkTags })
       index.set(evalSummaryId, list)
     }
   }
@@ -80,11 +105,20 @@ export function buildHierarchyEvalIndex(
       }
     }
 
+    // Tag preference order for the leaf: benchmark > composite > family.
+    // We want the most specific tags available so the model-view bucketing
+    // groups by leaf semantics, not by the family-level union.
+    const tags =
+      chosen.benchmarkTags && chosen.benchmarkTags.length > 0
+        ? chosen.benchmarkTags
+        : chosen.composite?.derivedTags ?? chosen.family.derivedTags ?? []
+
     index.set(evalSummaryId, {
       familyKey: chosen.family.key,
       familyDisplayName: chosen.family.display_name,
       compositeKey: chosen.composite?.key,
       compositeDisplayName: chosen.composite?.display_name,
+      tags,
     })
   }