format fixes - validated evals

app/evaluators/[...id]/page.tsx

@@ -4,15 +4,14 @@ import { Suspense, useCallback, useEffect, useMemo, useState } from "react"
 import { useParams, useRouter, useSearchParams } from "next/navigation"
 import { ArrowLeft, Search } from "lucide-react"
 
-import { EvalCard } from "@/components/eval-card"
-import { InfiniteScrollSentinel } from "@/components/infinite-scroll"
+import { FamilyTable, type FamilySortCol } from "@/components/family-table"
 import { Navigation } from "@/components/navigation"
 import { VerifiedBadge } from "@/components/signals/verified-badge"
-import { fetchEvalList } from "@/lib/dashboard-data-client"
+import type { EvalHierarchy } from "@/lib/backend-artifacts"
+import type { BenchmarkCard } from "@/lib/benchmark-schema"
+import { fetchBenchmarkMetadata, fetchEvalHierarchy, fetchEvalList } from "@/lib/dashboard-data-client"
 import type { BenchmarkEvalListItem } from "@/lib/eval-processing"
-import { getEvalsForEvaluator } from "@/lib/evaluators"
-
-const PAGE_SIZE = 24
+import { getEvalsForEvaluator, verifiedEvalIds } from "@/lib/evaluators"
 
 function EvaluatorDetailInner() {
   const params = useParams()
@@ -29,70 +28,81 @@ function EvaluatorDetailInner() {
   }, [params.id])
 
   const [allEvals, setAllEvals] = useState<BenchmarkEvalListItem[]>([])
+  const [hierarchy, setHierarchy] = useState<EvalHierarchy | null>(null)
+  const [benchmarkCards, setBenchmarkCards] = useState<Record<string, BenchmarkCard>>({})
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
   const [searchQuery, setSearchQuery] = useState("")
-  const [visibleCount, setVisibleCount] = useState(PAGE_SIZE)
+  const [sortCol, setSortCol] = useState<FamilySortCol>("name")
+  const [sortDir, setSortDir] = useState<"asc" | "desc">("asc")
 
   useEffect(() => {
-    fetchEvalList()
+    const evalListRequest = fetchEvalList()
       .then((list) => setAllEvals(list.evals))
       .catch((err) => {
         console.error(err)
         setError("Failed to load evaluations")
       })
-      .finally(() => setLoading(false))
+    const hierarchyRequest = fetchEvalHierarchy()
+      .then((h) => setHierarchy(h))
+      .catch(console.error)
+    const metadataRequest = fetchBenchmarkMetadata()
+      .then((metadata) => setBenchmarkCards(metadata))
+      .catch(console.error)
+    Promise.allSettled([evalListRequest, hierarchyRequest, metadataRequest]).finally(() =>
+      setLoading(false),
+    )
   }, [])
 
+  const handleSort = useCallback((col: FamilySortCol) => {
+    if (sortCol === col) {
+      setSortDir((d) => (d === "asc" ? "desc" : "asc"))
+    } else {
+      setSortCol(col)
+      setSortDir("asc")
+    }
+  }, [sortCol])
+
   const { name, isVerified, evals } = useMemo(
     () => getEvalsForEvaluator(allEvals, slug, { verifiedOnly }),
     [allEvals, slug, verifiedOnly],
   )
 
