feat: refine model and benchmark exploration

app/about/page.tsx

@@ -150,6 +150,47 @@ export default function AboutPage() {
             />
           </section>
 
+          <section>
+            <Card className="border-border/70">
+              <CardHeader className="border-b bg-muted/20 pb-4">
+                <CardTitle className="text-xl">Terminology We Use</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-5 pt-6">
+                <p className="text-sm leading-7 text-muted-foreground">
+                  The evaluation community often uses <span className="font-medium text-foreground">benchmark</span>, <span className="font-medium text-foreground">eval</span>, <span className="font-medium text-foreground">metric</span>, and <span className="font-medium text-foreground">task</span> interchangeably. That ambiguity showed up repeatedly in this project, so we use a more operational set of definitions in the interface.
+                </p>
+
+                <div className="grid gap-4 md:grid-cols-3">
+                  <DefinitionCard
+                    title="Single benchmark"
+                    definition="An individual evaluation with a defined dataset and scoring method."
+                    examples={["GSM8K", "IFEval", "MMLU-Pro"]}
+                  />
+                  <DefinitionCard
+                    title="Composite benchmark"
+                    definition="A collection of single benchmarks reported together, often under a unified leaderboard."
+                    examples={["Open LLM Leaderboard", "HELM Instruct", "HF Open LLM v2"]}
+                  />
+                  <DefinitionCard
+                    title="Metric"
+                    definition="Strictly what is measured and how; not a benchmark nested inside a composite."
+                    examples={["Accuracy", "pass@1", "F1", "binary accuracy"]}
+                  />
+                </div>
+
+                <div className="rounded-2xl border bg-muted/10 p-4 text-sm leading-7 text-muted-foreground">
+                  <div className="font-medium text-foreground">Important example</div>
+                  <p className="mt-2">
+                    If Reward Bench lists <span className="font-medium text-foreground">factuality</span> under a “metrics” heading, we treat that as a <span className="font-medium text-foreground">benchmark</span> in this interface. The <span className="font-medium text-foreground">metric</span> is the scoring rule attached to it, such as binary accuracy.
+                  </p>
+                  <p className="mt-2">
+                    This is also why the Evaluations page can now group <span className="font-medium text-foreground">single benchmarks</span> underneath a <span className="font-medium text-foreground">composite benchmark</span> like HF Open LLM v2 instead of conflating the two.
+                  </p>
+                </div>
+              </CardContent>
+            </Card>
+          </section>
+
           <section>
             <Card className="border-border/70">
               <CardHeader className="border-b bg-muted/20 pb-4">
@@ -208,6 +249,30 @@ export default function AboutPage() {
   )
 }
 
+function DefinitionCard({
+  title,
+  definition,
+  examples,
+}: {
+  title: string
+  definition: string
+  examples: string[]
+}) {
+  return (
+    <div className="rounded-2xl border bg-muted/10 p-4">
+      <div className="text-sm font-semibold">{title}</div>
+      <p className="mt-2 text-sm leading-6 text-muted-foreground">{definition}</p>
+      <div className="mt-3 flex flex-wrap gap-2">
+        {examples.map((example) => (
+          <Badge key={example} variant="outline">
+            {example}
+          </Badge>
+        ))}
+      </div>
+    </div>
+  )
+}
+
 function SurfaceNote({
   icon,
   title,

app/api/developer-summary/route.ts

@@ -0,0 +1,20 @@
+import { NextResponse } from "next/server"
+
+import { getDeveloperSummaryById } from "@/lib/model-data"
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url)
+  const id = searchParams.get("id")
+
+  if (!id) {
+    return NextResponse.json({ error: "Missing developer id" }, { status: 400 })
+  }
+
+  const summary = await getDeveloperSummaryById(id)
+
+  if (!summary) {
+    return NextResponse.json({ error: "Developer not found" }, { status: 404 })
+  }
+
+  return NextResponse.json(summary)
+}

app/api/developers/route.ts

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

app/developers/[id]/page.tsx

@@ -0,0 +1,192 @@
+"use client"
+
+import { useCallback, useEffect, useMemo, useState } from "react"
+import { useParams, useRouter } from "next/navigation"
+import { ArrowLeft, ArrowUpDown, Search } from "lucide-react"
+
+import { BenchmarkEvaluationCard, type BenchmarkEvaluationCardData } from "@/components/benchmark-evaluation-card"
+import { ListPagination } from "@/components/list-pagination"
+import { Navigation } from "@/components/navigation"
+import { PageHeader } from "@/components/page-header"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { fetchDeveloperSummary } from "@/lib/dashboard-data-client"
+
+const PAGE_SIZE = 40
+
+export default function DeveloperDetailPage() {
+  const params = useParams()
+  const router = useRouter()
+  const [developer, setDeveloper] = useState<string>("")
+  const [models, setModels] = useState<BenchmarkEvaluationCardData[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [searchQuery, setSearchQuery] = useState("")
+  const [sortBy, setSortBy] = useState<"date" | "name" | "benchmarks">("date")
+  const [page, setPage] = useState(1)
+
+  const routeId = params.id as string
+
+  const handleBack = useCallback(() => {
+    router.push("/developers")
+  }, [router])
+
+  useEffect(() => {
+    fetchDeveloperSummary(routeId)
+      .then((summary) => {
+        setDeveloper(summary.developer)
+        setModels(summary.models)
+      })
+      .catch((err) => {
+        console.error(err)
+        setError("Developer not found")
+      })
+      .finally(() => setLoading(false))
+  }, [routeId])
+
+  const filteredModels = useMemo(() => {
+    const query = searchQuery.trim().toLowerCase()
+    const filtered = query
+      ? models.filter((model) => {
+          const haystacks = [
+            model.model_name,
+            model.canonical_model_name,
+            model.developer,
+            ...model.top_scores.map((score) => score.benchmark),
+          ]
+
+          return haystacks.some((value) => value?.toLowerCase().includes(query))
+        })
+      : [...models]
+
+    switch (sortBy) {
+      case "date":
+        filtered.sort(
+          (a, b) =>
+            new Date(b.latest_timestamp).getTime() -
+            new Date(a.latest_timestamp).getTime()
+        )
+        break
+      case "name":
+        filtered.sort((a, b) => a.model_name.localeCompare(b.model_name))
+        break
+      case "benchmarks":
+        filtered.sort((a, b) => b.benchmarks_count - a.benchmarks_count)
+        break
+    }
+
+    return filtered
+  }, [models, searchQuery, sortBy])
+
+  useEffect(() => {
+    setPage(1)
+  }, [searchQuery, sortBy])
+
+  const pagedModels = useMemo(
+    () => filteredModels.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE),
+    [filteredModels, page]
+  )
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-background">
+        <Navigation />
+        <main className="container mx-auto px-4 py-8">
+          <div className="flex h-96 items-center justify-center">
+            <div className="text-lg text-muted-foreground">Loading developer...</div>
+          </div>
+        </main>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="min-h-screen bg-background">
+        <Navigation />
+        <main className="container mx-auto px-4 py-8">
+          <div className="flex flex-col items-center justify-center h-96 space-y-4">
+            <div className="text-lg text-muted-foreground">{error}</div>
+            <Button onClick={handleBack}>
+              <ArrowLeft className="mr-2 h-4 w-4" />
+              Back to Developers
+            </Button>
+          </div>
+        </main>
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen bg-background">
+      <Navigation />
+      <main className="container mx-auto px-4 py-8">
+        <PageHeader
+          eyebrow="Developer"
+          title={developer}
+          description="Model cards loaded from this developer’s index and detail files, without scanning the entire corpus."
+          metaItems={[
+            { label: "Models", value: models.length.toString() },
+            {
+              label: "Reported Results",
+              value: models.reduce((sum, model) => sum + model.evaluations_count, 0).toString(),
+            },
+          ]}
+        >
+          <Button variant="outline" onClick={handleBack}>
+            <ArrowLeft className="mr-2 h-4 w-4" />
+            Back
+          </Button>
+        </PageHeader>
+
+        <div className="mb-8 mt-8 flex flex-col gap-4 border-b border-border/50 pb-6 sm:flex-row">
+          <div className="relative w-full sm:max-w-sm">
+            <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              value={searchQuery}
+              onChange={(event) => setSearchQuery(event.target.value)}
+              placeholder="Search models or benchmarks"
+              className="pl-9"
+            />
+          </div>
+          <Select value={sortBy} onValueChange={(value) => setSortBy(value as typeof sortBy)}>
+            <SelectTrigger className="w-[180px]">
+              <ArrowUpDown className="mr-2 h-4 w-4" />
+              <SelectValue placeholder="Sort by" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="date">Latest First</SelectItem>
+              <SelectItem value="name">Name (A-Z)</SelectItem>
+              <SelectItem value="benchmarks">Most Benchmark Coverage</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        {filteredModels.length === 0 ? (
+          <div className="py-12 text-center text-lg text-muted-foreground">
+            No models found matching your filters
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-2">
+            {pagedModels.map((model, index) => (
+              <BenchmarkEvaluationCard
+                key={model.id}
+                data={model}
+                delayMs={Math.min(index * 45, 240)}
+              />
+            ))}
+          </div>
+        )}
+
+        <ListPagination
+          page={page}
+          pageSize={PAGE_SIZE}
+          totalItems={filteredModels.length}
+          itemLabel="models"
+          onPageChange={setPage}
+        />
+      </main>
+    </div>
+  )
+}

app/developers/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation"
+
+export default function DevelopersRedirectPage() {
+  redirect("/models?group=developer")
+}

app/evals/[id]/page.tsx

