Fix model comparison + add evaluator logo

.gitattributes

@@ -35,3 +35,5 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
 public/tutorials/screenshots/*.png filter=lfs diff=lfs merge=lfs -text
 public/tutorials/screenshots/*.gif filter=lfs diff=lfs merge=lfs -text
+public/org-logos/*.png filter=lfs diff=lfs merge=lfs -text
+public/org-logos/*.webp filter=lfs diff=lfs merge=lfs -text

app/api/org-metadata/route.ts

@@ -0,0 +1,8 @@
+import { NextResponse } from "next/server"
+
+import { getOrganizationsData } from "@/lib/data-backend"
+
+export async function GET() {
+  const orgs = await getOrganizationsData()
+  return NextResponse.json(orgs)
+}

app/evals/page.tsx

@@ -5,6 +5,7 @@ import { useRouter, useSearchParams } from "next/navigation"
 import { Search } from "lucide-react"
 
 import { EvaluatorTable, type EvaluatorTableSortCol } from "@/components/evaluator-table"
+import { useOrgMetadata } from "@/components/org-metadata-provider"
 import { FamilyTable, getFamilyNavId, type FamilySortCol } from "@/components/family-table"
 import { InfiniteScrollSentinel } from "@/components/infinite-scroll"
 import { Navigation } from "@/components/navigation"
@@ -172,9 +173,10 @@ function EvalsPageInner() {
 
   // Evaluator groups (group-by-Evaluator mode). Verified filter is
   // evaluator-aware: counts only (eval, org) pairs where org is verified.
+  const orgMeta = useOrgMetadata()
   const evaluatorGroups = useMemo(
-    () => groupEvalsByEvaluator(allEvals, { verifiedOnly }),
-    [allEvals, verifiedOnly],
+    () => groupEvalsByEvaluator(allEvals, { verifiedOnly, orgMeta }),
+    [allEvals, verifiedOnly, orgMeta],
   )
 
   const filteredEvaluators = useMemo(() => {

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

@@ -4,13 +4,15 @@ import { Suspense, useCallback, useEffect, useMemo, useState } from "react"
 import { useParams, useRouter } from "next/navigation"
 import { ArrowLeft, Search } from "lucide-react"
 
+import EvaluatorLetterhead from "@/components/evaluator/evaluator-letterhead"
+import { useOrgMetadata } from "@/components/org-metadata-provider"
 import { FamilyTable, type FamilySortCol } from "@/components/family-table"
 import { Navigation } from "@/components/navigation"
-import { VerifiedBadge } from "@/components/signals/verified-badge"
 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 { normalizeOrgKey } from "@/lib/evaluator-logo"
 import { getEvalsForEvaluator, isRecognizedEvaluator } from "@/lib/evaluators"
 
 function EvaluatorDetailInner() {
@@ -28,6 +30,9 @@ function EvaluatorDetailInner() {
   const [allEvals, setAllEvals] = useState<BenchmarkEvalListItem[]>([])
   const [hierarchy, setHierarchy] = useState<EvalHierarchy | null>(null)
   const [benchmarkCards, setBenchmarkCards] = useState<Record<string, BenchmarkCard>>({})
+  // Org metadata (homepage url, logo, stable id) comes from the app-wide
+  // provider (server-fetched in the root layout) — no per-page fetch, no flash.
+  const orgMeta = useOrgMetadata()
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
   const [searchQuery, setSearchQuery] = useState("")
@@ -66,8 +71,8 @@ function EvaluatorDetailInner() {
   // this route (the header reports total + verified counts separately, so no
   // information is hidden). See evaluator-table.tsx hrefFor.
   const { name, isVerified, evals } = useMemo(
-    () => getEvalsForEvaluator(allEvals, slug),
-    [allEvals, slug],
+    () => getEvalsForEvaluator(allEvals, slug, { orgMeta }),
+    [allEvals, slug, orgMeta],
   )
 
   // Eval-id universe owned by this evaluator — restricts the family tree to
@@ -160,24 +165,17 @@ function EvaluatorDetailInner() {
           Evaluators
         </button>
 
-        {/* HEADER --------------------------------------------------- */}
-        <div className="kicker">Evaluator</div>
-        <h1 className="ec-page-h1 inline-flex items-center gap-2">
-          {name}
-          <VerifiedBadge verified={isVerified} recognized={isRecognizedEvaluator(name)} size="md" />
-        </h1>
-        <div
-          className="mb-5 flex flex-wrap items-center gap-3 font-mono text-[11px] uppercase tracking-[0.12em]"
-          style={{ color: "var(--fg-muted)" }}
-        >
-          <span>Reporting organisation</span>
-          <span style={{ color: "var(--fg-subtle)" }}>·</span>
-          <span>
-            {familyCount} {familyCount === 1 ? "family" : "families"}
-          </span>
-          <span style={{ color: "var(--fg-subtle)" }}>·</span>
-          <span>{verifiedCount} verified</span>
-        </div>
+        {/* HEADER — editorial letterhead masthead -------------------- */}
+        <EvaluatorLetterhead
+          name={name}
+          logoSrc={orgMeta[normalizeOrgKey(name)]?.logo ?? null}
+          homepageUrl={orgMeta[normalizeOrgKey(name)]?.url}
+          isVerified={isVerified}
+          recognized={isRecognizedEvaluator(name)}
+          evalCount={evals.length}
+          familyCount={familyCount}
+          verifiedCount={verifiedCount}
+        />
         <p className="ec-page-lede">
           Reported <strong>{evals.length.toLocaleString()}</strong>{" "}
           {evals.length === 1 ? "evaluation" : "evaluations"} across{" "}