-  const filteredEvals = useMemo(() => {
-    const query = searchQuery.trim().toLowerCase()
-    const list = query
-      ? evals.filter((ev) => {
-          const haystacks = [
-            ev.evaluation_name,
-            ev.family_display_name,
-            ev.composite_benchmark_name,
-          ]
-          return haystacks.some((v) => v?.toLowerCase().includes(query))
-        })
-      : evals
-    return list.slice().sort((a, b) => a.evaluation_name.localeCompare(b.evaluation_name))
-  }, [evals, searchQuery])
-
-  // Quantified facts for the header, derived from the org's owned evals.
-  // familyCount = distinct benchmark families covered; verifiedCount = evals
-  // where this org is a verified evaluator.
+  // Eval-id universe owned by this evaluator — restricts the family tree to
+  // this org's evaluations (slices already excluded by getEvalsForEvaluator).
+  const restrictEvalIds = useMemo(() => {
+    const set = new Set<string>()
+    for (const ev of evals) set.add(ev.evaluation_id)
+    return set
+  }, [evals])
+
+  const verifiedIds = useMemo(() => verifiedEvalIds(allEvals), [allEvals])
+
+  const evalItems = useMemo(() => {
+    const map = new Map<string, BenchmarkEvalListItem>()
+    for (const ev of allEvals) map.set(ev.evaluation_id, ev)
+    return map
+  }, [allEvals])
+
+  const families = hierarchy?.families ?? []
+
+  // Quantified facts for the header. familyCount counts the top-level families
+  // the table actually renders for this org (those whose constituent evals
+  // intersect this evaluator's set), so the header agrees with the accordion
+  // below it rather than the finer family_display_name grouping.
   const { familyCount, verifiedCount } = useMemo(() => {
-    const families = new Set<string>()
     let verified = 0
     for (const ev of evals) {
-      const fam = ev.family_display_name?.trim()
-      if (fam) families.add(fam)
       if (name && (ev.verified_evaluator_names ?? []).includes(name)) verified += 1
     }
-    return {
-      familyCount: families.size,
-      verifiedCount: verified,
+    let familyCount = 0
+    for (const fam of families) {
+      if ((fam.constituent_evaluation_ids ?? []).some((id) => restrictEvalIds.has(id))) {
+        familyCount += 1
+      }
     }
-  }, [evals, name])
-
-  useEffect(() => {
-    setVisibleCount(PAGE_SIZE)
-  }, [searchQuery, slug, verifiedOnly])
-
-  const visibleEvals = useMemo(
-    () => filteredEvals.slice(0, visibleCount),
-    [filteredEvals, visibleCount],
-  )
-  const hasMore = visibleCount < filteredEvals.length
-  const handleLoadMore = useCallback(() => {
-    setVisibleCount((current) => Math.min(current + PAGE_SIZE, filteredEvals.length))
-  }, [filteredEvals.length])
+    return { familyCount, verifiedCount: verified }
+  }, [evals, name, families, restrictEvalIds])
 
   const handleBack = useCallback(() => {
     router.push(verifiedOnly ? "/evals?groupBy=evaluator&verified=1" : "/evals?groupBy=evaluator")
@@ -164,8 +174,8 @@ function EvaluatorDetailInner() {
           <span>{verifiedCount} verified</span>
         </div>
         <p className="ec-page-lede">
-          Reported <strong>{filteredEvals.length.toLocaleString()}</strong>{" "}
-          {filteredEvals.length === 1 ? "evaluation" : "evaluations"} across{" "}
+          Reported <strong>{evals.length.toLocaleString()}</strong>{" "}
+          {evals.length === 1 ? "evaluation" : "evaluations"} across{" "}
           <strong>{familyCount.toLocaleString()}</strong>{" "}
           {familyCount === 1 ? "benchmark family" : "benchmark families"}
           {verifiedCount > 0 && (
@@ -179,7 +189,7 @@ function EvaluatorDetailInner() {
         <div className="ec-page-meta mt-2">
           <div className="ec-page-meta-item">
             <span className="ec-page-meta-item-l">Evaluations</span>
-            <span className="ec-page-meta-item-v">{filteredEvals.length.toLocaleString()}</span>
+            <span className="ec-page-meta-item-v">{evals.length.toLocaleString()}</span>
           </div>
           <div className="ec-page-meta-item">
             <span className="ec-page-meta-item-l">Verified</span>
@@ -191,14 +201,14 @@ function EvaluatorDetailInner() {
           </div>
         </div>
 
-        {/* META + FILTER BAR --------------------------------------- */}
+        {/* FILTER BAR ---------------------------------------------- */}
         <div className="mb-6 flex flex-wrap items-center gap-x-8 gap-y-3 border-y border-[color:var(--border-soft)] py-4">
           <div className="flex shrink-0 flex-wrap items-baseline gap-x-4 gap-y-1 font-mono text-[11px] tracking-[0.1em] uppercase text-[color:var(--fg-subtle)]">
             <span>
               <span className="text-[color:var(--fg)] tabular-nums font-semibold mr-1">
-                {filteredEvals.length.toLocaleString()}
+                {evals.length.toLocaleString()}
               </span>
-              {filteredEvals.length === 1 ? "evaluation" : "evaluations"}
+              {evals.length === 1 ? "evaluation" : "evaluations"}
             </span>
           </div>
 
@@ -210,30 +220,29 @@ function EvaluatorDetailInner() {
               className="ec-input pl-9"
               value={searchQuery}
               onChange={(event) => setSearchQuery(event.target.value)}
-              placeholder="Search evaluations…"
+              placeholder="Search benchmarks…"
             />
           </div>
         </div>
 
-        {/* EVAL CARDS ---------------------------------------------- */}
-        {filteredEvals.length === 0 ? (
+        {/* FAMILY TABLE — scoped to this evaluator's evaluations ---- */}
+        {restrictEvalIds.size === 0 ? (
           <div className="border border-dashed border-[color:var(--border-soft)] bg-[color:var(--bg-warm)] py-12 text-center font-mono text-[11px] uppercase tracking-[0.2em] text-[color:var(--fg-subtle)]">
             No evaluations match the current filters
           </div>
         ) : (
-          <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
-            {visibleEvals.map((ev, i) => (
-              <EvalCard key={ev.evaluation_id} summary={ev} delayMs={Math.min(i, 8) * 40} />
-            ))}
-          </div>
+          <FamilyTable
+            families={families}
+            evalItems={evalItems}
+            benchmarkCards={benchmarkCards}
+            searchQuery={searchQuery}
+            verifiedEvalIds={verifiedOnly ? verifiedIds : null}
+            restrictEvalIds={restrictEvalIds}
+            sortCol={sortCol}
+            sortDir={sortDir}
+            onSort={handleSort}
+          />
         )}
-
-        <InfiniteScrollSentinel
-          hasMore={hasMore}
-          onLoadMore={handleLoadMore}
-          loadingLabel="Loading more…"
-          endLabel={`Showing ${Math.min(visibleCount, filteredEvals.length).toLocaleString()} of ${filteredEvals.length.toLocaleString()} evaluations`}
-        />
       </main>
     </div>
   )

components/benchmark-detail.tsx

@@ -1856,7 +1856,10 @@ export function BenchmarkDetail({
   // families. "overlaps" = cross-family duplicates only, rendered as a
   // table (no plotbox/list toggle) with mean and 95% CI for the model's
   // score across each canonical's appearances.
-  const [groupingMode, setGroupingMode] = useState<"source" | "category" | "overlaps">("source")
+  // `null` until the user explicitly picks a view; the effective default is
+  // derived from the data (overlaps when this model has any cross-suite
+  // overlaps, else source) — see `groupingMode` just after `overlapsRows`.
+  const [pickedGroupingMode, setGroupingMode] = useState<"source" | "category" | "overlaps" | null>(null)
   const [expandedFamilies, setExpandedFamilies] = useState<Set<string>>(new Set())
   const toggleFamily = (key: string) =>
     setExpandedFamilies((prev) => {
@@ -2257,6 +2260,7 @@ export function BenchmarkDetail({
     return buildModelPolicySummary({
       summary,
       thirdPartyEvaluations: reportingStats.thirdPartyEvaluations,
+      reportedEvaluationCount: allEvaluations.length,
       organizationCount: reportingStats.organizationCount,
       organizationNames: reportingStats.organizationNames,
       benchmarkCount,
@@ -2264,6 +2268,7 @@ export function BenchmarkDetail({
     })
   }, [
     allCategoryResults,
+    allEvaluations.length,
     reportingStats.thirdPartyEvaluations,
     reportingStats.organizationCount,
     reportingStats.organizationNames,
@@ -2961,6 +2966,11 @@ export function BenchmarkDetail({
     currentModelIdentityKeys,
   ])
 
+  // Effective view: honour the user's explicit pick; otherwise default to
+  // overlaps when this model has cross-suite overlaps, falling back to source
+  // when it has none (so models without overlaps don't open on an empty view).
+  const groupingMode = pickedGroupingMode ?? (overlapsRows.length > 0 ? "overlaps" : "source")
+
   // Per-(eval, metric) leaderboards sourced from comparison-index.json.
   const benchmarkHistograms = useMemo<Map<string, BenchmarkHistogram>>(() => {
     const result = new Map<string, BenchmarkHistogram>()
@@ -5130,6 +5140,16 @@ export function BenchmarkDetail({
           </div>
         </div>
 
+        {isResearchView && !embedReportedMetricsOnly && (
+          <p className="text-[14px] leading-[1.7] text-[color:var(--fg-muted)] max-w-[64rem] mb-6">
+            {groupingMode === "overlaps"
+              ? "Cross-suite overlaps — benchmarks this model reports under more than one suite, with the mean and 95% CI across appearances. Each source links through to its eval. Switch to Source or Category for the full result set."
+              : groupingMode === "category"
+                ? "Every reported result, regrouped under curated category tags so similar benchmarks cluster across families."
+                : "Every reported result in the warehouse's natural shape — family-rooted plots and accordions, with no cross-family collapse."}
+          </p>
+        )}
+
         {/* SUMMARY VIEW — text-only list grouped by family, ranked
             best→worst, with the category pill bar so non-technical
             readers can filter without diving into Researcher view. */}
@@ -5354,14 +5374,15 @@ export function BenchmarkDetail({
                     </div>
                     <div className="flex flex-wrap gap-1">
                       {row.appearances.map((app) => (
-                        <span
+                        <Link
                           key={`${row.canonicalKey}::${app.familyKey}::${app.evalSummaryId}`}
-                          className="ec-tag"
+                          href={`/evals/${routeIdToPath(app.evalSummaryId)}?from=${encodeURIComponent(currentDetailHref)}`}
+                          className="ec-tag outline hover:border-[color:var(--accent)] hover:text-[color:var(--accent)] transition-colors"
                           style={{ fontSize: 10 }}
-                          title={`${app.familyName} · ${app.metricName}`}
+                          title={`${app.familyName} · ${app.metricName} — view eval`}
                         >
                           {app.familyName} · {fmt(app.score)}
-                        </span>
+                        </Link>
                       ))}
                     </div>
                   </div>

components/family-table.tsx

@@ -29,6 +29,12 @@ interface FamilyTableProps {
    *  mode — the set is the verified-eval id universe). Null/undefined =
    *  no restriction. */
   verifiedEvalIds?: Set<string> | null
+  /** When provided, restrict leaves to those mapping to one of these
+   *  evaluation_ids (drives the /evaluators/<slug> detail page — the set is
+   *  the eval-id universe owned by one reporting org). Composes with
+   *  verifiedEvalIds: when both are present a leaf must intersect both.
+   *  Null/undefined = no restriction. */
+  restrictEvalIds?: Set<string> | null
   sortCol?: FamilySortCol
   sortDir?: "asc" | "desc"
   onSort?: (col: FamilySortCol) => void
@@ -214,6 +220,7 @@ export function FamilyTable({
   categoryFilter,
   searchQuery,
   verifiedEvalIds,
+  restrictEvalIds,
   sortCol,
   sortDir,
   onSort,
@@ -224,9 +231,10 @@ export function FamilyTable({
   const domainFilterActive = Boolean(domainFilter && domainFilter.size > 0)
   const categoryFilterActive = Boolean(categoryFilter && categoryFilter.size > 0)
   const verifiedFilterActive = Boolean(verifiedEvalIds)
+  const restrictFilterActive = Boolean(restrictEvalIds)
   const normalizedQuery = (searchQuery ?? "").trim().toLowerCase()
   const searchActive = normalizedQuery.length > 0
-  const filterActive = domainFilterActive || categoryFilterActive || searchActive || verifiedFilterActive
+  const filterActive = domainFilterActive || categoryFilterActive || searchActive || verifiedFilterActive || restrictFilterActive
 
   function leafMatchesDomain(leaf: LeafEntry): boolean {
     if (!domainFilterActive || !domainFilter) return true
@@ -252,10 +260,16 @@ export function FamilyTable({
     return leaf.evalIds.some((id) => verifiedEvalIds.has(id))
   }
 
+  function leafMatchesRestrict(leaf: LeafEntry): boolean {
+    if (!restrictFilterActive || !restrictEvalIds) return true
+    return leaf.evalIds.some((id) => restrictEvalIds.has(id))
+  }
+
   function leafMatchesFilter(leaf: LeafEntry, opts?: { skipQuery?: boolean }): boolean {
     if (!leafMatchesDomain(leaf)) return false
     if (!leafMatchesCategory(leaf)) return false
     if (!leafMatchesVerified(leaf)) return false
+    if (!leafMatchesRestrict(leaf)) return false
     if (!opts?.skipQuery && !leafMatchesQuery(leaf)) return false
     return true
   }
@@ -279,12 +293,12 @@ export function FamilyTable({
     if (leafEntries.some((leaf) => leafMatchesFilter(leaf))) return true
     // Family-level search match keeps the row even if no leaf survives
     // the leaf-query filter (the row will fall back to showing all
-    // leaves). But the verified filter is a hard leaf-level gate: never
-    // resurrect a family that has zero verified leaves.
+    // leaves). But the verified and restrict filters are hard leaf-level
+    // gates: never resurrect a family that has zero surviving leaves.
     if (
       searchActive &&
       familyMatchedAtFamilyLevel(fam) &&
-      leafEntries.some((leaf) => leafMatchesVerified(leaf))
+      leafEntries.some((leaf) => leafMatchesVerified(leaf) && leafMatchesRestrict(leaf))
     )
       return true
     if (categoryFilterActive && categoryFilter) {
@@ -402,7 +416,7 @@ export function FamilyTable({
     }
     return out
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [families, evalItems, benchmarkCards, domainFilter, categoryFilter, searchQuery])
+  }, [families, evalItems, benchmarkCards, domainFilter, categoryFilter, searchQuery, verifiedEvalIds, restrictEvalIds])
 
   function SortIcon({ col }: { col: FamilySortCol }) {
     if (!onSort) return null

lib/policy-summaries.ts

@@ -127,6 +127,11 @@ interface ModelPolicyInputs {
   /** Pre-computed third-party tally from caller (cheap to compute, but
    *  caller already has it in benchmark-detail). */
   thirdPartyEvaluations: number
+  /** Denominator for the third-party share. MUST be counted from the same
+   *  population as `thirdPartyEvaluations` (the caller's flattened evaluation
+   *  list), not the warehouse's distinct `total_evaluations` — those have
+   *  different grains, which made the share exceed 100%. */
+  reportedEvaluationCount: number
   organizationCount: number
   organizationNames: string[]
   /** Distinct benchmark count derived from group reduction. */
@@ -138,12 +143,17 @@ interface ModelPolicyInputs {
 export function buildModelPolicySummary({
   summary,
   thirdPartyEvaluations,
+  reportedEvaluationCount,
   organizationCount,
   organizationNames,
   benchmarkCount,
   reportedCategories,
 }: ModelPolicyInputs): ModelPolicySummary {
   const totalEvals = summary.total_evaluations
+  // Denominator for the third-party share, counted from the same population as
+  // the numerator so the ratio stays within 0–100%. Falls back to totalEvals
+  // only if the caller passed nothing.
+  const thirdPartyBase = reportedEvaluationCount > 0 ? reportedEvaluationCount : totalEvals
   const repro = summary.reproducibility_summary
   const reproGap = repro?.has_reproducibility_gap_count ?? 0
   const reproTotal = repro?.results_total ?? totalEvals
@@ -191,8 +201,8 @@ export function buildModelPolicySummary({
     provenance?.first_party_only_groups != null && provenance.total_groups > 0
       ? provenance.first_party_only_groups === provenance.total_groups
       : null
-  const allThirdParty = totalEvals > 0 && thirdPartyEvaluations === totalEvals
-  const noThirdParty = thirdPartyEvaluations === 0 && totalEvals > 0
+  const allThirdParty = thirdPartyBase > 0 && thirdPartyEvaluations === thirdPartyBase
+  const noThirdParty = thirdPartyEvaluations === 0 && thirdPartyBase > 0
   const lead = organizationNames[0]
 
   let reportingSentence: string
@@ -253,11 +263,11 @@ export function buildModelPolicySummary({
 
   // ── 6. Verification headline ─────────────────────────────────────────
   let verificationLabel: string | null = null
-  if (allThirdParty && totalEvals > 0) {
-    verificationLabel = "Independently verified"
-  } else if (thirdPartyEvaluations > 0 && totalEvals > 0) {
-    const pct = Math.round((thirdPartyEvaluations / totalEvals) * 100)
-    verificationLabel = `${pct}% independently verified`
+  if (allThirdParty && thirdPartyBase > 0) {
+    verificationLabel = "100% third party"
+  } else if (thirdPartyEvaluations > 0 && thirdPartyBase > 0) {
+    const pct = Math.min(100, Math.round((thirdPartyEvaluations / thirdPartyBase) * 100))
+    verificationLabel = `${pct}% third party`
   } else if (noThirdParty) {
     verificationLabel = "Developer-reported only"
   }