@@ -42,7 +42,7 @@ export default function EvalDetailPage() {
         const evalId = decodeURIComponent(params.id as string)
         const found = await fetchEvalSummary(evalId)
         setSummary(found)
-        document.title = `${found.evaluation_name} Evaluation`
+        document.title = `${found.evaluation_name} | Single Benchmark`
       } catch (err) {
         console.error(err)
         setError("Evaluation not found")
@@ -94,7 +94,7 @@ export default function EvalDetailPage() {
               <ArrowLeft className="h-4 w-4" />
             </Button>
             <div className="flex-1 text-center">
-              <h2 className="text-base font-medium tracking-tight text-foreground/90 sm:text-lg">Evaluation details</h2>
+              <h2 className="text-base font-medium tracking-tight text-foreground/90 sm:text-lg">Single benchmark details</h2>
             </div>
           </div>
           {/* Desktop */}
@@ -105,7 +105,7 @@ export default function EvalDetailPage() {
             </Button>
             <div className="text-center">
               <h2 className="text-xl font-medium tracking-tight text-foreground/90 md:text-2xl">
-                Evaluation details
+                Single benchmark details
               </h2>
             </div>
             <div />

app/evals/page.tsx

@@ -20,6 +20,7 @@ export default function EvalsPage() {
   const [loading, setLoading] = useState(true)
   const [totalModels, setTotalModels] = useState(0)
   const [sortBy, setSortBy] = useState<"name" | "models" | "score">("name")
+  const [groupByComposite, setGroupByComposite] = useState(true)
   const [searchQuery, setSearchQuery] = useState("")
   const [page, setPage] = useState(1)
 
@@ -40,6 +41,7 @@ export default function EvalsPage() {
     if (query) {
       list = list.filter((summary) => {
         const haystacks = [
+          summary.composite_benchmark_name,
           summary.evaluation_name,
           summary.metric_config.evaluation_description,
           summary.latest_source_name,
@@ -67,15 +69,43 @@ export default function EvalsPage() {
     return list
   }, [searchQuery, summaries, sortBy])
 
+  const groupedSummaries = useMemo(() => {
+    const groups = new Map<
+      string,
+      {
+        key: string
+        name: string
+        items: BenchmarkEvalListItem[]
+      }
+    >()
+
+    for (const summary of filtered) {
+      const existing = groups.get(summary.composite_benchmark_key) ?? {
+        key: summary.composite_benchmark_key,
+        name: summary.composite_benchmark_name,
+        items: [],
+      }
+      existing.items.push(summary)
+      groups.set(summary.composite_benchmark_key, existing)
+    }
+
+    return Array.from(groups.values()).sort((a, b) => a.name.localeCompare(b.name))
+  }, [filtered])
+
   useEffect(() => {
     setPage(1)
-  }, [sortBy, searchQuery])
+  }, [groupByComposite, sortBy, searchQuery])
 
   const pagedSummaries = useMemo(
     () => filtered.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE),
     [filtered, page]
   )
 
+  const pagedGroups = useMemo(
+    () => groupedSummaries.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE),
+    [groupedSummaries, page]
+  )
+
   if (loading) {
     return (
       <div className="min-h-screen bg-background">
@@ -97,50 +127,120 @@ export default function EvalsPage() {
         title="Explore Evaluations"
         description={
           mode === "research"
-            ? "Compare benchmark behavior, methodological framing, and performance spread."
-            : "Review evaluation reporting with emphasis on coverage, evidence, and accountable documentation."
+            ? "Compare benchmark behavior, methodological framing, and performance spread, or group single benchmarks under their composite leaderboards."
+            : "Review evaluation reporting with emphasis on coverage, evidence, and accountable documentation, including how single benchmarks roll up into composite leaderboards."
+        }
+        metaItems={
+          groupByComposite
+            ? [
+                { label: "Composite Benchmarks", value: groupedSummaries.length.toString() },
+                { label: "Single Benchmarks", value: filtered.length.toString() },
+                { label: "Models", value: totalModels.toString() },
+                { label: "View", value: mode === "research" ? "Research" : "Policy" },
+              ]
+            : [
+                { label: "Single Benchmarks", value: summaries.length.toString() },
+                { label: "Models", value: totalModels.toString() },
+                { label: "View", value: mode === "research" ? "Research" : "Policy" },
+              ]
         }
-        metaItems={[
-          { label: "Benchmarks", value: summaries.length.toString() },
-          { label: "Models", value: totalModels.toString() },
-          { label: "View", value: mode === "research" ? "Research" : "Policy" },
-        ]}
       />
       <main className="container mx-auto px-4 py-8">
-        <div className="mb-8 flex flex-col gap-3 border-b border-border/50 pb-6 sm:flex-row">
+        <div className="mb-8 flex flex-col gap-3 border-b border-border/50 pb-6 sm:flex-row sm:flex-wrap sm:items-center">
           <div className="relative w-full sm:max-w-sm">
             <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
             <Input
               value={searchQuery}
               onChange={(event) => setSearchQuery(event.target.value)}
-              placeholder="Search benchmarks, purpose, or source"
+              placeholder={
+                groupByComposite
+                  ? "Search composite benchmarks, single benchmarks, purpose, or source"
+                  : "Search single benchmarks, purpose, or source"
+              }
               className="pl-9"
             />
           </div>
+          <div className="inline-flex w-fit rounded-full border bg-muted/20 p-1">
+            <button
+              type="button"
+              onClick={() => setGroupByComposite(false)}
+              className={`inline-flex items-center rounded-full px-3 py-1.5 text-sm font-medium transition-colors ${
+                !groupByComposite
+                  ? "bg-background text-foreground shadow-sm"
+                  : "text-muted-foreground hover:text-foreground"
+              }`}
+            >
+              Flat list
+            </button>
+            <button
+              type="button"
+              onClick={() => setGroupByComposite(true)}
+              className={`inline-flex items-center rounded-full px-3 py-1.5 text-sm font-medium transition-colors ${
+                groupByComposite
+                  ? "bg-background text-foreground shadow-sm"
+                  : "text-muted-foreground hover:text-foreground"
+              }`}
+            >
+              Group by composite benchmark
+            </button>
+          </div>
           <Select value={sortBy} onValueChange={v => setSortBy(v as any)}>
             <SelectTrigger className="w-[200px]">
               <ArrowUpDown className="h-4 w-4 mr-2" />
               <SelectValue placeholder="Sort" />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="name">Latest Evaluation First</SelectItem>
+              <SelectItem value="name">Single Benchmark (A-Z)</SelectItem>
               <SelectItem value="models">Most Models</SelectItem>
               <SelectItem value="score">Highest Avg Score</SelectItem>
             </SelectContent>
           </Select>
         </div>
 
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-          {pagedSummaries.map((summary, index) => (
-            <EvalCard
-              key={summary.evaluation_id}
-              summary={summary}
-              delayMs={Math.min(index * 45, 240)}
-            />
-          ))}
-        </div>
+        {groupByComposite ? (
+          <div className="space-y-8">
+            {pagedGroups.map((group, groupIndex) => (
+              <section
+                key={group.key}
+                className="rounded-[1.5rem] border border-border/70 bg-muted/10 p-5"
+              >
+                <div className="mb-4 flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
+                  <div>
+                    <div className="text-[11px] font-semibold uppercase tracking-[0.22em] text-muted-foreground">
+                      Composite Benchmark
+                    </div>
+                    <h2 className="mt-1 text-xl font-bold tracking-tight">{group.name}</h2>
+                    <p className="mt-1 text-sm text-muted-foreground">
+                      {group.items.length} single benchmark{group.items.length !== 1 ? "s" : ""} grouped under this composite benchmark.
+                    </p>
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+                  {group.items.map((summary, index) => (
+                    <EvalCard
+                      key={summary.evaluation_id}
+                      summary={summary}
+                      delayMs={Math.min((groupIndex * 2 + index) * 35, 240)}
+                    />
+                  ))}
+                </div>
+              </section>
+            ))}
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+            {pagedSummaries.map((summary, index) => (
+              <EvalCard
+                key={summary.evaluation_id}
+                summary={summary}
+                delayMs={Math.min(index * 45, 240)}
+              />
+            ))}
+          </div>
+        )}
 
-        {filtered.length === 0 && (
+        {(groupByComposite ? groupedSummaries.length === 0 : filtered.length === 0) && (
           <div className="text-center py-12 text-muted-foreground">
             No evaluations found.
           </div>
@@ -149,8 +249,8 @@ export default function EvalsPage() {
         <ListPagination
           page={page}
           pageSize={PAGE_SIZE}
-          totalItems={filtered.length}
-          itemLabel="evaluations"
+          totalItems={groupByComposite ? groupedSummaries.length : filtered.length}
+          itemLabel={groupByComposite ? "composite benchmarks" : "single benchmarks"}
           onPageChange={setPage}
         />
       </main>

app/{evaluations → models}/[id]/page.tsx

@@ -10,7 +10,7 @@ import type { ModelEvaluationSummary } from "@/lib/eval-processing"
 import { fetchModelSummary } from "@/lib/dashboard-data-client"
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
 
-export default function BenchmarkDetailPage() {
+export default function ModelDetailPage() {
   const params = useParams()
   const router = useRouter()
   const searchParams = useSearchParams()
@@ -59,22 +59,69 @@ export default function BenchmarkDetailPage() {
     router.push("/models")
   }, [router])
 
+  const handleVariantChange = useCallback(
+    (nextVariantId: string) => {
+      setSelectedVariantId(nextVariantId)
+
+      if (!summary || summary.variants.length <= 1 || !routeId) {
+        return
+      }
+
+      const nextVariant = summary.variants.find((variant) => variant.variant_id === nextVariantId)
+      if (!nextVariant) {
+        return
+      }
+
+      const nextParams = new URLSearchParams(searchParams.toString())
+      const currentVersion = nextParams.get("version")
+      const nextVersion = nextVariant.variant_key
+
+      if (currentVersion === nextVersion) {
+        return
+      }
+
+      nextParams.set("version", nextVersion)
+      const nextQuery = nextParams.toString()
+      router.replace(
+        nextQuery ? `/models/${routeId}?${nextQuery}` : `/models/${routeId}`,
+        { scroll: false }
+      )
+    },
+    [routeId, router, searchParams, summary]
+  )
+
   useEffect(() => {
+    let isCancelled = false
+
     const loadData = async () => {
       try {
         const modelSummary = await fetchModelSummary(routeId)
+        if (isCancelled) {
+          return
+        }
+
         setSummary(modelSummary)
-        setSelectedVariantId(getVariantFromQuery(modelSummary)?.variant_id ?? null)
+        setSelectedVariantId((current) => current ?? modelSummary.variants[0]?.variant_id ?? null)
       } catch (err) {
-        console.error("Failed to load evaluation:", err)
-        setError("Failed to load evaluation data")
+        if (isCancelled) {
+          return
+        }
+
+        console.error("Failed to load model:", err)
+        setError("Failed to load model data")
       } finally {
-        setLoading(false)
+        if (!isCancelled) {
+          setLoading(false)
+        }
       }
     }
-    
+
     loadData()
-  }, [getVariantFromQuery, routeId])
+
+    return () => {
+      isCancelled = true
+    }
+  }, [routeId])
 
   useEffect(() => {
     if (!summary?.variants.length) {
@@ -85,7 +132,7 @@ export default function BenchmarkDetailPage() {
     if (requestedVariant && requestedVariant.variant_id !== selectedVariantId) {
       setSelectedVariantId(requestedVariant.variant_id)
     }
-  }, [getVariantFromQuery, searchParams, selectedVariantId, summary])
+  }, [getVariantFromQuery, searchParams, summary])
 
   const selectedVariant = useMemo(() => {
     if (!summary) {
@@ -115,34 +162,13 @@ export default function BenchmarkDetailPage() {
     document.title = `${titleParts.join(" · ")} - AI Evaluation Dashboard`
   }, [selectedVariant, summary])
 
-  useEffect(() => {
-    if (!summary || summary.variants.length <= 1 || !selectedVariant || !routeId) {
-      return
-    }
-
-    const nextParams = new URLSearchParams(searchParams.toString())
-    const currentVersion = nextParams.get("version")
-    const nextVersion = selectedVariant.variant_key
-
-    if (currentVersion === nextVersion) {
-      return
-    }
-
-    nextParams.set("version", nextVersion)
-    const nextQuery = nextParams.toString()
-    router.replace(
-      nextQuery ? `/evaluations/${routeId}?${nextQuery}` : `/evaluations/${routeId}`,
-      { scroll: false }
-    )
-  }, [routeId, router, searchParams, selectedVariant, summary])
-
   if (loading) {
     return (
       <div className="min-h-screen bg-background">
         <Navigation />
         <main className="container mx-auto px-4 py-8">
           <div className="flex items-center justify-center h-96">
-            <div className="text-lg text-muted-foreground">Loading evaluation details...</div>
+            <div className="text-lg text-muted-foreground">Loading model details...</div>
           </div>
         </main>
       </div>
@@ -155,7 +181,7 @@ export default function BenchmarkDetailPage() {
         <Navigation />
         <main className="container mx-auto px-4 py-8">
           <div className="flex flex-col items-center justify-center h-96 space-y-4">
-            <div className="text-lg text-muted-foreground">{error || "Evaluation not found"}</div>
+            <div className="text-lg text-muted-foreground">{error || "Model not found"}</div>
             <Button onClick={handleBack}>
               <ArrowLeft className="mr-2 h-4 w-4" />
               Back
@@ -174,10 +200,9 @@ export default function BenchmarkDetailPage() {
       <Navigation />
       <div className="border-b bg-muted/30">
         <div className="container mx-auto px-4 sm:px-6 py-4 sm:py-6">
-          {/* Mobile layout - Back button + centered title */}
           <div className="flex items-center gap-3 sm:hidden">
-            <Button 
-              variant="ghost" 
+            <Button
+              variant="ghost"
               size="sm"
               onClick={handleBack}
               className="shrink-0"
@@ -186,15 +211,14 @@ export default function BenchmarkDetailPage() {
             </Button>
             <div className="flex-1 text-center">
               <h2 className="text-base font-medium tracking-tight text-foreground/90 sm:text-lg">
-                Evaluation details
+                Model details
               </h2>
             </div>
           </div>
-          
-          {/* Desktop layout - Grid with back button, centered title, empty space */}
+
           <div className="hidden sm:grid sm:grid-cols-[auto_1fr_auto] sm:items-center sm:gap-4">
-            <Button 
-              variant="ghost" 
+            <Button
+              variant="ghost"
               onClick={handleBack}
             >
               <ArrowLeft className="mr-2 h-4 w-4" />
@@ -202,7 +226,7 @@ export default function BenchmarkDetailPage() {
             </Button>
             <div className="text-center">
               <h2 className="text-xl font-medium tracking-tight text-foreground/90 md:text-2xl">
-                Evaluation details
+                Model details
               </h2>
             </div>
             <div />
@@ -215,7 +239,7 @@ export default function BenchmarkDetailPage() {
               </div>
               <Tabs
                 value={selectedVariant?.variant_id ?? summary.variants[0].variant_id}
-                onValueChange={setSelectedVariantId}
+                onValueChange={handleVariantChange}
                 className="gap-0"
               >
                 <TabsList className="flex w-full flex-wrap gap-2">

app/models/page.tsx

@@ -7,34 +7,49 @@ import { Input } from "@/components/ui/input"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
 import { ArrowUpDown, Search } from "lucide-react"
 import { BenchmarkEvaluationCard, type BenchmarkEvaluationCardData } from "@/components/benchmark-evaluation-card"
+import { DeveloperCard } from "@/components/developer-card"
 import { ListPagination } from "@/components/list-pagination"
 import { Navigation } from "@/components/navigation"
 import { PageHeader } from "@/components/page-header"
-import { fetchModelCards } from "@/lib/dashboard-data-client"
+import { fetchDevelopers, fetchModelCards, type DeveloperListItem } from "@/lib/dashboard-data-client"
 
 const PAGE_SIZE = 40
 
 export default function ModelsPage() {
   const { mode } = useAudienceMode()
   const [evaluations, setEvaluations] = useState<BenchmarkEvaluationCardData[]>([])
-  const [loading, setLoading] = useState(true)
-  const [sortBy, setSortBy] = useState<"date" | "name" | "benchmarks">("date")
+  const [developers, setDevelopers] = useState<DeveloperListItem[]>([])
+  const [loadingModels, setLoadingModels] = useState(true)
+  const [loadingDevelopers, setLoadingDevelopers] = useState(true)
+  const [groupByDeveloper, setGroupByDeveloper] = useState(false)
+  const [modelSortBy, setModelSortBy] = useState<"date" | "name" | "benchmarks">("date")
+  const [developerSortBy, setDeveloperSortBy] = useState<"coverage" | "evaluated" | "models" | "name">("coverage")
   const [searchQuery, setSearchQuery] = useState("")
   const [page, setPage] = useState(1)
 
   useEffect(() => {
-    const loadData = async () => {
-      try {
-        const data = await fetchModelCards()
-        setEvaluations(data)
-      } catch (error) {
+    fetchModelCards()
+      .then(setEvaluations)
+      .catch((error) => {
         console.error("Failed to load evaluations:", error)
-      } finally {
-        setLoading(false)
-      }
+      })
+      .finally(() => setLoadingModels(false))
+
+    fetchDevelopers()
+      .then(setDevelopers)
+      .catch((error) => {
+        console.error("Failed to load developers:", error)
+      })
+      .finally(() => setLoadingDevelopers(false))
+  }, [])
+
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return
     }
 
-    loadData()
+    const params = new URLSearchParams(window.location.search)
+    setGroupByDeveloper(params.get("group") === "developer")
   }, [])
 
   const filteredEvaluations = useMemo(() => {
@@ -62,7 +77,7 @@ export default function ModelsPage() {
   const sortedEvaluations = useMemo(() => {
     const sorted = [...filteredEvaluations]
 
-    switch (sortBy) {
+    switch (modelSortBy) {
       case "date":
         sorted.sort((a, b) =>
           new Date(b.latest_timestamp).getTime() - new Date(a.latest_timestamp).getTime()
@@ -77,28 +92,81 @@ export default function ModelsPage() {
     }
 
     return sorted
-  }, [filteredEvaluations, sortBy])
+  }, [filteredEvaluations, modelSortBy])
+
+  const filteredDevelopers = useMemo(() => {
+    const query = searchQuery.trim().toLowerCase()
+    const filtered = query
+      ? developers.filter((developer) => {
+          const haystacks = [
+            developer.developer,
+            ...developer.popular_evals.map((evaluation) => evaluation.benchmark),
+          ]
+
+          return haystacks.some((value) => value?.toLowerCase().includes(query))
+        })
+      : [...developers]
+
+    filtered.sort((a, b) => {
+      switch (developerSortBy) {
+        case "coverage":
+          if (b.benchmark_count !== a.benchmark_count) {
+            return b.benchmark_count - a.benchmark_count
+          }
+          if (b.evaluation_count !== a.evaluation_count) {
+            return b.evaluation_count - a.evaluation_count
+          }
+          if (b.model_count !== a.model_count) {
+            return b.model_count - a.model_count
+          }
+          break
+        case "evaluated":
+          if (b.evaluation_count !== a.evaluation_count) {
+            return b.evaluation_count - a.evaluation_count
+          }
+          break
+        case "models":
+          if (b.model_count !== a.model_count) {
+            return b.model_count - a.model_count
+          }
+          break
+        case "name":
+          break
+      }
+
+      return a.developer.localeCompare(b.developer)
+    })
+
+    return filtered
+  }, [developerSortBy, developers, searchQuery])
 
   useEffect(() => {
     setPage(1)
-  }, [sortBy, searchQuery])
+  }, [developerSortBy, groupByDeveloper, modelSortBy, searchQuery])
 
   const pagedEvaluations = useMemo(
     () => sortedEvaluations.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE),
     [sortedEvaluations, page]
   )
 
+  const pagedDevelopers = useMemo(
+    () => filteredDevelopers.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE),
+    [filteredDevelopers, page]
+  )
+
   const handleDelete = (id: string) => {
     setEvaluations((prev) => prev.filter((e) => e.id !== id))
   }
 
+  const loading = loadingModels || loadingDevelopers
+
   if (loading) {
     return (
       <div className="min-h-screen bg-background">
         <Navigation />
         <main className="container mx-auto px-4 py-8">
           <div className="flex items-center justify-center h-96">
-            <div className="text-lg text-muted-foreground">Loading evaluations...</div>
+            <div className="text-lg text-muted-foreground">Loading models...</div>
           </div>
         </main>
       </div>
@@ -111,50 +179,115 @@ export default function ModelsPage() {
       <main className="container mx-auto px-4 py-8">
         <PageHeader
           eyebrow="Models"
-          title="AI Model Evaluations"
+          title={groupByDeveloper ? "Model Developers" : "AI Model Evaluations"}
           description={
-            mode === "research"
-              ? "Browse model cards with benchmark breadth, result density, and technical highlights."
-              : "Browse model cards with stronger emphasis on reporting breadth, evidence, and evaluation accountability."
+            groupByDeveloper
+              ? "Group the model corpus by developer to compare how many models each team ships and which eval suites show up most often."
+              : mode === "research"
+                ? "Browse model cards with benchmark breadth, result density, and technical highlights."
+                : "Browse model cards with stronger emphasis on reporting breadth, evidence, and evaluation accountability."
           }
           metaItems={[
-            { label: "Models", value: sortedEvaluations.length.toString() },
-            { label: "Reported results", value: sortedEvaluations.reduce((sum, e) => sum + e.evaluations_count, 0).toString() },
-            { label: "Reporting orgs", value: new Set(sortedEvaluations.flatMap((e) => e.evaluator_names)).size.toString() },
+            groupByDeveloper
+              ? { label: "Developers", value: filteredDevelopers.length.toString() }
+              : { label: "Models", value: sortedEvaluations.length.toString() },
+            groupByDeveloper
+              ? {
+                  label: "Indexed Models",
+                  value: filteredDevelopers.reduce((sum, developer) => sum + developer.model_count, 0).toString(),
+                }
+              : { label: "Reported results", value: sortedEvaluations.reduce((sum, e) => sum + e.evaluations_count, 0).toString() },
+            groupByDeveloper
+              ? {
+                  label: "Benchmarks",
+                  value: filteredDevelopers.reduce((sum, developer) => sum + developer.benchmark_count, 0).toString(),
+                }
+              : { label: "Reporting orgs", value: new Set(sortedEvaluations.flatMap((e) => e.evaluator_names)).size.toString() },
           ]}
         />
 
-        <div className="mb-8 flex flex-col gap-4 border-b border-border/50 pb-6 sm:flex-row">
+        <div className="mb-8 flex flex-col gap-4 border-b border-border/50 pb-6 sm:flex-row sm:flex-wrap sm:items-center">
           <div className="relative w-full sm:max-w-sm">
             <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
             <Input
               value={searchQuery}
               onChange={(event) => setSearchQuery(event.target.value)}
-              placeholder="Search models, developers, or benchmarks"
+              placeholder={
+                groupByDeveloper
+                  ? "Search developers or popular evals"
+                  : "Search models, developers, or benchmarks"
+              }
               className="pl-9"
             />
           </div>
-          <Select value={sortBy} onValueChange={(value) => setSortBy(value as typeof sortBy)}>
+          <div className="inline-flex w-fit rounded-full border bg-muted/20 p-1">
+            <button
+              type="button"
+              onClick={() => setGroupByDeveloper(false)}
+              className={`inline-flex items-center rounded-full px-3 py-1.5 text-sm font-medium transition-colors ${
+                !groupByDeveloper
+                  ? "bg-background text-foreground shadow-sm"
+                  : "text-muted-foreground hover:text-foreground"
+              }`}
+            >
+              Models
+            </button>
+            <button
+              type="button"
+              onClick={() => setGroupByDeveloper(true)}
+              className={`inline-flex items-center rounded-full px-3 py-1.5 text-sm font-medium transition-colors ${
+                groupByDeveloper
+                  ? "bg-background text-foreground shadow-sm"
+                  : "text-muted-foreground hover:text-foreground"
+              }`}
+            >
+              Group by model developer
+            </button>
+          </div>
+          <Select
+            value={groupByDeveloper ? developerSortBy : modelSortBy}
+            onValueChange={(value) => {
+              if (groupByDeveloper) {
+                setDeveloperSortBy(value as typeof developerSortBy)
+              } else {
+                setModelSortBy(value as typeof modelSortBy)
+              }
+            }}
+          >
             <SelectTrigger className="w-[180px]">
               <ArrowUpDown className="mr-2 h-4 w-4" />
               <SelectValue placeholder="Sort by" />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="date">Latest First</SelectItem>
-              <SelectItem value="name">Name (A-Z)</SelectItem>
-              <SelectItem value="benchmarks">Most Benchmarks</SelectItem>
+              {groupByDeveloper ? (
+                <>
+                  <SelectItem value="coverage">Most Coverage</SelectItem>
+                  <SelectItem value="evaluated">Most Results</SelectItem>
+                  <SelectItem value="models">Most Models</SelectItem>
+                  <SelectItem value="name">Name (A-Z)</SelectItem>
+                </>
+              ) : (
+                <>
+                  <SelectItem value="date">Latest First</SelectItem>
+                  <SelectItem value="name">Name (A-Z)</SelectItem>
+                  <SelectItem value="benchmarks">Most Benchmark Coverage</SelectItem>
+                </>
+              )}
             </SelectContent>
           </Select>
         </div>
 
-        {sortedEvaluations.length === 0 ? (
+        {(groupByDeveloper ? filteredDevelopers.length === 0 : sortedEvaluations.length === 0) ? (
           <div className="py-12 text-center">
             <p className="mb-4 text-lg text-muted-foreground">
-              No evaluations found matching your filters
+              {groupByDeveloper
+                ? "No developers found matching your filters"
+                : "No evaluations found matching your filters"}
             </p>
             <Button
               onClick={() => {
-                setSortBy("date")
+                setModelSortBy("date")
+                setDeveloperSortBy("coverage")
                 setSearchQuery("")
               }}
             >
@@ -163,22 +296,30 @@ export default function ModelsPage() {
           </div>
         ) : (
           <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-2">
-            {pagedEvaluations.map((evaluation, index) => (
-              <BenchmarkEvaluationCard
-                key={evaluation.id}
-                data={evaluation}
-                onDelete={handleDelete}
-                delayMs={Math.min(index * 45, 240)}
-              />
-            ))}
+            {groupByDeveloper
+              ? pagedDevelopers.map((developer, index) => (
+                  <DeveloperCard
+                    key={developer.route_id}
+                    developer={developer}
+                    delayMs={Math.min(index * 45, 240)}
+                  />
+                ))
+              : pagedEvaluations.map((evaluation, index) => (
+                  <BenchmarkEvaluationCard
+                    key={evaluation.id}
+                    data={evaluation}
+                    onDelete={handleDelete}
+                    delayMs={Math.min(index * 45, 240)}
+                  />
+                ))}
           </div>
         )}
 
         <ListPagination
           page={page}
           pageSize={PAGE_SIZE}
-          totalItems={sortedEvaluations.length}
-          itemLabel="models"
+          totalItems={groupByDeveloper ? filteredDevelopers.length : sortedEvaluations.length}
+          itemLabel={groupByDeveloper ? "developers" : "models"}
           onPageChange={setPage}
         />
       </main>

app/page.tsx

@@ -126,7 +126,7 @@ export default function HomePage() {
           <Info className="h-4 w-4 text-amber-600 dark:text-amber-400" />
           <AlertTitle>Demo Environment</AlertTitle>
           <AlertDescription>
-            This is a demonstration of the evaluation dashboard. The data shown is sample/dummy data for testing purposes.
+            This is a research preview with sample data for demonstration purposes.
           </AlertDescription>
         </Alert>
 
@@ -249,8 +249,8 @@ export default function HomePage() {
         <section className="grid gap-6 xl:grid-cols-2">
           <OverviewPanel
             eyebrow="Accountability"
-            title="Most independently reported models"
-            description="Models with the highest share of independently reported evidence."
+            title="Highest third-party reporting share"
+            description="Models with the largest share of third-party benchmark reporting in the current corpus."
             href="/models"
             cta="Browse models"
           >
@@ -260,7 +260,7 @@ export default function HomePage() {
                   key={model.id}
                   rank={index + 1}
                   model={model}
-                  metricLabel="Independent"
+                  metricLabel="Third-party share"
                   metricValue={`${Math.round(model.independent_verification_ratio * 100)}%`}
                   secondaryLabel={`${model.benchmarks_count} benchmarks`}
                   highlight={model.independent_verification_ratio > 0.5}
@@ -392,7 +392,7 @@ function ModelOverviewRow({
   highlight?: boolean
 }) {
   return (
-    <Link href={`/evaluations/${model.route_id}`} className="block">
+    <Link href={`/models/${model.route_id}`} className="block">
       <div className="flex items-center gap-4 rounded-2xl px-3 py-3 transition-colors hover:bg-muted/30">
         <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full border text-xs font-semibold">
           {rank}

components/benchmark-evaluation-card.tsx

@@ -139,6 +139,20 @@ function getReportingSummaryLabel(data: BenchmarkEvaluationCardData) {
   return "Aggregated reporting view"
 }
 
+function getReportingMixLabel(data: BenchmarkEvaluationCardData) {
+  const thirdPartyShare = Math.round(data.independent_verification_ratio * 100)
+
+  if (thirdPartyShare <= 0) {
+    return "Self-reported evidence"
+  }
+
+  if (thirdPartyShare >= 100) {
+    return "Third-party reported"
+  }
+
+  return `${thirdPartyShare}% third-party mix`
+}
+
 export function BenchmarkEvaluationCard({ data, onDelete, delayMs = 0 }: BenchmarkEvaluationCardProps) {
   const router = useRouter()
   const { mode } = useAudienceMode()
@@ -152,7 +166,7 @@ export function BenchmarkEvaluationCard({ data, onDelete, delayMs = 0 }: Benchma
     <Card
       className="motion-academic-enter motion-academic-surface motion-academic-hover group cursor-pointer overflow-hidden border-border/70 bg-card hover:shadow-xl"
       style={{ "--enter-delay": `${delayMs}ms` } as CSSProperties}
-      onClick={() => router.push(`/evaluations/${data.route_id}`)}
+      onClick={() => router.push(`/models/${data.route_id}`)}
     >
       <CardHeader className="space-y-4 border-b border-border/60 pb-4">
         <div className="flex flex-wrap items-center justify-between gap-2 text-[10px] font-semibold uppercase tracking-[0.24em] text-muted-foreground">
@@ -184,12 +198,7 @@ export function BenchmarkEvaluationCard({ data, onDelete, delayMs = 0 }: Benchma
               {data.input_modalities && data.input_modalities.length > 1 && (
                 <Badge variant="secondary">Multimodal</Badge>
               )}
-              {data.independent_verification_ratio > 0 ? (
-                <Badge className="bg-emerald-100 text-emerald-800 dark:bg-emerald-950/50 dark:text-emerald-300">
-                  <BadgeCheck className="mr-1 h-3 w-3" />
-                  Independent reporting
-                </Badge>
-              ) : data.evaluator_count > 0 ? (
+              {data.evaluator_count > 0 ? (
                 <Badge variant="secondary">{reportingSummaryLabel}</Badge>
               ) : null}
             </div>
@@ -207,7 +216,7 @@ export function BenchmarkEvaluationCard({ data, onDelete, delayMs = 0 }: Benchma
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
-              <DropdownMenuItem onClick={() => router.push(`/evaluations/${data.route_id}`)}>
+              <DropdownMenuItem onClick={() => router.push(`/models/${data.route_id}`)}>
                 <Eye className="mr-2 h-4 w-4" />
                 View Details
               </DropdownMenuItem>
@@ -241,8 +250,8 @@ export function BenchmarkEvaluationCard({ data, onDelete, delayMs = 0 }: Benchma
             tone="bg-stone-100 text-stone-900 ring-1 ring-stone-200/80 dark:bg-stone-900/40 dark:text-stone-100 dark:ring-stone-800/70"
           />
           <CompactStat
-            label={isResearchView ? "Independent" : "Third-party"}
-            value={`${Math.round(data.independent_verification_ratio * 100)}%`}
+            label="Reporting Mix"
+            value={getReportingMixLabel(data)}
             tone="bg-emerald-50 text-emerald-900 ring-1 ring-emerald-200/70 dark:bg-emerald-950/25 dark:text-emerald-100 dark:ring-emerald-900/50"
           />
         </div>
@@ -310,9 +319,11 @@ export function BenchmarkEvaluationCard({ data, onDelete, delayMs = 0 }: Benchma
                     <div className="text-sm font-semibold">Reporting summary</div>
                     <div className="text-sm text-muted-foreground">
                       This model has reported results from {reportingSummaryLabel.toLowerCase()} across {data.benchmarks_count} benchmark{data.benchmarks_count !== 1 ? "s" : ""}.
-                      {data.independent_verification_ratio > 0
-                        ? ` ${Math.round(data.independent_verification_ratio * 100)}% of results are independently reported.`
-                        : " Current results are self-reported."}
+                      {data.independent_verification_ratio > 0 && data.independent_verification_ratio < 1
+                        ? ` The current record mixes self-reported and third-party benchmark results, with ${Math.round(data.independent_verification_ratio * 100)}% coming from third-party reporting.`
+                        : data.independent_verification_ratio >= 1
+                          ? " The current record is fully backed by third-party reporting."
+                          : " The current record is self-reported."}
                     </div>
                     <div className="flex flex-wrap gap-2 pt-1">
                       {data.evaluator_names.slice(0, 2).map((evaluator) => (

components/developer-card.tsx

@@ -0,0 +1,107 @@
+"use client"
+
+import type { ComponentType, CSSProperties } from "react"
+import { useRouter } from "next/navigation"
+import { BarChart3, Boxes, ChevronRight, Sparkles } from "lucide-react"
+
+import { Badge } from "@/components/ui/badge"
+import { Card, CardContent, CardHeader } from "@/components/ui/card"
+import type { DeveloperListItem } from "@/lib/dashboard-data-client"
+
+interface DeveloperCardProps {
+  developer: DeveloperListItem
+  delayMs?: number
+}
+
+export function DeveloperCard({ developer, delayMs = 0 }: DeveloperCardProps) {
+  const router = useRouter()
+
+  return (
+    <Card
+      className="motion-academic-enter motion-academic-surface motion-academic-hover group cursor-pointer overflow-hidden border-border/70 bg-card hover:shadow-lg"
+      style={{ "--enter-delay": `${delayMs}ms` } as CSSProperties}
+      onClick={() => router.push(`/developers/${developer.route_id}`)}
+    >
+      <CardHeader className="space-y-3 border-b border-border/60 pb-4">
+        <div className="text-[10px] font-semibold uppercase tracking-[0.24em] text-muted-foreground">
+          Developer Summary
+        </div>
+
+        <div className="flex items-start justify-between gap-3">
+          <div className="min-w-0">
+            <div className="truncate text-xl font-bold">{developer.developer}</div>
+            <div className="mt-1 text-sm text-muted-foreground">
+              Aggregated reporting across published model variants and their most common single benchmarks
+            </div>
+          </div>
+          <ChevronRight className="mt-1 h-5 w-5 shrink-0 text-muted-foreground transition-transform group-hover:translate-x-0.5" />
+        </div>
+      </CardHeader>
+
+      <CardContent className="space-y-4 pt-4">
+        <div className="grid gap-2 sm:grid-cols-3">
+          <MetricPill
+            icon={Boxes}
+            label="Models"
+            value={developer.model_count.toLocaleString()}
+            tone="bg-sky-100/80 text-sky-900 dark:bg-sky-950/40 dark:text-sky-100"
+          />
+          <MetricPill
+            icon={BarChart3}
+            label="Benchmarks"
+            value={developer.benchmark_count.toLocaleString()}
+            tone="bg-amber-100/80 text-amber-900 dark:bg-amber-950/40 dark:text-amber-100"
+          />
+          <MetricPill
+            icon={Sparkles}
+            label="Results"
+            value={developer.evaluation_count.toLocaleString()}
+            tone="bg-emerald-100/80 text-emerald-900 dark:bg-emerald-950/40 dark:text-emerald-100"
+          />
+        </div>
+
+        <div className="rounded-xl border bg-muted/10 p-3">
+          <div className="mb-2 text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">
+            Scores From
+          </div>
+          <div className="flex flex-wrap gap-2">
+            {developer.popular_evals.length > 0 ? (
+              developer.popular_evals.map((evaluation) => (
+                <Badge key={evaluation.benchmark} variant="secondary">
+                  {evaluation.benchmark}
+                  <span className="ml-1 text-muted-foreground">· {evaluation.model_count}</span>
+                </Badge>
+              ))
+            ) : (
+              <span className="text-sm text-muted-foreground">No benchmark coverage indexed yet</span>
+            )}
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+function MetricPill({
+  icon: Icon,
+  label,
+  value,
+  tone,
+}: {
+  icon: ComponentType<{ className?: string }>
+  label: string
+  value: string
+  tone: string
+}) {
+  return (
+    <div className={`flex items-center justify-between rounded-xl px-3 py-2 ${tone}`}>
+      <div className="flex items-center gap-2">
+        <Icon className="h-4 w-4" />
+        <span className="text-[11px] font-semibold uppercase tracking-[0.18em] opacity-80">
+          {label}
+        </span>
+      </div>
+      <span className="text-sm font-bold">{value}</span>
+    </div>
+  )
+}

components/eval-card.tsx

@@ -26,7 +26,7 @@ export function EvalCard({ summary, delayMs = 0 }: EvalCardProps) {
   const { mode } = useAudienceMode()
   const isResearchView = mode === "research"
   const scorePercent = `${Math.round(summary.avg_score_norm * 100)}%`
-  const purpose = summary.factsheet?.purpose ?? "General capability evaluation"
+  const purpose = summary.factsheet?.purpose ?? "General single-benchmark evaluation"
 
   return (
     <Card
@@ -36,11 +36,14 @@ export function EvalCard({ summary, delayMs = 0 }: EvalCardProps) {
     >
       <CardHeader className="space-y-3 border-b border-border/60 pb-4">
         <div className="text-[10px] font-semibold uppercase tracking-[0.24em] text-muted-foreground">
-          Eval Summary
+          Single Benchmark
         </div>
 
         <div className="min-w-0">
           <div className="text-xl font-bold">{summary.evaluation_name}</div>
+          <div className="mt-1 text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
+            Composite benchmark: {summary.composite_benchmark_name}
+          </div>
           <div className="mt-1 text-sm text-muted-foreground line-clamp-2">
             {summary.metric_config.evaluation_description}
           </div>

components/eval-detail.tsx

@@ -137,7 +137,7 @@ export function EvalDetail({ summary }: EvalDetailProps) {
   const scoreDirectionLabel = summary.metric_config.lower_is_better ? "Lower scores rank higher" : "Higher scores rank higher"
   const leaderboardTitle = isResearchView ? "Leaderboard" : "Reporting Comparison"
   const leaderboardDescription = isResearchView
-    ? "Models ranked by normalized score for this evaluation."
+    ? "Models ranked by normalized score for this benchmark."
     : "Model results with stronger emphasis on reporting context and evaluator provenance."
 
   const toggleRow = (key: string) =>
@@ -154,7 +154,10 @@ export function EvalDetail({ summary }: EvalDetailProps) {
             <div className="space-y-3">
               <div className="flex flex-wrap items-center gap-2">
                 <Badge variant="outline" className="border-border/60 bg-background/80 text-[11px] uppercase tracking-[0.18em]">
-                  Eval Metadata
+                  Single Benchmark
+                </Badge>
+                <Badge variant="secondary" className="font-normal">
+                  Composite: {summary.composite_benchmark_name}
                 </Badge>
                 <Badge variant="secondary" className="font-normal capitalize">
                   {summary.metric_config.score_type}
@@ -227,10 +230,16 @@ export function EvalDetail({ summary }: EvalDetailProps) {
             <div className="text-[11px] font-semibold uppercase tracking-[0.2em] text-muted-foreground">
               {isResearchView ? "Metric specification" : "Reading context"}
             </div>
-            <dl className="mt-3 grid gap-x-6 gap-y-3 text-sm sm:grid-cols-2 xl:grid-cols-4">
+            <dl className="mt-3 grid gap-x-6 gap-y-3 text-sm sm:grid-cols-2 xl:grid-cols-5">
+              <div>
+                <dt className="text-[11px] font-semibold uppercase tracking-[0.16em] text-muted-foreground">
+                  Composite benchmark
+                </dt>
+                <dd className="mt-1 break-words font-medium">{summary.composite_benchmark_name}</dd>
+              </div>
               <div>
                 <dt className="text-[11px] font-semibold uppercase tracking-[0.16em] text-muted-foreground">
-                  {isResearchView ? "Benchmark ID" : "What this covers"}
+                  {isResearchView ? "Single benchmark ID" : "What this covers"}
                 </dt>
                 <dd className="mt-1 break-words font-medium">
                   {isResearchView ? summary.evaluation_id : summary.metric_config.evaluation_description}

components/navigation.tsx

@@ -24,7 +24,10 @@ export function Navigation() {
       href: "/models",
       label: "Models",
       icon: LayoutGrid,
-      isActive: pathname === "/models" || pathname === "/benchmarks" || pathname?.startsWith("/evaluations")
+      isActive:
+        pathname === "/models" ||
+        pathname?.startsWith("/models/") ||
+        pathname?.startsWith("/developers/")
     },
     {
       href: "/evals",

lib/dashboard-data-client.ts

@@ -15,6 +15,31 @@ export interface EvalListResponse {
   totalModels: number
 }
 
+export interface DeveloperListItem {
+  developer: string
+  route_id: string
+  model_count: number
+  benchmark_count: number
+  evaluation_count: number
+  popular_evals: Array<{
+    benchmark: string
+    model_count: number
+  }>
+}
+
+export interface DeveloperSummaryResponse {
+  developer: string
+  route_id: string
+  model_count: number
+  benchmark_count: number
+  evaluation_count: number
+  popular_evals: Array<{
+    benchmark: string
+    model_count: number
+  }>
+  models: BenchmarkEvaluationCardData[]
+}
+
 async function fetchJson<T>(input: string): Promise<T> {
   const response = await fetch(input)
 
@@ -48,3 +73,13 @@ export function fetchEvalSummary(evalId: string) {
     `/api/eval-summary?id=${encodeURIComponent(evalId)}`
   )
 }
+
+export function fetchDevelopers() {
+  return fetchJson<DeveloperListItem[]>("/api/developers")
+}
+
+export function fetchDeveloperSummary(developerId: string) {
+  return fetchJson<DeveloperSummaryResponse>(
+    `/api/developer-summary?id=${encodeURIComponent(developerId)}`
+  )
+}

lib/eval-processing.ts

@@ -76,7 +76,8 @@ function getEvaluationSummaryId(
   evaluation: BenchmarkEvaluation,
   result: EvaluationResult
 ): string {
-  return slugify(`${getBenchmarkName(evaluation, result)}__${result.evaluation_name}`)
+  const benchmarkKey = evaluation.benchmark || getBenchmarkName(evaluation, result)
+  return slugify(`${benchmarkKey}__${result.evaluation_name}`)
 }
 
 // ── Eval-centric (per-benchmark) types ────────────────────────────────────────
@@ -95,6 +96,8 @@ export interface BenchmarkEvalSummary {
   evaluation_name: string
   /** URL-safe slug derived from evaluation_name */
   evaluation_id: string
+  composite_benchmark_key: string
+  composite_benchmark_name: string
   category: CategoryType
   metric_config: MetricConfig
   factsheet: EvaluationResult['factsheet'] | undefined
@@ -722,9 +725,10 @@ export function groupEvaluationsByBenchmark(
 
   for (const eval_ of evaluations) {
     for (const result of eval_.evaluation_results) {
-      const name = result.evaluation_name
       const displayName = getEvaluationDisplayName(eval_, result)
       const evalId = getEvaluationSummaryId(eval_, result)
+      const compositeBenchmarkKey = eval_.benchmark || getBenchmarkName(eval_, result)
+      const compositeBenchmarkName = getBenchmarkDisplayName(compositeBenchmarkKey)
 
       if (!summaries[evalId]) {
         // Determine category from factsheet first, then infer
@@ -743,6 +747,8 @@ export function groupEvaluationsByBenchmark(
         summaries[evalId] = {
           evaluation_name: displayName,
           evaluation_id: evalId,
+          composite_benchmark_key: compositeBenchmarkKey,
+          composite_benchmark_name: compositeBenchmarkName,
           category,
           metric_config: result.metric_config,
           factsheet: result.factsheet,

lib/model-data.ts

@@ -8,13 +8,15 @@ import type {
   EvalLibrary,
   EvaluationResult,
   GenerationConfig,
+  MetricConfig,
   ModelInfo,
   SampleResult,
-  ScoreDetails,
   SourceData,
   SourceMetadata,
 } from "@/lib/benchmark-schema"
+import { inferCategoryFromBenchmark } from "@/lib/benchmark-schema"
 import {
+  type BenchmarkEvalListItem,
   createEvaluationCard,
   createModelFamilySummary,
   groupEvaluationsByBenchmark,
@@ -46,21 +48,469 @@ interface RawEvaluationResult
   evaluation_timestamp?: string
 }
 
+interface IndexedModelSummary {
+  id: string
+  name: string
+  developer?: string
+  evaluator_relationship?: string | null
+  benchmark_scores?: Record<string, number>
+}
+
+interface IndexedBenchmarkEntry {
+  benchmark: string
+  model_count: number
+}
+
+interface IndexedBenchmarkDetail {
+  models: Array<{
+    model_id: string
+    name: string
+    developer?: string
+    scores?: Record<string, number>
+  }>
+}
+
+interface IndexedDeveloperEntry {
+  developer: string
+  model_count: number
+}
+
+interface IndexedDeveloperDetail {
+  developer: string
+  models: IndexedModelSummary[]
+}
+
+interface DeveloperAggregateSummary {
+  model_count: number
+  benchmark_count: number
+  evaluation_count: number
+  popular_evals: Array<{
+    benchmark: string
+    model_count: number
+  }>
+}
+
 function getDataDirectory() {
   return path.join(process.cwd(), "data")
 }
 
+function getModelSubdirectory() {
+  return path.join(getDataDirectory(), "models")
+}
+
+function getBenchmarkSubdirectory() {
+  return path.join(getDataDirectory(), "benchmarks")
+}
+
+function getModelsIndexPath() {
+  return path.join(getDataDirectory(), "models.json")
+}
+
+function getBenchmarksIndexPath() {
+  return path.join(getDataDirectory(), "benchmarks.json")
+}
+
+function getDeveloperSubdirectory() {
+  return path.join(getDataDirectory(), "developers")
+}
+
+function getDevelopersIndexPath() {
+  return path.join(getDataDirectory(), "developers.json")
+}
+
 function shouldCacheModelData() {
   return process.env.NODE_ENV === "production"
 }
 
+function shouldCacheIndexes() {
+  return process.env.NODE_ENV === "production"
+}
+
+async function listJsonFiles(directory: string): Promise<string[]> {
+  try {
+    const entries = await fs.readdir(directory, { withFileTypes: true })
+
+    return entries
+      .filter((entry) => entry.isFile() && entry.name.endsWith(".json"))
+      .map((entry) => path.join(directory, entry.name))
+  } catch {
+    return []
+  }
+}
+
 async function listModelDataFiles(): Promise<string[]> {
-  const entries = await fs.readdir(getDataDirectory(), { withFileTypes: true })
+  const [rootFiles, modelFiles] = await Promise.all([
+    listJsonFiles(getDataDirectory()),
+    listJsonFiles(getModelSubdirectory()),
+  ])
+
+  // Prefer the pipeline layout:
+  //   data/models/*.json
+  // Fall back to the legacy flat layout:
+  //   data/*.json
+  // Root-level index files such as data/models.json are not raw model detail files.
+  const preferredFiles = modelFiles.length > 0 ? modelFiles : rootFiles
+
+  return preferredFiles.sort((a, b) => a.localeCompare(b))
+}
+
+async function readJsonFile<T>(filePath: string): Promise<T | null> {
+  try {
+    return JSON.parse(await fs.readFile(filePath, "utf8")) as T
+  } catch {
+    return null
+  }
+}
+
+let cachedModelIndexPromise: Promise<IndexedModelSummary[] | null> | null = null
+
+async function readModelsIndex() {
+  const load = async () => {
+    const parsed = await readJsonFile<IndexedModelSummary[]>(getModelsIndexPath())
+    return Array.isArray(parsed) ? parsed : null
+  }
+
+  if (!shouldCacheIndexes()) {
+    return load()
+  }
+
+  if (!cachedModelIndexPromise) {
+    cachedModelIndexPromise = load()
+  }
+
+  return cachedModelIndexPromise
+}
+
+let cachedBenchmarkIndexPromise: Promise<IndexedBenchmarkEntry[] | null> | null = null
+
+async function readBenchmarksIndex() {
+  const load = async () => {
+    const parsed = await readJsonFile<IndexedBenchmarkEntry[]>(getBenchmarksIndexPath())
+    return Array.isArray(parsed) ? parsed : null
+  }
+
+  if (!shouldCacheIndexes()) {
+    return load()
+  }
+
+  if (!cachedBenchmarkIndexPromise) {
+    cachedBenchmarkIndexPromise = load()
+  }
+
+  return cachedBenchmarkIndexPromise
+}
+
+let cachedDeveloperIndexPromise: Promise<IndexedDeveloperEntry[] | null> | null = null
+
+async function readDevelopersIndex() {
+  const load = async () => {
+    const parsed = await readJsonFile<IndexedDeveloperEntry[]>(getDevelopersIndexPath())
+    return Array.isArray(parsed) ? parsed : null
+  }
+
+  if (!shouldCacheIndexes()) {
+    return load()
+  }
+
+  if (!cachedDeveloperIndexPromise) {
+    cachedDeveloperIndexPromise = load()
+  }
+
+  return cachedDeveloperIndexPromise
+}
+
+function humanizeToken(token: string) {
+  return token
+    .split(/[_-]+/g)
+    .filter(Boolean)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(" ")
+}
+
+function getBenchmarkDisplayName(benchmark: string) {
+  if (benchmark === "hfopenllm_v2") return "HF Open LLM v2"
+  return humanizeToken(benchmark)
+}
+
+function getBenchmarkMetricDisplayName(benchmark: string, metric: string) {
+  const normalized = metric.trim()
+  const genericMetrics = new Set([
+    "score",
+    "accuracy",
+    "mean win rate",
+    "exact match",
+    "f1",
+    "pass@1",
+  ])
+
+  if (genericMetrics.has(normalized.toLowerCase())) {
+    return `${getBenchmarkDisplayName(benchmark)} - ${normalized}`
+  }
+
+  return normalized
+}
+
+function slugifyEvalId(value: string) {
+  return value.toLowerCase().replace(/[^a-z0-9]+/g, "_").replace(/^_|_$/g, "")
+}
+
+function inferMetricConfig(scores: number[], benchmark: string, metric: string): MetricConfig {
+  const finiteScores = scores.filter((score) => Number.isFinite(score))
+  const maxScore = finiteScores.length > 0 ? Math.max(...finiteScores) : 1
+  const minScore = finiteScores.length > 0 ? Math.min(...finiteScores) : 0
+  const appearsNormalized = minScore >= 0 && maxScore <= 1.05
+
+  return {
+    evaluation_description: `${metric} on ${getBenchmarkDisplayName(benchmark)}`,
+    lower_is_better: false,
+    score_type: "continuous",
+    min_score: appearsNormalized ? 0 : Math.min(0, minScore),
+    max_score: appearsNormalized ? 1 : Math.max(100, maxScore),
+    unit: appearsNormalized ? "accuracy" : undefined,
+  }
+}
+
+async function buildEvalListDataFromBenchmarkIndexes(): Promise<{
+  evals: BenchmarkEvalListItem[]
+  totalModels: number
+} | null> {
+  const [benchmarkIndex, modelIndex] = await Promise.all([
+    readBenchmarksIndex(),
+    readModelsIndex(),
+  ])
+
+  if (!benchmarkIndex?.length) {
+    return null
+  }
+
+  const benchmarkDetails = await Promise.all(
+    benchmarkIndex.map(async ({ benchmark }) => ({
+      benchmark,
+      detail: await readJsonFile<IndexedBenchmarkDetail>(
+        path.join(getBenchmarkSubdirectory(), `${benchmark}.json`)
+      ),
+    }))
+  )
+
+  const evals: BenchmarkEvalListItem[] = []
+
+  for (const { benchmark, detail } of benchmarkDetails) {
+    if (!detail?.models?.length) {
+      continue
+    }
+
+    const metricScores = new Map<string, number[]>()
+
+    for (const model of detail.models) {
+      for (const [metric, score] of Object.entries(model.scores ?? {})) {
+        if (!Number.isFinite(score)) {
+          continue
+        }
+
+        const bucket = metricScores.get(metric) ?? []
+        bucket.push(score)
+        metricScores.set(metric, bucket)
+      }
+    }
+
+    for (const [metric, scores] of metricScores) {
+      if (scores.length === 0) {
+        continue
+      }
+
+      const displayName = getBenchmarkMetricDisplayName(benchmark, metric)
+      const metricConfig = inferMetricConfig(scores, benchmark, metric)
+      const avgScore = scores.reduce((sum, score) => sum + score, 0) / scores.length
+      const maxScore = metricConfig.max_score ?? 1
+      const minScore = metricConfig.min_score ?? 0
+      const range = maxScore - minScore
+
+      evals.push({
+        evaluation_name: displayName,
+        evaluation_id: slugifyEvalId(`${benchmark}__${metric}`),
+        composite_benchmark_key: benchmark,
+        composite_benchmark_name: getBenchmarkDisplayName(benchmark),
+        category: inferCategoryFromBenchmark(displayName),
+        metric_config: metricConfig,
+        factsheet: undefined,
+        models_count: scores.length,
+        evaluator_names: [],
+        source_types: [],
+        latest_source_name: getBenchmarkDisplayName(benchmark),
+        third_party_ratio: 0,
+        missing_generation_config_count: 0,
+        best_model: null,
+        worst_model: null,
+        avg_score: avgScore,
+        avg_score_norm: range > 0 ? (avgScore - minScore) / range : 0,
+      })
+    }
+  }
+
+  return {
+    evals: evals.sort((a, b) => a.evaluation_name.localeCompare(b.evaluation_name)),
+    totalModels: modelIndex?.length ?? 0,
+  }
+}
+
+function createIndexedModelInfo(summary: IndexedModelSummary): ModelInfo {
+  return {
+    id: summary.id,
+    name: summary.name || summary.id,
+    developer: summary.developer,
+  }
+}
+
+function pipelineSlugify(text: string) {
+  return (
+    text
+      .replace(/[\x00-\x1f\x7f]/g, "")
+      .replace(/[^a-zA-Z0-9._-]/g, "_")
+      .replace(/^_+|_+$/g, "") || "unknown"
+  )
+}
+
+function getDeveloperRouteId(developer: string) {
+  return pipelineSlugify(developer)
+}
+
+function getModelDetailSlugCandidates(modelId: string) {
+  const normalized = modelId.trim()
+  const lowercased = normalized.toLowerCase()
+  const candidates = new Set([
+    pipelineSlugify(normalized),
+    pipelineSlugify(lowercased),
+  ])
+
+  return Array.from(candidates)
+}
+
+async function loadEvaluationsForModelId(modelId: string) {
+  for (const slug of getModelDetailSlugCandidates(modelId)) {
+    const raw = await readJsonFile<RawModelFile>(
+      path.join(getModelSubdirectory(), `${slug}.json`)
+    )
+
+    if (!raw?.model_info || !Array.isArray(raw.evaluations)) {
+      continue
+    }
+
+    return raw.evaluations.map((evaluation) =>
+      normalizeEvaluation(raw.model_info, evaluation)
+    )
+  }
+
+  return []
+}
+
+async function loadEvaluationsForModelIds(modelIds: string[]) {
+  const loaded = await Promise.all(modelIds.map((modelId) => loadEvaluationsForModelId(modelId)))
+  return loaded.flat()
+}
+
+function buildModelCardsFromEvaluations(evaluations: BenchmarkEvaluation[]) {
+  const groupedByModel = groupEvaluationsByModelFamily(evaluations)
+
+  return Object.values(groupedByModel)
+    .map((modelEvaluations) =>
+      createEvaluationCard(createModelFamilySummary(modelEvaluations))
+    )
+    .sort(
+      (a, b) =>
+        new Date(b.latest_timestamp).getTime() - new Date(a.latest_timestamp).getTime()
+    )
+}
+
+function buildDeveloperListFromModelsIndex(models: IndexedModelSummary[]) {
+  const counts = new Map<string, number>()
+
+  for (const model of models) {
+    const developer = model.developer?.trim() || "unknown"
+    counts.set(developer, (counts.get(developer) ?? 0) + 1)
+  }
+
+  return Array.from(counts.entries())
+    .map(([developer, model_count]) => ({
+      developer,
+      route_id: getDeveloperRouteId(developer),
+      model_count,
+    }))
+    .sort((a, b) => a.developer.localeCompare(b.developer))
+}
+
+function summarizeDeveloperModels(models: IndexedModelSummary[]): DeveloperAggregateSummary {
+  const benchmarkCounts = new Map<string, number>()
+  let evaluationCount = 0
+
+  for (const model of models) {
+    const seenBenchmarks = new Set<string>()
+
+    for (const key of Object.keys(model.benchmark_scores ?? {})) {
+      evaluationCount += 1
+
+      const [benchmark] = key.split("/", 1)
+      if (!benchmark || seenBenchmarks.has(benchmark)) {
+        continue
+      }
+
+      seenBenchmarks.add(benchmark)
+      benchmarkCounts.set(benchmark, (benchmarkCounts.get(benchmark) ?? 0) + 1)
+    }
+  }
+
+  const popularEvals = Array.from(benchmarkCounts.entries())
+    .sort((a, b) => {
+      if (b[1] !== a[1]) {
+        return b[1] - a[1]
+      }
+
+      return a[0].localeCompare(b[0])
+    })
+    .slice(0, 3)
+    .map(([benchmark, model_count]) => ({
+      benchmark: getBenchmarkDisplayName(benchmark),
+      model_count,
+    }))
+
+  return {
+    model_count: models.length,
+    benchmark_count: benchmarkCounts.size,
+    evaluation_count: evaluationCount,
+    popular_evals: popularEvals,
+  }
+}
+
+async function readDeveloperDetail(routeId: string) {
+  const direct = await readJsonFile<IndexedDeveloperDetail>(
+    path.join(getDeveloperSubdirectory(), `${routeId}.json`)
+  )
 
-  return entries
-    .filter((entry) => entry.isFile() && entry.name.endsWith(".json"))
-    .map((entry) => path.join(getDataDirectory(), entry.name))
-    .sort((a, b) => a.localeCompare(b))
+  if (direct?.developer && Array.isArray(direct.models)) {
+    return direct
+  }
+
+  const developersIndex = await readDevelopersIndex()
+  const matchedDeveloper = developersIndex?.find(
+    (entry) =>
+      entry.developer === routeId || getDeveloperRouteId(entry.developer) === routeId
+  )
+
+  if (!matchedDeveloper) {
+    return null
+  }
+
+  const resolved = await readJsonFile<IndexedDeveloperDetail>(
+    path.join(
+      getDeveloperSubdirectory(),
+      `${getDeveloperRouteId(matchedDeveloper.developer)}.json`
+    )
+  )
+
+  if (resolved?.developer && Array.isArray(resolved.models)) {
+    return resolved
+  }
+
+  return null
 }
 
 function getFallbackSourceData(
@@ -157,14 +607,15 @@ export async function getDashboardData() {
 
 export async function getModelCards() {
   const evaluations = await loadAllEvaluationsFromDataDirectory()
-  const groupedByModel = groupEvaluationsByModelFamily(evaluations)
-
-  return Object.values(groupedByModel).map((modelEvaluations) =>
-    createEvaluationCard(createModelFamilySummary(modelEvaluations))
-  )
+  return buildModelCardsFromEvaluations(evaluations)
 }
 
 export async function getEvalListData() {
+  const indexed = await buildEvalListDataFromBenchmarkIndexes()
+  if (indexed) {
+    return indexed
+  }
+
   const evaluations = await loadAllEvaluationsFromDataDirectory()
   const summaries = Object.values(groupEvaluationsByBenchmark(evaluations))
   const totalModels = Object.keys(groupEvaluationsByModelFamily(evaluations)).length
@@ -180,7 +631,169 @@ export async function getEvalList() {
   return evals
 }
 
+export async function getDeveloperList() {
+  const [developersIndex, modelsIndex] = await Promise.all([
+    readDevelopersIndex(),
+    readModelsIndex(),
+  ])
+
+  if (developersIndex?.length) {
+    const details = await Promise.all(
+      developersIndex.map(async (entry) => ({
+        developer: entry.developer,
+        detail: await readJsonFile<IndexedDeveloperDetail>(
+          path.join(
+            getDeveloperSubdirectory(),
+            `${getDeveloperRouteId(entry.developer)}.json`
+          )
+        ),
+      }))
+    )
+
+    return details
+      .map(({ developer, detail }) => {
+        const aggregate = summarizeDeveloperModels(detail?.models ?? [])
+
+        return {
+          developer,
+          route_id: getDeveloperRouteId(developer),
+          model_count: detail?.models?.length ?? aggregate.model_count ?? 0,
+          benchmark_count: aggregate.benchmark_count,
+          evaluation_count: aggregate.evaluation_count,
+          popular_evals: aggregate.popular_evals,
+        }
+      })
+      .sort((a, b) => a.developer.localeCompare(b.developer))
+  }
+
+  if (modelsIndex?.length) {
+    return buildDeveloperListFromModelsIndex(modelsIndex).map((entry) => {
+      const developerModels = modelsIndex.filter(
+        (model) => (model.developer?.trim() || "unknown") === entry.developer
+      )
+      const aggregate = summarizeDeveloperModels(developerModels)
+
+      return {
+        ...entry,
+        benchmark_count: aggregate.benchmark_count,
+        evaluation_count: aggregate.evaluation_count,
+        popular_evals: aggregate.popular_evals,
+      }
+    })
+  }
+
+  const evaluations = await loadAllEvaluationsFromDataDirectory()
+  const groupedByModel = groupEvaluationsByModel(evaluations)
+  const counts = new Map<string, number>()
+
+  for (const modelEvaluations of Object.values(groupedByModel)) {
+    const developer = modelEvaluations[0]?.model_info.developer?.trim() || "unknown"
+    counts.set(developer, (counts.get(developer) ?? 0) + 1)
+  }
+
+  return Array.from(counts.entries())
+    .map(([developer, model_count]) => ({
+      developer,
+      route_id: getDeveloperRouteId(developer),
+      model_count,
+      benchmark_count: 0,
+      evaluation_count: 0,
+      popular_evals: [],
+    }))
+    .sort((a, b) => a.developer.localeCompare(b.developer))
+}
+
+export async function getDeveloperSummaryById(routeId: string) {
+  const detail = await readDeveloperDetail(routeId)
+
+  if (detail) {
+    const evaluations = await loadEvaluationsForModelIds(
+      detail.models.map((model) => model.id)
+    )
+    const aggregate = summarizeDeveloperModels(detail.models)
+
+    return {
+      developer: detail.developer,
+      route_id: getDeveloperRouteId(detail.developer),
+      model_count: aggregate.model_count,
+      benchmark_count: aggregate.benchmark_count,
+      evaluation_count: aggregate.evaluation_count,
+      popular_evals: aggregate.popular_evals,
+      models: buildModelCardsFromEvaluations(evaluations),
+    }
+  }
+
+  const evaluations = await loadAllEvaluationsFromDataDirectory()
+  const groupedByModel = groupEvaluationsByModel(evaluations)
+  const matchedEvaluations = Object.values(groupedByModel)
+    .filter((modelEvaluations) => {
+      const developer = modelEvaluations[0]?.model_info.developer?.trim() || "unknown"
+      return developer === routeId || getDeveloperRouteId(developer) === routeId
+    })
+    .flat()
+
+  if (matchedEvaluations.length === 0) {
+    return null
+  }
+
+  const developer = matchedEvaluations[0]?.model_info.developer?.trim() || "unknown"
+  const groupedModels = groupEvaluationsByModel(matchedEvaluations)
+  const fallbackModels: IndexedModelSummary[] = Object.values(groupedModels).map((items) => ({
+    id: items[0]?.model_info.id ?? "unknown",
+    name: items[0]?.model_info.name ?? items[0]?.model_info.id ?? "unknown",
+    developer,
+    benchmark_scores: Object.fromEntries(
+      items.flatMap((evaluation) =>
+        evaluation.evaluation_results
+          .map((result) => {
+            const score = result.score_details?.score
+            if (!Number.isFinite(score)) {
+              return null
+            }
+
+            const benchmarkName =
+              !Array.isArray(result.source_data) && result.source_data?.dataset_name
+                ? result.source_data.dataset_name
+                : evaluation.benchmark ?? result.evaluation_name
+
+            return [[`${benchmarkName}/${result.evaluation_name}`, score]] as const
+          })
+          .filter((entry): entry is readonly [string, number][] => entry !== null)
+      ),
+    ),
+  }))
+  const aggregate = summarizeDeveloperModels(fallbackModels)
+
+  return {
+    developer,
+    route_id: getDeveloperRouteId(developer),
+    model_count: aggregate.model_count,
+    benchmark_count: aggregate.benchmark_count,
+    evaluation_count: aggregate.evaluation_count,
+    popular_evals: aggregate.popular_evals,
+    models: buildModelCardsFromEvaluations(matchedEvaluations),
+  }
+}
+
 export async function getModelSummaryById(modelId: string) {
+  const indexedModels = await readModelsIndex()
+
+  if (indexedModels?.length) {
+    const matchingModelIds = indexedModels
+      .filter((summary) => {
+        const familyId = getCanonicalModelIdentity(createIndexedModelInfo(summary)).familyId
+        return familyId === modelId || getModelFamilyRouteId(familyId) === modelId || summary.id === modelId
+      })
+      .map((summary) => summary.id)
+
+    if (matchingModelIds.length > 0) {
+      const evaluations = await loadEvaluationsForModelIds(matchingModelIds)
+      if (evaluations.length > 0) {
+        return createModelFamilySummary(evaluations)
+      }
+    }
+  }
+
   const evaluations = await loadAllEvaluationsFromDataDirectory()
   const groupedByFamily = groupEvaluationsByModelFamily(evaluations)
   const directFamilyMatch = groupedByFamily[modelId]

lib/model-family.ts

@@ -191,11 +191,26 @@ export function getCanonicalModelIdentity(modelInfo: ModelInfo): ParsedModelIden
 
 export function normalizeModelInfo(modelInfo: ModelInfo): ModelInfo {
   const identity = getCanonicalModelIdentity(modelInfo)
+  const additionalArchitecture =
+    typeof modelInfo.additional_details?.architecture === "string"
+      ? modelInfo.additional_details.architecture
+      : undefined
+  const rawParamsBillions = modelInfo.additional_details?.params_billions
+  const parsedParamsBillions =
+    typeof rawParamsBillions === "number"
+      ? rawParamsBillions
+      : typeof rawParamsBillions === "string"
+        ? Number.parseFloat(rawParamsBillions)
+        : null
 
   return {
     ...modelInfo,
     id: modelInfo.id.trim(),
     name: identity.variantDisplayName,
+    architecture: modelInfo.architecture ?? additionalArchitecture,
+    parameter_count:
+      modelInfo.parameter_count ??
+      (Number.isFinite(parsedParamsBillions ?? NaN) ? `${parsedParamsBillions}B` : undefined),
     model_version:
       modelInfo.model_version ??
       (identity.variantKey === "base" ? undefined : identity.variantLabel),