Add the model comparison board to the benchmark hero chart

docs/app/(home)/benchmarks/BenchmarkDetailPage.tsx

@@ -0,0 +1,101 @@
+import { Footer } from "@/app/(home)/sections/Footer/Footer";
+import type { ReactNode } from "react";
+import { PillLink } from "../components/Button/Button";
+
+type DetailLink = {
+  href: string;
+  label: string;
+  external?: boolean;
+};
+
+export function BenchmarkDetailPage({
+  eyebrow,
+  title,
+  description,
+  sections,
+  sibling,
+  downloads,
+  children,
+}: {
+  eyebrow: string;
+  title: string;
+  description: string;
+  sections: ReadonlyArray<{ id: string; label: string }>;
+  sibling: DetailLink;
+  downloads: ReadonlyArray<DetailLink>;
+  children: ReactNode;
+}) {
+  return (
+    <>
+      <div className="min-h-screen bg-[linear-gradient(to_bottom,var(--openui-foreground),var(--openui-background)_10rem,var(--openui-background)_calc(100%_-_10rem),var(--openui-foreground))] [[data-theme=dark]_&]:bg-[linear-gradient(to_bottom,#000,var(--swatch-neutral-950)_28rem,var(--swatch-neutral-950)_calc(100%_-_28rem),#000)]">
+        <main className="mx-auto flex w-full max-w-[var(--home-container-wide)] gap-4 px-4 pt-16 pb-40 lg:gap-28 lg:pr-8 min-[1249px]:pl-0 min-[1024px]:max-[1248px]:pl-8">
+          <aside className="hidden w-56 shrink-0 lg:block">
+            <div className="sticky top-24">
+              <p className="mb-3 text-sm font-medium text-fd-foreground">On this page</p>
+              <ul className="space-y-2 text-sm text-[color:var(--openui-text-neutral-tertiary)]">
+                {sections.map((section) => (
+                  <li key={section.id}>
+                    <a href={`#${section.id}`}>{section.label}</a>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </aside>
+
+          <div className="min-w-0 flex-1">
+            <p className="mb-3 text-sm font-medium text-[color:var(--openui-text-neutral-secondary)]">
+              {eyebrow}
+            </p>
+            <h1 className="mb-3 max-w-4xl text-[length:var(--home-title-size)] font-[family-name:var(--home-font-display)] font-medium leading-[var(--home-title-leading)] tracking-[var(--home-title-tracking)] text-[color:var(--openui-text-neutral-primary)]">
+              {title}
+            </h1>
+            <p className="mb-5 max-w-3xl text-[length:var(--home-lead-size)] font-[family-name:var(--home-font-text)] leading-[var(--home-lead-leading)] text-[color:var(--openui-text-neutral-secondary)]">
+              {description}
+            </p>
+            <nav
+              aria-label="Benchmark pages"
+              className="-ml-3 flex flex-wrap items-center gap-1 border-b border-[color:var(--home-hairline)] pb-6"
+            >
+              <PillLink href="/benchmarks" variant="ghost">
+                Benchmark overview
+              </PillLink>
+              <PillLink href={sibling.href} variant="ghost" external={sibling.external}>
+                {sibling.label}
+              </PillLink>
+              <PillLink href="/benchmarks/methodology" variant="ghost">
+                Methodology
+              </PillLink>
+            </nav>
+
+            <article className="prose mt-8 min-w-0 max-w-none">{children}</article>
+
+            <section
+              id="downloads"
+              aria-labelledby="downloads-heading"
+              className="mt-12 border-t border-[color:var(--home-hairline)] pt-8"
+            >
+              <h2 id="downloads-heading" className="mb-4 text-xl font-medium">
+                Data for agents and analysis
+              </h2>
+              <ul className="flex flex-wrap gap-x-6 gap-y-2 text-sm">
+                {downloads.map((link) => (
+                  <li key={link.href}>
+                    <a
+                      href={link.href}
+                      target={link.external ? "_blank" : undefined}
+                      rel={link.external ? "noopener noreferrer" : undefined}
+                      className="underline decoration-[color:var(--home-hairline)] underline-offset-4"
+                    >
+                      {link.label}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </section>
+          </div>
+        </main>
+      </div>
+      <Footer />
+    </>
+  );
+}

docs/app/(home)/benchmarks/BenchmarksContent.tsx

@@ -9,18 +9,19 @@ import { RenderSplit } from "@/components/charts/render-split";
 import { RepairFunnelFlow } from "@/components/charts/repair-funnel-flow";
 import { SpeedTokens } from "@/components/charts/speed-tokens";
 import {
+  blankScreens,
   BRIEFS,
+  completionByDensity,
+  completionOver,
   COST_MODELS,
+  costPerPass,
   FORMAT_ORDER,
   LINKS,
+  MODEL_BOARD_SIZE,
   MODELS,
-  RUNS_PER_FORMAT,
-  blankScreens,
-  completionByDensity,
-  completionOver,
-  costPerPass,
   production,
   repairedShare,
+  RUNS_PER_FORMAT,
 } from "@/lib/benchmark-data";
 import { ChartLineUp, CurrencyDollarSimple, ShieldCheck, Wrench } from "@phosphor-icons/react";
 import { ArrowUpRight } from "lucide-react";
@@ -124,21 +125,21 @@ function Section({
 
 export function BenchmarksContent() {
   return (
-    <main className={s.page}>
+    <main id="benchmark-content" className={s.page}>
       <VizSkin vivid>
         <header className={s.hero}>
           <div className={s.heroLockup}>
             <p className={s.heroAside}>
-              46 real screens, 6 models, 3 formats: 1,104 scored runs each
+              {MODEL_BOARD_SIZE} models on OpenUI, plus a 6-model comparison across 3 generative UI
+              formats
             </p>
             <div className={s.heroCopy}>
               <p className={s.heroEyebrow}>
                 <span>OpenUI</span>
                 <span className={s.heroTag}>Benchmarks</span>
               </p>
               <h1 className={s.heroTitle}>
-                <span>Generative UI</span>
-                <span>Benchmark</span>
+                <span>Generative UI</span> <span>Benchmark</span>
               </h1>
             </div>
             <div className={s.heroActions}>
@@ -169,7 +170,10 @@ export function BenchmarksContent() {
           <ReliabilityByModel models={ALL_MODELS} formats={FORMAT_ORDER} />
         </section>
 
-        <div className={s.featureBand} aria-label="Headline results">
+        <div className={s.featureBand} aria-labelledby="headline-results-heading">
+          <h2 id="headline-results-heading" className={s.srOnly}>
+            Headline results
+          </h2>
           <FeatureGridSection
             features={HEADLINE_FEATURES}
             showHeader={false}

docs/app/(home)/benchmarks/agent.md/route.ts

@@ -0,0 +1,14 @@
+import { benchmarkAgentMarkdown } from "@/lib/benchmark-agent-data";
+
+export const dynamic = "force-static";
+export const revalidate = false;
+
+export function GET() {
+  return new Response(benchmarkAgentMarkdown(), {
+    headers: {
+      "Content-Type": "text/markdown; charset=utf-8",
+      "Cache-Control": "public, max-age=0, s-maxage=86400, stale-while-revalidate=604800",
+      "Content-Disposition": 'inline; filename="openui-generative-ui-benchmark.md"',
+    },
+  });
+}

docs/app/(home)/benchmarks/benchmarks.module.css

@@ -6,6 +6,17 @@
   font-family: var(--home-font-text);
 }
 
+.srOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
 .hero,
 .heroGrid,
 .column {
@@ -161,6 +172,10 @@
 
 .heroGrid > figure,
 .sectionBody > figure {
+  /* the page lays the cards out edge to edge, so there is no card padding for
+     a full-bleed table to escape */
+  --card-pad: 0px;
+
   width: 100%;
   min-width: 0;
   margin: 0;

docs/app/(home)/benchmarks/data.csv/route.ts

@@ -0,0 +1,14 @@
+import { modelBoardCsv } from "@/lib/benchmark-agent-data";
+
+export const dynamic = "force-static";
+export const revalidate = false;
+
+export function GET() {
+  return new Response(`${modelBoardCsv()}\n`, {
+    headers: {
+      "Content-Type": "text/csv; charset=utf-8",
+      "Cache-Control": "public, max-age=0, s-maxage=86400, stale-while-revalidate=604800",
+      "Content-Disposition": 'inline; filename="openui-model-board.csv"',
+    },
+  });
+}

docs/app/(home)/benchmarks/data.json/route.ts

@@ -0,0 +1,14 @@
+import { benchmarkAgentDataset } from "@/lib/benchmark-agent-data";
+
+export const dynamic = "force-static";
+export const revalidate = false;
+
+export function GET() {
+  return Response.json(benchmarkAgentDataset, {
+    headers: {
+      "Cache-Control": "public, max-age=0, s-maxage=86400, stale-while-revalidate=604800",
+      "Content-Disposition": 'inline; filename="openui-generative-ui-benchmark.json"',
+      Link: `<${benchmarkAgentDataset.$schema}>; rel="describedby"`,
+    },
+  });
+}

docs/app/(home)/benchmarks/data.schema.json/route.ts

@@ -0,0 +1,14 @@
+import { benchmarkDataSchema } from "@/lib/benchmark-data-schema";
+
+export const dynamic = "force-static";
+export const revalidate = false;
+
+export function GET() {
+  return Response.json(benchmarkDataSchema, {
+    headers: {
+      "Content-Type": "application/schema+json; charset=utf-8",
+      "Cache-Control": "public, max-age=0, s-maxage=86400, stale-while-revalidate=604800",
+      "Content-Disposition": 'inline; filename="openui-generative-ui-benchmark.schema.json"',
+    },
+  });
+}

docs/app/(home)/benchmarks/framework/agent.md/route.ts

@@ -0,0 +1,14 @@
+import { frameworkBenchmarkMarkdown } from "@/lib/benchmark-agent-data";
+
+export const dynamic = "force-static";
+export const revalidate = false;
+
+export async function GET() {
+  return new Response(frameworkBenchmarkMarkdown(), {
+    headers: {
+      "Content-Type": "text/markdown; charset=utf-8",
+      "Cache-Control": "public, max-age=0, must-revalidate",
+      "Content-Disposition": 'inline; filename="generative-ui-framework-benchmark.md"',
+    },
+  });
+}

docs/app/(home)/benchmarks/framework/data.csv/route.ts

@@ -0,0 +1,14 @@
+import { frameworkComparisonCsv } from "@/lib/benchmark-agent-data";
+
+export const dynamic = "force-static";
+export const revalidate = false;
+
+export async function GET() {
+  return new Response(frameworkComparisonCsv(), {
+    headers: {
+      "Content-Type": "text/csv; charset=utf-8",
+      "Cache-Control": "public, max-age=0, must-revalidate",
+      "Content-Disposition": 'inline; filename="generative-ui-framework-benchmark.csv"',
+    },
+  });
+}

docs/app/(home)/benchmarks/framework/data.json/route.ts

@@ -0,0 +1,13 @@
+import { frameworkBenchmarkDataset } from "@/lib/benchmark-agent-data";
+
+export const dynamic = "force-static";
+export const revalidate = false;
+
+export async function GET() {
+  return Response.json(frameworkBenchmarkDataset, {
+    headers: {
+      "Cache-Control": "public, max-age=0, must-revalidate",
+      "Content-Disposition": 'inline; filename="generative-ui-framework-benchmark.json"',
+    },
+  });
+}