app/globals.css

@@ -39,6 +39,13 @@
   --nav-bg: rgba(255, 255, 254, 0.95);
   --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.07);
 
+  /* Logo plate — a subtly warm near-white surface for framing org brand marks.
+     Deliberately defined ONLY here (not under .dark) so it never flips to a
+     dark surface: near-black or transparent marks (e.g. Anthropic) stay legible
+     on the evaluator page in both themes. Warmer than #fff so it sits in the
+     warm-neutral system rather than reading as a cold clinical white. */
+  --logo-plate: #fdfcfa;
+
   /* Tracking */
   --tracking-wide: 0.025em;
   --tracking-widest: 0.15em;

app/layout.tsx

@@ -3,9 +3,11 @@ import type { Metadata } from "next"
 import "./globals.css"
 import { AudienceModeProvider } from "@/components/audience-mode-provider"
 import { BackendRefreshListener } from "@/components/backend-refresh-listener"
+import { OrgMetadataProvider } from "@/components/org-metadata-provider"
 import { QuickStartProvider } from "@/components/quick-start"
 import { SiteFooter } from "@/components/site-footer"
 import { ThemeProvider } from "@/components/theme-provider"
+import { getOrganizationsData } from "@/lib/data-backend"
 
 const SITE_URL = "https://evalcards.evalevalai.com"
 const SITE_NAME = "Evaluation Cards"
@@ -59,21 +61,27 @@ export const metadata: Metadata = {
   },
 }
 
-export default function RootLayout({
+export default async function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode
 }>) {
+  // Per-org registry metadata (homepage url, logo, stable canonical id) for the
+  // whole app. Small + cached; degrades to {} when the snapshot lacks the
+  // organizations sidecar. Drives rename-stable evaluator URLs (slug = id).
+  const orgMetadata = await getOrganizationsData().catch(() => ({}))
   return (
     <html lang="en" className="antialiased" suppressHydrationWarning>
       <body className="font-sans">
         <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
           <AudienceModeProvider>
-            <QuickStartProvider>
-              <BackendRefreshListener />
-              {children}
-              <SiteFooter />
-            </QuickStartProvider>
+            <OrgMetadataProvider value={orgMetadata}>
+              <QuickStartProvider>
+                <BackendRefreshListener />
+                {children}
+                <SiteFooter />
+              </QuickStartProvider>
+            </OrgMetadataProvider>
           </AudienceModeProvider>
         </ThemeProvider>
       </body>

components/eval-card.tsx

@@ -19,7 +19,8 @@ import {
 } from "lucide-react"
 import Link from "next/link"
 import { routeIdToPath } from "@/lib/utils"
-import { evaluatorSlug, isRecognizedEvaluator } from "@/lib/evaluators"
+import { useEvaluatorSlug } from "@/components/org-metadata-provider"
+import { isRecognizedEvaluator } from "@/lib/evaluators"
 import type { BenchmarkEvalListItem } from "@/lib/eval-processing"
 import { getTagColor, tagLabel } from "@/lib/benchmark-schema"
 
@@ -58,6 +59,7 @@ interface EvalCardProps {
 
 export function EvalCard({ summary, delayMs = 0 }: EvalCardProps) {
   const router = useRouter()
+  const slugFor = useEvaluatorSlug()
   const { mode } = useAudienceMode()
   const isResearchView = mode === "research"
   const scorePercent = `${Math.round(summary.avg_score_norm * 100)}%`
@@ -272,7 +274,7 @@ export function EvalCard({ summary, delayMs = 0 }: EvalCardProps) {
                           <span key={name} className="inline-flex items-center">
                             {i > 0 ? ", " : null}
                             <Link
-                              href={`/evaluators/${evaluatorSlug(name)}`}
+                              href={`/evaluators/${slugFor(name)}`}
                               className="hover:text-[color:var(--accent)] hover:underline"
                               onClick={(e) => e.stopPropagation()}
                             >

components/eval-detail.tsx

@@ -54,7 +54,8 @@ import {
 import type { BenchmarkCard, SourceData } from "@/lib/benchmark-schema"
 import { tagLabel } from "@/lib/benchmark-schema"
 import type { BenchmarkEvalSummary, ModelResultForBenchmark } from "@/lib/eval-processing"
-import { evaluatorSlug, isRecognizedEvaluator } from "@/lib/evaluators"
+import { isRecognizedEvaluator } from "@/lib/evaluators"
+import { useEvaluatorSlug } from "@/components/org-metadata-provider"
 import type { ComparisonIndex, EvalHierarchy } from "@/lib/backend-artifacts"
 import type { HierarchyEvalLocation } from "@/lib/hierarchy-lookup"
 import { PolicyOverview } from "@/components/policy-overview"
@@ -425,12 +426,13 @@ function EvaluatorName({
   className?: string
   style?: React.CSSProperties
 }) {
+  const slugFor = useEvaluatorSlug()
   if (!linkName) {
     return <span className={className} style={style}>{display}</span>
   }
   return (
     <Link
-      href={`/evaluators/${evaluatorSlug(linkName)}`}
+      href={`/evaluators/${slugFor(linkName)}`}
       className={cn("hover:text-[color:var(--accent)] hover:underline", className)}
       style={style}
       onClick={(e) => e.stopPropagation()}

components/evaluator/evaluator-letterhead.tsx

@@ -0,0 +1,127 @@
+"use client"
+
+import { ExternalLink } from "lucide-react"
+
+import { OrgLogo } from "@/components/evaluator/org-logo"
+import { VerifiedBadge } from "@/components/signals/verified-badge"
+import { cn } from "@/lib/utils"
+
+/**
+ * EvaluatorLetterhead — the masthead header for an evaluator (reporting org)
+ * page. A full-bleed warm band with a hairline base rule, set like an academic
+ * journal letterhead:
+ *
+ *   eyebrow ("Evaluator")
+ *   [ logo plate ]  Org Name  ✓        ← vertically-centred hero row
+ *                   reporting organisation · N evaluations · N families · N verified
+ *
+ * The logo is rendered through <OrgLogo/>, which auto-squares and auto-sizes
+ * any aspect ratio onto a consistent light plate and falls back to a monogram
+ * when no mark is known. The meta strip is indented to begin under the name
+ * (plate width + gap) so the lockup reads as one unit.
+ *
+ * Full bleed: the negative margin matches the evaluator page's responsive
+ * padding (px-4 → sm:px-8) so the band paints to the content-column edges
+ * without causing horizontal overflow at any width.
+ */
+
+export interface EvaluatorLetterheadProps {
+  name: string
+  /** Brand-mark URL/path or null → monogram. Sourced from the registry org
+   *  metadata (organizations.json sidecar). */
+  logoSrc: string | null
+  /** Org homepage (registry `website`). When present, a small external-link
+   *  affordance is shown next to the name; hidden entirely when absent. */
+  homepageUrl?: string
+  isVerified: boolean
+  recognized: boolean
+  evalCount: number
+  familyCount: number
+  verifiedCount: number
+}
+
+export default function EvaluatorLetterhead({
+  name,
+  logoSrc,
+  homepageUrl,
+  isVerified,
+  recognized,
+  evalCount,
+  familyCount,
+  verifiedCount,
+}: EvaluatorLetterheadProps) {
+  return (
+    <header
+      className={cn(
+        "-mx-4 mb-8 border-b border-[color:var(--border-soft)] bg-[color:var(--bg-warm)] px-4",
+        "sm:-mx-8 sm:px-8",
+      )}
+    >
+      <div className="py-8">
+        {logoSrc === null && <span className="sr-only">{name} (no logo available)</span>}
+
+        <div className="kicker">Evaluator</div>
+
+        {/* Hero row — plate + name vertically centred together. */}
+        <div className="mt-2.5 flex items-center gap-5 sm:gap-6">
+          <OrgLogo
+            name={name}
+            src={logoSrc}
+            className="[--logo-size:64px] sm:[--logo-size:72px]"
+          />
+
+          <h1 className="ec-page-h1 inline-flex flex-wrap items-center gap-x-2.5 gap-y-1">
+            <span className="min-w-0 break-words">{name}</span>
+            <VerifiedBadge verified={isVerified} recognized={recognized} size="md" />
+            {homepageUrl && (
+              <a
+                href={homepageUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label={`Visit ${name}'s homepage`}
+                title={`Visit ${name}'s homepage`}
+                className="inline-flex shrink-0 items-center text-[color:var(--fg-subtle)] transition-colors hover:text-[color:var(--accent)]"
+              >
+                <ExternalLink className="h-4 w-4" aria-hidden />
+              </a>
+            )}
+          </h1>
+        </div>
+
+        {/* Mono-caps colophon — indented to begin under the name. */}
+        <div className="mt-3 flex flex-wrap items-center gap-x-3 gap-y-1 pl-[84px] font-mono text-[11px] uppercase tracking-[0.12em] text-[color:var(--fg-muted)] sm:pl-[96px]">
+          <span>Reporting organisation</span>
+          <Dot />
+          <span>
+            <span className="font-semibold tabular-nums text-[color:var(--fg)]">
+              {evalCount.toLocaleString()}
+            </span>{" "}
+            {evalCount === 1 ? "evaluation" : "evaluations"}
+          </span>
+          <Dot />
+          <span>
+            <span className="font-semibold tabular-nums text-[color:var(--fg)]">
+              {familyCount.toLocaleString()}
+            </span>{" "}
+            {familyCount === 1 ? "family" : "families"}
+          </span>
+          <Dot />
+          <span>
+            <span className="font-semibold tabular-nums text-[color:var(--fg)]">
+              {verifiedCount.toLocaleString()}
+            </span>{" "}
+            verified
+          </span>
+        </div>
+      </div>
+    </header>
+  )
+}
+
+function Dot() {
+  return (
+    <span aria-hidden="true" className="text-[color:var(--fg-subtle)]">
+      ·
+    </span>
+  )
+}

components/evaluator/org-logo.tsx

@@ -0,0 +1,153 @@
+"use client"
+
+import { useCallback, useEffect, useRef, useState } from "react"
+
+import { monogramFor, monogramHue } from "@/lib/evaluator-logo"
+import { cn } from "@/lib/utils"
+
+/**
+ * OrgLogo — renders an evaluating org's brand mark inside a consistent square
+ * plate, robust to the wildly inconsistent assets real orgs ship.
+ *
+ * The problem: some orgs have PR-ready square icons; most don't. We get 4:1
+ * horizontal wordmarks, tall lockups, tiny favicons, transparent PNGs and SVGs
+ * — every aspect ratio and resolution. We want a single, consistent on-page
+ * footprint regardless.
+ *
+ * The strategy ("auto-square + auto-size"):
+ *   1. Fixed SQUARE plate. Size is driven by the `--logo-size` CSS var (default
+ *      72px) so a caller can make it responsive with one arbitrary class, e.g.
+ *      `className="[--logo-size:64px] sm:[--logo-size:72px]"`. The mark never
+ *      changes the plate's shape.
+ *   2. `object-contain`, always — the mark is scaled to FIT, never cropped
+ *      (object-cover) and never stretched (object-fill). No distortion, ever.
+ *   3. Aspect-aware bounds. With object-contain alone, a wide wordmark shrinks
+ *      to a tiny sliver in a square box. So we measure the loaded image's
+ *      natural aspect and cap width/height per shape class (wide / tall /
+ *      square) so each reaches a comparable OPTICAL size: a wordmark is allowed
+ *      to span most of the plate width, a square icon keeps breathing room.
+ *   4. Graceful fallbacks: no src, or a load error, or a degenerate 0×0 asset
+ *      → a deterministic monogram tile on the same plate. The layout never
+ *      collapses or shifts.
+ *
+ * Measuring handles cached images too (onLoad may not fire) via a ref check on
+ * mount. The mark fades in once measured to avoid a first-paint size jump.
+ */
+
+type Fit = "square" | "wide" | "tall"
+
+// Max width/height the mark may occupy inside the plate, as a fraction, per
+// shape. Tuned so a 3.7:1 wordmark and a 1:1 icon feel like the same "weight".
+const BOUNDS: Record<Fit, { maxW: number; maxH: number }> = {
+  square: { maxW: 0.64, maxH: 0.64 },
+  wide: { maxW: 0.9, maxH: 0.62 },
+  tall: { maxW: 0.62, maxH: 0.86 },
+}
+
+function classifyAspect(aspect: number): Fit {
+  if (!Number.isFinite(aspect) || aspect <= 0) return "square"
+  if (aspect > 1.3) return "wide"
+  if (aspect < 0.77) return "tall"
+  return "square"
+}
+
+export function OrgLogo({
+  name,
+  src,
+  className,
+  rounded = "rounded-[4px]",
+}: {
+  name: string
+  /** Brand mark URL, or null when none is known → monogram. */
+  src: string | null
+  /** Box sizing / `--logo-size` override, e.g. "[--logo-size:64px] sm:[--logo-size:72px]". */
+  className?: string
+  rounded?: string
+}) {
+  // "pending" until the image loads & is measured; "ok" once we have an aspect;
+  // "error" if it fails / is degenerate → monogram.
+  const [status, setStatus] = useState<"pending" | "ok" | "error">(src ? "pending" : "error")
+  const [fit, setFit] = useState<Fit>("square")
+  const imgRef = useRef<HTMLImageElement | null>(null)
+
+  const measure = useCallback((img: HTMLImageElement) => {
+    const { naturalWidth: w, naturalHeight: h } = img
+    if (!w || !h) {
+      setStatus("error") // degenerate asset → monogram
+      return
+    }
+    setFit(classifyAspect(w / h))
+    setStatus("ok")
+  }, [])
+
+  // Cached images can be `complete` before React attaches onLoad — measure on
+  // mount if so. Re-runs when src changes.
+  useEffect(() => {
+    if (!src) {
+      setStatus("error")
+      return
+    }
+    setStatus("pending")
+    const img = imgRef.current
+    if (img && img.complete) {
+      if (img.naturalWidth) measure(img)
+      else setStatus("error")
+    }
+  }, [src, measure])
+
+  const plateClass = cn(
+    "relative flex shrink-0 items-center justify-center overflow-hidden border",
+    "h-[var(--logo-size,72px)] w-[var(--logo-size,72px)] bg-[color:var(--logo-plate)] shadow-[var(--shadow-card)]",
+    rounded,
+    className,
+  )
+  const plateBorder = { borderColor: "var(--border-soft)" } as const
+
+  if (status === "error") {
+    return (
+      <div className={plateClass} style={plateBorder}>
+        <Monogram name={name} />
+      </div>
+    )
+  }
+
+  const { maxW, maxH } = BOUNDS[fit]
+  return (
+    <div className={plateClass} style={plateBorder}>
+      <img
+        ref={imgRef}
+        src={src ?? undefined}
+        alt={`${name} logo`}
+        loading="eager"
+        decoding="async"
+        onLoad={(e) => measure(e.currentTarget)}
+        onError={() => setStatus("error")}
+        className={cn(
+          "object-contain transition-opacity duration-200",
+          status === "pending" ? "opacity-0" : "opacity-100",
+        )}
+        style={{ maxWidth: `${maxW * 100}%`, maxHeight: `${maxH * 100}%` }}
+      />
+    </div>
+  )
+}
+
+/** Deterministic monogram tile — fills the plate; org name carried by an
+ *  adjacent heading, so the glyph itself is aria-hidden. */
+function Monogram({ name }: { name: string }) {
+  const hue = monogramHue(name)
+  return (
+    <span
+      aria-hidden="true"
+      className="flex h-full w-full select-none items-center justify-center rounded-[3px] font-sans font-semibold leading-none"
+      style={{
+        color: `hsl(${hue} 32% 38%)`,
+        backgroundColor: `hsl(${hue} 38% 92%)`,
+        fontSize: "calc(var(--logo-size, 72px) * 0.34)",
+      }}
+    >
+      {monogramFor(name)}
+      <span className="sr-only">{name}</span>
+    </span>
+  )
+}

components/model-compare-dialog.tsx

@@ -24,7 +24,8 @@ import {
 } from "@/components/ui/dialog"
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
 
-function formatDate(isoString: string) {
+function formatDate(isoString: string | null | undefined) {
+  if (!isoString) return "—"
   const numeric = Number(isoString)
   const parsedDate =
     !Number.isNaN(numeric) && !isoString.includes("-")
@@ -430,7 +431,7 @@ export function ModelCompareDialog({
                                 {row.key === "latest" ? (
                                   <div className="flex items-center gap-2">
                                     <span>{model.latest_source_name || `${model.benchmarks_count} benchmark composites summarized`}</span>
-                                    {model.source_urls[0] ? (
+                                    {model.source_urls?.[0] ? (
                                       <a
                                         href={model.source_urls[0]}
                                         target="_blank"

components/org-metadata-provider.tsx

@@ -0,0 +1,41 @@
+"use client"
+
+import { createContext, useContext, useMemo } from "react"
+
+import { evaluatorSlugFor, type OrgMetaMap } from "@/lib/evaluators"
+
+/**
+ * Makes the per-org registry metadata (from the organizations.json sidecar)
+ * available app-wide, keyed by normalizeOrgKey(displayName). It carries each
+ * org's stable canonical `id`, which is what evaluator URLs are slugged from —
+ * so renaming an org's display name never changes its /evaluators/<slug> URL.
+ *
+ * Fetched once server-side in the root layout and handed down as a plain
+ * (serializable) object, so the slug is correct on first render with no flash.
+ */
+const OrgMetadataContext = createContext<OrgMetaMap>({})
+
+export function OrgMetadataProvider({
+  value,
+  children,
+}: {
+  value: OrgMetaMap
+  children: React.ReactNode
+}) {
+  return <OrgMetadataContext.Provider value={value ?? {}}>{children}</OrgMetadataContext.Provider>
+}
+
+/** Raw display→metadata map (homepage url, logo, canonical id). */
+export function useOrgMetadata(): OrgMetaMap {
+  return useContext(OrgMetadataContext)
+}
+
+/**
+ * Returns the canonical, rename-stable slug function bound to the current org
+ * metadata. Use this everywhere an /evaluators/<slug> link is built so the
+ * whole app agrees on one URL per org.
+ */
+export function useEvaluatorSlug(): (name: string) => string {
+  const orgMeta = useContext(OrgMetadataContext)
+  return useMemo(() => (name: string) => evaluatorSlugFor(name, orgMeta), [orgMeta])
+}

lib/backend-artifacts.ts

@@ -525,3 +525,30 @@ export interface PeerRanksSidecar {
   config_version: number
   ranks: PeerRanksMap
 }
+
+// ---------------------------------------------------------------------------
+// organizations.json — per-evaluator-org metadata (homepage URL + logo)
+// ---------------------------------------------------------------------------
+
+/** Metadata for one reporting org, sourced from the registry (canonical_orgs).
+ *  All fields beyond `name` are optional — an org only appears here when it
+ *  carries a website or logo_url, so the evaluator page degrades gracefully
+ *  (monogram, no link) for everyone absent. */
+export interface OrgMetadata {
+  /** Canonical display name (matches an `evaluator_names` string). */
+  name: string
+  /** Canonical org id, when resolved. */
+  id?: string
+  /** Homepage URL (registry `website`). */
+  url?: string
+  /** Brand-mark pointer (registry `logo_url`): frontend-relative path or URL. */
+  logo?: string
+}
+
+/** organizations.json envelope. `orgs` is keyed by the NORMALISED display name
+ *  (lower-cased, whitespace-collapsed — see normalizeOrgKey) so the evaluator
+ *  page can look an org up directly from the name it already holds. */
+export interface OrgMetadataIndex {
+  generated_at: string
+  orgs: Record<string, OrgMetadata>
+}

lib/dashboard-data-client.ts

@@ -3,6 +3,7 @@ import type {
   ComparisonIndex,
   CorpusAggregates,
   EvalHierarchy,
+  OrgMetadata,
   PeerRanksMap,
 } from "@/lib/backend-artifacts"
 import { decorateHierarchyDerivedTags } from "@/lib/benchmark-tags"
@@ -114,3 +115,7 @@ export function fetchCorpusAggregates() {
 export function fetchPeerRanks() {
   return fetchJson<PeerRanksMap>("/api/peer-ranks")
 }
+
+export function fetchOrganizations() {
+  return fetchJson<Record<string, OrgMetadata>>("/api/org-metadata")
+}

lib/data-backend.ts

@@ -90,6 +90,10 @@ export async function getBackendManifestStatusData(): Promise<BackendManifestSta
   }
 }
 
+export async function getOrganizationsData() {
+  return (await sidecars()).fetchOrganizations()
+}
+
 export async function getEvalHierarchyData() {
   // The v2 sidecar ships hierarchy.json in the composite/family/slice
   // taxonomy shape (top-level `composites[]`, flat `families[]` lookup

lib/evaluator-logo.ts

@@ -0,0 +1,66 @@
+/**
+ * Org-logo helpers for the evaluator page.
+ *
+ * Logos + homepage URLs are sourced from the registry (canonical_orgs) and
+ * delivered to the frontend via the organizations.json sidecar — see
+ * lib/dashboard-data-client.fetchOrganizations(). The evaluator page looks an
+ * org up by normalizeOrgKey(name); the mark is rendered through <OrgLogo/>,
+ * which auto-squares + auto-sizes any aspect ratio and falls back to the
+ * name-derived monogram when the registry has no logo for the org.
+ */
+
+/**
+ * Monogram initials for the logo-less fallback. Drops common org-suffix noise
+ * ("AI", "Institute", "Inc"…), takes the first letter of up to two significant
+ * words, and falls back to the first two characters for single-word names.
+ */
+const STOP_WORDS = new Set([
+  "ai",
+  "the",
+  "of",
+  "for",
+  "and",
+  "institute",
+  "inc",
+  "labs",
+  "lab",
+  "research",
+])
+
+export function monogramFor(name: string): string {
+  const words = name
+    .replace(/[^\p{L}\p{N}\s]/gu, " ")
+    .split(/\s+/)
+    .filter(Boolean)
+  const significant = words.filter((w) => !STOP_WORDS.has(w.toLowerCase()))
+  const pool = significant.length > 0 ? significant : words
+  if (pool.length === 0) return "?"
+  if (pool.length === 1) {
+    return pool[0].slice(0, 2).toUpperCase()
+  }
+  return (pool[0][0] + pool[1][0]).toUpperCase()
+}
+
+/**
+ * Deterministic warm hue for a monogram tile, derived from the name so the
+ * same org always gets the same colour. Tuned to sit quietly against the warm
+ * neutral palette (low saturation, mid lightness).
+ */
+export function monogramHue(name: string): number {
+  let h = 0
+  for (let i = 0; i < name.length; i++) {
+    h = (h * 31 + name.charCodeAt(i)) % 360
+  }
+  return h
+}
+
+/**
+ * Normalise an org/evaluator name to the key used by the organizations.json
+ * sidecar. MUST stay in sync with the pipeline's `_normalize_org_key`
+ * (eval_cards_backend_pipeline/.../sidecars.py) so the frontend's lookup keys
+ * match the producer's. The evaluator page uses this to find an org's homepage
+ * URL + logo from the sidecar map.
+ */
+export function normalizeOrgKey(name: string): string {
+  return name.trim().toLowerCase().replace(/\s+/g, " ")
+}

lib/evaluators.ts

@@ -17,7 +17,13 @@
  * 2025)") still produce a valid, unique, non-empty slug.
  */
 
+import type { OrgMetadata } from "@/lib/backend-artifacts"
 import type { BenchmarkEvalListItem } from "@/lib/eval-processing"
+import { normalizeOrgKey } from "@/lib/evaluator-logo"
+
+/** Display-name → registry org metadata (incl. the stable canonical `id`),
+ *  as delivered by the organizations.json sidecar (keyed by normalizeOrgKey). */
+export type OrgMetaMap = Record<string, OrgMetadata>
 
 /**
  * "Recognized" evaluator orgs — public leaderboards whose results we ingest
@@ -75,6 +81,23 @@ export function evaluatorSlug(name: string): string {
   return slug || "evaluator"
 }
 
+/**
+ * Stable, URL-safe slug for an evaluator — the SINGLE source of truth for
+ * /evaluators/<slug> URLs (every link builder and the detail-route resolver
+ * go through this).
+ *
+ * When the org resolves to a registry entity (`orgMeta` carries its canonical
+ * `id`), the slug is derived from that STABLE id, so renaming the display name
+ * never changes the URL. Orgs with no registry entry (raw corpus strings,
+ * which can't be renamed) fall back to the display-name slug. `evaluatorSlug`
+ * is applied to the id too so the slug stays lowercase/url-safe regardless of
+ * id casing (e.g. id "TIGER-Lab" → "tiger-lab").
+ */
+export function evaluatorSlugFor(name: string, orgMeta?: OrgMetaMap): string {
+  const id = orgMeta?.[normalizeOrgKey(name)]?.id
+  return id && id.trim() ? evaluatorSlug(id) : evaluatorSlug(name)
+}
+
 /** @deprecated internal alias — use {@link evaluatorSlug}. */
 const baseSlug = evaluatorSlug
 
@@ -84,7 +107,10 @@ const baseSlug = evaluatorSlug
  * order (name-sorted) so the same corpus always yields the same slugs;
  * collisions get a numeric suffix (`-2`, `-3`, …).
  */
-export function buildEvaluatorSlugMap(evals: BenchmarkEvalListItem[]): {
+export function buildEvaluatorSlugMap(
+  evals: BenchmarkEvalListItem[],
+  orgMeta?: OrgMetaMap,
+): {
   slugToName: Map<string, string>
   nameToSlug: Map<string, string>
 } {
@@ -101,7 +127,7 @@ export function buildEvaluatorSlugMap(evals: BenchmarkEvalListItem[]): {
   const used = new Map<string, number>()
 
   for (const name of Array.from(names).sort((a, b) => a.localeCompare(b))) {
-    const base = baseSlug(name)
+    const base = evaluatorSlugFor(name, orgMeta)
     const seen = used.get(base) ?? 0
     const slug = seen === 0 ? base : `${base}-${seen + 1}`
     used.set(base, seen + 1)
@@ -120,10 +146,10 @@ export function buildEvaluatorSlugMap(evals: BenchmarkEvalListItem[]): {
  */
 export function groupEvalsByEvaluator(
   evals: BenchmarkEvalListItem[],
-  opts?: { verifiedOnly?: boolean },
+  opts?: { verifiedOnly?: boolean; orgMeta?: OrgMetaMap },
 ): EvaluatorGroup[] {
   const verifiedOnly = opts?.verifiedOnly ?? false
-  const { nameToSlug } = buildEvaluatorSlugMap(evals)
+  const { nameToSlug } = buildEvaluatorSlugMap(evals, opts?.orgMeta)
 
   const acc = new Map<string, { evalCount: number; verifiedCount: number; isVerified: boolean }>()
 
@@ -159,7 +185,7 @@ export function groupEvalsByEvaluator(
   for (const [name, v] of acc) {
     groups.push({
       name,
-      slug: nameToSlug.get(name) ?? baseSlug(name),
+      slug: nameToSlug.get(name) ?? evaluatorSlugFor(name, opts?.orgMeta),
       evalCount: v.evalCount,
       verifiedCount: v.verifiedCount,
       isVerified: v.isVerified,
@@ -179,10 +205,10 @@ export function groupEvalsByEvaluator(
 export function getEvalsForEvaluator(
   allEvals: BenchmarkEvalListItem[],
   slug: string,
-  opts?: { verifiedOnly?: boolean },
+  opts?: { verifiedOnly?: boolean; orgMeta?: OrgMetaMap },
 ): { name: string | null; isVerified: boolean; evals: BenchmarkEvalListItem[] } {
   const verifiedOnly = opts?.verifiedOnly ?? false
-  const { slugToName } = buildEvaluatorSlugMap(allEvals)
+  const { slugToName } = buildEvaluatorSlugMap(allEvals, opts?.orgMeta)
   // Direct hit on the (possibly collision-suffixed) full slug, else fall back
   // to base-slug matching so links built from the shared `evaluatorSlug(name)`
   // helper — which can't see the suffix step — still resolve. The fallback is
@@ -192,7 +218,7 @@ export function getEvalsForEvaluator(
     for (const [, candidate] of Array.from(slugToName.entries()).sort((a, b) =>
       a[1].localeCompare(b[1]),
     )) {
-      if (evaluatorSlug(candidate) === slug) {
+      if (evaluatorSlugFor(candidate, opts?.orgMeta) === slug) {
         name = candidate
         break
       }

lib/sidecars.ts

@@ -18,6 +18,8 @@ import type {
   ComparisonIndex,
   CorpusAggregates,
   EvalHierarchy,
+  OrgMetadata,
+  OrgMetadataIndex,
   PeerRanksMap,
   PeerRanksSidecar,
 } from "@/lib/backend-artifacts"
@@ -35,6 +37,7 @@ let cache: {
   hierarchy?: CacheSlot<EvalHierarchy>
   comparisonIndex?: CacheSlot<ComparisonIndex>
   peerRanks?: CacheSlot<PeerRanksMap>
+  organizations?: CacheSlot<Record<string, OrgMetadata>>
 } = {}
 
 function getSnapshotUrl() {
@@ -378,6 +381,30 @@ export function fetchPeerRanks(): Promise<PeerRanksMap> {
   )
 }
 
+/**
+ * Per-evaluator-org metadata (homepage URL + logo pointer) from
+ * `warehouse/<snapshot>/organizations.json`, sourced from the registry.
+ * Resolves to the bare `normalizedName -> OrgMetadata` map the evaluator page
+ * looks up by name.
+ *
+ * Returns an empty map when the snapshot doesn't carry the file (older pinned
+ * snapshots predate the Stage J `organizations` sidecar), logging a warning
+ * rather than throwing so the page still renders with monograms + no links.
+ */
+export function fetchOrganizations(): Promise<Record<string, OrgMetadata>> {
+  return getCachedValue("organizations", "organizations", (preferStale) =>
+    fetchJson<OrgMetadataIndex>("organizations.json", preferStale)
+      .then((payload) => payload?.orgs ?? {})
+      .catch((err) => {
+        console.warn(
+          `[sidecars] organizations.json not available on snapshot; ` +
+            `falling back to empty map. ${err instanceof Error ? err.message : String(err)}`,
+        )
+        return {} as Record<string, OrgMetadata>
+      }),
+  )
+}
+
 /**
  * Fail fast on contract regressions. Comparison-index rows must carry
  * `family_id`; the model-page graph view collapses without it.